@procivis/one-react-native-components 0.1.63 → 0.2.54

package/lib/typescript/credential/credential-attribute-item.d.ts

@@ -1,48 +0,0 @@
-import { ComponentType, FC, ReactElement } from 'react';
-import { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
-export type CredentialAttributeValue = {
-    attributes: CredentialAttribute[];
-    image?: never;
-    value?: never;
-    values?: never;
-    valueErrorColor?: never;
-    testID?: string;
-} | {
-    attributes?: never;
-    image: ImageSourcePropType;
-    value?: never;
-    values?: never;
-    valueErrorColor?: never;
-    testID?: string;
-} | {
-    attributes?: never;
-    image?: never;
-    value: string;
-    values?: never;
-    valueErrorColor?: boolean;
-    testID?: string;
-} | {
-    attributes?: never;
-    image?: never;
-    value?: never;
-    values: CredentialAttribute[];
-    valueErrorColor?: boolean;
-    testID?: string;
-};
-export type CredentialAttribute = CredentialAttributeValue & {
-    disabled?: boolean;
-    selected?: boolean;
-    nested?: boolean;
-    listValue?: boolean;
-    id: string;
-    name?: string;
-    rightAccessory?: ComponentType<any> | ReactElement;
-};
-export type CredentialAttributeItemProps = CredentialAttribute & {
-    last: boolean | undefined;
-    onImagePreview?: (name: string, image: ImageSourcePropType) => void;
-    onPress?: (id: string, selected: boolean) => void;
-    style?: StyleProp<ViewStyle>;
-};
-declare const CredentialAttributeItem: FC<CredentialAttributeItemProps>;
-export default CredentialAttributeItem;

package/lib/typescript/entity/avatar.d.ts

@@ -1,10 +0,0 @@
-import { ComponentType, FunctionComponent, ReactElement } from 'react';
-import { ViewProps } from 'react-native';
-import { ImageOrComponentSource } from '../image/image-or-component';
-export type AvatarProps = ViewProps & {
-    avatar?: ImageOrComponentSource;
-    placeholderText?: string;
-    statusIcon?: ComponentType<any> | ReactElement;
-};
-declare const Avatar: FunctionComponent<AvatarProps>;
-export default Avatar;

package/lib/typescript/entity/entity-cluster.d.ts

@@ -1,12 +0,0 @@
-import { FunctionComponent } from 'react';
-import { ViewProps } from 'react-native';
-import { AvatarProps } from './avatar';
-export type EntityClusterProps = ViewProps & {
-    avatar?: AvatarProps;
-    entityName: string;
-    subline?: string;
-    textColor?: string;
-    testID?: string;
-};
-declare const EntityCluster: FunctionComponent<EntityClusterProps>;
-export default EntityCluster;

package/lib/typescript/pin/index.d.ts

@@ -1,3 +0,0 @@
-import { Biometry } from './keypad';
-import { PinCodeScreen, PinCodeScreenActions, PinCodeScreenProps } from './pin-code-screen';
-export { Biometry, PinCodeScreen, PinCodeScreenActions, PinCodeScreenProps };

package/lib/typescript/screens/nerd-mode-screen.d.ts

@@ -1,22 +0,0 @@
-import { FunctionComponent } from 'react';
-import { NerdModeItemProps } from '..//nerd-view/nerd-mode-item';
-export type NerdModeSection = {
-    data: Array<Omit<NerdModeItemProps, 'labels' | 'onCopyToClipboard'>>;
-    title: string;
-};
-export type NerdModeScreenProps = {
-    entityCluster?: {
-        entityName: string;
-    };
-    labels: {
-        expand: string;
-        collapse: string;
-    };
-    onClose: () => void;
-    onCopyToClipboard: (value: string) => void;
-    sections: NerdModeSection[];
-    testID: string;
-    title: string;
-};
-declare const NerdModeScreen: FunctionComponent<NerdModeScreenProps>;
-export default NerdModeScreen;

package/lib/typescript/text/typography.d.ts

@@ -1,112 +0,0 @@
-import React from 'react';
-import { Text } from 'react-native';
-import { BaseTextProps } from './base';
-declare const presets: {
-    readonly xl: {
-        readonly fontSize: 26;
-        readonly lineHeight: 36;
-        readonly letterSpacing: 0.2;
-        readonly fontFamily?: string | undefined;
-        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
-    };
-    readonly l: {
-        readonly fontSize: 24;
-        readonly lineHeight: 33;
-        readonly fontFamily?: string | undefined;
-        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
-    };
-    readonly 'l/line-height-large': {
-        readonly fontSize: 24;
-        readonly lineHeight: 28;
-        readonly fontFamily?: string | undefined;
-        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
-    };
-    readonly regular: {
-        readonly fontSize: 17;
-        readonly lineHeight: 24;
-        readonly fontFamily?: string | undefined;
-        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
-    };
-    readonly m: {
-        readonly fontSize: 17;
-        readonly lineHeight: 22;
-        readonly letterSpacing: -0.2;
-        readonly fontFamily?: string | undefined;
-        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
-    };
-    readonly 'm/heading': {
-        readonly fontSize: 17;
-        readonly lineHeight: 22;
-        readonly letterSpacing: -0.2;
-        readonly fontFamily?: string | undefined;
-        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
-    };
-    readonly s: {
-        readonly fontSize: 14;
-        readonly lineHeight: 22;
-        readonly fontFamily?: string | undefined;
-        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
-    };
-    readonly 's/line-height-capped': {
-        readonly fontSize: 14;
-        readonly lineHeight: 22;
-        readonly letterSpacing: -0.2;
-        readonly fontFamily?: string | undefined;
-        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
-    };
-    readonly 's/line-height-small': {
-        readonly fontSize: 14;
-        readonly lineHeight: 18;
-        readonly letterSpacing: 0.3;
-        readonly fontFamily?: string | undefined;
-        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
-    };
-    readonly 's/code': {
-        readonly fontSize: 14;
-        readonly lineHeight: 22;
-        readonly letterSpacing: 0.2;
-        readonly fontFamily?: string | undefined;
-        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
-    };
-    readonly xs: {
-        readonly fontSize: 12;
-        readonly lineHeight: 22;
-        readonly letterSpacing: -0.1;
-        readonly fontFamily?: string | undefined;
-        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
-    };
-    readonly 'xs/line-height-small': {
-        readonly fontSize: 12;
-        readonly lineHeight: 18;
-        readonly letterSpacing: 0.3;
-        readonly fontFamily?: string | undefined;
-        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
-    };
-    readonly 'xs/code': {
-        readonly fontSize: 12;
-        readonly lineHeight: 18;
-        readonly letterSpacing: 0.3;
-        readonly fontFamily?: string | undefined;
-        readonly fontWeight?: "bold" | "100" | "normal" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
-    };
-};
-export type TypographyProps = BaseTextProps & {
-    preset?: keyof typeof presets;
-    caps?: boolean;
-};
-/**
- * General text component
- * @see https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=1045-30326
- */
-declare const Typography: React.ForwardRefExoticComponent<import("react-native").TextProps & {
-    align?: "center" | "left" | "right" | undefined;
-    color: import("react-native").ColorValue;
-    style?: import("react-native").StyleProp<import("react-native").TextStyle>;
-    announcementActive?: boolean | undefined;
-    announcementCumulative?: boolean | undefined;
-    onAnnouncementFinished?: ((finished: boolean) => void) | undefined;
-} & {
-    preset?: "s" | "regular" | "xl" | "l" | "l/line-height-large" | "m" | "m/heading" | "s/line-height-capped" | "s/line-height-small" | "s/code" | "xs" | "xs/line-height-small" | "xs/code" | undefined;
-    caps?: boolean | undefined;
-} & React.RefAttributes<Text>>;
-export default Typography;

package/src/accessibility/accessibilityHistory.tsx

@@ -1,77 +0,0 @@
-import { useRoute } from '@react-navigation/native';
-import React, { FC, PropsWithChildren, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
-
-import { useForwardedRef } from '../utils/ref';
-import { focusAccessibility, useAccessibleAfterTransition } from './accessibility';
-
-type AccessibilityRefComponent = React.Component | React.ComponentClass | null;
-interface AccessibilityRefContextValue {
-  setRef: (route: string, ref: AccessibilityRefComponent) => void;
-  getRef: (route: string) => AccessibilityRefComponent;
-}
-
-const accessibilityFocusHistoryContext = React.createContext<AccessibilityRefContextValue>({
-  setRef: () => {},
-  getRef: () => null,
-});
-
-/**
- * Adds app support for accessibility focus history
- */
-export const AccessibilityFocusHistoryProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
-  const Provider = accessibilityFocusHistoryContext.Provider;
-  const refs = useRef<Record<string, AccessibilityRefComponent>>({});
-  const setRef = useCallback((route: string, ref: AccessibilityRefComponent) => {
-    refs.current[route] = ref;
-  }, []);
-  const getRef = useCallback((route: string) => {
-    return refs.current[route] ?? null;
-  }, []);
-  const value = useMemo(() => ({ setRef, getRef }), [getRef, setRef]);
-  return <Provider value={value}>{children}</Provider>;
-};
-
-/**
- * Wraps `onPress` handler and `ref` to support automatic accessibility focus on back navigation
- * @note This needs to be used inside {@link AccessibilityFocusHistoryProvider} and navigation context
- */
-export const useAccessibilityFocusHistory = <
-  Component extends React.Component<any> | React.ComponentClass<any>,
-  OnPress extends (...args: never[]) => void = () => void,
->(
-  pressHandler: OnPress | undefined,
-  passedRef?: React.Ref<Component>,
-) => {
-  const [forwardedRef, refObject] = useForwardedRef<Component>(passedRef);
-
-  const historyContext = useContext(accessibilityFocusHistoryContext);
-  const routeKey = useRoute().key;
-
-  const previouslyPressed = useRef(false);
-  const outsideTransition = useAccessibleAfterTransition();
-
-  useEffect(() => {
-    const isStoredInHistory = historyContext.getRef(routeKey) === refObject.current;
-    if (outsideTransition && isStoredInHistory && previouslyPressed.current) {
-      focusAccessibility(refObject.current);
-    }
-  }, [historyContext, outsideTransition, refObject, routeKey]);
-
-  useEffect(() => {
-    if (outsideTransition) {
-      previouslyPressed.current = false;
-    }
-  }, [outsideTransition]);
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const onPress = useCallback(
-    ((...args) => {
-      previouslyPressed.current = true;
-      historyContext.setRef(routeKey, refObject.current);
-      return pressHandler?.(...args);
-    }) as OnPress,
-    [historyContext, routeKey, refObject, pressHandler],
-  );
-
-  return { onPress, ref: forwardedRef };
-};

package/src/blur/blur-view.tsx

@@ -1,82 +0,0 @@
-import { BlurView as RNBlurView, BlurViewProps as RNBlurViewProps } from '@react-native-community/blur';
-import React, { FC, PropsWithChildren, useMemo } from 'react';
-import { ColorValue, Platform, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
-
-import { useAppColorScheme } from '../theme';
-import { colorWithAlphaComponent } from '../utils/color';
-
-export interface BlurViewProps extends ViewProps {
-  blurAmount?: number;
-  color?: ColorValue;
-  darkMode?: boolean;
-  blurStyle: 'soft' | 'strong' | 'header';
-}
-
-const BACKGROUND_COLOR = {
-  light: 'rgba(255, 255, 255, 0.8)',
-  dark: 'rgba(16, 12, 12, 0.8)',
-  thickMaterialLight: 'rgba(255, 255, 255, 0.95)',
-  thickMaterialDark: 'rgba(16, 12, 12, 0.95)',
-  thinMaterialLight: 'rgba(255, 255, 255, 0.8)',
-  thinMaterialDark: 'rgba(16, 12, 12, 0.8)',
-};
-
-const BlurView: FC<PropsWithChildren<BlurViewProps>> = ({
-  blurAmount = 50,
-  blurStyle,
-  color,
-  darkMode,
-  children,
-  style,
-  ...props
-}) => {
-  const colorScheme = useAppColorScheme();
-  const themeDarkMode = colorScheme.darkMode;
-  const dark = darkMode ?? themeDarkMode;
-
-  const blurType: RNBlurViewProps['blurType'] = useMemo(() => {
-    if (blurStyle === 'header') {
-      return dark ? 'dark' : 'light';
-    } else if (blurStyle === 'soft') {
-      return dark ? 'thinMaterialDark' : 'thinMaterialLight';
-    } else {
-      return dark ? 'thickMaterialDark' : 'thickMaterialLight';
-    }
-  }, [blurStyle, dark]);
-
-  const backgroundStyle: ViewStyle | undefined = useMemo(() => {
-    if (blurStyle === 'header' && color === colorScheme.background) {
-      return { backgroundColor: '#00000005' };
-    }
-  }, [blurStyle, color, colorScheme.background]);
-
-  if (Platform.OS === 'ios') {
-    return (
-      <View style={[styles.wrapper, backgroundStyle, style]} {...props}>
-        <RNBlurView
-          blurAmount={blurAmount}
-          blurType={blurType}
-          reducedTransparencyFallbackColor={color as string}
-          style={StyleSheet.absoluteFill}
-        />
-        {children}
-      </View>
-    );
-  }
-
-  const backgroundColor = color ? colorWithAlphaComponent(color, 0.9) : BACKGROUND_COLOR[blurType];
-
-  return (
-    <View style={[{ backgroundColor }, style]} {...props}>
-      {children}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  wrapper: {
-    overflow: 'hidden',
-  },
-});
-
-export default BlurView;

package/src/buttons/back-button.tsx

@@ -1,31 +0,0 @@
-import React, { FC } from 'react';
-
-import { useAccessibilityTranslation } from '../accessibility/accessibilityLanguage';
-import { GhostButtonProps } from '../buttons/ghost-button';
-import { BackIcon, CloseIcon } from '../icons';
-import GhostButton from './ghost-button';
-
-export enum BackButtonIcon {
-  Back = 'back',
-  Close = 'close',
-}
-
-export type BackButtonProps = Omit<GhostButtonProps, 'accessibilityLabel'>;
-
-const BackButton: FC<BackButtonProps> = ({ style, icon = BackButtonIcon.Back, onPress, ...props }) => {
-  const t = useAccessibilityTranslation();
-
-  const Icon = icon === BackButtonIcon.Close ? CloseIcon : BackIcon;
-
-  return (
-    <GhostButton
-      accessibilityLabel={t(icon === BackButtonIcon.Close ? 'accessibility.nav.close' : 'accessibility.nav.back')}
-      icon={Icon}
-      onPress={onPress}
-      style={style}
-      {...props}
-    />
-  );
-};
-
-export default BackButton;

package/src/buttons/button.tsx

@@ -1,169 +0,0 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import { GestureResponderEvent, Insets, StyleSheet, TouchableOpacityProps, View } from 'react-native';
-
-import { TouchableOpacity, TouchableOpacityRef } from '../accessibility/accessibilityHistoryWrappers';
-import { Typography } from '../text';
-import { useAppColorScheme } from '../theme';
-import { concatTestID } from '../utils';
-
-export enum ButtonType {
-  Border = 'border',
-  Primary = 'primary',
-  Secondary = 'secondary',
-  SmallTech = 'small-tech',
-}
-
-export interface ButtonProps extends TouchableOpacityProps {
-  type?: ButtonType;
-  title: string;
-  subtitle?: string;
-  disabled?: boolean;
-}
-
-const SLOP_VALUE = 10;
-const hitSlop: Insets = {
-  top: SLOP_VALUE,
-  bottom: SLOP_VALUE,
-  left: SLOP_VALUE,
-  right: SLOP_VALUE,
-};
-
-const ACTIVE_OPACITY: Record<ButtonType, number> = {
-  [ButtonType.Primary]: 0.8,
-  [ButtonType.Border]: 1,
-  [ButtonType.Secondary]: 1,
-  [ButtonType.SmallTech]: 0.5,
-};
-
-/**
- * Common button component
- *
- * follows design: https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=419-18389
- *
- * for bordered style just override `borderColor` in style
- */
-export const Button = React.forwardRef<TouchableOpacityRef, ButtonProps>(
-  ({ style, type = ButtonType.Primary, disabled, title, subtitle, onPressIn, onPressOut, testID, ...props }, ref) => {
-    const colorScheme = useAppColorScheme();
-    const [secondaryPressed, setSecondaryPressed] = useState(false);
-
-    const textColor = useMemo(() => {
-      switch (type) {
-        case ButtonType.Primary:
-          return colorScheme.accentText;
-        case ButtonType.Border:
-        case ButtonType.Secondary:
-          return colorScheme.text;
-        case ButtonType.SmallTech:
-          return colorScheme.codeAccent;
-      }
-    }, [type, colorScheme]);
-
-    const backgroundColor = useMemo(() => {
-      switch (type) {
-        case ButtonType.Primary:
-          return colorScheme.accent;
-        case ButtonType.Border:
-        case ButtonType.Secondary:
-          return secondaryPressed ? colorScheme.background : colorScheme.white;
-        case ButtonType.SmallTech:
-          return 'rgba(255, 255, 255, 0.05)';
-      }
-    }, [type, colorScheme, secondaryPressed]);
-
-    const borderColor = useMemo(() => {
-      switch (type) {
-        case ButtonType.Border:
-          return colorScheme.background;
-        default:
-          return backgroundColor;
-      }
-    }, [type, colorScheme.background, backgroundColor]);
-
-    const secondaryPressIn = useCallback(
-      (event: GestureResponderEvent) => {
-        setSecondaryPressed(true);
-        onPressIn?.(event);
-      },
-      [onPressIn],
-    );
-
-    const secondaryPressOut = useCallback(
-      (event: GestureResponderEvent) => {
-        setSecondaryPressed(false);
-        onPressOut?.(event);
-      },
-      [onPressOut],
-    );
-
-    return (
-      <TouchableOpacity
-        accessibilityRole="button"
-        activeOpacity={ACTIVE_OPACITY[type]}
-        hitSlop={hitSlop}
-        ref={ref}
-        style={[
-          styles.button,
-          subtitle ? styles.withSubtitle : undefined,
-          { backgroundColor, borderColor },
-          type === ButtonType.SmallTech && styles.techSmall,
-          style,
-        ]}
-        disabled={disabled}
-        onPressIn={type === ButtonType.Secondary ? secondaryPressIn : onPressIn}
-        onPressOut={type === ButtonType.Secondary ? secondaryPressOut : onPressOut}
-        testID={testID}
-        {...props}>
-        <View
-          style={[secondaryPressed && styles.secondaryPressedLabel, disabled && styles.disabled]}
-          testID={concatTestID(testID, disabled ? 'disabled' : 'enabled')}>
-          <Typography
-            preset={type === ButtonType.SmallTech ? 's' : 'regular'}
-            color={textColor}
-            align="center"
-            numberOfLines={1}>
-            {title}
-          </Typography>
-          {subtitle ? (
-            <Typography
-              preset="s/line-height-capped"
-              style={styles.subtitle}
-              color={textColor}
-              align="center"
-              numberOfLines={1}>
-              {subtitle}
-            </Typography>
-          ) : null}
-        </View>
-      </TouchableOpacity>
-    );
-  },
-);
-
-Button.displayName = 'Button';
-
-const styles = StyleSheet.create({
-  button: {
-    borderRadius: 12,
-    borderWidth: 1,
-    paddingHorizontal: 16,
-    paddingVertical: 20,
-  },
-  disabled: {
-    opacity: 0.4,
-  },
-  secondaryPressedLabel: {
-    opacity: 0.5,
-  },
-  subtitle: {
-    opacity: 0.8,
-  },
-  techSmall: {
-    borderRadius: 4,
-    paddingVertical: 12,
-  },
-  withSubtitle: {
-    paddingBottom: 12,
-    paddingTop: 8,
-  },
-});

package/src/buttons/connectivity-button.tsx

@@ -1,95 +0,0 @@
-import React, { FC } from 'react';
-import { StyleSheet, View } from 'react-native';
-
-import { TouchableHighlight } from '../accessibility';
-import {
-  ConnectivityBluetoothOffIcon,
-  ConnectivityBluetoothOnIcon,
-  ConnectivityInternetOffIcon,
-  ConnectivityInternetOnIcon,
-  ConnectivityStatusIcon,
-} from '../icons/connectivity';
-import { Typography } from '../text';
-import { useAppColorScheme } from '../theme';
-import { concatTestID } from '../utils';
-
-export enum ConnectivityTransport {
-  Internet = 'Internet',
-  Bluetooth = 'Bluetooth',
-  All = 'All',
-}
-
-export type ConnectivityButtonProps = {
-  available: boolean;
-  disabled?: boolean;
-  onPress?: () => void;
-  status?: boolean;
-  title?: string;
-  transport: ConnectivityTransport;
-  testID?: string;
-};
-
-const ConnectivityButton: FC<ConnectivityButtonProps> = ({
-  available,
-  disabled,
-  onPress,
-  status,
-  title,
-  transport,
-  testID,
-}) => {
-  const colorScheme = useAppColorScheme();
-
-  const backgroundColor = status === undefined ? colorScheme.grayDark : colorScheme.white;
-  const opacity = disabled ? 0.7 : 1.0;
-  const icons = (
-    <View style={styles.icons}>
-      {transport !== ConnectivityTransport.Bluetooth &&
-        (available ? (
-          <ConnectivityInternetOnIcon testID={concatTestID(testID, 'icon.on')} />
-        ) : (
-          <ConnectivityInternetOffIcon testID={concatTestID(testID, 'icon.off')} />
-        ))}
-      {transport !== ConnectivityTransport.Internet &&
-        (available ? (
-          <ConnectivityBluetoothOnIcon testID={concatTestID(testID, 'icon.on')} />
-        ) : (
-          <ConnectivityBluetoothOffIcon testID={concatTestID(testID, 'icon.off')} />
-        ))}
-    </View>
-  );
-  return (
-    <TouchableHighlight onPress={onPress} style={styles.button}>
-      <View style={[styles.container, { backgroundColor, opacity }]}>
-        {icons}
-        {title && (
-          <Typography testID={concatTestID(testID, 'title')} color={colorScheme.text} preset="s">
-            {title}
-          </Typography>
-        )}
-        {status !== undefined && <ConnectivityStatusIcon status={status} />}
-      </View>
-    </TouchableHighlight>
-  );
-};
-
-const styles = StyleSheet.create({
-  button: {
-    borderRadius: 20,
-    overflow: 'hidden',
-  },
-  container: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    height: 40,
-    paddingHorizontal: 12,
-    paddingVertical: 9,
-  },
-  icons: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    gap: 5,
-  },
-});
-
-export default ConnectivityButton;