@umituz/react-native-design-system 4.28.6 → 4.28.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.28.6",
+  "version": "4.28.7",
   "description": "Universal design system for React Native apps with safe navigation hooks - updated SKILL.md with navigation documentation",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",
@@ -148,9 +148,9 @@
       "default": "./src/utilities/index.ts"
     },
     "./utils": {
-      "types": "./dist/utils/logger.d.ts",
-      "react-native": "./src/utils/logger.ts",
-      "default": "./src/utils/logger.ts"
+      "types": "./dist/utils/index.d.ts",
+      "react-native": "./src/utils/index.ts",
+      "default": "./src/utils/index.ts"
     },
     "./hooks": {
       "types": "./dist/hooks/index.d.ts",

package/src/atoms/EmptyState.tsx

@@ -12,6 +12,8 @@ import { View, StyleSheet, TouchableOpacity, ViewStyle } from 'react-native';
 import { AtomicIcon } from './icon';
 import { AtomicText } from './AtomicText';
 import { useAppDesignTokens } from '../theme';
+import { calculateResponsiveSize } from '../utils/responsiveUtils';
+import { EMPTY_STATE_ICON } from '../constants';
 
 export interface EmptyStateProps {
   icon?: string;
@@ -38,6 +40,7 @@ export const EmptyState: React.FC<EmptyStateProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
   const displayDescription = description || subtitle;
+  const spacingMultiplier = tokens.spacingMultiplier;
 
   const themedStyles = useMemo(
     () =>
@@ -49,9 +52,9 @@ export const EmptyState: React.FC<EmptyStateProps> = ({
           padding: tokens.spacing.xl,
         },
         iconContainer: {
-          width: 120,
-          height: 120,
-          borderRadius: 60,
+          width: calculateResponsiveSize(EMPTY_STATE_ICON.width, spacingMultiplier),
+          height: calculateResponsiveSize(EMPTY_STATE_ICON.height, spacingMultiplier),
+          borderRadius: calculateResponsiveSize(EMPTY_STATE_ICON.borderRadius, spacingMultiplier),
           alignItems: 'flex-start',
           justifyContent: 'flex-start',
           marginBottom: tokens.spacing.lg,
@@ -69,7 +72,7 @@ export const EmptyState: React.FC<EmptyStateProps> = ({
           marginTop: tokens.spacing.sm,
         },
       }),
-    [tokens],
+    [tokens, spacingMultiplier],
   );
 
   return (

package/src/atoms/fab/styles/fabStyles.ts

@@ -7,27 +7,51 @@
 
 import type { ViewStyle } from 'react-native';
 import type { FabSizeConfig, FabVariantConfig } from '../types';
+import { FAB_SIZES as BASE_FAB_SIZES } from '../../../constants';
+import { calculateResponsiveSize } from '../../../utils/responsiveUtils';
 
 /**
- * FAB size configurations based on Material Design 3
- * - sm: Small FAB (40x40)
- * - md: Regular FAB (56x56) - Default
- * - lg: Large FAB (72x72)
+ * Get responsive FAB sizes based on spacing multiplier
+ * @param spacingMultiplier - Spacing multiplier from design tokens
+ * @returns Size configurations for sm, md, lg
+ */
+export function getFabSizes(spacingMultiplier: number): Record<'sm' | 'md' | 'lg', FabSizeConfig> {
+  return {
+    sm: {
+      width: calculateResponsiveSize(BASE_FAB_SIZES.sm, spacingMultiplier),
+      height: calculateResponsiveSize(BASE_FAB_SIZES.sm, spacingMultiplier),
+      borderRadius: 12,
+    },
+    md: {
+      width: calculateResponsiveSize(BASE_FAB_SIZES.md, spacingMultiplier),
+      height: calculateResponsiveSize(BASE_FAB_SIZES.md, spacingMultiplier),
+      borderRadius: 16,
+    },
+    lg: {
+      width: calculateResponsiveSize(BASE_FAB_SIZES.lg, spacingMultiplier),
+      height: calculateResponsiveSize(BASE_FAB_SIZES.lg, spacingMultiplier),
+      borderRadius: 20,
+    },
+  };
+}
+
+/**
+ * @deprecated Use getFabSizes(spacingMultiplier) instead
  */
 export const FAB_SIZES: Record<'sm' | 'md' | 'lg', FabSizeConfig> = {
   sm: {
-    width: 40,
-    height: 40,
+    width: BASE_FAB_SIZES.sm,
+    height: BASE_FAB_SIZES.sm,
     borderRadius: 12,
   },
   md: {
-    width: 56,
-    height: 56,
+    width: BASE_FAB_SIZES.md,
+    height: BASE_FAB_SIZES.md,
     borderRadius: 16,
   },
   lg: {
-    width: 72,
-    height: 72,
+    width: BASE_FAB_SIZES.lg,
+    height: BASE_FAB_SIZES.lg,
     borderRadius: 20,
   },
 } as const;

package/src/atoms/skeleton/AtomicSkeleton.tsx

@@ -27,6 +27,7 @@ import { View, StyleSheet, type StyleProp, type ViewStyle, type DimensionValue }
 import { useAppDesignTokens } from '../../theme';
 import type { SkeletonPattern, SkeletonConfig } from './AtomicSkeleton.types';
 import { SKELETON_PATTERNS } from './AtomicSkeleton.types';
+import { createMappedArray } from '../../utils/arrayUtils';
 
 export interface AtomicSkeletonProps {
   /** Skeleton pattern preset */
@@ -92,7 +93,7 @@ export const AtomicSkeleton: React.FC<AtomicSkeletonProps> = ({
 
   return (
     <View style={[styles.container, style]} testID={testID}>
-      {Array.from({ length: count }).map((_, index) => renderSkeletonItem(index))}
+      {createMappedArray(count, (index) => renderSkeletonItem(index))}
     </View>
   );
 };

package/src/carousel/CarouselDots.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "../theme";
 import type { CarouselDotsProps } from "./types";
+import { createMappedArray } from "../utils/arrayUtils";
 
 const CarouselDotsComponent: React.FC<CarouselDotsProps> = ({
   count,
@@ -20,7 +21,7 @@ const CarouselDotsComponent: React.FC<CarouselDotsProps> = ({
 
   return (
     <View style={styles.container}>
-      {Array.from({ length: count }).map((_, index) => (
+      {createMappedArray(count, (index) => (
         <View
           key={index}
           style={[

package/src/constants/index.ts

@@ -0,0 +1,221 @@
+/**
+ * Centralized Design System Constants
+ *
+ * All base size configurations for components.
+ * Prevents file proliferation and makes maintenance easier.
+ */
+
+// ============= AVATAR & ICONS =============
+export const AVATAR_SIZES = {
+  xs: { size: 24, fontSize: 10, iconSize: 12, statusSize: 6, borderWidth: 1 },
+  sm: { size: 32, fontSize: 12, iconSize: 16, statusSize: 8, borderWidth: 1.5 },
+  md: { size: 40, fontSize: 14, iconSize: 20, statusSize: 10, borderWidth: 2 },
+  lg: { size: 56, fontSize: 18, iconSize: 28, statusSize: 12, borderWidth: 2 },
+  xl: { size: 80, fontSize: 24, iconSize: 40, statusSize: 16, borderWidth: 2.5 },
+  xxl: { size: 120, fontSize: 36, iconSize: 60, statusSize: 20, borderWidth: 3 },
+} as const;
+
+export const ICON_SIZES = {
+  tiny: 16,
+  xs: 24,
+  sm: 28,
+  md: 32,
+  lg: 40,
+  xl: 56,
+  xxl: 80,
+} as const;
+
+// ============= BUTTONS =============
+export const BUTTON_SIZES = {
+  sm: { paddingVertical: 8, paddingHorizontal: 14, fontSize: 10, iconSize: 16, minHeight: 32 },
+  md: { paddingVertical: 14, paddingHorizontal: 20, fontSize: 16, iconSize: 20, minHeight: 44 },
+  lg: { paddingVertical: 16, paddingHorizontal: 24, fontSize: 18, iconSize: 24, minHeight: 52 },
+} as const;
+
+export const FAB_SIZE = 56;
+
+// ============= INPUTS =============
+export const INPUT_SIZES = {
+  sm: { paddingVertical: 8, paddingHorizontal: 12, fontSize: 12, iconSize: 16, minHeight: 40 },
+  md: { paddingVertical: 12, paddingHorizontal: 16, fontSize: 16, iconSize: 20, minHeight: 48 },
+  lg: { paddingVertical: 16, paddingHorizontal: 20, fontSize: 18, iconSize: 24, minHeight: 56 },
+} as const;
+
+// ============= CARDS & CONTAINERS =============
+export const CARD_SIZES = {
+  padding: 16,
+  borderRadius: 12,
+  elevation: 2,
+} as const;
+
+export const MODAL_SIZES = {
+  maxWidth: 360,
+  padding: 28,
+  overlayPadding: 24,
+} as const;
+
+export const BOTTOM_SHEET_HANDLE = {
+  width: 40,
+  height: 4,
+  borderRadius: 2,
+} as const;
+
+// ============= LISTS & GRIDS =============
+export const LIST_ITEM = {
+  minHeight: 56,
+  paddingVertical: 12,
+  paddingHorizontal: 16,
+} as const;
+
+export const INFO_GRID_ICONS = {
+  small: 28,
+  large: 32,
+} as const;
+
+// ============= NAVIGATION =============
+export const NAVIGATION = {
+  backButton: { width: 40, height: 40 },
+  tabBar: { height: 60 },
+  headerHeight: 60,
+} as const;
+
+// ============= TYPOGRAPHY =============
+export const FONT_SIZES = {
+  labelSmall: 10,
+  bodySmall: 12,
+  bodyMedium: 16,
+  bodyLarge: 18,
+  titleSmall: 20,
+  titleMedium: 24,
+  titleLarge: 28,
+  headlineSmall: 32,
+  headlineMedium: 36,
+  displaySmall: 40,
+  displayLarge: 48,
+} as const;
+
+export const COUNTDOWN_SIZES = {
+  small: { fontSize: 24, minHeight: 70 },
+  medium: { fontSize: 32, minHeight: 90 },
+  large: { fontSize: 40, minHeight: 110 },
+} as const;
+
+// ============= HERO & EMPTY STATES =============
+export const HERO_ICON = {
+  width: 120,
+  height: 120,
+  borderRadius: 60,
+} as const;
+
+export const EMPTY_STATE_ICON = {
+  width: 120,
+  height: 120,
+  borderRadius: 60,
+} as const;
+
+export const ALERT_MODAL_ICON = {
+  width: 76,
+  height: 76,
+  borderRadius: 38,
+  marginBottom: 20,
+} as const;
+
+// ============= SPACING =============
+export const SPACING = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  xxl: 24,
+} as const;
+
+// ============= STEP INDICATORS =============
+export const STEP_INDICATOR = {
+  dot: { width: 8, height: 8, borderRadius: 4, marginHorizontal: 4 },
+  progressBar: { height: 4, borderRadius: 2 },
+  stepHeader: { marginBottom: 32, paddingHorizontal: 24 },
+  title: 28,
+  subtitle: 16,
+} as const;
+
+// ============= DIVIDERS =============
+export const DIVIDER_SIZES = {
+  none: 0,
+  small: 8,
+  medium: 16,
+  large: 24,
+} as const;
+
+// ============= MISC =============
+export const MISC_SIZES = {
+  searchIcon: 32,
+  searchInputHeight: 48,
+  searchBorderRadius: 24,
+  searchPadding: 2,
+  swipeButtonMinWidth: 80,
+  splashMinHeight: 40,
+  countdownIcon: 36,
+} as const;
+
+// ============= AVATAR COLORS =============
+export const AVATAR_COLORS = [
+  '#7E57C2', // Purple
+  '#42A5F5', // Blue
+  '#66BB6A', // Green
+  '#FFA726', // Orange
+  '#EF5350', // Red
+  '#26C6DA', // Cyan
+  '#AB47BC', // Deep Purple
+  '#FF7043', // Deep Orange
+] as const;
+
+export const STATUS_COLORS = {
+  online: '#4CAF50',
+  offline: '#9E9E9E',
+  away: '#FFC107',
+  busy: '#F44336',
+} as const;
+
+export const SHAPE_CONFIGS = {
+  rounded: 8,
+  squared: 0,
+  square: 0,
+} as const;
+
+// ============= FAB =============
+export const FAB_SIZES = {
+  sm: 40,
+  md: 56,
+  lg: 72,
+} as const;
+
+// ============= CALENDAR =============
+export const CALENDAR = {
+  dayPadding: 16,
+  dayNamePadding: 4,
+  selectedBorderWidth: 4,
+  borderRadius: 12,
+  borderRadiusSm: 8,
+  borderRadiusXs: 2,
+  dayNameFontSize: 8,
+} as const;
+
+// ============= CONFIRMATION MODAL =============
+export const CONFIRMATION_MODAL = {
+  padding: 24,
+  borderRadius: 16,
+  width: '85%',
+} as const;
+
+// ============= ICON GRID =============
+export const ICON_GRID = {
+  borderRadius: 24,
+  fontSize: 11,
+} as const;
+
+// ============= COUNTDOWN =============
+export const COUNTDOWN_TOGGLE = {
+  size: 36,
+  borderRadius: 18,
+} as const;

package/src/media/infrastructure/utils/mediaPickerMappers.ts

@@ -55,7 +55,7 @@ export const mapPickerResult = (
     return { canceled: true };
   }
 
-  const assets: MediaAsset[] = result.assets.map((asset: ImagePicker.ImagePickerAsset) => ({
+  const assets: MediaAsset[] = (result.assets ?? []).map((asset: ImagePicker.ImagePickerAsset) => ({
     uri: asset.uri,
     width: asset.width,
     height: asset.height,

package/src/media/infrastructure/utils/url-media-detector.ts

@@ -6,7 +6,7 @@ const AUDIO_EXTENSIONS = [".mp3", ".wav", ".ogg", ".m4a", ".aac", ".flac"];
 
 function getExtensionFromUrl(url: string): string | null {
   if (!url) return null;
-  const urlWithoutParams = url.toLowerCase().split("?")[0]!;
+  const urlWithoutParams = url.toLowerCase().split("?")[0];
   const lastDotIndex = urlWithoutParams.lastIndexOf(".");
   if (lastDotIndex === -1) return null;
   return urlWithoutParams.substring(lastDotIndex);

package/src/molecules/SearchBar/SearchBar.tsx

@@ -9,6 +9,8 @@ import { useAppDesignTokens } from '../../theme';
 import { AtomicIcon, useIconName } from '../../atoms';
 import { AtomicSpinner } from '../../atoms/AtomicSpinner';
 import type { SearchBarProps } from './types';
+import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { MISC_SIZES } from '../../constants';
 
 export const SearchBar: React.FC<SearchBarProps> = ({
     value,
@@ -38,6 +40,8 @@ export const SearchBar: React.FC<SearchBarProps> = ({
 
     const showClear = value.length > 0 && !loading;
 
+    const spacingMultiplier = tokens.spacingMultiplier;
+
     return (
         <View
             style={[
@@ -45,15 +49,15 @@ export const SearchBar: React.FC<SearchBarProps> = ({
                 {
                     backgroundColor: tokens.colors.surfaceVariant,
                     borderColor: tokens.colors.border,
-                    height: 48 * tokens.spacingMultiplier,
-                    paddingHorizontal: 12 * tokens.spacingMultiplier,
-                    borderRadius: 24 * tokens.spacingMultiplier,
+                    height: calculateResponsiveSize(MISC_SIZES.searchInputHeight, spacingMultiplier),
+                    paddingHorizontal: calculateResponsiveSize(tokens.spacing.md, spacingMultiplier),
+                    borderRadius: calculateResponsiveSize(MISC_SIZES.searchBorderRadius, spacingMultiplier),
                 },
                 containerStyle,
             ]}
             testID={testID}
         >
-            <View style={styles.iconContainer}>
+            <View style={styles.searchIcon}>
                 <AtomicIcon
                     name={searchIcon}
                     size="md"
@@ -118,14 +122,8 @@ const styles = StyleSheet.create({
     container: {
         flexDirection: 'row',
         alignItems: 'center',
-        paddingHorizontal: 12, // Will be scaled by parent if needed, or we rely on token usage elsewhere
-        height: 48, // Should be dynamic ideally, but keeping simple for now
-        borderRadius: 24,
         borderWidth: 1,
     },
-    iconContainer: {
-        marginRight: 8,
-    },
     input: {
         flex: 1,
         height: '100%',
@@ -142,4 +140,10 @@ const styles = StyleSheet.create({
     clearButton: {
         padding: 2,
     },
+    searchIcon: {
+        width: 32,
+        height: 32,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
 });

package/src/molecules/SearchBar/SearchHistory.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
     View,
     TouchableOpacity,
@@ -23,6 +23,45 @@ export const SearchHistory: React.FC<SearchHistoryProps> = ({
     const clockIcon = useIconName('clock');
     const closeIcon = useIconName('close');
 
+    const styles = useMemo(() => StyleSheet.create({
+        container: {
+            paddingVertical: tokens.spacing.sm,
+        },
+        header: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingHorizontal: tokens.spacing.lg,
+            paddingVertical: tokens.spacing.sm,
+            marginBottom: tokens.spacing.xs,
+        },
+        clearButton: {
+            paddingVertical: tokens.spacing.xs,
+            paddingHorizontal: tokens.spacing.sm,
+        },
+        item: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingHorizontal: tokens.spacing.lg,
+            paddingVertical: tokens.spacing.md,
+            minHeight: 48,
+        },
+        itemLeft: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            flex: 1,
+            marginRight: tokens.spacing.md,
+        },
+        itemText: {
+            marginLeft: tokens.spacing.md,
+            flex: 1,
+        },
+        removeButton: {
+            padding: tokens.spacing.xs,
+        },
+    }), [tokens]);
+
     if (!history || history.length === 0) {
         return null;
     }
@@ -94,42 +133,3 @@ export const SearchHistory: React.FC<SearchHistoryProps> = ({
         </View>
     );
 };
-
-const styles = StyleSheet.create({
-    container: {
-        paddingVertical: 8,
-    },
-    header: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-        marginBottom: 4,
-    },
-    clearButton: {
-        paddingVertical: 4,
-        paddingHorizontal: 8,
-    },
-    item: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 16,
-        paddingVertical: 12,
-        minHeight: 48,
-    },
-    itemLeft: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        flex: 1,
-        marginRight: 12,
-    },
-    itemText: {
-        marginLeft: 12,
-        flex: 1,
-    },
-    removeButton: {
-        padding: 4,
-    },
-});

package/src/molecules/SearchBar/SearchSuggestions.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
     View,
     TouchableOpacity,
@@ -19,6 +19,19 @@ export function SearchSuggestions<T>({
 }: SearchSuggestionsProps<T>) {
     const tokens = useAppDesignTokens();
 
+    const styles = useMemo(() => StyleSheet.create({
+        container: {
+            borderRadius: tokens.borders.radius.lg,
+            overflow: 'hidden',
+        },
+        item: {
+            paddingHorizontal: tokens.spacing.lg,
+            paddingVertical: tokens.spacing.md,
+            minHeight: 48,
+            justifyContent: 'center',
+        },
+    }), [tokens]);
+
     if (!query.trim() && !emptyComponent) {
         return null;
     }
@@ -58,19 +71,6 @@ export function SearchSuggestions<T>({
     );
 }
 
-const styles = StyleSheet.create({
-    container: {
-        borderRadius: 12,
-        overflow: 'hidden',
-    },
-    item: {
-        paddingHorizontal: 16,
-        paddingVertical: 12,
-        minHeight: 48,
-        justifyContent: 'center',
-    },
-});
-
 /**
  * Default suggestion renderer (simple text with highlighting)
  */

package/src/molecules/StepHeader/StepHeader.tsx

@@ -13,12 +13,20 @@ import {
   calculateResponsiveSize,
   calculateLineHeight,
 } from "../../utils/responsiveUtils";
-import {
-  BASE_FONT_SIZES,
-  BASE_SPACING,
-  BASE_STEP_DOT_SIZES,
-  DEFAULT_CONFIG,
-} from "./StepHeader.constants";
+import { SPACING, STEP_INDICATOR } from "../../constants";
+
+const DEFAULT_CONFIG: StepHeaderConfig = {
+  showStepIndicator: false,
+  currentStep: 1,
+  totalSteps: 3,
+  titleAlignment: "left",
+  titleFontSize: undefined,
+  subtitleFontSize: undefined,
+  spacing: {
+    marginBottom: 32,
+    paddingHorizontal: 24,
+  },
+};
 
 export interface StepHeaderConfig {
   showStepIndicator?: boolean;
@@ -43,7 +51,7 @@ export interface StepHeaderProps {
 export const StepHeader: React.FC<StepHeaderProps> = ({
   title,
   subtitle,
-  config = DEFAULT_CONFIG,
+  config,
   style,
 }) => {
   const tokens = useAppDesignTokens();
@@ -55,24 +63,24 @@ export const StepHeader: React.FC<StepHeaderProps> = ({
       StyleSheet.create({
         container: {
           paddingHorizontal: calculateResponsiveSize(
-            cfg.spacing?.paddingHorizontal ?? BASE_SPACING.paddingHorizontal,
+            cfg.spacing?.paddingHorizontal ?? SPACING.xl,
             spacingMultiplier
           ),
           marginBottom: calculateResponsiveSize(
-            cfg.spacing?.marginBottom ?? BASE_SPACING.marginBottom,
+            cfg.spacing?.marginBottom ?? 32,
             spacingMultiplier
           ),
         },
         stepIndicator: {
           flexDirection: "row",
           alignItems: "center",
-          marginBottom: calculateResponsiveSize(BASE_SPACING.stepIndicatorMarginBottom, spacingMultiplier),
+          marginBottom: tokens.spacing.md,
         },
         stepDot: {
-          width: calculateResponsiveSize(BASE_STEP_DOT_SIZES.width, spacingMultiplier),
-          height: calculateResponsiveSize(BASE_STEP_DOT_SIZES.height, spacingMultiplier),
-          borderRadius: calculateResponsiveSize(BASE_STEP_DOT_SIZES.borderRadius, spacingMultiplier),
-          marginHorizontal: calculateResponsiveSize(BASE_STEP_DOT_SIZES.marginHorizontal, spacingMultiplier),
+          width: calculateResponsiveSize(STEP_INDICATOR.dot.width, spacingMultiplier),
+          height: calculateResponsiveSize(STEP_INDICATOR.dot.height, spacingMultiplier),
+          borderRadius: calculateResponsiveSize(STEP_INDICATOR.dot.borderRadius, spacingMultiplier),
+          marginHorizontal: calculateResponsiveSize(STEP_INDICATOR.dot.marginHorizontal, spacingMultiplier),
         },
         activeDot: {
           backgroundColor: tokens.colors.primary,
@@ -81,19 +89,19 @@ export const StepHeader: React.FC<StepHeaderProps> = ({
           backgroundColor: `${tokens.colors.primary}30`,
         },
         title: {
-          fontSize: calculateResponsiveSize(cfg.titleFontSize ?? BASE_FONT_SIZES.title, spacingMultiplier),
+          fontSize: calculateResponsiveSize(cfg.titleFontSize ?? STEP_INDICATOR.title, spacingMultiplier),
           fontWeight: "900",
           color: tokens.colors.textPrimary,
           textAlign: cfg.titleAlignment,
-          marginBottom: subtitle ? calculateResponsiveSize(BASE_SPACING.titleMarginBottom, spacingMultiplier) : 0,
+          marginBottom: subtitle ? calculateResponsiveSize(STEP_INDICATOR.subtitle, spacingMultiplier) : 0,
           letterSpacing: 0.3,
         },
         subtitle: {
-          fontSize: calculateResponsiveSize(cfg.subtitleFontSize ?? BASE_FONT_SIZES.subtitle, spacingMultiplier),
+          fontSize: calculateResponsiveSize(cfg.subtitleFontSize ?? STEP_INDICATOR.subtitle, spacingMultiplier),
           fontWeight: "500",
           color: tokens.colors.textSecondary,
           textAlign: cfg.titleAlignment,
-          lineHeight: calculateLineHeight(cfg.subtitleFontSize ?? BASE_FONT_SIZES.subtitle, spacingMultiplier),
+          lineHeight: calculateLineHeight(cfg.subtitleFontSize ?? STEP_INDICATOR.subtitle, spacingMultiplier),
           opacity: 0.9,
         },
       }),