feat(clerk-js): Add a themable prop to the wrapper of header content

Author: octoper

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx

@@ -65,7 +65,15 @@ export const OrganizationMembers = withCardStateProvider(() => {
       >
         <Action.Root animate={false}>
           <Animated asChild>
-            <Header.Root sx={{ flexDirection: 'row', width: '100%', justifyContent: 'space-between' }}>
+            <Header.Root
+              contentSx={{
+                [mqu.md]: {
+                  flexDirection: 'row',
+                  width: '100%',
+                  justifyContent: 'space-between',
+                },
+              }}
+            >
               <Header.Title
                 localizationKey={localizationKeys('organizationProfile.start.headerTitle__members')}
                 textVariant='h2'

packages/clerk-js/src/ui/elements/Header.tsx

@@ -1,16 +1,17 @@
 import React from 'react';
 
 import { Col, descriptors, Heading, Text, useAppearance } from '../customizables';
-import type { PropsOfComponent } from '../styledSystem';
+import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
 import { ApplicationLogo } from './ApplicationLogo';
 
 export type HeaderProps = PropsOfComponent<typeof Col> & {
   showLogo?: boolean;
+  contentSx?: ThemableCssProp;
 };
 
 const Root = React.memo(
   React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
-    const { sx, children, gap = 6, showLogo = false, ...rest } = props;
+    const { sx, children, contentSx, gap = 6, showLogo = false, ...rest } = props;
     const appearance = useAppearance();
 
     const logoIsVisible = appearance.parsedLayout.logoPlacement === 'inside' && showLogo;
@@ -26,7 +27,7 @@ const Root = React.memo(
         {logoIsVisible && <ApplicationLogo />}
         <Col
           gap={1}
-          sx={sx}
+          sx={contentSx}
           {...rest}
         >
           {children}