chore(new-ui): finalize changes to checkbox component

Author: sajclarke

packages/new-polymath-ui/src/components/inputs/Checkbox/Checkbox.tsx

@@ -1,13 +1,12 @@
-import React, { FC, useState, Fragment } from 'react';
+import React, { FC, useState } from 'react';
 import { uniqueId } from 'lodash';
 import { InlineFlex } from '~/components/InlineFlex';
 import { SvgCheckmark } from '~/images/icons/Checkmark';
 import { FormikProxy, EnhancedComponentProps } from '../FormikProxy';
 import * as sc from './styles';
-import { Label } from './Label';
 
 interface Props {
-  onChange: (e: boolean) => void;
+  onChange: (e: any) => void;
   /**
    * Specify whether the toggle should be on by default
    */
@@ -38,33 +37,32 @@ export const CheckboxPrimitive: FC<Props> = ({
   }
 
   return (
-    <Fragment>
-      <InlineFlex>
-        <sc.Input
-          {...other}
-          {...checkedProps}
-          type="checkbox"
-          id={name || id}
-          name={name || id}
-          onChange={e => {
-            onChange(e.currentTarget.checked);
-          }}
+    <sc.CheckboxInlineFlex>
+      <sc.Input
+        {...other}
+        {...checkedProps}
+        type="checkbox"
+        id={name || id}
+        name={name || id}
+        onChange={e => {
+          onChange(e.target.checked);
+        }}
+      />
+      <sc.CheckboxInput htmlFor={name || id}>
+        <sc.CheckIcon
+          Asset={SvgCheckmark}
+          color="white"
+          width="0.85em"
+          cd
+          height="0.85em"
         />
-        <sc.CheckboxInput htmlFor={name || id}>
-          <sc.CheckIcon
-            Asset={SvgCheckmark}
-            color="white"
-            width="0.85em"
-            height="0.85em"
-          />
-        </sc.CheckboxInput>
-        {label && (
-          <InlineFlex ml={2}>
-            <Label htmlFor={name || id}>{label}</Label>
-          </InlineFlex>
-        )}
-      </InlineFlex>
-    </Fragment>
+      </sc.CheckboxInput>
+      {label && (
+        <InlineFlex ml={2}>
+          <sc.CheckboxLabel htmlFor={name || id}>{label}</sc.CheckboxLabel>
+        </InlineFlex>
+      )}
+    </sc.CheckboxInlineFlex>
   );
 };