From 9893ccf27b4b99d59d3a2fe7f288faa73ec872ee Mon Sep 17 00:00:00 2001
From: Fernando Daciuk <f.daciuk@gmail.com>
Date: Sat, 22 May 2021 18:04:29 -0300
Subject: [PATCH 1/5] WIP - Tab

---
 src/components/Tab/Tab.bs.js         | 48 ++++++++++++++++++++++++++++
 src/components/Tab/Tab.res           | 26 +++++++++++++++
 src/components/Tab/Tab_Stories.bs.js | 22 +++++++++++++
 src/components/Tab/Tab_Stories.res   | 16 ++++++++++
 src/components/Tab/Tab_Styles.bs.js  | 17 ++++++++++
 src/components/Tab/Tab_Styles.res    | 10 ++++++
 6 files changed, 139 insertions(+)
 create mode 100644 src/components/Tab/Tab.bs.js
 create mode 100644 src/components/Tab/Tab.res
 create mode 100644 src/components/Tab/Tab_Stories.bs.js
 create mode 100644 src/components/Tab/Tab_Stories.res
 create mode 100644 src/components/Tab/Tab_Styles.bs.js
 create mode 100644 src/components/Tab/Tab_Styles.res

diff --git a/src/components/Tab/Tab.bs.js b/src/components/Tab/Tab.bs.js
new file mode 100644
index 0000000..e7309d7
--- /dev/null
+++ b/src/components/Tab/Tab.bs.js
@@ -0,0 +1,48 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as React from "react";
+import * as Render from "../../lib/Render.bs.js";
+import * as Tab_Styles from "./Tab_Styles.bs.js";
+import * as Typography from "../Typography/Typography.bs.js";
+
+function Tab(Props) {
+  var children = Props.children;
+  return React.createElement("div", {
+              className: Tab_Styles.tab
+            }, children);
+}
+
+function Tab$Pane(Props) {
+  var children = Props.children;
+  return React.createElement("div", {
+              className: Tab_Styles.pane
+            }, React.createElement(Typography.make, {
+                  children: Render.s("Title")
+                }), children);
+}
+
+var Pane = {
+  make: Tab$Pane
+};
+
+function Tab$Content(Props) {
+  var children = Props.children;
+  return React.createElement("div", undefined, children);
+}
+
+var Content = {
+  make: Tab$Content
+};
+
+var Styles;
+
+var make = Tab;
+
+export {
+  Styles ,
+  make ,
+  Pane ,
+  Content ,
+  
+}
+/* react Not a pure module */
diff --git a/src/components/Tab/Tab.res b/src/components/Tab/Tab.res
new file mode 100644
index 0000000..e508f1d
--- /dev/null
+++ b/src/components/Tab/Tab.res
@@ -0,0 +1,26 @@
+open Render
+
+module Styles = Tab_Styles
+
+@react.component
+let make = (~children) =>
+  <div className=Styles.tab>
+    children
+  </div>
+
+module Pane = {
+  @react.component
+  let make = (~children) =>
+    <div className=Styles.pane>
+      <Typography>{"Title"->s}</Typography>
+      children
+    </div>
+}
+
+module Content = {
+  @react.component
+  let make = (~children, ~pane) =>
+    <div>
+      children
+    </div>
+}
diff --git a/src/components/Tab/Tab_Stories.bs.js b/src/components/Tab/Tab_Stories.bs.js
new file mode 100644
index 0000000..5199186
--- /dev/null
+++ b/src/components/Tab/Tab_Stories.bs.js
@@ -0,0 +1,22 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Tab from "./Tab.bs.js";
+import * as React from "react";
+import * as Render from "../../lib/Render.bs.js";
+import * as Helpers from "../../lib/Helpers.bs.js";
+import * as React$1 from "@storybook/react";
+
+React$1.storiesOf("Tab", Helpers.storybookModule).add("Basic usage", (function (param) {
+        return React.createElement(Tab.make, {
+                    children: null
+                  }, React.createElement(Tab.Pane.make, {
+                        children: Render.s("Tab content for your feed")
+                      }), React.createElement(Tab.Pane.make, {
+                        children: Render.s("Tab content for global feed")
+                      }));
+      }));
+
+export {
+  
+}
+/*  Not a pure module */
diff --git a/src/components/Tab/Tab_Stories.res b/src/components/Tab/Tab_Stories.res
new file mode 100644
index 0000000..ec9f796
--- /dev/null
+++ b/src/components/Tab/Tab_Stories.res
@@ -0,0 +1,16 @@
+open Storybook
+open Render
+
+storiesOf("Tab", Helpers.storybookModule)
+->add("Basic usage", () => {
+  <Tab>
+    <Tab.Pane>
+      {"Tab content for your feed"->s}
+    </Tab.Pane>
+
+    <Tab.Pane>
+      {"Tab content for global feed"->s}
+    </Tab.Pane>
+  </Tab>
+})
+->ignore
diff --git a/src/components/Tab/Tab_Styles.bs.js b/src/components/Tab/Tab_Styles.bs.js
new file mode 100644
index 0000000..16ead9f
--- /dev/null
+++ b/src/components/Tab/Tab_Styles.bs.js
@@ -0,0 +1,17 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as CssJs from "bs-css-emotion/src/CssJs.bs.js";
+
+var tab = CssJs.style([
+      CssJs.border(CssJs.px(1), CssJs.solid, CssJs.red),
+      CssJs.display("flex")
+    ]);
+
+var pane = CssJs.style([CssJs.border(CssJs.px(1), CssJs.solid, CssJs.green)]);
+
+export {
+  tab ,
+  pane ,
+  
+}
+/* tab Not a pure module */
diff --git a/src/components/Tab/Tab_Styles.res b/src/components/Tab/Tab_Styles.res
new file mode 100644
index 0000000..7cef317
--- /dev/null
+++ b/src/components/Tab/Tab_Styles.res
@@ -0,0 +1,10 @@
+open CssJs
+
+let tab = style(.[
+  border(1->px, solid, red),
+  display(#flex),
+])
+
+let pane = style(.[
+  border(1->px, solid, green),
+])

From c5d6693dba8e249e9418de297febd37274b64dff Mon Sep 17 00:00:00 2001
From: deadkff01 <kafferdennis@gmail.com>
Date: Mon, 24 May 2021 22:48:23 -0300
Subject: [PATCH 2/5] chore: improving DX

---
 .env          |  1 +
 package.json  |  4 +++-
 src/index.res |  2 +-
 yarn.lock     | 48 ++++++++++++++++++++++++++++++++++++++++++++++--
 4 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/.env b/.env
index 6f809cc..290198a 100644
--- a/.env
+++ b/.env
@@ -1 +1,2 @@
 SKIP_PREFLIGHT_CHECK=true
+FAST_REFRESH=false
\ No newline at end of file
diff --git a/package.json b/package.json
index b1e40a2..06bc504 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "res:build": "bsb -make-world -clean",
     "res:clean": "bsb -clean",
     "start": "react-scripts start",
+    "start:dev": "run-p start res:watch",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
@@ -67,6 +68,7 @@
     "@storybook/addon-links": "^6.2.9",
     "@storybook/node-logger": "^6.2.9",
     "@storybook/preset-create-react-app": "^3.1.7",
-    "@storybook/react": "^6.2.9"
+    "@storybook/react": "^6.2.9",
+    "npm-run-all": "^4.1.5"
   }
 }
diff --git a/src/index.res b/src/index.res
index f1caefa..f1bd5fe 100644
--- a/src/index.res
+++ b/src/index.res
@@ -1,4 +1,4 @@
-let _ = switch ReactDOM.querySelector("#root") {
+switch ReactDOM.querySelector("#root") {
 | None => Js.log("Componente root não encontrado")
 | Some(element) => ReactDOM.render(<App />, element)
 }
diff --git a/yarn.lock b/yarn.lock
index 05d6845..adb57c5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5358,7 +5358,7 @@ cross-spawn@7.0.3, cross-spawn@^7.0.0, cross-spawn@^7.0.2:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
-cross-spawn@^6.0.0:
+cross-spawn@^6.0.0, cross-spawn@^6.0.5:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
   integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
@@ -9290,6 +9290,16 @@ load-json-file@^2.0.0:
     pify "^2.0.0"
     strip-bom "^3.0.0"
 
+load-json-file@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
+  integrity sha1-L19Fq5HjMhYjT9U62rZo607AmTs=
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^4.0.0"
+    pify "^3.0.0"
+    strip-bom "^3.0.0"
+
 loader-runner@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
@@ -9609,6 +9619,11 @@ memory-fs@^0.5.0:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
+memorystream@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"
+  integrity sha1-htcJCzDORV1j+64S3aUaR93K+bI=
+
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
@@ -10044,6 +10059,21 @@ normalize-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
+npm-run-all@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/npm-run-all/-/npm-run-all-4.1.5.tgz#04476202a15ee0e2e214080861bff12a51d98fba"
+  integrity sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    chalk "^2.4.1"
+    cross-spawn "^6.0.5"
+    memorystream "^0.3.1"
+    minimatch "^3.0.4"
+    pidtree "^0.3.0"
+    read-pkg "^3.0.0"
+    shell-quote "^1.6.1"
+    string.prototype.padend "^3.0.0"
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -10603,6 +10633,11 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.3.tgz#465547f359ccc206d3c48e46a1bcb89bf7ee619d"
   integrity sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==
 
+pidtree@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.3.1.tgz#ef09ac2cc0533df1f3250ccf2c4d366b0d12114a"
+  integrity sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==
+
 pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -11987,6 +12022,15 @@ read-pkg@^2.0.0:
     normalize-package-data "^2.3.2"
     path-type "^2.0.0"
 
+read-pkg@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
+  integrity sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=
+  dependencies:
+    load-json-file "^4.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^3.0.0"
+
 read-pkg@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
@@ -12786,7 +12830,7 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
-shell-quote@1.7.2:
+shell-quote@1.7.2, shell-quote@^1.6.1:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
   integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==

From 2f9baf63452ea4db3211f8b2ed5768cc54aee692 Mon Sep 17 00:00:00 2001
From: deadkff01 <kafferdennis@gmail.com>
Date: Tue, 15 Jun 2021 20:26:40 -0300
Subject: [PATCH 3/5] merge: update

---
 .env                                          |  2 +-
 .storybook/preview-head.html                  | 10 ++-
 package.json                                  |  8 +--
 src/components/Card/Card.res                  |  5 +-
 src/components/Card/Card_Stories.bs.js        |  2 +-
 src/components/Card/Card_Stories.res          |  9 +--
 src/components/Input/Input.bs.js              |  2 +-
 src/components/Link/Link.bs.js                |  2 +-
 src/components/Tab/Tab.bs.js                  | 48 -------------
 src/components/Tab/Tab.res                    | 26 -------
 src/components/Tab/Tab_Stories.bs.js          | 22 ------
 src/components/Tab/Tab_Stories.res            | 16 -----
 src/components/Tab/Tab_Styles.bs.js           | 17 -----
 src/components/Tab/Tab_Styles.res             | 10 ---
 src/components/Tabs/Tab_Stories.bs.js         | 14 ++++
 src/components/Tabs/Tab_Stories.res           |  7 ++
 src/components/Tabs/Tabs.bs.js                | 72 +++++++++++++++++++
 src/components/Tabs/Tabs.res                  | 35 +++++++++
 src/components/Tabs/Tabs_Stories.bs.js        | 62 ++++++++++++++++
 src/components/Tabs/Tabs_Stories.res          | 37 ++++++++++
 src/components/Tabs/Tabs_Styles.bs.js         | 37 ++++++++++
 src/components/Tabs/Tabs_Styles.res           | 30 ++++++++
 src/components/Typography/Typography.bs.js    |  4 +-
 src/components/Typography/Typography.res      | 14 ++--
 .../Typography/Typography_Stories.bs.js       |  4 +-
 .../Typography/Typography_Stories.res         |  4 +-
 src/index.res                                 |  6 +-
 src/lib/Render.bs.js                          |  9 +++
 src/lib/Render.res                            |  5 ++
 src/lib/Theme.bs.js                           | 25 +++++--
 src/lib/Theme.res                             |  9 ++-
 yarn.lock                                     | 10 +--
 32 files changed, 377 insertions(+), 186 deletions(-)
 delete mode 100644 src/components/Tab/Tab.bs.js
 delete mode 100644 src/components/Tab/Tab.res
 delete mode 100644 src/components/Tab/Tab_Stories.bs.js
 delete mode 100644 src/components/Tab/Tab_Stories.res
 delete mode 100644 src/components/Tab/Tab_Styles.bs.js
 delete mode 100644 src/components/Tab/Tab_Styles.res
 create mode 100644 src/components/Tabs/Tab_Stories.bs.js
 create mode 100644 src/components/Tabs/Tab_Stories.res
 create mode 100644 src/components/Tabs/Tabs.bs.js
 create mode 100644 src/components/Tabs/Tabs.res
 create mode 100644 src/components/Tabs/Tabs_Stories.bs.js
 create mode 100644 src/components/Tabs/Tabs_Stories.res
 create mode 100644 src/components/Tabs/Tabs_Styles.bs.js
 create mode 100644 src/components/Tabs/Tabs_Styles.res

diff --git a/.env b/.env
index 290198a..46af40f 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,2 @@
 SKIP_PREFLIGHT_CHECK=true
-FAST_REFRESH=false
\ No newline at end of file
+FAST_REFRESH=false
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index d57495f..b0a6503 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,6 +1,12 @@
-<link rel="preconnect" href="https://fonts.gstatic.com">
-<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link
+  href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap"
+  rel="stylesheet"
+/>
 <style>
+  * {
+    box-sizing: border-box;
+  }
   html {
     font-size: 10px;
   }
diff --git a/package.json b/package.json
index 06bc504..cecdf21 100644
--- a/package.json
+++ b/package.json
@@ -8,16 +8,16 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "bs-css-emotion": "^2.5.1",
-    "bs-platform": "8.4.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
+    "rescript": "9.1.3",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
-    "res:watch": "bsb -make-world -w",
-    "res:build": "bsb -make-world -clean",
-    "res:clean": "bsb -clean",
+    "res:watch": "rescript build -w",
+    "res:build": "rescript build -with-deps",
+    "res:clean": "rescript clean",
     "start": "react-scripts start",
     "start:dev": "run-p start res:watch",
     "build": "react-scripts build",
diff --git a/src/components/Card/Card.res b/src/components/Card/Card.res
index 11d1c0f..67b6fc7 100644
--- a/src/components/Card/Card.res
+++ b/src/components/Card/Card.res
@@ -1,7 +1,6 @@
 open CssJs
 
-let card = style(.[
-  //
+let card = style(. [
   background(Theme.Colors.lightBlue1->hex),
   borderRadius(Theme.Radius.medium),
   padding(3.2->rem),
@@ -9,5 +8,5 @@ let card = style(.[
 
 @react.component
 let make = (~children) => {
-  <div className={card}>children</div>
+  <div className={card}> children </div>
 }
diff --git a/src/components/Card/Card_Stories.bs.js b/src/components/Card/Card_Stories.bs.js
index 5e1135d..dca4db1 100644
--- a/src/components/Card/Card_Stories.bs.js
+++ b/src/components/Card/Card_Stories.bs.js
@@ -12,7 +12,7 @@ React$1.storiesOf("Card", Helpers.storybookModule).add("Basic usage", (function
                     children: null
                   }, React.createElement(Typography.make, {
                         variant: "title",
-                        level: "h1",
+                        level: 1,
                         children: Render.s("ReScript & React.js - Real World App")
                       }), React.createElement(Typography.make, {
                         children: Render.s("Texto")
diff --git a/src/components/Card/Card_Stories.res b/src/components/Card/Card_Stories.res
index 92fd023..2463e20 100644
--- a/src/components/Card/Card_Stories.res
+++ b/src/components/Card/Card_Stories.res
@@ -4,13 +4,8 @@ open Render
 storiesOf("Card", Helpers.storybookModule)
 ->add("Basic usage", () => {
   <Card>
-    <Typography level=#h1 variant=#title>
-      {"ReScript & React.js - Real World App"->s}
-    </Typography>
-
-    <Typography>
-      {"Texto"->s}
-    </Typography>
+    <Typography level=#1 variant=#title> {"ReScript & React.js - Real World App"->s} </Typography>
+    <Typography> {"Texto"->s} </Typography>
   </Card>
 })
 ->ignore
diff --git a/src/components/Input/Input.bs.js b/src/components/Input/Input.bs.js
index 5da2f6e..d53b0b3 100644
--- a/src/components/Input/Input.bs.js
+++ b/src/components/Input/Input.bs.js
@@ -4,7 +4,7 @@ import * as CssJs from "bs-css-emotion/src/CssJs.bs.js";
 import * as Theme from "../../lib/Theme.bs.js";
 import * as React from "react";
 import * as Render from "../../lib/Render.bs.js";
-import * as Caml_option from "bs-platform/lib/es6/caml_option.js";
+import * as Caml_option from "rescript/lib/es6/caml_option.js";
 
 var label = CssJs.style([
       CssJs.fontSize(CssJs.rem(2.0)),
diff --git a/src/components/Link/Link.bs.js b/src/components/Link/Link.bs.js
index 83605fa..67669b1 100644
--- a/src/components/Link/Link.bs.js
+++ b/src/components/Link/Link.bs.js
@@ -3,7 +3,7 @@
 import * as CssJs from "bs-css-emotion/src/CssJs.bs.js";
 import * as Theme from "../../lib/Theme.bs.js";
 import * as React from "react";
-import * as Caml_option from "bs-platform/lib/es6/caml_option.js";
+import * as Caml_option from "rescript/lib/es6/caml_option.js";
 
 var link = CssJs.style([
       CssJs.fontFamily(Theme.fontFamily),
diff --git a/src/components/Tab/Tab.bs.js b/src/components/Tab/Tab.bs.js
deleted file mode 100644
index e7309d7..0000000
--- a/src/components/Tab/Tab.bs.js
+++ /dev/null
@@ -1,48 +0,0 @@
-// Generated by ReScript, PLEASE EDIT WITH CARE
-
-import * as React from "react";
-import * as Render from "../../lib/Render.bs.js";
-import * as Tab_Styles from "./Tab_Styles.bs.js";
-import * as Typography from "../Typography/Typography.bs.js";
-
-function Tab(Props) {
-  var children = Props.children;
-  return React.createElement("div", {
-              className: Tab_Styles.tab
-            }, children);
-}
-
-function Tab$Pane(Props) {
-  var children = Props.children;
-  return React.createElement("div", {
-              className: Tab_Styles.pane
-            }, React.createElement(Typography.make, {
-                  children: Render.s("Title")
-                }), children);
-}
-
-var Pane = {
-  make: Tab$Pane
-};
-
-function Tab$Content(Props) {
-  var children = Props.children;
-  return React.createElement("div", undefined, children);
-}
-
-var Content = {
-  make: Tab$Content
-};
-
-var Styles;
-
-var make = Tab;
-
-export {
-  Styles ,
-  make ,
-  Pane ,
-  Content ,
-  
-}
-/* react Not a pure module */
diff --git a/src/components/Tab/Tab.res b/src/components/Tab/Tab.res
deleted file mode 100644
index e508f1d..0000000
--- a/src/components/Tab/Tab.res
+++ /dev/null
@@ -1,26 +0,0 @@
-open Render
-
-module Styles = Tab_Styles
-
-@react.component
-let make = (~children) =>
-  <div className=Styles.tab>
-    children
-  </div>
-
-module Pane = {
-  @react.component
-  let make = (~children) =>
-    <div className=Styles.pane>
-      <Typography>{"Title"->s}</Typography>
-      children
-    </div>
-}
-
-module Content = {
-  @react.component
-  let make = (~children, ~pane) =>
-    <div>
-      children
-    </div>
-}
diff --git a/src/components/Tab/Tab_Stories.bs.js b/src/components/Tab/Tab_Stories.bs.js
deleted file mode 100644
index 5199186..0000000
--- a/src/components/Tab/Tab_Stories.bs.js
+++ /dev/null
@@ -1,22 +0,0 @@
-// Generated by ReScript, PLEASE EDIT WITH CARE
-
-import * as Tab from "./Tab.bs.js";
-import * as React from "react";
-import * as Render from "../../lib/Render.bs.js";
-import * as Helpers from "../../lib/Helpers.bs.js";
-import * as React$1 from "@storybook/react";
-
-React$1.storiesOf("Tab", Helpers.storybookModule).add("Basic usage", (function (param) {
-        return React.createElement(Tab.make, {
-                    children: null
-                  }, React.createElement(Tab.Pane.make, {
-                        children: Render.s("Tab content for your feed")
-                      }), React.createElement(Tab.Pane.make, {
-                        children: Render.s("Tab content for global feed")
-                      }));
-      }));
-
-export {
-  
-}
-/*  Not a pure module */
diff --git a/src/components/Tab/Tab_Stories.res b/src/components/Tab/Tab_Stories.res
deleted file mode 100644
index ec9f796..0000000
--- a/src/components/Tab/Tab_Stories.res
+++ /dev/null
@@ -1,16 +0,0 @@
-open Storybook
-open Render
-
-storiesOf("Tab", Helpers.storybookModule)
-->add("Basic usage", () => {
-  <Tab>
-    <Tab.Pane>
-      {"Tab content for your feed"->s}
-    </Tab.Pane>
-
-    <Tab.Pane>
-      {"Tab content for global feed"->s}
-    </Tab.Pane>
-  </Tab>
-})
-->ignore
diff --git a/src/components/Tab/Tab_Styles.bs.js b/src/components/Tab/Tab_Styles.bs.js
deleted file mode 100644
index 16ead9f..0000000
--- a/src/components/Tab/Tab_Styles.bs.js
+++ /dev/null
@@ -1,17 +0,0 @@
-// Generated by ReScript, PLEASE EDIT WITH CARE
-
-import * as CssJs from "bs-css-emotion/src/CssJs.bs.js";
-
-var tab = CssJs.style([
-      CssJs.border(CssJs.px(1), CssJs.solid, CssJs.red),
-      CssJs.display("flex")
-    ]);
-
-var pane = CssJs.style([CssJs.border(CssJs.px(1), CssJs.solid, CssJs.green)]);
-
-export {
-  tab ,
-  pane ,
-  
-}
-/* tab Not a pure module */
diff --git a/src/components/Tab/Tab_Styles.res b/src/components/Tab/Tab_Styles.res
deleted file mode 100644
index 7cef317..0000000
--- a/src/components/Tab/Tab_Styles.res
+++ /dev/null
@@ -1,10 +0,0 @@
-open CssJs
-
-let tab = style(.[
-  border(1->px, solid, red),
-  display(#flex),
-])
-
-let pane = style(.[
-  border(1->px, solid, green),
-])
diff --git a/src/components/Tabs/Tab_Stories.bs.js b/src/components/Tabs/Tab_Stories.bs.js
new file mode 100644
index 0000000..e360206
--- /dev/null
+++ b/src/components/Tabs/Tab_Stories.bs.js
@@ -0,0 +1,14 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as React from "react";
+import * as Helpers from "../../lib/Helpers.bs.js";
+import * as React$1 from "@storybook/react";
+
+React$1.storiesOf("Tab", Helpers.storybookModule).add("Basic usage", (function (param) {
+        return React.createElement("div", undefined);
+      }));
+
+export {
+  
+}
+/*  Not a pure module */
diff --git a/src/components/Tabs/Tab_Stories.res b/src/components/Tabs/Tab_Stories.res
new file mode 100644
index 0000000..d519b62
--- /dev/null
+++ b/src/components/Tabs/Tab_Stories.res
@@ -0,0 +1,7 @@
+open Storybook
+
+storiesOf("Tab", Helpers.storybookModule)
+->add("Basic usage", () => {
+  <div />
+})
+->ignore
diff --git a/src/components/Tabs/Tabs.bs.js b/src/components/Tabs/Tabs.bs.js
new file mode 100644
index 0000000..125c4d3
--- /dev/null
+++ b/src/components/Tabs/Tabs.bs.js
@@ -0,0 +1,72 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Curry from "rescript/lib/es6/curry.js";
+import * as React from "react";
+import * as Render from "../../lib/Render.bs.js";
+import * as Caml_obj from "rescript/lib/es6/caml_obj.js";
+import * as Tabs_Styles from "./Tabs_Styles.bs.js";
+
+function Tabs$Tab(Props) {
+  var label = Props.label;
+  var onChange = Props.onChange;
+  var id = Props.id;
+  var active = Props.active;
+  return React.createElement("li", {
+              className: Tabs_Styles.tab(active)
+            }, React.createElement("button", {
+                  onClick: (function (param) {
+                      return Curry._1(onChange, id);
+                    })
+                }, Render.s(label)));
+}
+
+var Tab = {
+  make: Tabs$Tab
+};
+
+function Tabs$Panel(Props) {
+  var active = Props.active;
+  var children = Props.children;
+  if (active) {
+    return React.createElement("div", undefined, children);
+  } else {
+    return null;
+  }
+}
+
+var Panel = {
+  make: Tabs$Panel
+};
+
+function Tabs(Props) {
+  var tabs = Props.tabs;
+  var onChange = Props.onChange;
+  var current = Props.current;
+  return React.createElement("ul", {
+              className: Tabs_Styles.tabs
+            }, Render.map(tabs, (function (tab, key) {
+                    return React.createElement(Tabs$Tab, {
+                                label: tab.label,
+                                onChange: onChange,
+                                id: tab.id,
+                                active: Caml_obj.caml_equal(current, tab.id),
+                                key: key
+                              });
+                  })));
+}
+
+var Styles;
+
+var $$Array;
+
+var make = Tabs;
+
+export {
+  Styles ,
+  $$Array ,
+  Tab ,
+  Panel ,
+  make ,
+  
+}
+/* react Not a pure module */
diff --git a/src/components/Tabs/Tabs.res b/src/components/Tabs/Tabs.res
new file mode 100644
index 0000000..7a62461
--- /dev/null
+++ b/src/components/Tabs/Tabs.res
@@ -0,0 +1,35 @@
+open Render
+
+module Styles = Tabs_Styles
+module Array = Belt.Array
+
+type tab<'tabId> = {
+  label: string,
+  id: 'tabId,
+}
+
+type tabs<'tabId> = array<tab<'tabId>>
+
+module Tab = {
+  @react.component
+  let make = (~label, ~onChange, ~id, ~active) =>
+    <li className={Styles.tab(~active)}>
+      <button onClick={_ => onChange(id)}> {label->s} </button>
+    </li>
+}
+
+module Panel = {
+  @react.component
+  let make = (~active, ~children) => {
+    active ? <div> children </div> : React.null
+  }
+}
+
+@react.component
+let make = (~tabs, ~onChange, ~current) => {
+  <ul className=Styles.tabs>
+    {tabs->map((tab, key) => {
+      <Tab key label=tab.label id=tab.id onChange active={current == tab.id} />
+    })}
+  </ul>
+}
diff --git a/src/components/Tabs/Tabs_Stories.bs.js b/src/components/Tabs/Tabs_Stories.bs.js
new file mode 100644
index 0000000..4cb69dd
--- /dev/null
+++ b/src/components/Tabs/Tabs_Stories.bs.js
@@ -0,0 +1,62 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Card from "../Card/Card.bs.js";
+import * as Tabs from "./Tabs.bs.js";
+import * as Curry from "rescript/lib/es6/curry.js";
+import * as React from "react";
+import * as Render from "../../lib/Render.bs.js";
+import * as Helpers from "../../lib/Helpers.bs.js";
+import * as Typography from "../Typography/Typography.bs.js";
+import * as React$1 from "@storybook/react";
+
+React$1.storiesOf("Tabs", Helpers.storybookModule).add("Basic usage", (function (param) {
+        var match = React.useState(function () {
+              return 0;
+            });
+        var setTab = match[1];
+        var tab = match[0];
+        var tabs = [
+          {
+            label: "Global feed",
+            id: 0
+          },
+          {
+            label: "Your feed",
+            id: 1
+          }
+        ];
+        return React.createElement("div", undefined, React.createElement(Tabs.make, {
+                        tabs: tabs,
+                        onChange: (function (id) {
+                            return Curry._1(setTab, (function (param) {
+                                          return id;
+                                        }));
+                          }),
+                        current: tab
+                      }), React.createElement("br", undefined), React.createElement("div", undefined, React.createElement(Tabs.Panel.make, {
+                            active: tab === 0,
+                            children: React.createElement(Card.make, {
+                                  children: null
+                                }, React.createElement(Typography.make, {
+                                      variant: "title",
+                                      level: 1,
+                                      children: Render.s("ReScript & React.js - Real World App")
+                                    }), React.createElement(Typography.make, {
+                                      children: Render.s("Texto")
+                                    }))
+                          }), React.createElement(Tabs.Panel.make, {
+                            active: tab === 1,
+                            children: React.createElement(Card.make, {
+                                  children: React.createElement(Typography.make, {
+                                        variant: "title",
+                                        level: 2,
+                                        children: Render.s("The global feed...")
+                                      })
+                                })
+                          })));
+      }));
+
+export {
+  
+}
+/*  Not a pure module */
diff --git a/src/components/Tabs/Tabs_Stories.res b/src/components/Tabs/Tabs_Stories.res
new file mode 100644
index 0000000..0a9f88b
--- /dev/null
+++ b/src/components/Tabs/Tabs_Stories.res
@@ -0,0 +1,37 @@
+open Storybook
+open Render
+
+storiesOf("Tabs", Helpers.storybookModule)
+->add("Basic usage", () => {
+  let (tab, setTab) = React.useState(_ => 0)
+
+  let tabs: Tabs.tabs<int> = [
+    {
+      label: "Global feed",
+      id: 0,
+    },
+    {
+      label: "Your feed",
+      id: 1,
+    },
+  ]
+
+  <div>
+    <Tabs current={tab} tabs onChange={id => setTab(_ => id)} />
+    <br />
+    <div>
+      <Tabs.Panel active={tab === 0}>
+        <Card>
+          <Typography level=#1 variant=#title>
+            {"ReScript & React.js - Real World App"->s}
+          </Typography>
+          <Typography> {"Texto"->s} </Typography>
+        </Card>
+      </Tabs.Panel>
+      <Tabs.Panel active={tab === 1}>
+        <Card> <Typography variant=#title level=#2> {`The global feed...`->s} </Typography> </Card>
+      </Tabs.Panel>
+    </div>
+  </div>
+})
+->ignore
diff --git a/src/components/Tabs/Tabs_Styles.bs.js b/src/components/Tabs/Tabs_Styles.bs.js
new file mode 100644
index 0000000..0030d6f
--- /dev/null
+++ b/src/components/Tabs/Tabs_Styles.bs.js
@@ -0,0 +1,37 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as CssJs from "bs-css-emotion/src/CssJs.bs.js";
+import * as Theme from "../../lib/Theme.bs.js";
+
+var tabs = CssJs.style([
+      CssJs.display("flex"),
+      CssJs.margin(CssJs.zero),
+      CssJs.padding(CssJs.zero)
+    ]);
+
+function tab(active) {
+  return CssJs.style([
+              CssJs.listStyleType(CssJs.none),
+              CssJs.selector("> button", [
+                    CssJs.transition(200, undefined, undefined, "color"),
+                    CssJs.padding2(Theme.Spacing.make(1), Theme.Spacing.make(2)),
+                    CssJs.borderRadius(Theme.Radius.small),
+                    CssJs.background(active ? Theme.Colors.blueGradient : CssJs.transparent),
+                    CssJs.color(active ? CssJs.hex(Theme.Colors.white) : CssJs.hex(Theme.Colors.gray1)),
+                    CssJs.borderStyle(CssJs.none),
+                    CssJs.fontFamily(Theme.fontFamily),
+                    CssJs.cursor(CssJs.pointer)
+                  ]),
+              CssJs.hover([CssJs.selector("> button", [
+                          CssJs.transition(200, undefined, undefined, "color"),
+                          CssJs.color(active ? CssJs.hex(Theme.Colors.white) : CssJs.hex(Theme.Colors.blue))
+                        ])])
+            ]);
+}
+
+export {
+  tabs ,
+  tab ,
+  
+}
+/* tabs Not a pure module */
diff --git a/src/components/Tabs/Tabs_Styles.res b/src/components/Tabs/Tabs_Styles.res
new file mode 100644
index 0000000..3dc71a8
--- /dev/null
+++ b/src/components/Tabs/Tabs_Styles.res
@@ -0,0 +1,30 @@
+open CssJs
+
+let tabs = style(. [display(#flex), margin(zero), padding(zero)])
+
+let tab = (~active) =>
+  style(. [
+    listStyleType(none),
+    selector(
+      "> button",
+      [
+        transition(~duration=200, "color"),
+        padding2(~v=Theme.Spacing.make(1), ~h=Theme.Spacing.make(2)),
+        borderRadius(Theme.Radius.small),
+        background(active ? Theme.Colors.blueGradient : transparent),
+        color(active ? Theme.Colors.white->hex : Theme.Colors.gray1->hex),
+        borderStyle(none),
+        fontFamily(Theme.fontFamily),
+        cursor(pointer),
+      ],
+    ),
+    hover([
+      selector(
+        "> button",
+        [
+          transition(~duration=200, "color"),
+          color(active ? Theme.Colors.white->hex : Theme.Colors.blue->hex),
+        ],
+      ),
+    ]),
+  ])
diff --git a/src/components/Typography/Typography.bs.js b/src/components/Typography/Typography.bs.js
index de47563..50c9204 100644
--- a/src/components/Typography/Typography.bs.js
+++ b/src/components/Typography/Typography.bs.js
@@ -36,9 +36,9 @@ function Typography(Props) {
   var levelOpt = Props.level;
   var children = Props.children;
   var variant = variantOpt !== undefined ? variantOpt : "text";
-  var level = levelOpt !== undefined ? levelOpt : "h1";
+  var level = levelOpt !== undefined ? levelOpt : 1;
   if (variant === "title") {
-    if (level === "h2") {
+    if (level === 2) {
       return React.createElement("h2", {
                   className: h2
                 }, children);
diff --git a/src/components/Typography/Typography.res b/src/components/Typography/Typography.res
index 06fda47..6a50eb5 100644
--- a/src/components/Typography/Typography.res
+++ b/src/components/Typography/Typography.res
@@ -1,24 +1,24 @@
 type variant = [#title | #text]
-type level = [#h1 | #h2]
+type level = [#1 | #2]
 
 module Styles = {
   open CssJs
 
-  let h1 = style(.[
+  let h1 = style(. [
     fontSize(3.2->rem),
     fontFamily(Theme.fontFamily),
     fontWeight(#bold),
     color(Theme.Colors.black->hex),
   ])
 
-  let h2 = style(.[
+  let h2 = style(. [
     fontSize(2.8->rem),
     fontFamily(Theme.fontFamily),
     fontWeight(#bold),
     color(Theme.Colors.black->hex),
   ])
 
-  let text = style(.[
+  let text = style(. [
     fontSize(2.0->rem),
     fontFamily(Theme.fontFamily),
     letterSpacing(-0.02->em),
@@ -27,10 +27,10 @@ module Styles = {
 }
 
 @react.component
-let make = (~variant=#text, ~level: level=#h1, ~children) => {
+let make = (~variant=#text, ~level: level=#1, ~children) => {
   switch (variant, level) {
-  | (#title, #h1) => <h1 className={Styles.h1}> children </h1>
-  | (#title, #h2) => <h2 className={Styles.h2}> children </h2>
+  | (#title, #1) => <h1 className={Styles.h1}> children </h1>
+  | (#title, #2) => <h2 className={Styles.h2}> children </h2>
   | (#text, _) => <p className={Styles.text}> children </p>
   }
 }
diff --git a/src/components/Typography/Typography_Stories.bs.js b/src/components/Typography/Typography_Stories.bs.js
index b8d2e82..5f69d54 100644
--- a/src/components/Typography/Typography_Stories.bs.js
+++ b/src/components/Typography/Typography_Stories.bs.js
@@ -13,13 +13,13 @@ React$1.storiesOf("Typography", Helpers.storybookModule).add("Basic usage", (fun
           })).add("Title 1", (function (param) {
           return React.createElement(Typography.make, {
                       variant: "title",
-                      level: "h1",
+                      level: 1,
                       children: Render.s("Title 1")
                     });
         })).add("Title 2", (function (param) {
         return React.createElement(Typography.make, {
                     variant: "title",
-                    level: "h2",
+                    level: 2,
                     children: Render.s("Title 2")
                   });
       }));
diff --git a/src/components/Typography/Typography_Stories.res b/src/components/Typography/Typography_Stories.res
index 0f0f6ae..4b03d0c 100644
--- a/src/components/Typography/Typography_Stories.res
+++ b/src/components/Typography/Typography_Stories.res
@@ -6,9 +6,9 @@ storiesOf("Typography", Helpers.storybookModule)
   <Typography> {`Don’t have an account?`->s} </Typography>
 })
 ->add("Title 1", () => {
-  <Typography variant=#title level=#h1> {`Title 1`->s} </Typography>
+  <Typography variant=#title level=#1> {`Title 1`->s} </Typography>
 })
 ->add("Title 2", () => {
-  <Typography variant=#title level=#h2> {`Title 2`->s} </Typography>
+  <Typography variant=#title level=#2> {`Title 2`->s} </Typography>
 })
 ->ignore
diff --git a/src/index.res b/src/index.res
index f1bd5fe..d306ce1 100644
--- a/src/index.res
+++ b/src/index.res
@@ -1,4 +1,4 @@
 switch ReactDOM.querySelector("#root") {
-| None => Js.log("Componente root não encontrado")
-| Some(element) => ReactDOM.render(<App />, element)
-}
+ | None => Js.log("Componente root não encontrado")
+ | Some(element) => ReactDOM.render(<App />, element)
+}
\ No newline at end of file
diff --git a/src/lib/Render.bs.js b/src/lib/Render.bs.js
index e4fc9e9..0d9de0b 100644
--- a/src/lib/Render.bs.js
+++ b/src/lib/Render.bs.js
@@ -1,12 +1,21 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
+import * as Curry from "rescript/lib/es6/curry.js";
+import * as Belt_Array from "rescript/lib/es6/belt_Array.js";
 
 function s(prim) {
   return prim;
 }
 
+function map(elements, fn) {
+  return Belt_Array.mapWithIndex(elements, (function (key, element) {
+                return Curry._2(fn, element, String(key));
+              }));
+}
+
 export {
   s ,
+  map ,
   
 }
 /* No side effect */
diff --git a/src/lib/Render.res b/src/lib/Render.res
index a938f6f..68868c1 100644
--- a/src/lib/Render.res
+++ b/src/lib/Render.res
@@ -1 +1,6 @@
 let s = React.string
+
+let map = (elements, fn) =>
+  elements
+  ->Belt.Array.mapWithIndex((key, element) => fn(element, key->Belt.Int.toString))
+  ->React.array
diff --git a/src/lib/Theme.bs.js b/src/lib/Theme.bs.js
index 0ec59c0..5c75c93 100644
--- a/src/lib/Theme.bs.js
+++ b/src/lib/Theme.bs.js
@@ -2,13 +2,28 @@
 
 import * as CssJs from "bs-css-emotion/src/CssJs.bs.js";
 
+var blueGradient = CssJs.linearGradient(CssJs.deg(180.0), {
+      hd: [
+        CssJs.pct(0.0),
+        CssJs.hex("477BFF")
+      ],
+      tl: {
+        hd: [
+          CssJs.pct(100.0),
+          CssJs.hex("306AFF")
+        ],
+        tl: /* [] */0
+      }
+    });
+
 var Colors = {
   blue: "477BFF",
   white: "fff",
   gray1: "A6AABE",
   gray2: "AEB3C9",
   black: "14103D",
-  lightBlue1: "E2EAFF"
+  lightBlue1: "E2EAFF",
+  blueGradient: blueGradient
 };
 
 var small = CssJs.px(6);
@@ -23,10 +38,12 @@ var Radius = {
   large: large
 };
 
-var xs = CssJs.rem(0.8);
+function make(value) {
+  return CssJs.rem(value * 0.6);
+}
 
 var Spacing = {
-  xs: xs
+  make: make
 };
 
 var fontFamily = {
@@ -41,4 +58,4 @@ export {
   fontFamily ,
   
 }
-/* small Not a pure module */
+/* blueGradient Not a pure module */
diff --git a/src/lib/Theme.res b/src/lib/Theme.res
index 1a7e5d4..38f1d35 100644
--- a/src/lib/Theme.res
+++ b/src/lib/Theme.res
@@ -1,10 +1,16 @@
 module Colors = {
+  open CssJs
+
   let blue = "477BFF"
   let white = "fff"
   let gray1 = "A6AABE"
   let gray2 = "AEB3C9"
   let black = "14103D"
   let lightBlue1 = "E2EAFF"
+  let blueGradient = linearGradient(
+    180.0->deg,
+    list{(0.0->pct, "477BFF"->hex), (100.0->pct, "306AFF"->hex)},
+  )
 }
 
 module Radius = {
@@ -17,8 +23,7 @@ module Radius = {
 
 module Spacing = {
   open CssJs
-
-  let xs = 0.8->rem
+  let make = (value: int) => value->Js.Int.toFloat->(v => v *. 0.6)->rem
 }
 
 let fontFamily = #custom("'DM Sans', sans-serif")
diff --git a/yarn.lock b/yarn.lock
index adb57c5..1765a6c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4516,11 +4516,6 @@ bs-css@14.0.1:
   resolved "https://registry.yarnpkg.com/bs-css/-/bs-css-14.0.1.tgz#983394472d825c590a8f91230bfcb082e9474670"
   integrity sha512-gNaKpU7sQKjyVCTgNa+ReHt0yAx19HcOYbGU4Sg7Jlv04NXK3FCvqffF60xb+x+jMMquOTLIj4VyQPiPSZ82Nw==
 
-bs-platform@8.4.2:
-  version "8.4.2"
-  resolved "https://registry.yarnpkg.com/bs-platform/-/bs-platform-8.4.2.tgz#778dabd1dfb3bc95e0086c58dabae74e4ebdee8a"
-  integrity sha512-9q7S4/LLV/a68CweN382NJdCCr/lOSsJR3oQYnmPK98ChfO/AdiA3lYQkQTp6T+U0I5Z5RypUAUprNstwDtMDQ==
-
 bser@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
@@ -12343,6 +12338,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+rescript@9.1.3:
+  version "9.1.3"
+  resolved "https://registry.yarnpkg.com/rescript/-/rescript-9.1.3.tgz#1a0f41342acd8dc4e26fd1782d0997b8a7577698"
+  integrity sha512-TpfW3DakgCJtWbRvAek7cysuikBWarjqt8PrbFg0Rk3O+o4dt0inBdxyZe/+u3LOAWzyKK+2UlqC0xiCBgs6pQ==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"

From 98738686e3f71bc4c0cd030db0345eb6fb4a1598 Mon Sep 17 00:00:00 2001
From: deadkff01 <kafferdennis@gmail.com>
Date: Tue, 15 Jun 2021 20:29:00 -0300
Subject: [PATCH 4/5] chore: adjust package.json

---
 package.json |  3 +--
 yarn.lock    | 31 -------------------------------
 2 files changed, 1 insertion(+), 33 deletions(-)

diff --git a/package.json b/package.json
index cecdf21..e5f8f0c 100644
--- a/package.json
+++ b/package.json
@@ -7,11 +7,10 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "bs-css-emotion": "^2.5.1",
+    "rescript": "9.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
-    "rescript": "9.1.3",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
diff --git a/yarn.lock b/yarn.lock
index 1765a6c..eabb6db 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4503,19 +4503,6 @@ browserslist@^4.16.5:
     escalade "^3.1.1"
     node-releases "^1.1.71"
 
-bs-css-emotion@^2.5.1:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/bs-css-emotion/-/bs-css-emotion-2.5.1.tgz#ab457544332d63d1fa69ea950a71dcf2ace88b1d"
-  integrity sha512-CQyyj8LlYdo5NeiBx2PC9v7Et/BQbj/thaHv84DFvrOivu9kk6A4rr5/Gl6HuAE77S4G0QmuuN2IRaE+vo3b+g==
-  dependencies:
-    bs-css "14.0.1"
-    emotion "^10.0.0"
-
-bs-css@14.0.1:
-  version "14.0.1"
-  resolved "https://registry.yarnpkg.com/bs-css/-/bs-css-14.0.1.tgz#983394472d825c590a8f91230bfcb082e9474670"
-  integrity sha512-gNaKpU7sQKjyVCTgNa+ReHt0yAx19HcOYbGU4Sg7Jlv04NXK3FCvqffF60xb+x+jMMquOTLIj4VyQPiPSZ82Nw==
-
 bser@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
@@ -5303,16 +5290,6 @@ create-ecdh@^4.0.0:
     bn.js "^4.1.0"
     elliptic "^6.5.3"
 
-create-emotion@^10.0.27:
-  version "10.0.27"
-  resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-10.0.27.tgz#cb4fa2db750f6ca6f9a001a33fbf1f6c46789503"
-  integrity sha512-fIK73w82HPPn/RsAij7+Zt8eCE8SptcJ3WoRMfxMtjteYxud8GDTKKld7MYwAX2TVhrw29uR1N/bVGxeStHILg==
-  dependencies:
-    "@emotion/cache" "^10.0.27"
-    "@emotion/serialize" "^0.11.15"
-    "@emotion/sheet" "0.9.4"
-    "@emotion/utils" "0.11.3"
-
 create-hash@^1.1.0, create-hash@^1.1.2, create-hash@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
@@ -6146,14 +6123,6 @@ emotion-theming@^10.0.27:
     "@emotion/weak-memoize" "0.2.5"
     hoist-non-react-statics "^3.3.0"
 
-emotion@^10.0.0:
-  version "10.0.27"
-  resolved "https://registry.yarnpkg.com/emotion/-/emotion-10.0.27.tgz#f9ca5df98630980a23c819a56262560562e5d75e"
-  integrity sha512-2xdDzdWWzue8R8lu4G76uWX5WhyQuzATon9LmNeCy/2BHVC6dsEpfhN1a0qhELgtDVdjyEA6J8Y/VlI5ZnaH0g==
-  dependencies:
-    babel-plugin-emotion "^10.0.27"
-    create-emotion "^10.0.27"
-
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"

From 062cde810ba45eb7d5eeabe557d29fb38bc807fc Mon Sep 17 00:00:00 2001
From: deadkff01 <kafferdennis@gmail.com>
Date: Tue, 15 Jun 2021 20:30:54 -0300
Subject: [PATCH 5/5] chore: adjust package.json

---
 package.json |  1 +
 yarn.lock    | 31 +++++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/package.json b/package.json
index e5f8f0c..c9fff19 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "bs-css-emotion": "^2.5.1",
     "rescript": "9.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
diff --git a/yarn.lock b/yarn.lock
index eabb6db..1765a6c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4503,6 +4503,19 @@ browserslist@^4.16.5:
     escalade "^3.1.1"
     node-releases "^1.1.71"
 
+bs-css-emotion@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/bs-css-emotion/-/bs-css-emotion-2.5.1.tgz#ab457544332d63d1fa69ea950a71dcf2ace88b1d"
+  integrity sha512-CQyyj8LlYdo5NeiBx2PC9v7Et/BQbj/thaHv84DFvrOivu9kk6A4rr5/Gl6HuAE77S4G0QmuuN2IRaE+vo3b+g==
+  dependencies:
+    bs-css "14.0.1"
+    emotion "^10.0.0"
+
+bs-css@14.0.1:
+  version "14.0.1"
+  resolved "https://registry.yarnpkg.com/bs-css/-/bs-css-14.0.1.tgz#983394472d825c590a8f91230bfcb082e9474670"
+  integrity sha512-gNaKpU7sQKjyVCTgNa+ReHt0yAx19HcOYbGU4Sg7Jlv04NXK3FCvqffF60xb+x+jMMquOTLIj4VyQPiPSZ82Nw==
+
 bser@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
@@ -5290,6 +5303,16 @@ create-ecdh@^4.0.0:
     bn.js "^4.1.0"
     elliptic "^6.5.3"
 
+create-emotion@^10.0.27:
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-10.0.27.tgz#cb4fa2db750f6ca6f9a001a33fbf1f6c46789503"
+  integrity sha512-fIK73w82HPPn/RsAij7+Zt8eCE8SptcJ3WoRMfxMtjteYxud8GDTKKld7MYwAX2TVhrw29uR1N/bVGxeStHILg==
+  dependencies:
+    "@emotion/cache" "^10.0.27"
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/sheet" "0.9.4"
+    "@emotion/utils" "0.11.3"
+
 create-hash@^1.1.0, create-hash@^1.1.2, create-hash@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
@@ -6123,6 +6146,14 @@ emotion-theming@^10.0.27:
     "@emotion/weak-memoize" "0.2.5"
     hoist-non-react-statics "^3.3.0"
 
+emotion@^10.0.0:
+  version "10.0.27"
+  resolved "https://registry.yarnpkg.com/emotion/-/emotion-10.0.27.tgz#f9ca5df98630980a23c819a56262560562e5d75e"
+  integrity sha512-2xdDzdWWzue8R8lu4G76uWX5WhyQuzATon9LmNeCy/2BHVC6dsEpfhN1a0qhELgtDVdjyEA6J8Y/VlI5ZnaH0g==
+  dependencies:
+    babel-plugin-emotion "^10.0.27"
+    create-emotion "^10.0.27"
+
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"