fix(striker-ui): correct label in SwitchWithLabel

striker-ui/components/ManageFence/CommonFenceInputGroup.tsx

@@ -24,7 +24,6 @@ const MAP_TO_INPUT_BUILDER: MapToInputBuilder = {
         input={
           <SwitchWithLabel
             checked={isChecked}
-            flexBoxProps={{ width: '100%' }}
             id={id}
             label={label}
             name={name}

striker-ui/components/SwitchWithLabel.tsx

@@ -1,55 +1,58 @@
-import { Switch, SxProps, Theme } from '@mui/material';
+import {
-import { FC, useMemo } from 'react';
+  FormControlLabel as MUIFormControlLabel,
+  styled,
+  Switch as MUISwitch,
+} from '@mui/material';
+import { FC, ReactElement, useMemo } from 'react';
 
 import { GREY } from '../lib/consts/DEFAULT_THEME';
 
-import FlexBox from './FlexBox';
 import { BodyText } from './Text';
 
+const SwitchFormControlLabel = styled(MUIFormControlLabel)({
+  height: '3.5em',
+  marginLeft: 0,
+  width: '100%',
+});
+
 const SwitchWithLabel: FC<SwitchWithLabelProps> = ({
   checked: isChecked,
-  flexBoxProps: { sx: flexBoxSx, ...restFlexBoxProps } = {},
+  formControlLabelProps,
   id: switchId,
   label,
   name: switchName,
   onChange,
   switchProps,
 }) => {
-  const combinedFlexBoxSx = useMemo<SxProps<Theme>>(
+  const labelElement = useMemo<ReactElement>(
-    () => ({
-      '& > :first-child': {
-        flexGrow: 1,
-      },
-
-      ...flexBoxSx,
-    }),
-    [flexBoxSx],
-  );
-
-  const labelElement = useMemo(
     () =>
       typeof label === 'string' ? (
-        <BodyText inheritColour color={`${GREY}9F`}>
+        <BodyText inheritColour color={`${GREY}AF`}>
           {label}
         </BodyText>
       ) : (
-        label
+        <>{label}</>
       ),
     [label],
   );
 
   return (
-    <FlexBox row {...restFlexBoxProps} sx={combinedFlexBoxSx}>
+    <SwitchFormControlLabel
-      {labelElement}
+      componentsProps={{ typography: { flexGrow: 1 } }}
-      <Switch
+      control={
-        checked={isChecked}
+        <MUISwitch
-        edge="end"
+          checked={isChecked}
-        id={switchId}
+          edge="end"
-        name={switchName}
+          id={switchId}
-        onChange={onChange}
+          name={switchName}
-        {...switchProps}
+          onChange={onChange}
-      />
+          {...switchProps}
-    </FlexBox>
+        />
+      }
+      label={labelElement}
+      labelPlacement="start"
+      {...formControlLabelProps}
+    />
   );
 };
 

striker-ui/types/SwitchWithLabel.d.ts

@@ -1,5 +1,5 @@
 type SwitchWithLabelOptionalProps = {
-  flexBoxProps?: import('../components/FlexBox').FlexBoxProps;
+  formControlLabelProps?: import('@mui/material').FormControlLabelProps;
   switchProps?: import('@mui/material').SwitchProps;
 };