cozy-ui 130.10.0 → 130.11.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [130.11.0](https://github.com/cozy/cozy-ui/compare/v130.10.0...v130.11.0) (2025-10-21)
+
+
+### Bug Fixes
+
+* **Checkbox:** Now `label` type also accept `node` in addition to `string` ([caf3de5](https://github.com/cozy/cozy-ui/commit/caf3de5))
+* **Switch:** Adjust spacing to better deal with `start` label's position ([528834b](https://github.com/cozy/cozy-ui/commit/528834b))
+
+
+### Features
+
+* **Checkbox:** Add `labelPlacement` prop ([24c884d](https://github.com/cozy/cozy-ui/commit/24c884d))
+
 # [130.10.0](https://github.com/cozy/cozy-ui/compare/v130.9.0...v130.10.0) (2025-10-16)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "130.10.0",
+  "version": "130.11.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/Checkbox/Readme.md

@@ -3,49 +3,54 @@
 ```jsx
 import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
 import Grid from 'cozy-ui/transpiled/react/Grid'
+import Variants from 'cozy-ui/docs/components/Variants'
+
+const initialVariants = [{ before: false }]
 
 ;
 
-<>
-  <Grid container>
-    <Grid item xs={6} sm={3}>
-      <div><Checkbox label="Checkbox" /></div>
-      <div><Checkbox label="Small Checked" size="small" /></div>
-      <div><Checkbox label="Checked checkbox" checked /></div>
-      <div><Checkbox label="Mixed checkbox" mixed /></div>
-      <div><Checkbox label="Mixed checked checkbox" checked mixed /></div>
-      <div><Checkbox label="No effect" disableEffect /></div>
-      <div><Checkbox label="Small no effect" size="small" disableEffect /></div>
-    </Grid>
-    <Grid item xs={6} sm={3}>
-      <div><Checkbox label="Disabled checkbox" disabled /></div>
-      <div><Checkbox label="Small disabled checkbox" size="small" disabled /></div>
-      <div><Checkbox label="Disabled checked checkbox" checked disabled /></div>
-      <div><Checkbox label="Disabled mixed checkbox" mixed disabled /></div>
-      <div><Checkbox label="Disabled mixed checked checkbox" checked mixed disabled /></div>
-      <div><Checkbox label="Disabled no effect" disableEffect disabled /></div>
-      <div><Checkbox label="Small disabled no effect" size="small" disableEffect disabled /></div>
-    </Grid>
-    <Grid item xs={6} sm={3}>
-      <div><Checkbox label="Error checkbox" error /></div>
-      <div><Checkbox label="Small error checkbox" size="small" error /></div>
-      <div><Checkbox label="Error checked checkbox" error checked /></div>
-      <div><Checkbox label="Error mixed checkbox" error mixed /></div>
-      <div><Checkbox label="Error mixed checked checkbox" error checked mixed /></div>
-      <div><Checkbox label="Error no effect" error disableEffect /></div>
-      <div><Checkbox label="Small error no effect" size="small" error disableEffect /></div>
-    </Grid>
-    <Grid item xs={6} sm={3}>
-      <div><Checkbox label="Error disabled checkbox" error disabled /></div>
-      <div><Checkbox label="Small error disabled checkbox" size="small" error disabled /></div>
-      <div><Checkbox label="Error disabled checked checkbox" error checked disabled /></div>
-      <div><Checkbox label="Error disabled mixed checkbox" error mixed disabled /></div>
-      <div><Checkbox label="Error disabled mixed checked checkbox" error checked mixed disabled /></div>
-      <div><Checkbox label="Error disabled no effect" error disableEffect disabled /></div>
-      <div><Checkbox label="Small error disabled no effect" size="small" error disableEffect disabled /></div>
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <Grid container>
+      <Grid item xs={6} sm={3}>
+        <div><Checkbox label="Checkbox" labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Small Checked" size="small" labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Checked checkbox" checked labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Mixed checkbox" mixed labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Mixed checked checkbox" checked mixed labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="No effect" disableEffect labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Small no effect" size="small" disableEffect labelPlacement={variant.before ? "start" : "end"} /></div>
+      </Grid>
+      <Grid item xs={6} sm={3}>
+        <div><Checkbox label="Disabled checkbox" disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Small disabled checkbox" size="small" disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Disabled checked checkbox" checked disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Disabled mixed checkbox" mixed disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Disabled mixed checked checkbox" checked mixed disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Disabled no effect" disableEffect disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Small disabled no effect" size="small" disableEffect disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+      </Grid>
+      <Grid item xs={6} sm={3}>
+        <div><Checkbox label="Error checkbox" error labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Small error checkbox" size="small" error labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Error checked checkbox" error checked labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Error mixed checkbox" error mixed labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Error mixed checked checkbox" error checked mixed labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Error no effect" error disableEffect labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Small error no effect" size="small" error disableEffect labelPlacement={variant.before ? "start" : "end"} /></div>
+      </Grid>
+      <Grid item xs={6} sm={3}>
+        <div><Checkbox label="Error disabled checkbox" error disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Small error disabled checkbox" size="small" error disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Error disabled checked checkbox" error checked disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Error disabled mixed checkbox" error mixed disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Error disabled mixed checked checkbox" error checked mixed disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Error disabled no effect" error disableEffect disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+        <div><Checkbox label="Small error disabled no effect" size="small" error disableEffect disabled labelPlacement={variant.before ? "start" : "end"} /></div>
+      </Grid>
     </Grid>
-  </Grid>
-</>
+  )}
+</Variants>
 ```
 
 ### Checkbox with complex children

package/react/Checkbox/index.jsx

@@ -52,7 +52,14 @@ const DefaultCheckbox = ({
   )
 }
 
-const Checkbox = ({ className, label, onChange, children, ...props }) => {
+const Checkbox = ({
+  className,
+  label,
+  labelPlacement,
+  onChange,
+  children,
+  ...props
+}) => {
   if (children) {
     logDepecratedCheckbox(
       '<Checkbox> used with children is deprecated, please use <Checkbox label={something} /> instead of <Checkbox>something</Checkbox>'
@@ -69,6 +76,7 @@ const Checkbox = ({ className, label, onChange, children, ...props }) => {
           className
         )}
         label={label || children}
+        labelPlacement={labelPlacement}
         control={<DefaultCheckbox {...props} label={label} />}
         onChange={onChange}
       />
@@ -93,7 +101,8 @@ Checkbox.propTypes = {
   mixed: PropTypes.bool,
   disableEffect: PropTypes.bool,
   size: PropTypes.oneOf(['small', 'medium']),
-  label: PropTypes.string
+  labelPlacement: PropTypes.oneOf(['top', 'end', 'bottom', 'start']),
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 }
 
 Checkbox.defaultProps = {
@@ -103,6 +112,7 @@ Checkbox.defaultProps = {
   mixed: false,
   disableEffect: false,
   size: 'medium',
+  labelPlacement: 'end',
   label: ''
 }
 

package/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -898,9 +898,10 @@ export const makeLightNormalOverrides = theme => ({
   },
   MuiSwitch: {
     root: {
-      width: 50,
+      width: 56,
       height: 40,
-      padding: '6px 1px'
+      padding: '6px 1px',
+      justifyContent: 'center'
     },
     checked: {
       '& + $track$track': {
@@ -910,6 +911,7 @@ export const makeLightNormalOverrides = theme => ({
     switchBase: {
       padding: 5,
       top: 5,
+      left: 5,
       color: theme.palette.text.icon,
       '& .cozySwitchThumb': {
         display: 'flex',

package/react/Radios/Readme.md

@@ -5,79 +5,80 @@ import Radio from 'cozy-ui/transpiled/react/Radios'
 import RadioGroup from 'cozy-ui/transpiled/react/RadioGroup'
 import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel'
 import Variants from 'cozy-ui/docs/components/Variants'
-const Box = ({ children }) => {
-  return <div style={{ height: '3rem', width: '3rem', border: '2px dashed #CCC', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-    { children }
-  </div>
-}
 
 initialState = { radioValue: 'item1' }
 
-const initialVariants = [
-  { checked: false, disabled: false, secondary: false }
-]
+const initialVariantsForScreenshots = [{ checked: false, disabled: false, secondary: false }]
+const initialVariants = [{ before: false }]
 
 const handleChange = event => {
   setState({ radioValue: event.target.value  })
 }
 
-const bboxStyle = { border: '1px solid red' }
-
 ;
 
 <>
-  <RadioGroup
-    aria-label="radio"
-    name="radioName"
-    value={state.radioValue.toString()}
-    onChange={handleChange}
-  >
-    <FormControlLabel
-      value="item1"
-      label="This is a radio button"
-      control={
-        <Radio />
-      }
-    />
-    <FormControlLabel
-      value="item2"
-      label="This is an intent radio button"
-      control={
-        <Radio color="secondary" />
-      }
-    />
-    <FormControlLabel
-      value="item3"
-      label="This is a disabled radio button"
-      control={
-        <Radio disabled />
-      }
-    />
-    <FormControlLabel
-      value="item4"
-      label="This is a checked disabled radio button"
-      control={
-        <Radio checked disabled />
-      }
-    />
-    <FormControlLabel
-      value="item5"
-      label="This is a edge start radio button"
-      control={
-        <Radio edge="start" />
-      }
-    />
-    <FormControlLabel
-      value="item6"
-      label="This is a edge end radio button"
-      control={
-        <Radio edge="end" />
-      }
-    />
-  </RadioGroup>
-
+  <Variants initialVariants={initialVariants} screenshotAllVariants>
+    {variant => (
+      <RadioGroup
+        aria-label="radio"
+        name="radioName"
+        value={state.radioValue.toString()}
+        onChange={handleChange}
+      >
+        <FormControlLabel
+          value="item1"
+          label="This is a radio button"
+          labelPlacement={variant.before ? "start" : "end"}
+          control={
+            <Radio />
+          }
+        />
+        <FormControlLabel
+          value="item2"
+          label="This is an intent radio button"
+          labelPlacement={variant.before ? "start" : "end"}
+          control={
+            <Radio color="secondary" />
+          }
+        />
+        <FormControlLabel
+          value="item3"
+          label="This is a disabled radio button"
+          labelPlacement={variant.before ? "start" : "end"}
+          control={
+            <Radio disabled />
+          }
+        />
+        <FormControlLabel
+          value="item4"
+          label="This is a checked disabled radio button"
+          labelPlacement={variant.before ? "start" : "end"}
+          control={
+            <Radio checked disabled />
+          }
+        />
+        <FormControlLabel
+          value="item5"
+          label="This is a edge start radio button"
+          labelPlacement={variant.before ? "start" : "end"}
+          control={
+            <Radio edge="start" />
+          }
+        />
+        <FormControlLabel
+          value="item6"
+          label="This is a edge end radio button"
+          labelPlacement={variant.before ? "start" : "end"}
+          control={
+            <Radio edge="end" />
+          }
+        />
+      </RadioGroup>
+    )}
+  </Variants>
   {isTesting() && (
-    <Variants initialVariants={initialVariants} screenshotAllVariants>
+    <Variants initialVariants={initialVariantsForScreenshots} screenshotAllVariants>
       {variant => (
         <Radio
           color={variant.secondary ? 'secondary' : 'primary'}
@@ -99,22 +100,13 @@ import Radio from 'cozy-ui/transpiled/react/Radios'
 import RadioGroup from 'cozy-ui/transpiled/react/RadioGroup'
 import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel'
 import Variants from 'cozy-ui/docs/components/Variants'
+
 const Box = ({ children }) => {
   return <div style={{ height: '3rem', width: '3rem', border: '2px dashed #CCC', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
     { children }
   </div>
 }
 
-initialState = { radioValue: 'item1' }
-
-const initialVariants = [
-  { checked: false, disabled: false, secondary: false }
-]
-
-const handleChange = event => {
-  setState({ radioValue: event.target.value  })
-}
-
 const bboxStyle = { border: '1px solid red' }
 
 ;

package/react/Switch/Readme.md

@@ -6,14 +6,14 @@ import Switch from 'cozy-ui/transpiled/react/Switch'
 import Typography from "cozy-ui/transpiled/react/Typography"
 import Stack from "cozy-ui/transpiled/react/Stack"
 import Box from 'cozy-ui/transpiled/react/Box'
+import Divider from 'cozy-ui/transpiled/react/Divider'
 import CheckIcon from 'cozy-ui/transpiled/react/Icons/Check'
 import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel'
+import FormGroup from 'cozy-ui/transpiled/react/FormGroup'
+import Variants from 'cozy-ui/docs/components/Variants'
 
-initialState = {
-  switch0: true,
-  switch1: true,
-  switch2: false
-}
+initialState = { switch0: true, switch1: true, switch2: false }
+const initialVariants = [{ before: false }]
 
 const StateSwitch = ({ id, color }) => {
   const [checked, setChecked] = useState(initialState[`switch${id}`])
@@ -28,47 +28,94 @@ const StateSwitch = ({ id, color }) => {
 
 ;
 
-<Stack spacing='xs'>
-  {['primary', 'secondary', 'default'].map((color, i) => {
-    return (
-      <Box display='flex' alignItems='center' key={i}>
-        <Typography variant='body1' display="inline">{ color }</Typography>
-        <StateSwitch id={i} color={color} />
-      </Box>
-    )
-  })}
-  <FormControlLabel control={<Switch color="primary" />} label="With label" />
-  <FormControlLabel control={<Switch color="primary" checked />} label="With label" />
-  <br />
-  <FormControlLabel control={<Switch color="primary" disabled />} label="Primary, disabled with label" />
-  <FormControlLabel control={<Switch color="primary" checked disabled />} label="Primary, checked - disabled with label" />
-  <br />
-  <FormControlLabel
-    label="Primary, disabled with label"
-    control={
-      <Switch
-        color="primary"
-        icon={CheckIcon}
-        disabled
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <Stack spacing='xs'>
+      {['primary', 'secondary', 'default'].map((color, i) => {
+        return (
+          <Box display='flex' alignItems='center' key={i}>
+            <Typography display="inline">{`${color}:`}</Typography>
+            <StateSwitch id={i} color={color} />
+          </Box>
+        )
+      })}
+      <Divider className="u-mv-1" />
+      <Typography variant="h4">With labels</Typography>
+      <FormGroup row>
+        <FormControlLabel
+          control={<Switch color="primary" />}
+          label="With label"
+          labelPlacement={variant.before ? "start" : "end"}
+        />
+        <FormControlLabel
+          control={<Switch color="primary" checked />}
+          label="With label - checked"
+          labelPlacement={variant.before ? "start" : "end"}
+        />
+      </FormGroup>
+      <Typography className="u-mv-1" variant="h5">With disable</Typography>
+      <FormGroup row>
+      <FormControlLabel
+        control={<Switch color="primary" disabled />}
+        label="Primary"
+        labelPlacement={variant.before ? "start" : "end"}
       />
-    }
-  />
-  <FormControlLabel
-    label="Primary, checked - disabled with label"
-    control={
-      <Switch
-        color="primary"
-        icon={CheckIcon}
-        checked
-        disabled
+      <FormControlLabel
+        control={<Switch color="primary" checked disabled />}
+        label="Primary - checked"
+        labelPlacement={variant.before ? "start" : "end"}
       />
-    }
-  />
-  <br />
-  <FormControlLabel control={<Switch color="secondary" disabled />} label="Secondary, checked with label" />
-  <FormControlLabel control={<Switch color="secondary" checked disabled />} label="Secondary, checked - disabled with label" />
-  <br />
-  <FormControlLabel control={<Switch disabled />} label="Default, checked with label" />
-  <FormControlLabel control={<Switch checked disabled />} label="Default, checked - disabled with label" />
-</Stack>
+      </FormGroup>
+      <FormGroup row>
+        <FormControlLabel
+          label="Primary"
+          labelPlacement={variant.before ? "start" : "end"}
+          control={
+            <Switch
+              color="primary"
+              icon={CheckIcon}
+              disabled
+            />
+          }
+        />
+        <FormControlLabel
+          label="Primary - checked"
+          labelPlacement={variant.before ? "start" : "end"}
+          control={
+            <Switch
+              color="primary"
+              icon={CheckIcon}
+              checked
+              disabled
+            />
+          }
+        />
+      </FormGroup>
+      <FormGroup row>
+        <FormControlLabel
+          control={<Switch color="secondary" disabled />}
+          label="Secondary"
+          labelPlacement={variant.before ? "start" : "end"}
+        />
+        <FormControlLabel
+          control={<Switch color="secondary" checked disabled />}
+          label="Secondary - checked"
+          labelPlacement={variant.before ? "start" : "end"}
+        />
+      </FormGroup>
+      <FormGroup row>
+        <FormControlLabel
+          control={<Switch disabled />}
+          label="Default"
+          labelPlacement={variant.before ? "start" : "end"}
+        />
+        <FormControlLabel
+          control={<Switch checked disabled />}
+          label="Default - checked"
+          labelPlacement={variant.before ? "start" : "end"}
+        />
+      </FormGroup>
+    </Stack>
+  )}
+</Variants>
 ```

package/transpiled/react/Checkbox/index.d.ts

@@ -1,8 +1,9 @@
 export default Checkbox;
-declare function Checkbox({ className, label, onChange, children, ...props }: {
+declare function Checkbox({ className, label, labelPlacement, onChange, children, ...props }: {
     [x: string]: any;
     className: any;
     label: any;
+    labelPlacement: any;
     onChange: any;
     children: any;
 }): JSX.Element;
@@ -15,7 +16,8 @@ declare namespace Checkbox {
         const mixed: PropTypes.Requireable<boolean>;
         const disableEffect: PropTypes.Requireable<boolean>;
         const size: PropTypes.Requireable<string>;
-        const label: PropTypes.Requireable<string>;
+        const labelPlacement: PropTypes.Requireable<string>;
+        const label: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
     }
     namespace defaultProps {
         const className_1: string;
@@ -30,6 +32,8 @@ declare namespace Checkbox {
         export { disableEffect_1 as disableEffect };
         const size_1: string;
         export { size_1 as size };
+        const labelPlacement_1: string;
+        export { labelPlacement_1 as labelPlacement };
         const label_1: string;
         export { label_1 as label };
     }

package/transpiled/react/Checkbox/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "label", "error", "mixed", "disabled", "size", "disableEffect"],
-    _excluded2 = ["className", "label", "onChange", "children"];
+    _excluded2 = ["className", "label", "labelPlacement", "onChange", "children"];
 import MUICheckbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import cx from 'classnames';
@@ -53,6 +53,7 @@ var DefaultCheckbox = function DefaultCheckbox(_ref) {
 var Checkbox = function Checkbox(_ref2) {
   var className = _ref2.className,
       label = _ref2.label,
+      labelPlacement = _ref2.labelPlacement,
       onChange = _ref2.onChange,
       children = _ref2.children,
       props = _objectWithoutProperties(_ref2, _excluded2);
@@ -67,6 +68,7 @@ var Checkbox = function Checkbox(_ref2) {
         'FormControlLabel-error': props.error
       }, className),
       label: label || children,
+      labelPlacement: labelPlacement,
       control: /*#__PURE__*/React.createElement(DefaultCheckbox, _extends({}, props, {
         label: label
       })),
@@ -89,7 +91,8 @@ Checkbox.propTypes = {
   mixed: PropTypes.bool,
   disableEffect: PropTypes.bool,
   size: PropTypes.oneOf(['small', 'medium']),
-  label: PropTypes.string
+  labelPlacement: PropTypes.oneOf(['top', 'end', 'bottom', 'start']),
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 };
 Checkbox.defaultProps = {
   className: '',
@@ -98,6 +101,7 @@ Checkbox.defaultProps = {
   mixed: false,
   disableEffect: false,
   size: 'medium',
+  labelPlacement: 'end',
   label: ''
 };
 export default Checkbox;

package/transpiled/react/MuiCozyTheme/overrides/makeDarkInvertedOverrides.d.ts

@@ -922,6 +922,7 @@ export function makeDarkInvertedOverrides(theme: any): {
             width: number;
             height: number;
             padding: string;
+            justifyContent: string;
         };
         checked: {
             '& + $track$track': {
@@ -931,6 +932,7 @@ export function makeDarkInvertedOverrides(theme: any): {
         switchBase: {
             padding: number;
             top: number;
+            left: number;
             color: any;
             '& .cozySwitchThumb': {
                 display: string;

package/transpiled/react/MuiCozyTheme/overrides/makeDarkNormalOverrides.d.ts

@@ -922,6 +922,7 @@ export function makeDarkNormalOverrides(theme: any): {
             width: number;
             height: number;
             padding: string;
+            justifyContent: string;
         };
         checked: {
             '& + $track$track': {
@@ -931,6 +932,7 @@ export function makeDarkNormalOverrides(theme: any): {
         switchBase: {
             padding: number;
             top: number;
+            left: number;
             color: any;
             '& .cozySwitchThumb': {
                 display: string;

package/transpiled/react/MuiCozyTheme/overrides/makeLightInvertedOverrides.d.ts

@@ -922,6 +922,7 @@ export function makeLightInvertedOverrides(theme: any): {
             width: number;
             height: number;
             padding: string;
+            justifyContent: string;
         };
         checked: {
             '& + $track$track': {
@@ -931,6 +932,7 @@ export function makeLightInvertedOverrides(theme: any): {
         switchBase: {
             padding: number;
             top: number;
+            left: number;
             color: any;
             '& .cozySwitchThumb': {
                 display: string;

package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.d.ts

@@ -922,6 +922,7 @@ export function makeLightNormalOverrides(theme: any): {
             width: number;
             height: number;
             padding: string;
+            justifyContent: string;
         };
         checked: {
             '& + $track$track': {
@@ -931,6 +932,7 @@ export function makeLightNormalOverrides(theme: any): {
         switchBase: {
             padding: number;
             top: number;
+            left: number;
             color: any;
             '& .cozySwitchThumb': {
                 display: string;

package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -844,9 +844,10 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
     },
     MuiSwitch: {
       root: {
-        width: 50,
+        width: 56,
         height: 40,
-        padding: '6px 1px'
+        padding: '6px 1px',
+        justifyContent: 'center'
       },
       checked: {
         '& + $track$track': {
@@ -856,6 +857,7 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
       switchBase: {
         padding: 5,
         top: 5,
+        left: 5,
         color: theme.palette.text.icon,
         '& .cozySwitchThumb': {
           display: 'flex',