diff --git a/src/PageHeader/PageHeader.test.tsx b/src/PageHeader/PageHeader.test.tsx
index 8f661e45234..4e0cf753526 100644
--- a/src/PageHeader/PageHeader.test.tsx
+++ b/src/PageHeader/PageHeader.test.tsx
@@ -44,7 +44,7 @@ describe('PageHeader', () => {
   })
   /** These 3 tests below are not following the user behavioural pattern testing paradigm.
    * They are testing the internal implementation of the component and checking if the component
-   * is rendering the correct styles.This approach was necessary due to the impracticality of CSS media quesry testing with Jest.
+   * is rendering the correct styles.This approach was necessary due to the impracticality of CSS media queries testing with Jest.
    */
   it('respects default visibility of ContextArea and renders CSS media styles correctly', () => {
     const expectedStyles = {
diff --git a/src/PageHeader/PageHeader.tsx b/src/PageHeader/PageHeader.tsx
index 39626dd48ad..ca7e9e8348c 100644
--- a/src/PageHeader/PageHeader.tsx
+++ b/src/PageHeader/PageHeader.tsx
@@ -6,7 +6,7 @@ import Heading from '../Heading'
 import {ArrowLeftIcon} from '@primer/octicons-react'
 import Link from '../Link'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
-import {CSSManagedResponsiveValue} from './manageResponsiveValueWithCSS'
+import {getBreakpointDeclarations} from '../utils/getBreakpointDeclarations'
 const REGION_ORDER = {
   ContextArea: 0,
   TitleArea: 1,
@@ -63,34 +63,13 @@ const ContextArea: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
   hidden = hiddenOnRegularAndWide,
   sx = {},
 }) => {
-  // const mediaQueryStyles = merge<BetterSystemStyleObject>(
-  //   CSSManagedResponsiveValue(hidden, 'display', value => {
-  //     return value ? 'none' : 'flex'
-  //   }),
-  //   CSSManagedResponsiveValue(
-  //     {
-  //       narrow: 'none',
-  //       regular: 'line',
-  //       wide: 'filled',
-  //     },
-  //     'backgroundColor',
-  //     (value): string => {
-  //       return {
-  //         none: 'pink',
-  //         line: 'salmon',
-  //         filled: 'blue',
-  //       }[value]
-  //     },
-  //   ),
-  // )
-
   const contentNavStyles = {
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
     gap: '0.5rem',
     order: REGION_ORDER.ContextArea,
-    ...CSSManagedResponsiveValue(hidden, 'display', value => {
+    ...getBreakpointDeclarations(hidden, 'display', value => {
       return value ? 'none' : 'flex'
     }),
   }
@@ -127,7 +106,7 @@ const ParentLink = React.forwardRef<HTMLAnchorElement, ParentLinkProps>(
               display: 'flex',
               alignItems: 'center',
               gap: '0.5rem',
-              ...CSSManagedResponsiveValue(hidden, 'display', value => {
+              ...getBreakpointDeclarations(hidden, 'display', value => {
                 return value ? 'none' : 'flex'
               }),
             },
@@ -157,7 +136,7 @@ const ContextBar: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
       sx={merge<BetterSystemStyleObject>(
         {
           display: 'flex',
-          ...CSSManagedResponsiveValue(hidden, 'display', value => {
+          ...getBreakpointDeclarations(hidden, 'display', value => {
             return value ? 'none' : 'flex'
           }),
         },
@@ -186,7 +165,7 @@ const ContextAreaActions: React.FC<React.PropsWithChildren<PageHeaderProps>> = (
           gap: '0.5rem',
           flexGrow: '1',
           justifyContent: 'right',
-          ...CSSManagedResponsiveValue(hidden, 'display', value => {
+          ...getBreakpointDeclarations(hidden, 'display', value => {
             return value ? 'none' : 'flex'
           }),
         },
@@ -232,7 +211,7 @@ const TitleArea: React.FC<React.PropsWithChildren<TitleAreaProps>> = ({
           {
             display: 'flex',
             gap: '0.5rem',
-            ...CSSManagedResponsiveValue(hidden, 'display', value => {
+            ...getBreakpointDeclarations(hidden, 'display', value => {
               return value ? 'none' : 'flex'
             }),
             flexDirection: 'row',
@@ -259,7 +238,7 @@ const LeadingAction: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
       sx={merge<BetterSystemStyleObject>(
         {
           display: 'flex',
-          ...CSSManagedResponsiveValue(hidden, 'display', value => {
+          ...getBreakpointDeclarations(hidden, 'display', value => {
             return value ? 'none' : 'flex'
           }),
           alignItems: 'center',
@@ -280,7 +259,7 @@ const LeadingVisual: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({chil
       sx={merge<BetterSystemStyleObject>(
         {
           display: 'flex',
-          ...CSSManagedResponsiveValue(hidden, 'display', value => {
+          ...getBreakpointDeclarations(hidden, 'display', value => {
             return value ? 'none' : 'flex'
           }),
           alignItems: 'center',
@@ -323,7 +302,7 @@ const Title: React.FC<React.PropsWithChildren<TitleProps>> = ({children, sx = {}
             subtitle: '400',
           }[titleVariant],
           display: 'flex',
-          ...CSSManagedResponsiveValue(hidden, 'display', value => {
+          ...getBreakpointDeclarations(hidden, 'display', value => {
             return value ? 'none' : 'flex'
           }),
         },
@@ -342,7 +321,7 @@ const TrailingVisual: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({chi
       sx={merge<BetterSystemStyleObject>(
         {
           display: 'flex',
-          ...CSSManagedResponsiveValue(hidden, 'display', value => {
+          ...getBreakpointDeclarations(hidden, 'display', value => {
             return value ? 'none' : 'flex'
           }),
           alignItems: 'center',
@@ -368,7 +347,7 @@ const TrailingAction: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({
       sx={merge<BetterSystemStyleObject>(
         {
           display: 'flex',
-          ...CSSManagedResponsiveValue(hidden, 'display', value => {
+          ...getBreakpointDeclarations(hidden, 'display', value => {
             return value ? 'none' : 'flex'
           }),
           alignItems: 'center',
@@ -389,7 +368,7 @@ const Actions: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({children,
       sx={merge<BetterSystemStyleObject>(
         {
           display: 'flex',
-          ...CSSManagedResponsiveValue(hidden, 'display', value => {
+          ...getBreakpointDeclarations(hidden, 'display', value => {
             return value ? 'none' : 'flex'
           }),
           flexDirection: 'row',
@@ -414,7 +393,7 @@ const Description: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({childr
       sx={merge<BetterSystemStyleObject>(
         {
           display: 'flex',
-          ...CSSManagedResponsiveValue(hidden, 'display', value => {
+          ...getBreakpointDeclarations(hidden, 'display', value => {
             return value ? 'none' : 'flex'
           }),
           flexDirection: 'row',
@@ -436,7 +415,7 @@ const Navigation: React.FC<React.PropsWithChildren<PageHeaderProps>> = ({childre
       sx={merge<BetterSystemStyleObject>(
         {
           display: 'flex',
-          ...CSSManagedResponsiveValue(hidden, 'display', value => {
+          ...getBreakpointDeclarations(hidden, 'display', value => {
             return value ? 'none' : 'block'
           }),
         },
diff --git a/src/PageHeader/manageResponsiveValueWithCSS.ts b/src/utils/getBreakpointDeclarations.ts
similarity index 76%
rename from src/PageHeader/manageResponsiveValueWithCSS.ts
rename to src/utils/getBreakpointDeclarations.ts
index ad339bd6cdc..4076ab638c5 100644
--- a/src/PageHeader/manageResponsiveValueWithCSS.ts
+++ b/src/utils/getBreakpointDeclarations.ts
@@ -22,11 +22,13 @@ function haveRegularAndWideSameValue(responsiveValue: ResponsiveValue<boolean |
  * @param cssProperty - The CSS property whoes value needs to be rendered responsively
  * @param mapFn - A function that maps the given value to a CSS value
  *
- * If the value is responsive, it will only return the given viewports' breakpoints as CSS rules with the given CSS property and their mapped value.
- * For viewports that are not specified, we need to provide a fallback CSS declaration in the component's sx prop along with the styles that will return from this function.
- 
+ * If the value is responsive, it will only return the given viewports' breakpoints as CSS rules 
+ * with the given CSS property and their mapped value. For viewports that are not specified, 
+ * we need to provide a fallback CSS declaration in the component's sx prop along with the styles
+ * that will return from this function.
+ * 
  * @example
- * CSSManagedResponsiveValue({narrow: true, regular: true, wide: false}, 'display', value => {
+ * getBreakpointDeclarations({narrow: true, regular: true, wide: false}, 'display', value => {
       return value ? 'none' : 'flex'
     })
  * @returns
@@ -43,7 +45,7 @@ function haveRegularAndWideSameValue(responsiveValue: ResponsiveValue<boolean |
  * }
  * 
  * * @example
- * CSSManagedResponsiveValue({regular: 'border.default', wide: 'canvas.inset'}, 'backgroundColor', (value): string => {
+ * getBreakpointDeclarations({regular: 'border.default', wide: 'canvas.inset'}, 'backgroundColor', (value): string => {
     return value
   })
  * @returns
@@ -57,7 +59,7 @@ function haveRegularAndWideSameValue(responsiveValue: ResponsiveValue<boolean |
  * }
  * 
  * * @example
-* CSSManagedResponsiveValue({narrow: 'filled', regular: 'line'}, 'height', (value): string => {
+* getBreakpointDeclarations({narrow: 'filled', regular: 'line'}, 'height', (value): string => {
     return {
       filled: 8,
       line: 1,
@@ -72,8 +74,33 @@ function haveRegularAndWideSameValue(responsiveValue: ResponsiveValue<boolean |
  *     "height": 1
  *   },
  * }
+ * 
+ * If multiple CSS properties need to be rendered responsively in the same CSS rule, this function 
+ * can be called multiple times but make sure to deep merge the CSS declaration objects returned from this function. 
+ * 
+ * * @example
+ * const mediaQueryStyles = merge<BetterSystemStyleObject>(
+    getBreakpointDeclarations(hidden, 'display', value => {
+      return value ? 'none' : 'flex'
+    }),
+    getBreakpointDeclarations(
+      {
+        narrow: 'none',
+        regular: 'line',
+        wide: 'filled',
+      },
+      'backgroundColor',
+      (value): string => {
+        return {
+          none: 'pink',
+          line: 'salmon',
+          filled: 'blue',
+        }[value]
+      },
+    ),
+  )
  */
-export function CSSManagedResponsiveValue<TInput, TOutput>(
+export function getBreakpointDeclarations<TInput, TOutput>(
   value: TInput | ResponsiveValue<TInput>,
   cssProperty: keyof CSSProperties,
   mapFn: (value: TInput) => TOutput,