@bigbinary/neeto-commons-rn 1.8.5 → 2.0.3

package/src/api/team_members.ts

@@ -0,0 +1,39 @@
+import axios from "axios";
+
+export interface TeamMember {
+  id: string;
+  name: string;
+  email: string;
+  // The list endpoint filters on first_name,last_name,email (see
+  // getSearchParams in useTeamMembersApi), so it returns them too; the edit
+  // form reads them directly.
+  first_name?: string;
+  last_name?: string;
+  display_name?: string;
+  role?: string;
+  organization_role?: string;
+  profile_image_url?: string | null;
+  is_active?: boolean;
+}
+
+export interface TeamMembersPage {
+  members: TeamMember[];
+  members_count: number;
+}
+
+export const fetch = (params: Record<string, unknown> = {}) =>
+  axios.get<TeamMembersPage>("/neeto_team_members/teams", { params });
+
+export const create = (payload: Record<string, unknown>) =>
+  axios.post("/neeto_team_members/teams", { user: payload });
+
+export const update = (id: string, payload: Record<string, unknown> = {}) =>
+  axios.put(`/neeto_team_members/teams/${id}`, { team: payload });
+
+const teamMembersApi = {
+  fetch,
+  create,
+  update,
+};
+
+export default teamMembersApi;

package/src/assets/images/apple-logo.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="26" viewBox="0 0 22 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5421 4.8C15.0147 4.25535 15.375 3.62271 15.6024 2.93842C15.8298 2.25413 15.9197 1.53166 15.8671 0.8125C14.4164 0.929609 13.0696 1.61195 12.1171 2.7125C11.661 3.23997 11.3154 3.8536 11.1006 4.51706C10.8859 5.18051 10.8065 5.88031 10.8671 6.575C11.5748 6.5809 12.2744 6.42387 12.9116 6.11607C13.5489 5.80828 14.1068 5.35797 14.5421 4.8ZM17.6921 14.1C17.7005 13.1422 17.9528 12.2023 18.4252 11.369C18.8976 10.5357 19.5746 9.83657 20.3921 9.3375C19.8762 8.59405 19.1941 7.98104 18.3999 7.54709C17.6058 7.11314 16.7215 6.87019 15.8171 6.8375C13.8671 6.6375 12.0671 7.975 11.0296 7.975C9.99214 7.975 8.52964 6.8625 6.90464 6.8875C5.8423 6.9225 4.80716 7.23223 3.9002 7.78648C2.99323 8.34074 2.2454 9.1206 1.72964 10.05C-0.470362 13.875 1.16714 19.5625 3.36714 22.65C4.36714 24.1625 5.61714 25.875 7.26714 25.8125C8.91714 25.75 9.45464 24.7875 11.3671 24.7875C13.2796 24.7875 13.8671 25.8125 15.4921 25.775C17.1171 25.7375 18.2671 24.225 19.3171 22.7125C20.0609 21.6144 20.642 20.4145 21.0421 19.15C20.0515 18.7275 19.2063 18.0241 18.6109 17.1266C18.0156 16.2292 17.6962 15.177 17.6921 14.1Z" fill="black"/>
+</svg>

package/src/assets/images/google-logo.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.25 12.25C23.25 11.325 23.1734 10.65 23.0077 9.95001H12.2296V14.125H18.5561C18.4286 15.1625 17.7398 16.725 16.2092 17.7749L16.1877 17.9147L19.5955 20.5019L19.8316 20.525C22 18.5625 23.25 15.675 23.25 12.25Z" fill="#4285F4"/>
+<path d="M12.2296 23.25C15.329 23.25 17.931 22.25 19.8316 20.525L16.2092 17.7749C15.2398 18.4374 13.9387 18.8999 12.2296 18.8999C9.1939 18.8999 6.61739 16.9375 5.69893 14.225L5.56431 14.2362L2.0208 16.9237L1.97446 17.05C3.8622 20.7249 7.73976 23.25 12.2296 23.25Z" fill="#34A853"/>
+<path d="M5.69893 14.225C5.45659 13.525 5.31634 12.775 5.31634 12C5.31634 11.225 5.45659 10.475 5.68618 9.77499L5.67976 9.62591L2.09185 6.89523L1.97446 6.94995C1.19643 8.47497 0.75 10.1875 0.75 12C0.75 13.8125 1.19643 15.5249 1.97446 17.05L5.69893 14.225Z" fill="#FBBC05"/>
+<path d="M12.2296 5.09997C14.3852 5.09997 15.8392 6.01247 16.6683 6.77502L19.9081 3.675C17.9184 1.8625 15.329 0.75 12.2296 0.75C7.73976 0.75 3.8622 3.27498 1.97446 6.94995L5.68618 9.77499C6.61739 7.0625 9.1939 5.09997 12.2296 5.09997Z" fill="#EB4335"/>
+</svg>

package/src/auth/index.ts

@@ -0,0 +1,2 @@
+export { AuthStack } from "../navigation/stacks";
+export { logoutUserAction } from "../slices/auth";

package/src/components/AppVersion.ts

@@ -0,0 +1,154 @@
+import { useEffect, useState } from "react";
+import { AppState, Linking, Platform } from "react-native";
+
+import { Alert } from "@bigbinary/neetoui-rn";
+import { compare } from "compare-versions";
+import Config from "react-native-config";
+import { getVersion } from "react-native-device-info";
+
+import {
+  ANDROID_APP_LINK,
+  IOS_PROD_APP_LINK,
+  IOS_STAGING_APP_LINK,
+} from "./constants";
+
+import { useLocalization } from "../contexts/localization";
+import { getItem, setItem } from "../helpers/asyncStore";
+import { useFetchAppVersionApi } from "../hooks/query/useAppVersionApi";
+import { Store } from "../store";
+
+/**
+ * `AppVersionInfo` (@api/app_version) types only the envelope; the
+ * per-platform fields read below live under its index signature.
+ */
+interface AppVersionPayload {
+  android_minimum_supported_version?: string;
+  android_current_version?: string;
+  ios_minimum_supported_version?: string;
+  ios_current_version?: string;
+}
+
+export const AppVersion = () => {
+  const [isMajorUpdate, setIsMajorUpdate] = useState(false);
+  const [isMinorUpdate, setIsMinorUpdate] = useState(false);
+
+  const { strings } = useLocalization();
+
+  const appName = Store.getState().auth.appName;
+
+  const { data: appVersionData, refetch } = useFetchAppVersionApi();
+  const data = (appVersionData ?? {}) as AppVersionPayload;
+
+  const iOSAppLink =
+    Config.ENVIRONMENT === "staging" ? IOS_STAGING_APP_LINK : IOS_PROD_APP_LINK;
+
+  const handleAppUpdate = async () => {
+    try {
+      setIsMinorUpdate(false);
+      setIsMajorUpdate(false);
+      const url = Platform.select({
+        ios: iOSAppLink,
+        android: ANDROID_APP_LINK,
+        default: ANDROID_APP_LINK,
+      }).toLowerCase();
+
+      await Linking.openURL(url);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log((error as Error).message);
+    }
+  };
+
+  const compareVersions = () => {
+    if (Platform.OS === "android") {
+      const {
+        android_minimum_supported_version: androidMinimumSupportedVersion,
+        android_current_version: androidCurrentVersion,
+      } = data;
+      if (androidMinimumSupportedVersion && androidCurrentVersion) {
+        if (compare(getVersion(), androidMinimumSupportedVersion, "<")) {
+          setIsMajorUpdate(true);
+        } else if (compare(getVersion(), androidCurrentVersion, "<")) {
+          setIsMinorUpdate(true);
+        }
+      }
+    } else {
+      const {
+        ios_minimum_supported_version: iOSMinimumSupportedVersion,
+        ios_current_version: iOSCurrentVersion,
+      } = data;
+      if (iOSMinimumSupportedVersion && iOSCurrentVersion) {
+        if (compare(getVersion(), iOSMinimumSupportedVersion, "<")) {
+          setIsMajorUpdate(true);
+        } else if (compare(getVersion(), iOSCurrentVersion, "<")) {
+          setIsMinorUpdate(true);
+        }
+      }
+    }
+  };
+
+  const showAlert = async () => {
+    const {
+      android_current_version: androidCurrentVersion,
+      ios_current_version: iOSCurrentVersion,
+    } = data;
+
+    const version = Platform.select({
+      ios: iOSCurrentVersion,
+      android: androidCurrentVersion,
+    });
+
+    const buttons = [
+      {
+        label: strings.commons.buttons.update,
+        onPress: handleAppUpdate,
+      },
+    ];
+    if (isMinorUpdate) {
+      buttons.push({
+        label: strings.commons.alertMessage.mayBeLater,
+        onPress: async () => {
+          await setItem("appVersion", version);
+        },
+      });
+      const currentVersion = await getItem<string>("appVersion");
+      if (currentVersion === version) return null;
+    }
+
+    return Alert.show({
+      buttons,
+      // `formatString` widens to an array only when handed React elements;
+      // `appName` is a plain string, so this is always a string.
+      description: strings.formatString(
+        strings.commons.alertMessage.updateAvailableDescription,
+        appName
+      ) as string,
+      isCancelable: !isMajorUpdate,
+      title: strings.commons.alertMessage.updateAvailable,
+    });
+  };
+
+  useEffect(() => {
+    if (data) {
+      compareVersions();
+    }
+  }, [data]);
+
+  useEffect(() => {
+    if (isMinorUpdate || isMajorUpdate) {
+      showAlert();
+    }
+  }, [isMinorUpdate, isMajorUpdate]);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener("change", state => {
+      if (state === "active") {
+        refetch();
+      }
+    });
+
+    return () => subscription.remove();
+  }, []);
+
+  return null;
+};

package/src/components/BottomSheet.ts

@@ -0,0 +1,9 @@
+import { BottomSheet } from "@bigbinary/neetoui-rn";
+
+/**
+ * @deprecated Moved to @bigbinary/neetoui-rn v3 (gorhom-based, same
+ * isVisible/hide/data/ContentRow facade). This re-export keeps one
+ * deprecation cycle of compatibility and disappears in the next commons
+ * major — import BottomSheet from the UI library instead.
+ */
+export default BottomSheet;

package/src/components/BottomSheetMenu.ts

@@ -0,0 +1,6 @@
+/**
+ * @deprecated Moved to @bigbinary/neetoui-rn v3. This re-export keeps one
+ * deprecation cycle of compatibility and disappears in the next commons
+ * major — import BottomSheetMenu from the UI library instead.
+ */
+export { BottomSheetMenu } from "@bigbinary/neetoui-rn";

package/src/components/ConfirmSheet.ts

@@ -0,0 +1,15 @@
+import { Alert, type AlertParams } from "@bigbinary/neetoui-rn";
+
+/**
+ * @deprecated Collapsed into the UI library's Alert (v3 presents every
+ * confirm as this bottom sheet). Same params: { title, description,
+ * isCancelable, buttons, onDismiss }. NeetoUIProvider hosts it, so
+ * rendering <ConfirmSheet /> is a no-op kept for compatibility. Call
+ * Alert.show directly once call sites migrate; this alias disappears in
+ * the next commons major.
+ */
+const ConfirmSheet = () => null;
+
+ConfirmSheet.show = (params: AlertParams) => Alert.show(params);
+
+export default ConfirmSheet;

package/src/components/EmptyView.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+import { EmptyView as UIEmptyView } from "@bigbinary/neetoui-rn";
+
+import EmptyGraphic from "../assets/images/empty.svg";
+import { moderateScale } from "../helpers/scale";
+
+export interface EmptyViewProps {
+  title?: string | null;
+  showCTA?: boolean;
+  ctaLabel?: string | null;
+  /**
+   * Historically optional even with showCTA set; the library's primaryAction
+   * requires a handler, hence the cast below.
+   */
+  onCTAPress?: (() => void) | null;
+}
+
+/**
+ * Compat wrapper over the UI library's EmptyView: keeps the historical
+ * commons prop API (showCTA/ctaLabel/onCTAPress) and the commons empty
+ * illustration. New code should use the library EmptyView directly
+ * ({ title, description, Illustration, primaryAction }).
+ */
+export const EmptyView = ({
+  title = null,
+  showCTA = false,
+  ctaLabel = null,
+  onCTAPress = null,
+}: EmptyViewProps) => (
+  <UIEmptyView
+    Illustration={<EmptyGraphic height={moderateScale(200)} />}
+    title={title ?? ""}
+    primaryAction={
+      showCTA && ctaLabel
+        ? { label: ctaLabel, onPress: onCTAPress as () => void }
+        : undefined
+    }
+  />
+);

package/src/components/Header/BaseHeader.ts

@@ -0,0 +1,6 @@
+/**
+ * @deprecated Moved to @bigbinary/neetoui-rn v3. This re-export keeps one
+ * deprecation cycle of compatibility and disappears in the next commons
+ * major — import BaseHeader from the UI library instead.
+ */
+export { BaseHeader } from "@bigbinary/neetoui-rn";

package/src/components/Header/ScreenHeader.ts

@@ -0,0 +1,6 @@
+/**
+ * @deprecated Moved to @bigbinary/neetoui-rn v3. This re-export keeps one
+ * deprecation cycle of compatibility and disappears in the next commons
+ * major — import ScreenHeader from the UI library instead.
+ */
+export { ScreenHeader } from "@bigbinary/neetoui-rn";

package/src/components/Header.tsx

@@ -0,0 +1,139 @@
+import React, { useState, type ComponentType } from "react";
+
+import { HamburgerMenu, MenuVertical, Search } from "@bigbinary/neeto-icons-rn";
+import {
+  Avatar,
+  BottomSheetMenu,
+  Header as UIHeader,
+  Touchable,
+  useNeetoTheme,
+} from "@bigbinary/neetoui-rn";
+import { useNavigation, type NavigationProp } from "@react-navigation/native";
+
+import { moderateScale } from "../helpers/scale";
+import { debounce } from "../helpers/utils";
+import { type CommonsParamList } from "../navigation/types";
+
+/**
+ * Host apps mount this header inside their drawer navigator, so `openDrawer`
+ * is available at runtime even though commons' own param list cannot name it.
+ */
+type HeaderNavigation = NavigationProp<CommonsParamList> & {
+  openDrawer: () => void;
+};
+
+export interface HeaderProps {
+  title: string;
+  subTitle?: string;
+  canGoBack?: boolean;
+  onBackPress?: () => void;
+  showSideMenu?: boolean;
+  handleSearch?: () => void;
+  RightComponent?: ComponentType;
+  isLoading?: boolean;
+  showWorkspaceLogo?: boolean;
+  onMarkAllAsRead?: () => void;
+  showMarkAllOption?: boolean;
+}
+
+/**
+ * Compat wrapper over the UI library's navigation-agnostic Header: keeps
+ * the historical commons prop API (canGoBack/showSideMenu/RightComponent/
+ * onMarkAllAsRead) and wires react-navigation + the mark-all menu on top.
+ * New code should use the library Header with onBack and slots directly.
+ */
+export const Header = ({
+  title,
+  subTitle,
+  canGoBack = false,
+  onBackPress,
+  showSideMenu,
+  handleSearch,
+  RightComponent,
+  isLoading = false,
+  showWorkspaceLogo = false,
+  onMarkAllAsRead,
+  showMarkAllOption = false,
+}: HeaderProps) => {
+  const navigation = useNavigation<HeaderNavigation>();
+  const theme = useNeetoTheme();
+  const [isMenuVisible, setIsMenuVisible] = useState(false);
+
+  const handleBack =
+    onBackPress || canGoBack
+      ? debounce(onBackPress || navigation.goBack)
+      : undefined;
+
+  const LeftSlot = (
+    <>
+      {showWorkspaceLogo && (
+        <Touchable onPress={() => navigation.openDrawer()}>
+          <Avatar name="S" variant="extra-small" />
+        </Touchable>
+      )}
+      {showSideMenu && (
+        <Touchable
+          accessibilityLabel="Open side menu"
+          hitSlop={moderateScale(8)}
+          onPress={() => navigation.openDrawer()}
+        >
+          <HamburgerMenu
+            color={theme.colors.text.primary}
+            size={moderateScale(24)}
+          />
+        </Touchable>
+      )}
+    </>
+  );
+
+  const RightSlot = (
+    <>
+      {handleSearch && (
+        <Touchable
+          accessibilityLabel="Search"
+          hitSlop={moderateScale(10)}
+          onPress={handleSearch}
+        >
+          <Search color={theme.colors.text.primary} size={moderateScale(24)} />
+        </Touchable>
+      )}
+      {showMarkAllOption && (
+        <Touchable
+          accessibilityLabel="Open menu"
+          hitSlop={moderateScale(10)}
+          onPress={() => setIsMenuVisible(true)}
+        >
+          <MenuVertical
+            color={theme.colors.text.primary}
+            size={moderateScale(24)}
+          />
+        </Touchable>
+      )}
+      {RightComponent && <RightComponent />}
+    </>
+  );
+
+  return (
+    <>
+      <UIHeader
+        LeftSlot={LeftSlot}
+        RightSlot={RightSlot}
+        isLoading={isLoading}
+        subTitle={subTitle}
+        title={title}
+        onBack={handleBack}
+      />
+      <BottomSheetMenu
+        isVisible={isMenuVisible}
+        items={[
+          {
+            key: "mark-all-read",
+            label: "Mark all as read",
+            onPress: () => onMarkAllAsRead && onMarkAllAsRead(),
+          },
+        ]}
+        onClose={() => setIsMenuVisible(false)}
+      />
+    </>
+  );
+};

package/src/components/HyperlinkText.tsx

@@ -0,0 +1,34 @@
+import React, { type ReactNode } from "react";
+import { type StyleProp, type TextStyle } from "react-native";
+
+import { Typography, type TypographyProps } from "@bigbinary/neetoui-rn";
+import Hyperlink from "react-native-hyperlink";
+
+export interface HyperlinkTextProps {
+  /**
+   * Rendered as Typography children, so anything `formatString` returns
+   * (a string, or a mixed string/element array) is accepted.
+   */
+  text: ReactNode;
+  linkMapping: Record<string, string>;
+  linkStyleProps?: StyleProp<TextStyle>;
+  /** v3 Typography props — layout goes through its `style` entry. */
+  textStyleProps?: TypographyProps;
+  onPress?: (url: string, text?: string) => void;
+}
+
+export const HyperlinkText = ({
+  text,
+  onPress,
+  linkMapping,
+  linkStyleProps,
+  textStyleProps,
+}: HyperlinkTextProps) => (
+  <Hyperlink
+    linkStyle={linkStyleProps}
+    linkText={url => linkMapping?.[url]}
+    onPress={onPress}
+  >
+    <Typography {...textStyleProps}>{text}</Typography>
+  </Hyperlink>
+);

package/src/components/LineLoader.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { Skeleton } from "@bigbinary/neetoui-rn";
+
+import { moderateScale } from "../helpers/scale";
+
+export interface LineLoaderProps {
+  isLoading?: boolean;
+  height?: number;
+}
+
+/**
+ * @deprecated Absorbed by the UI library's Skeleton
+ * (<Skeleton variant="line" animated />). This shim keeps the v2 prop
+ * contract for one deprecation cycle and disappears in the next commons
+ * major.
+ */
+export const LineLoader = ({
+  isLoading,
+  height = moderateScale(1.5),
+}: LineLoaderProps) => (
+  <Skeleton animated={Boolean(isLoading)} height={height} variant="line" />
+);

package/src/components/NotificationIcon.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+
+import { Notification } from "@bigbinary/neeto-icons-rn";
+import {
+  Container,
+  Touchable,
+  lightTheme,
+  useNeetoTheme,
+} from "@bigbinary/neetoui-rn";
+
+import { moderateScale } from "../helpers/scale";
+import { useNotification } from "../hooks/query/useNotification";
+
+export interface NotificationIconProps {
+  handleClick?: () => void;
+}
+
+export const NotificationIcon = ({
+  handleClick = () => {},
+}: NotificationIconProps) => {
+  const theme = useNeetoTheme();
+
+  const { useFetchNotifications } = useNotification();
+  const { data } = useFetchNotifications();
+  const unreadNotifications = data?.unreadNotifications ?? 0;
+
+  return (
+    <Container>
+      <Touchable
+        hitSlop={{ top: 10, right: 10, bottom: 10, left: 10 }}
+        onPress={handleClick}
+      >
+        <Notification
+          color={theme.colors.text.primary}
+          size={moderateScale(22)}
+        />
+      </Touchable>
+      {unreadNotifications > 0 && <Container style={styles.unreadBadge} />}
+    </Container>
+  );
+};
+
+const styles = StyleSheet.create({
+  unreadBadge: {
+    position: "absolute",
+    right: 0,
+    backgroundColor: lightTheme.colors.danger,
+    borderRadius: 5,
+    height: 10,
+    width: 10,
+  },
+});

package/src/components/NotificationPreferenceList.tsx

@@ -0,0 +1,132 @@
+import React, { type ComponentType } from "react";
+import { StyleSheet } from "react-native";
+
+import {
+  Container,
+  Divider,
+  Loader,
+  Typography,
+  lightTheme,
+} from "@bigbinary/neetoui-rn";
+
+import { PREFERENCE_TITLE_LINE_HEIGHT } from "./constants";
+import { ToggleSwitch } from "./ToggleSwitch";
+
+import { moderateScale } from "../helpers/scale";
+
+export interface NotificationPreference {
+  label: string;
+  enabled: boolean;
+  LeftIcon?: ComponentType;
+  onSwitch: (item: NotificationPreference, index: number) => void;
+}
+
+// neetoui-rn v2 shipped this; v3 dropped it. Reproduced here against the v3
+// primitives, with the styled-system shorthands the original used rewritten
+// as styles.
+export interface NotificationPreferenceListProps {
+  data?: NotificationPreference[];
+  title?: string;
+  isLoading?: boolean;
+}
+
+export const NotificationPreferenceList = ({
+  data,
+  title,
+  isLoading,
+}: NotificationPreferenceListProps) => (
+  <Container style={styles.root}>
+    <Container style={styles.header}>
+      {!!title && (
+        <Typography
+          color={lightTheme.colors.palette.grey600}
+          size="m"
+          style={styles.title}
+        >
+          {title}
+        </Typography>
+      )}
+      {isLoading && (
+        <Container style={styles.loader}>
+          <Loader />
+        </Container>
+      )}
+    </Container>
+    <Container style={styles.list}>
+      {data?.map((item, index) => {
+        const { label, enabled, onSwitch, LeftIcon } = item;
+        const isLastItem = index === data.length - 1;
+
+        return (
+          <Container key={index} style={styles.itemWrapper}>
+            <Container style={styles.item}>
+              <Container style={styles.labelRow}>
+                {LeftIcon && (
+                  <Container style={styles.leftIcon}>
+                    <LeftIcon />
+                  </Container>
+                )}
+                <Typography size="l" style={styles.label}>
+                  {label}
+                </Typography>
+              </Container>
+              <ToggleSwitch
+                value={enabled}
+                onValueChange={() => onSwitch(item, index)}
+              />
+            </Container>
+            {!isLastItem && <Divider style={styles.divider} />}
+          </Container>
+        );
+      })}
+    </Container>
+  </Container>
+);
+
+const styles = StyleSheet.create({
+  root: {
+    width: "100%",
+  },
+  header: {
+    alignItems: "center",
+    flexDirection: "row",
+    paddingBottom: moderateScale(8),
+    paddingTop: moderateScale(20),
+  },
+  title: {
+    lineHeight: PREFERENCE_TITLE_LINE_HEIGHT,
+  },
+  loader: {
+    justifyContent: "center",
+    height: PREFERENCE_TITLE_LINE_HEIGHT,
+    marginHorizontal: moderateScale(8),
+  },
+  list: {
+    backgroundColor: lightTheme.colors.background.secondary,
+    borderRadius: moderateScale(8),
+  },
+  itemWrapper: {
+    paddingHorizontal: moderateScale(16),
+  },
+  item: {
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    paddingVertical: moderateScale(12),
+  },
+  labelRow: {
+    alignItems: "center",
+    flex: 1,
+    flexDirection: "row",
+  },
+  leftIcon: {
+    marginRight: moderateScale(8),
+  },
+  label: {
+    flex: 1,
+    marginRight: moderateScale(8),
+  },
+  divider: {
+    backgroundColor: lightTheme.colors.palette.grey300,
+  },
+});