Add new configuration for styles to CheckBox component

Author: Kubit

src/components/checkbox/checkbox.styled.tsx

@@ -12,31 +12,34 @@ type SpanChecked = {
   $isChecked?: boolean;
 };
 
-export const CheckboxContainerStyled = styled.div`
+export const CheckboxContainerStyled = styled.div<ThemeStylesType>`
   width: fit-content;
+  ${props => getStyles(props.styles?.container)}
 `;
 
-export const CheckboxIconLabelWrapperStyled = styled.div`
+export const CheckboxIconLabelWrapperStyled = styled.div<ThemeStylesType>`
   display: flex;
   flex-direction: row;
   align-items: flex-start;
+  ${props => getStyles(props.styles?.iconLabelWrapper)}
 `;
 
 export const CheckboxStyled = styled.input<ThemeStylesType>`
-  ${props => getStyles(props.styles?.checkbox)}
   appearance: none;
   cursor: pointer;
   display: grid;
   place-content: center;
   &:disabled {
     cursor: default;
   }
+  ${props => getStyles(props.styles?.checkbox)}
 `;
 
-export const CheckboxFrameStyled = styled.div`
+export const CheckboxFrameStyled = styled.div<ThemeStylesType>`
   position: relative;
   height: fit-content;
   width: fit-content;
+  ${props => getStyles(props.styles?.frameContainer)}
 `;
 
 export const CheckedIcon = styled.span<ThemeStylesType & SpanChecked>`

src/components/checkbox/checkboxStandAlone.tsx

@@ -122,9 +122,9 @@ const CheckboxStandAloneComponent = (
   };
 
   return (
-    <CheckboxContainerStyled>
-      <CheckboxIconLabelWrapperStyled>
-        <CheckboxFrameStyled>
+    <CheckboxContainerStyled styles={styles}>
+      <CheckboxIconLabelWrapperStyled styles={styles}>
+        <CheckboxFrameStyled styles={styles}>
           <CheckboxStyled
             ref={ref}
             aria-describedby={buildAriaDescribedBy({

src/components/checkbox/types/checkboxTheme.ts

@@ -19,6 +19,9 @@ export type CheckboxPropsStylesType = {
   errorWrapper?: CommonStyleType;
   errorIcon?: IconTypes;
   textError?: TypographyTypes;
+  container?: CommonStyleType;
+  iconLabelWrapper?: CommonStyleType;
+  frameContainer?: CommonStyleType;
 };
 
 export type CheckboxPropsStateStylesType = {