stream-chat-react-native-core 9.0.0-beta.2 → 9.0.0-beta.21

package/src/components/Poll/components/CreatePollHeader.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { Check, IconProps } from '../../../icons';
-import { Cross } from '../../../icons/Cross';
+import { Cross } from '../../../icons/xmark-1';
 import { primitives } from '../../../theme';
 import { Button } from '../../ui';
 import { useCanCreatePoll } from '../hooks/useCanCreatePoll';

package/src/components/Poll/components/CreatePollOptions.tsx

@@ -1,5 +1,13 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { LayoutChangeEvent, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import {
+  I18nManager,
+  LayoutChangeEvent,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   interpolate,
@@ -19,9 +27,9 @@ import { PollComposerOption, PollComposerState } from 'stream-chat';
 import { useCreatePollContentContext, useTheme, useTranslationContext } from '../../../contexts';
 import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useStateStore } from '../../../hooks/useStateStore';
-import { CircleMinus } from '../../../icons/CircleMinus';
-import { DotGrid } from '../../../icons/DotGrid';
-import { InfoTooltip } from '../../../icons/InfoTooltip';
+import { InfoTooltip } from '../../../icons/info';
+import { CircleMinus } from '../../../icons/minus-circle';
+import { DotGrid } from '../../../icons/reorder';
 import { primitives } from '../../../theme';
 
 export type CurrentOptionPositionsCache = {
@@ -746,6 +754,7 @@ const useStyles = () => {
         fontWeight: primitives.typographyFontWeightRegular,
         color: semantics.inputTextDefault,
         paddingVertical: 0, // android is adding extra padding so we remove it
+        textAlign: I18nManager.isRTL ? 'right' : 'left',
       },
       optionValidationErrorContainer: {
         flexDirection: 'row',
@@ -759,6 +768,7 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeSm,
         lineHeight: primitives.typographyLineHeightNormal,
         fontWeight: primitives.typographyFontWeightRegular,
+        textAlign: 'left',
       },
       optionWrapper: {
         width: '100%',
@@ -778,6 +788,7 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeMd,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
     });
   }, [semantics]);

package/src/components/Poll/components/MultipleAnswersField.tsx

@@ -74,15 +74,19 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeMd,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
       description: {
         color: semantics.textTertiary,
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
       optionCardContent: {
         gap: primitives.spacingXxs,
+        flex: 1,
+        alignItems: 'flex-start',
       },
       optionCard: {
         alignItems: 'center',

package/src/components/Poll/components/MultipleVotesSettings.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Platform, StyleSheet, Switch, Text, TextInput, View } from 'react-native';
+import { I18nManager, Platform, StyleSheet, Switch, Text, TextInput, View } from 'react-native';
 
 import Animated, { LinearTransition, StretchInY, StretchOutY } from 'react-native-reanimated';
 
@@ -200,15 +200,19 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeMd,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
       description: {
         color: semantics.textTertiary,
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightNormal,
+        textAlign: 'left',
       },
       optionCardContent: {
         gap: primitives.spacingXxs,
+        flex: 1,
+        alignItems: 'flex-start',
       },
       optionCard: {
         alignItems: 'center',
@@ -229,6 +233,7 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeMd,
         paddingHorizontal: primitives.spacingSm,
         paddingVertical: primitives.spacingMd,
+        textAlign: I18nManager.isRTL ? 'right' : 'left',
       },
     });
   }, [semantics]);

package/src/components/Poll/components/PollAnswersList.tsx

@@ -9,6 +9,7 @@ import { PollInputDialog } from './PollInputDialog';
 import {
   PollContextProvider,
   PollContextValue,
+  useChatContext,
   usePollContext,
   useTheme,
   useTranslationContext,
@@ -27,6 +28,8 @@ export const AnswerListAddCommentButton = (props: PollButtonProps) => {
   const [showAddCommentDialog, setShowAddCommentDialog] = useState(false);
   const { onPress } = props;
 
+  const styles = useStyles();
+
   const onPressHandler = useCallback(() => {
     if (onPress) {
       onPress({ message, poll });
@@ -37,10 +40,10 @@ export const AnswerListAddCommentButton = (props: PollButtonProps) => {
   }, [message, onPress, poll]);
 
   return (
-    <>
+    <View style={styles.inlineButton}>
       <Button
         variant={'secondary'}
-        type={'outline'}
+        type={'ghost'}
         size={'lg'}
         label={ownAnswer ? t('Update your comment') : t('Add a comment')}
         onPress={onPressHandler}
@@ -50,11 +53,12 @@ export const AnswerListAddCommentButton = (props: PollButtonProps) => {
           closeDialog={() => setShowAddCommentDialog(false)}
           initialValue={ownAnswer?.answer_text ?? ''}
           onSubmit={addComment}
+          placeholder={t('Your comment')}
           title={t('Add a comment')}
           visible={showAddCommentDialog}
         />
       ) : null}
-    </>
+    </View>
   );
 };
 
@@ -64,6 +68,7 @@ export type PollAnswersListProps = PollContextValue & {
 };
 
 export const PollAnswerListItem = ({ answer }: { answer: PollAnswer }) => {
+  const { client } = useChatContext();
   const { t, tDateTimeParser } = useTranslationContext();
   const { votingVisibility } = usePollState();
 
@@ -87,25 +92,32 @@ export const PollAnswerListItem = ({ answer }: { answer: PollAnswer }) => {
     [answer.updated_at, t, tDateTimeParser],
   );
 
+  const isMyAnswer = client.userID === answer.user?.id;
+
   const isAnonymous = useMemo(
-    () => votingVisibility === VotingVisibility.anonymous,
-    [votingVisibility],
+    () => votingVisibility === VotingVisibility.anonymous && !isMyAnswer,
+    [votingVisibility, isMyAnswer],
   );
 
+  const answerAuthorName = isMyAnswer ? t('You') : answer.user?.name;
+
   return (
-    <View style={[styles.listItemContainer, itemStyle.container]}>
-      <Text style={[styles.listItemAnswerText, itemStyle.answerText]}>{answer.answer_text}</Text>
-      <View style={[styles.listItemInfoContainer, itemStyle.infoContainer]}>
-        <View style={[styles.listItemUserInfoContainer, itemStyle.userInfoContainer]}>
-          {!isAnonymous && answer.user?.image ? (
-            <UserAvatar user={answer.user} size='md' showBorder />
-          ) : null}
-          <Text style={styles.listItemInfoUserName}>
-            {isAnonymous ? t('Anonymous') : answer.user?.name}
-          </Text>
+    <View style={[styles.listItemWrapper, itemStyle.wrapper]}>
+      <View style={[styles.listItemContainer, itemStyle.container]}>
+        <Text style={[styles.listItemAnswerText, itemStyle.answerText]}>{answer.answer_text}</Text>
+        <View style={[styles.listItemInfoContainer, itemStyle.infoContainer]}>
+          <View style={[styles.listItemUserInfoContainer, itemStyle.userInfoContainer]}>
+            {!isAnonymous && answer.user?.image ? (
+              <UserAvatar user={answer.user} size='sm' showBorder />
+            ) : null}
+            <Text style={styles.listItemInfoUserName}>
+              {isAnonymous ? t('Anonymous') : answerAuthorName}
+            </Text>
+            <Text style={styles.listItemInfoDate}>{dateString}</Text>
+          </View>
         </View>
-        <Text style={styles.listItemInfoDate}>{dateString}</Text>
       </View>
+      {isMyAnswer ? <AnswerListAddCommentButton /> : null}
     </View>
   );
 };
@@ -137,7 +149,6 @@ export const PollAnswersListContent = ({
         renderItem={renderPollAnswerListItem}
         {...additionalFlatListProps}
       />
-      <AnswerListAddCommentButton />
     </View>
   );
 };
@@ -164,46 +175,48 @@ const useStyles = () => {
   return useMemo(
     () =>
       StyleSheet.create({
-        addCommentButtonContainer: {
-          alignItems: 'center',
-          borderRadius: 12,
-          paddingHorizontal: 16,
-          paddingVertical: 18,
-        },
-        contentContainer: { gap: primitives.spacingMd },
-        addCommentButtonText: { fontSize: 16 },
+        contentContainer: { gap: primitives.spacingMd, padding: primitives.spacingMd },
         container: {
           flex: 1,
-          padding: primitives.spacingMd,
           backgroundColor: semantics.backgroundCoreElevation1,
         },
         listItemAnswerText: {
           fontSize: primitives.typographyFontSizeMd,
-          lineHeight: primitives.typographyLineHeightRelaxed,
-          fontWeight: primitives.typographyFontWeightSemiBold,
+          lineHeight: primitives.typographyLineHeightNormal,
           color: semantics.textPrimary,
         },
-        listItemContainer: {
+        listItemWrapper: {
           borderRadius: primitives.radiusLg,
-          padding: primitives.spacingMd,
           backgroundColor: semantics.backgroundCoreSurfaceCard,
         },
+        listItemContainer: {
+          padding: primitives.spacingMd,
+          gap: primitives.spacingXs,
+        },
         listItemInfoContainer: {
           flexDirection: 'row',
           justifyContent: 'space-between',
           alignItems: 'center',
-          marginTop: 24,
         },
         listItemInfoUserName: {
-          color: semantics.textPrimary,
+          color: semantics.chatTextUsername,
           fontSize: primitives.typographyFontSizeSm,
-          marginLeft: primitives.spacingXxs,
+          fontWeight: primitives.typographyFontWeightSemiBold,
+          lineHeight: primitives.typographyLineHeightNormal,
         },
         listItemInfoDate: {
           fontSize: primitives.typographyFontSizeSm,
           color: semantics.textTertiary,
         },
-        listItemUserInfoContainer: { alignItems: 'center', flexDirection: 'row' },
+        listItemUserInfoContainer: {
+          gap: primitives.spacingXs,
+          alignItems: 'center',
+          flexDirection: 'row',
+        },
+        inlineButton: {
+          borderColor: semantics.borderCoreDefault,
+          borderTopWidth: 1,
+        },
       }),
     [semantics],
   );

package/src/components/Poll/components/PollButtons.tsx

@@ -176,6 +176,7 @@ export const SuggestOptionButton = (props: PollButtonProps) => {
         <PollInputDialog
           closeDialog={onRequestClose}
           onSubmit={addOption}
+          placeholder={t('Enter a new option')}
           title={t('Suggest an option')}
           visible={showAddOptionDialog}
         />
@@ -214,6 +215,7 @@ export const AddCommentButton = (props: PollButtonProps) => {
           closeDialog={onRequestClose}
           initialValue={ownAnswer?.answer_text ?? ''}
           onSubmit={addComment}
+          placeholder={t('Your comment')}
           title={t('Add a comment')}
           visible={showAddCommentDialog}
         />

package/src/components/Poll/components/PollInputDialog.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import {
+  I18nManager,
   KeyboardAvoidingView,
   Modal,
   Platform,
@@ -19,6 +20,7 @@ import { Button } from '../../ui';
 export type PollInputDialogProps = {
   closeDialog: () => void;
   onSubmit: (text: string) => void;
+  placeholder: string;
   title: string;
   visible: boolean;
   initialValue?: string;
@@ -28,6 +30,7 @@ export const PollInputDialog = ({
   closeDialog,
   initialValue = '',
   onSubmit,
+  placeholder,
   title,
   visible,
 }: PollInputDialogProps) => {
@@ -62,7 +65,7 @@ export const PollInputDialog = ({
               <TextInput
                 autoFocus={true}
                 onChangeText={setDialogInput}
-                placeholder={t('Ask a question')}
+                placeholder={placeholder}
                 placeholderTextColor={semantics.inputTextPlaceholder}
                 style={[styles.input, input]}
                 value={dialogInput}
@@ -134,6 +137,7 @@ const useStyles = () => {
           fontSize: primitives.typographyFontSizeMd,
           padding: primitives.spacingSm,
           color: semantics.textPrimary,
+          textAlign: I18nManager.isRTL ? 'right' : 'left',
         },
         title: {
           color: semantics.textPrimary,

package/src/components/Poll/components/PollModalHeader.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../../contexts';
-import { Cross } from '../../../icons/Cross';
+import { Cross } from '../../../icons/xmark-1';
 import { primitives } from '../../../theme';
 import { Button } from '../../ui';
 

package/src/components/Poll/components/PollOption.tsx

@@ -14,6 +14,7 @@ import {
   useOwnCapabilitiesContext,
   usePollContext,
   useTheme,
+  useTranslationContext,
 } from '../../../contexts';
 
 import { Check } from '../../../icons';
@@ -26,6 +27,7 @@ import { usePollState } from '../hooks/usePollState';
 export type PollOptionProps = {
   option: PollOptionClass;
   showProgressBar?: boolean;
+  forceIncoming?: boolean;
 };
 
 export type PollAllOptionsContentProps = PollContextValue & {
@@ -36,6 +38,7 @@ export type PollAllOptionsContentProps = PollContextValue & {
 export const PollAllOptionsContent = ({
   additionalScrollViewProps,
 }: Pick<PollAllOptionsContentProps, 'additionalScrollViewProps'>) => {
+  const { t } = useTranslationContext();
   const { name, options } = usePollState();
 
   const {
@@ -48,14 +51,19 @@ export const PollAllOptionsContent = ({
   const styles = useAllOptionStyles();
 
   return (
-    <ScrollView style={[styles.allOptionsWrapper, wrapper]} {...additionalScrollViewProps}>
+    <ScrollView
+      contentContainerStyle={styles.allOptionsContentContainer}
+      style={[styles.allOptionsWrapper, wrapper]}
+      {...additionalScrollViewProps}
+    >
       <View style={[styles.allOptionsTitleContainer, titleContainer]}>
+        <Text style={styles.allOptionsTitleMeta}>{t('Question')}</Text>
         <Text style={[styles.allOptionsTitleText, titleText]}>{name}</Text>
       </View>
       <View style={[styles.allOptionsListContainer, listContainer]}>
         {options?.map((option: PollOptionClass) => (
           <View key={`full_poll_options_${option.id}`} style={styles.optionWrapper}>
-            <PollOption key={option.id} option={option} showProgressBar={false} />
+            <PollOption key={option.id} option={option} forceIncoming />
           </View>
         ))}
       </View>
@@ -78,19 +86,15 @@ export const PollAllOptions = ({
   </PollContextProvider>
 );
 
-export const PollOption = ({ option, showProgressBar = true }: PollOptionProps) => {
-  const { latestVotesByOption, maxVotedOptionIds, voteCountsByOption } = usePollState();
+export const PollOption = ({ option, showProgressBar = true, forceIncoming }: PollOptionProps) => {
+  const { latestVotesByOption, voteCountsByOption, voteCount } = usePollState();
   const styles = useStyles();
 
   const relevantVotes = useMemo(
     () => latestVotesByOption?.[option.id] || [],
     [latestVotesByOption, option.id],
   );
-  const maxVotes = useMemo(
-    () =>
-      maxVotedOptionIds?.[0] && voteCountsByOption ? voteCountsByOption[maxVotedOptionIds[0]] : 0,
-    [maxVotedOptionIds, voteCountsByOption],
-  );
+
   const votes = voteCountsByOption[option.id] || 0;
 
   const {
@@ -105,13 +109,15 @@ export const PollOption = ({ option, showProgressBar = true }: PollOptionProps)
   } = useTheme();
   const isPollCreatedByClient = useIsPollCreatedByCurrentUser();
 
-  const unFilledColor = isPollCreatedByClient
-    ? semantics.chatPollProgressTrackOutgoing
-    : semantics.chatPollProgressTrackIncoming;
+  const unFilledColor =
+    isPollCreatedByClient && !forceIncoming
+      ? semantics.chatPollProgressTrackOutgoing
+      : semantics.chatPollProgressTrackIncoming;
 
-  const filledColor = isPollCreatedByClient
-    ? semantics.chatPollProgressFillOutgoing
-    : semantics.chatPollProgressFillIncoming;
+  const filledColor =
+    isPollCreatedByClient && !forceIncoming
+      ? semantics.chatPollProgressFillOutgoing
+      : semantics.chatPollProgressFillIncoming;
 
   return (
     <View style={[styles.container, container]}>
@@ -133,7 +139,7 @@ export const PollOption = ({ option, showProgressBar = true }: PollOptionProps)
         {showProgressBar ? (
           <View style={styles.progressBarContainer}>
             <ProgressBar
-              progress={votes / maxVotes}
+              progress={votes / voteCount}
               filledColor={filledColor}
               emptyColor={unFilledColor}
             />
@@ -224,6 +230,7 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightTight,
+        textAlign: 'left',
       },
       info: {
         flexGrow: 1,
@@ -235,6 +242,7 @@ const useStyles = () => {
         fontSize: primitives.typographyFontSizeXs,
         fontWeight: primitives.typographyFontWeightRegular,
         lineHeight: primitives.typographyLineHeightTight,
+        textAlign: 'left',
       },
       progressBarContainer: {
         flex: 1,
@@ -254,35 +262,44 @@ const useAllOptionStyles = () => {
   const {
     theme: { semantics },
   } = useTheme();
-  return useMemo(
-    () =>
-      StyleSheet.create({
-        allOptionsListContainer: {
-          borderRadius: primitives.radiusLg,
-          padding: primitives.spacingMd,
-          backgroundColor: semantics.backgroundCoreSurfaceCard,
-          marginTop: primitives.spacing2xl,
-        },
-        allOptionsTitleContainer: {
-          borderRadius: primitives.radiusLg,
-          padding: primitives.spacingMd,
-          backgroundColor: semantics.backgroundCoreSurfaceCard,
-        },
-        allOptionsTitleText: {
-          fontSize: primitives.typographyFontSizeLg,
-          lineHeight: primitives.typographyLineHeightRelaxed,
-          fontWeight: primitives.typographyFontWeightSemiBold,
-          color: semantics.textPrimary,
-        },
-        allOptionsWrapper: {
-          flex: 1,
-          padding: primitives.spacingMd,
-          backgroundColor: semantics.backgroundCoreElevation1,
-        },
-        optionWrapper: {
-          paddingVertical: primitives.spacingMd,
-        },
-      }),
-    [semantics],
-  );
+  return useMemo(() => {
+    return StyleSheet.create({
+      allOptionsContentContainer: {
+        padding: primitives.spacingMd,
+      },
+      allOptionsListContainer: {
+        borderRadius: primitives.radiusLg,
+        padding: primitives.spacingMd,
+        backgroundColor: semantics.backgroundCoreSurfaceCard,
+        marginTop: primitives.spacing2xl,
+      },
+      allOptionsTitleContainer: {
+        borderRadius: primitives.radiusLg,
+        padding: primitives.spacingMd,
+        backgroundColor: semantics.backgroundCoreSurfaceCard,
+      },
+      allOptionsTitleText: {
+        fontSize: primitives.typographyFontSizeLg,
+        lineHeight: primitives.typographyLineHeightRelaxed,
+        fontWeight: primitives.typographyFontWeightSemiBold,
+        color: semantics.textPrimary,
+        paddingTop: primitives.spacingXs,
+        textAlign: 'left',
+      },
+      allOptionsTitleMeta: {
+        fontSize: primitives.typographyFontSizeSm,
+        color: semantics.textTertiary,
+        lineHeight: primitives.typographyLineHeightNormal,
+        fontWeight: primitives.typographyFontWeightMedium,
+        textAlign: 'left',
+      },
+      allOptionsWrapper: {
+        flex: 1,
+        backgroundColor: semantics.backgroundCoreElevation1,
+      },
+      optionWrapper: {
+        paddingVertical: primitives.spacingMd,
+      },
+    });
+  }, [semantics]);
 };

package/src/components/Poll/components/PollResults/PollOptionFullResults.tsx

@@ -104,38 +104,45 @@ const useStyles = () => {
   const {
     theme: { semantics },
   } = useTheme();
-  return useMemo(
-    () =>
-      StyleSheet.create({
-        container: { flex: 1, padding: primitives.spacingMd },
-        contentContainer: {
-          backgroundColor: semantics.backgroundCoreSurfaceCard,
-          borderRadius: primitives.radiusLg,
-          marginBottom: primitives.spacingMd,
-          padding: primitives.spacingMd,
-        },
-        headerContainer: {
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          paddingBottom: primitives.spacingXs,
-        },
-        headerTitle: {
-          flex: 1,
-          fontSize: primitives.typographyFontSizeLg,
-          lineHeight: primitives.typographyLineHeightRelaxed,
-          fontWeight: primitives.typographyFontWeightSemiBold,
-          color: semantics.textPrimary,
-          paddingTop: primitives.spacingXs,
-        },
-        headerText: {
-          fontSize: primitives.typographyFontSizeMd,
-          lineHeight: primitives.typographyLineHeightNormal,
-          fontWeight: primitives.typographyFontWeightSemiBold,
-          color: semantics.textPrimary,
-          marginLeft: primitives.spacingMd,
-        },
-      }),
-    [semantics.backgroundCoreSurfaceCard, semantics.textPrimary],
-  );
+  return useMemo(() => {
+    return StyleSheet.create({
+      container: { flex: 1, backgroundColor: semantics.backgroundCoreElevation1 },
+      contentContainer: {
+        margin: primitives.spacingMd,
+        backgroundColor: semantics.backgroundCoreSurfaceCard,
+        borderRadius: primitives.radiusLg,
+        paddingHorizontal: primitives.spacingMd,
+        paddingTop: primitives.spacingMd,
+        paddingBottom: primitives.spacingXs,
+      },
+      headerContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingBottom: primitives.spacingXs,
+      },
+      headerTitle: {
+        flex: 1,
+        fontSize: primitives.typographyFontSizeLg,
+        lineHeight: primitives.typographyLineHeightRelaxed,
+        fontWeight: primitives.typographyFontWeightSemiBold,
+        color: semantics.textPrimary,
+        paddingTop: primitives.spacingXs,
+        textAlign: 'left',
+      },
+      headerText: {
+        fontSize: primitives.typographyFontSizeMd,
+        lineHeight: primitives.typographyLineHeightNormal,
+        fontWeight: primitives.typographyFontWeightSemiBold,
+        color: semantics.textPrimary,
+        paddingTop: primitives.spacingXs,
+        marginStart: primitives.spacingMd,
+        textAlign: 'left',
+      },
+    });
+  }, [
+    semantics.backgroundCoreElevation1,
+    semantics.backgroundCoreSurfaceCard,
+    semantics.textPrimary,
+  ]);
 };