Fix(theme): Scope transparent color in checkbox modifier to default unchecked icon

src/icons/Checkbox/CheckboxCheckedIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
+
+export const CheckboxCheckedIcon = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  ...props
+}: IconProps): JSX.Element => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+    fill="currentColor"
+  >
+    <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+  </svg>
+);
+
+export default CheckboxCheckedIcon;

src/icons/Checkbox/CheckboxIcon.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
+
+export const CheckboxIcon = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  ...props
+}: IconProps): JSX.Element => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+    fill="none"
+  >
+    <rect
+      x="3"
+      y="3"
+      width="18"
+      height="18"
+      rx="2"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+  </svg>
+);
+
+export default CheckboxIcon;

src/icons/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export * from './CheckboxIcon';
+export * from './CheckboxCheckedIcon';

src/icons/index.ts

@@ -206,3 +206,4 @@ export * from './Warning';
 export * from './Wasm';
 export * from './Workspace';
 export * from './Zoom';
+export * from './Checkbox';

src/theme/components/checkbox.modifier.ts

@@ -1,37 +1,33 @@
 import { Components, Theme } from '@mui/material';
+import React from 'react';
+import { CheckboxIcon } from '../../icons/Checkbox/CheckboxIcon';
+import { CheckboxCheckedIcon } from '../../icons/Checkbox/CheckboxCheckedIcon';
 
 export const MuiCheckbox: Components<Theme>['MuiCheckbox'] = {
+  defaultProps: {
+    icon: React.createElement(CheckboxIcon),
+    checkedIcon: React.createElement(CheckboxCheckedIcon),
+  },
   styleOverrides: {
     root: ({ theme, ownerState }) => {
       const {
         palette: {
           text: { default: defaultText },
           icon: { inverse: inverseColor },
-          background: { brand },
           border: { strong }
         }
       } = theme;
 
       const inverseBackground = ownerState.inverseBackground || false;
 
       return {
-        color: 'transparent',
+        color: inverseBackground ? inverseColor : strong,
         '&.Mui-checked': {
           color: defaultText,
-          '& .MuiSvgIcon-root': {
-            width: '1.25rem',
-            height: '1.25rem',
-            borderColor: brand?.default,
-            marginLeft: '0px',
-            fill: inverseBackground ? inverseColor : defaultText,
-            padding: '0px'
-          }
         },
         '& .MuiSvgIcon-root': {
           width: '1.25rem',
           height: '1.25rem',
-          border: `.75px solid ${inverseBackground ? inverseColor : strong}`,
-          borderRadius: '2px',
           padding: '0px'
         },
         '&:hover': {