From cb7f5344ffa78cfcd7807fe1c42836f91571e30d Mon Sep 17 00:00:00 2001
From: Andrej Acevski <andrejacevski@pantone.com>
Date: Sat, 23 Mar 2024 22:32:37 +0100
Subject: [PATCH] Adding CSS extraction for FormGroup

---
 .../mui-material/src/FormGroup/FormGroup.js   | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/mui-material/src/FormGroup/FormGroup.js b/packages/mui-material/src/FormGroup/FormGroup.js
index 7a908ea680476c..0912b1aabd7b08 100644
--- a/packages/mui-material/src/FormGroup/FormGroup.js
+++ b/packages/mui-material/src/FormGroup/FormGroup.js
@@ -3,12 +3,13 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getFormGroupUtilityClass } from './formGroupClasses';
 import useFormControl from '../FormControl/useFormControl';
 import formControlState from '../FormControl/formControlState';
 
+const useThemeProps = createUseThemeProps('MuiFormGroup');
+
 const useUtilityClasses = (ownerState) => {
   const { classes, row, error } = ownerState;
 
@@ -27,14 +28,19 @@ const FormGroupRoot = styled('div', {
 
     return [styles.root, ownerState.row && styles.row];
   },
-})(({ ownerState }) => ({
+})({
   display: 'flex',
   flexDirection: 'column',
   flexWrap: 'wrap',
-  ...(ownerState.row && {
-    flexDirection: 'row',
-  }),
-}));
+  variants: [
+    {
+      props: { row: true },
+      style: {
+        flexDirection: 'row',
+      },
+    },
+  ],
+});
 
 /**
  * `FormGroup` wraps controls such as `Checkbox` and `Switch`.