npm - decathlon-ui - Versions diffs - 0.3.1 → 0.3.2 - Mend

decathlon-ui 0.3.1 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/dist/components/button/button.props.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ export type ButtonProps = {
     onPress?: () => void;
     label?: string;
     loading?: boolean;
-    variant?: "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "converted";
+    variant?: "primary" | "primary-inverted" | "secondary" | "secondary-inverted" | "converted" | "danger" | "danger-inverted" | "danger-outline";
     fullWidth?: boolean;
     size?: "small" | "medium" | "large";
     icon?: any;
@@ -13,7 +13,10 @@ export declare enum ButtonVariant {
     primaryInverted = "primary-inverted",
     secondary = "secondary",
     secondaryInverted = "secondary-inverted",
-    converted = "converted"
+    converted = "converted",
+    danger = "danger",
+    dangerInverted = "danger-inverted",
+    dangerOutline = "danger-outline"
 }
 export declare enum ButtonSize {
     small = "small",

package/dist/components/button/button.props.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.props.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.props.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EACJ,SAAS,GACT,kBAAkB,GAClB,WAAW,GACX,oBAAoB,GACpB,WAAW,CAAC;~~IAChB~~,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,eAAe,qBAAqB;IACpC,SAAS,cAAc;IACvB,iBAAiB,uBAAuB;IACxC,SAAS,cAAc;~~CACxB~~;AAED,oBAAY,UAAU;IACpB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB"}
1	+ {"version":3,"file":"button.props.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.props.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EACJ,SAAS,GACT,kBAAkB,GAClB,WAAW,GACX,oBAAoB,GACpB,WAAW,GACX,QAAQ,GACR,iBAAiB,GACjB,gBAAgB,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,eAAe,qBAAqB;IACpC,SAAS,cAAc;IACvB,iBAAiB,uBAAuB;IACxC,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,cAAc,oBAAoB;IAClC,aAAa,mBAAmB;CACjC;AAED,oBAAY,UAAU;IACpB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB"}

package/dist/components/button/button.props.js CHANGED Viewed

@@ -5,6 +5,9 @@ export var ButtonVariant;
     ButtonVariant["secondary"] = "secondary";
     ButtonVariant["secondaryInverted"] = "secondary-inverted";
     ButtonVariant["converted"] = "converted";
+    ButtonVariant["danger"] = "danger";
+    ButtonVariant["dangerInverted"] = "danger-inverted";
+    ButtonVariant["dangerOutline"] = "danger-outline";
 })(ButtonVariant || (ButtonVariant = {}));
 export var ButtonSize;
 (function (ButtonSize) {

package/dist/components/button/button.styles.d.ts CHANGED Viewed

@@ -5,6 +5,42 @@ export declare const useButtonStyles: ({ variant, fullWidth, size, }: {
     size?: string | undefined;
 }) => {
     container: {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: "#101010";
+        borderWidth?: undefined;
+        borderColor?: undefined;
+        paddingHorizontal: 16;
+        paddingVertical: number;
+    } | {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: "#FFFFFF";
+        borderWidth?: undefined;
+        borderColor?: undefined;
+        paddingHorizontal: 16;
+        paddingVertical: number;
+    } | {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: "#B3BAC3";
+        paddingHorizontal: 16;
+        paddingVertical: number;
+    } | {
         width: "auto" | "100%";
         borderRadius: number;
         justifyContent: "center";
@@ -12,9 +48,57 @@ export declare const useButtonStyles: ({ variant, fullWidth, size, }: {
         flexDirection: "row";
         gap: number;
         backgroundColor: string;
+        borderWidth: number;
+        borderColor: "#B3BAC3";
+        paddingHorizontal: 16;
+        paddingVertical: number;
+    } | {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: "#3643BA";
+        borderWidth?: undefined;
+        borderColor?: undefined;
+        paddingHorizontal: 16;
+        paddingVertical: number;
+    } | {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: "#FFE4D6";
+        borderWidth?: undefined;
+        borderColor?: undefined;
+        paddingHorizontal: 16;
+        paddingVertical: number;
+    } | {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: "#FFFFFF";
         borderWidth?: undefined;
         borderColor?: undefined;
-        paddingHorizontal: number;
+        paddingHorizontal: 16;
+        paddingVertical: number;
+    } | {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: "#FFE4D6";
+        paddingHorizontal: 16;
         paddingVertical: number;
     } | {
         width: "auto" | "100%";
@@ -25,23 +109,353 @@ export declare const useButtonStyles: ({ variant, fullWidth, size, }: {
         gap: number;
         backgroundColor: string;
         borderWidth: number;
-        borderColor: string;
-        paddingHorizontal: number;
+        borderColor: "#E3262F";
+        paddingHorizontal: 16;
         paddingVertical: number;
+    } | {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: "#101010";
+        borderWidth?: undefined;
+        borderColor?: undefined;
+        paddingHorizontal: 16;
+        paddingVertical: 12;
+    } | {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: "#FFFFFF";
+        borderWidth?: undefined;
+        borderColor?: undefined;
+        paddingHorizontal: 16;
+        paddingVertical: 12;
+    } | {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: "#B3BAC3";
+        paddingHorizontal: 16;
+        paddingVertical: 12;
+    } | {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: "#B3BAC3";
+        paddingHorizontal: 16;
+        paddingVertical: 12;
+    } | {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: "#3643BA";
+        borderWidth?: undefined;
+        borderColor?: undefined;
+        paddingHorizontal: 16;
+        paddingVertical: 12;
+    } | {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: "#FFE4D6";
+        borderWidth?: undefined;
+        borderColor?: undefined;
+        paddingHorizontal: 16;
+        paddingVertical: 12;
+    } | {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: "#FFFFFF";
+        borderWidth?: undefined;
+        borderColor?: undefined;
+        paddingHorizontal: 16;
+        paddingVertical: 12;
+    } | {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: "#FFE4D6";
+        paddingHorizontal: 16;
+        paddingVertical: 12;
+    } | {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: "#E3262F";
+        paddingHorizontal: 16;
+        paddingVertical: 12;
+    } | {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: "#101010";
+        borderWidth?: undefined;
+        borderColor?: undefined;
+        paddingHorizontal: 16;
+        paddingVertical: 16;
+    } | {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: "#FFFFFF";
+        borderWidth?: undefined;
+        borderColor?: undefined;
+        paddingHorizontal: 16;
+        paddingVertical: 16;
+    } | {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: "#B3BAC3";
+        paddingHorizontal: 16;
+        paddingVertical: 16;
+    } | {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: "#B3BAC3";
+        paddingHorizontal: 16;
+        paddingVertical: 16;
+    } | {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: "#3643BA";
+        borderWidth?: undefined;
+        borderColor?: undefined;
+        paddingHorizontal: 16;
+        paddingVertical: 16;
+    } | {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: "#FFE4D6";
+        borderWidth?: undefined;
+        borderColor?: undefined;
+        paddingHorizontal: 16;
+        paddingVertical: 16;
+    } | {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: "#FFFFFF";
+        borderWidth?: undefined;
+        borderColor?: undefined;
+        paddingHorizontal: 16;
+        paddingVertical: 16;
+    } | {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: "#FFE4D6";
+        paddingHorizontal: 16;
+        paddingVertical: 16;
+    } | {
+        width: "auto" | "100%";
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: "#E3262F";
+        paddingHorizontal: 16;
+        paddingVertical: 16;
     };
     buttonText: {
         fontWeight: "600";
-        color: string;
-        fontSize: number;
+        color: "#FFFFFF";
+        fontSize: 14;
+    } | {
+        fontWeight: "600";
+        color: "#101010";
+        fontSize: 14;
+    } | {
+        fontWeight: "600";
+        color: "#101010";
+        fontSize: 14;
+    } | {
+        fontWeight: "600";
+        color: "#FFFFFF";
+        fontSize: 14;
+    } | {
+        fontWeight: "600";
+        color: "#FFFFFF";
+        fontSize: 14;
+    } | {
+        fontWeight: "600";
+        color: "#FFFFFF";
+        fontSize: 14;
+    } | {
+        fontWeight: "600";
+        color: "#FFE4D6";
+        fontSize: 14;
+    } | {
+        fontWeight: "600";
+        color: "#AB0009";
+        fontSize: 14;
+    } | {
+        fontWeight: "600";
+        color: "#AB0009";
+        fontSize: 14;
+    } | {
+        fontWeight: "600";
+        color: "#FFFFFF";
+        fontSize: 16;
+    } | {
+        fontWeight: "600";
+        color: "#101010";
+        fontSize: 16;
+    } | {
+        fontWeight: "600";
+        color: "#101010";
+        fontSize: 16;
+    } | {
+        fontWeight: "600";
+        color: "#FFFFFF";
+        fontSize: 16;
+    } | {
+        fontWeight: "600";
+        color: "#FFFFFF";
+        fontSize: 16;
+    } | {
+        fontWeight: "600";
+        color: "#FFFFFF";
+        fontSize: 16;
+    } | {
+        fontWeight: "600";
+        color: "#FFE4D6";
+        fontSize: 16;
+    } | {
+        fontWeight: "600";
+        color: "#AB0009";
+        fontSize: 16;
+    } | {
+        fontWeight: "600";
+        color: "#AB0009";
+        fontSize: 16;
+    } | {
+        fontWeight: "600";
+        color: "#FFFFFF";
+        fontSize: 18;
+    } | {
+        fontWeight: "600";
+        color: "#101010";
+        fontSize: 18;
+    } | {
+        fontWeight: "600";
+        color: "#101010";
+        fontSize: 18;
+    } | {
+        fontWeight: "600";
+        color: "#FFFFFF";
+        fontSize: 18;
+    } | {
+        fontWeight: "600";
+        color: "#FFFFFF";
+        fontSize: 18;
+    } | {
+        fontWeight: "600";
+        color: "#FFFFFF";
+        fontSize: 18;
+    } | {
+        fontWeight: "600";
+        color: "#FFE4D6";
+        fontSize: 18;
     } | {
         fontWeight: "600";
-        color: string;
-        fontSize: number;
+        color: "#AB0009";
+        fontSize: 18;
+    } | {
+        fontWeight: "600";
+        color: "#AB0009";
+        fontSize: 18;
     };
     icon: {
-        color: string;
+        color: "#FFFFFF";
+    } | {
+        color: "#101010";
+    } | {
+        color: "#101010";
+    } | {
+        color: "#FFFFFF";
+    } | {
+        color: "#FFFFFF";
+    } | {
+        color: "#FFFFFF";
+    } | {
+        color: "#FFE4D6";
+    } | {
+        color: "#AB0009";
     } | {
-        color: string;
+        color: "#AB0009";
     };
     disabled: {
         opacity: number;

package/dist/components/button/button.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,eAAO,MAAM,eAAe,GAAI;;;;CAI/B~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgIA~~,CAAC"}
1	+ {"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,eAAO,MAAM,eAAe,GAAI;;;;CAI/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoLA,CAAC"}

package/dist/components/button/button.styles.js CHANGED Viewed

@@ -8,8 +8,11 @@ fullWidth = true, size = "medium", }) => {
         switch (size) {
             case "small":
                 return {
-                    container: { paddingHorizontal: 16, paddingVertical: 5.5 },
-                    buttonText: { fontSize: 14 },
+                    container: {
+                        paddingHorizontal: theme.spacing.md,
+                        paddingVertical: 5.5,
+                    },
+                    buttonText: { fontSize: theme.spacing.default },
                     icon: {
                         width: 14,
                         height: 14,
@@ -17,8 +20,11 @@ fullWidth = true, size = "medium", }) => {
                 };
             case "medium":
                 return {
-                    container: { paddingHorizontal: 16, paddingVertical: 12 },
-                    buttonText: { fontSize: 16 },
+                    container: {
+                        paddingHorizontal: theme.spacing.md,
+                        paddingVertical: theme.spacing.sm,
+                    },
+                    buttonText: { fontSize: theme.fonts.sizes.sm },
                     icon: {
                         width: 16,
                         height: 16,
@@ -26,8 +32,11 @@ fullWidth = true, size = "medium", }) => {
                 };
             case "large":
                 return {
-                    container: { paddingHorizontal: 16, paddingVertical: 16 },
-                    buttonText: { fontSize: 18 },
+                    container: {
+                        paddingHorizontal: theme.spacing.md,
+                        paddingVertical: theme.spacing.md,
+                    },
+                    buttonText: { fontSize: theme.fonts.sizes.default },
                     icon: {
                         width: 16,
                         height: 16,
@@ -35,8 +44,11 @@ fullWidth = true, size = "medium", }) => {
                 };
             default:
                 return {
-                    container: { paddingHorizontal: 16, paddingVertical: 12 },
-                    buttonText: { fontSize: 14 },
+                    container: {
+                        paddingHorizontal: theme.spacing.md,
+                        paddingVertical: theme.spacing.sm,
+                    },
+                    buttonText: { fontSize: theme.fonts.sizes.xs },
                     icon: {
                         width: 14,
                         height: 14,
@@ -49,17 +61,17 @@ fullWidth = true, size = "medium", }) => {
             case ButtonVariant.primary:
                 return {
                     container: { backgroundColor: theme.colors.black },
-                    buttonText: { color: "#fff" },
+                    buttonText: { color: theme.colors.white },
                     icon: {
-                        color: "#fff",
+                        color: theme.colors.white,
                     },
                 };
             case ButtonVariant.primaryInverted:
                 return {
-                    container: { backgroundColor: "#fff" },
-                    buttonText: { color: "#000" },
+                    container: { backgroundColor: theme.colors.white },
+                    buttonText: { color: theme.colors.black },
                     icon: {
-                        color: "#000",
+                        color: theme.colors.black,
                     },
                 };
             case ButtonVariant.secondary:
@@ -67,11 +79,11 @@ fullWidth = true, size = "medium", }) => {
                     container: {
                         backgroundColor: "transparent",
                         borderWidth: 1,
-                        borderColor: "#B3BAC3",
+                        borderColor: theme.colors.textTertiaryInverted,
                     },
-                    buttonText: { color: "#000" },
+                    buttonText: { color: theme.colors.black },
                     icon: {
-                        color: "#000",
+                        color: theme.colors.black,
                     },
                 };
             case ButtonVariant.secondaryInverted:
@@ -79,27 +91,67 @@ fullWidth = true, size = "medium", }) => {
                     container: {
                         backgroundColor: "transparent",
                         borderWidth: 1,
-                        borderColor: "#B3BAC3",
+                        borderColor: theme.colors.textTertiaryInverted,
                     },
-                    buttonText: { color: "#fff" },
+                    buttonText: { color: theme.colors.white },
                     icon: {
-                        color: "#fff",
+                        color: theme.colors.white,
                     },
                 };
             case ButtonVariant.converted:
                 return {
-                    container: { backgroundColor: "#3643BA" },
-                    buttonText: { color: "#fff" },
+                    container: { backgroundColor: theme.colors.primary },
+                    buttonText: { color: theme.colors.white },
                     icon: {
-                        color: "#fff",
+                        color: theme.colors.white,
+                    },
+                };
+            case ButtonVariant.danger:
+                return {
+                    container: { backgroundColor: theme.colors.backgroundError },
+                    buttonText: { color: theme.colors.white },
+                    icon: {
+                        color: theme.colors.white,
+                    },
+                };
+            case ButtonVariant.dangerInverted:
+                return {
+                    container: { backgroundColor: theme.colors.white },
+                    buttonText: { color: theme.colors.backgroundError },
+                    icon: {
+                        color: theme.colors.backgroundError,
+                    },
+                };
+            case ButtonVariant.dangerOutline:
+                return {
+                    container: {
+                        backgroundColor: "transparent",
+                        borderWidth: 1,
+                        borderColor: theme.colors.backgroundError,
+                    },
+                    buttonText: { color: theme.colors.textError },
+                    icon: {
+                        color: theme.colors.textError,
+                    },
+                };
+            case ButtonVariant.dangerOutline:
+                return {
+                    container: {
+                        backgroundColor: "transparent",
+                        borderWidth: 1,
+                        borderColor: theme.colors.borderError,
+                    },
+                    buttonText: { color: theme.colors.textError },
+                    icon: {
+                        color: theme.colors.textError,
                     },
                 };
             default:
                 return {
-                    container: { backgroundColor: "#101010" },
-                    buttonText: { color: "#fff" },
+                    container: { backgroundColor: theme.colors.black },
+                    buttonText: { color: theme.colors.white },
                     icon: {
-                        color: "#fff",
+                        color: theme.colors.white,
                     },
                 };
         }

package/dist/components/index.d.ts CHANGED Viewed

@@ -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";

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

	@@ -1 +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,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC"}
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,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 CHANGED Viewed

@@ -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";

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

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 ADDED Viewed

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

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

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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 CHANGED Viewed

	@@ -1 +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;~~AAkF7C~~,eAAO,MAAM,MAAM,yCAA8B,CAAC"}
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;AAiF7C,eAAO,MAAM,MAAM,yCAA8B,CAAC"}

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

@@ -30,7 +30,6 @@ const SelectComponent = ({ label, placeholder, error, value, disabled = false, o
                         styles.selectContainer,
                         error && styles.selectError,
                         disabled && styles.selectDisabled,
-                        value && styles.selectFocused,
                     ], children: [_jsx(Text, { style: [
                                 styles.selectText,
                                 !value && styles.placeholderText,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "decathlon-ui",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Biblioteca de componentes React Native com Storybook e documentação via GitHub Pages.",
   "main": "dist/index.js",
   "module": "dist/index.js",