@umituz/react-native-settings 4.20.0 → 4.20.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.20.0",
+  "version": "4.20.1",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, about, legal, appearance, feedback, FAQs, and rating",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -39,14 +39,14 @@
     "@react-navigation/native": ">=6.0.0",
     "@react-navigation/stack": ">=6.0.0",
     "@tanstack/react-query": ">=5.0.0",
-    "@umituz/react-native-auth": "*",
-    "@umituz/react-native-design-system": "*",
-    "@umituz/react-native-localization": "*",
-    "@umituz/react-native-notifications": "*",
-    "@umituz/react-native-onboarding": "*",
-    "@umituz/react-native-sentry": "*",
-    "@umituz/react-native-storage": "*",
-    "@umituz/react-native-tanstack": "*",
+    "@umituz/react-native-auth": "latest",
+    "@umituz/react-native-design-system": "latest",
+    "@umituz/react-native-localization": "latest",
+    "@umituz/react-native-notifications": "latest",
+    "@umituz/react-native-onboarding": "latest",
+    "@umituz/react-native-sentry": "latest",
+    "@umituz/react-native-storage": "latest",
+    "@umituz/react-native-tanstack": "latest",
     "react": ">=19.0.0",
     "react-native": ">=0.81.0",
     "react-native-safe-area-context": ">=4.0.0",
@@ -67,18 +67,18 @@
     "@types/react": "~19.1.10",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
-    "@umituz/react-native-auth": "^3.2.0",
-    "@umituz/react-native-design-system": "^2.5.1",
-    "@umituz/react-native-filesystem": "^2.1.7",
-    "@umituz/react-native-firebase": "^1.13.28",
-    "@umituz/react-native-haptics": "^1.0.3",
-    "@umituz/react-native-localization": "*",
-    "@umituz/react-native-notifications": "*",
-    "@umituz/react-native-onboarding": "*",
-    "@umituz/react-native-sentry": "^1.4.2",
-    "@umituz/react-native-storage": "*",
-    "@umituz/react-native-tanstack": "*",
-    "@umituz/react-native-uuid": "^1.2.2",
+    "@umituz/react-native-auth": "latest",
+    "@umituz/react-native-design-system": "latest",
+    "@umituz/react-native-filesystem": "latest",
+    "@umituz/react-native-firebase": "latest",
+    "@umituz/react-native-haptics": "latest",
+    "@umituz/react-native-localization": "latest",
+    "@umituz/react-native-notifications": "latest",
+    "@umituz/react-native-onboarding": "latest",
+    "@umituz/react-native-sentry": "latest",
+    "@umituz/react-native-storage": "latest",
+    "@umituz/react-native-tanstack": "latest",
+    "@umituz/react-native-uuid": "latest",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-native": "^5.0.0",

package/src/domains/about/presentation/components/AboutContent.tsx

@@ -19,6 +19,7 @@ export interface AboutContentProps {
 
 const AboutSectionHeader: React.FC<{ title: string }> = ({ title }) => {
   const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
   const colors = tokens.colors;
 
   return (
@@ -30,6 +31,8 @@ export const AboutContent: React.FC<AboutContentProps> = ({
   appInfo,
   config,
 }) => {
+  const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
   const hasContactInfo = appInfo.developer || appInfo.contactEmail || appInfo.websiteUrl;
   const hasMoreInfo = appInfo.moreAppsUrl;
 
@@ -86,19 +89,19 @@ export const AboutContent: React.FC<AboutContentProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: any) => StyleSheet.create({
   content: {
-    paddingVertical: 8,
+    paddingVertical: 8 * tokens.spacingMultiplier,
   },
   section: {
-    marginBottom: 24,
+    marginBottom: 24 * tokens.spacingMultiplier,
   },
   sectionHeader: {
-    fontSize: 13,
+    fontSize: tokens.typography.labelSmall.responsiveFontSize,
     fontWeight: '600',
-    marginBottom: 8,
-    paddingHorizontal: 16,
+    marginBottom: 8 * tokens.spacingMultiplier,
+    paddingHorizontal: 16 * tokens.spacingMultiplier,
     textTransform: 'uppercase',
-    letterSpacing: 0.5,
+    letterSpacing: 0.5 * tokens.spacingMultiplier,
   },
 });

package/src/domains/about/presentation/components/AboutHeader.tsx

@@ -38,6 +38,7 @@ export const AboutHeader: React.FC<AboutHeaderProps> = ({
   testID,
 }) => {
   const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
   const colors = tokens.colors;
 
   return (
@@ -55,25 +56,25 @@ export const AboutHeader: React.FC<AboutHeaderProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: any) => StyleSheet.create({
   header: {
     alignItems: 'center',
-    paddingVertical: 24,
-    paddingHorizontal: 16,
+    paddingVertical: 24 * tokens.spacingMultiplier,
+    paddingHorizontal: 16 * tokens.spacingMultiplier,
     borderBottomWidth: 1,
   },
   appName: {
-    fontSize: 24,
+    fontSize: tokens.typography.headlineMedium.responsiveFontSize,
     fontWeight: 'bold',
-    marginBottom: 4,
+    marginBottom: 4 * tokens.spacingMultiplier,
   },
   version: {
-    fontSize: 16,
-    marginBottom: 8,
+    fontSize: tokens.typography.bodyLarge.responsiveFontSize,
+    marginBottom: 8 * tokens.spacingMultiplier,
   },
   description: {
-    fontSize: 14,
+    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
     textAlign: 'center',
-    lineHeight: 20,
+    lineHeight: 20 * tokens.spacingMultiplier,
   },
 });

package/src/domains/about/presentation/components/AboutSettingItem.tsx

@@ -64,6 +64,7 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
   chevronColor,
 }) => {
   const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
   const colors = tokens.colors;
 
   // Memoize container type to prevent unnecessary re-renders
@@ -79,7 +80,7 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
       disabled && styles.disabled,
       containerStyle
     ];
-  }, [disabled, containerStyle, colors.surface]);
+  }, [disabled, containerStyle, colors.surface, styles]);
 
   // Memoize icon container styles
   const iconContainerStyles = useMemo(() => {
@@ -87,7 +88,7 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
       styles.iconContainer,
       iconContainerStyle
     ];
-  }, [iconContainerStyle]);
+  }, [iconContainerStyle, styles]);
 
   // Memoize chevron styles
   const chevronStyles = useMemo(() => {
@@ -95,7 +96,7 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
       styles.chevron,
       { color: chevronColor || colors.textSecondary }
     ];
-  }, [chevronColor, colors.textSecondary]);
+  }, [chevronColor, colors.textSecondary, styles]);
 
   // Memoize press handler to prevent unnecessary re-renders
   const handlePress = useCallback(() => {
@@ -129,7 +130,7 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
         )}
       </View>
     );
-  }, [title, description, titleStyle, descriptionStyle, colors.textPrimary, colors.textSecondary]);
+  }, [title, description, titleStyle, descriptionStyle, colors.textPrimary, colors.textSecondary, styles]);
 
   // Memoize value rendering
   const renderValue = useMemo(() => {
@@ -140,7 +141,7 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
     return (
       <Text style={[styles.value, { color: colors.textSecondary }, valueStyle]}>{value}</Text>
     );
-  }, [value, valueStyle, colors.textSecondary]);
+  }, [value, valueStyle, colors.textSecondary, styles]);
 
   // Memoize chevron rendering
   const renderChevron = useMemo(() => {
@@ -168,18 +169,18 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: any) => StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 12,
-    paddingHorizontal: 16,
+    paddingVertical: 12 * tokens.spacingMultiplier,
+    paddingHorizontal: 16 * tokens.spacingMultiplier,
   },
   disabled: {
     opacity: 0.5,
   },
   iconContainer: {
-    marginRight: 12,
+    marginRight: 12 * tokens.spacingMultiplier,
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -187,22 +188,22 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   title: {
-    fontSize: 16,
+    fontSize: tokens.typography.bodyLarge.responsiveFontSize,
     fontWeight: '500',
   },
   description: {
-    fontSize: 14,
-    marginTop: 2,
+    fontSize: tokens.typography.bodySmall.responsiveFontSize,
+    marginTop: 2 * tokens.spacingMultiplier,
   },
   value: {
-    fontSize: 16,
-    marginRight: 8,
+    fontSize: tokens.typography.bodyLarge.responsiveFontSize,
+    marginRight: 8 * tokens.spacingMultiplier,
     flexShrink: 1,
     textAlign: 'right',
     maxWidth: '60%',
   },
   chevron: {
-    fontSize: 20,
+    fontSize: 20 * tokens.spacingMultiplier,
     fontWeight: '300',
   },
 });

package/src/domains/about/presentation/screens/AboutScreen.tsx

@@ -52,6 +52,7 @@ export const AboutScreen: React.FC<AboutScreenProps> = ({
   testID,
 }) => {
   const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
   const colors = tokens.colors;
 
   const { appInfo, loading, error } = useAboutInfo({
@@ -91,7 +92,7 @@ export const AboutScreen: React.FC<AboutScreenProps> = ({
         {footerComponent}
       </View>
     );
-  }, [footerComponent, colors.border]);
+  }, [footerComponent, colors.border, styles]);
 
   // Memoize content rendering
   const renderContent = useCallback(() => {
@@ -114,7 +115,7 @@ export const AboutScreen: React.FC<AboutScreenProps> = ({
       { backgroundColor: colors.backgroundPrimary },
       containerStyle
     ];
-  }, [containerStyle, colors.backgroundPrimary]);
+  }, [containerStyle, colors.backgroundPrimary, styles]);
 
   const texts = config.texts || {};
 
@@ -164,7 +165,7 @@ export const AboutScreen: React.FC<AboutScreenProps> = ({
     <ScrollView
       style={containerStyles}
       testID={testID}
-      contentContainerStyle={{ paddingBottom: 32 }}
+      contentContainerStyle={{ paddingBottom: 32 * tokens.spacingMultiplier }}
     >
       {renderHeader()}
       {renderContent()}
@@ -173,23 +174,23 @@ export const AboutScreen: React.FC<AboutScreenProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
+const getStyles = (tokens: any) => StyleSheet.create({
   container: {
     flex: 1,
   },
   footer: {
-    paddingVertical: 16,
-    paddingHorizontal: 16,
+    paddingVertical: 16 * tokens.spacingMultiplier,
+    paddingHorizontal: 16 * tokens.spacingMultiplier,
     borderTopWidth: 1,
   },
   loadingText: {
     textAlign: 'center',
-    fontSize: 16,
-    marginTop: 20,
+    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
+    marginTop: 20 * tokens.spacingMultiplier,
   },
   errorText: {
     textAlign: 'center',
-    fontSize: 16,
-    marginTop: 20,
+    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
+    marginTop: 20 * tokens.spacingMultiplier,
   },
 });

package/src/domains/appearance/presentation/components/AppearanceHeader.tsx

@@ -59,9 +59,9 @@ export const AppearanceHeader: React.FC<AppearanceHeaderProps> = ({
 const getStyles = (tokens: DesignTokens) =>
   StyleSheet.create({
     header: {
-      marginBottom: tokens.spacing.lg,
+      marginBottom: tokens.spacing.lg * tokens.spacingMultiplier,
     },
     headerSubtitle: {
-      marginTop: tokens.spacing.sm,
+      marginTop: tokens.spacing.sm * tokens.spacingMultiplier,
     },
   });

package/src/domains/appearance/presentation/components/AppearancePreview.tsx

@@ -106,35 +106,35 @@ export const AppearancePreview: React.FC<AppearancePreviewProps> = ({
 const getStyles = (tokens: DesignTokens) =>
   StyleSheet.create({
     previewSection: {
-      marginBottom: tokens.spacing.lg,
+      marginBottom: tokens.spacing.lg * tokens.spacingMultiplier,
     },
     sectionTitle: {
-      marginBottom: tokens.spacing.xs,
+      marginBottom: tokens.spacing.xs * tokens.spacingMultiplier,
     },
     sectionDescription: {
-      marginBottom: tokens.spacing.md,
+      marginBottom: tokens.spacing.md * tokens.spacingMultiplier,
     },
     previewContainer: {
       backgroundColor: tokens.colors.surface,
-      borderRadius: 12,
-      padding: tokens.spacing.md,
+      borderRadius: 12 * tokens.spacingMultiplier,
+      padding: tokens.spacing.md * tokens.spacingMultiplier,
       borderLeftWidth: 4,
       borderLeftColor: tokens.colors.primary,
     },
     previewColorRow: {
       flexDirection: "row",
       flexWrap: "wrap",
-      gap: tokens.spacing.md,
-      marginTop: tokens.spacing.sm,
+      gap: tokens.spacing.md * tokens.spacingMultiplier,
+      marginTop: tokens.spacing.sm * tokens.spacingMultiplier,
     },
     previewColorItem: {
       alignItems: "center",
     },
     previewColorCircle: {
-      width: 32,
-      height: 32,
-      borderRadius: 16,
-      marginBottom: tokens.spacing.xs,
+      width: 32 * tokens.spacingMultiplier,
+      height: 32 * tokens.spacingMultiplier,
+      borderRadius: 16 * tokens.spacingMultiplier,
+      marginBottom: tokens.spacing.xs * tokens.spacingMultiplier,
       borderWidth: 1,
       borderColor: tokens.colors.border,
     },

package/src/domains/appearance/presentation/components/CustomColorsSection.tsx

@@ -166,21 +166,21 @@ export const CustomColorsSection: React.FC<CustomColorsSectionProps> = ({
 const getStyles = (tokens: DesignTokens) =>
   StyleSheet.create({
     section: {
-      marginBottom: tokens.spacing.xl,
+      marginBottom: tokens.spacing.xl * tokens.spacingMultiplier,
     },
     sectionHeader: {
       flexDirection: "row",
       justifyContent: "space-between",
       alignItems: "flex-start",
-      marginBottom: tokens.spacing.md,
+      marginBottom: tokens.spacing.md * tokens.spacingMultiplier,
     },
     titleContainer: {
       flex: 1,
     },
     sectionTitle: {
-      marginBottom: tokens.spacing.xs,
+      marginBottom: tokens.spacing.xs * tokens.spacingMultiplier,
     },
     sectionDescription: {
-      marginBottom: tokens.spacing.md,
+      marginBottom: tokens.spacing.md * tokens.spacingMultiplier,
     },
   });

package/src/domains/appearance/presentation/components/ThemeModeSection.tsx

@@ -99,12 +99,12 @@ export const ThemeModeSection: React.FC<ThemeModeSectionProps> = ({
 const getStyles = (tokens: DesignTokens) =>
   StyleSheet.create({
     section: {
-      marginBottom: tokens.spacing.xl,
+      marginBottom: tokens.spacing.xl * tokens.spacingMultiplier,
     },
     sectionTitle: {
-      marginBottom: tokens.spacing.xs,
+      marginBottom: tokens.spacing.xs * tokens.spacingMultiplier,
     },
     sectionDescription: {
-      marginBottom: tokens.spacing.md,
+      marginBottom: tokens.spacing.md * tokens.spacingMultiplier,
     },
   });

package/src/domains/appearance/presentation/components/ThemeOption.tsx

@@ -41,7 +41,7 @@ export const ThemeOption: React.FC<ThemeOptionProps> = ({
     >
       <View style={styles.header}>
         <View style={styles.iconContainer}>
-          <AtomicIcon name={iconName} customSize={24} customColor={tokens.colors.primary} />
+          <AtomicIcon name={iconName} customSize={24 * tokens.spacingMultiplier} customColor={tokens.colors.primary} />
         </View>
         <View style={styles.textContainer}>
           <AtomicText type="titleLarge" color="primary">
@@ -53,7 +53,7 @@ export const ThemeOption: React.FC<ThemeOptionProps> = ({
         </View>
         <AtomicIcon
           name={isSelected ? "checkmark-circle-outline" : "ellipse-outline"}
-          customSize={24}
+          customSize={24 * tokens.spacingMultiplier}
           customColor={isSelected ? tokens.colors.primary : tokens.colors.secondary}
         />
       </View>
@@ -93,9 +93,9 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     container: {
       backgroundColor: tokens.colors.surface,
-      borderRadius: 12,
-      padding: 16,
-      marginBottom: 16,
+      borderRadius: 12 * tokens.spacingMultiplier,
+      padding: 16 * tokens.spacingMultiplier,
+      marginBottom: 16 * tokens.spacingMultiplier,
       borderWidth: 2,
       borderColor: tokens.colors.border,
     },
@@ -105,34 +105,34 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
     header: {
       flexDirection: "row",
       alignItems: "center",
-      marginBottom: 12,
+      marginBottom: 12 * tokens.spacingMultiplier,
     },
     iconContainer: {
-      width: 48,
-      height: 48,
-      borderRadius: 24,
+      width: 48 * tokens.spacingMultiplier,
+      height: 48 * tokens.spacingMultiplier,
+      borderRadius: 24 * tokens.spacingMultiplier,
       backgroundColor: `${tokens.colors.primary}15`,
       justifyContent: "center",
       alignItems: "center",
-      marginRight: 12,
+      marginRight: 12 * tokens.spacingMultiplier,
     },
     textContainer: {
       flex: 1,
     },
     description: {
-      marginBottom: 12,
-      lineHeight: 20,
+      marginBottom: 12 * tokens.spacingMultiplier,
+      lineHeight: 20 * tokens.spacingMultiplier,
     },
     featuresContainer: {
       backgroundColor: `${tokens.colors.primary}08`,
-      borderRadius: 8,
-      padding: 12,
+      borderRadius: 8 * tokens.spacingMultiplier,
+      padding: 12 * tokens.spacingMultiplier,
     },
     featuresTitle: {
-      marginBottom: 8,
+      marginBottom: 8 * tokens.spacingMultiplier,
     },
     feature: {
-      marginBottom: 4,
-      lineHeight: 18,
+      marginBottom: 4 * tokens.spacingMultiplier,
+      lineHeight: 18 * tokens.spacingMultiplier,
     },
   });

package/src/domains/appearance/presentation/screens/AppearanceScreen.tsx

@@ -221,7 +221,7 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
       flex: 1,
     },
     scrollContent: {
-      padding: tokens.spacing.md,
-      paddingBottom: tokens.spacing.xl,
+      padding: tokens.spacing.md * tokens.spacingMultiplier,
+      paddingBottom: tokens.spacing.xl * tokens.spacingMultiplier,
     },
   });

package/src/domains/disclaimer/presentation/components/DisclaimerCard.tsx

@@ -78,38 +78,38 @@ export const DisclaimerCard: React.FC<DisclaimerCardProps> = ({
 const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     container: {
-      paddingHorizontal: tokens.spacing.md,
-      paddingVertical: tokens.spacing.md,
-      marginHorizontal: tokens.spacing.md,
-      marginTop: 8,
-      marginBottom: 8,
-      borderRadius: 12,
+      paddingHorizontal: tokens.spacing.md * tokens.spacingMultiplier,
+      paddingVertical: tokens.spacing.md * tokens.spacingMultiplier,
+      marginHorizontal: tokens.spacing.md * tokens.spacingMultiplier,
+      marginTop: 8 * tokens.spacingMultiplier,
+      marginBottom: 8 * tokens.spacingMultiplier,
+      borderRadius: 12 * tokens.spacingMultiplier,
     },
 
     headerRow: {
       flexDirection: 'row',
       alignItems: 'center',
-      marginBottom: 12,
+      marginBottom: 12 * tokens.spacingMultiplier,
     },
 
     iconContainer: {
-      width: 40,
-      height: 40,
-      borderRadius: 20,
+      width: 40 * tokens.spacingMultiplier,
+      height: 40 * tokens.spacingMultiplier,
+      borderRadius: 20 * tokens.spacingMultiplier,
       alignItems: 'center',
       justifyContent: 'center',
-      marginRight: 12,
+      marginRight: 12 * tokens.spacingMultiplier,
     },
 
     title: {
       flex: 1,
       fontWeight: tokens.typography.labelLarge.fontWeight as any,
-      fontSize: tokens.typography.labelLarge.fontSize,
+      fontSize: tokens.typography.labelLarge.responsiveFontSize,
     },
 
     shortMessage: {
-      lineHeight: 18,
-      paddingLeft: 52, // Align with title (40px icon + 12px margin)
-      fontSize: 13,
+      lineHeight: 18 * tokens.spacingMultiplier,
+      paddingLeft: 52 * tokens.spacingMultiplier, // Align with title (40px icon + 12px margin)
+      fontSize: 13 * tokens.spacingMultiplier, // Or tokens.typography.bodySmall.responsiveFontSize
     },
   });

package/src/domains/disclaimer/presentation/components/DisclaimerModal.tsx

@@ -81,8 +81,8 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignItems: 'center',
-      paddingHorizontal: 20,
-      paddingVertical: 16,
+      paddingHorizontal: 20 * tokens.spacingMultiplier,
+      paddingVertical: 16 * tokens.spacingMultiplier,
       borderBottomWidth: 1,
     },
 
@@ -91,11 +91,11 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
     },
 
     modalContentContainer: {
-      padding: 20,
+      padding: 20 * tokens.spacingMultiplier,
     },
 
     modalText: {
-      lineHeight: 24,
-      fontSize: 15,
+      lineHeight: 24 * tokens.spacingMultiplier,
+      fontSize: 15 * tokens.spacingMultiplier, // or tokens.typography.bodyMedium.responsiveFontSize
     },
   });

package/src/domains/disclaimer/presentation/screens/DisclaimerScreen.tsx

@@ -68,7 +68,7 @@ export const DisclaimerScreen: React.FC<DisclaimerScreenProps> = ({
               },
             ]}
           >
-            <AtomicIcon name={iconName as any} color="warning" size="lg" />
+            <AtomicIcon name={iconName as any} color="warning" size="xl" />
           </View>
         </View>
 
@@ -95,27 +95,27 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
       flex: 1,
     },
     scrollContent: {
-      padding: tokens.spacing.lg,
-      paddingTop: tokens.spacing.xl,
+      padding: tokens.spacing.lg * tokens.spacingMultiplier,
+      paddingTop: tokens.spacing.xl * tokens.spacingMultiplier,
     },
     iconHeader: {
       alignItems: 'center',
-      marginBottom: tokens.spacing.lg,
+      marginBottom: tokens.spacing.lg * tokens.spacingMultiplier,
     },
     iconContainer: {
-      width: 72,
-      height: 72,
-      borderRadius: 36,
+      width: 72 * tokens.spacingMultiplier,
+      height: 72 * tokens.spacingMultiplier,
+      borderRadius: 36 * tokens.spacingMultiplier,
       alignItems: 'center',
       justifyContent: 'center',
       borderWidth: 2,
     },
     title: {
       textAlign: 'center',
-      marginBottom: tokens.spacing.lg,
+      marginBottom: tokens.spacing.lg * tokens.spacingMultiplier,
     },
     content: {
-      lineHeight: 24,
+      lineHeight: 24 * tokens.spacingMultiplier,
       textAlign: 'left',
     },
   });

package/src/domains/faqs/presentation/components/FAQCategory.tsx

@@ -35,11 +35,11 @@ export const FAQCategoryComponent: React.FC<FAQCategoryProps> = ({
         () =>
             StyleSheet.create({
                 container: {
-                    marginBottom: tokens.spacing.xl,
+                    marginBottom: tokens.spacing.xl * tokens.spacingMultiplier,
                 },
                 titleContainer: {
-                    marginBottom: tokens.spacing.sm,
-                    paddingHorizontal: tokens.spacing.lg,
+                    marginBottom: tokens.spacing.sm * tokens.spacingMultiplier,
+                    paddingHorizontal: tokens.spacing.lg * tokens.spacingMultiplier,
                     flexDirection: 'row',
                     alignItems: 'center',
                 },
@@ -47,7 +47,7 @@ export const FAQCategoryComponent: React.FC<FAQCategoryProps> = ({
                     flex: 1,
                     height: 1,
                     backgroundColor: tokens.colors.border,
-                    marginLeft: tokens.spacing.md,
+                    marginLeft: tokens.spacing.md * tokens.spacingMultiplier,
                 }
             }),
         [tokens]