@amityco/react-native-social-uikit 4.1.1-fdf83f6b.0 → 4.2.0

package/src/chat/features/shared/components/ContentReportReason/ContentReportReason.tsx

@@ -1,305 +0,0 @@
-// ContentReportReason — ported from AmityUiKitWeb
-// core/design/components/ContentReportReason/ContentReportReason.tsx, scoped to the
-// message-report flow (web's component also handled post/comment; RN only needs
-// message here). Web rendered it inside a Drawer (mobile) / Popup (desktop); the RN
-// bug being fixed was that the report UI appeared as a partial bottom sheet, so this
-// is a full-screen Modal — matching the sibling MessageFullTextScreen overlay pattern
-// and how every other chat overlay is threaded through useChatMessage.
-//
-// RN adaptations vs web:
-//   - web's `useFlagMessageQuery` (react-query) is inlined here as a direct
-//     `MessageRepository.flagMessage(messageId, reason)` call — RN has no react-query
-//     wrapper for messages and the report screen only reports (never toggles/unreports).
-//   - web's deleted/error branch (`FailedToShow` + a Close button on NOT_FOUND /
-//     400400) is dropped — RN has no `FailedToShow`; failures surface as an error
-//     toast instead (documented deviation).
-//   - web's offline info-toast `useEffect` is dropped; the Submit button already
-//     stays disabled while offline (documented deviation).
-
-// 1. React / RN imports
-import { useState } from 'react';
-import { Modal, Pressable, ScrollView, View } from 'react-native';
-
-// 2. Third-party imports
-import {
-  ContentFlagReasonEnum,
-  MessageRepository,
-} from '@amityco/ts-sdk-react-native';
-import { useQueryClient } from '@tanstack/react-query';
-
-// 3. Internal imports
-import { Typography } from '../../../../../core/design/components/Typography';
-import { AmityIcon } from '../../../../../core/design/icons';
-import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
-import { Selection } from '../../../../../core/design/atoms/Selection';
-import { Input } from '../../../../../core/design/atoms/Input';
-import { Button } from '../../../../../core/design/atoms/Button';
-import { resolveString, useString } from '../../../../../core/localization';
-import { useChatNotifications } from '../../../../hooks/useChatNotifications';
-import { flagMessageQueryKey } from '../../../../hooks/queries';
-import { useNetworkOnline } from '../../../../hooks/useNetworkOnline';
-import Toast from '../../../../../social/components/Toast';
-import { useStyles } from './styles';
-
-// 4. Types
-type ContentReportReasonProps = {
-  visible: boolean;
-  message: Amity.Message;
-  onClose: () => void;
-};
-
-const MAX_LENGTH_DESCRIBE = 300;
-
-// Mirrors web's `reportReasons` memo. The trailing "Others" entry is rendered as a
-// separate row with a chevron (it opens the free-text sub-view), not as a radio.
-const REPORT_REASONS: { value: ContentFlagReasonEnum; labelKey: string }[] = [
-  {
-    value: ContentFlagReasonEnum.CommunityGuidelines,
-    labelKey: 'amity_social_label_report_reason_community_guidelines',
-  },
-  {
-    value: ContentFlagReasonEnum.HarassmentOrBullying,
-    labelKey: 'amity_social_label_report_reason_harassment_or_bullying',
-  },
-  {
-    value: ContentFlagReasonEnum.SelfHarmOrSuicide,
-    labelKey: 'amity_social_label_report_reason_self_harm_or_suicide',
-  },
-  {
-    value: ContentFlagReasonEnum.ViolenceOrThreateningContent,
-    labelKey: 'amity_social_label_report_reason_violence_or_threatening',
-  },
-  {
-    value: ContentFlagReasonEnum.SellingRestrictedItems,
-    labelKey: 'amity_social_label_report_reason_selling_restricted',
-  },
-  {
-    value: ContentFlagReasonEnum.SexualContentOrNudity,
-    labelKey: 'amity_social_label_report_reason_sexual_content_or_nudity',
-  },
-  {
-    value: ContentFlagReasonEnum.SpamOrScams,
-    labelKey: 'amity_social_label_report_reason_spam_or_scams',
-  },
-  {
-    value: ContentFlagReasonEnum.FalseInformation,
-    labelKey: 'amity_social_label_report_reason_false_information',
-  },
-];
-
-// 5. Named function component
-export function ContentReportReason({
-  visible,
-  message,
-  onClose,
-}: ContentReportReasonProps) {
-  const { styles } = useStyles();
-  const { success, error } = useChatNotifications();
-  const queryClient = useQueryClient();
-  const { online } = useNetworkOnline();
-
-  const [isShowOthersOption, setIsShowOthersOption] = useState(false);
-  const [otherReasonText, setOtherReasonText] = useState('');
-  const [selectedReason, setSelectedReason] = useState<
-    Amity.ContentFlagReason | undefined
-  >(undefined);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const othersTitle = useString('amity_social_button_others');
-  const reportReasonTitle = useString('amity_social_button_report_reason');
-  const reportOtherReasonDesc = useString(
-    'amity_social_label_report_other_reason_desc'
-  );
-  const reportOtherReasonOptional = useString(
-    'amity_social_button_report_other_reason_optional'
-  );
-  const reportTextPlaceholder = useString(
-    'amity_social_placeholder_report_text_placeholder'
-  );
-  const reportListDescription = useString(
-    'amity_social_report_list_screen_description'
-  );
-  const closeButtonText = useString('amity_social_modal_dialog_close_button');
-  const submitButtonText = useString(
-    'amity_social_button_report_submit_button'
-  );
-  const reportSuccessToast = useString('amity_chat_toast_message_reported');
-  const reportErrorToast = useString('amity_chat_toast_message_reported_error');
-
-  const isDisabledSubmitButton = !selectedReason || !online || isSubmitting;
-
-  function handleBack() {
-    // Web resets both the selected reason and the sub-view flag.
-    setSelectedReason(undefined);
-    setIsShowOthersOption(false);
-  }
-
-  function handleRadioChange(value: ContentFlagReasonEnum) {
-    setSelectedReason(value);
-  }
-
-  async function handleSubmitReport() {
-    if (!message.messageId || !selectedReason || isSubmitting) return;
-
-    // Web sends the free text for Others, the enum value otherwise.
-    const reason =
-      selectedReason === ContentFlagReasonEnum.Others
-        ? otherReasonText
-        : selectedReason;
-
-    setIsSubmitting(true);
-    try {
-      await MessageRepository.flagMessage(message.messageId, reason);
-      // Refresh the bubble menu's flag state so Report flips to Unreport
-      // (reinforces the menu's own refetch-on-open; see useFlagMessageQuery).
-      queryClient.invalidateQueries({
-        queryKey: flagMessageQueryKey(message.messageId),
-      });
-      success({ content: reportSuccessToast });
-      onClose();
-    } catch {
-      error({ content: reportErrorToast });
-    } finally {
-      setIsSubmitting(false);
-    }
-  }
-
-  return (
-    <Modal
-      visible={visible}
-      animationType="slide"
-      onRequestClose={onClose}
-      transparent={false}
-    >
-      <View style={styles.screen}>
-        <View style={styles.header}>
-          <View style={[styles.headerSlot, styles.headerSlotLeft]}>
-            {isShowOthersOption ? (
-              <Pressable
-                style={styles.iconButton}
-                onPress={handleBack}
-                accessibilityRole="button"
-                accessibilityLabel="Back"
-              >
-                <AmityIcon
-                  name="chevron-left"
-                  size={24}
-                  tokenColor={
-                    AmityColorToken.IconIconButtonGhostSecondaryDefault
-                  }
-                />
-              </Pressable>
-            ) : null}
-          </View>
-          <View style={[styles.headerSlot, styles.headerSlotCenter]}>
-            <Typography
-              variant="titleBold"
-              style={styles.title}
-              numberOfLines={1}
-            >
-              {isShowOthersOption ? othersTitle : reportReasonTitle}
-            </Typography>
-          </View>
-          <View style={[styles.headerSlot, styles.headerSlotRight]}>
-            {isShowOthersOption ? (
-              <Pressable
-                style={styles.iconButton}
-                onPress={onClose}
-                accessibilityRole="button"
-                accessibilityLabel={closeButtonText}
-              >
-                <AmityIcon
-                  name="cross-l"
-                  size={24}
-                  tokenColor={
-                    AmityColorToken.IconIconButtonGhostSecondaryDefault
-                  }
-                />
-              </Pressable>
-            ) : null}
-          </View>
-        </View>
-
-        <ScrollView
-          style={styles.content}
-          contentContainerStyle={styles.contentContainer}
-        >
-          {isShowOthersOption ? (
-            <View style={styles.othersField}>
-              <Input.Text
-                title={reportOtherReasonDesc}
-                optionalLabel={reportOtherReasonOptional}
-                showCharacterCount
-                maxLength={MAX_LENGTH_DESCRIBE}
-                placeholder={reportTextPlaceholder}
-                value={otherReasonText}
-                onChange={setOtherReasonText}
-                // LEADS WEB (PDT-4142): web's ContentReportReason also omits
-                // multiLine — its Input.Text then renders a single-line <input>,
-                // which is the bug the ticket reports, still open there.
-                // Without this the field stays single-line, so a reason typed up
-                // to MAX_LENGTH_DESCRIBE scrolls sideways instead of wrapping.
-                // multiLine also top-aligns the row so the label sits level with
-                // the first line.
-                multiLine
-              />
-            </View>
-          ) : (
-            <>
-              <Typography variant="caption" style={styles.description}>
-                {reportListDescription}
-              </Typography>
-              {REPORT_REASONS.map((reason) => (
-                <View key={reason.value} style={styles.rowSurface}>
-                  <Selection.Radio
-                    isSelected={selectedReason === reason.value}
-                    onSelect={() => handleRadioChange(reason.value)}
-                    accessibilityLabel={resolveString(reason.labelKey)}
-                  >
-                    <Typography variant="bodyBold" style={styles.option}>
-                      {resolveString(reason.labelKey)}
-                    </Typography>
-                  </Selection.Radio>
-                </View>
-              ))}
-              <Pressable
-                style={styles.row}
-                onPress={() => {
-                  setSelectedReason(ContentFlagReasonEnum.Others);
-                  setIsShowOthersOption(true);
-                }}
-                accessibilityRole="button"
-                accessibilityLabel={othersTitle}
-              >
-                <Typography variant="bodyBold" style={styles.option}>
-                  {othersTitle}
-                </Typography>
-                <AmityIcon
-                  name="chevron-right"
-                  size={24}
-                  tokenColor={AmityColorToken.IconListLeadingDefaultDefault}
-                />
-              </Pressable>
-            </>
-          )}
-        </ScrollView>
-
-        <View style={styles.bottomBar}>
-          <Button
-            hierarchy="primary"
-            size="lg"
-            fullWidth
-            label={submitButtonText}
-            disabled={isDisabledSubmitButton}
-            onPress={handleSubmitReport}
-          />
-        </View>
-        {/* The global <Toast /> is mounted outside this Modal, so RN renders it
-            beneath the native Modal layer. Mount a Toast inside the Modal too so
-            the report-error toast (Modal stays open on failure) is visible; it
-            reads the same redux toast state via context. */}
-        <Toast />
-      </View>
-    </Modal>
-  );
-}

package/src/chat/features/shared/components/ContentReportReason/index.ts

@@ -1 +0,0 @@
-export { ContentReportReason } from './ContentReportReason';

package/src/chat/features/shared/components/ContentReportReason/styles.ts

@@ -1,95 +0,0 @@
-// Styles for ContentReportReason — ported from AmityUiKitWeb
-// core/design/components/ContentReportReason/ContentReportReason.module.css.
-// Web is a full-viewport sheet (`height: 100vh`); RN uses a full-screen Modal.
-// Geometry: header padding 0.75rem/1rem → 12/16; description padding 12/16; list
-// rows padding 1rem → 16; bottom bar padding 1rem → 16; others field padding
-// 1.5rem 1rem 0 → paddingTop 24 / paddingHorizontal 16. Web token
-// `text-list-textdescription-default-default` → RN `TextListTextDescriptionDefaultDefault`.
-
-import { StyleSheet } from 'react-native';
-import { useToken } from '../../../../../core/design/theme/useToken';
-import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
-
-export const useStyles = () => {
-  const token = useToken();
-
-  const styles = StyleSheet.create({
-    screen: {
-      flex: 1,
-      backgroundColor: token(AmityColorToken.SurfaceSheetsBackgroundGeneral),
-    },
-    header: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      paddingVertical: 12,
-      paddingHorizontal: 16,
-      borderBottomWidth: 1,
-      borderBottomColor: token(AmityColorToken.LineDividerPostDefault),
-      backgroundColor: token(AmityColorToken.SurfaceSheetsBackgroundGeneral),
-    },
-    headerSlot: {
-      flex: 1,
-      flexDirection: 'row',
-      alignItems: 'center',
-    },
-    headerSlotLeft: {
-      justifyContent: 'flex-start',
-    },
-    headerSlotCenter: {
-      justifyContent: 'center',
-    },
-    headerSlotRight: {
-      justifyContent: 'flex-end',
-    },
-    iconButton: {
-      width: 24,
-      height: 24,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    title: {
-      textAlign: 'center',
-      color: token(AmityColorToken.TextSheetsHeaderTitleDefault),
-    },
-    content: {
-      flex: 1,
-    },
-    contentContainer: {
-      paddingBottom: 48,
-    },
-    description: {
-      paddingVertical: 12,
-      paddingHorizontal: 16,
-      color: token(AmityColorToken.TextListTextDescriptionDefaultDefault),
-    },
-    // Others row (a plain Pressable) — matches the padded, space-between list row.
-    row: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      padding: 16,
-      backgroundColor: token(AmityColorToken.SurfaceListDefaultDefault),
-    },
-    // Background behind a Selection.Radio (the atom owns its own padded row layout).
-    rowSurface: {
-      backgroundColor: token(AmityColorToken.SurfaceListDefaultDefault),
-    },
-    option: {
-      flex: 1,
-      color: token(AmityColorToken.TextListHeaderDefaultDefault),
-    },
-    othersField: {
-      paddingTop: 24,
-      paddingHorizontal: 16,
-    },
-    bottomBar: {
-      padding: 16,
-      borderTopWidth: 1,
-      borderTopColor: token(AmityColorToken.LineDividerPostDefault),
-      backgroundColor: token(AmityColorToken.SurfaceSheetsBackgroundGeneral),
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/features/shared/components/DateSeparator/DateSeparator.tsx

@@ -1,29 +0,0 @@
-// DateSeparator — ported from AmityUiKitWeb features/shared/components/DateSeparator.
-// A centered date pill shown between message groups. Web div→View, span→Typography.
-
-// 1. React / RN imports
-import { View } from 'react-native';
-
-// 2. Internal imports
-import { Typography } from '../../../../../core/design/components/Typography';
-import { useStyles } from './styles';
-
-// 3. Types
-type DateSeparatorProps = {
-  label: string;
-};
-
-// 4. Named function component
-export function DateSeparator({ label }: DateSeparatorProps) {
-  const { styles } = useStyles();
-
-  return (
-    <View style={styles.dateSeparator} accessibilityRole="text">
-      <View style={styles.pill}>
-        <Typography variant="caption" style={styles.label}>
-          {label}
-        </Typography>
-      </View>
-    </View>
-  );
-}

package/src/chat/features/shared/components/DateSeparator/index.ts

@@ -1 +0,0 @@
-export { DateSeparator } from './DateSeparator';

package/src/chat/features/shared/components/DateSeparator/styles.ts

@@ -1,46 +0,0 @@
-// Styles for DateSeparator — ported from DateSeparator.module.css.
-// Geometry: outer paddingVertical 0.5rem→8; pill padding 0.25rem/0.5rem→4/8,
-// border-radius 1rem→16. Colours via tokens.
-//
-// Shadow: web's pill relies on a box-shadow for definition — without it the pill
-// blends into a light message-list background. Web's shadow colours are RAW rgba
-// (NOT design tokens — there is no shadow token to map to), so we port them verbatim
-// as rgb()+opacity. rgb()/rgba() (no `#`) is intentionally allowed by the no-hex gate;
-// dropping the shadow would be an unfaithful silent simplification.
-// web: 0 0 2px rgb(40 41 61 /10%), 0 2px 4px rgb(96 97 112 /16%) → RN approximates the
-// dominant drop layer (iOS shadow* + Android elevation).
-
-import { StyleSheet } from 'react-native';
-import { useToken } from '../../../../../core/design/theme/useToken';
-import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
-
-export const useStyles = () => {
-  const token = useToken();
-
-  const styles = StyleSheet.create({
-    dateSeparator: {
-      alignItems: 'center',
-      justifyContent: 'center',
-      paddingVertical: 8,
-    },
-    pill: {
-      paddingVertical: 4,
-      paddingHorizontal: 8,
-      borderRadius: 16,
-      backgroundColor: token(
-        AmityColorToken.SurfaceDateAndTimeDateSeparatorDefault
-      ),
-      // web box-shadow (raw rgba, non-tokenized) — ported so the pill reads on light bg
-      shadowColor: 'rgb(96, 97, 112)',
-      shadowOffset: { width: 0, height: 2 },
-      shadowOpacity: 0.16,
-      shadowRadius: 4,
-      elevation: 2,
-    },
-    label: {
-      color: token(AmityColorToken.TextDateAndTimeDateSeparatorDefault),
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/features/shared/components/DeletedMessagePill/DeletedMessagePill.tsx

@@ -1,39 +0,0 @@
-// DeletedMessagePill — ported from AmityUiKitWeb features/shared/components/DeletedMessagePill.
-// An outlined pill with a trash glyph + "This message was deleted". Web relies on
-// CSS `currentcolor` to tint icon/text/border from one `color` per data-user side;
-// RN has no `currentcolor`, so the side colour is resolved explicitly for the icon
-// (tokenColor) and for the border/label (styles).
-
-// 1. React / RN imports
-import { View } from 'react-native';
-
-// 2. Internal imports
-import { Typography } from '../../../../../core/design/components/Typography';
-import { AmityIcon } from '../../../../../core/design/icons';
-import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
-import { useString } from '../../../../../core/localization';
-import { useStyles } from './styles';
-
-// 3. Types
-type DeletedMessagePillProps = {
-  isUser: boolean;
-};
-
-// 4. Named function component
-export function DeletedMessagePill({ isUser }: DeletedMessagePillProps) {
-  const { styles } = useStyles(isUser);
-  const deletedLabel = useString('amity_chat_message_deleted');
-
-  const iconColor = isUser
-    ? AmityColorToken.TextChatBubbleOutboundMessagesDeleted
-    : AmityColorToken.TextChatBubbleInboundMessagesDeleted;
-
-  return (
-    <View style={styles.pill}>
-      <AmityIcon name="trash-r" size={16} tokenColor={iconColor} />
-      <Typography variant="caption" style={styles.label} numberOfLines={1}>
-        {deletedLabel}
-      </Typography>
-    </View>
-  );
-}

package/src/chat/features/shared/components/DeletedMessagePill/index.ts

@@ -1 +0,0 @@
-export { DeletedMessagePill } from './DeletedMessagePill';

package/src/chat/features/shared/components/DeletedMessagePill/styles.ts

@@ -1,43 +0,0 @@
-// Styles for DeletedMessagePill — ported from DeletedMessagePill.module.css.
-// Geometry: gap 0.25rem→4, padding 0.25rem/0.5rem→4/8, border 0.0625rem→1,
-// border-radius 1.25rem→20. `inline-flex` → alignSelf 'flex-start' so the pill
-// hugs its content instead of stretching the row. Per-side colour resolved here
-// (web `currentcolor` cascade has no RN equivalent).
-
-import { StyleSheet } from 'react-native';
-import { useToken } from '../../../../../core/design/theme/useToken';
-import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
-
-export const useStyles = (isUser: boolean) => {
-  const token = useToken();
-
-  const labelColor = token(
-    isUser
-      ? AmityColorToken.TextChatBubbleOutboundMessagesDeleted
-      : AmityColorToken.TextChatBubbleInboundMessagesDeleted
-  );
-  const borderColor = token(
-    isUser
-      ? AmityColorToken.BorderChatBubbleOutboundDeleted
-      : AmityColorToken.BorderChatBubbleInboundDeleted
-  );
-
-  const styles = StyleSheet.create({
-    pill: {
-      alignSelf: 'flex-start',
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 4,
-      paddingVertical: 4,
-      paddingHorizontal: 8,
-      borderWidth: 1,
-      borderColor,
-      borderRadius: 20,
-    },
-    label: {
-      color: labelColor,
-    },
-  });
-
-  return { styles, token };
-};

package/src/chat/features/shared/components/EmptyState/EmptyState.tsx

@@ -1,63 +0,0 @@
-// EmptyState — ported from AmityUiKitWeb features/shared/components/EmptyState.
-// A centered icon + title for the various chat empty/prompt states. Web icons
-// (Search.Light / SearchCross / ListRadio / Inbox) map to the SoT icon registry.
-// The `min-height: calc(100svh - …)` fill → flex:1 (no svh in RN).
-
-// 1. React / RN imports
-import { View } from 'react-native';
-
-// 2. Internal imports
-import { Typography } from '../../../../../core/design/components/Typography';
-import {
-  AmityIcon,
-  type AmityIconName,
-} from '../../../../../core/design/icons';
-import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
-import { useString } from '../../../../../core/localization';
-import { useStyles } from './styles';
-
-// 3. Types
-type EmptyStateVariant =
-  | 'prompt'
-  | 'no-results'
-  | 'no-members'
-  | 'no-banned-users'
-  | 'no-archived-chats';
-
-type EmptyStateProps = {
-  variant: EmptyStateVariant;
-};
-
-function getIconName(variant: EmptyStateVariant): AmityIconName {
-  if (variant === 'prompt') return 'search-l';
-  if (variant === 'no-banned-users') return 'list-radio-l';
-  if (variant === 'no-archived-chats') return 'inbox-l';
-  return 'search-cross-l';
-}
-
-// 4. Named function component
-export function EmptyState({ variant }: EmptyStateProps) {
-  const { styles } = useStyles();
-
-  // Resolved unconditionally (matches web) to respect rules-of-hooks.
-  const content: Record<EmptyStateVariant, string> = {
-    'prompt': useString('amity_chat_search_min_chars'),
-    'no-results': useString('amity_chat_search_no_results'),
-    'no-members': useString('amity_chat_no_members_found'),
-    'no-banned-users': useString('amity_chat_banned_members_empty'),
-    'no-archived-chats': useString('amity_chat_archived_empty_title'),
-  };
-
-  return (
-    <View style={styles.emptyState}>
-      <AmityIcon
-        name={getIconName(variant)}
-        size={64}
-        tokenColor={AmityColorToken.IconEmptyStateIconDefault}
-      />
-      <Typography variant="titleBold" style={styles.text}>
-        {content[variant]}
-      </Typography>
-    </View>
-  );
-}

package/src/chat/features/shared/components/EmptyState/index.ts

@@ -1 +0,0 @@
-export { EmptyState } from './EmptyState';

package/src/chat/features/shared/components/EmptyState/styles.ts

@@ -1,30 +0,0 @@
-// Styles for EmptyState — ported from EmptyState.module.css.
-// Geometry: gap 0.5rem→8, padding 1.5rem→24, icon 4rem→64, title max-width
-// 15.75rem→252. `min-height: calc(100svh - …)` → flex:1 fill + center. Colours
-// via tokens. `white-space: pre-line` is native to RN Text (\n honoured).
-
-import { StyleSheet } from 'react-native';
-import { useToken } from '../../../../../core/design/theme/useToken';
-import { AmityColorToken } from '../../../../../core/design/tokens/amity-color-tokens';
-
-export const useStyles = () => {
-  const token = useToken();
-
-  const styles = StyleSheet.create({
-    emptyState: {
-      flex: 1,
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: 8,
-      padding: 24,
-    },
-    text: {
-      maxWidth: 252,
-      textAlign: 'center',
-      color: token(AmityColorToken.TextEmptyStateTitleDefault),
-    },
-  });
-
-  return { styles, token };
-};