feat: added Checkbox component

lib/components/Checkbox/Checkbox.scss

@@ -0,0 +1,39 @@
+$border_radius: 2px;
+$border: 2px solid;
+$border_color: #999999;
+$brand_color: #ff444f;
+
+.deriv-checkbox__wrapper {
+  display: inline-flex;
+  position: relative;
+  width: fit-content;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.deriv-checkbox {
+  width: 16px;
+  height: 16px;
+  border-radius: $border_radius;
+  transition: background-color 0.3s ease;
+  cursor: pointer;
+
+  &--unchecked {
+    background: transparent;
+    border: $border $border_color;
+  }
+
+  &--checked {
+    border: none;
+    background-color: $brand_color;
+    background-image: url("./checkbox-icon.svg");
+    background-position: center;
+    background-repeat: no-repeat;
+    border-radius: $border_radius;
+  }
+
+  &__label {
+    flex-grow: 1;
+  }
+}

lib/components/Checkbox/index.tsx

@@ -0,0 +1,37 @@
+import React, { ComponentProps } from "react";
+import clsx from "clsx";
+import "./Checkbox.scss";
+
+interface CheckboxProps extends Omit<ComponentProps<"input">, "placeholder"> {
+  wrapperClassName?: string;
+}
+
+export const Checkbox = ({
+  checked,
+  children,
+  className,
+  defaultChecked,
+  wrapperClassName,
+  ...rest
+}: CheckboxProps) => {
+  return (
+    <div className={clsx("deriv-checkbox__wrapper", wrapperClassName)}>
+      <input
+        checked={checked}
+        defaultChecked={defaultChecked}
+        className={clsx(
+          "deriv-checkbox",
+          {
+            "deriv-checkbox--unchecked": !checked,
+            "deriv-checkbox--checked": checked,
+          },
+          className
+        )}
+        type="checkbox"
+        {...rest}
+      />
+      <span className="deriv-checkbox__icon"></span>
+      <label className="deriv-checkbox__label">{children}</label>
+    </div>
+  );
+};

lib/main.ts

@@ -11,3 +11,4 @@ export { useDevice } from "./hooks/useDevice";
 export { useOnClickOutside } from "./hooks/useOnClickOutside";
 export { PasswordInput } from "./components/PasswordInput";
 export { InlineMessage } from "./components/InlineMessage";
+export { Checkbox } from "./components/Checkbox";