Revert "refactor(FormControl): update existing code for sub-component…

…s to prep for migration (#5342)"

This reverts commit 39df71e.

package.json

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

packages/react/src/FormControl/FormControl.tsx

@@ -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'

packages/react/src/FormControl/_FormControlCaption.tsx

@@ -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/FormControlLabel.tsx → packages/react/src/FormControl/_FormControlLabel.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/_FormControlLeadingVisual.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/experimental/SelectPanel2/SelectPanel.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'

packages/react/src/internal/components/InputCaption.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import Text from '../../Text'
+import type {SxProp} from '../../sx'
+
+type Props = {
+  /**
+   * The unique identifier used to associate the caption with an input
+   */
+  id: string
+  /**
+   * Whether the input associated with this caption is disabled
+   */
+  disabled?: boolean
+} & SxProp
+
+const InputCaption: React.FC<React.PropsWithChildren<Props>> = ({children, disabled, id, sx}) => (
+  <Text
+    id={id}
+    sx={{
+      color: disabled ? 'var(--control-fgColor-disabled)' : 'var(--fgColor-muted)',
+      display: 'block',
+      fontSize: 0,
+      ...sx,
+    }}
+  >
+    {children}
+  </Text>
+)
+
+export default InputCaption

packages/react/src/internal/components/InputLabel.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import styled from 'styled-components'
-import {get} from '../../constants'
-import sx, {type SxProp} from '../../sx'
+import Box from '../../Box'
+import type {SxProp} from '../../sx'
+import VisuallyHidden from '../../_VisuallyHidden'
 
 type BaseProps = SxProp & {
   disabled?: boolean
@@ -23,9 +23,9 @@ export type LegendOrSpanProps = BaseProps & {
   htmlFor?: undefined
 }
 
-type Props = React.PropsWithChildren<LabelProps | LegendOrSpanProps>
+type Props = LabelProps | LegendOrSpanProps
 
-function InputLabel({
+const InputLabel: React.FC<React.PropsWithChildren<Props>> = ({
   children,
   disabled,
   htmlFor,
@@ -38,62 +38,37 @@ function InputLabel({
   as = 'label',
   className,
   ...props
-}: Props) {
+}) => {
   return (
-    <StyledLabel
-      as={as}
-      data-control-disabled={disabled ? '' : undefined}
-      data-visually-hidden={visuallyHidden ? '' : undefined}
+    <VisuallyHidden
+      isVisible={!visuallyHidden}
+      as={
+        as as 'label' /* This assertion is clearly wrong, but it's the only way TS will allow the htmlFor prop to be possibly defined */
+      }
       htmlFor={htmlFor}
       id={id}
       className={className}
-      sx={sx}
+      sx={{
+        fontWeight: 'bold',
+        fontSize: 1,
+        display: 'block',
+        color: disabled ? 'fg.muted' : 'fg.default',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        alignSelf: 'flex-start',
+        ...sx,
+      }}
       {...props}
     >
       {required || requiredText ? (
-        <StyledRequiredText>
-          <span>{children}</span>
+        <Box display="flex" as="span">
+          <Box mr={1}>{children}</Box>
           <span aria-hidden={requiredIndicator ? undefined : true}>{requiredText ?? '*'}</span>
-        </StyledRequiredText>
+        </Box>
       ) : (
         children
       )}
-    </StyledLabel>
+    </VisuallyHidden>
   )
 }
 
-const StyledRequiredText = styled.span`
-  display: flex;
-  column-gap: ${get('space.1')};
-`
-
-const StyledLabel = styled.label`
-  align-self: flex-start;
-  display: block;
-  color: var(--fgColor-default);
-  cursor: pointer;
-  font-weight: 600;
-  font-size: ${get('fontSizes.1')};
-
-  &:where([data-control-disabled]) {
-    color: var(--fgColor-muted);
-    cursor: not-allowed;
-  }
-
-  &:where([data-visually-hidden]) {
-    border: 0;
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
-  ${sx}
-`
-
-export {InputLabel}
+export default InputLabel