@compsych/mobile-ui 1.0.13 → 1.0.15

package/src/components/PromotionCard/index.tsx

@@ -1,543 +0,0 @@
-import React, { useMemo } from 'react';
-
-import {
-  Image,
-  type ImageSourcePropType,
-  Pressable,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import { Ionicons } from '@expo/vector-icons';
-import Svg, { Circle as SvgCircle } from 'react-native-svg';
-
-import { useTheme } from '../../theme';
-import { BodyText } from '../BodyText';
-import { HeaderText } from '../HeaderText';
-
-export type PromotionCardVariant = 'filled' | 'tonal';
-export type PromotionCardUsage =
-  | 'neutral'
-  | 'informative'
-  | 'positive'
-  | 'danger'
-  | 'warning'
-  | 'image';
-export type PromotionCardSize = 'md' | 'lg';
-
-export interface PromotionCardProps {
-  size?: PromotionCardSize;
-  variant?: PromotionCardVariant;
-  usage?: PromotionCardUsage;
-  title?: string;
-  description?: string;
-  chipLabel?: string;
-  chipIcon?: React.ReactNode;
-  image?: ImageSourcePropType;
-  progress?: number;
-  showProgressBar?: boolean;
-  showRingTimer?: boolean;
-  onPress?: () => void;
-  disabled?: boolean;
-  accessibilityLabel?: string;
-  style?: StyleProp<ViewStyle>;
-}
-
-type VariantTokens = {
-  cardBg: string;
-  chipBg: string;
-  chipTextColor: string;
-  titleColor: string;
-  descColor: string;
-  descOpacity: number;
-  buttonBg: string;
-  buttonIconColor: string;
-  progressColor: string;
-};
-
-const MD_HEIGHT = 197;
-const LG_HEIGHT = 363;
-const MD_BUTTON = 32;
-const LG_BUTTON = 48;
-const MD_RING_R = 14;
-const LG_RING_R = 21;
-const MD_RING_C = 2 * Math.PI * MD_RING_R;
-const LG_RING_C = 2 * Math.PI * LG_RING_R;
-const LG_DOTS_BOTTOM = 53;
-const LG_DOTS_LEFT = 32;
-const LG_DOT_SIZE = 6;
-const LG_DOT_GAP = 4;
-const LG_DOT_COUNT = 5;
-
-export function PromotionCard({
-  size = 'md',
-  variant = 'filled',
-  usage = 'neutral',
-  title,
-  description,
-  chipLabel,
-  chipIcon,
-  image,
-  progress = 0.25,
-  showProgressBar = true,
-  showRingTimer = true,
-  onPress,
-  disabled = false,
-  accessibilityLabel,
-  style,
-}: PromotionCardProps) {
-  const { colorRoles: cr, dimensions: dim } = useTheme();
-
-  const tokens = useMemo(
-    (): Record<
-      PromotionCardVariant,
-      Record<PromotionCardUsage, VariantTokens>
-    > => ({
-      filled: {
-        neutral: {
-          cardBg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
-          chipBg: cr.surface.surfaceContainer.sysSurfaceContainerHighest,
-          chipTextColor: cr.surface.surface.sysOnSurface,
-          titleColor: '#0f0f0f',
-          descColor: cr.surface.surface.sysOnSurfaceVariant,
-          descOpacity: 1,
-          buttonBg: cr.addOn.primaryFixed.sysPrimaryFixedDim,
-          buttonIconColor: cr.addOn.primaryFixed.sysOnPrimaryFixed,
-          progressColor: cr.accent.primary.sysPrimary,
-        },
-        informative: {
-          cardBg: cr.custom.info.sysOnInfoContainer,
-          chipBg: cr.custom.info.sysInfoContainer,
-          chipTextColor: cr.custom.info.sysOnInfoContainer,
-          titleColor: cr.custom.info.sysOnInfo,
-          descColor: cr.transparent.neutral.sysWhite80,
-          descOpacity: 1,
-          buttonBg: cr.custom.info.sysOnInfo,
-          buttonIconColor: cr.custom.info.sysOnInfoContainer,
-          progressColor: cr.custom.info.sysOnInfo,
-        },
-        positive: {
-          cardBg: cr.custom.success.sysOnSuccessContainer,
-          chipBg: cr.custom.success.sysSuccessContainer,
-          chipTextColor: cr.custom.success.sysOnSuccessContainer,
-          titleColor: cr.custom.success.sysOnSuccess,
-          descColor: cr.transparent.neutral.sysWhite80,
-          descOpacity: 1,
-          buttonBg: cr.custom.success.sysOnSuccess,
-          buttonIconColor: cr.custom.success.sysOnSuccessContainer,
-          progressColor: cr.custom.success.sysOnSuccess,
-        },
-        danger: {
-          cardBg: cr.error.sysOnErrorContainer,
-          chipBg: cr.error.sysErrorContainer,
-          chipTextColor: cr.error.sysOnErrorContainer,
-          titleColor: cr.error.sysOnError,
-          descColor: cr.transparent.neutral.sysWhite80,
-          descOpacity: 1,
-          buttonBg: cr.error.sysOnError,
-          buttonIconColor: cr.error.sysOnErrorContainer,
-          progressColor: cr.error.sysOnError,
-        },
-        warning: {
-          cardBg: cr.custom.warning.sysOnWarningContainer,
-          chipBg: cr.custom.warning.sysWarningContainer,
-          chipTextColor: cr.custom.warning.sysOnWarningContainer,
-          titleColor: cr.custom.warning.sysOnWarning,
-          descColor: cr.transparent.neutral.sysWhite80,
-          descOpacity: 1,
-          buttonBg: cr.custom.warning.sysOnWarning,
-          buttonIconColor: cr.custom.warning.sysOnWarningContainer,
-          progressColor: cr.custom.warning.sysOnWarning,
-        },
-        image: {
-          cardBg: 'transparent',
-          chipBg: 'rgba(255,255,255,0.2)',
-          chipTextColor: cr.surface.inverse.sysInverseOnSurface,
-          titleColor: cr.accent.primary.sysOnPrimary,
-          descColor: cr.transparent.neutral.sysWhite80,
-          descOpacity: 1,
-          buttonBg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
-          buttonIconColor: cr.surface.surface.sysOnSurface,
-          progressColor: cr.accent.primary.sysOnPrimary,
-        },
-      },
-      tonal: {
-        neutral: {
-          cardBg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
-          chipBg: cr.surface.surfaceContainer.sysSurfaceContainerHighest,
-          chipTextColor: cr.surface.surface.sysOnSurface,
-          titleColor: '#0f0f0f',
-          descColor: cr.surface.surface.sysOnSurfaceVariant,
-          descOpacity: 1,
-          buttonBg: cr.addOn.primaryFixed.sysPrimaryFixedDim,
-          buttonIconColor: cr.addOn.primaryFixed.sysOnPrimaryFixed,
-          progressColor: cr.accent.primary.sysPrimary,
-        },
-        informative: {
-          cardBg: cr.custom.info.sysInfoContainer,
-          chipBg: cr.custom.info.sysOnInfo,
-          chipTextColor: cr.custom.info.sysOnInfoContainer,
-          titleColor: cr.custom.info.sysOnInfoContainer,
-          descColor: cr.custom.info.sysOnInfoContainer,
-          descOpacity: 0.64,
-          buttonBg: cr.custom.info.sysInfo,
-          buttonIconColor: cr.custom.info.sysOnInfo,
-          progressColor: cr.custom.info.sysInfo,
-        },
-        positive: {
-          cardBg: cr.custom.success.sysSuccessContainer,
-          chipBg: cr.custom.success.sysOnSuccess,
-          chipTextColor: cr.custom.success.sysOnSuccessContainer,
-          titleColor: cr.custom.success.sysOnSuccessContainer,
-          descColor: cr.custom.success.sysOnSuccessContainer,
-          descOpacity: 0.64,
-          buttonBg: cr.custom.success.sysSuccess,
-          buttonIconColor: cr.custom.success.sysOnSuccess,
-          progressColor: cr.custom.success.sysSuccess,
-        },
-        danger: {
-          cardBg: cr.error.sysErrorContainer,
-          chipBg: cr.error.sysOnError,
-          chipTextColor: cr.error.sysOnErrorContainer,
-          titleColor: cr.error.sysOnErrorContainer,
-          descColor: cr.error.sysOnErrorContainer,
-          descOpacity: 0.64,
-          buttonBg: cr.error.sysError,
-          buttonIconColor: cr.error.sysOnError,
-          progressColor: cr.error.sysError,
-        },
-        warning: {
-          cardBg: cr.custom.warning.sysWarningContainer,
-          chipBg: cr.custom.warning.sysOnWarning,
-          chipTextColor: cr.custom.warning.sysOnWarningContainer,
-          titleColor: cr.custom.warning.sysOnWarningContainer,
-          descColor: cr.custom.warning.sysOnWarningContainer,
-          descOpacity: 0.64,
-          buttonBg: cr.custom.warning.sysWarning,
-          buttonIconColor: cr.custom.warning.sysOnWarning,
-          progressColor: cr.custom.warning.sysWarning,
-        },
-        image: {
-          cardBg: 'transparent',
-          chipBg: 'rgba(255,255,255,0.2)',
-          chipTextColor: cr.surface.inverse.sysInverseOnSurface,
-          titleColor: cr.accent.primary.sysOnPrimary,
-          descColor: cr.transparent.neutral.sysWhite80,
-          descOpacity: 1,
-          buttonBg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
-          buttonIconColor: cr.surface.surface.sysOnSurface,
-          progressColor: cr.accent.primary.sysOnPrimary,
-        },
-      },
-    }),
-    [cr],
-  );
-
-  // lg tokens: neutral uses filled, others use tonal
-  function getLgTokens(u: PromotionCardUsage): VariantTokens {
-    if (u === 'neutral') return tokens.filled.neutral;
-    return tokens.tonal[u];
-  }
-
-  const isLg = size === 'lg';
-  const t = isLg ? getLgTokens(usage) : tokens[variant][usage];
-  const isImage = usage === 'image';
-  const p = Math.max(0, Math.min(1, progress));
-
-  const buttonSize = isLg ? LG_BUTTON : MD_BUTTON;
-  const ringR = isLg ? LG_RING_R : MD_RING_R;
-  const ringC = isLg ? LG_RING_C : MD_RING_C;
-  const ringArcLength = ringC * p;
-
-  const containerStyle = [
-    styles.card,
-    isLg
-      ? {
-          height: LG_HEIGHT,
-          borderRadius: dim.borderRadius.sysRadiusXl,
-          padding: dim.spacing.padding.sysPadding32,
-          flexDirection: 'column' as const,
-          gap: dim.spacing.padding.sysPadding24,
-        }
-      : {
-          height: MD_HEIGHT,
-          borderRadius: dim.borderRadius.sysRadiusLg,
-          paddingHorizontal: dim.spacing.padding.sysPadding16,
-          paddingVertical: dim.spacing.padding.sysPadding16,
-          justifyContent: 'space-between' as const,
-        },
-    { backgroundColor: t.cardBg, opacity: disabled ? 0.48 : 1 },
-    style,
-  ];
-
-  const inner = (
-    <>
-      {isImage && image && (
-        <>
-          <Image
-            source={image}
-            style={[
-              StyleSheet.absoluteFillObject,
-              {
-                borderRadius: isLg
-                  ? dim.borderRadius.sysRadiusXl
-                  : dim.borderRadius.sysRadiusLg,
-              },
-            ]}
-            resizeMode="cover"
-            accessible={false}
-          />
-          <View
-            style={[
-              StyleSheet.absoluteFillObject,
-              {
-                borderRadius: isLg
-                  ? dim.borderRadius.sysRadiusXl
-                  : dim.borderRadius.sysRadiusLg,
-                backgroundColor: 'rgba(0,0,0,0.35)',
-              },
-            ]}
-            pointerEvents="none"
-          />
-        </>
-      )}
-
-      {/* Chip */}
-      {chipLabel && (
-        <View
-          style={[
-            isLg
-              ? {
-                  flexDirection: 'row' as const,
-                  alignItems: 'center' as const,
-                  alignSelf: 'flex-start' as const,
-                  borderRadius: dim.borderRadius.sysRadiusFull,
-                  paddingHorizontal: dim.spacing.padding.sysPadding16,
-                  paddingVertical: dim.spacing.padding.sysPadding4,
-                  gap: dim.spacing.padding.sysPadding8,
-                  height: 32,
-                }
-              : {
-                  flexDirection: 'row' as const,
-                  alignItems: 'center' as const,
-                  alignSelf: 'flex-start' as const,
-                  borderRadius: dim.borderRadius.sysRadiusFull,
-                  paddingHorizontal: dim.spacing.padding.sysPadding12,
-                  paddingVertical: dim.spacing.padding.sysPadding4,
-                  gap: dim.spacing.padding.sysPadding4,
-                  height: 24,
-                },
-            { backgroundColor: t.chipBg },
-          ]}
-        >
-          {chipIcon && (
-            <View
-              style={
-                isLg
-                  ? {
-                      width: 20,
-                      height: 20,
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                    }
-                  : {
-                      width: 16,
-                      height: 16,
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                    }
-              }
-            >
-              {chipIcon}
-            </View>
-          )}
-          <BodyText variant="labelMedium" color={t.chipTextColor}>
-            {chipLabel}
-          </BodyText>
-        </View>
-      )}
-
-      {/* Content (title + description) */}
-      <View
-        style={
-          isLg
-            ? { gap: dim.spacing.padding.sysPadding8, flex: 1 }
-            : { gap: dim.spacing.padding.sysPadding4, maxWidth: '78%' }
-        }
-      >
-        {title &&
-          (isLg ? (
-            <HeaderText variant="titleLarge" color={t.titleColor}>
-              {title}
-            </HeaderText>
-          ) : (
-            <HeaderText variant="titleSmall" color={t.titleColor}>
-              {title}
-            </HeaderText>
-          ))}
-        {description && (
-          <View style={{ opacity: t.descOpacity }}>
-            <BodyText variant={isLg ? 'medium' : 'small'} color={t.descColor}>
-              {description}
-            </BodyText>
-          </View>
-        )}
-      </View>
-
-      {/* Arrow button (absolute, bottom-right) */}
-      <View
-        style={[
-          styles.buttonWrap,
-          {
-            bottom: isLg
-              ? dim.spacing.padding.sysPadding32
-              : dim.spacing.padding.sysPadding16,
-            right: isLg
-              ? dim.spacing.padding.sysPadding32
-              : dim.spacing.padding.sysPadding16,
-            width: buttonSize,
-            height: buttonSize,
-          },
-        ]}
-      >
-        <View
-          style={[
-            styles.button,
-            {
-              width: buttonSize,
-              height: buttonSize,
-              borderRadius: dim.borderRadius.sysRadiusFull,
-              backgroundColor: t.buttonBg,
-            },
-          ]}
-        >
-          <Ionicons
-            name="arrow-forward"
-            size={isLg ? 24 : 16}
-            color={t.buttonIconColor}
-            accessible={false}
-          />
-        </View>
-        {showRingTimer && (
-          <Svg
-            width={buttonSize}
-            height={buttonSize}
-            style={StyleSheet.absoluteFillObject}
-          >
-            <SvgCircle
-              cx={buttonSize / 2}
-              cy={buttonSize / 2}
-              r={ringR}
-              stroke={t.progressColor}
-              strokeWidth={2}
-              fill="transparent"
-              strokeDasharray={`${ringArcLength} ${ringC - ringArcLength}`}
-              strokeLinecap="round"
-              rotation={-90}
-              origin={`${buttonSize / 2}, ${buttonSize / 2}`}
-            />
-          </Svg>
-        )}
-      </View>
-
-      {/* Pagination dots (lg only) */}
-      {isLg && (
-        <View style={styles.dotsRow}>
-          {Array.from({ length: LG_DOT_COUNT }).map((_, i) => (
-            <View
-              key={i}
-              style={[
-                styles.dot,
-                {
-                  backgroundColor: i === 0 ? t.progressColor : 'transparent',
-                  borderColor: t.progressColor,
-                  borderWidth: i === 0 ? 0 : 1.5,
-                  opacity: i === 0 ? 1 : 0.4,
-                },
-              ]}
-            />
-          ))}
-        </View>
-      )}
-
-      {/* Progress bar */}
-      {showProgressBar && (
-        <View
-          style={[styles.progressTrack, { height: isLg ? 4 : 2 }]}
-          pointerEvents="none"
-        >
-          <View
-            style={[
-              styles.progressFill,
-              {
-                width: `${p * 100}%` as any,
-                height: isLg ? 4 : 2,
-                backgroundColor: t.progressColor,
-              },
-            ]}
-          />
-        </View>
-      )}
-    </>
-  );
-
-  if (onPress) {
-    return (
-      <Pressable
-        onPress={disabled ? undefined : onPress}
-        accessibilityRole="button"
-        accessibilityLabel={accessibilityLabel ?? title}
-        accessibilityState={{ disabled }}
-        style={({ pressed }: { pressed: boolean }) => [
-          ...containerStyle,
-          pressed && !disabled && styles.pressed,
-        ]}
-      >
-        {inner}
-      </Pressable>
-    );
-  }
-
-  return <View style={containerStyle}>{inner}</View>;
-}
-
-const styles = StyleSheet.create({
-  card: {
-    overflow: 'hidden',
-    alignSelf: 'stretch',
-  },
-  buttonWrap: {
-    position: 'absolute',
-  },
-  button: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden',
-  },
-  dotsRow: {
-    position: 'absolute',
-    bottom: LG_DOTS_BOTTOM,
-    left: LG_DOTS_LEFT,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: LG_DOT_GAP,
-  },
-  dot: {
-    width: LG_DOT_SIZE,
-    height: LG_DOT_SIZE,
-    borderRadius: LG_DOT_SIZE / 2,
-  },
-  progressTrack: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    backgroundColor: 'rgba(0,0,0,0.08)',
-  },
-  progressFill: {},
-  pressed: {
-    opacity: 0.84,
-  },
-});

package/src/icons/AtomIcon.tsx

@@ -1,32 +0,0 @@
-import Svg, { Path } from 'react-native-svg';
-
-import { COMMON, DEFAULT_ICON_COLOR, type IconProps, SIZE_MAP } from './types';
-
-export function AtomIcon({
-  size = 'medium',
-  color = DEFAULT_ICON_COLOR,
-}: IconProps) {
-  const { size: px, strokeWidth } = SIZE_MAP[size];
-  return (
-    <Svg width={px} height={px} viewBox="0 0 48 48" fill="none">
-      <Path
-        d="M24 26C25.1046 26 26 25.1046 26 24C26 22.8954 25.1046 22 24 22C22.8954 22 22 22.8954 22 24C22 25.1046 22.8954 26 24 26Z"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-      <Path
-        d="M40.4 40.4C44.48 36.34 40.44 25.68 31.4 16.6C22.32 7.56002 11.66 3.52002 7.60002 7.60002C3.52002 11.66 7.56002 22.32 16.6 31.4C25.68 40.44 36.34 44.48 40.4 40.4Z"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-      <Path
-        d="M31.4 31.4C40.44 22.32 44.48 11.66 40.4 7.60002C36.34 3.52002 25.68 7.56002 16.6 16.6C7.56002 25.68 3.52002 36.34 7.60002 40.4C11.66 44.48 22.32 40.44 31.4 31.4Z"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-    </Svg>
-  );
-}

package/src/icons/BinocularsIcon.tsx

@@ -1,45 +0,0 @@
-import Svg, { Path } from 'react-native-svg';
-
-import { COMMON, DEFAULT_ICON_COLOR, type IconProps, SIZE_MAP } from './types';
-
-export function BinocularsIcon({
-  size = 'medium',
-  color = DEFAULT_ICON_COLOR,
-}: IconProps) {
-  const { size: px, strokeWidth } = SIZE_MAP[size];
-  return (
-    <Svg width={px} height={px} viewBox="0 0 48 48" fill="none">
-      <Path
-        d="M20 20H28"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-      <Path
-        d="M38 14V8C38 7.46957 37.7893 6.96086 37.4142 6.58579C37.0391 6.21071 36.5304 6 36 6H32C31.4696 6 30.9609 6.21071 30.5858 6.58579C30.2107 6.96086 30 7.46957 30 8V14"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-      <Path
-        d="M40 42C41.0609 42 42.0783 41.5786 42.8284 40.8284C43.5786 40.0783 44 39.0609 44 38V30.298C44 27.518 40 24.374 40 20.64V16C40 15.4696 39.7893 14.9609 39.4142 14.5858C39.0391 14.2107 38.5304 14 38 14H30C29.4696 14 28.9609 14.2107 28.5858 14.5858C28.2107 14.9609 28 15.4696 28 16V38C28 39.0609 28.4214 40.0783 29.1716 40.8284C29.9217 41.5786 30.9391 42 32 42H40Z"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-      <Path d="M44 32H4" stroke={color} strokeWidth={strokeWidth} {...COMMON} />
-      <Path
-        d="M8 42C6.93913 42 5.92172 41.5786 5.17157 40.8284C4.42143 40.0783 4 39.0609 4 38V30.298C4 27.518 8 24.374 8 20.64V16C8 15.4696 8.21071 14.9609 8.58579 14.5858C8.96086 14.2107 9.46957 14 10 14H18C18.5304 14 19.0391 14.2107 19.4142 14.5858C19.7893 14.9609 20 15.4696 20 16V38C20 39.0609 19.5786 40.0783 18.8284 40.8284C18.0783 41.5786 17.0609 42 16 42H8Z"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-      <Path
-        d="M18 14V8C18 7.46957 17.7893 6.96086 17.4142 6.58579C17.0391 6.21071 16.5304 6 16 6H12C11.4696 6 10.9609 6.21071 10.5858 6.58579C10.2107 6.96086 10 7.46957 10 8V14"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-    </Svg>
-  );
-}

package/src/icons/FileChartColumnIncreasingIcon.tsx

@@ -1,44 +0,0 @@
-import Svg, { Path } from 'react-native-svg';
-
-import { COMMON, DEFAULT_ICON_COLOR, type IconProps, SIZE_MAP } from './types';
-
-export function FileChartColumnIncreasingIcon({
-  size = 'medium',
-  color = DEFAULT_ICON_COLOR,
-}: IconProps) {
-  const { size: px, strokeWidth } = SIZE_MAP[size];
-  return (
-    <Svg width={px} height={px} viewBox="0 0 48 48" fill="none">
-      <Path
-        d="M12 44C10.9391 44 9.92172 43.5786 9.17157 42.8284C8.42143 42.0783 8 41.0609 8 40V8.00001C8 6.93914 8.42143 5.92172 9.17157 5.17158C9.92172 4.42143 10.9391 4.00001 12 4.00001H28C28.6331 3.99898 29.2602 4.12321 29.8451 4.36554C30.43 4.60788 30.9611 4.96353 31.408 5.41201L38.584 12.588C39.0337 13.035 39.3903 13.5667 39.6334 14.1523C39.8764 14.738 40.001 15.3659 40 16V40C40 41.0609 39.5786 42.0783 38.8284 42.8284C38.0783 43.5786 37.0609 44 36 44H12Z"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-      <Path
-        d="M28 4V14C28 14.5304 28.2107 15.0391 28.5858 15.4142C28.9609 15.7893 29.4696 16 30 16H40"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-      <Path
-        d="M16 36V32"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-      <Path
-        d="M24 36V28"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-      <Path
-        d="M32 36V24"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-    </Svg>
-  );
-}

package/src/icons/FlagIcon.tsx

@@ -1,20 +0,0 @@
-import Svg, { Path } from 'react-native-svg';
-
-import { COMMON, DEFAULT_ICON_COLOR, type IconProps, SIZE_MAP } from './types';
-
-export function FlagIcon({
-  size = 'medium',
-  color = DEFAULT_ICON_COLOR,
-}: IconProps) {
-  const { size: px, strokeWidth } = SIZE_MAP[size];
-  return (
-    <Svg width={px} height={px} viewBox="0 0 48 48" fill="none">
-      <Path
-        d="M8 44V8C8 7.68951 8.07229 7.38328 8.21115 7.10557C8.35 6.82786 8.55161 6.58629 8.8 6.4C10.8772 4.84213 13.4036 4 16 4C22 4 26 8 30.666 8C33.3327 8 35.3773 7.46667 36.8 6.4C37.0971 6.17715 37.4505 6.04144 37.8204 6.00808C38.1903 5.97473 38.5622 6.04504 38.8944 6.21115C39.2266 6.37725 39.506 6.63259 39.7013 6.94854C39.8966 7.26449 40 7.62858 40 8V28C40 28.3105 39.9277 28.6167 39.7889 28.8944C39.65 29.1721 39.4484 29.4137 39.2 29.6C37.1228 31.1579 34.5964 32 32 32C26 32 22 28 16 28C13.0482 28.0001 10.2 29.0881 8 31.056"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-    </Svg>
-  );
-}

package/src/icons/GlobeIcon.tsx

@@ -1,20 +0,0 @@
-import Svg, { Path } from 'react-native-svg';
-
-import { COMMON, DEFAULT_ICON_COLOR, type IconProps, SIZE_MAP } from './types';
-
-export function GlobeIcon({
-  size = 'medium',
-  color = DEFAULT_ICON_COLOR,
-}: IconProps) {
-  const { size: px, strokeWidth } = SIZE_MAP[size];
-  return (
-    <Svg width={px} height={px} viewBox="0 0 48 48" fill="none">
-      <Path
-        d="M44 24C44 35.0457 35.0457 44 24 44M44 24C44 12.9543 35.0457 4 24 4M44 24H4M24 44C12.9543 44 4 35.0457 4 24M24 44C18.8645 38.6077 16 31.4465 16 24C16 16.5535 18.8645 9.39231 24 4M24 44C29.1355 38.6077 32 31.4465 32 24C32 16.5535 29.1355 9.39231 24 4M4 24C4 12.9543 12.9543 4 24 4"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        {...COMMON}
-      />
-    </Svg>
-  );
-}