Moving CSS component feature flag for multiple components from team…

… to `staff` (#5610)

* Moving multiple component CSS module flags from team to staff

* Adding changeset

.changeset/giant-rocks-carry-1.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving CSS component feature flag for Autocomplete from `team` to `staff`

.changeset/giant-rocks-carry-10.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving CSS component feature flag for Overlay from `team` to `staff`

.changeset/giant-rocks-carry-11.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving CSS component feature flag for PageHeader from `team` to `staff`

.changeset/giant-rocks-carry-12.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving CSS component feature flag for PageLayout from `team` to `staff`

.changeset/giant-rocks-carry-13.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving CSS component feature flag for Pagination from `team` to `staff`

.changeset/giant-rocks-carry-14.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving CSS component feature flag for SegmentedControl from `team` to `staff`

.changeset/giant-rocks-carry-15.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving CSS component feature flag for SelectPanel from `team` to `staff`

.changeset/giant-rocks-carry-16.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving CSS component feature flag for SideNav from `team` to `staff`

.changeset/giant-rocks-carry-17.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving CSS component feature flag for SubNav from `team` to `staff`

.changeset/giant-rocks-carry-18.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving CSS component feature flag for Token from `team` to `staff`

.changeset/giant-rocks-carry-19.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving CSS component feature flag for TooltipV2 from `team` to `staff`

.changeset/giant-rocks-carry-2.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving CSS component feature flag for AvatarStack from `team` to `staff`

.changeset/giant-rocks-carry-20.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving CSS component feature flag for UnderlinePanels from `team` to `staff`

.changeset/giant-rocks-carry-21.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving CSS component feature flag for UnderlineTabbedInterface from `team` to `staff`

.changeset/giant-rocks-carry-3.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving CSS component feature flag for BaseStyles from `team` to `staff`

.changeset/giant-rocks-carry-4.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving CSS component feature flag for ConfirmationDialog from `team` to `staff`

.changeset/giant-rocks-carry-5.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving CSS component feature flag for DataTable from `team` to `staff`

.changeset/giant-rocks-carry-6.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving CSS component feature flag for Hidden from `team` to `staff`

.changeset/giant-rocks-carry-7.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving CSS component feature flag for InlineMessage from `team` to `staff`

.changeset/giant-rocks-carry-8.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving CSS component feature flag for KeybindingHint from `team` to `staff`

.changeset/giant-rocks-carry-9.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Moving CSS component feature flag for NavList from `team` to `staff`

packages/react/src/Autocomplete/AutocompleteMenu.tsx

@@ -120,7 +120,7 @@ export type AutocompleteMenuInternalProps<T extends AutocompleteItemProps> = {
   ['aria-labelledby']: string
 }
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
 
 function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMenuInternalProps<T>) {
   const autocompleteContext = useContext(AutocompleteContext)

packages/react/src/Autocomplete/AutocompleteOverlay.tsx

@@ -50,7 +50,7 @@ function AutocompleteOverlay({
     setShowMenu(false)
   }, [setShowMenu])
 
-  const enabled = useFeatureFlag('primer_react_css_modules_team')
+  const enabled = useFeatureFlag('primer_react_css_modules_staff')
 
   if (typeof window === 'undefined') {
     return null

packages/react/src/AvatarStack/AvatarStack.tsx

@@ -22,7 +22,7 @@ type StyledAvatarStackWrapperProps = {
   count?: number
 } & SxProp
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
 
 const AvatarStackWrapper = toggleStyledComponent(
   CSS_MODULES_FEATURE_FLAG,

packages/react/src/BaseStyles.tsx

@@ -14,7 +14,7 @@ import classes from './BaseStyles.module.css'
 // load polyfill for :focus-visible
 import 'focus-visible'
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
 
 const GlobalStyle = createGlobalStyle<{colorScheme?: 'light' | 'dark'}>`
   * { box-sizing: border-box; }

packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx

@@ -46,7 +46,7 @@ export interface ConfirmationDialogProps {
   confirmButtonType?: 'normal' | 'primary' | 'danger'
 }
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
 
 const StyledConfirmationHeader = toggleStyledComponent(
   CSS_MODULES_FEATURE_FLAG,

packages/react/src/DataTable/Table.tsx

@@ -18,7 +18,7 @@ import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
 import {Button} from '../internal/components/ButtonReset'
 import classes from './Table.module.css'
 
-const cssModulesFlag = 'primer_react_css_modules_team'
+const cssModulesFlag = 'primer_react_css_modules_staff'
 
 // ----------------------------------------------------------------------------
 // Table

packages/react/src/Hidden/Hidden.tsx

@@ -6,7 +6,7 @@ import Box from '../Box'
 import {useFeatureFlag} from '../FeatureFlags'
 import classes from './Hidden.module.css'
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
 
 type Viewport = 'narrow' | 'regular' | 'wide'
 

packages/react/src/InlineMessage/InlineMessage.tsx

@@ -9,7 +9,7 @@ import classes from './InlineMessage.module.css'
 import type {SxProp} from '../sx'
 type MessageVariant = 'critical' | 'success' | 'unavailable' | 'warning'
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
 
 export type InlineMessageProps = React.ComponentPropsWithoutRef<'div'> &
   SxProp & {

packages/react/src/KeybindingHint/KeybindingHint.tsx

@@ -10,7 +10,7 @@ import {clsx} from 'clsx'
 
 /** `kbd` element with style resets. */
 const Kbd = ({children, className}: {children: ReactNode; className?: string}) => {
-  const enabled = useFeatureFlag('primer_react_css_modules_team')
+  const enabled = useFeatureFlag('primer_react_css_modules_staff')
 
   return (
     <Text

packages/react/src/NavList/NavList.tsx

@@ -39,7 +39,7 @@ export type NavListProps = {
 } & SxProp &
   React.ComponentProps<'nav'>
 
-const NavBox = toggleStyledComponent('primer_react_css_modules_team', 'nav', styled.nav<SxProp>(sx))
+const NavBox = toggleStyledComponent('primer_react_css_modules_staff', 'nav', styled.nav<SxProp>(sx))
 
 const Root = React.forwardRef<HTMLElement, NavListProps>(({children, ...props}, ref) => {
   return (
@@ -70,7 +70,7 @@ export type NavListItemProps = {
 
 const Item = React.forwardRef<HTMLAnchorElement, NavListItemProps>(
   ({'aria-current': ariaCurrent, children, defaultOpen, sx: sxProp = defaultSxProp, ...props}, ref) => {
-    const enabled = useFeatureFlag('primer_react_css_modules_team')
+    const enabled = useFeatureFlag('primer_react_css_modules_staff')
     const {depth} = React.useContext(SubNavContext)
 
     // Get SubNav from children
@@ -161,7 +161,7 @@ function ItemWithSubNav({
     }
   }, [subNav, buttonId])
 
-  const enabled = useFeatureFlag('primer_react_css_modules_team')
+  const enabled = useFeatureFlag('primer_react_css_modules_staff')
   if (enabled) {
     if (sxProp !== defaultSxProp) {
       return (
@@ -255,7 +255,7 @@ const SubNavContext = React.createContext<{depth: number}>({depth: 0})
 const SubNav = React.forwardRef(({children, sx: sxProp = defaultSxProp}: NavListSubNavProps, forwardedRef) => {
   const {buttonId, subNavId, isOpen} = React.useContext(ItemWithSubNavContext)
   const {depth} = React.useContext(SubNavContext)
-  const enabled = useFeatureFlag('primer_react_css_modules_team')
+  const enabled = useFeatureFlag('primer_react_css_modules_staff')
   if (!buttonId || !subNavId) {
     // eslint-disable-next-line no-console
     console.error('NavList.SubNav must be a child of a NavList.Item')
@@ -362,7 +362,7 @@ export type NavListGroupProps = {
 
 const defaultSx = {}
 const Group: React.FC<NavListGroupProps> = ({title, children, sx: sxProp = defaultSx, ...props}) => {
-  const enabled = useFeatureFlag('primer_react_css_modules_team')
+  const enabled = useFeatureFlag('primer_react_css_modules_staff')
 
   if (enabled) {
     if (sxProp !== defaultSx) {

packages/react/src/Overlay/Overlay.tsx

@@ -18,7 +18,7 @@ import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
 import classes from './Overlay.module.css'
 import {clsx} from 'clsx'
 
-const CSS_MODULES_FLAG = 'primer_react_css_modules_team'
+const CSS_MODULES_FLAG = 'primer_react_css_modules_staff'
 
 type StyledOverlayProps = {
   width?: keyof typeof widthMap

packages/react/src/PageHeader/PageHeader.tsx

@@ -66,7 +66,7 @@ const hiddenOnNarrow = {
   wide: false,
 }
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
 
 // Root
 // -----------------------------------------------------------------------------

packages/react/src/PageLayout/PageLayout.tsx

@@ -65,7 +65,7 @@ export type PageLayoutProps = {
   style?: React.CSSProperties
 } & SxProp
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
 
 const containerWidths = {
   full: '100%',

packages/react/src/Pagination/Pagination.tsx

@@ -12,7 +12,7 @@ import {useFeatureFlag} from '../FeatureFlags'
 import {clsx} from 'clsx'
 import classes from './Pagination.module.css'
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
 
 const getViewportRangesToHidePages = (showPages: PaginationProps['showPages']) => {
   if (showPages && typeof showPages !== 'boolean') {

packages/react/src/SegmentedControl/getSegmentedControlStyles.ts

@@ -1,7 +1,7 @@
 import {get} from '../constants'
 import type {SegmentedControlButtonProps} from './SegmentedControlButton'
 
-export const SEGMENTED_CONTROL_CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+export const SEGMENTED_CONTROL_CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
 
 export const directChildLayoutAdjustments = {
   ':first-child': {

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -116,7 +116,7 @@ export function SelectPanel({
     [externalOnFilterChange, setInternalFilterValue],
   )
 
-  const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+  const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
   const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
 
   const anchorRef = useProvidedRefOrCreate(externalAnchorRef)

packages/react/src/SideNav.tsx

@@ -12,7 +12,7 @@ import {toggleStyledComponent} from './internal/utils/toggleStyledComponent'
 import classes from './SideNav.module.css'
 import {useFeatureFlag} from './FeatureFlags'
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
 
 type SideNavBaseProps = {
   as?: React.ElementType

packages/react/src/SubNav/SubNav.tsx

@@ -11,7 +11,7 @@ import {useFeatureFlag} from '../FeatureFlags'
 
 import styles from './SubNav.module.css'
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
 
 type StyledSubNavProps = React.ComponentProps<'nav'> & {
   actions?: React.ReactNode

packages/react/src/Token/AvatarToken.tsx

@@ -16,7 +16,7 @@ export interface AvatarTokenProps extends TokenBaseProps {
   avatarSrc: string
 }
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
 
 const AvatarContainer = toggleStyledComponent(
   CSS_MODULES_FEATURE_FLAG,

packages/react/src/Token/IssueLabelToken.tsx

@@ -19,7 +19,7 @@ export interface IssueLabelTokenProps extends TokenBaseProps {
   fillColor?: string
 }
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
 const tokenBorderWidthPx = 1
 
 const lightModeStyles = {

packages/react/src/Token/Token.tsx

@@ -23,7 +23,7 @@ export interface TokenProps extends TokenBaseProps, SxProp {
   leadingVisual?: React.ElementType
 }
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
 
 const tokenBorderWidthPx = 1
 

packages/react/src/Token/TokenBase.tsx

@@ -116,7 +116,7 @@ const variants = variant<
   },
 })
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
 
 const StyledTokenBase = toggleStyledComponent(
   CSS_MODULES_FEATURE_FLAG,

packages/react/src/Token/_RemoveTokenButton.tsx

@@ -18,7 +18,7 @@ interface TokenButtonProps extends SxProp {
   isParentInteractive?: boolean
 }
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
 
 const variants = variant<{height: string; width: string}, TokenSizeKeys>({
   prop: 'size',

packages/react/src/Token/_TokenTextContainer.tsx

@@ -6,7 +6,7 @@ import classes from './_TokenTextContainer.module.css'
 import {useFeatureFlag} from '../FeatureFlags'
 import {clsx} from 'clsx'
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
 
 const StyledTokenTextContainer = toggleStyledComponent(
   CSS_MODULES_FEATURE_FLAG,

packages/react/src/TooltipV2/Tooltip.tsx

@@ -17,7 +17,7 @@ import {KeybindingHint, type KeybindingHintProps} from '../KeybindingHint'
 import VisuallyHidden from '../_VisuallyHidden'
 import useSafeTimeout from '../hooks/useSafeTimeout'
 
-const CSS_MODULE_FEATURE_FLAG = 'primer_react_css_modules_team'
+const CSS_MODULE_FEATURE_FLAG = 'primer_react_css_modules_staff'
 
 const animationStyles = `
   animation-name: tooltip-appear;

packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx

@@ -28,7 +28,7 @@ import {useFeatureFlag} from '../../FeatureFlags'
 import classes from './UnderlinePanels.module.css'
 import {toggleStyledComponent} from '../../internal/utils/toggleStyledComponent'
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
 
 export type UnderlinePanelsProps = {
   /**