refactor(form-builder): move focus ring utils/hoc to components

packages/@sanity/form-builder/src/components/withFocusRing/index.ts

@@ -0,0 +1 @@
+export * from './withFocusRing'

packages/@sanity/form-builder/src/components/withFocusRing/withFocusRing.ts

@@ -0,0 +1,26 @@
+import styled, {css} from 'styled-components'
+import {rem, Theme} from '@sanity/ui'
+import {ComponentType} from 'react'
+import {focusRingBorderStyle, focusRingStyle} from './helpers'
+
+export function withFocusRing<Props>(component: ComponentType<Props>) {
+  return styled(component)(({theme}: {theme: Theme}) => {
+    const border = {width: 1, color: 'var(--card-border-color)'}
+
+    return css`
+      --card-focus-box-shadow: ${focusRingBorderStyle(border)};
+
+      border-radius: ${rem(theme.sanity.radius[1])};
+      outline: none;
+      box-shadow: var(--card-focus-box-shadow);
+
+      &:focus {
+        --card-focus-box-shadow: ${focusRingStyle({
+          base: theme.sanity.color.base,
+          border,
+          focusRing: theme.sanity.focusRing,
+        })};
+      }
+    `
+  })
+}

packages/@sanity/form-builder/src/inputs/files/ImageInput/ImageInput.tsx

@@ -48,7 +48,7 @@ import {
   UploaderResolver,
   UploadOptions,
 } from '../../../sanity/uploads/types'
-import ImageToolInput from '../ImageToolInput'
+import {ImageToolInput} from '../ImageToolInput'
 import PatchEvent, {set, setIfMissing, unset} from '../../../PatchEvent'
 import UploadPlaceholder from '../common/UploadPlaceholder'
 import WithMaterializedReference from '../../../utils/WithMaterializedReference'

packages/@sanity/form-builder/src/inputs/files/common/FileInputButton/FileInputButton.tsx

@@ -4,8 +4,7 @@ import React from 'react'
 import {useId} from '@reach/auto-id'
 import styled, {css} from 'styled-components'
 import {Button, Theme} from '@sanity/ui'
-
-import {focusRingBorderStyle, focusRingStyle} from '../focusringUtils'
+import {focusRingBorderStyle, focusRingStyle} from '../../../../components/withFocusRing/helpers'
 
 type Props = Omit<React.ComponentProps<typeof Button>, 'type' | 'value' | 'onSelect'> & {
   accept?: string

packages/@sanity/form-builder/src/inputs/files/common/styles.ts

@@ -1,31 +1,13 @@
 /* eslint-disable import/named */
 
-import styled, {css, DefaultTheme, StyledComponent} from 'styled-components'
-import {Card, rem, Theme} from '@sanity/ui'
+import styled, {DefaultTheme, StyledComponent} from 'styled-components'
+import {Card} from '@sanity/ui'
 import {fileTarget} from '../../common/fileTarget'
-import {focusRingBorderStyle, focusRingStyle} from './focusringUtils'
+import {withFocusRing} from '../../../components/withFocusRing'
 
 export type {FileInfo} from '../../common/fileTarget'
 
-export const FileTarget = styled(fileTarget(Card))(({theme}: {theme: Theme}) => {
-  const border = {width: 1, color: 'var(--card-border-color)'}
-
-  return css`
-    --card-focus-box-shadow: ${focusRingBorderStyle(border)};
-
-    border-radius: ${rem(theme.sanity.radius[1])};
-    outline: none;
-    box-shadow: var(--card-focus-box-shadow);
-
-    &:focus {
-      --card-focus-box-shadow: ${focusRingStyle({
-        base: theme.sanity.color.base,
-        border,
-        focusRing: theme.sanity.focusRing,
-      })};
-    }
-  `
-})
+export const FileTarget = withFocusRing(fileTarget(Card))
 
 export const Overlay: StyledComponent<'div', DefaultTheme> = styled.div`
   position: absolute;