Revert "refactor(FormControl): update existing code for sub-components to prep for migration (#5342)"

This reverts commit 39df71e.

Author: francinelucca

.changeset/soft-bananas-behave.md

@@ -93,6 +93,5 @@
       "webpack": false,
       "running": false
     }
-  ],
-  "packageManager": "[email protected]+sha512.c89530d37c4baa38afd43e76a077a84b9aa63840b986426584fd5c5a54ab0a0b21bb1595c851042b733784b0b43706d36a494b4d8ae1a086a762cb8d3f95942a"
+  ]
 }

package-lock.json

@@ -14,9 +14,9 @@ import {get} from '../constants'
 import {useSlots} from '../hooks/useSlots'
 import type {SxProp} from '../sx'
 import {useId} from '../hooks/useId'
-import {FormControlCaption} from './FormControlCaption'
-import FormControlLabel from './FormControlLabel'
-import FormControlLeadingVisual from './FormControlLeadingVisual'
+import FormControlCaption from './_FormControlCaption'
+import FormControlLabel from './_FormControlLabel'
+import FormControlLeadingVisual from './_FormControlLeadingVisual'
 import FormControlValidation from './_FormControlValidation'
 import {FormControlContextProvider} from './_FormControlContext'
 import {warning} from '../utils/warning'

package.json

@@ -0,0 +1,15 @@
+import React from 'react'
+import InputCaption from '../internal/components/InputCaption'
+import type {SxProp} from '../sx'
+import {useFormControlContext} from './_FormControlContext'
+
+const FormControlCaption: React.FC<React.PropsWithChildren<{id?: string} & SxProp>> = ({children, sx, id}) => {
+  const {captionId, disabled} = useFormControlContext()
+  return (
+    <InputCaption id={id || captionId || ''} disabled={disabled} sx={sx}>
+      {children}
+    </InputCaption>
+  )
+}
+
+export default FormControlCaption

packages/react/src/FormControl/FormControl.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
+import InputLabel from '../internal/components/InputLabel'
 import type {SxProp} from '../sx'
 import {useFormControlContext} from './_FormControlContext'
-import {InputLabel} from '../internal/components/InputLabel'
 
 export type Props = {
   /**
@@ -49,7 +49,6 @@ const FormControlLabel: React.FC<
           sx,
           ...props,
         }
-
   return <InputLabel {...labelProps}>{children}</InputLabel>
 }
 

packages/react/src/FormControl/FormControlCaption.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import Box from '../Box'
+import {get} from '../constants'
+import type {SxProp} from '../sx'
+import {useFormControlContext} from './_FormControlContext'
+
+const FormControlLeadingVisual: React.FC<React.PropsWithChildren<SxProp>> = ({children, sx}) => {
+  const {disabled, captionId} = useFormControlContext()
+  return (
+    <Box
+      color={disabled ? 'fg.muted' : 'fg.default'}
+      sx={{
+        '> *': {
+          minWidth: captionId ? get('fontSizes.4') : get('fontSizes.2'),
+          minHeight: captionId ? get('fontSizes.4') : get('fontSizes.2'),
+          fill: 'currentColor',
+        },
+        ...sx,
+      }}
+      ml={2}
+    >
+      {children}
+    </Box>
+  )
+}
+
+export default FormControlLeadingVisual

packages/react/src/FormControl/FormControlLeadingVisual.tsx

@@ -20,7 +20,7 @@ import {useSlots} from '../../hooks/useSlots'
 import {useProvidedRefOrCreate, useId, useAnchoredPosition} from '../../hooks'
 import type {OverlayProps} from '../../Overlay/Overlay'
 import {StyledOverlay, heightMap} from '../../Overlay/Overlay'
-import {InputLabel} from '../../internal/components/InputLabel'
+import InputLabel from '../../internal/components/InputLabel'
 import {invariant} from '../../utils/invariant'
 import {AriaStatus} from '../../live-region'
 import {useResponsiveValue} from '../../hooks/useResponsiveValue'