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

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>

package/src/components/radio/AnimatedRadio.tsx

@@ -1,16 +1,16 @@
 import React, { useEffect } from "react";
-import { StyleSheet, View, Pressable, PressableProps } from "react-native";
+import { Pressable, PressableProps, StyleSheet, View } from "react-native";
 import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
+  Easing,
   interpolate,
+  useAnimatedStyle,
+  useSharedValue,
   withSpring,
-  withTiming,
-  Easing
+  withTiming
 } from "react-native-reanimated";
-import { IOSelectionTickVisualParams } from "../../core/IOStyles";
 import { IOSpringValues } from "../../core/IOAnimations";
 import { IOColors } from "../../core/IOColors";
+import { IOSelectionTickVisualParams } from "../../core/IOStyles";
 import { AnimatedTick } from "../common/AnimatedTick";
 
 type Props = {
@@ -83,7 +83,6 @@ export const AnimatedRadio = ({ checked, onPress, disabled }: OwnProps) => {
       onPress={onPress}
       style={styles.radioWrapper}
     >
-      {/* ◀ REMOVE_LEGACY_COMPONENT: Remove the following conditions */}
       <View
         style={[
           styles.radioBorder,
@@ -103,7 +102,6 @@ export const AnimatedRadio = ({ checked, onPress, disabled }: OwnProps) => {
           animatedCheckboxSquare
         ]}
       />
-      {/* REMOVE_LEGACY_COMPONENT: End ▶ */}
       {isChecked && (
         <View>
           <AnimatedTick

package/src/components/radio/RadioGroup.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { View } from "react-native";
+import { Divider } from "../divider";
+import { IOIcons } from "../icons";
+import { ListItemRadio } from "../listitems/ListItemRadio";
+
+export type NewRadioItem<T> = {
+  id: T;
+  value: string;
+  description?: string;
+  icon?: IOIcons;
+  disabled?: boolean;
+};
+
+type Props<T> = {
+  items: ReadonlyArray<NewRadioItem<T>>;
+  selectedItem?: T;
+  onPress: (selected: T) => void;
+};
+
+/**
+ * A list of radio buttons.
+ * The management of the selection is demanded and derived by the `selectedItem` prop.
+ * The item with the `id` equal to the `selectedItem` is the active one.
+ */
+export const RadioGroup = <T,>({ items, selectedItem, onPress }: Props<T>) => (
+  <View>
+    {items.map((item, index) => (
+      <React.Fragment key={`radio_item_${item.id}`}>
+        <ListItemRadio
+          testID={`RadioItemTestID_${item.id}`}
+          value={item.value}
+          description={item.description}
+          icon={item.icon}
+          disabled={item.disabled}
+          onValueChange={() => onPress(item.id)}
+          selected={selectedItem === item.id}
+        />
+        {index < items.length - 1 && <Divider />}
+      </React.Fragment>
+    ))}
+  </View>
+);

package/src/components/radio/index.tsx

@@ -1 +1,2 @@
 export * from "./AnimatedRadio";
+export * from "./RadioGroup";

package/src/components/typography/H3.tsx

@@ -1,101 +1,35 @@
-import React from "react";
-import type { IOColors, IOTheme } from "../../core/IOColors";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
+import * as React from "react";
+import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
+import { IOColorsStatusForeground, IOTheme } from "../../core";
+import { ExternalTypographyProps, TypographyProps } from "./common";
 import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, RequiredTypographyProps } from "./common";
 
-// these colors are allowed only when the weight is SemiBold
-type AllowedSemiBoldColors = Extract<
-    IOColors,
-    | "bluegreyDark"
-    | "bluegreyLight"
-    | "white"
-    | "red"
-    | "blue"
-    | "bluegrey"
-    | "grey"
->;
+type AllowedColors = IOColorsStatusForeground | IOTheme["textHeading-default"];
+type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular">;
 
-// when the weight is bold, only the white color is allowed
-type AllowedBoldColors = Extract<
-    IOColors,
-    | "white"
-    | "bluegreyLight"
-    | "black"
-    | "bluegreyDark"
-    | "blue"
-    | "bluegrey"
-    | "grey-200"
+type OwnProps = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
 >;
 
-// all the possible colors
-type AllowedColors =
-    | AllowedBoldColors
-    | AllowedSemiBoldColors
-    | IOTheme["textHeading-default"];
-
-// all the possible weight
-type AllowedWeight = Extract<IOFontWeight, "Bold" | "SemiBold">;
-
-// these are the properties allowed only if weight is undefined or SemiBold
-type SemiBoldProps = {
-    weight?: Extract<IOFontWeight, "SemiBold">;
-    color?: AllowedSemiBoldColors | IOTheme["textHeading-default"];
-};
-
-// these are the properties allowed only if weight is Bold
-type BoldProps = {
-    weight: Extract<IOFontWeight, "Bold">;
-    color?: AllowedBoldColors | IOTheme["textHeading-default"];
-};
-
-type BoldKindProps = SemiBoldProps | BoldProps;
-
-type OwnProps = ExternalTypographyProps<BoldKindProps>;
-
-export const h3FontSize = 18;
-export const h3LineHeight = 22;
-
-/**
- * A custom function to calculate the values if no weight or color is provided.
- * The choose of the default color depends on the weight, for this reason cannot be used
- * the default calculateWeightColor with fallback if undefined.
- * @param weight
- * @param color
- */
-export const calculateH3WeightColor = (
-    weight?: AllowedWeight,
-    color?: AllowedColors
-): RequiredTypographyProps<AllowedWeight, AllowedColors> => {
-    const newWeight = weight ?? "SemiBold";
-    const newColor =
-        color !== undefined
-            ? color
-            : newWeight === "SemiBold"
-                ? "bluegreyDark"
-                : "white";
-    return {
-        weight: newWeight,
-        color: newColor
-    };
-};
+/* Common typographic styles */
+export const h3FontSize = 22;
+export const h3LineHeight = 33;
+/* New typographic styles */
+const h3FontName: IOFontFamily = "ReadexPro";
+const h3DefaultColor: AllowedColors = "black";
+const h3DefaultWeight: AllowedWeight = "Regular";
 
 /**
- * Typography component to render `H3` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `SemiBold`, color: `bluegreyDark`
+ * Typography component to render `H2` text with font size {@link fontSize} and fontFamily {@link fontName}.
+ * default values(if not defined) are weight: `Bold`, color: `bluegreyDark`
  * @param props
  * @constructor
  */
-export const H3: React.FC<OwnProps> = (props) => {
-    const fontName: FontFamily = "TitilliumWeb";
-    const weightColorFactory = React.useCallback(
-        () => calculateH3WeightColor(props.weight, props.color),
-        [props.weight, props.color]
-    );
-    return useTypographyFactory<AllowedWeight, AllowedColors>({
-        ...props,
-        weightColorFactory,
-        font: fontName,
-        fontStyle: { fontSize: h3FontSize, lineHeight: h3LineHeight }
-    });
-};
+export const H3: React.FunctionComponent<OwnProps> = props =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: h3DefaultWeight,
+    defaultColor: h3DefaultColor,
+    font: h3FontName,
+    fontStyle: { fontSize: h3FontSize, lineHeight: h3LineHeight }
+  });

package/src/components/typography/Link.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import type { IOColors } from "../../core/IOColors";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
+import * as React from "react";
+import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
+import type { IOColors } from "../../core";
 import { ExternalTypographyProps, TypographyProps } from "./common";
+import { useTypographyFactory } from "./Factory";
 
 type AllowedColors = IOColors;
 type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Bold">;
@@ -10,40 +10,33 @@ type FontSize = "regular" | "small";
 type AllowedFontSize = { fontSize?: FontSize };
 
 type OwnProps = ExternalTypographyProps<
-    TypographyProps<AllowedWeight, AllowedColors>
+  TypographyProps<AllowedWeight, AllowedColors>
 > &
-    AllowedFontSize;
+  AllowedFontSize;
+
+const fontName: IOFontFamily = "TitilliumWeb";
+const fontSizeMapping: Record<FontSize, number> = { regular: 16, small: 14 };
 
 export const linkDefaultColor: AllowedColors = "blueIO-500";
 export const linkDefaultWeight: AllowedWeight = "Bold";
 
 /**
  * Typography component to render `Link` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `Bold/SemiBold`, color: `blue/blueIO-500`
+ * default values(if not defined) are weight: `SemiBold`, color: `blue`
  * @param props`
  * @constructor
  */
-export const Link: React.FC<OwnProps> = (props) => {
-    const fontName: FontFamily = "TitilliumWeb";
-    const fontSizeMapping: Record<FontSize, number> = { regular: 16, small: 14 };
-
-    const defaultWeight = linkDefaultWeight;
-    const defaultColor = linkDefaultColor;
-
-    const defaultFontSize = props.fontSize
+export const Link: React.FunctionComponent<OwnProps> = props =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
+    accessibilityRole: props.onPress ? "link" : undefined,
+    ...props,
+    defaultWeight: linkDefaultWeight,
+    defaultColor: linkDefaultColor,
+    font: fontName,
+    fontStyle: {
+      fontSize: props.fontSize
         ? fontSizeMapping[props.fontSize]
-        : fontSizeMapping.regular;
-    const defaultTextDecorationLine = "underline";
-
-    return useTypographyFactory<AllowedWeight, AllowedColors>({
-        accessibilityRole: props.onPress ? "link" : undefined,
-        ...props,
-        defaultWeight,
-        defaultColor,
-        font: fontName,
-        fontStyle: {
-            fontSize: defaultFontSize,
-            textDecorationLine: defaultTextDecorationLine
-        },
-    });
-};
+        : fontSizeMapping.regular,
+      textDecorationLine: "underline"
+    }
+  });