@pagopa/io-app-design-system 1.0.0-9 → 1.0.0

package/src/components/listitems/ListItemTransaction.tsx

@@ -5,11 +5,12 @@ import React from "react";
 import { ImageURISource, StyleSheet, View } from "react-native";
 import Placeholder from "rn-placeholder";
 import {
-    IOListItemStyles,
-    IOListItemVisualParams,
-    IOStyles,
-    IOVisualCostants,
-    useIOTheme
+  IOColors,
+  IOListItemStyles,
+  IOListItemVisualParams,
+  IOStyles,
+  IOVisualCostants,
+  useIOTheme
 } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { Avatar } from "../avatar/Avatar";
@@ -18,181 +19,184 @@ import { Icon } from "../icons";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
 import { VSpacer } from "../spacer";
 import { H6, LabelSmall } from "../typography";
-import { PressableBaseProps, PressableListItemBase } from "./PressableListItemsBase";
+import {
+  PressableBaseProps,
+  PressableListItemBase
+} from "./PressableListItemsBase";
 
 type LogoNameOrUri = IOLogoPaymentType | ImageURISource;
 export type ListItemTransaction = WithTestID<
-    PressableBaseProps & {
-        hasChevronRight?: boolean;
-        isLoading?: boolean;
-        paymentLogoOrUrl?: LogoNameOrUri;
-        subtitle: string;
-        title: string;
-    } & (
-        | {
-            transactionStatus: "success";
-            transactionAmount: string;
+  PressableBaseProps & {
+    hasChevronRight?: boolean;
+    isLoading?: boolean;
+    paymentLogoOrUrl?: LogoNameOrUri;
+    subtitle: string;
+    title: string;
+  } & (
+      | {
+          transactionStatus: "success";
+          transactionAmount: string;
         }
-        | {
-            transactionStatus: "failure" | "pending";
-            transactionAmount?: string;
+      | {
+          transactionStatus: "failure" | "pending";
+          transactionAmount?: string;
         }
     )
 >;
 
 type LeftComponentProps = {
-    logoNameOrUrl: LogoNameOrUri;
+  logoNameOrUrl: LogoNameOrUri;
 };
 
 const isImageUrI = (
-    value: IOLogoPaymentType | ImageURISource
+  value: IOLogoPaymentType | ImageURISource
 ): value is ImageURISource =>
-    typeof value === "object" && value.uri !== undefined;
+  typeof value === "object" && value.uri !== undefined;
 
 const LeftComponent = ({ logoNameOrUrl }: LeftComponentProps) => {
-    if (isImageUrI(logoNameOrUrl)) {
-        return <Avatar shape="circle" size="small" logoUri={[logoNameOrUrl]} />;
-    } else {
-        return (
-            <View
-                style={{
-                    width: IOVisualCostants.avatarSizeSmall,
-                    height: IOVisualCostants.avatarSizeSmall,
-                    alignItems: "center",
-                    justifyContent: "center"
-                }}
-            >
-                <LogoPayment name={logoNameOrUrl} />
-            </View>
-        );
-    }
+  if (isImageUrI(logoNameOrUrl)) {
+    return <Avatar shape="circle" size="small" logoUri={[logoNameOrUrl]} />;
+  } else {
+    return (
+      <View
+        style={{
+          width: IOVisualCostants.avatarSizeSmall,
+          height: IOVisualCostants.avatarSizeSmall,
+          alignItems: "center",
+          justifyContent: "center"
+        }}
+      >
+        <LogoPayment name={logoNameOrUrl} />
+      </View>
+    );
+  }
 };
 
 export const ListItemTransaction = ({
-    accessibilityLabel,
-    hasChevronRight = false,
-    isLoading = false,
-    paymentLogoOrUrl,
-    onPress,
-    subtitle,
-    testID,
-    title,
-    transactionAmount,
-    transactionStatus = "success"
+  accessibilityLabel,
+  hasChevronRight = false,
+  isLoading = false,
+  paymentLogoOrUrl,
+  onPress,
+  subtitle,
+  testID,
+  title,
+  transactionAmount,
+  transactionStatus = "success"
 }: ListItemTransaction) => {
-    const theme = useIOTheme();
+  const theme = useIOTheme();
 
-    if (isLoading) {
-        return <SkeletonComponent />;
-    }
+  if (isLoading) {
+    return <SkeletonComponent />;
+  }
 
-    const designSystemBlue = "blue";
-    const ListItemTransactionContent = () => {
-        const TransactionAmountOrBadgeComponent = () => {
-            switch (transactionStatus) {
-                case "success":
-                    return (
-                        <H6 color={hasChevronRight ? designSystemBlue : "black"}>
-                            {transactionAmount || "-"}
-                        </H6>
-                    );
+  const designSystemBlue: IOColors = "blue";
+  const ListItemTransactionContent = () => {
+    const TransactionAmountOrBadgeComponent = () => {
+      switch (transactionStatus) {
+        case "success":
+          return (
+            <H6 color={hasChevronRight ? designSystemBlue : "black"}>
+              {transactionAmount || "-"}
+            </H6>
+          );
 
-                case "failure":
-                    return (
-                        <Badge variant="error" text={I18n.t("global.badges.failed")} />
-                    );
-                case "pending":
-                    return (
-                        <Badge variant="info" text={I18n.t("global.badges.onGoing")} />
-                    );
-            }
-        };
-
-        return (
-            <>
-                {paymentLogoOrUrl && (
-                    <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-                        <LeftComponent logoNameOrUrl={paymentLogoOrUrl} />
-                    </View>
-                )}
-                <View style={IOStyles.flex}>
-                    <H6 color={theme["textBody-default"]}>{title}</H6>
-                    <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
-                        {subtitle}
-                    </LabelSmall>
-                    <VSpacer size={4} />
-                </View>
-                <View style={Styles.rightSection}>
-                    <TransactionAmountOrBadgeComponent />
-                    {hasChevronRight && (
-                        <Icon
-                            name="chevronRightListItem"
-                            color={designSystemBlue}
-                            size={IOListItemVisualParams.chevronSize}
-                        />
-                    )}
-                </View>
-            </>
-        );
+        case "failure":
+          return (
+            <Badge variant="error" text={I18n.t("global.badges.failed")} />
+          );
+        case "pending":
+          return (
+            <Badge variant="info" text={I18n.t("global.badges.onGoing")} />
+          );
+      }
     };
 
-    return pipe(
-        onPress,
-        O.fromNullable,
-        O.fold(
-            () => (
-                <View
-                    style={IOListItemStyles.listItem}
-                    testID={testID}
-                    accessible={true}
-                    accessibilityLabel={accessibilityLabel}
-                >
-                    <View style={IOListItemStyles.listItemInner}>
-                        <ListItemTransactionContent />
-                    </View>
-                </View>
-            ),
-            onPress => (
-                <PressableListItemBase
-                    onPress={onPress}
-                    testID={testID}
-                    accessibilityLabel={accessibilityLabel}
-                >
-                    <ListItemTransactionContent />
-                </PressableListItemBase>
-            )
-        )
+    return (
+      <>
+        {paymentLogoOrUrl && (
+          <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
+            <LeftComponent logoNameOrUrl={paymentLogoOrUrl} />
+          </View>
+        )}
+        <View style={IOStyles.flex}>
+          <H6 color={theme["textBody-default"]}>{title}</H6>
+          <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+            {subtitle}
+          </LabelSmall>
+          <VSpacer size={4} />
+        </View>
+        <View style={Styles.rightSection}>
+          <TransactionAmountOrBadgeComponent />
+          {hasChevronRight && (
+            <Icon
+              name="chevronRightListItem"
+              color={designSystemBlue}
+              size={IOListItemVisualParams.chevronSize}
+            />
+          )}
+        </View>
+      </>
     );
+  };
+
+  return pipe(
+    onPress,
+    O.fromNullable,
+    O.fold(
+      () => (
+        <View
+          style={IOListItemStyles.listItem}
+          testID={testID}
+          accessible={true}
+          accessibilityLabel={accessibilityLabel}
+        >
+          <View style={IOListItemStyles.listItemInner}>
+            <ListItemTransactionContent />
+          </View>
+        </View>
+      ),
+      onPress => (
+        <PressableListItemBase
+          onPress={onPress}
+          testID={testID}
+          accessibilityLabel={accessibilityLabel}
+        >
+          <ListItemTransactionContent />
+        </PressableListItemBase>
+      )
+    )
+  );
 };
 
 const SkeletonComponent = () => (
-    <View style={IOListItemStyles.listItem} accessible={false}>
-        <View style={IOListItemStyles.listItemInner}>
-            <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-                <Placeholder.Box
-                    animate="fade"
-                    height={IOVisualCostants.avatarSizeSmall}
-                    width={IOVisualCostants.avatarSizeSmall}
-                    radius={100}
-                />
-            </View>
-            <View style={IOStyles.flex}>
-                <Placeholder.Box animate="fade" radius={8} width={62} height={16} />
-                <VSpacer size={4} />
-                <Placeholder.Box animate="fade" radius={8} width={107} height={16} />
-            </View>
-            <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
-                <Placeholder.Box animate="fade" radius={8} width={70} height={24} />
-            </View>
-        </View>
+  <View style={IOListItemStyles.listItem} accessible={false}>
+    <View style={IOListItemStyles.listItemInner}>
+      <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
+        <Placeholder.Box
+          animate="fade"
+          height={IOVisualCostants.avatarSizeSmall}
+          width={IOVisualCostants.avatarSizeSmall}
+          radius={100}
+        />
+      </View>
+      <View style={IOStyles.flex}>
+        <Placeholder.Box animate="fade" radius={8} width={62} height={16} />
+        <VSpacer size={4} />
+        <Placeholder.Box animate="fade" radius={8} width={107} height={16} />
+      </View>
+      <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
+        <Placeholder.Box animate="fade" radius={8} width={70} height={24} />
+      </View>
     </View>
+  </View>
 );
 
 const Styles = StyleSheet.create({
-    rightSection: {
-        marginLeft: IOListItemVisualParams.iconMargin,
-        flexDirection: "row",
-        alignItems: "center",
-        height: "100%"
-    }
+  rightSection: {
+    marginLeft: IOListItemVisualParams.iconMargin,
+    flexDirection: "row",
+    alignItems: "center",
+    height: "100%"
+  }
 });

package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap

@@ -246,13 +246,6 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
       >
         label
       </Text>
-      <View
-        style={
-          {
-            "height": 4,
-          }
-        }
-      />
       <Text
         color="black"
         defaultColor="black"
@@ -388,13 +381,6 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
         >
           label
         </Text>
-        <View
-          style={
-            {
-              "height": 4,
-            }
-          }
-        />
         <Text
           color="blueIO-500"
           defaultColor="black"

package/src/components/listitems/index.tsx

@@ -6,3 +6,6 @@ export * from "./ListItemNav";
 export * from "./ListItemNavAlert";
 export * from "./ListItemTransaction";
 export * from "./PressableListItemsBase";
+export * from "./ListItemSwitch";
+export * from "./ListItemCheckbox";
+export * from "./ListItemRadio";

package/src/components/logos/svg/LogoPaymentExtMaestro.tsx

@@ -4,30 +4,13 @@ import { SVGLogoProps } from "../LogoPayment";
 
 const LogoPaymentExtMaestro = ({ size }: SVGLogoProps) => (
   <Svg width={size} height={size} viewBox="0 0 48 30">
+    <Path fill="#7673C0" d="M17.5039 3.17151h12.975v23.318h-12.975z" />
     <Path
-      d="M47.76 28.32c0 .888-.72 1.584-1.584 1.584H1.584C.696 29.904 0 29.184 0 28.32V1.632C0 .744.72.048 1.584.048h44.592c.888 0 1.584.72 1.584 1.584V28.32Z"
-      fill="#000"
-    />
-    <Path fill="#000" d="M3.6 2.16h40.397v25.546H3.6z" />
-    <Path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M28.298 23.734h-.813v1.04c0 .24.081.383.331.383a.923.923 0 0 0 .442-.13l.144.428a1.172 1.172 0 0 1-.624.177c-.59 0-.797-.317-.797-.85V23.74h-.466v-.456h.466v-.696h.504v.696h.813v.45Zm-10.02.396v1.44l-.501-.007v-1.275c0-.389-.163-.605-.504-.605a.54.54 0 0 0-.562.61v1.27h-.504v-1.275c0-.389-.168-.605-.499-.605a.535.535 0 0 0-.562.61v1.277h-.504v-2.292h.5v.283a.758.758 0 0 1 .672-.34c.308-.014.6.143.758.407a.888.888 0 0 1 .806-.408.852.852 0 0 1 .9.91Zm2.808-.85v1.145l-.004 1.14h-.5v-.278a.869.869 0 0 1-.72.336 1.2 1.2 0 0 1 0-2.4c.28-.011.549.114.72.336v-.279h.504Zm-1.855 1.145a.694.694 0 1 1 .696.735.687.687 0 0 1-.7-.735h.004Zm13.001-1.109a1.289 1.289 0 0 0-.48-.09l-.005-.006a1.29 1.29 0 0 0-.88.353c-.11.109-.198.239-.257.382a1.275 1.275 0 0 0 0 .96 1.17 1.17 0 0 0 .645.636c.317.123.668.123.984 0a1.16 1.16 0 0 0 .65-.636 1.272 1.272 0 0 0 0-.96 1.16 1.16 0 0 0-.657-.639Zm-.48.39a.743.743 0 0 0-.286.052.674.674 0 0 0-.379.391.833.833 0 0 0 0 .595.672.672 0 0 0 .38.391.78.78 0 0 0 .808-.15.694.694 0 0 0 .151-.24.833.833 0 0 0 0-.596.694.694 0 0 0-.15-.24.685.685 0 0 0-.24-.151.743.743 0 0 0-.289-.067l.005.014Zm-9.04-.48c.64 0 1.086.48 1.086 1.2 0 .066 0 .129-.007.186H22.09a.636.636 0 0 0 .686.562c.243-.004.478-.088.667-.24l.24.37a1.392 1.392 0 0 1-.938.321 1.2 1.2 0 0 1-.034-2.4Zm-.62.998a.59.59 0 0 1 .61-.557.57.57 0 0 1 .58.556h-1.19Zm3.086-.557c.253.002.501.07.72.196l.224-.403a1.713 1.713 0 0 0-.934-.24c-.586 0-.96.279-.96.735 0 .374.278.605.792.677l.24.033c.274.038.403.11.403.24 0 .178-.182.278-.523.278a1.222 1.222 0 0 1-.763-.24l-.24.39c.29.202.637.306.991.297.66 0 1.044-.346 1.044-.749s-.302-.614-.802-.686l-.24-.034c-.216-.029-.388-.058-.388-.226s.163-.268.436-.268Zm5.201-.384a1.062 1.062 0 0 0-.355-.063l.01.01a.677.677 0 0 0-.605.336v-.278h-.495v2.291h.5v-1.284c0-.379.153-.59.48-.59a.809.809 0 0 1 .312.058l.153-.48Zm3.096 1.95a.24.24 0 0 1 .166.066.223.223 0 0 1-.074.37.227.227 0 0 1-.092.019.24.24 0 0 1-.216-.14.225.225 0 0 1 .05-.25.238.238 0 0 1 .075-.047.238.238 0 0 1 .08-.015l.011-.002Zm.07.392a.172.172 0 0 1-.07.015v-.01a.178.178 0 0 1-.127-.053.178.178 0 0 1 0-.24.18.18 0 0 1 .197-.038.177.177 0 0 1 0 .326Zm-.055-.271a.096.096 0 0 1 .062.02.06.06 0 0 1 .022.05.058.058 0 0 1-.017.043.084.084 0 0 1-.05.021l.069.08h-.055l-.065-.08h-.022v.08h-.045v-.212l.1-.002Zm-.053.098v-.057l.053.014a.05.05 0 0 1 .028 0 .024.024 0 0 1 0 .022.024.024 0 0 1 0 .021.05.05 0 0 1-.028 0h-.053Z"
-      fill="#fff"
-    />
-    <Path fill="#7673C0" d="M20.018 5.794h7.56V19.38h-7.56z" />
-    <Path
-      d="M20.498 12.586a8.626 8.626 0 0 1 3.3-6.792 8.64 8.64 0 1 0 0 13.586 8.626 8.626 0 0 1-3.3-6.794Z"
+      d="M18.3276 14.8324c-.0035-4.5495 2.085-8.84799 5.6638-11.65693-6.0799-4.7781-14.81073-4.08212-20.05683 1.5988-5.24609 5.68093-5.24609 14.43953 0 20.12043 5.2461 5.6809 13.97693 6.3769 20.05683 1.5988-3.58-2.8099-5.6686-7.1101-5.6638-11.6611Z"
       fill="#EB001B"
     />
     <Path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M37.018 17.774v.823h-.083v-.823h-.155v-.17h.393v.17h-.155Zm.762-.17v.993l-.083.007v-.752l-.128.646h-.09l-.128-.646v.745h-.086v-.993h.119l.139.71.138-.71h.119Z"
-      fill="#00A1DF"
-    />
-    <Path
-      d="M37.778 12.586a8.64 8.64 0 0 1-13.98 6.792 8.64 8.64 0 0 0 0-13.587 8.64 8.64 0 0 1 13.98 6.793v.002Z"
+      d="M46.4766 25v-.8294h.3081v-.169H46v.169h.3082V25h.1684ZM48 25v-1h-.2405l-.2767.6878L47.2061 24h-.2407v1h.1699v-.7543l.2594.6503h.1761l.2595-.652V25H48ZM47.985 14.8325C47.9849 20.51 44.7431 25.689 39.6364 28.17s-11.1817 1.8285-15.6449-1.6805c3.5772-2.8114 5.6658-7.1093 5.6658-11.659 0-4.5498-2.0886-8.84772-5.6658-11.65904C28.4547-.33753 34.5297-.99009 39.6364 1.49092c5.1067 2.48101 8.3485 7.66002 8.3486 13.33748v.0041Z"
       fill="#00A1DF"
     />
   </Svg>

package/src/components/logos/svg/LogoPaymentExtMastercard.tsx

@@ -2,35 +2,18 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGLogoProps } from "../LogoPayment";
 
-const LogoPaymentExtMaestro = ({ size }: SVGLogoProps) => (
+const LogoPaymentExtMastercard = ({ size }: SVGLogoProps) => (
   <Svg width={size} height={size} viewBox="0 0 48 30">
+    <Path fill="#FF5F00" d="M17.5039 3.17151h12.975v23.318h-12.975z" />
     <Path
-      d="M46.272 29.904H1.656c-.888 0-1.584-.72-1.584-1.584V1.632C.072.744.792.048 1.656.048h44.592c.888 0 1.584.72 1.584 1.584V28.32a1.547 1.547 0 0 1-1.56 1.584Z"
-      fill="#000"
-    />
-    <Path fill="#000" d="M3.84 2.16h40.397v25.546H3.84z" />
-    <Path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M36.67 24.43v-2.076h-.461v1.2a.91.91 0 0 0-.744-.336 1.206 1.206 0 1 0 0 2.412.91.91 0 0 0 .744-.336v.278h.46V24.43Zm-14.907-1.15h.835l-.002.413h-.835v1.102c0 .23.11.384.35.384a.923.923 0 0 0 .442-.13l.144.408a1.174 1.174 0 0 1-.624.178c-.59 0-.778-.317-.778-.85v-1.087h-.48v-.418h.48v-.696h.468v.696Zm-6.643.852v1.44l-.478.003v-1.323c0-.389-.182-.605-.523-.605a.554.554 0 0 0-.58.61v1.318h-.466v-1.323c0-.389-.187-.605-.519-.605a.552.552 0 0 0-.58.61v1.32h-.466V23.28h.473v.281a.785.785 0 0 1 .691-.336c.308-.013.6.144.758.408a.89.89 0 0 1 .807-.408.838.838 0 0 1 .883.907Zm11.74-.91a.72.72 0 0 0-.623.337v-.279h-.456v2.297h.46v-1.296c0-.38.183-.624.51-.624a.812.812 0 0 1 .311.058l.154-.435a1.067 1.067 0 0 0-.355-.062v.005Zm-7.38 0c.33-.01.654.073.937.24l-.209.382a1.48 1.48 0 0 0-.72-.197c-.274 0-.456.14-.456.284 0 .144.192.21.408.24l.24.033c.497.072.778.238.778.675 0 .436-.368.744-1.03.744a1.714 1.714 0 0 1-.994-.298l.24-.36c.22.165.49.25.764.24.34 0 .542-.115.542-.293 0-.13-.149-.225-.422-.264l-.24-.033c-.514-.072-.773-.298-.773-.672 0-.447.355-.72.936-.72Zm7.897 1.2a1.145 1.145 0 0 0 1.2 1.2 1.2 1.2 0 0 0 .825-.273l-.24-.36a1.01 1.01 0 0 1-.6.206.782.782 0 0 1 0-1.557c.217.002.428.075.6.206l.24-.36a1.2 1.2 0 0 0-.825-.273 1.145 1.145 0 0 0-1.2 1.2v.012Zm-4.366 0c0-.72.463-1.2 1.135-1.2l.008-.002c.645 0 1.082.48 1.082 1.2v.192H23.52c.044.346.345.6.694.588.242-.004.477-.088.667-.24l.24.341a1.397 1.397 0 0 1-.941.322 1.13 1.13 0 0 1-1.169-1.2Zm1.56-.61a.585.585 0 0 0-.421-.162.614.614 0 0 0-.63.58h1.231a.585.585 0 0 0-.18-.417Zm-6.643-.532V25.577h-.46v-.278a.91.91 0 0 1-.745.336 1.206 1.206 0 0 1 0-2.412.91.91 0 0 1 .744.336v-.279h.461Zm-1.86 1.145a.72.72 0 0 1 .72-.778.782.782 0 0 1 0 1.558.72.72 0 0 1-.72-.778v-.002Zm17.11-.864a.72.72 0 0 1 .624-.336v-.005c.12 0 .24.022.355.063l-.154.432a.812.812 0 0 0-.312-.058c-.326 0-.509.245-.509.624v1.296h-.46V23.28h.456v.281Zm4.324 1.685a.24.24 0 0 1 .166.065.223.223 0 0 1-.074.37.227.227 0 0 1-.092.018.24.24 0 0 1-.216-.139.225.225 0 0 1 .05-.25.238.238 0 0 1 .075-.047.237.237 0 0 1 .091-.024v.007Zm.07.391a.172.172 0 0 1-.07.014v-.004a.179.179 0 0 1-.07-.01.18.18 0 0 1-.057-.038.178.178 0 0 1 0-.24.174.174 0 0 1 .058-.039.176.176 0 0 1 .194.039.178.178 0 0 1 0 .24.184.184 0 0 1-.055.038Zm-.055-.271a.096.096 0 0 1 .062.019.06.06 0 0 1 .022.05.058.058 0 0 1-.017.044.085.085 0 0 1-.05.021l.07.08h-.056l-.065-.08h-.021v.08h-.046v-.212l.1-.002Zm-.053.098v-.057l.053.014a.052.052 0 0 1 .029 0 .024.024 0 0 1 0 .022.024.024 0 0 1 0 .021.05.05 0 0 1-.03 0h-.052Zm-5.431-1.034v-1.15h-.461v.279a.91.91 0 0 0-.744-.336 1.206 1.206 0 1 0 0 2.412.91.91 0 0 0 .744-.336v.278h.46V24.43Zm-1.67-.547a.72.72 0 0 0-.19.547v.002a.72.72 0 0 0 .72.778.782.782 0 0 0 0-1.558.72.72 0 0 0-.53.231Zm4.636 0a.72.72 0 0 0-.19.547l-.009-.005a.72.72 0 0 0 .72.775.782.782 0 0 0 .01-1.548.72.72 0 0 0-.531.231Z"
-      fill="#fff"
-    />
-    <Path fill="#FF5F00" d="M20.258 5.794h7.56V19.38h-7.56z" />
-    <Path
-      d="M20.738 12.588a8.626 8.626 0 0 1 3.3-6.792 8.64 8.64 0 1 0 0 13.587 8.626 8.626 0 0 1-3.3-6.795Z"
+      d="M18.3276 14.8324c-.0035-4.5495 2.085-8.84799 5.6638-11.65693-6.0799-4.7781-14.81073-4.08212-20.05683 1.5988-5.24609 5.68093-5.24609 14.43953 0 20.12043 5.2461 5.6809 13.97693 6.3769 20.05683 1.5988-3.58-2.8099-5.6686-7.1101-5.6638-11.6611Z"
       fill="#EB001B"
     />
     <Path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M37.265 17.778v.828h-.083v-.828h-.155v-.172h.393v.172h-.155Zm.762-.172v1h-.086v-.757l-.128.65h-.09l-.128-.65v.757h-.083v-1h.12l.138.715.138-.715h.12Z"
-      fill="#F79E1B"
-    />
-    <Path
-      d="M38.018 12.588a8.64 8.64 0 0 1-13.98 6.792 8.64 8.64 0 0 0 0-13.586 8.64 8.64 0 0 1 13.98 6.792v.002Z"
+      d="M46.4766 25v-.8294h.3081v-.169H46v.169h.3082V25h.1684ZM48 25v-1h-.2405l-.2767.6878L47.2061 24h-.2407v1h.1699v-.7543l.2594.6503h.1761l.2595-.652V25H48ZM47.985 14.8325C47.9849 20.51 44.7431 25.689 39.6364 28.17s-11.1817 1.8285-15.6449-1.6805c3.5772-2.8114 5.6658-7.1093 5.6658-11.659 0-4.5498-2.0886-8.84772-5.6658-11.65904C28.4547-.33753 34.5297-.99009 39.6364 1.49092c5.1067 2.48101 8.3485 7.66002 8.3486 13.33748v.0041Z"
       fill="#F79E1B"
     />
   </Svg>
 );
 
-export default LogoPaymentExtMaestro;
+export default LogoPaymentExtMastercard;

package/src/components/logos/svg/LogoPaymentExtPayPal.tsx

@@ -1,46 +1,24 @@
 import React from "react";
-import { Svg, Path, Rect } from "react-native-svg";
+import { Svg, Path } from "react-native-svg";
 import { SVGLogoProps } from "../LogoPayment";
 
 const LogoPaymentExtPayPal = ({ size }: SVGLogoProps) => (
-  <Svg width={size} height={size} viewBox="0 0 49 31">
-    <Rect
-      x="1"
-      y="1"
-      width="47.5"
-      height="29.5"
-      rx="2"
-      fill="#fff"
-      stroke="#E6E9F2"
-      stroke-width=".5"
-    />
+  <Svg width={size} height={size} viewBox="0 0 48 30">
     <Path
-      d="m22.853 19.206.273-1.733-.608-.014h-2.902l2.017-12.785a.165.165 0 0 1 .164-.14h4.892c1.624 0 2.745.338 3.33 1.005.274.313.45.64.534 1 .088.378.09.829.003 1.379l-.006.04v.353l.274.155c.21.106.398.25.556.424.235.267.386.607.45 1.01.067.415.045.909-.064 1.467-.125.643-.327 1.202-.6 1.66-.242.41-.566.766-.952 1.043a3.859 3.859 0 0 1-1.282.579 6.392 6.392 0 0 1-1.603.185h-.38c-.273 0-.537.098-.745.274a1.152 1.152 0 0 0-.388.692l-.028.156-.482 3.054-.022.112c-.006.036-.016.053-.03.065a.081.081 0 0 1-.05.019h-2.351Z"
+      d="m18.8221 28.2894.491-3.119-1.0938-.0254h-5.2232l3.6298-23.01568c.0224-.14534.1478-.2524.2949-.25163h8.807c2.9238 0 4.9415.60842 5.995 1.8093.4939.56335.8084 1.15205.9605 1.7999.1596.67978.1624 1.49194.0066 2.4825l-.0113.0723v.63471l.4939.27979c.377.19102.7159.4494.9999.7624.4226.48171.6958 1.09381.8113 1.81961.1192.7465.0798 1.6347-.1155 2.6403-.2254 1.1567-.5897 2.1642-1.0817 2.9885a6.14686 6.14686 0 0 1-1.7135 1.8779c-.6535.4638-1.43.8159-2.3078 1.0412-.8507.2216-1.8206.3333-2.8844.3333h-.6854c-.4901 0-.9662.1766-1.3398.493a2.07504 2.07504 0 0 0-.6986 1.2468l-.0516.2808-.8676 5.4973-.0394.2019c-.0104.0639-.0282.0958-.0545.1174a.1453.1453 0 0 1-.0901.0328h-4.2317Z"
       fill="#253B80"
     />
     <Path
-      d="M31.084 7.999a8.738 8.738 0 0 1-.05.287c-.645 3.312-2.852 4.456-5.671 4.456h-1.436a.697.697 0 0 0-.689.59l-.735 4.662-.208 1.32a.367.367 0 0 0 .363.425h2.545c.302 0 .558-.219.605-.516l.026-.13.479-3.041.03-.167a.612.612 0 0 1 .606-.518h.38c2.467 0 4.398-1.001 4.962-3.899.236-1.21.114-2.221-.51-2.932a2.433 2.433 0 0 0-.697-.537Z"
-      fill="#179BD7"
-    />
-    <Path
-      d="M30.41 7.73a5.087 5.087 0 0 0-.628-.14 7.971 7.971 0 0 0-1.265-.092h-3.835a.611.611 0 0 0-.604.518l-.816 5.166-.024.15a.697.697 0 0 1 .69-.59h1.435c2.819 0 5.026-1.144 5.671-4.456.019-.098.036-.194.05-.287a3.434 3.434 0 0 0-.675-.27Z"
-      fill="#222D65"
+      d="M33.6404 8.11493c-.0263.16807-.0564.33989-.0902.5164-1.1614 5.96307-5.1349 8.02307-10.2098 8.02307h-2.5839c-.6206 0-1.1436.4507-1.2403 1.0628l-1.3229 8.3902-.3746 2.3783a.66074.66074 0 0 0 .1502.5325c.1255.147.309.2318.5023.2318h4.5829c.5427 0 1.0037-.3944 1.0891-.9296l.0451-.2328.8629-5.4758.0553-.3004c.0846-.5371.5465-.9314 1.0892-.9314h.6854c4.4401 0 7.916-1.8028 8.9319-7.0194.4244-2.1792.2047-3.9988-.9182-5.27859a4.38323 4.38323 0 0 0-1.2544-.96708Z"
+      fill="#0070E0"
     />
     <Path
-      d="M24.078 8.016a.611.611 0 0 1 .604-.518h3.835c.454 0 .878.03 1.265.092.262.042.52.104.772.185.19.063.367.138.53.224.192-1.224 0-2.058-.663-2.812C29.691 4.356 28.375 4 26.69 4h-4.892a.7.7 0 0 0-.69.59l-2.039 12.917a.42.42 0 0 0 .415.486h3.02l.759-4.81.816-5.167Z"
-      fill="#253B80"
-    />
-    <Path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M15.782 21.18h-1.803a.25.25 0 0 0-.248.21l-.73 4.624a.15.15 0 0 0 .15.174h.86a.25.25 0 0 0 .248-.212l.197-1.247a.25.25 0 0 1 .247-.212h.57c1.188 0 1.874-.575 2.053-1.713.08-.499.003-.89-.23-1.164-.256-.302-.71-.46-1.314-.46Zm.208 1.688c-.099.647-.593.647-1.071.647h-.272l.19-1.208a.15.15 0 0 1 .149-.127h.125c.325 0 .632 0 .791.185.095.111.124.276.088.503Zm4.318-.021h.863a.15.15 0 0 1 .148.173l-.466 2.956a.25.25 0 0 1-.248.212h-.778a.15.15 0 0 1-.148-.175l.039-.24s-.427.495-1.195.495c-.448 0-.825-.13-1.088-.44-.287-.337-.404-.82-.322-1.326.16-1.014.974-1.736 1.928-1.736.416 0 .833.09 1.02.362l.06.087.039-.241a.15.15 0 0 1 .148-.127Zm-.34 1.68a.962.962 0 0 1-.974.825c-.251 0-.451-.08-.58-.233-.128-.151-.176-.367-.136-.607a.966.966 0 0 1 .968-.83c.245 0 .445.081.576.235.131.155.184.372.146.61Zm4.934-1.68h.868a.15.15 0 0 1 .123.236l-2.886 4.166a.25.25 0 0 1-.205.107h-.867a.15.15 0 0 1-.123-.237l.899-1.268-.956-2.805a.15.15 0 0 1 .143-.199h.852c.111 0 .209.073.24.179l.508 1.694 1.197-1.763a.252.252 0 0 1 .207-.11Z"
-      fill="#253B80"
+      d="M32.425 7.63047a9.15908 9.15908 0 0 0-1.1295-.25069 14.34964 14.34964 0 0 0-2.2778-.16619h-6.9029c-.5428-.00033-1.0048.39504-1.0882.93141l-1.4685 9.3009-.0422.2714c.0945-.6118.6212-1.0632 1.2403-1.0629h2.5839c5.0748 0 9.0483-2.0609 10.2098-8.02304.0347-.17652.0638-.34834.0901-.51641a6.19233 6.19233 0 0 0-.9549-.40279 8.39347 8.39347 0 0 0-.2601-.08169Z"
+      fill="#001C64"
     />
     <Path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="m34.31 26.014.74-4.708a.15.15 0 0 1 .148-.127h.833a.15.15 0 0 1 .148.174l-.73 4.623a.25.25 0 0 1-.247.212h-.744a.15.15 0 0 1-.148-.174Zm-5.667-4.835h-1.804a.25.25 0 0 0-.247.212l-.73 4.623a.15.15 0 0 0 .149.174h.925c.087 0 .16-.063.173-.148l.207-1.311a.25.25 0 0 1 .248-.212h.57c1.188 0 1.873-.575 2.053-1.713.08-.499.003-.89-.23-1.164-.257-.302-.71-.46-1.314-.46Zm.208 1.689c-.099.647-.593.647-1.071.647h-.272l.191-1.208a.15.15 0 0 1 .148-.127h.125c.325 0 .633 0 .791.185.095.111.124.276.088.503Zm4.318-.021h.863a.15.15 0 0 1 .15.173l-.468 2.956a.25.25 0 0 1-.247.212h-.778a.15.15 0 0 1-.148-.175l.038-.24s-.426.495-1.195.495c-.448 0-.824-.13-1.087-.44-.287-.337-.404-.82-.322-1.326.159-1.014.973-1.736 1.928-1.736.416 0 .832.09 1.02.362l.06.087.038-.241a.15.15 0 0 1 .148-.127Zm-.34 1.68a.962.962 0 0 1-.975.825c-.25 0-.45-.08-.58-.233-.127-.151-.175-.367-.135-.607a.967.967 0 0 1 .968-.83c.245 0 .444.081.575.235.133.155.185.372.147.61Z"
-      fill="#179BD7"
+      d="M21.0267 8.14499c.0826-.53662.5452-.93216 1.0882-.93047h6.9029c.8178 0 1.5811.05352 2.2778.16619a9.16165 9.16165 0 0 1 1.3906.33143c.3427.11361.661.24788.9548.4028.3456-2.20364-.0028-3.70403-1.1943-5.06264C31.1332 1.5566 28.7624.91626 25.7288.91626h-8.8071c-.6197 0-1.1483.45068-1.244 1.06379L12.0093 25.2323a.75701.75701 0 0 0 .1717.6095.75684.75684 0 0 0 .5747.2656h5.4373l1.3652-8.6615 1.4685-9.30091Z"
+      fill="#003087"
     />
   </Svg>
 );

package/src/components/logos/svg/LogoPaymentMaestro.tsx

@@ -1,15 +1,17 @@
 import React from "react";
-import { Svg, Rect, Circle, Path } from "react-native-svg";
+import { Svg, Path } from "react-native-svg";
 import { SVGLogoProps } from "../LogoPayment";
 
 const LogoPaymentMaestro = ({ size }: SVGLogoProps) => (
   <Svg width={size} height={size} viewBox="0 0 24 24">
-    <Rect y="4" width="24" height="16" rx="2" fill="#252525" />
-    <Circle cx="9" cy="12" r="5" fill="red" />
-    <Circle cx="15" cy="12" r="5" fill="#00A1DF" />
+    <Path fill="#7673C0" d="M8.75415 6.58813h6.48917v11.662H8.75415z" />
     <Path
-      d="M12 8c1.214.912 2 2.364 2 4a4.992 4.992 0 0 1-2 4 4.992 4.992 0 0 1-2-4c0-1.636.786-3.088 2-4Z"
-      fill="#7673C0"
+      d="M9.16616 12.4181c-.0018-2.2753 1.04274-4.42514 2.83254-5.82997-3.04065-2.38965-7.4072-2.04157-10.03091.79961-2.62372 2.84116-2.62372 7.22156 0 10.06276 2.62371 2.8412 6.99026 3.1892 10.03091.7996-1.7904-1.4053-2.83497-3.556-2.83254-5.832Z"
+      fill="#EB001B"
+    />
+    <Path
+      d="M23.2411 17.4813v-.4132h.1534v-.0841h-.3908v.0841h.1535v.4132h.0839Zm.7588 0v-.4981h-.1198l-.1378.3426-.1378-.3426h-.1199v.4981h.0846v-.3758l.1292.324h.0877l.1293-.3248v.3766h.0845ZM23.9986 12.4181c-.0001 2.8395-1.6214 5.4296-4.1754 6.6705-2.554 1.2408-5.5922.9144-7.8244-.8405 1.7891-1.406 2.8336-3.5555 2.8336-5.831 0-2.2754-1.0445-4.42495-2.8336-5.83097 2.2322-1.75494 5.2704-2.0813 7.8244-.84048 2.554 1.24082 4.1753 3.83098 4.1754 6.67045v.002Z"
+      fill="#00A1DF"
     />
   </Svg>
 );

package/src/components/logos/svg/LogoPaymentMastercard.tsx

@@ -1,15 +1,17 @@
 import React from "react";
-import { Svg, Rect, Circle, Path } from "react-native-svg";
+import { Svg, Path } from "react-native-svg";
 import { SVGLogoProps } from "../LogoPayment";
 
 const LogoPaymentMastercard = ({ size }: SVGLogoProps) => (
   <Svg width={size} height={size} viewBox="0 0 24 24">
-    <Rect y="4" width="24" height="16" rx="2" fill="#252525" />
-    <Circle cx="9" cy="12" r="5" fill="#EB001B" />
-    <Circle cx="15" cy="12" r="5" fill="#F79E1B" />
+    <Path fill="#FF5F00" d="M8.75195 5.58569h6.48752v11.659H8.75195z" />
     <Path
-      d="M12 8c1.214.912 2 2.364 2 4a4.992 4.992 0 0 1-2 4 4.992 4.992 0 0 1-2-4c0-1.636.786-3.088 2-4Z"
-      fill="#FF5F00"
+      d="M9.16382 11.4162c-.00179-2.27475 1.04248-4.42399 2.83188-5.82847-3.03993-2.38904-7.40537-2.04106-10.02841.7994-2.62305 2.84046-2.62305 7.21977 0 10.06017 2.62304 2.8405 6.98848 3.1885 10.02841.7994-1.79-1.4049-2.8343-3.555-2.83188-5.8305Z"
+      fill="#EB001B"
+    />
+    <Path
+      d="M23.2383 16.5v-.4147h.154v-.0845H23v.0845h.1541V16.5h.0842Zm.7617 0V16h-.1203l-.1383.3439L23.603 16h-.1203v.5h.0849v-.3772l.1298.3252h.088l.1297-.326v.378H24ZM23.9924 11.4163c-.0001 2.8387-1.621 5.4282-4.1743 6.6687-2.5534 1.2405-5.5909.9142-7.8225-.8403 1.7886-1.4056 2.833-3.5546 2.833-5.8295 0-2.27484-1.0444-4.42381-2.833-5.82947 2.2316-1.7545 5.2691-2.08077 7.8225-.84027 2.5533 1.24051 4.1742 3.83001 4.1743 6.66874v.0021Z"
+      fill="#F79E1B"
     />
   </Svg>
 );

package/src/components/logos/svg/LogoPaymentPayPal.tsx

@@ -5,15 +5,15 @@ import { SVGLogoProps } from "../LogoPayment";
 const LogoPaymentPayPal = ({ size }: SVGLogoProps) => (
   <Svg width={size} height={size} viewBox="0 0 24 24">
     <Path
-      d="M19.22 7.336c.26-1.634 0-2.746-.894-3.752C17.341 2.476 15.564 2 13.291 2H6.689a.952.952 0 0 0-.614.225.932.932 0 0 0-.319.564L3.007 20.023a.554.554 0 0 0 .323.596.572.572 0 0 0 .237.052h4.075l-.281 1.764a.484.484 0 0 0 .279.52.5.5 0 0 0 .206.046h3.435a.832.832 0 0 0 .532-.197.815.815 0 0 0 .278-.49l.035-.172.646-4.057.042-.229a.816.816 0 0 1 .28-.491.833.833 0 0 1 .536-.195h.513c3.328 0 5.934-1.336 6.695-5.203.318-1.616.154-2.963-.687-3.912a3.25 3.25 0 0 0-.94-.717"
-      fill="#009CDE"
+      d="M19.2206 8.31688c.2592-1.63369 0-2.74569-.8944-3.7513-.9846-1.10858-2.7618-1.5845-5.0354-1.5845H6.68879c-.22503.00029-.44257.07995-.61351.22464-.17095.1447-.28408.34495-.31906.56475L3.0071 21.0043a.55436.55436 0 0 0 .01458.2396.55941.55941 0 0 0 .11462.2117.56714.56714 0 0 0 .19365.1448.57183.57183 0 0 0 .23716.0514h4.07508l-.28116 1.7641a.4841.4841 0 0 0 .01218.2085.48744.48744 0 0 0 .09894.1845.49417.49417 0 0 0 .16771.127.49976.49976 0 0 0 .20597.0463h3.43527c.1952-.0013.3837-.071.532-.1966.1483-.1257.2467-.2992.2779-.4898l.0347-.1728.6468-4.0567.0416-.2288c.0316-.1915.1309-.3657.2804-.4914.1494-.1257.3391-.1949.5353-.1951h.5138c3.3276 0 5.9332-1.3362 6.6946-5.203.3182-1.6154.1539-2.96311-.6873-3.91152-.2664-.29417-.5852-.53733-.9407-.71731"
+      fill="#0070E0"
     />
     <Path
-      d="M19.22 7.336c.26-1.634 0-2.746-.894-3.752C17.341 2.476 15.564 2 13.291 2H6.689a.952.952 0 0 0-.614.225.932.932 0 0 0-.319.564L3.007 20.023a.554.554 0 0 0 .323.596.572.572 0 0 0 .237.052h4.075l1.024-6.418-.031.201a.927.927 0 0 1 .315-.563.946.946 0 0 1 .61-.225h1.937c3.805 0 6.783-1.529 7.653-5.95.025-.13.047-.257.067-.381"
-      fill="#012169"
+      d="M19.2206 8.31688c.2592-1.63369 0-2.74569-.8944-3.7513-.9846-1.10858-2.7618-1.5845-5.0354-1.5845H6.68879c-.22503.00029-.44257.07995-.61351.22464-.17095.1447-.28408.34495-.31906.56475L3.0071 21.0043a.55436.55436 0 0 0 .01458.2396.55941.55941 0 0 0 .11462.2117.56714.56714 0 0 0 .19365.1448.57183.57183 0 0 0 .23716.0514h4.07508l1.02397-6.4181-.03124.2014c.03393-.2189.14585-.4187.31557-.5632.16972-.1445.38608-.2243.61006-.225h1.93685c3.8044 0 6.7826-1.5285 7.6527-5.94905.0254-.13042.0474-.25741.0671-.38211"
+      fill="#001C64"
     />
     <Path
-      d="M9.765 7.358a.812.812 0 0 1 .463-.61.826.826 0 0 1 .356-.08h5.175c.571-.004 1.142.037 1.706.123a7.014 7.014 0 0 1 .847.186l.196.06c.246.08.485.18.715.299.259-1.634 0-2.746-.895-3.752C17.344 2.476 15.567 2 13.293 2H6.689a.952.952 0 0 0-.614.225.932.932 0 0 0-.319.564L3.007 20.023a.554.554 0 0 0 .323.596.572.572 0 0 0 .237.052h4.075l1.024-6.418 1.1-6.895Z"
+      d="M9.76535 8.33862a.81197.81197 0 0 1 .15504-.36155c.08061-.10626.18631-.19146.30781-.24823a.82557.82557 0 0 1 .3563-.08008h5.1743a10.85686 10.85686 0 0 1 1.7066.12356c.1493.02288.2951.05034.4362.08123.1412.03089.2777.06635.4108.1041l.1955.06064c.2463.07968.4855.17956.715.29859.2592-1.63369.0001-2.74569-.8943-3.7513-.9847-1.10858-2.7619-1.5845-5.0355-1.5845H6.68879c-.22503.00029-.44257.07995-.61351.22464-.17095.1447-.28408.34495-.31906.56475L3.0071 21.0043a.55436.55436 0 0 0 .01458.2396.55941.55941 0 0 0 .11462.2117.56714.56714 0 0 0 .19365.1448.57183.57183 0 0 0 .23716.0514h4.07508l1.02397-6.4181 1.09919-6.89508Z"
       fill="#003087"
     />
   </Svg>