From afc6dfc3dcd85d5c9cd494d6cf5c0a8094a9711f Mon Sep 17 00:00:00 2001
From: Eyitimonwa Akintokun <timonwaakintokun@gmail.com>
Date: Mon, 13 Nov 2023 22:55:42 +0100
Subject: [PATCH] Improve kitchen sink (#829)

* age calculator done

* bmi calculator done

* book recommendation done

* calculator is done

* countdown timer done

* context done

* currency converter done

* data converter done

* dice roller done

* digital journal done

* carousel done

* discount calculator done

* currency converter done

* create event calender done

* fix: fixed a merge issue

* ran cleanup scripts
---
 .../src/css/examples/age-calculator.css       |  17 +
 .../src/css/examples/bmi-calculator.css       |  41 ++
 .../src/css/examples/carousel.css             |  18 +
 .../css/examples/create-event-calender.css    | 315 +++++++++++++++
 .../src/css/examples/dice-roller.css          |  50 +++
 .../src/{ => css/examples}/style.css          | 381 ------------------
 packages/kitchen-sink/src/css/style.css       | 132 ++++++
 .../src/examples/age-calculator.tsx           | 117 +++---
 .../src/examples/bmi-calculator.jsx           | 244 +++--------
 .../src/examples/book-recommendation.jsx      | 225 ++++++-----
 .../kitchen-sink/src/examples/calculator.tsx  |   2 -
 .../kitchen-sink/src/examples/carousel.tsx    |  15 +-
 .../kitchen-sink/src/examples/context.tsx     |  16 +-
 .../src/examples/countdown-timer.jsx          | 253 ++++++------
 .../src/examples/create-event-calender.jsx    | 129 ++++++
 .../src/examples/currency-convertor.tsx       |  22 +-
 .../src/examples/data-converter.tsx           |  18 +-
 .../kitchen-sink/src/examples/dice-roller.tsx |   1 +
 .../src/examples/digital-personal-journal.jsx |  54 ++-
 .../src/examples/discount-calculator.tsx      |  12 +-
 packages/kitchen-sink/src/main.tsx            |   3 +-
 website/liveblocks.config.ts                  |   2 +-
 22 files changed, 1167 insertions(+), 900 deletions(-)
 create mode 100644 packages/kitchen-sink/src/css/examples/age-calculator.css
 create mode 100644 packages/kitchen-sink/src/css/examples/bmi-calculator.css
 create mode 100644 packages/kitchen-sink/src/css/examples/carousel.css
 create mode 100644 packages/kitchen-sink/src/css/examples/create-event-calender.css
 create mode 100644 packages/kitchen-sink/src/css/examples/dice-roller.css
 rename packages/kitchen-sink/src/{ => css/examples}/style.css (61%)
 create mode 100644 packages/kitchen-sink/src/css/style.css
 create mode 100644 packages/kitchen-sink/src/examples/create-event-calender.jsx

diff --git a/packages/kitchen-sink/src/css/examples/age-calculator.css b/packages/kitchen-sink/src/css/examples/age-calculator.css
new file mode 100644
index 0000000000..532c0a83a8
--- /dev/null
+++ b/packages/kitchen-sink/src/css/examples/age-calculator.css
@@ -0,0 +1,17 @@
+.age-calculator h2 {
+  font-size: 1.2rem;
+}
+.age-calculator .input-wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  align-items: flex-end;
+  gap: 10px;
+}
+.age-calculator button {
+  margin-block: 20px;
+}
+.age-calculator .form-input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
diff --git a/packages/kitchen-sink/src/css/examples/bmi-calculator.css b/packages/kitchen-sink/src/css/examples/bmi-calculator.css
new file mode 100644
index 0000000000..67c78946b3
--- /dev/null
+++ b/packages/kitchen-sink/src/css/examples/bmi-calculator.css
@@ -0,0 +1,41 @@
+.bmi-calculator {
+  max-width: 900px;
+}
+.bmi-calculator h2 {
+  text-align: center;
+}
+.bmi-calculator .bmi-calculator_wrapper {
+  max-width: 500px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  margin-inline: auto;
+  gap: 10px 20px;
+}
+@media screen and (max-width: 500px) {
+  .bmi-calculator .bmi-calculator_wrapper {
+    grid-template-columns: 1fr;
+  }
+}
+.bmi-calculator .form-input-group {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 5px;
+}
+.bmi-calculator input,
+.bmi-calculator select {
+  height: 40px;
+  color: currentColor;
+}
+.bmi-calculator select {
+  background-color: var(--background);
+  border: none;
+  border-radius: 5px;
+  padding: 8px;
+}
+.bmi-calculator button {
+  height: 40px;
+  color: black;
+  background-color: orange;
+  margin-top: 10px;
+}
diff --git a/packages/kitchen-sink/src/css/examples/carousel.css b/packages/kitchen-sink/src/css/examples/carousel.css
new file mode 100644
index 0000000000..88fe75fbc4
--- /dev/null
+++ b/packages/kitchen-sink/src/css/examples/carousel.css
@@ -0,0 +1,18 @@
+/* Required styling for carousel */
+.carousel {
+  display: flex;
+  overflow: hidden;
+  gap: 10px;
+}
+
+.carousel-inner {
+  display: flex;
+  width: 100%;
+  aspect-ratio: 3/2;
+  transition: transform 0.3s ease-in-out;
+}
+.carousel img {
+  width: 100%;
+  aspect-ratio: 3/2;
+  transition: transform 0.3s ease-in-out;
+}
diff --git a/packages/kitchen-sink/src/css/examples/create-event-calender.css b/packages/kitchen-sink/src/css/examples/create-event-calender.css
new file mode 100644
index 0000000000..e4a515d138
--- /dev/null
+++ b/packages/kitchen-sink/src/css/examples/create-event-calender.css
@@ -0,0 +1,315 @@
+/* calendar styles */
+.create-event-calender {
+  /* text-align: center; */
+}
+
+.create-event-calender .create-event-calender_wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: flex-start;
+  margin-top: 2rem;
+}
+
+.create-event-calender .calendar-container {
+  flex: 1;
+  max-width: 500px;
+  margin-right: 2rem;
+}
+
+.create-event-calender .event-container {
+  flex: 1;
+  max-width: 500px;
+}
+
+@media screen and (max-width: 768px) {
+  .create-event-calender .create-event-calender_wrapper {
+    flex-direction: column;
+  }
+
+  .create-event-calender .calendar-container,
+  .create-event-calender .event-container {
+    max-width: 100%;
+    margin-right: 0;
+    margin-bottom: 2rem;
+    justify-content: center;
+  }
+}
+
+.create-event-calender .react-calendar {
+  width: 100%;
+  max-width: 500px;
+  background-color: white;
+  border: 1px solid #151515;
+  font-family: Arial, Helvetica, sans-serif;
+  line-height: 1.125em;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  padding: 10px;
+  transition: background-color 0.2s;
+}
+
+.create-event-calender .react-calendar--doubleView {
+  width: 100%;
+}
+
+.create-event-calender
+  .react-calendar--doubleView
+  .react-calendar__viewContainer {
+  display: flex;
+  margin: -0.5em;
+}
+
+.create-event-calender
+  .react-calendar--doubleView
+  .react-calendar__viewContainer
+  > * {
+  width: 50%;
+  margin: 0.5em;
+}
+
+.create-event-calender .react-calendar,
+.create-event-calender .react-calendar *,
+.create-event-calender .react-calendar *:before,
+.create-event-calender .react-calendar *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.create-event-calender .react-calendar button {
+  margin: 0;
+  border: 0;
+  outline: none;
+  color: #151515;
+}
+
+.create-event-calender .react-calendar button:enabled:hover {
+  cursor: pointer;
+}
+
+.create-event-calender .react-calendar__navigation {
+  display: flex;
+  height: 44px;
+  margin-bottom: 1em;
+}
+
+.create-event-calender .react-calendar__navigation button {
+  min-width: 44px;
+  background: none;
+}
+
+.create-event-calender .react-calendar__navigation button:disabled {
+  background-color: black;
+}
+
+.create-event-calender .react-calendar__navigation button:enabled:hover,
+.create-event-calender .react-calendar__navigation button:enabled:focus {
+  background-color: black;
+}
+
+.create-event-calender .react-calendar__month-view__weekdays {
+  text-align: center;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 0.8rem;
+  color: black;
+}
+
+.create-event-calender .react-calendar__month-view__weekdays__weekday {
+  padding: 0.5em;
+}
+
+.create-event-calender
+  .react-calendar__month-view__weekNumbers
+  .react-calendar__tile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75em;
+  font-weight: bold;
+}
+
+.create-event-calender .react-calendar__month-view__days__day--weekend {
+  color: black;
+}
+
+.create-event-calender
+  .react-calendar__month-view__days__day--neighboringMonth {
+  color: black;
+}
+
+.create-event-calender .react-calendar__year-view .react-calendar__tile,
+.create-event-calender .react-calendar__decade-view .react-calendar__tile,
+.create-event-calender .react-calendar__century-view .react-calendar__tile {
+  padding: 2em 0.5em;
+}
+
+.create-event-calender .react-calendar__tile {
+  max-width: 100%;
+  padding: 10px 6.6667px;
+  background: none;
+  text-align: center;
+  line-height: 16px;
+}
+
+.create-event-calender .react-calendar__tile:disabled {
+  background-color: black;
+}
+
+.create-event-calender .react-calendar__tile:enabled:hover,
+.create-event-calender .react-calendar__tile:enabled:focus {
+  background-color: black;
+}
+
+.create-event-calender .react-calendar__tile--now {
+  background: black;
+  color: white !important;
+}
+
+.create-event-calender .react-calendar__tile--now:enabled:hover,
+.create-event-calender .react-calendar__tile--now:enabled:focus {
+  background: black;
+}
+
+.create-event-calender .react-calendar__tile--hasActive {
+  background: black;
+}
+
+.create-event-calender .react-calendar__tile--hasActive:enabled:hover,
+.create-event-calender .react-calendar__tile--hasActive:enabled:focus {
+  background: black;
+}
+
+.create-event-calender .react-calendar__tile--active {
+  background: black;
+  color: black;
+}
+
+.create-event-calender .react-calendar__tile--active:enabled:hover,
+.create-event-calender .react-calendar__tile--active:enabled:focus {
+  background: black;
+}
+
+.create-event-calender
+  .react-calendar--selectRange
+  .react-calendar__tile--hover {
+  background-color: black;
+}
+
+.create-event-calender .event-form {
+  margin-bottom: 20px;
+}
+
+.create-event-calender .event-form h2 {
+  margin-bottom: 10px;
+}
+
+.create-event-calender .event-form p {
+  font-size: 1.2rem;
+}
+
+.create-event-calender .event-form input {
+  padding: 8px;
+  font-size: 1rem;
+  margin-right: 10px;
+}
+
+.create-event-calender .create-btn {
+  padding: 8px 6px;
+  margin-top: 5px;
+  background-color: white;
+  color: black;
+  border: 0.5px solid black;
+  border-radius: 4px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.create-event-calender .create-btn:hover {
+  background-color: black;
+  color: whitesmoke;
+  border: 0.5px solid white;
+}
+
+.create-event-calender .event-list {
+  margin-top: 20px;
+}
+
+.create-event-calender .event-cards {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.create-event-calender .event-card {
+  width: 300px;
+  background-color: whitesmoke;
+  border-radius: 8px;
+  margin: 10px;
+  padding: 10px;
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.create-event-calender .event-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.create-event-calender .event-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.create-event-calender .event-date {
+  font-size: 1rem;
+  color: black;
+}
+
+.create-event-calender .event-actions {
+  display: flex;
+}
+
+.create-event-calender .update-btn,
+.create-event-calender .delete-btn {
+  padding: 8px 12px;
+  margin-left: 5px;
+  background-color: white;
+  color: black;
+  border: 0.5px solid black;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.create-event-calender .update-btn:hover,
+.create-event-calender .delete-btn:hover {
+  background-color: black;
+  color: aliceblue;
+  border: 0.5px solid white;
+}
+
+.create-event-calender .event-card-body {
+  padding-bottom: 10px;
+}
+
+.create-event-calender .event-title {
+  font-size: 1.5rem;
+  color: blueviolet;
+}
+
+.create-event-calender .selected {
+  background-color: #ff4081 !important;
+  color: black;
+}
+
+.create-event-calender .event-marked {
+  background-color: #ff4081;
+  color: white;
+}
diff --git a/packages/kitchen-sink/src/css/examples/dice-roller.css b/packages/kitchen-sink/src/css/examples/dice-roller.css
new file mode 100644
index 0000000000..a5420a8d2e
--- /dev/null
+++ b/packages/kitchen-sink/src/css/examples/dice-roller.css
@@ -0,0 +1,50 @@
+/* Dice roller styles */
+@keyframes shakeDice {
+  0% {
+    transform: translateX(0);
+  }
+
+  10% {
+    transform: translateX(-5px);
+  }
+
+  20% {
+    transform: translateX(5px);
+  }
+
+  30% {
+    transform: translateX(-5px);
+  }
+
+  40% {
+    transform: translateX(5px);
+  }
+
+  50% {
+    transform: translateX(-5px);
+  }
+
+  60% {
+    transform: translateX(5px);
+  }
+
+  70% {
+    transform: translateX(-5px);
+  }
+
+  80% {
+    transform: translateX(5px);
+  }
+
+  90% {
+    transform: translateX(-5px);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.dice-roller.roll-animation {
+  animation: shakeDice 0.5s ease-in-out;
+}
diff --git a/packages/kitchen-sink/src/style.css b/packages/kitchen-sink/src/css/examples/style.css
similarity index 61%
rename from packages/kitchen-sink/src/style.css
rename to packages/kitchen-sink/src/css/examples/style.css
index 15bbf90ba0..5d6bd6f47a 100644
--- a/packages/kitchen-sink/src/style.css
+++ b/packages/kitchen-sink/src/css/examples/style.css
@@ -1,157 +1,3 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-:root {
-  font-family: 'Inter', sans-serif;
-}
-
-@supports (font-variation-settings: normal) {
-  :root {
-    font-family: 'Inter var', sans-serif;
-  }
-}
-
-.spinner {
-  width: 2rem;
-  height: 2rem;
-  border: 0.25rem solid #56c7ff;
-  border-bottom: 0.25rem solid rgba(0, 0, 0, 0);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  z-index: 9999;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-button:disabled {
-  opacity: 0.2 !important;
-  cursor: not-allowed !important;
-}
-
-.kitchen_sink-layout {
-  height: 100%;
-  margin-top: 1.5em;
-  display: flex;
-  max-width: 100vw;
-  overflow: hidden;
-}
-
-.kitchen_sink-layout-icon {
-  outline: none;
-  border: none;
-  cursor: pointer;
-  position: relative;
-}
-
-details {
-  margin: 0;
-}
-
-.kitchen_sink-content {
-  width: 100%;
-  overflow-x: scroll;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-.kitchen_sink-content::-webkit-scrollbar {
-  display: none;
-}
-
-.kitchen_sink-content_container {
-  padding: 0;
-  width: 95%;
-  margin: 0 auto;
-  max-width: 1300px;
-  overflow-y: scroll;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.kitchen_sink-content_container::-webkit-scrollbar {
-  display: none;
-}
-.kitchen_sink-sidebar {
-  height: 50vh;
-  border: 1px solid #353535;
-  box-shadow: 0px 4px 25px rgb(#000, 0.25);
-  overflow-y: scroll;
-  transition: all 200ms ease-in-out;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  background: #252525;
-}
-
-.kitchen_sink-sidebar_container {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: stretch;
-  gap: 1em;
-  overflow-y: scroll;
-}
-
-.kitchen_sink-sidebar_close {
-  width: 0px;
-  overflow: hidden;
-  transition: all 200ms ease-in;
-}
-
-.kitchen_sink-sidebar_open {
-  padding: 1em;
-  width: 320px;
-  min-width: 270px;
-}
-
-@media screen and (max-width: 768px) {
-  .kitchen_sink-sidebar {
-    position: fixed;
-    z-index: 99999999;
-    top: 0;
-    left: 0;
-    height: 100vh;
-  }
-}
-
-pre {
-  white-space: pre-wrap;
-  /* css-3 */
-  white-space: -moz-pre-wrap;
-  /* Mozilla, since 1999 */
-  white-space: -pre-wrap;
-  /* Opera 4-6 */
-  white-space: -o-pre-wrap;
-  /* Opera 7 */
-  word-wrap: break-word;
-  /* Internet Explorer 5.5+ */
-}
-
-/* Required styling for carousel */
-.carousel {
-  display: flex;
-  overflow: hidden;
-}
-
-.carousel img {
-  width: 75%;
-  margin-right: 10px;
-  transition: transform 0.3s ease-in-out;
-}
-
-.carousel-inner {
-  display: flex;
-  width: 75%;
-  height: auto;
-  margin: 0 10px 20px 0;
-  transition: transform 0.3s ease-in-out;
-}
-
 /* Music player styles */
 .body {
   box-sizing: border-box;
@@ -242,163 +88,6 @@ input[type='range'] {
   padding: 1rem;
 }
 
-/* calendar styles */
-
-.app {
-  text-align: center;
-  margin: 20px;
-}
-
-.container {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: flex-start;
-  margin-top: 2rem;
-}
-
-.calendar-container {
-  flex: 1;
-  max-width: 500px;
-  margin-right: 2rem;
-}
-
-.event-container {
-  flex: 1;
-  max-width: 500px;
-}
-
-@media screen and (max-width: 768px) {
-  .container {
-    flex-direction: column;
-  }
-
-  .calendar-container,
-  .event-container {
-    max-width: 100%;
-    margin-right: 0;
-    margin-bottom: 2rem;
-    justify-content: center;
-  }
-}
-
-.event-form {
-  margin-bottom: 20px;
-}
-
-.event-form h2 {
-  margin-bottom: 10px;
-}
-
-.event-form p {
-  font-size: 1.2rem;
-}
-
-.event-form input {
-  padding: 8px;
-  font-size: 1rem;
-  margin-right: 10px;
-}
-
-.create-btn {
-  padding: 8px 6px;
-  margin-top: 5px;
-  background-color: white;
-  color: black;
-  border: 0.5px solid black;
-  border-radius: 4px;
-  font-size: 1rem;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.create-btn:hover {
-  background-color: black;
-  color: whitesmoke;
-  border: 0.5px solid white;
-}
-
-.event-list {
-  margin-top: 20px;
-}
-
-.event-cards {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-.event-card {
-  width: 300px;
-  background-color: whitesmoke;
-  border-radius: 8px;
-  margin: 10px;
-  padding: 10px;
-  cursor: pointer;
-  transition: transform 0.2s, box-shadow 0.2s;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.event-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-.event-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.event-date {
-  font-size: 1rem;
-  color: black;
-}
-
-.event-actions {
-  display: flex;
-}
-
-.update-btn,
-.delete-btn {
-  padding: 8px 12px;
-  margin-left: 5px;
-  background-color: white;
-  color: black;
-  border: 0.5px solid black;
-  border-radius: 4px;
-  font-size: 0.9rem;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.update-btn:hover,
-.delete-btn:hover {
-  background-color: black;
-  color: aliceblue;
-  border: 0.5px solid white;
-}
-
-.event-card-body {
-  padding-bottom: 10px;
-}
-
-.event-title {
-  font-size: 1.5rem;
-  color: blueviolet;
-}
-
-.selected {
-  background-color: #ff4081 !important;
-  color: black;
-}
-
-.event-marked {
-  background-color: #ff4081;
-  color: white;
-}
-
 .news-card {
   display: flex;
   flex-direction: column;
@@ -578,57 +267,6 @@ input[type='range'] {
   }
 }
 
-/* Dice roller styles */
-@keyframes shakeDice {
-  0% {
-    transform: translateX(0);
-  }
-
-  10% {
-    transform: translateX(-5px);
-  }
-
-  20% {
-    transform: translateX(5px);
-  }
-
-  30% {
-    transform: translateX(-5px);
-  }
-
-  40% {
-    transform: translateX(5px);
-  }
-
-  50% {
-    transform: translateX(-5px);
-  }
-
-  60% {
-    transform: translateX(5px);
-  }
-
-  70% {
-    transform: translateX(-5px);
-  }
-
-  80% {
-    transform: translateX(5px);
-  }
-
-  90% {
-    transform: translateX(-5px);
-  }
-
-  100% {
-    transform: translateX(0);
-  }
-}
-
-.dice-roller.roll-animation {
-  animation: shakeDice 0.5s ease-in-out;
-}
-
 /*  */
 
 .container {
@@ -833,25 +471,6 @@ input[type='range'] {
   background-color: #45a049;
 }
 
-/* Age calculator styles */
-
-.calculator-form {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  gap: 10px;
-}
-
-.calculator-form-input-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-}
-
-.age {
-  font-size: 1.5rem;
-}
-
 /*Snake Game CSS*/
 .snakeGame--main {
   height: 500px;
diff --git a/packages/kitchen-sink/src/css/style.css b/packages/kitchen-sink/src/css/style.css
new file mode 100644
index 0000000000..eeda1ed277
--- /dev/null
+++ b/packages/kitchen-sink/src/css/style.css
@@ -0,0 +1,132 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  font-family: 'Inter', sans-serif;
+}
+
+@supports (font-variation-settings: normal) {
+  :root {
+    font-family: 'Inter var', sans-serif;
+  }
+}
+
+.spinner {
+  width: 2rem;
+  height: 2rem;
+  border: 0.25rem solid #56c7ff;
+  border-bottom: 0.25rem solid rgba(0, 0, 0, 0);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  z-index: 9999;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+button:disabled {
+  opacity: 0.2 !important;
+  cursor: not-allowed !important;
+}
+
+.kitchen_sink-layout {
+  margin-top: 1.5em;
+  display: flex;
+  height: 100vh;
+  max-width: 100vw;
+  overflow: hidden;
+}
+
+.kitchen_sink-layout-icon {
+  outline: none;
+  border: none;
+  cursor: pointer;
+  position: relative;
+}
+
+.kitchen_sink-content {
+  width: 100%;
+  overflow-x: scroll;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.kitchen_sink-content::-webkit-scrollbar {
+  display: none;
+}
+
+.kitchen_sink-content_container {
+  width: 95%;
+  margin: 0 auto;
+  max-width: 1300px;
+  height: 100vh;
+  overflow-y: scroll;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.kitchen_sink-content_container::-webkit-scrollbar {
+  display: none;
+}
+.kitchen_sink-sidebar {
+  border: 1px solid #353535;
+  height: 100vh;
+  box-shadow: 0px 4px 25px rgb(#000, 0.25);
+  overflow-y: scroll;
+  transition: all 200ms ease-in-out;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  background: #252525;
+}
+
+.kitchen_sink-sidebar::-webkit-scrollbar {
+  display: none;
+}
+
+.kitchen_sink-sidebar_container {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: stretch;
+  gap: 1em;
+  overflow-y: scroll;
+}
+
+.kitchen_sink-sidebar_close {
+  width: 0px;
+  overflow: hidden;
+  transition: all 200ms ease-in;
+}
+
+.kitchen_sink-sidebar_open {
+  padding: 1em;
+  width: 320px;
+  min-width: 270px;
+}
+
+@media screen and (max-width: 768px) {
+  .kitchen_sink-sidebar {
+    position: fixed;
+    z-index: 99999999;
+    top: 0;
+    left: 0;
+  }
+}
+
+pre {
+  white-space: pre-wrap;
+  /* css-3 */
+  white-space: -moz-pre-wrap;
+  /* Mozilla, since 1999 */
+  white-space: -pre-wrap;
+  /* Opera 4-6 */
+  white-space: -o-pre-wrap;
+  /* Opera 7 */
+  word-wrap: break-word;
+  /* Internet Explorer 5.5+ */
+}
diff --git a/packages/kitchen-sink/src/examples/age-calculator.tsx b/packages/kitchen-sink/src/examples/age-calculator.tsx
index fb9eeb8211..284b2220fc 100644
--- a/packages/kitchen-sink/src/examples/age-calculator.tsx
+++ b/packages/kitchen-sink/src/examples/age-calculator.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { block } from 'million/react';
+import '../css/examples/age-calculator.css';
 
 const AgeCalculator = block(() => {
   const Today = new Date();
@@ -45,66 +46,68 @@ const AgeCalculator = block(() => {
   }
 
   return (
-    <section>
-      <form onSubmit={handleSubmit} className="calculator-form">
-        <span className="calculator-form-input-wrapper">
-          <label htmlFor="day">Birth Day</label>
-          <input
-            type="text"
-            name="day"
-            id="day"
-            placeholder="DD"
-            value={birthDay}
-            onChange={(e) => setBirthDay(e.target.value)}
-            maxLength={2}
-            pattern="(0?[1-9]|[12][0-9]|3[01])"
-          />
-        </span>
-
-        <span className="calculator-form-input-wrapper">
-          <label htmlFor="month">Birth Month</label>
-          <input
-            type="text"
-            name="month"
-            id="month"
-            placeholder="MM"
-            value={birthMonth}
-            onChange={(e) => setBirthMonth(e.target.value)}
-            maxLength={2}
-            pattern="(1[0-2]|0?[1-9])"
-          />
-        </span>
-
-        <span className="calculator-form-input-wrapper">
-          <label htmlFor="year">Birth Year</label>
-          <input
-            type="text"
-            name="year"
-            id="year"
-            placeholder="YYYY"
-            value={birthYear}
-            onChange={(e) => setBirthYear(e.target.value)}
-            maxLength={4}
-          />
-        </span>
-
-        <button>Calculate</button>
-      </form>
-
+    <main className="age-calculator">
       <section>
-        <h2 className="age">
-          {calculatedYear} {calculatedYear > 1 ? 'years' : 'year'}
-        </h2>
-
-        <h2 className="age">
-          {calculatedMonth} {calculatedMonth > 1 ? 'months' : 'month'}
-        </h2>
+        <h2>Enter you date of birth</h2>
+        <form onSubmit={handleSubmit} className="calculator-form">
+          <div className="input-wrapper">
+            <span className="form-input-group">
+              <label htmlFor="day">Birth Day</label>
+              <input
+                type="number"
+                name="day"
+                id="day"
+                placeholder="DD"
+                value={birthDay}
+                onChange={(e) => setBirthDay(e.target.value)}
+                maxLength={2}
+                min={1}
+                pattern="(0?[1-9]|[12][0-9]|3[01])"
+              />
+            </span>
+
+            <span className="form-input-group">
+              <label htmlFor="month">Birth Month</label>
+              <input
+                type="number"
+                name="month"
+                id="month"
+                placeholder="MM"
+                value={birthMonth}
+                onChange={(e) => setBirthMonth(e.target.value)}
+                maxLength={2}
+                min={1}
+                pattern="(1[0-2]|0?[1-9])"
+              />
+            </span>
+
+            <span className="form-input-group">
+              <label htmlFor="year">Birth Year</label>
+              <input
+                type="number"
+                name="year"
+                id="year"
+                placeholder="YYYY"
+                value={birthYear}
+                onChange={(e) => setBirthYear(e.target.value)}
+                maxLength={4}
+              />
+            </span>
+          </div>
+
+          <button type="submit">Calculate</button>
+        </form>
+      </section>
 
-        <h2 className="age">
-          {calculatedDay} {calculatedDay > 1 ? 'days' : 'day'}
-        </h2>
+      <section>
+        <h2>Your Age</h2>
+        <p>
+          You are {calculatedYear} {calculatedYear > 1 ? 'years' : 'year'},{' '}
+          {calculatedMonth} {calculatedMonth > 1 ? 'months' : 'month'} and{' '}
+          {calculatedDay} {calculatedDay > 1 ? 'days' : 'day'} old.
+        </p>
       </section>
-    </section>
+    </main>
   );
 });
 
diff --git a/packages/kitchen-sink/src/examples/bmi-calculator.jsx b/packages/kitchen-sink/src/examples/bmi-calculator.jsx
index f4590bcdb2..bd47d2ac1d 100644
--- a/packages/kitchen-sink/src/examples/bmi-calculator.jsx
+++ b/packages/kitchen-sink/src/examples/bmi-calculator.jsx
@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import { block } from 'million/react';
+import '../css/examples/bmi-calculator.css';
 
-const BmiCalculator = block(() => {
+const BmiCalculator = block(function BmiComponent() {
   const [age, setAge] = useState('');
   const [gender, setGender] = useState('male');
   const [heightFeet, setHeightFeet] = useState('');
@@ -43,208 +44,89 @@ const BmiCalculator = block(() => {
   };
 
   return (
-    <div>
-      <h1 style={{ textAlign: 'center' }}>BMI Calculator</h1>
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-      >
-        <div
-          className="BmiDivInputFields"
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'flex-start',
-            gap: '20px',
-          }}
-        >
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'flex-start',
-            }}
-          >
-            <label>Age * :</label>
-            <input
-              type="number"
-              placeholder="Enter your age"
-              value={age}
-              onChange={(e) => setAge(e.target.value)}
-            />
-          </div>
-
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'flex-start',
-            }}
-          >
-            <label>Gender * :</label>
-            <select
-              value={gender}
-              onChange={(e) => setGender(e.target.value)}
-              style={{
-                width: '230px',
-                height: '40px',
-                border: 'none',
-                backgroundColor: '#353535',
-                padding: '0.55rem',
-                color: '#f7f7f7',
-                borderRadius: '0.25rem',
-              }}
-            >
-              <option value="male">Male</option>
-              <option value="female">Female</option>
-            </select>
-          </div>
+    <main className="bmi-calculator">
+      <h2>BMI Calculator</h2>
+      <div className="bmi-calculator_wrapper">
+        <div className="form-input-group">
+          <label>Age*:</label>
+          <input
+            type="number"
+            placeholder="Enter your age"
+            min={1}
+            value={age}
+            onChange={(e) => setAge(e.target.value)}
+          />
         </div>
-      </div>
 
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-          marginTop: '20px',
-        }}
-      >
-        <div
-          className="BmiDivInputFields"
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'flex-start',
-            gap: '20px',
-          }}
-        >
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'flex-start',
-            }}
-          >
-            <label>Height (in feet and inches) * :</label>
-            <input
-              type="number"
-              placeholder="Enter your height in feet"
-              value={heightFeet}
-              onChange={(e) => setHeightFeet(e.target.value)}
-            />
-          </div>
+        <div className="form-input-group">
+          <label>Gender*:</label>
+          <select value={gender} onChange={(e) => setGender(e.target.value)}>
+            <option value="male">Male</option>
+            <option value="female">Female</option>
+          </select>
+        </div>
 
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'flex-start',
-            }}
-          >
-            <label>&nbsp;</label>
-            <input
-              type="number"
-              placeholder="Enter your height in inch"
-              value={heightInches}
-              onChange={(e) => setHeightInches(e.target.value)}
-            />
-          </div>
+        <div className="form-input-group">
+          <label>Height (enter feet)*:</label>
+          <input
+            type="number"
+            placeholder="Enter your height in feet"
+            value={heightFeet}
+            onChange={(e) => setHeightFeet(e.target.value)}
+            min={1}
+          />
         </div>
-      </div>
 
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-          marginTop: '20px',
-        }}
-      >
-        <div
-          className="BmiDivInputFields"
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'flex-start',
-            gap: '20px',
-          }}
-        >
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'flex-start',
-            }}
-          >
-            <label>Weight (in kg) * :</label>
-            <input
-              type="number"
-              placeholder="Enter you weight"
-              value={weight}
-              onChange={(e) => setWeight(e.target.value)}
-            />
-          </div>
+        <div className="form-input-group">
+          <label>Height (enter inches)*:</label>
+          <input
+            type="number"
+            placeholder="Enter your height in inch"
+            value={heightInches}
+            onChange={(e) => setHeightInches(e.target.value)}
+            min={1}
+          />
+        </div>
 
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'flex-start',
-            }}
-          >
-            <label>&nbsp;</label>
-            <button
-              type="button"
-              onClick={calculateBmi}
-              style={{
-                width: '230px',
-                color: 'black',
-                backgroundColor: 'orange',
-              }}
-            >
-              Calculate BMI
-            </button>
-          </div>
+        <div className="form-input-group">
+          <label>Weight (in kg)*:</label>
+          <input
+            type="number"
+            placeholder="Enter you weight"
+            value={weight}
+            onChange={(e) => setWeight(e.target.value)}
+            min={1}
+          />
+        </div>
+        <div className="form-input-group">
+          <button type="button" onClick={calculateBmi}>
+            Calculate BMI
+          </button>
         </div>
       </div>
 
       {errorMessage && (
-        <p style={{ color: 'darksalmon', textAlign: 'center' }}>
-          {errorMessage}
-        </p>
+        <p style={{ color: 'tomato', textAlign: 'center' }}>{errorMessage}</p>
       )}
 
       {bmi !== null && (
         <div
           style={{
-            border: '2px solid yellow',
-            marginTop: '20px',
+            border: '2px solid gold',
+            marginTop: '30px',
             padding: '20px',
+            textAlign: 'center',
           }}
         >
-          <p style={{ textAlign: 'center', fontSize: '40px', margin: '0px' }}>
-            Your BMI: {bmi}
+          <p>
+            Your BMI: <b>{bmi}</b>
           </p>
-          <p
-            style={{
-              textAlign: 'center',
-              fontSize: '30px',
-              margin: '0px',
-              color: 'tomato',
-            }}
-          >
-            Category: {bmiCategory}
+          <p>
+            Category: <b>{bmiCategory}</b>
           </p>
         </div>
       )}
-    </div>
+    </main>
   );
 });
 
diff --git a/packages/kitchen-sink/src/examples/book-recommendation.jsx b/packages/kitchen-sink/src/examples/book-recommendation.jsx
index 7414086194..dfce13652d 100644
--- a/packages/kitchen-sink/src/examples/book-recommendation.jsx
+++ b/packages/kitchen-sink/src/examples/book-recommendation.jsx
@@ -40,90 +40,94 @@ const BookRecommendation = block(() => {
 
   return (
     <main>
+      <h2
+        style={{
+          fontSize: '3rem',
+          textTransform: 'capitalize',
+          marginBottom: '1rem',
+        }}
+      >
+        Reading makes the world huge
+      </h2>
+
       <section
-        style={{ background: '#ffffff', color: '#2A2C2E', padding: '2rem' }}
+        style={{
+          background: '#ffffff',
+          color: '#2A2C2E',
+          padding: '1.2rem',
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
+          gap: '1.2rem',
+        }}
       >
-        <h1 style={{ fontSize: '4rem', textTransform: 'capitalize' }}>
-          Reading makes the world huge
-        </h1>
-        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>
-          <div
+        <div
+          style={{
+            background: '#2A2C2E',
+            color: '#ffff',
+            flexBasis: '50%',
+            position: 'relative',
+            padding: '1.2rem',
+            borderRadius: '1rem',
+            overflow: 'hidden',
+          }}
+        >
+          <h3 style={{ textTransform: 'uppercase' }}>Find Something to read</h3>
+          <p style={{ marginBlock: '.5rem 1rem' }}>
+            Fancy something unusual and unpredictable? Funny or exciting? No
+            problem. Check out the collections we have prepared for you.
+          </p>
+          <button
+            type="button"
             style={{
-              background: '#2A2C2E',
-              color: '#ffff',
-              flexBasis: '50%',
-              position: 'relative',
-              padding: '2rem',
-              borderRadius: '1rem',
-              overflow: 'hidden',
+              outline: 'none',
+              borderRadius: '.8rem',
+              padding: '1rem 2rem',
+              border: '1px solid #F4CE47',
+              color: '#F4CE47',
+              textTransform: 'capitalize',
             }}
           >
-            <h2 style={{ textTransform: 'uppercase' }}>
-              Find Something to read
-            </h2>
-            <p style={{ fontSize: '1rem' }}>
-              Fancy something unusual and unpredictable? Funny or exciting? No
-              problem. Check out the collections we have prepared for you.
-            </p>
-            <button
-              style={{
-                outline: 'none',
-                borderRadius: '.8rem',
-                padding: '1rem 2rem',
-                border: '1px solid #F4CE47',
-                color: '#F4CE47',
-                textTransform: 'capitalize',
-              }}
-            >
-              browse now
-            </button>
-            <svg
-              width="200"
-              height="240"
-              viewBox="0 0 259 299"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              style={{ position: 'absolute', right: 0 }}
-            >
-              <path
-                d="M11.9995 305.5L97.745 219.754M97.745 219.754C75.3507 197.36 61.4995 166.422 61.4995 132.25C61.4995 63.9043 116.904 8.49951 185.25 8.49951C253.595 8.49951 309 63.9043 309 132.25C309 200.595 253.595 256 185.25 256C151.077 256 120.139 242.148 97.745 219.754Z"
-                stroke="black"
-                strokeOpacity="0.38"
-                strokeWidth="16"
-                strokeLinecap="square"
-                strokeLinejoin="round"
-              />
-            </svg>
-          </div>
-          <div style={{ flexBasis: '50%' }}>
-            <img
-              src="https://i.ibb.co/s5GS61g/book-of-the-day.png"
-              alt="book image"
+            browse now
+          </button>
+          <svg
+            width="200"
+            height="240"
+            viewBox="0 0 259 299"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            style={{ position: 'absolute', right: 0 }}
+          >
+            <path
+              d="M11.9995 305.5L97.745 219.754M97.745 219.754C75.3507 197.36 61.4995 166.422 61.4995 132.25C61.4995 63.9043 116.904 8.49951 185.25 8.49951C253.595 8.49951 309 63.9043 309 132.25C309 200.595 253.595 256 185.25 256C151.077 256 120.139 242.148 97.745 219.754Z"
+              stroke="black"
+              strokeOpacity="0.38"
+              strokeWidth="16"
+              strokeLinecap="square"
+              strokeLinejoin="round"
             />
-          </div>
+          </svg>
+        </div>
+        <div>
+          <img
+            src="https://i.ibb.co/s5GS61g/book-of-the-day.png"
+            alt="book image"
+          />
         </div>
       </section>
+
+      <Subject selectedSubject={subject} onSelectSubject={setSubject} />
+
       <section
-        style={{
-          background: 'yellow',
-          padding: '3rem',
-          display: 'flex',
-          gap: '2rem',
-          justifyContent: 'center',
-        }}
-      >
-        <Subject selectedSubject={subject} onSelectSubject={setSubject} />
-      </section>
-      <section
-        style={{ background: '#2A2C2E', color: '#ffffff ', padding: '2rem' }}
+        style={{ background: '#2A2C2E', color: '#ffffff ', padding: '1.2rem' }}
       >
-        <h2 style={{ textTransform: 'uppercase' }}>Bestsellers</h2>
+        <h3 style={{ textTransform: 'uppercase', marginBottom: '1.2rem' }}>
+          Bestsellers
+        </h3>
         <div
           style={{
-            display: 'flex',
-            gap: '3rem',
-            flexWrap: 'wrap',
-            justifyContent: 'center',
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
+            gap: '1.2rem',
           }}
         >
           {books.map((book, index) => (
@@ -145,44 +149,46 @@ const BookRecommendation = block(() => {
 
 const Book = ({ author, image, title, url }) => {
   return (
-    <div
+    <article
       style={{
         background: '#ffffff',
         color: '#2A2C2E',
         borderRadius: '1rem',
         padding: '1rem',
-        display: 'flex',
-        gap: '1rem',
-        width: '15rem',
       }}
     >
-      <div
-        style={{ flexBasis: '45%', borderRadius: '2rem', overflow: 'hidden' }}
+      <img
+        src={image || 'https://i.ibb.co/KNZGG1G/img.png'}
+        alt={title}
+        style={{
+          display: 'block',
+          width: '100%',
+          borderRadius: '1rem',
+          height: 'auto',
+          marginBottom: '1rem',
+        }}
+      />
+
+      <h5 style={{ marginBlock: 0, fontWeight: 400 }}>
+        {author || 'Murakami'}
+      </h5>
+      <h4 style={{ marginBlock: 0 }}>{title || 'After Dark'}</h4>
+
+      <a
+        href={url}
+        style={{
+          textDecoration: 'none',
+          border: '1px solid #2A2C2E',
+          borderRadius: '1rem',
+          color: '#2A2C2E',
+          padding: '.4rem 1rem',
+          marginTop: '1rem',
+          display: 'inline-block',
+        }}
       >
-        <img src={image || 'https://i.ibb.co/KNZGG1G/img.png'} alt={title} />
-      </div>
-      <div>
-        <h5 style={{ marginBlock: 0, fontWeight: 400 }}>
-          {author || 'Murakami'}
-        </h5>
-        <h4 style={{ marginBlock: 0 }}>{title || 'After Dark'}</h4>
-
-        <div style={{ marginTop: '6rem' }}>
-          <a
-            href={url}
-            style={{
-              textDecoration: 'none',
-              border: '1px solid #2A2C2E',
-              borderRadius: '1rem',
-              color: '#2A2C2E',
-              padding: '.4rem 1rem',
-            }}
-          >
-            See more
-          </a>
-        </div>
-      </div>
-    </div>
+        See more
+      </a>
+    </article>
   );
 };
 
@@ -211,12 +217,23 @@ const Subject = block(({ selectedSubject, onSelectSubject }) => {
   ];
 
   return (
-    <>
+    <section
+      style={{
+        width: '100%',
+        display: 'flex',
+        flexWrap: 'nowrap',
+        gap: '10px',
+        overflow: 'auto',
+        background: 'yellow',
+        padding: '3rem 1.2rem',
+      }}
+    >
       {SUBJECTS.map((subject) => (
         <button
           key={subject}
           onClick={() => onSelectSubject(subject)}
           style={{
+            display: 'inline-block',
             cursor: 'pointer',
             outline: ' none',
             borderRadius: '1rem',
@@ -229,7 +246,7 @@ const Subject = block(({ selectedSubject, onSelectSubject }) => {
           {subject}
         </button>
       ))}
-    </>
+    </section>
   );
 });
 
diff --git a/packages/kitchen-sink/src/examples/calculator.tsx b/packages/kitchen-sink/src/examples/calculator.tsx
index 2fcf55bad8..593f68b711 100644
--- a/packages/kitchen-sink/src/examples/calculator.tsx
+++ b/packages/kitchen-sink/src/examples/calculator.tsx
@@ -50,7 +50,6 @@ const Screen = block(({ value, newValue, operator }: ICalculator) => {
     >
       <p
         style={{
-          height: '1rem',
           color: '#333',
           fontSize: '40px',
           fontFamily: 'Roboto, sans-serif',
@@ -62,7 +61,6 @@ const Screen = block(({ value, newValue, operator }: ICalculator) => {
       </p>
       <p
         style={{
-          height: '0.75rem',
           fontSize: 18,
           color: '#aaa',
           fontFamily: 'Roboto, sans-serif',
diff --git a/packages/kitchen-sink/src/examples/carousel.tsx b/packages/kitchen-sink/src/examples/carousel.tsx
index ea0d5f4d2b..ad972ca6a9 100644
--- a/packages/kitchen-sink/src/examples/carousel.tsx
+++ b/packages/kitchen-sink/src/examples/carousel.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { block } from 'million/react';
+import '../css/examples/carousel.css';
 
 const Carousel = block(() => {
   const [images, setImages] = useState<any[]>([]);
@@ -37,19 +38,19 @@ const Carousel = block(() => {
       <div className="carousel">
         <div
           className="carousel-inner"
-          style={{ transform: `translateX(-${currentIndex * 75}%)` }}
+          style={{ transform: `translateX(-${currentIndex * 100}%)` }}
         >
           {images.map((image) => (
             <img key={image.id} src={image.download_url} alt={image.author} />
           ))}
         </div>
       </div>
-      <button style={{ marginRight: 10 }} onClick={prevSlide}>
-        Previous
-      </button>
-      <button style={{ marginRight: 10 }} onClick={nextSlide}>
-        Next
-      </button>
+      <div style={{ marginTop: '10px' }}>
+        <button onClick={prevSlide}>Previous</button>
+        <button style={{ marginLeft: 10 }} onClick={nextSlide}>
+          Next
+        </button>
+      </div>
     </div>
   );
 });
diff --git a/packages/kitchen-sink/src/examples/context.tsx b/packages/kitchen-sink/src/examples/context.tsx
index 5720734900..0b87f29499 100644
--- a/packages/kitchen-sink/src/examples/context.tsx
+++ b/packages/kitchen-sink/src/examples/context.tsx
@@ -3,11 +3,19 @@ import { block } from 'million/react';
 
 const ThemeContext = createContext('light');
 
-const Context = block(() => {
+const Context = block(({onClick}) => {
   const theme = useContext(ThemeContext);
 
   return (
-    <div style={{ color: theme === 'light' ? 'black' : 'white' }}>{theme}</div>
+    <button
+      style={{
+        color: theme === 'light' ? 'black' : 'white',
+        backgroundColor: theme === 'light' ? 'white' : 'black',
+      }}
+      onClick={onClick}
+    >
+      {theme}
+    </button>
   );
 });
 
@@ -16,9 +24,7 @@ const App = block(() => {
 
   return (
     <ThemeContext.Provider value={theme}>
-      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
-        <Context />
-      </button>
+      <Context onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')} />
     </ThemeContext.Provider>
   );
 });
diff --git a/packages/kitchen-sink/src/examples/countdown-timer.jsx b/packages/kitchen-sink/src/examples/countdown-timer.jsx
index aea825caf3..edf6f9b996 100644
--- a/packages/kitchen-sink/src/examples/countdown-timer.jsx
+++ b/packages/kitchen-sink/src/examples/countdown-timer.jsx
@@ -5,7 +5,7 @@ import StopSVG from '../../assets/stop.svg';
 import FlagSVG from '../../assets/flag.svg';
 import ResetSVG from '../../assets/close.svg';
 
-const CountdownTimer = block(function TimerComponent() {
+const CountDownTimer = block(function TimerComponent() {
   const [hours, setHours] = useState(0);
   const [minutes, setMinutes] = useState(0);
   const [seconds, setSeconds] = useState(0);
@@ -96,162 +96,141 @@ const CountdownTimer = block(function TimerComponent() {
   }, [isRunning, hours, minutes, seconds, milliseconds]);
 
   return (
-    <div>
-      <div>
-        <div>
-          <h1 style={{ fontSize: '80px', textAlign: 'center' }}>
-            {`${hours.toString().padStart(2, '0')}:${minutes
-              .toString()
-              .padStart(2, '0')}:${seconds
-              .toString()
-              .padStart(2, '0')}:${milliseconds.toString().padStart(2, '0')}`}
-          </h1>
-        </div>
-
+    <main>
+      <h2 style={{ fontSize: '2.8rem', textAlign: 'center' }}>
+        {`${hours.toString().padStart(2, '0')}:${minutes
+          .toString()
+          .padStart(2, '0')}:${seconds
+          .toString()
+          .padStart(2, '0')}:${milliseconds.toString().padStart(2, '0')}`}
+      </h2>
+
+      <section
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: '10px',
+          flexWrap: 'wrap',
+        }}
+      >
         <div
           style={{
             display: 'flex',
             flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
+            alignItems: 'flex-start',
           }}
         >
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              alignItems: 'flex-start',
-              gap: '20px',
-            }}
-          >
-            <div
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'flex-start',
-              }}
-            >
-              <label htmlFor="hourInput">Hours</label>
-              <input
-                id="hourInput"
-                type="number"
-                value={hours}
-                onChange={handleHourChange}
-              />
-            </div>
-
-            <div
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'flex-start',
-              }}
-            >
-              <label htmlFor="minuteInput">Minutes</label>
-              <input
-                id="minuteInput"
-                type="number"
-                value={minutes}
-                onChange={handleMinuteChange}
-              />
-            </div>
-          </div>
-
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              gap: '20px',
-              marginTop: '20px',
-            }}
-          >
-            <button
-              onClick={startTimer}
-              style={{
-                backgroundColor: '#FF0054',
-                borderRadius: '100px',
-                border: '0px',
-              }}
-            >
-              <img src={StartSVG} alt="play" />
-            </button>
-
-            <button
-              onClick={stopTimer}
-              style={{
-                backgroundColor: '#FF0054',
-                borderRadius: '100px',
-                border: '0px',
-              }}
-            >
-              <img src={StopSVG} alt="stop" />
-            </button>
-
-            <button
-              onClick={recordTime}
-              style={{
-                backgroundColor: '#FF0054',
-                borderRadius: '100px',
-                border: '0px',
-              }}
-            >
-              <img src={FlagSVG} alt="flag" />
-            </button>
-
-            <button
-              onClick={resetTimer}
-              style={{
-                backgroundColor: '#FF0054',
-                borderRadius: '100px',
-                border: '0px',
-              }}
-            >
-              <img src={ResetSVG} alt="reset" />
-            </button>
-          </div>
+          <label htmlFor="hourInput">Hours</label>
+          <input
+            id="hourInput"
+            type="number"
+            value={hours}
+            onChange={handleHourChange}
+          />
         </div>
 
         <div
           style={{
             display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            marginTop: '60px',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
           }}
         >
-          <ul>
-            {recordedTimes.map((time, index) => (
-              <li key={index}>{time}</li>
-            ))}
-          </ul>
+          <label htmlFor="minuteInput">Minutes</label>
+          <input
+            id="minuteInput"
+            type="number"
+            value={minutes}
+            onChange={handleMinuteChange}
+          />
         </div>
+      </section>
+
+      <section
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: '20px',
+          marginBlock: '30px',
+        }}
+      >
+        <button
+          onClick={startTimer}
+          style={{
+            backgroundColor: '#FF0054',
+            borderRadius: '100px',
+            border: '0px',
+          }}
+        >
+          <img src={StartSVG} alt="play" />
+        </button>
+        <button
+          onClick={stopTimer}
+          style={{
+            backgroundColor: '#FF0054',
+            borderRadius: '100px',
+            border: '0px',
+          }}
+        >
+          <img src={StopSVG} alt="stop" />
+        </button>
+        <button
+          onClick={recordTime}
+          style={{
+            backgroundColor: '#FF0054',
+            borderRadius: '100px',
+            border: '0px',
+          }}
+        >
+          <img src={FlagSVG} alt="flag" />
+        </button>
+        <button
+          onClick={resetTimer}
+          style={{
+            backgroundColor: '#FF0054',
+            borderRadius: '100px',
+            border: '0px',
+          }}
+        >
+          <img src={ResetSVG} alt="reset" />
+        </button>
+      </section>
+
+      <section
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: '20px',
+          // marginTop: '30px',
+        }}
+      >
+        <ul>
+          {recordedTimes.map((time, index) => (
+            <li key={index}>{time}</li>
+          ))}
+        </ul>
 
         {recordedTimes.length > 0 && (
-          <div
+          <button
+            onClick={clearFlagData}
             style={{
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
+              backgroundColor: '#00c2cb',
+              width: '120px',
+              color: 'black',
             }}
           >
-            <button
-              onClick={clearFlagData}
-              style={{
-                backgroundColor: '#00c2cb',
-                width: '120px',
-                color: 'black',
-              }}
-            >
-              Clear
-            </button>
-          </div>
+            Clear
+          </button>
         )}
-      </div>
-    </div>
+      </section>
+    </main>
   );
 });
 
-export default CountdownTimer;
+export default CountDownTimer;
diff --git a/packages/kitchen-sink/src/examples/create-event-calender.jsx b/packages/kitchen-sink/src/examples/create-event-calender.jsx
new file mode 100644
index 0000000000..398bbffe8d
--- /dev/null
+++ b/packages/kitchen-sink/src/examples/create-event-calender.jsx
@@ -0,0 +1,129 @@
+import { useState, useRef } from 'react';
+import Calendar from 'react-calendar';
+import 'react-calendar/dist/Calendar.css';
+import { block } from 'million/react';
+import '../css/examples/create-event-calender.css';
+
+const EventCalender = block(() => {
+  const [selectedDate, setSelectedDate] = useState(null);
+  const [events, setEvents] = useState([]);
+  const inputRef = useRef(null);
+
+  const Date_Click_Fun = (date) => {
+    setSelectedDate(date);
+  };
+
+  const Create_Event_Fun = () => {
+    if (selectedDate && inputRef) {
+      const newEvent = {
+        id: new Date().getTime(),
+        date: selectedDate,
+        title: inputRef.current.value,
+      };
+      setEvents([...events, newEvent]);
+      setSelectedDate(null);
+      inputRef.current.value = '';
+      setSelectedDate(newEvent.date);
+    }
+  };
+
+  const Update_Event_Fun = (eventId, newName) => {
+    const updated_Events = events.map((event) => {
+      if (event.id === eventId) {
+        return {
+          ...event,
+          title: newName,
+        };
+      }
+      return event;
+    });
+    setEvents(updated_Events);
+  };
+
+  const Delete_Event_Fun = (eventId) => {
+    const updated_Events = events.filter((event) => event.id !== eventId);
+    setEvents(updated_Events);
+  };
+
+  return (
+    <div className="create-event-calender">
+      <h1>Create an Event Calendar Application</h1>
+      <div className="create-event-calender_wrapper">
+        <div className="calendar-container">
+          <Calendar
+            value={selectedDate}
+            onClickDay={Date_Click_Fun}
+            tileClassName={({ date }) =>
+              selectedDate &&
+              date.toDateString() === selectedDate.toDateString()
+                ? 'selected'
+                : events.some(
+                    (event) =>
+                      event.date.toDateString() === date.toDateString(),
+                  )
+                ? 'event-marked'
+                : ''
+            }
+          />{' '}
+        </div>
+        <div className="event-container">
+          {' '}
+          {selectedDate && (
+            <div className="event-form">
+              <h2> Create Event </h2>{' '}
+              <p> Selected Date: {selectedDate.toDateString()} </p>{' '}
+              <input type="textarea" placeholder="Event Name" ref={inputRef} />
+              <button className="create-btn" onClick={Create_Event_Fun}>
+                Click Here to Add Event{' '}
+              </button>{' '}
+            </div>
+          )}
+          {events.length > 0 && selectedDate && (
+            <div className="event-list">
+              <h2> My Created Event List </h2>{' '}
+              <div className="event-cards">
+                {' '}
+                {events.map((event) =>
+                  event.date.toDateString() === selectedDate.toDateString() ? (
+                    <div key={event.id} className="event-card">
+                      <div className="event-card-header">
+                        <span className="event-date">
+                          {' '}
+                          {event.date.toDateString()}{' '}
+                        </span>{' '}
+                        <div className="event-actions">
+                          <button
+                            className="update-btn"
+                            onClick={() =>
+                              Update_Event_Fun(
+                                event.id,
+                                prompt('ENTER NEW TITLE'),
+                              )
+                            }
+                          >
+                            Update Event{' '}
+                          </button>{' '}
+                          <button
+                            className="delete-btn"
+                            onClick={() => Delete_Event_Fun(event.id)}
+                          >
+                            Delete Event{' '}
+                          </button>{' '}
+                        </div>{' '}
+                      </div>{' '}
+                      <div className="event-card-body">
+                        <p className="event-title"> {event.title} </p>{' '}
+                      </div>{' '}
+                    </div>
+                  ) : null,
+                )}{' '}
+              </div>{' '}
+            </div>
+          )}{' '}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export default EventCalender;
diff --git a/packages/kitchen-sink/src/examples/currency-convertor.tsx b/packages/kitchen-sink/src/examples/currency-convertor.tsx
index 4040de24ac..6d4e86a2ad 100644
--- a/packages/kitchen-sink/src/examples/currency-convertor.tsx
+++ b/packages/kitchen-sink/src/examples/currency-convertor.tsx
@@ -10,6 +10,7 @@ interface CurrencyInputProps {
   currencies?: string[];
   onAmountChange?: (amount: number) => void;
   onCurrencyChange?: (currency: string) => void;
+  title: string;
 }
 function CurrencyConvertor() {
   const [amount1, setAmount1] = useState<number>(1);
@@ -72,15 +73,19 @@ function CurrencyConvertor() {
         textAlign: 'center',
       }}
     >
-      <h1>Currency Converter</h1>
+      <h2 style={{ marginBottom: '10px' }}>Currency Converter</h2>
+
       <CurrencyInput
+        title="1"
         onAmountChange={handleAmount1Change}
         onCurrencyChange={handleCurrency1Change}
         currencies={Object.keys(rates)}
         amount={amount1}
         currency={currency1}
       />
+
       <CurrencyInput
+        title="2"
         onAmountChange={handleAmount2Change}
         onCurrencyChange={handleCurrency2Change}
         currencies={Object.keys(rates)}
@@ -96,13 +101,21 @@ export default CurrencyConvertor;
 const CurrencyInput = block((props: CurrencyInputProps) => {
   return (
     <div>
+      <p>
+        Currency {props?.title}: {props.currency}
+      </p>
       <input
         style={{
           borderRadius: '10px',
           padding: '10px 10px',
           margin: '5px 5px',
+          outline: 'none',
+          height: '40px',
+          color: 'currentcolor',
+          backgroundColor: ' var(--background)',
+          border: 'none',
         }}
-        type="text"
+        type="number"
         value={props.amount}
         onChange={(ev) => props.onAmountChange?.(parseFloat(ev.target.value))}
       />
@@ -112,6 +125,11 @@ const CurrencyInput = block((props: CurrencyInputProps) => {
           padding: '10px 10px',
           margin: '5px 5px',
           outline: 'none',
+          height: '40px',
+          color: 'currentcolor',
+          backgroundColor: ' var(--background)',
+          minWidth: '50px',
+          border: 'none',
         }}
         value={props.currency}
         onChange={(ev) => props.onCurrencyChange?.(ev.target.value)}
diff --git a/packages/kitchen-sink/src/examples/data-converter.tsx b/packages/kitchen-sink/src/examples/data-converter.tsx
index fb92d30fbc..83ed408204 100644
--- a/packages/kitchen-sink/src/examples/data-converter.tsx
+++ b/packages/kitchen-sink/src/examples/data-converter.tsx
@@ -51,19 +51,20 @@ const DataConverter: React.FC = block(() => {
   };
 
   return (
-    <div
+    <main
       style={{
         textAlign: 'center',
       }}
       className="Data Converter"
     >
-      <h1>Data Converter</h1>
+      <h2>Data Converter</h2>
       <div>
         <input
           style={{
             borderRadius: '10px',
             padding: '10px 10px',
             margin: '5px 5px',
+            height: '40px',
           }}
           type="number"
           value={state.value}
@@ -76,6 +77,10 @@ const DataConverter: React.FC = block(() => {
             padding: '10px 10px',
             margin: '5px 5px',
             outline: 'none',
+            color: 'currentcolor',
+            backgroundColor: ' var(--background)',
+            border: 'none',
+            height: '40px',
           }}
           value={state.inputUnit}
           onChange={handleInputUnitChange}
@@ -94,10 +99,13 @@ const DataConverter: React.FC = block(() => {
             borderRadius: '10px',
             padding: '10px 10px',
             margin: '5px 5px',
+            height: '40px',
+            cursor: 'not-allowed',
           }}
           type="number"
           value={state.convertedValue}
           disabled
+          
         />
         <select
           style={{
@@ -105,6 +113,10 @@ const DataConverter: React.FC = block(() => {
             padding: '10px 10px',
             margin: '5px 5px',
             outline: 'none',
+            height: '40px',
+            color: 'currentcolor',
+            backgroundColor: ' var(--background)',
+            border: 'none',
           }}
           value={state.outputUnit}
           onChange={handleOutputUnitChange}
@@ -132,7 +144,7 @@ const DataConverter: React.FC = block(() => {
       >
         Convert
       </button>
-    </div>
+    </main>
   );
 });
 
diff --git a/packages/kitchen-sink/src/examples/dice-roller.tsx b/packages/kitchen-sink/src/examples/dice-roller.tsx
index 89baa68625..b31bacc939 100644
--- a/packages/kitchen-sink/src/examples/dice-roller.tsx
+++ b/packages/kitchen-sink/src/examples/dice-roller.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { block } from 'million/react';
+import '../css/examples/dice-roller.css';
 
 const DiceRoller: React.FC = block(() => {
   const [result, setResult] = useState<number | null>(null);
diff --git a/packages/kitchen-sink/src/examples/digital-personal-journal.jsx b/packages/kitchen-sink/src/examples/digital-personal-journal.jsx
index 2551d393bf..525253180f 100644
--- a/packages/kitchen-sink/src/examples/digital-personal-journal.jsx
+++ b/packages/kitchen-sink/src/examples/digital-personal-journal.jsx
@@ -3,17 +3,17 @@ import { block } from 'million/react';
 
 const JournalComponent = ({ entry, onDelete }) => (
   <div>
-    <h1 style={{ color: '#FF5E5B', margin: '0' }}>
+    <h3 style={{ color: '#FF5E5B', margin: '0', fontSize: '1.4rem' }}>
       {entry.id}. {entry.title}
-    </h1>
-    <p style={{ color: '#ADB5BD' }}>{entry.text}</p>
+    </h3>
+    <p style={{ marginBottom: '15px' }}>{entry.text}</p>
     {entry.media && (
       <div>
         {entry.media.type.startsWith('image') && (
           <img
             src={entry.media.url}
             alt="Multimedia Entry"
-            style={{ width: '30%' }}
+            style={{ width: '50%', marginBottom: '15px' }}
           />
         )}
         {entry.media.type.startsWith('video') && (
@@ -37,6 +37,8 @@ const JournalComponent = ({ entry, onDelete }) => (
           width: '100%',
           height: '2px',
           backgroundColor: '#FFA987',
+          marginTop: '10px',
+          marginBottom: '10px',
         }}
       ></span>
     </div>
@@ -79,28 +81,51 @@ const DigitalPersonalJournal = block(function Journal() {
   };
 
   return (
-    <div>
-      <h1>My Digital Personal Journal</h1>
+    <main>
+      <h2 style={{ marginBottom: '15px' }}>My Digital Personal Journal</h2>
       <div>
         <input
           type="text"
           placeholder="Title of your Journal"
           value={title}
           onChange={(e) => setTitle(e.target.value)}
-          style={{ display: 'block', marginBottom: '15px' }}
+          style={{
+            display: 'block',
+            marginBottom: '15px',
+            width: '100%',
+            maxWidth: '500px',
+          }}
         />
-        <input
-          type="text"
+
+        <textarea
+          cols="30"
+          rows="10"
           placeholder="Write your Journal here"
           value={text}
           onChange={(e) => setText(e.target.value)}
-          style={{ display: 'block', marginBottom: '15px' }}
-        />
+          style={{
+            display: 'block',
+            marginBottom: '15px',
+            width: '100%',
+            maxWidth: '500px',
+            color: 'currentcolor',
+            backgroundColor: ' var(--background)',
+            border: 'none',
+            borderRadius: '4px',
+            padding: '10px',
+            fontSize: 'inherit',
+          }}
+        ></textarea>
         <input
           type="file"
           accept=".png, .jpg, .jpeg, .mp4, .mp3, .gif"
           onChange={(e) => setMediaFile(e.target.files[0])}
-          style={{ display: 'block', marginBottom: '15px' }}
+          style={{
+            display: 'block',
+            marginBottom: '15px',
+            width: '100%',
+            maxWidth: '250px',
+          }}
           ref={fileInputRef}
         />
         <button
@@ -109,6 +134,7 @@ const DigitalPersonalJournal = block(function Journal() {
             display: 'block',
             marginBottom: '15px',
             backgroundColor: 'orange',
+            color: 'black',
           }}
         >
           Add Journal
@@ -122,6 +148,7 @@ const DigitalPersonalJournal = block(function Journal() {
             width: '100%',
             height: '2px',
             backgroundColor: '#FFED66',
+            marginTop: '20px',
             marginBottom: '2px',
           }}
         ></span>
@@ -131,6 +158,7 @@ const DigitalPersonalJournal = block(function Journal() {
             width: '100%',
             height: '2px',
             backgroundColor: '#FFED66',
+            marginBottom: '20px',
           }}
         ></span>
       </div>
@@ -144,7 +172,7 @@ const DigitalPersonalJournal = block(function Journal() {
           />
         ))}
       </div>
-    </div>
+    </main>
   );
 });
 
diff --git a/packages/kitchen-sink/src/examples/discount-calculator.tsx b/packages/kitchen-sink/src/examples/discount-calculator.tsx
index 1b58511460..9790da4231 100644
--- a/packages/kitchen-sink/src/examples/discount-calculator.tsx
+++ b/packages/kitchen-sink/src/examples/discount-calculator.tsx
@@ -31,29 +31,29 @@ const DiscountCalculator = block(() => {
 
   return (
     <div className="Discount Calculator">
-      <h1>Discount Calculator</h1>
-      <div>
+      <h2>Discount Calculator</h2>
+      <div style={{ display: 'block', marginBottom: '10px' }}>
         <label>Original Price ($): </label>
         <input
           type="number"
           value={originalPrice}
           onChange={(e) => setOriginalPrice(e.target.value)}
-          style={{ display: 'block', marginBottom: '15px' }}
+          style={{ display: 'block' }}
         />
       </div>
-      <div>
+      <div style={{ display: 'block', marginBottom: '20px' }}>
         <label>Discount (% off): </label>
         <input
           type="number"
           value={discountRate}
           onChange={(e) => setDiscountRate(e.target.value)}
-          style={{ display: 'block', marginBottom: '15px' }}
+          style={{ display: 'block' }}
         />
       </div>
       <button onClick={calculateDiscount}>Calculate</button>
 
       {results && (
-        <div className="results">
+        <div className="results" style={{ marginTop: '20px' }}>
           <h2>Results:</h2>
           <div>Final Price : ${results.finalPrice.toFixed(2)}</div>
           <div>You Save : ${results.discountPrice.toFixed(2)}</div>
diff --git a/packages/kitchen-sink/src/main.tsx b/packages/kitchen-sink/src/main.tsx
index f6fc2d6562..e280d3d2c4 100644
--- a/packages/kitchen-sink/src/main.tsx
+++ b/packages/kitchen-sink/src/main.tsx
@@ -6,7 +6,8 @@ import {
   LazyExoticComponent,
   useEffect,
 } from 'react';
-import './style.css';
+import './css/style.css';
+import './css/examples/style.css';
 import { ErrorBoundary } from 'react-error-boundary';
 import { RxHamburgerMenu } from 'react-icons/rx';
 import { AiOutlineClose } from 'react-icons/ai';
diff --git a/website/liveblocks.config.ts b/website/liveblocks.config.ts
index a8072cd2c0..824bd6e0b2 100644
--- a/website/liveblocks.config.ts
+++ b/website/liveblocks.config.ts
@@ -1,6 +1,6 @@
 import { createClient } from '@liveblocks/client';
 import { createRoomContext } from '@liveblocks/react';
-import type { JsonObject} from '@liveblocks/client';
+import type { JsonObject } from '@liveblocks/client';
 
 const client = createClient({
   throttle: 16,