decathlon-ui 0.3.0 → 0.3.2

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC"}

package/dist/components/index.js

@@ -9,6 +9,7 @@ export * from "./category-item/index";
 export * from "./checkbox/index";
 export * from "./event-card/index";
 export * from "./filter-chip/index";
+export * from "./information-card/index";
 export * from "./input/index";
 export * from "./loading/index";
 export * from "./order-card/index";
@@ -20,6 +21,7 @@ export * from "./quick-add-product-card/index";
 export * from "./radio/index";
 export * from "./range-slider/index";
 export * from "./search-button/index";
+export * from "./select/index";
 export * from "./seller-box/index";
 export * from "./toggle-switch/index";
 export * from "./typography/index";

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/information-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/components/information-card/index.js

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

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { InformationCardProps } from './information-card.types';
+export declare const InformationCard: React.NamedExoticComponent<InformationCardProps>;
+//# sourceMappingURL=information-card.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"information-card.component.d.ts","sourceRoot":"","sources":["../../../src/components/information-card/information-card.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAgFrE,eAAO,MAAM,eAAe,kDAAuC,CAAC"}

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Text, View } from 'react-native';
+import { useInformationCardStyles } from './information-card.styles';
+/**
+ * Helper para processar texto com destaque usando %s
+ * Ex: "Vales e %scartão presente%s:"
+ * 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;
+};
+const InformationCardComponent = ({ title, description, style, titleStyle, descriptionStyle, highlightedTextStyle, ...rest }) => {
+    const styles = useInformationCardStyles();
+    return (_jsxs(View, { style: [styles.container, style], ...rest, children: [_jsx(View, { style: { flexDirection: 'row', flexWrap: 'wrap' }, children: processHighlightedText(title, [styles.title, titleStyle], [styles.highlightedText, highlightedTextStyle]) }), _jsx(View, { style: { flexDirection: 'row', flexWrap: 'wrap' }, children: processHighlightedText(description, [styles.description, descriptionStyle], [styles.highlightedText, highlightedTextStyle]) })] }));
+};
+export const InformationCard = React.memo(InformationCardComponent);
+InformationCard.displayName = "InformationCard";

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

@@ -0,0 +1,30 @@
+export declare const useInformationCardStyles: () => {
+    container: {
+        backgroundColor: "#EFF1F3";
+        paddingHorizontal: 8;
+        paddingVertical: 16;
+    };
+    title: {
+        fontFamily: "Inter-SemiBold";
+        fontWeight: "600";
+        fontStyle: "normal";
+        fontSize: 12;
+        lineHeight: number;
+        letterSpacing: number;
+        color: "#101010";
+        marginBottom: 4;
+    };
+    description: {
+        fontFamily: "Inter-Regular";
+        fontWeight: "400";
+        fontStyle: "normal";
+        fontSize: 12;
+        lineHeight: number;
+        letterSpacing: number;
+        color: "#101010";
+    };
+    highlightedText: {
+        color: "#DB6900";
+    };
+};
+//# sourceMappingURL=information-card.styles.d.ts.map

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

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

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

@@ -0,0 +1,37 @@
+import { useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { useTheme } from "../../themes";
+export const useInformationCardStyles = () => {
+    const theme = useTheme();
+    return useMemo(() => {
+        return StyleSheet.create({
+            container: {
+                backgroundColor: theme.colors.backgroundAction2,
+                paddingHorizontal: theme.spacing.xs, // 12px
+                paddingVertical: theme.spacing.md, // 16px
+            },
+            title: {
+                fontFamily: theme.fonts.inter.semiBold,
+                fontWeight: "600",
+                fontStyle: "normal",
+                fontSize: theme.fonts.sizes.xxs, // 12px
+                lineHeight: 18,
+                letterSpacing: 0,
+                color: theme.colors.textPrimary,
+                marginBottom: theme.spacing.xxs, // 4px para espaçamento entre título e descrição
+            },
+            description: {
+                fontFamily: theme.fonts.inter.regular,
+                fontWeight: "400",
+                fontStyle: "normal",
+                fontSize: theme.fonts.sizes.xxs, // 12px
+                lineHeight: 18,
+                letterSpacing: 0,
+                color: theme.colors.textPrimary,
+            },
+            highlightedText: {
+                color: theme.colors.textHighlight, // Cor de destaque
+            },
+        });
+    }, [theme]);
+};

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

@@ -0,0 +1,32 @@
+import { TextStyle, ViewStyle } from "react-native";
+export interface InformationCardProps {
+    /**
+     * Título do card
+     * Use %s para indicar partes a serem destacadas
+     * Ex: "Vales e %scartão presente%s:"
+     */
+    title: string;
+    /**
+     * Descrição/subtítulo do card
+     * Use %s para indicar partes a serem destacadas
+     * Ex: "Caso tenha um %svale-compra%s ou cartão presente, você poderá inseri-lo na etapa de pagamento."
+     */
+    description: string;
+    /**
+     * Estilo do container
+     */
+    style?: ViewStyle;
+    /**
+     * Estilo do título
+     */
+    titleStyle?: TextStyle;
+    /**
+     * Estilo da descrição
+     */
+    descriptionStyle?: TextStyle;
+    /**
+     * Estilo do texto destacado com %s
+     */
+    highlightedTextStyle?: TextStyle;
+}
+//# sourceMappingURL=information-card.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"information-card.types.d.ts","sourceRoot":"","sources":["../../../src/components/information-card/information-card.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,WAAW,oBAAoB;IACnC;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;OAEG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAE7B;;OAEG;IACH,oBAAoB,CAAC,EAAE,SAAS,CAAC;CAClC"}

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

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

package/dist/components/input/error-message/error-message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"error-message.d.ts","sourceRoot":"","sources":["../../../../src/components/input/error-message/error-message.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,UAAU,iBAAiB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAoBpD,CAAC"}
+{"version":3,"file":"error-message.d.ts","sourceRoot":"","sources":["../../../../src/components/input/error-message/error-message.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,UAAU,iBAAiB;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA+CpD,CAAC"}

package/dist/components/input/error-message/error-message.js

@@ -1,30 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StyleSheet, Text, View } from "react-native";
+import { useTheme } from "../../../themes";
+import { ErrorWarningIcon } from "../../../icons";
 export const ErrorMessage = ({ message, testID, }) => {
-    return (_jsxs(View, { style: styles.container, testID: testID, accessibilityRole: "alert", accessible: true, children: [_jsx(View, { style: styles.iconContainer, children: _jsx(Text, { children: "!" }) }), _jsx(Text, { style: styles.message, accessibilityRole: "text", children: message })] }));
+    const theme = useTheme();
+    const styles = StyleSheet.create({
+        container: {
+            display: "flex",
+            width: "100%",
+            paddingVertical: theme.spacing.xxs,
+            paddingHorizontal: theme.spacing.xxs,
+            flexDirection: "row",
+            alignItems: "center",
+            gap: theme.spacing.xxs,
+        },
+        iconContainer: {
+            paddingTop: 5,
+            width: 18,
+        },
+        icon: {
+            width: 16,
+            height: 16,
+        },
+        message: {
+            flex: 1,
+            color: theme.colors.textError,
+            fontSize: theme.fonts.sizes.xs,
+            fontFamily: theme.fonts.inter.regular,
+        },
+    });
+    return (_jsxs(View, { style: styles.container, testID: testID, accessibilityRole: "alert", accessible: true, children: [_jsx(View, { style: styles.iconContainer, children: _jsx(ErrorWarningIcon, { stroke: theme.colors.borderError, size: 18 }) }), _jsx(Text, { style: styles.message, accessibilityRole: "text", children: message })] }));
 };
-const styles = StyleSheet.create({
-    container: {
-        display: "flex",
-        width: "100%",
-        paddingVertical: 4,
-        paddingHorizontal: 4,
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 4,
-    },
-    iconContainer: {
-        paddingTop: 2,
-        width: 16,
-    },
-    icon: {
-        width: 16,
-        height: 16,
-    },
-    message: {
-        flex: 1,
-        color: "#CC212A",
-        fontSize: 14,
-        fontFamily: "Inter",
-    },
-});

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

@@ -1,6 +1,7 @@
 import * as React from "react";
+import { TextInputProps } from "react-native";
 type MaskType = "cpf" | "phone" | "date" | "cep" | "custom";
-interface InputProps {
+interface InputProps extends TextInputProps {
     label: string;
     placeholder?: string;
     error?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"input.component.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE5D,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAyKD,eAAO,MAAM,KAAK,wCAA6B,CAAC"}
+{"version":3,"file":"input.component.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAA6B,cAAc,EAAQ,MAAM,cAAc,CAAC;AAK/E,KAAK,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE5D,UAAU,UAAW,SAAQ,cAAc;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA0KD,eAAO,MAAM,KAAK,wCAA6B,CAAC"}

package/dist/components/input/input.component.js

@@ -56,7 +56,7 @@ const applyMask = (value, maskType, customMask) => {
             return value;
     }
 };
-const InputComponent = ({ label, placeholder, error, value, disabled = false, maskType, customMask, mask, pattern, onChangeText, testID, }) => {
+const InputComponent = ({ label, placeholder, error, value, disabled = false, maskType, customMask, mask, pattern, onChangeText, testID, ...rest }) => {
     const [isFocused, setIsFocused] = React.useState(false);
     const focusAnimation = React.useRef(new Animated.Value(0)).current;
     const styles = useInputStyles();
@@ -90,7 +90,6 @@ const InputComponent = ({ label, placeholder, error, value, disabled = false, ma
     return (_jsxs(View, { style: styles.container, accessible: true, testID: testID, accessibilityLabel: `${label} input field`, children: [_jsx(View, { style: styles.labelWrapper, children: _jsx(Text, { style: [
                         styles.labelText,
                         disabled && styles.disabledText,
-                        isFocused && styles.focusedLabel,
                     ], accessibilityRole: "text", children: label }) }), _jsxs(Animated.View, { style: [
                     styles.inputContainer,
                     error && styles.inputError,
@@ -99,7 +98,7 @@ const InputComponent = ({ label, placeholder, error, value, disabled = false, ma
                     { borderWidth },
                 ], children: [_jsx(TextInput, { style: [styles.input, disabled && styles.inputTextDisabled], placeholder: placeholder, value: value, onChangeText: handleChangeText, editable: !disabled, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), accessibilityLabel: label, accessibilityState: {
                             disabled: disabled,
-                        }, placeholderTextColor: "#A4ADB7" }), isFocused && _jsx(View, { style: styles.cursor })] }), error && _jsx(ErrorMessage, { message: error })] }));
+                        }, placeholderTextColor: "#A4ADB7", ...rest }), isFocused && _jsx(View, { style: styles.cursor })] }), error && _jsx(ErrorMessage, { message: error })] }));
 };
 export const Input = React.memo(InputComponent);
 Input.displayName = "Input";

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

@@ -4,10 +4,11 @@ export declare const useInputStyles: () => {
         width: "100%";
         paddingBottom: 8;
         flexDirection: "column";
+        gap: 8;
     };
     labelWrapper: {
         alignSelf: "stretch";
-        gap: 4;
+        gap: 8;
     };
     labelText: {
         fontSize: number;
@@ -18,35 +19,35 @@ export declare const useInputStyles: () => {
     disabledText: {
         color: string;
     };
-    focusedLabel: {
-        color: string;
-    };
     inputContainer: {
         flexDirection: "row";
         alignItems: "center";
         backgroundColor: string;
-        borderColor: string;
-        padding: number;
-        paddingHorizontal: number;
+        borderColor: "#B3BAC3";
+        paddingVertical: 20;
+        paddingHorizontal: 16;
     };
     input: {
         flex: number;
-        fontSize: number;
-        color: string;
-        padding: number;
+        fontSize: 16;
+        lineHeight: 24;
+        verticalAlign: "middle";
+        letterSpacing: number;
+        color: "#101010";
+        fontFamily: "Inter-Regular";
     };
     inputError: {
-        borderColor: string;
+        borderColor: "#E3262F";
     };
     inputDisabled: {
-        backgroundColor: string;
-        borderColor: string;
+        borderColor: "#EFF1F3";
     };
     inputTextDisabled: {
         color: string;
     };
     inputFocused: {
-        borderColor: string;
+        borderColor: "#3643BA";
+        borderWidth: number;
     };
     cursor: {
         width: number;

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

@@ -1 +1 @@
-{"version":3,"file":"input.styles.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4D1B,CAAC"}
+{"version":3,"file":"input.styles.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6D1B,CAAC"}

package/dist/components/input/input.styles.js

@@ -8,10 +8,11 @@ export const useInputStyles = () => {
             width: "100%",
             paddingBottom: theme.spacing.xs,
             flexDirection: "column",
+            gap: theme.spacing.xs,
         },
         labelWrapper: {
             alignSelf: "stretch",
-            gap: theme.spacing.xxs,
+            gap: theme.spacing.xs,
         },
         labelText: {
             fontSize: 14,
@@ -22,35 +23,35 @@ export const useInputStyles = () => {
         disabledText: {
             color: "#A4ADB7",
         },
-        focusedLabel: {
-            color: "#007DBC",
-        },
         inputContainer: {
             flexDirection: "row",
             alignItems: "center",
-            backgroundColor: "#FFFFFF",
-            borderColor: "#A4ADB7",
-            padding: 20,
-            paddingHorizontal: 16,
+            backgroundColor: "transparent",
+            borderColor: theme.colors.borderPrimary,
+            paddingVertical: theme.spacing.mmd2,
+            paddingHorizontal: theme.spacing.md,
         },
         input: {
             flex: 1,
-            fontSize: 16,
-            color: "#15181B",
-            padding: 0,
+            fontSize: theme.fonts.sizes.sm,
+            lineHeight: theme.fonts.sizes.lg,
+            verticalAlign: "middle",
+            letterSpacing: 0,
+            color: theme.colors.textPrimary,
+            fontFamily: theme.fonts.inter.regular,
         },
         inputError: {
-            borderColor: "#FF2934",
+            borderColor: theme.colors.borderError,
         },
         inputDisabled: {
-            backgroundColor: "#FFFFFF",
-            borderColor: "#C3C9CF",
+            borderColor: theme.colors.borderDisabled,
         },
         inputTextDisabled: {
             color: "#A4ADB7",
         },
         inputFocused: {
-            borderColor: "#007DBC",
+            borderColor: theme.colors.borderInformation,
+            borderWidth: 2,
         },
         cursor: {
             width: 1,

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

@@ -14,7 +14,7 @@ const ProductCardComponent = ({ variant = "grid", imageUrl, brand, productName,
                         (flags === null || flags === void 0 ? void 0 : flags.length) > 0 &&
                         (flags === null || flags === void 0 ? void 0 : flags.map((flag, index) => (_jsx(Badge, { text: flag.text, style: { position: "absolute", top: 0, left: 0 }, icon: flag.icon }, flag.name + index + productName)))), variant === "grid" && (_jsx(TouchableOpacity, { style: [
                             isFavorite ? styles.favoriteButton : styles.unfavoriteButton,
-                        ], onPress: handleFavoritePress, accessibilityLabel: isFavorite ? "Remover dos favoritos" : "Adicionar aos favoritos", accessibilityRole: "button", children: _jsx(HeartIcon, { size: 20, color: "#101010", fill: isFavorite ? "#101010" : "transparent" }) }))] }), variant !== "lastViewed" && (_jsxs(View, { style: styles.detailsContainer, children: [_jsxs(View, { style: styles.productInfo, children: [_jsx(Text, { style: styles.brandText, children: brand }), _jsx(View, { style: styles.nameContainer, children: _jsx(Text, { numberOfLines: 3, style: styles.nameText, accessibilityLabel: `Nome do produto: ${productName}`, children: productName }) })] }), variant === "grid" && (_jsxs(View, { style: styles.ratingContainer, accessibilityLabel: `Avaliação: ${rating} estrelas, ${reviewCount} avaliações`, children: [_jsx(StarIcon, { size: 11, color: "#101010", fill: "#101010" }), _jsxs(View, { style: styles.reviewCountWrapper, children: [_jsx(Text, { style: styles.ratingText, children: rating }), _jsxs(Text, { style: styles.reviewCountText, children: ["(", reviewCount, ")"] })] })] })), _jsx(View, { style: styles.priceContainer, children: _jsx(Text, { style: styles.priceText, accessibilityLabel: `Preço: ${price}`, children: price }) })] }))] })), [
+                        ], onPress: handleFavoritePress, accessibilityLabel: isFavorite ? "Remover dos favoritos" : "Adicionar aos favoritos", accessibilityRole: "button", children: _jsx(HeartIcon, { size: 20, color: "#101010", fill: isFavorite ? "#101010" : "transparent" }) }))] }), variant !== "lastViewed" && (_jsxs(View, { style: styles.detailsContainer, children: [_jsxs(View, { style: styles.productInfo, children: [variant !== "shelf" && _jsx(Text, { style: styles.brandText, children: brand }), _jsx(View, { style: styles.nameContainer, children: _jsx(Text, { numberOfLines: 3, style: styles.nameText, accessibilityLabel: `Nome do produto: ${productName}`, children: productName }) })] }), variant === "grid" && (_jsxs(View, { style: styles.ratingContainer, accessibilityLabel: `Avaliação: ${rating} estrelas, ${reviewCount} avaliações`, children: [_jsx(StarIcon, { size: 11, color: "#101010", fill: "#101010" }), _jsxs(View, { style: styles.reviewCountWrapper, children: [_jsx(Text, { style: styles.ratingText, children: rating }), _jsxs(Text, { style: styles.reviewCountText, children: ["(", reviewCount, ")"] })] })] })), _jsx(View, { style: styles.priceContainer, children: _jsx(Text, { style: styles.priceText, accessibilityLabel: `Preço: ${price}`, children: price }) })] }))] })), [
         brand,
         handleFavoritePress,
         imageUrl,

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

@@ -1 +1 @@
-{"version":3,"file":"select.component.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAmF7C,eAAO,MAAM,MAAM,yCAA8B,CAAC"}
+{"version":3,"file":"select.component.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAiF7C,eAAO,MAAM,MAAM,yCAA8B,CAAC"}

package/dist/components/select/select.component.js

@@ -25,13 +25,11 @@ const SelectComponent = ({ label, placeholder, error, value, disabled = false, o
     };
     return (_jsxs(View, { style: styles.container, accessible: true, testID: testID, accessibilityLabel: `${label} select field`, children: [_jsx(View, { style: styles.labelWrapper, children: _jsx(Text, { style: [
                         styles.labelText,
-                        disabled && styles.disabledText,
-                        isFocused && styles.focusedLabel,
+                        disabled && styles.disabledText
                     ], accessibilityRole: "text", children: label }) }), _jsx(TouchableOpacity, { onPress: handlePress, disabled: disabled, activeOpacity: 0.7, children: _jsxs(Animated.View, { style: [
                         styles.selectContainer,
                         error && styles.selectError,
                         disabled && styles.selectDisabled,
-                        isFocused && styles.selectFocused,
                     ], children: [_jsx(Text, { style: [
                                 styles.selectText,
                                 !value && styles.placeholderText,

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

@@ -4,52 +4,53 @@ export declare const useSelectStyles: () => {
         width: "100%";
         paddingBottom: 8;
         flexDirection: "column";
+        gap: 8;
     };
     labelWrapper: {
         alignSelf: "stretch";
-        gap: 4;
+        gap: 8;
     };
     labelText: {
         fontSize: number;
         lineHeight: number;
-        color: string;
-        fontFamily: string;
+        color: "#101010";
+        fontFamily: "Inter-Regular";
     };
     disabledText: {
-        color: string;
-    };
-    focusedLabel: {
-        color: string;
+        color: "#949494";
     };
     selectContainer: {
         flexDirection: "row";
         alignItems: "center";
         backgroundColor: string;
-        borderColor: string;
         borderWidth: number;
-        padding: number;
-        paddingHorizontal: number;
+        borderColor: "#B3BAC3";
+        paddingVertical: 20;
+        paddingHorizontal: 16;
     };
     selectText: {
         flex: number;
-        fontSize: number;
-        color: string;
+        fontSize: 16;
+        lineHeight: 24;
+        verticalAlign: "middle";
+        letterSpacing: number;
+        color: "#101010";
+        fontFamily: "Inter-Regular";
     };
     placeholderText: {
-        color: string;
+        color: "#949494";
     };
     selectError: {
-        borderColor: string;
+        borderColor: "#E3262F";
     };
     selectDisabled: {
-        backgroundColor: string;
-        borderColor: string;
+        borderColor: "#EFF1F3";
     };
     selectTextDisabled: {
-        color: string;
+        color: "#949494";
     };
     selectFocused: {
-        borderColor: string;
+        borderColor: "#3643BA";
         borderWidth: number;
     };
     chevronContainer: {

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

@@ -1 +1 @@
-{"version":3,"file":"select.styles.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6D3B,CAAC"}
+{"version":3,"file":"select.styles.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8D3B,CAAC"}

package/dist/components/select/select.styles.js

@@ -8,52 +8,53 @@ export const useSelectStyles = () => {
             width: "100%",
             paddingBottom: theme.spacing.xs,
             flexDirection: "column",
+            gap: theme.spacing.xs,
         },
         labelWrapper: {
             alignSelf: "stretch",
-            gap: theme.spacing.xxs,
+            gap: theme.spacing.xs,
         },
         labelText: {
             fontSize: 14,
             lineHeight: 20,
-            color: "#15181B",
-            fontFamily: "Inter",
+            color: theme.colors.textPrimary,
+            fontFamily: theme.fonts.inter.regular,
         },
         disabledText: {
-            color: "#A4ADB7",
-        },
-        focusedLabel: {
-            color: "#007DBC",
+            color: theme.colors.textDisabled,
         },
         selectContainer: {
             flexDirection: "row",
             alignItems: "center",
-            backgroundColor: "#FFFFFF",
-            borderColor: "#A4ADB7",
+            backgroundColor: "transparent",
             borderWidth: 1,
-            padding: 20,
-            paddingHorizontal: 16,
+            borderColor: theme.colors.borderPrimary,
+            paddingVertical: theme.spacing.mmd2,
+            paddingHorizontal: theme.spacing.md,
         },
         selectText: {
             flex: 1,
-            fontSize: 16,
-            color: "#15181B",
+            fontSize: theme.fonts.sizes.sm,
+            lineHeight: theme.fonts.sizes.lg,
+            verticalAlign: "middle",
+            letterSpacing: 0,
+            color: theme.colors.textPrimary,
+            fontFamily: theme.fonts.inter.regular,
         },
         placeholderText: {
-            color: "#A4ADB7",
+            color: theme.colors.textDisabled,
         },
         selectError: {
-            borderColor: "#FF2934",
+            borderColor: theme.colors.borderError,
         },
         selectDisabled: {
-            backgroundColor: "#FFFFFF",
-            borderColor: "#C3C9CF",
+            borderColor: theme.colors.borderDisabled,
         },
         selectTextDisabled: {
-            color: "#A4ADB7",
+            color: theme.colors.textDisabled,
         },
         selectFocused: {
-            borderColor: "#007DBC",
+            borderColor: theme.colors.borderInformation,
             borderWidth: 2,
         },
         chevronContainer: {

package/dist/themes/index.d.ts

@@ -130,6 +130,7 @@ declare const useTheme: () => {
         readonly default: 14;
         readonly md: 16;
         readonly mmd: 21;
+        readonly mmd2: 20;
         readonly lg: 24;
         readonly xl: 32;
         readonly xxl: 48;