@xetwa/design-system 1.0.39 → 1.0.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xetwa/design-system",
-  "version": "1.0.39",
+  "version": "1.0.41",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/components/Buttons/WordChipIcon/WordChipIcon.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { WordChipIcon } from './WordChipIcon';
+import { Calendar, Bell } from 'lucide-react';
+import React from 'react';
+
+const meta = {
+  title: 'Components/Buttons/WordChipIcon',
+  component: WordChipIcon,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'O **WordChipIcon** é um WordChip que permite renderizar um ícone no lado esquerdo ou direito.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    word: { control: 'text' },
+    iconPosition: {
+      control: 'radio',
+      options: ['left', 'right'],
+    },
+    state: {
+      control: 'select',
+      options: ['default', 'selected', 'correct', 'wrong', 'used'],
+    },
+    disabled: { control: 'boolean' },
+    fullWidth: { control: 'boolean' },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+  },
+} satisfies Meta<typeof WordChipIcon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    word: 'Calendário',
+    icon: <Calendar size={20} color="#cf7a30" />,
+    iconPosition: 'left',
+    state: 'default',
+  },
+};
+
+export const RightIcon: Story = {
+  args: {
+    word: 'Lembrete',
+    icon: <Bell size={20} color="#cf7a30" />,
+    iconPosition: 'right',
+    state: 'default',
+  },
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap', maxWidth: '600px' }}>
+      <WordChipIcon word="Calendário" icon={<Calendar size={20} color="#cf7a30" />} state="default" />
+      <WordChipIcon word="Lembrete" icon={<Bell size={20} color="#cf7a30" />} state="selected" />
+      <WordChipIcon word="Alarme" icon={<Bell size={20} color="#cf7a30" />} state="correct" />
+      <WordChipIcon word="Erro" icon={<Calendar size={20} color="#cf7a30" />} state="wrong" />
+      <WordChipIcon word="Usado" icon={<Calendar size={20} color="#cf7a30" />} state="used" />
+    </div>
+  ),
+};

package/src/components/Buttons/WordChipIcon/WordChipIcon.tsx

@@ -0,0 +1,186 @@
+import { useState, useEffect, useRef } from 'react';
+import { View, StyleSheet, Pressable, Animated } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { theme } from '../../../styles/theme';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { Typography } from '../../Typography/Typography';
+import type { WordChipState } from '../WordChip/WordChip';
+
+export interface WordChipIconProps {
+  /** A palavra ou texto a apresentar. */
+  word: string;
+  /** O ícone a ser renderizado. */
+  icon: React.ReactNode;
+  /** A posição do ícone. Padrão: 'left' */
+  iconPosition?: 'left' | 'right';
+  /** Estado atual do chip. */
+  state?: WordChipState;
+  /** Função disparada ao clicar. */
+  onPress?: () => void;
+  /** Estilos adicionais para o container. */
+  style?: ViewStyle | ViewStyle[];
+  /** Impede cliques. */
+  disabled?: boolean;
+  /** Se verdadeiro, ocupa a largura total disponível. */
+  fullWidth?: boolean;
+  /** Tamanho do chip. */
+  size?: 'sm' | 'md' | 'lg';
+  /** Largura personalizada. Ignora max-width e align-self flex-start. */
+  width?: number | string;
+}
+
+export const WordChipIcon = ({
+  word,
+  icon,
+  iconPosition = 'left',
+  state = 'default',
+  onPress,
+  style,
+  disabled = false,
+  fullWidth = false,
+  size = 'md',
+  width,
+}: WordChipIconProps) => {
+  const { scale } = useResponsive();
+  const [isPressed, setIsPressed] = useState(false);
+  const scaleAnim = useRef(new Animated.Value(state === 'selected' ? 0.96 : 1)).current;
+
+  // Animação ao entrar na resposta (bounce) quando o estado passa a 'selected'
+  useEffect(() => {
+    if (state === 'selected') {
+      scaleAnim.setValue(0.96);
+      Animated.spring(scaleAnim, {
+        toValue: 1,
+        friction: 4,
+        tension: 100,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      scaleAnim.setValue(1);
+    }
+  }, [state, scaleAnim]);
+
+  const getStateStyles = () => {
+    switch (state) {
+      case 'selected':
+        return {
+          bg: theme.colors.primaryLight,
+          border: theme.colors.primary,
+          shadow: 'rgba(242, 151, 75, 0.25)',
+          text: theme.colors.brown[800],
+        };
+      case 'correct':
+        return {
+          bg: '#eafaf2',
+          border: theme.colors.success,
+          shadow: 'rgba(22, 145, 90, 0.2)',
+          text: theme.colors.success,
+        };
+      case 'wrong':
+        return {
+          bg: '#fdf0ee',
+          border: theme.colors.error,
+          shadow: 'rgba(207, 91, 72, 0.2)',
+          text: theme.colors.error,
+        };
+      case 'used':
+        return {
+          bg: theme.colors.white,
+          border: theme.colors.brown[100],
+          shadow: theme.colors.brown[100],
+          text: theme.colors.brown[300],
+        };
+      case 'default':
+      default:
+        return {
+          bg: theme.colors.white,
+          border: theme.colors.brown[100],
+          shadow: theme.colors.brown[100],
+          text: theme.colors.brown[800],
+        };
+    }
+  };
+
+  const currentStyles = getStateStyles();
+  const isDisabled = disabled || state === 'used';
+  
+  // Press state visual adjustments
+  const showPressed = isPressed && !isDisabled;
+
+  const getTypographyVariant = () => {
+    switch (size) {
+      case 'lg': return 'btnLg';
+      case 'sm': return 'bodyMd';
+      case 'md':
+      default: return 'bodyLg';
+    }
+  };
+
+  return (
+    <Animated.View style={[{ transform: [{ scale: scaleAnim }] }, width ? { width } : null, style]}>
+      <Pressable
+        onPressIn={() => setIsPressed(true)}
+        onPressOut={() => setIsPressed(false)}
+        onPress={onPress}
+        disabled={isDisabled}
+        style={{ alignSelf: width ? 'stretch' : (fullWidth ? 'stretch' : 'flex-start') }}
+      >
+        <View style={[
+          styles.shadowContainer,
+          { 
+            backgroundColor: currentStyles.shadow,
+            borderRadius: scale(12),
+            paddingBottom: showPressed ? 0 : scale(3),
+            marginTop: showPressed ? scale(3) : 0,
+          },
+          (fullWidth || width) ? { alignSelf: 'stretch', width: '100%' } : null
+        ]}>
+          <View style={[
+            styles.innerContainer,
+            {
+              backgroundColor: currentStyles.bg,
+              borderColor: currentStyles.border,
+              borderRadius: scale(12),
+              paddingVertical: scale(size === 'lg' ? 14 : size === 'sm' ? 6 : 9),
+              paddingHorizontal: scale(size === 'lg' ? 20 : size === 'sm' ? 10 : 14),
+              minHeight: scale(size === 'lg' ? 56 : size === 'sm' ? 36 : 44),
+            },
+            (fullWidth || width) ? { width: '100%' } : null
+          ]}>
+            <View style={[
+              styles.contentRow,
+              { flexDirection: iconPosition === 'right' ? 'row-reverse' : 'row' }
+            ]}>
+              {icon}
+              <Typography variant={getTypographyVariant()} style={[
+                styles.text,
+                { color: currentStyles.text }
+              ]}>
+                {word}
+              </Typography>
+            </View>
+          </View>
+        </View>
+      </Pressable>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  shadowContainer: {
+    alignSelf: 'flex-start',
+  },
+  innerContainer: {
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  contentRow: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  text: {
+    textAlign: 'center',
+  },
+});

package/src/components/Buttons/WordChipIcon/index.ts

@@ -0,0 +1 @@
+export * from './WordChipIcon';

package/src/components/Cards/BaseCard/BaseCard.tsx

@@ -1,9 +1,9 @@
 import type { ReactNode } from 'react';
-import { View, Pressable } from 'react-native';
-import type { ViewStyle, DimensionValue } from 'react-native';
+import type { DimensionValue, ViewStyle } from 'react-native';
+import { Pressable, View } from 'react-native';
 import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';
-import { theme } from '../../../styles/theme';
 import { useResponsive } from '../../../hooks/useResponsive';
+import { theme } from '../../../styles/theme';
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
@@ -15,41 +15,41 @@ const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 export interface BaseCardProps {
   /** O conteúdo a ser renderizado dentro do cartão. */
   children?: ReactNode;
-  
+
   /** Variante de estilo do cartão */
   variant?: 'default' | 'soft';
-  
+
   // Container styling
   backgroundColor?: string;
   borderRadius?: number;
   borderWidth?: number;
   borderColor?: string;
   borderStyle?: 'solid' | 'dashed';
-  
+
   // Padding & Layout
   padding?: number;
   paddingVertical?: number;
   paddingHorizontal?: number;
-  
+
   // Sizing
   width?: DimensionValue;
   height?: DimensionValue;
   minHeight?: DimensionValue;
-  
+
   // Shadow presets: 'none' | 'sm' | 'md' | 'lg'
   shadow?: 'none' | 'sm' | 'md' | 'lg';
   shadowColor?: string;
-  
+
   // Interactive / Pressable behavior
   onPress?: () => void;
   disabled?: boolean;
-  
+
   // Selection state
   isSelected?: boolean;
   selectedBorderColor?: string;
   selectedBackgroundColor?: string;
   selectedShadowColor?: string;
-  
+
   // Opacity & other styles
   opacity?: number;
   overflow?: 'visible' | 'hidden';
@@ -107,12 +107,12 @@ export const BaseCard = ({
   const activeBorderWidth = isSelected ? 2 : borderWidth;
   const activeShadow = isSelected
     ? {
-        shadowColor: selectedShadowColor || '#f2974b',
-        shadowOffset: { width: 0, height: scale(4) },
-        shadowOpacity: 0.14,
-        shadowRadius: scale(14),
-        elevation: 4,
-      }
+      shadowColor: selectedShadowColor || '#f2974b',
+      shadowOffset: { width: 0, height: scale(4) },
+      shadowOpacity: 0.14,
+      shadowRadius: scale(14),
+      elevation: 4,
+    }
     : getShadowStyle();
 
   // Consolidate static card styles with responsive scaling

package/src/components/Cards/BoardingPassCard/BoardingPassCard.tsx

@@ -132,17 +132,17 @@ export const BoardingPassCard = ({
       styles.container,
       {
         borderRadius: scale(20),
-        minHeight: scale(210),
+        minHeight: scale(240),
       },
       style
     ]}>
       {/* Top Section */}
       <View style={[
-        styles.topSection, 
-        { 
+        styles.topSection,
+        {
           backgroundColor: currentHeaderBg,
-          paddingTop: scale(16),
-          paddingBottom: scale(16),
+          paddingTop: scale(24),
+          paddingBottom: scale(24),
           paddingHorizontal: scale(18),
         }
       ]}>
@@ -158,7 +158,7 @@ export const BoardingPassCard = ({
         ]} />
 
         <View style={[styles.headerRow, { marginBottom: scale(16) }]}>
-          <Typography variant="caption" style={[styles.headerText]}>CARTÃO DE EMBARQUE</Typography>
+          <Typography variant="labelHeavy" style={[styles.headerText]}>CARTÃO DE EMBARQUE</Typography>
           <View style={styles.headerPlaneContainer}>
             <Plane stroke={theme.colors.white} strokeWidth={2.2} size={scale(22)} />
           </View>
@@ -166,8 +166,8 @@ export const BoardingPassCard = ({
 
         <View style={styles.routeRow}>
           <View style={styles.cityCol}>
-            <Typography variant="h1" style={[styles.cityCode]}>{originCode}</Typography>
-            <Typography variant="caption" style={[styles.cityName]}>{originName}</Typography>
+            <Typography variant="display2" style={[styles.cityCode]}>{originCode}</Typography>
+            <Typography variant="small" style={[styles.cityName]}>{originName}</Typography>
           </View>
 
           <View style={[styles.flightLineContainer, { height: scale(30), marginHorizontal: scale(12) }]}>
@@ -178,8 +178,8 @@ export const BoardingPassCard = ({
           </View>
 
           <View style={[styles.cityCol, { alignItems: 'flex-end' }]}>
-            <Typography variant="h1" style={[styles.cityCode]}>{destCode}</Typography>
-            <Typography variant="caption" style={[styles.cityName]}>{destName}</Typography>
+            <Typography variant="display2" style={[styles.cityCode]}>{destCode}</Typography>
+            <Typography variant="small" style={[styles.cityName]}>{destName}</Typography>
           </View>
         </View>
       </View>
@@ -188,7 +188,7 @@ export const BoardingPassCard = ({
       <View style={[
         styles.bottomSection,
         {
-          paddingVertical: scale(14),
+          paddingVertical: scale(20),
           paddingHorizontal: scale(18),
         }
       ]}>
@@ -205,8 +205,8 @@ export const BoardingPassCard = ({
             {flagIconNode ? flagIconNode : <Flag countryCode={countryName} size={scale(40)} />}
           </View>
           <View style={styles.countryContent}>
-            <Typography variant="h2" style={[styles.countryName]}>{countryName}</Typography>
-            <Typography variant="bodySm" style={[styles.countrySubtitle]}>{countrySubtitle}</Typography>
+            <Typography variant="subtitle1" style={[styles.countryName]}>{countryName}</Typography>
+            <Typography variant="label" style={[styles.countrySubtitle]}>{countrySubtitle}</Typography>
           </View>
         </View>
 
@@ -220,12 +220,12 @@ export const BoardingPassCard = ({
 
         <View style={[styles.footerRow, { gap: scale(14) }]}>
           <View style={styles.footerCol}>
-            <Typography variant="caption" style={[styles.footerLabel]}>MÓDULOS</Typography>
-            <Typography variant="h3" style={[styles.footerValue]}>{modulesCount}</Typography>
+            <Typography variant="labelHeavy" style={[styles.footerLabel]}>MÓDULOS</Typography>
+            <Typography variant="subtitle1" style={[styles.footerValue]}>{modulesCount}</Typography>
           </View>
           <View style={styles.footerCol}>
-            <Typography variant="caption" style={[styles.footerLabel]}>FOCO</Typography>
-            <Typography variant="h3" style={[styles.footerValue]}>{focusText}</Typography>
+            <Typography variant="labelHeavy" style={[styles.footerLabel]}>FOCO</Typography>
+            <Typography variant="subtitle1" style={[styles.footerValue]}>{focusText}</Typography>
           </View>
         </View>
       </View>
@@ -241,6 +241,10 @@ const styles = StyleSheet.create({
     minHeight: 230,
     ...theme.shadows.lg,
   },
+  headerText: {
+    color: theme.colors.white,
+    opacity: 0.9,
+  },
   topSection: {
     paddingTop: 16,
     paddingBottom: 16,
@@ -266,11 +270,6 @@ const styles = StyleSheet.create({
   headerPlaneContainer: {
     transform: [{ rotate: '0deg' }],
   },
-  headerText: {
-    letterSpacing: 1.2,
-    textTransform: 'uppercase',
-    color: 'rgba(255, 255, 255, 0.75)',
-  },
   routeRow: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -345,6 +344,10 @@ const styles = StyleSheet.create({
   countrySubtitle: {
     color: '#9a8478',
   },
+  footerLabel: {
+    color: theme.colors.brown[500],
+    marginBottom: 4,
+  },
   divider: {
     borderTopWidth: 1.5,
     borderColor: '#f3e7da',

package/src/components/Cards/ModuleCard/ModuleCard.stories.tsx

@@ -16,7 +16,7 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {
-    status: { control: 'radio', options: ['active', 'locked', 'completed', 'dark', 'active-dark'] },
+    status: { control: 'radio', options: ['active', 'locked', 'completed', 'dark', 'active-dark', 'completed-dark'] },
     number: { control: 'number' },
     title: { control: 'text' },
     subtitle: { control: 'text' },
@@ -101,6 +101,18 @@ export const Completed: Story = {
   },
 };
 
+export const CompletedDark: Story = {
+  args: {
+    status: 'completed-dark',
+    number: 1,
+    title: 'Saudações & teranga (Dark)',
+    subtitle: 'Concluído',
+    subtext: '• 5/5',
+    onReviewPress: () => console.log('Rever módulo'),
+    onNextCountryPress: () => console.log('Ir para próximo país'),
+  },
+};
+
 export const Grid: Story = {
   args: {
     status: 'active',
@@ -153,6 +165,13 @@ export const Grid: Story = {
         tagLabel="POR FAZER"
         onExamPress={() => {}}
       />
+      <ModuleCard 
+        status="completed-dark" 
+        number={4}
+        title="Módulo Concluído Dark" 
+        subtitle="Concluído" 
+        subtext="• 5/5"
+      />
     </View>
   ),
 };

package/src/components/Cards/ModuleCard/ModuleCard.tsx

@@ -9,7 +9,7 @@ import { useResponsive } from '../../../hooks/useResponsive';
 import { Typography } from '../../Typography/Typography';
 import React, { useRef } from 'react';
 
-export type ModuleCardStatus = 'active' | 'locked' | 'completed' | 'dark' | 'active-dark';
+export type ModuleCardStatus = 'active' | 'locked' | 'completed' | 'dark' | 'active-dark' | 'completed-dark';
 
 /**
  * Cartão que representa uma lição ou módulo no caminho de aprendizagem.
@@ -17,7 +17,7 @@ export type ModuleCardStatus = 'active' | 'locked' | 'completed' | 'dark' | 'act
  * Regras de Animação e Clique:
  * - `active`: O cartão como um todo tem animação de escala e é clicável via `onPress`.
  * - `active-dark`: O cartão é estático. Apenas os botões internos de "Agendar" (`onSchedulePress`), "Exame" (`onExamPress`) e "Rever" (`onReviewPress`) têm animação individual quando fornecidos.
- * - `completed`: O cartão é estático. Apenas o ícone/botão superior direito de "Rever" (`onReviewPress`) tem animação individual.
+ * - `completed` / `completed-dark`: O cartão é estático. Apenas o ícone/botão superior direito de "Rever" (`onReviewPress`) tem animação individual.
  * - `locked` / `dark`: O cartão não é interativo.
  */
 export interface ModuleCardProps {
@@ -51,6 +51,10 @@ export interface ModuleCardProps {
   onExamPress?: () => void;
   /** Função de clique no botão de Rever (modo completed/active/dark). */
   onReviewPress?: () => void;
+  /** Função de clique no botão de Ir para o Próximo País (modo completed-dark). */
+  onNextCountryPress?: () => void;
+  /** Label do botão de próximo país. Padrão: "Seguir Viagem". */
+  nextCountryLabel?: string;
 }
 
 export const ModuleCard = ({
@@ -70,6 +74,8 @@ export const ModuleCard = ({
   onSchedulePress,
   onExamPress,
   onReviewPress,
+  onNextCountryPress,
+  nextCountryLabel = 'Seguir Viagem',
 }: ModuleCardProps) => {
   const { scale, scaleText, width } = useResponsive();
   const isMobileScreen = width < 400;
@@ -78,6 +84,7 @@ export const ModuleCard = ({
   const examScale = useRef(new Animated.Value(1)).current;
   const reviewScale = useRef(new Animated.Value(1)).current;
   const completedReviewScale = useRef(new Animated.Value(1)).current;
+  const nextCountryScale = useRef(new Animated.Value(1)).current;
   const scaleAnim = useRef(new Animated.Value(1)).current;
 
   const handlePressIn = () => {
@@ -139,6 +146,7 @@ export const ModuleCard = ({
         };
       case 'dark':
       case 'active-dark':
+      case 'completed-dark':
         return {
           borderColor: theme.colors.brown[800],
           borderWidth: 0,
@@ -155,6 +163,7 @@ export const ModuleCard = ({
         return theme.colors.brown[400];
       case 'dark':
       case 'active-dark':
+      case 'completed-dark':
         return theme.colors.white;
       default:
         return theme.colors.brown[800];
@@ -163,7 +172,7 @@ export const ModuleCard = ({
 
   const containerStyle = getContainerStyle();
   const titleStyleColor = getTextColor();
-  const subtitleStyleColor = subtitleColor || (status === 'completed' ? theme.colors.success : status === 'locked' || status === 'dark' || status === 'active-dark' ? theme.colors.brown[300] : theme.colors.brown[500]);
+  const subtitleStyleColor = subtitleColor || (status === 'completed' || status === 'completed-dark' ? theme.colors.success : status === 'locked' || status === 'dark' || status === 'active-dark' ? theme.colors.brown[300] : theme.colors.brown[500]);
 
   const activeShadow = status === 'active' ? {
     shadowColor: theme.colors.primary,
@@ -184,7 +193,7 @@ export const ModuleCard = ({
         />
       );
     }
-    if (status === 'completed') {
+    if (status === 'completed' || status === 'completed-dark') {
       const checkSize = isMobileScreen ? scale(16) : scale(22);
       return (
         <Badge
@@ -226,9 +235,8 @@ export const ModuleCard = ({
   const cardPaddingV = size === 'xl' ? scale(20) : size === 'lg' ? scale(16) : isMobileScreen ? scale(10) : scale(14);
   const cardPaddingH = size === 'xl' ? scale(20) : size === 'lg' ? scale(18) : isMobileScreen ? scale(12) : scale(15);
   
-  const titleVariant = size === 'xl' ? 'h1' : size === 'lg' ? 'h2' : 'h3';
-
-  const subtitleVariant = size === 'xl' ? 'bodyLg' : size === 'lg' ? 'bodyMd' : 'bodySm';
+  const titleVariant = size === 'xl' ? 'h4' : size === 'lg' ? 'h6' : 'subtitle1';
+  const subtitleVariant = size === 'xl' ? 'bodySm' : size === 'lg' ? 'caption' : 'label';
 
 
 
@@ -294,9 +302,24 @@ export const ModuleCard = ({
           )}
         </View>
 
-        {(status === 'locked' || status === 'dark' || status === 'completed') && (
+        {(status === 'locked' || status === 'dark' || status === 'completed' || status === 'completed-dark') && (
           <View style={[styles.rightContent, { marginLeft: colGap }]}>
-            {status === 'completed' && (
+            {status === 'completed-dark' && onNextCountryPress ? (
+              <Animated.View style={{ transform: [{ scale: nextCountryScale }] }}>
+                <Pressable 
+                  onPress={onNextCountryPress}
+                  onPressIn={() => animateBtnIn(nextCountryScale)}
+                  onPressOut={() => animateBtnOut(nextCountryScale)}
+                  hitSlop={10}
+                >
+                  <Tag
+                    label={nextCountryLabel}
+                    variant="success"
+                    size={isMobileScreen ? 'xs' : 'sm'}
+                  />
+                </Pressable>
+              </Animated.View>
+            ) : (status === 'completed' || status === 'completed-dark') ? (
               <Animated.View style={{ transform: [{ scale: completedReviewScale }] }}>
                 <Pressable 
                   style={styles.reviewIconButton} 
@@ -306,10 +329,10 @@ export const ModuleCard = ({
                   hitSlop={10}
                 >
                   <RotateCcw stroke={theme.colors.primary} strokeWidth={2.5} size={isMobileScreen ? scale(20) : scale(24)} />
-                  <Typography variant="label" style={[styles.reviewIconText, { fontSize: scaleText(9) }]}>REVER</Typography>
+                  <Typography variant="smallHeavy" style={[styles.reviewIconText, { fontSize: scaleText(9) }]}>REVER</Typography>
                 </Pressable>
               </Animated.View>
-            )}
+            ) : null}
             {(status === 'locked' || status === 'dark') && (
               <Lock
                 stroke={status === 'dark' ? 'rgba(255,255,255,0.4)' : '#c3b1a4'}
@@ -344,7 +367,7 @@ export const ModuleCard = ({
                   style={{ flexDirection: 'row', alignItems: 'center', backgroundColor: theme.colors.primary, paddingHorizontal: scale(14), paddingVertical: scale(6), borderRadius: 100 }}
                 >
                   <CalendarPlus stroke={theme.colors.white} strokeWidth={2.5} size={scale(14)} />
-                  <Typography variant="label" style={{ color: theme.colors.white, fontSize: scaleText(12), fontWeight: 'bold', marginLeft: scale(6) }}>Agendar Aula</Typography>
+                  <Typography variant="bodySmHeavy" style={{ color: theme.colors.white, marginLeft: scale(6) }}>Agendar Aula</Typography>
                 </Pressable>
               </Animated.View>
             )}
@@ -359,7 +382,7 @@ export const ModuleCard = ({
                   style={{ flexDirection: 'row', alignItems: 'center', backgroundColor: theme.colors.primary, paddingHorizontal: scale(14), paddingVertical: scale(6), borderRadius: 100 }}
                 >
                   <PenTool stroke={theme.colors.white} strokeWidth={2.5} size={scale(14)} />
-                  <Typography variant="label" style={{ color: theme.colors.white, fontSize: scaleText(12), fontWeight: 'bold', marginLeft: scale(6) }}>Fazer Exame</Typography>
+                  <Typography variant="bodySmHeavy" style={{ color: theme.colors.white, marginLeft: scale(6) }}>Fazer Exame</Typography>
                 </Pressable>
               </Animated.View>
             )}
@@ -375,7 +398,7 @@ export const ModuleCard = ({
                 hitSlop={8}
               >
                 <RotateCcw stroke={theme.colors.primary} strokeWidth={2.5} size={scale(16)} />
-                <Typography variant="label" style={[styles.reviewIconText, { color: theme.colors.primary, fontSize: scaleText(10), marginLeft: scale(4), marginTop: 0 }]}>REVER</Typography>
+                <Typography variant="smallHeavy" style={[styles.reviewIconText, { color: theme.colors.primary, marginLeft: scale(4), marginTop: 0 }]}>REVER</Typography>
               </Pressable>
             </Animated.View>
           )}