remove checkbox overlay (#404)

* remove checkbox overlay

* v2.5.2

Author: jacekkolasa

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "description": "netdata UI kit",
   "main": "./lib/index.js",
   "files": [

src/components/checkbox/checkbox.js

@@ -3,20 +3,12 @@ import { Text } from "src/components/typography"
 import useCheckBoxStyles from "./use-styles-checkbox"
 import useCheckbox from "./use-checkbox"
 
-import {
-  CheckboxContainer,
-  HiddenCheckboxInput,
-  StyledCheckbox,
-  StyledLabel,
-  LabelText,
-  StyledIcon,
-  AccessibleArea,
-} from "./styled"
+import { CheckboxContainer, HiddenCheckboxInput, LabelText, StyledCheckbox, StyledIcon, StyledLabel } from "./styled"
 
 export const Checkbox = forwardRef((
   {
     checked,
-    'data-testid': testId,
+    "data-testid": testId,
     disabled,
     className,
     labelPosition,
@@ -39,8 +31,13 @@ export const Checkbox = forwardRef((
   })
 
   return (
-    <StyledLabel data-testid={testId} disabled={disabled} className={className} margin={margin} alignSelf={alignSelf}>
-      <AccessibleArea />
+    <StyledLabel
+      data-testid={testId}
+      disabled={disabled}
+      className={className}
+      margin={margin}
+      alignSelf={alignSelf}
+    >
       {label && labelPosition === "left" && (
         <LabelText as={Label} left>
           {label}

src/components/checkbox/styled.js

@@ -1,9 +1,8 @@
 import styled from "styled-components"
 import { Icon } from "src/components/icon"
-import { getValidatedControlColor, getColor, getSizeUnit } from "src/theme/utils"
+import { getSizeUnit, getValidatedControlColor } from "src/theme/utils"
 import margin from "src/mixins/margin"
 import alignSelf from "src/mixins/alignSelf"
-import { controlFocused } from "src/mixins"
 
 import Flex from "src/components/templates/flex"
 
@@ -60,11 +59,3 @@ export const LabelText = styled.span`
   ${({ right, ...props }) =>
     right ? `margin-left: ${getSizeUnit(props)}px;` : `margin-right: ${getSizeUnit(props)}px;`}
 `
-
-export const AccessibleArea = styled.div`
-  position: absolute;
-  top: -5px;
-  left: -5px;
-  height: 30px;
-  width: calc(100% + 10px);
-`