decathlon-ui 0.1.2 → 0.1.4

package/dist/components/action-button/index.d.ts

@@ -0,0 +1,3 @@
+export { ActionButton } from "./action-button.component";
+export type { ActionButtonProps } from "./action-button.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/action-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/action-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/action-button/index.js

@@ -0,0 +1 @@
+export { ActionButton } from "./action-button.component";

package/dist/components/badge/badge.component.d.ts

@@ -0,0 +1,7 @@
+import type { BadgeProps } from "./badge.types";
+/**
+ * Badge - Componente para exibição de etiquetas ou marcadores
+ * Suporta ícones SVG
+ */
+export declare const Badge: ({ text, variant, size, style, textStyle, icon, iconPosition, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=badge.component.d.ts.map

package/dist/components/badge/badge.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.component.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.component.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,KAAK,GAAI,gEAQnB,UAAU,4CA6CZ,CAAC"}

package/dist/components/badge/badge.component.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, View } from "react-native";
+import { useBadgeStyles } from "./badge.styles";
+/**
+ * Badge - Componente para exibição de etiquetas ou marcadores
+ * Suporta ícones SVG
+ */
+export const Badge = ({ text, variant = "default", size = "medium", style, textStyle, icon, iconPosition = "left", }) => {
+    const styles = useBadgeStyles(variant, size);
+    const renderIcon = () => {
+        if (!icon) {
+            return null;
+        }
+        return _jsx(View, { style: styles.iconContainer, children: icon });
+    };
+    // Determina os estilos de tamanho do texto com base no parâmetro size
+    const getSizeStyle = () => {
+        switch (size) {
+            case "small":
+                return styles.small;
+            case "large":
+                return styles.large;
+            case "medium":
+            default:
+                return styles.medium;
+        }
+    };
+    return (_jsxs(View, { style: [styles.container, styles[variant], style], children: [icon && iconPosition === "left" && renderIcon(), _jsx(Text, { style: [
+                    styles.text,
+                    getSizeStyle(),
+                    styles[variant],
+                    textStyle
+                ], children: text }), icon && iconPosition === "right" && renderIcon()] }));
+};

package/dist/components/badge/badge.styles.d.ts

@@ -0,0 +1,54 @@
+import type { BadgeSize, BadgeVariant } from "./badge.types";
+export declare const useBadgeStyles: (variant?: BadgeVariant, size?: BadgeSize) => {
+    container: {
+        padding: 6;
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+        gap: 8;
+    };
+    text: {
+        color: "#101010";
+    };
+    medium: {
+        fontFamily: "Inter-Medium";
+        fontSize: number;
+        lineHeight: number;
+        letterSpacing: number;
+    };
+    small: {
+        fontFamily: "Inter-Regular";
+        fontSize: number;
+        lineHeight: number;
+        letterSpacing: number;
+    };
+    large: {
+        fontFamily: "Inter-Medium";
+        fontSize: number;
+        lineHeight: number;
+        letterSpacing: number;
+    };
+    iconContainer: {
+        height: number;
+        width: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    default: {
+        backgroundColor: "#3643BA";
+        color: "#FFFFFF";
+    };
+    black: {
+        backgroundColor: string;
+        color: "#FFFFFF";
+    };
+    discount: {
+        backgroundColor: "#FFCD4E";
+        color: string;
+    };
+    cashback: {
+        backgroundColor: "#7AFFA6";
+        color: "#101010";
+    };
+};
+//# sourceMappingURL=badge.styles.d.ts.map

package/dist/components/badge/badge.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.styles.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAM7D,eAAO,MAAM,cAAc,GACzB,UAAS,YAAwB,EACjC,OAAM,SAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiE3B,CAAC"}

package/dist/components/badge/badge.styles.js

@@ -0,0 +1,63 @@
+import { useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { useTheme } from "../../themes";
+export const useBadgeStyles = (variant = "default", size = "medium") => {
+    const theme = useTheme();
+    return useMemo(() => StyleSheet.create({
+        container: {
+            padding: theme.spacing.xxs2,
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: theme.spacing.xs,
+        },
+        text: {
+            color: theme.colors.textPrimary,
+        },
+        // Estilos de tamanho
+        medium: {
+            fontFamily: theme.fonts.inter.medium,
+            fontSize: 12,
+            lineHeight: 18, // 150% de 12px
+            letterSpacing: 0,
+        },
+        small: {
+            fontFamily: theme.fonts.inter.regular,
+            fontSize: 10,
+            lineHeight: 10, // 100% de 10px
+            letterSpacing: 0,
+        },
+        large: {
+            fontFamily: theme.fonts.inter.medium,
+            fontSize: 14,
+            lineHeight: 20, // 143% de 14px
+            letterSpacing: 0,
+        },
+        iconContainer: {
+            height: size === "small" ? 12 : size === "large" ? 20 : 16,
+            width: size === "small" ? 12 : size === "large" ? 20 : 16,
+            alignItems: "center",
+            justifyContent: "center",
+        },
+        // Variante padrão
+        default: {
+            backgroundColor: theme.colors.backgroundAction1,
+            color: theme.colors.white,
+        },
+        // Variante black
+        black: {
+            backgroundColor: "#000000",
+            color: theme.colors.white,
+        },
+        // Variante discount
+        discount: {
+            backgroundColor: theme.colors.secondary,
+            color: "#000000",
+        },
+        // Variante cashback
+        cashback: {
+            backgroundColor: theme.colors.backgroundMint3,
+            color: theme.colors.black,
+        },
+    }), [theme, size]);
+};

package/dist/components/badge/badge.types.d.ts

@@ -0,0 +1,37 @@
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
+import { ReactNode } from "react";
+export type BadgeVariant = "default" | "black" | "discount" | "cashback";
+export type BadgeSize = "small" | "medium" | "large";
+export type IconPosition = "left" | "right";
+export interface BadgeProps {
+    /**
+     * O texto exibido no badge
+     */
+    text: string;
+    /**
+     * Variante de cor do badge
+     */
+    variant?: BadgeVariant;
+    /**
+     * Tamanho do badge
+     */
+    size?: BadgeSize;
+    /**
+     * Estilos personalizados para o container do badge
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Estilos personalizados para o texto do badge
+     */
+    textStyle?: StyleProp<TextStyle>;
+    /**
+     * Ícone SVG a ser exibido junto com o texto do badge
+     */
+    icon?: ReactNode;
+    /**
+     * Posição do ícone em relação ao texto
+     * @default 'left'
+     */
+    iconPosition?: IconPosition;
+}
+//# sourceMappingURL=badge.types.d.ts.map

package/dist/components/badge/badge.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.types.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE/D,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC;AAEzE,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5C,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAEjC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B"}

package/dist/components/badge/badge.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/badge/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./badge.component";
+export * from "./badge.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/badge/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC"}

package/dist/components/badge/index.js

@@ -0,0 +1,2 @@
+export * from "./badge.component";
+export * from "./badge.types";

package/dist/components/card/card.component.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { CardProps } from "./card.types";
+export declare const Card: React.FC<CardProps>;
+//# sourceMappingURL=card.component.d.ts.map

package/dist/components/card/card.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.component.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA4EpC,CAAC"}

package/dist/components/card/card.component.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, TouchableOpacity, View } from "react-native";
+import { ChevronRightIcon } from "../../icons";
+import { useTheme } from "../../themes";
+import { useCardStyles } from "./card.styles";
+export const Card = ({ children, title, subtitle, icon, actionIcon, onPress, disabled = false, style, titleStyle, subtitleStyle, testID, }) => {
+    const styles = useCardStyles();
+    const { colors } = useTheme();
+    const renderIcon = () => {
+        if (!icon)
+            return null;
+        return _jsx(View, { style: styles.iconContainer, children: icon });
+    };
+    const renderTitle = () => {
+        if (!title)
+            return null;
+        if (typeof title === "string") {
+            return _jsx(Text, { style: [styles.title, titleStyle], children: title });
+        }
+        return title;
+    };
+    const renderSubtitle = () => {
+        if (!subtitle)
+            return null;
+        if (typeof subtitle === "string") {
+            return _jsx(Text, { style: [styles.subtitle, subtitleStyle], children: subtitle });
+        }
+        return subtitle;
+    };
+    const renderActionIcon = () => {
+        if (actionIcon) {
+            return _jsx(View, { style: styles.actionIconContainer, children: actionIcon });
+        }
+        if (onPress) {
+            return (_jsx(View, { style: styles.actionIconContainer, children: _jsx(ChevronRightIcon, { size: 20, color: colors.textTertiary }) }));
+        }
+        return null;
+    };
+    const CardContainer = onPress ? TouchableOpacity : View;
+    const containerProps = onPress
+        ? {
+            onPress,
+            disabled,
+            activeOpacity: 0.7,
+            accessibilityRole: "button",
+        }
+        : {};
+    return (_jsxs(CardContainer, { style: [styles.container, disabled && styles.disabled, style], testID: testID, ...containerProps, children: [renderIcon(), _jsxs(View, { style: styles.contentContainer, children: [renderTitle(), renderSubtitle(), children] }), renderActionIcon()] }));
+};

package/dist/components/card/card.styles.d.ts

@@ -0,0 +1,42 @@
+export declare const useCardStyles: () => {
+    container: {
+        width: "100%";
+        height: number;
+        gap: number;
+        borderWidth: number;
+        paddingHorizontal: 24;
+        paddingVertical: 21;
+        borderColor: "#D9DDE1";
+        backgroundColor: "#FFFFFF";
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    contentContainer: {
+        flex: number;
+        justifyContent: "center";
+        gap: number;
+    };
+    iconContainer: {
+        marginRight: 12;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    actionIconContainer: {
+        marginLeft: 12;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    title: {
+        fontSize: number;
+        fontWeight: "500";
+        color: "#101010";
+    };
+    subtitle: {
+        fontSize: number;
+        color: "#383838";
+    };
+    disabled: {
+        opacity: number;
+    };
+};
+//# sourceMappingURL=card.styles.d.ts.map

package/dist/components/card/card.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDzB,CAAC"}

package/dist/components/card/card.styles.js

@@ -0,0 +1,47 @@
+import { useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { useTheme } from "../../themes";
+export const useCardStyles = () => {
+    const { colors, spacing } = useTheme();
+    return useMemo(() => StyleSheet.create({
+        container: {
+            width: "100%",
+            height: 105,
+            gap: 8,
+            borderWidth: 1,
+            paddingHorizontal: spacing.lg,
+            paddingVertical: spacing.mmd,
+            borderColor: colors.borderSecondary,
+            backgroundColor: colors.backgroundPage,
+            flexDirection: "row",
+            alignItems: "center",
+        },
+        contentContainer: {
+            flex: 1,
+            justifyContent: "center",
+            gap: 6,
+        },
+        iconContainer: {
+            marginRight: spacing.sm,
+            justifyContent: "center",
+            alignItems: "center",
+        },
+        actionIconContainer: {
+            marginLeft: spacing.sm,
+            justifyContent: "center",
+            alignItems: "center",
+        },
+        title: {
+            fontSize: 16,
+            fontWeight: "500",
+            color: colors.textPrimary,
+        },
+        subtitle: {
+            fontSize: 14,
+            color: colors.textSecondary,
+        },
+        disabled: {
+            opacity: 0.6,
+        },
+    }), [colors, spacing]);
+};

package/dist/components/card/card.types.d.ts

@@ -0,0 +1,50 @@
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
+import { ReactNode } from "react";
+export interface CardProps {
+    /**
+     * Conteúdo do card
+     */
+    children: ReactNode;
+    /**
+     * Título do card (opcional)
+     */
+    title?: string | ReactNode;
+    /**
+     * Subtítulo do card (opcional)
+     */
+    subtitle?: string | ReactNode;
+    /**
+     * Ícone do card (opcional)
+     */
+    icon?: ReactNode;
+    /**
+     * Ícone que indica ação (e.g., seta para direita) no final do card (opcional)
+     */
+    actionIcon?: ReactNode;
+    /**
+     * Callback quando o card é pressionado
+     */
+    onPress?: () => void;
+    /**
+     * Se o card está desabilitado
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Estilo customizado para o container do card
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Estilo customizado para o título
+     */
+    titleStyle?: StyleProp<TextStyle>;
+    /**
+     * Estilo customizado para o subtítulo
+     */
+    subtitleStyle?: StyleProp<TextStyle>;
+    /**
+     * ID para testes
+     */
+    testID?: string;
+}
+//# sourceMappingURL=card.types.d.ts.map

package/dist/components/card/card.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.types.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE/D,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE3B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAElC;;OAEG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAErC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/components/card/card.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/card/index.d.ts

@@ -0,0 +1,3 @@
+export { Card } from "./card.component";
+export type { CardProps } from "./card.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,YAAY,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/card/index.js

@@ -0,0 +1 @@
+export { Card } from "./card.component";

package/dist/components/cashback-banner/cashback-banner.component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { CashbackBannerProps } from './cashback-banner.types';
+export declare const CashbackBanner: React.FC<CashbackBannerProps>;
+//# sourceMappingURL=cashback-banner.component.d.ts.map

package/dist/components/cashback-banner/cashback-banner.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cashback-banner.component.d.ts","sourceRoot":"","sources":["../../../src/components/cashback-banner/cashback-banner.component.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAiDnE,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgIxD,CAAC"}

package/dist/components/cashback-banner/cashback-banner.component.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, Text, TouchableOpacity, View } from 'react-native';
+import { useCashbackBannerStyles } from './cashback-banner.styles';
+/**
+ * Helper para processar texto com destaque usando %s
+ * Ex: "Você tem %sR$14,32%s de cashback disponível!"
+ * Retorna um array de elementos para renderizar
+ */
+const processHighlightedText = (text, normalStyle, highlightedStyle) => {
+    if (!text || !text.includes('%s')) {
+        return [_jsx(Text, { style: normalStyle, children: text }, "single-text")];
+    }
+    const parts = text.split('%s');
+    const result = [];
+    if (parts.length < 3) {
+        // Se não tiver pelo menos dois marcadores %s, retorna o texto normal
+        return [_jsx(Text, { style: normalStyle, children: text }, "incomplete-text")];
+    }
+    // Adicionar partes antes do destaque
+    if (parts[0]) {
+        result.push(_jsx(Text, { style: normalStyle, children: parts[0] }, "pre-highlight"));
+    }
+    // Adicionar parte destacada - combina os estilos para manter as props do texto normal
+    // exceto pela cor que vem do highlightedStyle
+    const combinedStyle = [normalStyle, highlightedStyle];
+    result.push(_jsx(Text, { style: combinedStyle, children: parts[1] }, "highlight"));
+    // Adicionar partes após o destaque
+    if (parts[2]) {
+        result.push(_jsx(Text, { style: normalStyle, children: parts[2] }, "post-highlight"));
+    }
+    // Se tiver mais partes (caso improvavelmente tenha mais de 2 %s), adiciona tudo como texto normal
+    for (let i = 3; i < parts.length; i++) {
+        if (parts[i]) {
+            result.push(_jsx(Text, { style: normalStyle, children: parts[i] }, `extra-${i}`));
+        }
+    }
+    return result;
+};
+export const CashbackBanner = ({ variant = 'default', text, subText, buttonText, link, onButtonPress, onUnderstandPress, style, textStyle, subTextStyle, highlightedTextStyle, buttonStyle, buttonTextStyle, ...rest }) => {
+    const styles = useCashbackBannerStyles(variant);
+    const renderButton = () => {
+        return (_jsx(Pressable, { style: [styles.button, buttonStyle], onPress: onButtonPress, accessibilityRole: "button", accessibilityLabel: buttonText, children: _jsxs(View, { style: styles.row, children: [processHighlightedText(buttonText, [styles.buttonText, buttonTextStyle], [styles.highlightedText, highlightedTextStyle]), link && _jsx(Text, { style: [styles.buttonText, styles.arrowIcon], children: "\u2192" })] }) }));
+    };
+    const renderValueVariant = () => {
+        return (_jsx(View, { style: [styles.container, style], ...rest, children: _jsxs(View, { style: styles.textContainer, children: [_jsx(View, { style: styles.row, children: processHighlightedText(text, [styles.text, textStyle], [styles.highlightedText, highlightedTextStyle]) }), _jsxs(View, { style: [styles.row, { gap: 4, alignItems: 'center' }], children: [subText && (_jsx(View, { style: styles.row, children: processHighlightedText(subText, [styles.subText, subTextStyle], [styles.highlightedText, highlightedTextStyle]) })), onUnderstandPress && (_jsx(TouchableOpacity, { onPress: onUnderstandPress, accessibilityRole: "button", children: _jsx(Text, { style: styles.link, children: "Entendi" }) }))] })] }) }));
+    };
+    const renderDefaultVariant = () => {
+        return (_jsxs(View, { style: [styles.container, style], ...rest, children: [_jsxs(View, { style: styles.textContainer, children: [_jsx(View, { style: styles.row, children: processHighlightedText(text, [styles.text, textStyle], [styles.highlightedText, highlightedTextStyle]) }), subText && (_jsx(View, { style: styles.row, children: processHighlightedText(subText, [styles.subText, subTextStyle], [styles.highlightedText, highlightedTextStyle]) }))] }), renderButton()] }));
+    };
+    const renderBlackFridayVariant = () => {
+        return (_jsxs(View, { style: [styles.container, style], ...rest, children: [_jsx(View, { style: styles.row, children: processHighlightedText(text, [styles.text, textStyle], [styles.highlightedText, highlightedTextStyle]) }), subText && (_jsx(Pressable, { style: styles.row, onPress: onButtonPress, children: processHighlightedText(subText, [styles.subText, subTextStyle], [styles.highlightedText, highlightedTextStyle]) }))] }));
+    };
+    // Escolher o layout de acordo com a variante
+    switch (variant) {
+        case 'value':
+            return renderValueVariant();
+        case 'blackFriday':
+            return renderBlackFridayVariant();
+        default:
+            return renderDefaultVariant();
+    }
+};