chore(BranchName): Remove the CSS modules feature flag from the BranchName component (#5875)

Author: jonrohan

.changeset/fancy-webs-hear.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Remove the CSS modules feature flag from the BranchName component

packages/react/src/BranchName/BranchName.tsx

@@ -1,58 +1,26 @@
 import React, {type ForwardedRef} from 'react'
 import {clsx} from 'clsx'
-import styled from 'styled-components'
-import {get} from '../constants'
 import type {SxProp} from '../sx'
-import sx from '../sx'
-import {useFeatureFlag} from '../FeatureFlags'
-import Box from '../Box'
 import classes from './BranchName.module.css'
-
-const StyledBranchName = styled.a<SxProp>`
-  display: inline-block;
-  padding: 2px 6px;
-  font-size: var(--text-body-size-small, ${get('fontSizes.0')});
-  font-family: var(--fontStack-monospace, ${get('fonts.mono')});
-  color: var(--fgColor-link, ${get('colors.accent.fg')});
-  background-color: var(--bgColor-accent-muted, ${get('colors.accent.subtle')});
-  border-radius: var(--borderRadius-medium, ${get('radii.2')});
-  text-decoration: none;
-  &:is(:not(a)) {
-    color: var(--fgColor-muted);
-  }
-  ${sx};
-`
+import {toggleSxComponent} from '../internal/utils/toggleSxComponent'
 
 type BranchNameProps<As extends React.ElementType> = {
   as?: As
 } & DistributiveOmit<React.ComponentPropsWithRef<React.ElementType extends As ? 'a' : As>, 'as'> &
+  Omit<SxProp, 'sx'> &
   SxProp
 
+const BaseComponent = toggleSxComponent('div') as React.ComponentType<
+  React.PropsWithChildren<BranchNameProps<React.ElementType> & React.RefAttributes<HTMLElement>>
+>
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function BranchName<As extends React.ElementType>(props: BranchNameProps<As>, ref: ForwardedRef<any>) {
-  const {as: BaseComponent = 'a', className, children, sx, ...rest} = props
-  const enabled = useFeatureFlag('primer_react_css_modules_ga')
-
-  if (enabled) {
-    if (sx) {
-      return (
-        <Box {...rest} ref={ref} as={BaseComponent} className={clsx(className, classes.BranchName)} sx={sx}>
-          {children}
-        </Box>
-      )
-    }
-
-    return (
-      <BaseComponent {...rest} ref={ref} className={clsx(className, classes.BranchName)}>
-        {children}
-      </BaseComponent>
-    )
-  }
-
+  const {as: Component = 'a', className, children, ...rest} = props
   return (
-    <StyledBranchName {...rest} as={BaseComponent} ref={ref} className={className} sx={sx}>
+    <BaseComponent as={Component} {...rest} ref={ref} className={clsx(className, classes.BranchName)}>
       {children}
-    </StyledBranchName>
+    </BaseComponent>
   )
 }