Develop -> Main

src/components/Checkbox/Checkbox.jsx

@@ -8,22 +8,18 @@
  * @returns
  */
 
-// TODO: Remove ESLINT DISABLE WHEN REVERTING BACK TO CHECKBOX
-// eslint-disable-next-line
 const Checkbox = ({ label, size = 'md', checked, onChange }) => {
-  // TODO: Change The Input Type to Checkbox, and remove the className property
-
   return (
     <label className='custom checkbox container'>
       <input
-        type='radio'
+        type='checkbox'
         className={checked ? 'checked' : undefined}
         onChange={e => {
           onChange(e.target.checked)
         }}
         checked={checked}
       />
-      {/* <span className='checkmark' data-size={size} /> */}
+      <span className='checkmark' data-size={size} />
       {label}
     </label>
   )

src/components/Radio/Radio.jsx

@@ -0,0 +1,26 @@
+/**
+ *
+ * @param {Object} props
+ * @param {string | Element} props.label
+ * @param {boolean} props.checked
+ * @param {(checked?: boolean) => any} props.onChange
+ * @returns
+ */
+
+const Radio = ({ label, checked, onChange }) => {
+  return (
+    <label className='custom checkbox container'>
+      <input
+        type='radio'
+        className={checked ? 'checked' : undefined}
+        onChange={e => {
+          onChange(e.target.checked)
+        }}
+        checked={checked}
+      />
+      {label}
+    </label>
+  )
+}
+
+export { Radio }

src/components/Radio/Radio.scss

@@ -0,0 +1,13 @@
+.custom.radio.container {
+  position: relative;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: max-content;
+
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}

src/components/UserOnboarding/MinimizedInfo.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import { Button } from '@/components/Button/Button'
+
+const MinimizedInfo = ({ hide }) => {
+  return (
+    <div className='minimized guide info'>
+      <div className='guide content'>
+        <div>
+          The guide will be available on this tray throughout the walkthrough.
+        </div>
+
+        <Button onClick={hide}>Got It</Button>
+      </div>
+    </div>
+  )
+}
+
+export default MinimizedInfo

src/components/UserOnboarding/MinimizedInfo.scss

@@ -0,0 +1,42 @@
+@use "../../design-system/colors";
+@use "../../design-system/shadows";
+@use "../../design-system/typography/styles";
+@use "../../design-system/typography/weights";
+
+.minimized.guide.info {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 99998;
+
+  .guide.content {
+    position: fixed;
+    background-color: colors.$gray-900;
+    color: colors.$base-white;
+    max-width: 320px;
+    bottom: 166px;
+    right: 32px;
+    padding: 12px;
+    border-radius: 8px;
+
+    @media (max-width: 767px) {
+      bottom: 96px;
+      left: 8px;
+      right: 8px;
+      max-width: unset;
+    }
+
+    div {
+      @include styles.text-xs;
+      @include weights.medium;
+    }
+
+    button {
+      margin-top: 4px;
+      margin-left: auto;
+      padding: 4px 10px;
+      @include styles.text-xs;
+      @include weights.semibold;
+    }
+  }
+}