refactor: Added toggle switch component

lib/components/ToggleSwitch/ToggleSwitch.scss

@@ -0,0 +1,56 @@
+.deriv-toggle-switch {
+    position: relative;
+    display: inline-flex;
+    width: 4.4rem;
+    height: 2.4rem;
+
+    @include mobile {
+        width: 3.8rem;
+    }
+
+    & > input {
+        width: 0;
+        height: 0;
+    }
+
+    &__slider {
+        position: absolute;
+        inset: 0;
+        cursor: pointer;
+        background-color: var(--light-4-disabled-text, #d6d6d6);
+        transition: 0.4s;
+        border-radius: 1.6rem;
+
+        &:before {
+            position: absolute;
+            content: '';
+            height: 1.8rem;
+            width: 1.8rem;
+            left: 0.3rem;
+            bottom: 0.3rem;
+            background-color: var(--system-dark-1-prominent-text, #fff);
+            transition: 0.4s;
+            border-radius: 50%;
+
+            @include mobile {
+                left: 0.4rem;
+            }
+        }
+    }
+}
+
+.deriv-toggle-switch input:checked + .deriv-toggle-switch__slider {
+    background-color: var(--light-status-success, #4bb4b3);
+}
+
+.deriv-toggle-switch input:checked + .deriv-toggle-switch__slider:before {
+    -webkit-transform: translateX(2rem);
+    -ms-transform: translateX(2rem);
+    transform: translateX(2rem);
+
+    @include mobile {
+        -webkit-transform: translateX(1.2rem);
+        -ms-transform: translateX(1.2rem);
+        transform: translateX(1.2rem);
+    }
+}

lib/components/ToggleSwitch/index.tsx

@@ -0,0 +1,14 @@
+import React, { ChangeEvent, forwardRef } from 'react';
+import './ToggleSwitch.scss';
+
+interface ToggleSwitchProps {
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    value: boolean;
+}
+
+export const ToggleSwitch = forwardRef<HTMLInputElement, ToggleSwitchProps>(({ onChange, value }, ref) => (
+    <label className='deriv-toggle-switch'>
+        <input checked={value} onChange={onChange} ref={ref} type='checkbox' />
+        <span className='deriv-toggle-switch__slider' />
+    </label>
+));

lib/main.ts

@@ -3,4 +3,5 @@ export { Button } from "./components/Button";
 export { Text } from "./components/Text";
 export { Tab, Tabs } from "./components/Tabs";
 export { Tooltip } from "./components/Tooltip";
+export {ToggleSwitch} from "./components/ToggleSwitch"
 export { Input } from "./components/Input";