Fix: stop using absolute position to hide Checkbox input (#227)

Author: krishan711

CHANGELOG.md

@@ -23,6 +23,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [PATCH] Corrections for how height is calculated in `MultiLineInput`
 - [MAJOR] Removed `Head` in favor of react 19 inline metadata tags
 - [MINOR] Added `isResizableVertically` and `isResizableHorizontally` to `MultiLineInput`
+- [MAJOR] Fix for `Checkbox` to not use aboslute positioning to hide the input
 
 ### Removed
 

src/atoms/checkbox/component.tsx

@@ -118,16 +118,14 @@ const StyledContainer = styled.label<IStyledCheckboxProps>`
 `;
 
 const StyledHiddenCheckbox = styled.input`
+  opacity: 0;
+  pointer-events: none;
+  width: 0 !important;
+  height: 0 !important;
+  margin: 0;
+  padding: 0;
   border: 0;
-  clip: rect(0 0 0 0);
-  clippath: inset(50%);
-  height: 1px;
-  width: 1px;
-  margin: -1px;
   overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
 `;
 
 const StyledCheckbox = styled.div`

src/molecules/optionSelect/documentation.mdx

@@ -16,7 +16,7 @@ export const Template = (args) => {
     <div style={{height: '250px'}}>
       <OptionSelect {...args} selectedItemKey={args.selectedItemKey || selectedItemKey} options={args.options || options} onItemClicked={args.onItemClicked || setSelectedItemKey} />
     </div>
-    );
+  );
 };
 
 <Canvas withToolbar={true} withSource={'none'}>