@myazahq/kyc-sdk-react-native 2.0.2 → 2.1.0

package/src/components/PhoneNumberInput.tsx

@@ -0,0 +1,149 @@
+import React, { useMemo, useState } from 'react';
+import { Pressable, View } from 'react-native';
+
+import {
+  getCountries,
+  getCountryCallingCode,
+  parsePhoneNumberFromString,
+  type CountryCode,
+} from 'libphonenumber-js/min';
+
+import { radius, sizing, spacing } from '../config/theme';
+import { useTheme } from './runtime';
+import { MyazaText } from './Typography';
+import { MyazaInput } from './MyazaInput';
+import { Icon } from './Icon';
+import { CountryFlag } from './CountryFlag';
+import { DialCodePicker, type DialCodeOption } from './DialCodePicker';
+import { formatNationalNumber } from '../config/phone';
+// Names come from the generated table, NOT Intl.DisplayNames: Hermes may ship
+// without region data, and every row then reads as a bare ISO code.
+import { COUNTRY_NAMES } from '../config/countryNames.g';
+
+// ---------------------------------------------------------------------------
+// Phone field: a dial-code country picker beside a nationally-formatted number.
+//
+// The RN mirror of the web SDK's PhoneNumberInput and Flutter's
+// phone_number_input.dart. Before this the step was a bare text field asking
+// for "+2348012345678" — the user had to know their own country code and type
+// it, and validity was a length guess.
+//
+// Formatting and validity both come from libphonenumber: "8031234567" shows as
+// "803 123 4567" for NG, and a wrong-length number is rejected by the country's
+// actual numbering plan rather than a 6–15 digit heuristic.
+// ---------------------------------------------------------------------------
+
+export function PhoneNumberInput({
+  defaultCountry,
+  disabled,
+  onChange,
+}: {
+  /** Seeds the picker (ISO-2). Falls back to NG. */
+  defaultCountry?: string;
+  disabled?: boolean;
+  /** Fires on every edit with the E.164 value ('' until parseable) + validity. */
+  onChange: (value: { e164: string; isValid: boolean; country: string }) => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+
+  const options = useMemo<DialCodeOption[]>(
+    () =>
+      getCountries()
+        // Only countries the shared table can name. libphonenumber lists five
+        // that it cannot (AC, CC, CX, IO, TA — dependencies with populations in
+        // the hundreds, reachable on their parent country's code anyway), and a
+        // row reading "AC" is worse than no row. Dropping them also makes this
+        // list exactly Flutter's, which is generated from the same table.
+        .filter((code) => COUNTRY_NAMES[code])
+        .map((code) => ({
+          code,
+          name: COUNTRY_NAMES[code] as string,
+          dialCode: `+${getCountryCallingCode(code)}`,
+        }))
+        .sort((a, b) => a.name.localeCompare(b.name)),
+    [],
+  );
+
+  const seed = (defaultCountry?.toUpperCase() ?? 'NG') as CountryCode;
+  const [country, setCountry] = useState<CountryCode>(
+    options.some((o) => o.code === seed) ? seed : ('NG' as CountryCode),
+  );
+  const [national, setNational] = useState('');
+  const [open, setOpen] = useState(false);
+
+  const selected = options.find((o) => o.code === country);
+
+  const emit = (nextCountry: CountryCode, nextNational: string): void => {
+    const parsed = parsePhoneNumberFromString(nextNational, nextCountry);
+    onChange({
+      e164: parsed?.number ?? '',
+      isValid: parsed?.isValid() ?? false,
+      country: nextCountry,
+    });
+  };
+
+  // The caret sits at the end: separators shift on nearly every keystroke, so
+  // tracking an interior caret fights the formatter more than it helps.
+  const onTyped = (raw: string): void => {
+    const formatted = formatNationalNumber(raw, country);
+    setNational(formatted);
+    emit(country, formatted);
+  };
+
+  const pickCountry = (code: string): void => {
+    const next = code as CountryCode;
+    setCountry(next);
+    setOpen(false);
+    // Re-group the digits already typed under the new country's plan.
+    const regrouped = formatNationalNumber(national, next);
+    setNational(regrouped);
+    emit(next, regrouped);
+  };
+
+  return (
+    <View>
+      <View style={{ flexDirection: 'row', gap: spacing.sm }}>
+        <Pressable
+          onPress={disabled ? undefined : () => setOpen(true)}
+          accessibilityRole="button"
+          accessibilityLabel={`Country code ${selected?.dialCode ?? ''}`}
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: spacing.xs,
+            paddingHorizontal: spacing.sm + 2,
+            height: sizing.inputHeight,
+            borderWidth: 1,
+            borderColor: colors.border,
+            borderRadius: radius.sm,
+            backgroundColor: colors.background,
+            opacity: disabled ? 0.6 : 1,
+          }}
+        >
+          <CountryFlag country={country} size={22} />
+          <MyazaText variant="body">{selected?.dialCode ?? ''}</MyazaText>
+          <Icon name="chevron-down" size={14} color={colors.textMuted} />
+        </Pressable>
+
+        <View style={{ flex: 1 }}>
+          <MyazaInput
+            value={national}
+            onChangeText={onTyped}
+            placeholder="803 123 4567"
+            keyboardType="phone-pad"
+            editable={!disabled}
+            autoFocus
+          />
+        </View>
+      </View>
+
+      <DialCodePicker
+        visible={open}
+        options={options}
+        selected={country}
+        onPick={pickCountry}
+        onClose={() => setOpen(false)}
+      />
+    </View>
+  );
+}

package/src/components/PoweredBy.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Linking, Pressable, View } from 'react-native';
+
+import { PRODUCT_URL, brandMarkColor } from '../config/brand';
+import { spacing } from '../config/theme';
+import { MyazaWordmark } from './MyazaWordmark';
+import { useTheme } from './runtime';
+import { MyazaText } from './Typography';
+
+/**
+ * Vendor attribution, pinned below the step body on every screen.
+ *
+ * "POWERED BY", deliberately, not "Secured by" — at this moment we are
+ * COLLECTING a passport and a live selfie, not protecting something, so what the
+ * user needs is provenance (a name to hold responsible) rather than an
+ * unfalsifiable security promise, which is the kind of reassurance a phishing
+ * screen writes.
+ *
+ * The lockup mirrors the dashboard's canonical treatment: [Myaza wordmark],
+ * hairline rule, TRUST in tracked uppercase. The divider is a 1px VIEW, not a
+ * "|" character — a typed pipe sits on the text baseline at whatever weight the
+ * font gives it and reads as a separator between two names. The rule is what
+ * makes it one brand: Myaza Trust.
+ *
+ * Kept on the camera screens too: a trust mark that disappears exactly where
+ * biometrics are captured would vanish where it matters most.
+ */
+export function PoweredBy({ bottomInset = 0 }: { bottomInset?: number }): React.ReactElement {
+  const { colors } = useTheme();
+  // ONE Myaza tone for the whole mark — label, wordmark lettering, rule and
+  // TRUST — picked against the background it will actually sit on rather than
+  // taken from the org's palette. `colors.background` already reflects an org
+  // override, so this holds for a custom background too, not just light/dark.
+  const markColor = brandMarkColor(colors.background);
+
+  return (
+    <View
+      style={{
+        paddingTop: spacing.md,
+        // Symmetric with the top. It was `lg`, which read as a heavy band on the
+        // one screen where vertical space is contested — the searchable country
+        // list, where the footer costs a visible row. The home-indicator inset
+        // rides on top, so notched devices still clear it comfortably.
+        paddingBottom: spacing.md + bottomInset,
+        alignItems: 'center',
+      }}
+    >
+      {/* openURL can reject (no browser / a locked-down device). The mark itself
+          is the point, so a failed open is swallowed rather than surfaced. */}
+      <Pressable
+        onPress={() => {
+          void Linking.openURL(PRODUCT_URL).catch(() => undefined);
+        }}
+        accessibilityRole="link"
+        accessibilityLabel="Powered by Myaza Trust"
+        hitSlop={8}
+        style={{ flexDirection: 'row', alignItems: 'center', gap: 10, opacity: 0.9 }}
+      >
+        {/* Small and muted on purpose — "Powered by" is connective tissue, not
+            the message. The BRAND carries the weight. */}
+        <MyazaText variant="body" color={markColor} style={{ flexShrink: 1, fontSize: 12 }}>
+          Powered by
+        </MyazaText>
+
+        {/* The lockup, spaced TIGHTER than the gap before it so it reads as one
+            mark rather than three evenly-spaced items. */}
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: spacing.sm }}>
+          <MyazaWordmark height={28} wordmark={markColor} />
+
+          <View style={{ width: 1, height: 24, backgroundColor: markColor, opacity: 0.35 }} />
+
+          {/* ~half the wordmark's height — the ratio the dashboard lockup uses. */}
+          {/* Pinned to the brand face rather than inheriting: this word is part
+              of the MARK, and the font an org sets in their workflow would
+              otherwise redraw someone else's logo in the customer's typeface.
+              Matches the web's BRAND_FONT_STACK on the same element. */}
+          <MyazaText
+            brandMark
+            variant="body"
+            color={markColor}
+            style={{ flexShrink: 1, fontSize: 14, fontWeight: '600', letterSpacing: 2 }}
+          >
+            TRUST
+          </MyazaText>
+        </View>
+      </Pressable>
+    </View>
+  );
+}

package/src/components/ReadyPrimer.tsx

@@ -0,0 +1,149 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, ScrollView, View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { useTheme } from './runtime';
+import { MyazaText } from './Typography';
+import { MyazaButton } from './MyazaButton';
+import { Icon } from './Icon';
+import type { ReadyContent } from './readyPrimerContent';
+
+// ---------------------------------------------------------------------------
+// "Here's what happens next" — shown once before a capture step opens the
+// camera.
+//
+// It exists because the camera used to appear unannounced: a user who does not
+// know their ID or their face is about to be photographed fumbles the first
+// attempt, and a retake costs more than a sentence of warning.
+//
+// It sits BEFORE the camera-permission primer: first what we are about to do,
+// then the OS prompt. Two asks in a row, each with a reason, never a surprise.
+//
+// A port of the Flutter SDK's ReadyPrimer and the web SDK's — same single-column
+// shape (one hero, at most three expectations, one primary action) and the same
+// copy, so the flow reads identically whichever SDK an org embeds.
+// ---------------------------------------------------------------------------
+
+export function ReadyPrimer({
+  content,
+  onReady,
+  buttonLabel = "I'm ready",
+}: {
+  content: ReadyContent;
+  onReady: () => void;
+  buttonLabel?: string;
+}): React.ReactElement {
+  const { colors } = useTheme();
+
+  return (
+    // TOP-ALIGNED, like the web and Flutter. The sheet body guarantees the
+    // child at least the viewport height, so centring parked the whole primer
+    // in the middle and left a dead band under the step indicator.
+    <ScrollView
+      contentContainerStyle={{ paddingVertical: spacing.md }}
+      showsVerticalScrollIndicator={false}
+    >
+      {/* Hero — matches the permission primer's icon treatment so the two
+          screens read as one sequence rather than two different designs. */}
+      <View
+        style={{
+          paddingHorizontal: 24,
+          paddingVertical: 36,
+          backgroundColor: `${colors.primary}0D`, // 5%
+          borderWidth: 1,
+          borderColor: `${colors.primary}26`, // 15%
+          borderRadius: radius.lg,
+          alignItems: 'center',
+        }}
+      >
+        <View style={{ width: 80, height: 80, alignItems: 'center', justifyContent: 'center' }}>
+          <PulseRing color={colors.primary} />
+          <View
+            style={{
+              width: 64,
+              height: 64,
+              borderRadius: 32,
+              backgroundColor: `${colors.primary}26`, // 15%
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Icon name={content.icon} size={28} color={colors.primary} />
+          </View>
+        </View>
+
+        <View style={{ height: spacing.md }} />
+        <MyazaText variant="heading3" style={{ textAlign: 'center' }}>
+          {content.title}
+        </MyazaText>
+        <View style={{ height: 6 }} />
+        <MyazaText variant="bodySmall" color={colors.textSecondary} style={{ textAlign: 'center' }}>
+          {content.body}
+        </MyazaText>
+      </View>
+
+      <View style={{ height: 20 }} />
+
+      {/* Expectations — the same row idiom as the consent screen's
+          "during this process we will" list. */}
+      {content.checklist.map((item) => (
+        <View key={item.label} style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 12 }}>
+          <View
+            style={{
+              width: 36,
+              height: 36,
+              borderRadius: radius.xs,
+              backgroundColor: `${colors.primary}1A`, // 10%
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Icon name={item.icon} size={18} color={colors.primary} />
+          </View>
+          <View style={{ width: 12 }} />
+          <MyazaText variant="bodyMedium" style={{ flex: 1 }}>
+            {item.label}
+          </MyazaText>
+        </View>
+      ))}
+
+      <View style={{ height: 8 }} />
+      {/* One primary action. MyazaButton already clears the 44pt minimum. */}
+      <MyazaButton label={buttonLabel} onPress={onReady} />
+    </ScrollView>
+  );
+}
+
+/** The web's `animate-pulse-ring` — a ring that expands and fades behind the glyph. */
+function PulseRing({ color }: { color: string }): React.ReactElement {
+  const t = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.timing(t, {
+        toValue: 1,
+        duration: 2000,
+        easing: Easing.out(Easing.ease),
+        useNativeDriver: true,
+      }),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [t]);
+
+  return (
+    <Animated.View
+      pointerEvents="none"
+      style={{
+        position: 'absolute',
+        width: 64,
+        height: 64,
+        borderRadius: 32,
+        borderWidth: 2,
+        borderColor: color,
+        opacity: t.interpolate({ inputRange: [0, 1], outputRange: [0.45, 0] }),
+        transform: [{ scale: t.interpolate({ inputRange: [0, 1], outputRange: [1, 1.35] }) }],
+      }}
+    />
+  );
+}

package/src/components/StepView.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+
+import { useKycStore } from './runtime';
+import type { KYCStep } from '../types/config';
+import { ConsentStep } from '../screens/ConsentStep';
+import { IdTypeStep } from '../screens/IdTypeStep';
+import { IdInputStep } from '../screens/IdInputStep';
+import { DocumentCaptureStep } from '../screens/DocumentCaptureStep';
+import { LivenessStep } from '../screens/LivenessStep';
+import { SubmittedStep } from '../screens/SubmittedStep';
+import { QuestionnaireStep } from '../screens/QuestionnaireStep';
+import { ContactVerificationStep } from '../screens/ContactVerificationStep';
+import { ProofOfAddressStep } from '../screens/ProofOfAddressStep';
+import { CountrySelectStep } from '../screens/CountrySelectStep';
+import { BusinessDetailsStep } from '../screens/BusinessDetailsStep';
+import { BusinessKeyPeopleStep } from '../screens/BusinessKeyPeopleStep';
+import { BusinessDocumentsStep } from '../screens/BusinessDocumentsStep';
+import { ApplicantRoleStep } from '../screens/ApplicantRoleStep';
+import { NfcStep } from '../screens/NfcStep';
+
+// ---------------------------------------------------------------------------
+// The step router — which screen a step renders.
+//
+// Split from KycFlow.tsx (200-line rule) so adding a step touches the router
+// and the step order, and nothing else.
+// ---------------------------------------------------------------------------
+
+export function StepView({ step, onClose }: { step: KYCStep; onClose: () => void }): React.ReactElement {
+  switch (step) {
+    case 'consent':
+      return <ConsentStep />;
+    case 'id-type':
+      return <IdTypeStep />;
+    case 'id-input':
+      return <IdInputStep />;
+    case 'document-capture':
+      return <DocumentCaptureStep />;
+    case 'liveness':
+      return <LivenessStep />;
+    case 'questionnaire':
+      return <QuestionnaireStep />;
+    // Distinct keys are LOAD-BEARING: both mounts are the same component type
+    // at the same position, so without them React reuses the instance when the
+    // flow moves email → phone. The phone step would open holding the email
+    // step's challengeId, show its code panel, and verifying would file the
+    // EMAIL proof as the phone token — which the server then drops, blocking
+    // submission on a phone check the user appears to have passed.
+    case 'email-verification':
+      return <ContactVerificationStep key="contact-email" channel="email" />;
+    case 'phone-verification':
+      return <ContactVerificationStep key="contact-phone" channel="phone" />;
+    case 'proof-of-address':
+      return <ProofOfAddressStep />;
+    case 'country-select':
+      return <CountrySelectStep />;
+    case 'business-details':
+      return <BusinessDetailsStep />;
+    case 'business-key-people':
+      return <BusinessKeyPeopleStep />;
+    case 'business-documents':
+      return <BusinessDocumentsStep />;
+    case 'applicant-role':
+      return <ApplicantRoleStep />;
+    case 'nfc':
+      return <NfcStep />;
+    case 'submitted':
+      return <SubmittedStep onClose={onClose} />;
+    default:
+      return <UnimplementedStep step={step} />;
+  }
+}
+
+/**
+ * A step that is in the order but has no screen on this platform yet.
+ *
+ * It advances rather than rendering something — the previous `default` fell
+ * back to the consent screen, which put the user in a loop they could not leave
+ * (consent's Continue leads back to the same step). Skipping degrades an
+ * unbuilt step to "it didn't run", which is the same thing a workflow that left
+ * it off would do, and is recoverable. Logged so it surfaces in development
+ * instead of only as a step that mysteriously never appears.
+ */
+function UnimplementedStep({ step }: { step: KYCStep }): React.ReactElement {
+  const store = useKycStore();
+  useEffect(() => {
+    console.warn(`[myaza-kyc] No screen for step "${step}" — skipping.`);
+    store.getState().nextStep();
+  }, [step, store]);
+  return <View />;
+}

package/src/components/Typography.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { StyleSheet, Text, type TextProps, type TextStyle } from 'react-native';
 
 import { useTheme } from './runtime';
-import { fontFamilyFor } from './fonts';
+import { fontFamilyFor, markFamilyName } from './fonts';
 
 // Branded text. `variant` picks size/weight; headings render in Space Grotesk and
 // body/labels in Karla — the SAME families the Flutter SDK uses (google_fonts) —
@@ -34,15 +34,24 @@ const HEADINGS = new Set<TextVariant>(['heading1', 'heading2', 'heading3']);
 export interface MyazaTextProps extends TextProps {
   variant?: TextVariant;
   color?: string;
+  /**
+   * Render in the Myaza brand face, ignoring the org's font override.
+   *
+   * For the wordmark ONLY (the "TRUST" in the footer lockup). Everything else
+   * in the flow is the customer's UI and should take the customer's typeface;
+   * a logo is not.
+   */
+  brandMark?: boolean;
 }
 
 export function MyazaText({
   variant = 'body',
   color,
   style,
+  brandMark = false,
   ...rest
 }: MyazaTextProps): React.ReactElement {
-  const { colors, fontsLoaded } = useTheme();
+  const { colors, fontsLoaded, brandFonts } = useTheme();
   const defaultColor =
     variant === 'bodyMedium'
       ? colors.textSecondary
@@ -54,13 +63,19 @@ export function MyazaText({
   // right Space Grotesk / Karla weight (custom fonts ignore `fontWeight`, so the
   // weight must be baked into the family).
   const flat = (StyleSheet.flatten([VARIANTS[variant], style]) ?? {}) as TextStyle;
-  const family = fontFamilyFor(HEADINGS.has(variant), flat.fontWeight, fontsLoaded);
+  const family = brandMark
+    ? markFamilyName(flat.fontWeight, fontsLoaded)
+    : fontFamilyFor(HEADINGS.has(variant), flat.fontWeight, fontsLoaded, brandFonts);
 
   return (
     <Text
       style={[
         flat,
         { color: color ?? defaultColor },
+        // EVERY resolved family — bundled or brand — encodes its weight in the
+        // family name, so fontWeight must always be cleared. Leaving it makes
+        // the platform synthesise a bolder face on top of an already-bold file:
+        // the glyphs render wider than they were measured and the text clips.
         family ? { fontFamily: family, fontWeight: undefined } : null,
       ]}
       {...rest}

package/src/components/VerifiedNotice.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { useTheme } from './runtime';
+import { MyazaText } from './Typography';
+import { Icon } from './Icon';
+
+/**
+ * "This is already verified" confirmation, shown when a user returns to a
+ * contact step they have already passed.
+ *
+ * A primary-tinted card rather than a bare row, matching the web and Flutter
+ * SDKs: it is the one moment in the step that reports success, and it should
+ * read as a result rather than as another line of copy.
+ */
+export function VerifiedNotice({ label }: { label: string }): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing.sm + 4,
+        padding: spacing.md,
+        borderRadius: radius.md,
+        backgroundColor: `${colors.primary}0D`,
+        borderWidth: 1,
+        borderColor: `${colors.primary}4D`,
+      }}
+    >
+      <Icon name="badge-check" size={20} color={colors.primary} />
+      <MyazaText variant="body" style={{ flex: 1, fontWeight: '600' }}>
+        {label}
+      </MyazaText>
+    </View>
+  );
+}

package/src/components/WhatsAppIcon.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+// The WhatsApp mark. Lucide dropped brand icons, and the nearest generic glyph
+// (a speech bubble) does not read as WhatsApp — the whole point of offering the
+// choice is that the user recognises the channel at a glance.
+//
+// Path data: Simple Icons (CC0), 24×24 viewBox. Byte-identical to the web and
+// Flutter SDKs so the tile looks the same everywhere.
+//
+// Tinted by `color` rather than fixed brand green: it sits in a tile whose icon
+// takes the selected/unselected treatment, and a fixed green would fight that
+// (and the dark theme). Nominative use of the mark to label the channel.
+const WHATSAPP_PATH =
+  'M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z';
+
+export function WhatsAppIcon({
+  size = 16,
+  color,
+}: {
+  size?: number;
+  color: string;
+}): React.ReactElement {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24">
+      <Path d={WHATSAPP_PATH} fill={color} />
+    </Svg>
+  );
+}