fix(Text): extract textProps to separate file

src/card.tsx

@@ -3,7 +3,8 @@ import * as React from 'react';
 import Tag from './tag';
 import Stack from './stack';
 import Box from './box';
-import {Text2, Text, Text6, Text3, textProps} from './text';
+import {Text2, Text, Text6, Text3} from './text';
+import * as textProps from './text-props';
 import {Boxed, InternalBoxed} from './boxed';
 import ButtonGroup from './button-group';
 import Image from './image';

src/community/advanced-data-card.tsx

@@ -7,7 +7,8 @@ import Stack from '../stack';
 import * as styles from './advanced-data-card.css';
 import * as mediaStyles from '../image.css';
 import Divider from '../divider';
-import {Text2, Text, textProps} from '../text';
+import {Text2, Text} from '../text';
+import * as textProps from '../text-props';
 import {vars} from '../skins/skin-contract.css';
 import Box from '../box';
 import Touchable from '../touchable';

src/empty-state-card.tsx

@@ -4,7 +4,8 @@ import Box from './box';
 import {Boxed} from './boxed';
 import {useTheme} from './hooks';
 import Stack from './stack';
-import {Text2, Text, textProps} from './text';
+import {Text2, Text} from './text';
+import * as textProps from './text-props';
 import ButtonGroup from './button-group';
 import * as styles from './empty-state-card.css';
 import {vars} from './skins/skin-contract.css';

src/highlighted-card.tsx

@@ -3,7 +3,8 @@ import * as React from 'react';
 import {useIsInverseOrMediaVariant} from './theme-variant-context';
 import Stack from './stack';
 import {BaseTouchable} from './touchable';
-import {Text, Text2, textProps} from './text';
+import {Text, Text2} from './text';
+import * as textProps from './text-props';
 import {Boxed} from './boxed';
 import MaybeDismissable, {useIsDismissable} from './maybe-dismissable';
 import * as styles from './highlighted-card.css';

src/table.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import {getPrefixedDataAttributes} from './utils/dom';
 import * as styles from './table.css';
 import {vars} from './skins/skin-contract.css';
-import Text, {Text1, Text2, textProps} from './text';
+import Text, {Text1, Text2} from './text';
+import * as textProps from './text-props';
 import {InternalBoxed} from './boxed';
 import classNames from 'classnames';
 import Box from './box';

src/text-props.tsx

@@ -0,0 +1,72 @@
+// text props defined in a separate file to avoid exporting them from a client component.
+// If exported from a client component like "text.tsx" and in a RSC, the RSC will be forced to be rendered as a client component.
+
+export const text1 = {
+    mobileSize: 12,
+    mobileLineHeight: '16px',
+    desktopSize: 14,
+    desktopLineHeight: '20px',
+};
+
+export const text2 = {
+    mobileSize: 14,
+    mobileLineHeight: '20px',
+    desktopSize: 16,
+    desktopLineHeight: '24px',
+};
+
+export const text3 = {
+    mobileSize: 16,
+    mobileLineHeight: '24px',
+    desktopSize: 18,
+    desktopLineHeight: '24px',
+};
+
+export const text4 = {
+    mobileSize: 18,
+    mobileLineHeight: '24px',
+    desktopSize: 20,
+    desktopLineHeight: '28px',
+};
+
+export const text5 = {
+    mobileSize: 20,
+    mobileLineHeight: '24px',
+    desktopSize: 28,
+    desktopLineHeight: '32px',
+};
+
+export const text6 = {
+    mobileSize: 24,
+    mobileLineHeight: '32px',
+    desktopSize: 32,
+    desktopLineHeight: '40px',
+};
+
+export const text7 = {
+    mobileSize: 28,
+    mobileLineHeight: '32px',
+    desktopSize: 40,
+    desktopLineHeight: '48px',
+};
+
+export const text8 = {
+    mobileSize: 32,
+    mobileLineHeight: '40px',
+    desktopSize: 48,
+    desktopLineHeight: '56px',
+};
+
+export const text9 = {
+    mobileSize: 40,
+    mobileLineHeight: '48px',
+    desktopSize: 56,
+    desktopLineHeight: '64px',
+};
+
+export const text10 = {
+    mobileSize: 48,
+    mobileLineHeight: '56px',
+    desktopSize: 64,
+    desktopLineHeight: '72px',
+};

src/text.tsx

@@ -9,6 +9,7 @@ import {vars} from './skins/skin-contract.css';
 import * as styles from './text.css';
 import {VIVO_NEW_SKIN} from './skins/constants';
 import ScreenReaderOnly from './screen-reader-only';
+import * as textProps from './text-props';
 
 import type {ExclusifyUnion} from './utils/utility-types';
 import type {FontWeight} from './skins/types';
@@ -283,69 +284,6 @@ const getTextSizes = ({
     }
 };
 
-export const textProps = {
-    text1: {
-        mobileSize: 12,
-        mobileLineHeight: '16px',
-        desktopSize: 14,
-        desktopLineHeight: '20px',
-    },
-    text2: {
-        mobileSize: 14,
-        mobileLineHeight: '20px',
-        desktopSize: 16,
-        desktopLineHeight: '24px',
-    },
-    text3: {
-        mobileSize: 16,
-        mobileLineHeight: '24px',
-        desktopSize: 18,
-        desktopLineHeight: '24px',
-    },
-    text4: {
-        mobileSize: 18,
-        mobileLineHeight: '24px',
-        desktopSize: 20,
-        desktopLineHeight: '28px',
-    },
-    text5: {
-        mobileSize: 20,
-        mobileLineHeight: '24px',
-        desktopSize: 28,
-        desktopLineHeight: '32px',
-    },
-    text6: {
-        mobileSize: 24,
-        mobileLineHeight: '32px',
-        desktopSize: 32,
-        desktopLineHeight: '40px',
-    },
-    text7: {
-        mobileSize: 28,
-        mobileLineHeight: '32px',
-        desktopSize: 40,
-        desktopLineHeight: '48px',
-    },
-    text8: {
-        mobileSize: 32,
-        mobileLineHeight: '40px',
-        desktopSize: 48,
-        desktopLineHeight: '56px',
-    },
-    text9: {
-        mobileSize: 40,
-        mobileLineHeight: '48px',
-        desktopSize: 56,
-        desktopLineHeight: '64px',
-    },
-    text10: {
-        mobileSize: 48,
-        mobileLineHeight: '56px',
-        desktopSize: 64,
-        desktopLineHeight: '72px',
-    },
-};
-
 export const Text10 = ({dataAttributes, forceMobileSizes, ...props}: TextPresetProps): JSX.Element => {
     const {textPresets} = useTheme();
     return (

src/title.tsx

@@ -1,6 +1,7 @@
 'use client';
 import * as React from 'react';
-import Text, {Text1, Text2, Text6, textProps} from './text';
+import Text, {Text1, Text2, Text6} from './text';
+import * as textProps from './text-props';
 import Inline from './inline';
 import Box from './box';
 import {vars} from './skins/skin-contract.css';