@pagopa/io-app-design-system 1.11.3 → 1.13.0

package/src/components/logos/README.md

@@ -5,7 +5,8 @@ There are different sets:
 
 ## Prefixes
 - **Payment Logos**: `LogoPayment…`
-- **Payment Logos (extended)**: `LogoPaymentExt…`
+- **Payment Logos**: `LogoPaymentExt…`
+- **Payment Card Logos**: `LogoPaymentCard…`
 
 ## Add a new logo
 First of all, follow the instructions stated in the main README (`Vector graphics` section).

package/src/components/logos/index.tsx

@@ -2,3 +2,5 @@ export { default as LogoPayment } from "./LogoPayment";
 export * from "./LogoPayment";
 export { default as LogoPaymentExt } from "./LogoPaymentExt";
 export * from "./LogoPaymentExt";
+export { default as LogoPaymentCard } from "./LogoPaymentCard";
+export * from "./LogoPaymentCard";

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGCardLogoProps } from "../LogoPaymentCard";
+
+const LogoPaymentCardBancomatPay = ({
+  preserveAspectRatio
+}: SVGCardLogoProps) => (
+  <Svg viewBox="0 0 137 24" preserveAspectRatio={preserveAspectRatio}>
+    <Path
+      fill="#3FBDEE"
+      d="M104.986 10.8594 94.6035.4745c-.6327-.63267-1.6562-.63267-2.2889 0L81.9323 10.8568c-.6327.6327-.6327 1.6563 0 2.2864l10.3823 10.3823c.6327.6327 1.6562.6327 2.2889 0l10.3825-10.3823c.632-.6327.632-1.6563 0-2.2864v.0026Zm-7.0932 3.634c-.2674 2.1757-1.8465 3.225-4.4209 3.225H88.246l.3035-2.4226h5.1873c.6635 0 1.021-.4012 1.1085-1.1111.0102-.0771.0128-.1466.0128-.216h3.0733c-.0051.1646-.0154.3369-.0386.5247Zm2.0806-1.376H88.817l.27-2.186h5.0381c.7381 0 .9696-.5092 1.0442-1.12643.0746-.61723-.0309-1.003-.787-1.003h-5.033l.3035-2.51521h5.1487c2.9319 0 3.7188 1.24989 3.508 2.9627-.0849.69953-.2855 1.25764-.571 1.68194h.3009c1.1728 0 2.0806 1.0236 1.9366 2.1886l-.0026-.0026Z"
+    />
+    <Path
+      fill="#223264"
+      d="M1.4042 6.28671h4.56494c2.93184 0 3.71881 1.2499 3.50793 2.96271-.16203 1.32708-.72525 2.14488-1.54051 2.49978 1.00043.4012 1.31676 1.219 1.12902 2.7467-.26747 2.1757-1.84655 3.225-4.42092 3.225H0L1.4042 6.28671Zm3.88856 4.64209c.74067 0 .97213-.5092 1.04929-1.12644.07458-.61723-.03086-1.003-.78697-1.003H4.10459l-.26233 2.12944h1.4505Zm-.38063 4.3643c.66352 0 1.021-.4012 1.10844-1.111.08745-.7098-.16202-1.0647-.8564-1.0647H3.5748l-.26747 2.1757h1.6048ZM61.772 6.28672 60.3678 17.7158H57.436l.7844-6.3858.0257-.2186-.0849.2032-2.7029 6.4012H53.55l-1.1625-6.3961-.036-.198-.0257.2006-.7844 6.3935h-2.6515l1.4042-11.42908h2.1706c.9927 0 1.8363.70982 2.006 1.68967l.7638 4.44151.018.1029.0412-.0978 2.5949-6.13885h3.8834M67.4454 6.28672c.9695 0 1.8054.69181 1.9854 1.64338l1.8543 9.7857h-3.0939l-.2572-1.6022-.0051-.0258h-3.3742l-.0077.018-.6533 1.6074H60.895l4.9739-11.42905h1.5765v.00257ZM65.55 13.5289h1.9983l-.0052-.036-.5632-3.1633-.018-.1003-.0412.0951-1.3527 3.1634-.018.0437M30.3394 6.28671 28.9352 17.7158h-2.775l-2.8264-5.9512-.0463-.0951-.0128.1054-.7304 5.9434h-2.8522l1.4042-11.42902h1.8852c.7844 0 1.5096.46036 1.8414 1.17017l1.9365 4.13035.0463.0977.0129-.1055.6506-5.29272h2.8702M36.3806 6.14787c1.2653 0 2.3634.30348 3.1813.87442l-1.9212 2.51007c-.4526-.29833-1.0518-.45521-1.7359-.45521-1.3116 0-1.9906.45264-2.3069 3.01925-.1723 1.4094-.0798 2.2272.3009 2.6593.2571.2906.6455.414 1.2962.414.7072 0 1.2576-.162 1.9519-.576l1.1985 2.3326c-.967.5581-1.9623.9284-3.6571.9284-1.5354 0-2.6181-.3806-3.3125-1.1676-.8229-.931-1.093-2.4612-.8204-4.6781.2392-1.9546.7253-3.29962 1.5277-4.23318.9438-1.09816 2.3506-1.63309 4.2975-1.63309"
+    />
+    <Path
+      fill="#223264"
+      d="M44.3918 6.14786c1.6228 0 2.7595.39348 3.4745 1.2036.8307.9387 1.075 2.37377.7947 4.65494-.2263 1.8491-.6738 3.1453-1.4094 4.0763-.9438 1.1959-2.3506 1.7745-4.3077 1.7745-1.6254 0-2.7673-.396-3.4874-1.2087-.8204-.9284-1.075-2.3995-.8024-4.6344.2289-1.8568.6764-3.15557 1.4119-4.08913.9439-1.19589 2.3584-1.77711 4.3207-1.77711h.0051Zm-1.1161 9.05784c1.7925 0 2.0985-1.3347 2.3146-3.081.1543-1.2499.1594-2.1243-.2855-2.62836-.2649-.3009-.6841-.4475-1.2782-.4475-.8152 0-1.3605.2649-1.7205.83069-.3601.56577-.5041 1.40937-.6044 2.23747-.1543 1.255-.1594 2.1346.2855 2.6412.2674.3035.6918.4501 1.2936.4501M80.7261 6.28671l-.337 2.74668h-3.423l-1.0622 8.68491h-3.0398l1.0621-8.68491h-3.0038l.3369-2.74668h9.4668ZM8.76221 17.7158h2.99869l.6533-1.6073.0077-.018h3.3742l.0051.0257.2572 1.6022h3.0939L17.298 7.93271c-.18-.95413-1.0159-1.64337-1.9854-1.64337h-1.5765L8.76221 17.7184v-.0026Zm6.61719-4.1843h-1.9622l.018-.0437 1.3527-3.1633.0412-.0952.018.1003.5632 3.1633.0051.036h-.036v.0026Z"
+    />
+    <Path
+      fill="#3EBEEF"
+      d="M121.736 6.28672c.969 0 1.805.69181 1.985 1.64338l1.855 9.7857h-3.094l-.257-1.6022-.006-.0258h-3.374l-.008.018-.653 1.6074h-2.998l4.973-11.42905h1.577v.00257Zm-1.895 7.24218h1.998l-.005-.036-.564-3.1633-.018-.1003-.041.0951-1.353 3.1634-.017.0437M116.279 7.26657c-.577-.65067-1.556-.97986-2.917-.97986h-4.765l-1.405 11.42909h2.963l.414-3.3691v-.0283h1.736c1.433 0 2.554-.4089 3.333-1.2164.671-.697 1.091-1.6871 1.245-2.9422.159-1.30643-.039-2.25286-.604-2.89323Zm-2.367 3.08873c-.123 1.0107-.511 1.4222-1.334 1.4222h-1.695l.005-.0334.347-2.8213v-.02829h1.69c.378 0 .64.09002.802.27261.198.22375.257.6018.185 1.18818ZM136.014 6.28671l-4.685 7.78479v.0052l-.005.0077-.445 3.6339h-3.009l.452-3.6879v-.0129l-2.754-7.72822h3.207l1.486 4.49292.021.0643.033-.0591 2.608-4.49812h3.091M135.66 17.3609c-.237.2366-.522.3549-.857.3549-.334 0-.619-.1183-.856-.3549-.234-.2366-.35-.5221-.35-.859s.118-.6172.355-.8538c.234-.2341.52-.3524.851-.3524.332 0 .62.1183.857.3524.236.2366.355.5195.355.8538 0 .3344-.119.6224-.355.859Zm-1.592-1.5945c-.203.2032-.304.45-.304.7381 0 .288.101.5375.301.7432.203.2058.448.3061.738.3061.291 0 .535-.1029.736-.3061.203-.2057.303-.4526.303-.7432 0-.2906-.1-.5324-.303-.7381-.203-.2058-.45-.3061-.736-.3061-.285 0-.532.1029-.735.3061Zm.712.0669c.165 0 .286.0154.363.0488.136.0566.206.1698.206.3369 0 .1183-.044.2058-.129.2623-.046.0309-.111.0515-.193.0643.103.0155.18.0592.229.1286.049.0695.072.1389.072.2058v.0977c0 .0309 0 .0643.003.1003 0 .036.005.0566.01.0694l.008.0155h-.219V17.15s-.005-.0103-.005-.0154l-.005-.0437v-.1055c0-.1543-.041-.2546-.126-.3035-.049-.0282-.137-.0437-.26-.0437h-.185v.5221h-.234v-1.3296h.465v.0026Zm.252.2083c-.059-.0335-.154-.0489-.283-.0489h-.2v.4809h.211c.1 0 .175-.0103.223-.0308.09-.036.137-.1055.137-.2083 0-.0978-.029-.1621-.088-.1955v.0026Z"
+    />
+  </Svg>
+);
+
+export default LogoPaymentCardBancomatPay;

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

@@ -0,0 +1,38 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGCardLogoProps } from "../LogoPaymentCard";
+
+const LogoPaymentCardPayPal = ({ preserveAspectRatio }: SVGCardLogoProps) => (
+  <Svg viewBox="0 0 170 48" preserveAspectRatio={preserveAspectRatio}>
+    <Path
+      fill="#003087"
+      d="M62.56 28.672a10.111 10.111 0 0 0 9.983-8.56c.78-4.967-3.101-9.303-8.6-9.303H55.08a.689.689 0 0 0-.69.585l-3.95 25.072a.643.643 0 0 0 .634.742h4.69a.689.689 0 0 0 .688-.585l1.162-7.365a.689.689 0 0 1 .689-.586h4.257Zm3.925-8.786c-.29 1.836-1.709 3.189-4.425 3.189h-3.474l1.053-6.68h3.411c2.81.006 3.723 1.663 3.435 3.496v-.005Zm26.378-1.18H88.41a.69.69 0 0 0-.69.585l-.144.924s-3.457-3.775-9.575-1.225c-3.51 1.461-5.194 4.48-5.91 6.69 0 0-2.277 6.718 2.87 10.417 0 0 4.771 3.556 10.145-.22l-.093.589a.642.642 0 0 0 .634.742h4.451a.689.689 0 0 0 .69-.585l2.708-17.175a.643.643 0 0 0-.634-.742Zm-6.547 9.492a4.996 4.996 0 0 1-4.996 4.276 4.513 4.513 0 0 1-1.397-.205c-1.92-.616-3.015-2.462-2.7-4.462a4.996 4.996 0 0 1 5.014-4.277c.474-.005.946.065 1.398.206 1.913.614 3.001 2.46 2.686 4.462h-.005Z"
+    />
+    <Path
+      fill="#0070E0"
+      d="M126.672 28.672a10.115 10.115 0 0 0 9.992-8.56c.779-4.967-3.101-9.303-8.602-9.303h-8.86a.69.69 0 0 0-.689.585l-3.962 25.079a.637.637 0 0 0 .365.683.64.64 0 0 0 .269.06h4.691a.69.69 0 0 0 .689-.586l1.163-7.365a.688.688 0 0 1 .689-.586l4.255-.007Zm3.925-8.786c-.29 1.836-1.709 3.189-4.426 3.189h-3.473l1.054-6.68h3.411c2.808.006 3.723 1.663 3.434 3.496v-.005Zm26.377-1.18h-4.448a.69.69 0 0 0-.689.585l-.146.924s-3.456-3.775-9.574-1.225c-3.509 1.461-5.194 4.48-5.911 6.69 0 0-2.276 6.718 2.87 10.417 0 0 4.772 3.556 10.146-.22l-.093.589a.637.637 0 0 0 .365.683c.084.04.176.06.269.06h4.451a.686.686 0 0 0 .689-.586l2.709-17.175a.657.657 0 0 0-.148-.518.632.632 0 0 0-.49-.224Zm-6.546 9.492a4.986 4.986 0 0 1-4.996 4.276 4.513 4.513 0 0 1-1.399-.205c-1.921-.616-3.017-2.462-2.702-4.462a4.996 4.996 0 0 1 4.996-4.277c.475-.005.947.064 1.399.206 1.933.614 3.024 2.46 2.707 4.462h-.005Z"
+    />
+    <Path
+      fill="#003087"
+      d="m109.205 19.131-5.367 9.059-2.723-8.992a.69.69 0 0 0-.664-.492h-4.842a.516.516 0 0 0-.496.689l4.88 15.146-4.413 7.138a.517.517 0 0 0 .442.794h5.217a.858.858 0 0 0 .741-.418l13.632-22.552a.516.516 0 0 0-.446-.789h-5.215a.858.858 0 0 0-.746.417Z"
+    />
+    <Path
+      fill="#0070E0"
+      d="m161.982 11.387-3.962 25.079a.637.637 0 0 0 .365.683c.084.04.176.06.269.06h4.689a.688.688 0 0 0 .689-.586l3.963-25.079a.637.637 0 0 0-.146-.517.645.645 0 0 0-.488-.225h-4.69a.69.69 0 0 0-.689.585Z"
+    />
+    <Path
+      fill="#001C64"
+      d="M37.146 22.26c-1.006 5.735-5.685 10.07-11.825 10.07h-3.898c-.795 0-1.596.736-1.723 1.55l-1.707 10.835c-.099.617-.388.822-1.013.822h-6.27c-.634 0-.784-.212-.689-.837l.72-7.493-7.526-.389c-.633 0-.862-.345-.772-.977l5.135-32.56c.099-.617.483-.882 1.106-.882h13.023c6.269 0 10.235 4.22 10.72 9.692 3.73 2.52 5.474 5.873 4.72 10.168Z"
+    />
+    <Path
+      fill="#0070E0"
+      d="m12.649 25.075-1.907 12.133-1.206 7.612a1.034 1.034 0 0 0 1.016 1.19h6.622a1.27 1.27 0 0 0 1.253-1.072l1.743-11.06a1.27 1.27 0 0 1 1.253-1.071h3.898A12.46 12.46 0 0 0 37.617 22.26c.675-4.307-1.492-8.228-5.201-10.165a9.96 9.96 0 0 1-.12 1.37 12.461 12.461 0 0 1-12.295 10.54h-6.1a1.268 1.268 0 0 0-1.252 1.07Z"
+    />
+    <Path
+      fill="#003087"
+      d="M10.741 37.208H3.03a1.035 1.035 0 0 1-1.018-1.192L7.208 3.072A1.268 1.268 0 0 1 8.46 2H21.7c6.269 0 10.827 4.562 10.72 10.089a11.567 11.567 0 0 0-5.399-1.287H15.983a1.27 1.27 0 0 0-1.254 1.071l-2.08 13.202-1.908 12.133Z"
+    />
+  </Svg>
+);
+
+export default LogoPaymentCardPayPal;

package/src/components/logos/svg/originals/LogoPaymentCardBancomatPay.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 137 24">
+  <path
+    fill="#3FBDEE"
+    d="M104.986 10.8594 94.6035.4745c-.6327-.63267-1.6562-.63267-2.2889 0L81.9323 10.8568c-.6327.6327-.6327 1.6563 0 2.2864l10.3823 10.3823c.6327.6327 1.6562.6327 2.2889 0l10.3825-10.3823c.632-.6327.632-1.6563 0-2.2864v.0026Zm-7.0932 3.634c-.2674 2.1757-1.8465 3.225-4.4209 3.225H88.246l.3035-2.4226h5.1873c.6635 0 1.021-.4012 1.1085-1.1111.0102-.0771.0128-.1466.0128-.216h3.0733c-.0051.1646-.0154.3369-.0386.5247Zm2.0806-1.376H88.817l.27-2.186h5.0381c.7381 0 .9696-.5092 1.0442-1.12643.0746-.61723-.0309-1.003-.787-1.003h-5.033l.3035-2.51521h5.1487c2.9319 0 3.7188 1.24989 3.508 2.9627-.0849.69953-.2855 1.25764-.571 1.68194h.3009c1.1728 0 2.0806 1.0236 1.9366 2.1886l-.0026-.0026Z"
+  />
+  <path
+    fill="#223264"
+    d="M1.4042 6.28671h4.56494c2.93184 0 3.71881 1.2499 3.50793 2.96271-.16203 1.32708-.72525 2.14488-1.54051 2.49978 1.00043.4012 1.31676 1.219 1.12902 2.7467-.26747 2.1757-1.84655 3.225-4.42092 3.225H0L1.4042 6.28671Zm3.88856 4.64209c.74067 0 .97213-.5092 1.04929-1.12644.07458-.61723-.03086-1.003-.78697-1.003H4.10459l-.26233 2.12944h1.4505Zm-.38063 4.3643c.66352 0 1.021-.4012 1.10844-1.111.08745-.7098-.16202-1.0647-.8564-1.0647H3.5748l-.26747 2.1757h1.6048ZM61.772 6.28672 60.3678 17.7158H57.436l.7844-6.3858.0257-.2186-.0849.2032-2.7029 6.4012H53.55l-1.1625-6.3961-.036-.198-.0257.2006-.7844 6.3935h-2.6515l1.4042-11.42908h2.1706c.9927 0 1.8363.70982 2.006 1.68967l.7638 4.44151.018.1029.0412-.0978 2.5949-6.13885h3.8834M67.4454 6.28672c.9695 0 1.8054.69181 1.9854 1.64338l1.8543 9.7857h-3.0939l-.2572-1.6022-.0051-.0258h-3.3742l-.0077.018-.6533 1.6074H60.895l4.9739-11.42905h1.5765v.00257ZM65.55 13.5289h1.9983l-.0052-.036-.5632-3.1633-.018-.1003-.0412.0951-1.3527 3.1634-.018.0437M30.3394 6.28671 28.9352 17.7158h-2.775l-2.8264-5.9512-.0463-.0951-.0128.1054-.7304 5.9434h-2.8522l1.4042-11.42902h1.8852c.7844 0 1.5096.46036 1.8414 1.17017l1.9365 4.13035.0463.0977.0129-.1055.6506-5.29272h2.8702M36.3806 6.14787c1.2653 0 2.3634.30348 3.1813.87442l-1.9212 2.51007c-.4526-.29833-1.0518-.45521-1.7359-.45521-1.3116 0-1.9906.45264-2.3069 3.01925-.1723 1.4094-.0798 2.2272.3009 2.6593.2571.2906.6455.414 1.2962.414.7072 0 1.2576-.162 1.9519-.576l1.1985 2.3326c-.967.5581-1.9623.9284-3.6571.9284-1.5354 0-2.6181-.3806-3.3125-1.1676-.8229-.931-1.093-2.4612-.8204-4.6781.2392-1.9546.7253-3.29962 1.5277-4.23318.9438-1.09816 2.3506-1.63309 4.2975-1.63309"
+  />
+  <path
+    fill="#223264"
+    d="M44.3918 6.14786c1.6228 0 2.7595.39348 3.4745 1.2036.8307.9387 1.075 2.37377.7947 4.65494-.2263 1.8491-.6738 3.1453-1.4094 4.0763-.9438 1.1959-2.3506 1.7745-4.3077 1.7745-1.6254 0-2.7673-.396-3.4874-1.2087-.8204-.9284-1.075-2.3995-.8024-4.6344.2289-1.8568.6764-3.15557 1.4119-4.08913.9439-1.19589 2.3584-1.77711 4.3207-1.77711h.0051Zm-1.1161 9.05784c1.7925 0 2.0985-1.3347 2.3146-3.081.1543-1.2499.1594-2.1243-.2855-2.62836-.2649-.3009-.6841-.4475-1.2782-.4475-.8152 0-1.3605.2649-1.7205.83069-.3601.56577-.5041 1.40937-.6044 2.23747-.1543 1.255-.1594 2.1346.2855 2.6412.2674.3035.6918.4501 1.2936.4501M80.7261 6.28671l-.337 2.74668h-3.423l-1.0622 8.68491h-3.0398l1.0621-8.68491h-3.0038l.3369-2.74668h9.4668ZM8.76221 17.7158h2.99869l.6533-1.6073.0077-.018h3.3742l.0051.0257.2572 1.6022h3.0939L17.298 7.93271c-.18-.95413-1.0159-1.64337-1.9854-1.64337h-1.5765L8.76221 17.7184v-.0026Zm6.61719-4.1843h-1.9622l.018-.0437 1.3527-3.1633.0412-.0952.018.1003.5632 3.1633.0051.036h-.036v.0026Z"
+  />
+  <path
+    fill="#3EBEEF"
+    d="M121.736 6.28672c.969 0 1.805.69181 1.985 1.64338l1.855 9.7857h-3.094l-.257-1.6022-.006-.0258h-3.374l-.008.018-.653 1.6074h-2.998l4.973-11.42905h1.577v.00257Zm-1.895 7.24218h1.998l-.005-.036-.564-3.1633-.018-.1003-.041.0951-1.353 3.1634-.017.0437M116.279 7.26657c-.577-.65067-1.556-.97986-2.917-.97986h-4.765l-1.405 11.42909h2.963l.414-3.3691v-.0283h1.736c1.433 0 2.554-.4089 3.333-1.2164.671-.697 1.091-1.6871 1.245-2.9422.159-1.30643-.039-2.25286-.604-2.89323Zm-2.367 3.08873c-.123 1.0107-.511 1.4222-1.334 1.4222h-1.695l.005-.0334.347-2.8213v-.02829h1.69c.378 0 .64.09002.802.27261.198.22375.257.6018.185 1.18818ZM136.014 6.28671l-4.685 7.78479v.0052l-.005.0077-.445 3.6339h-3.009l.452-3.6879v-.0129l-2.754-7.72822h3.207l1.486 4.49292.021.0643.033-.0591 2.608-4.49812h3.091M135.66 17.3609c-.237.2366-.522.3549-.857.3549-.334 0-.619-.1183-.856-.3549-.234-.2366-.35-.5221-.35-.859s.118-.6172.355-.8538c.234-.2341.52-.3524.851-.3524.332 0 .62.1183.857.3524.236.2366.355.5195.355.8538 0 .3344-.119.6224-.355.859Zm-1.592-1.5945c-.203.2032-.304.45-.304.7381 0 .288.101.5375.301.7432.203.2058.448.3061.738.3061.291 0 .535-.1029.736-.3061.203-.2057.303-.4526.303-.7432 0-.2906-.1-.5324-.303-.7381-.203-.2058-.45-.3061-.736-.3061-.285 0-.532.1029-.735.3061Zm.712.0669c.165 0 .286.0154.363.0488.136.0566.206.1698.206.3369 0 .1183-.044.2058-.129.2623-.046.0309-.111.0515-.193.0643.103.0155.18.0592.229.1286.049.0695.072.1389.072.2058v.0977c0 .0309 0 .0643.003.1003 0 .036.005.0566.01.0694l.008.0155h-.219V17.15s-.005-.0103-.005-.0154l-.005-.0437v-.1055c0-.1543-.041-.2546-.126-.3035-.049-.0282-.137-.0437-.26-.0437h-.185v.5221h-.234v-1.3296h.465v.0026Zm.252.2083c-.059-.0335-.154-.0489-.283-.0489h-.2v.4809h.211c.1 0 .175-.0103.223-.0308.09-.036.137-.1055.137-.2083 0-.0978-.029-.1621-.088-.1955v.0026Z"
+  />
+</svg>

package/src/components/logos/svg/originals/LogoPaymentCardPayPal.svg

@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 170 48">
+  <path
+    fill="#003087"
+    d="M62.56 28.672a10.111 10.111 0 0 0 9.983-8.56c.78-4.967-3.101-9.303-8.6-9.303H55.08a.689.689 0 0 0-.69.585l-3.95 25.072a.643.643 0 0 0 .634.742h4.69a.689.689 0 0 0 .688-.585l1.162-7.365a.689.689 0 0 1 .689-.586h4.257Zm3.925-8.786c-.29 1.836-1.709 3.189-4.425 3.189h-3.474l1.053-6.68h3.411c2.81.006 3.723 1.663 3.435 3.496v-.005Zm26.378-1.18H88.41a.69.69 0 0 0-.69.585l-.144.924s-3.457-3.775-9.575-1.225c-3.51 1.461-5.194 4.48-5.91 6.69 0 0-2.277 6.718 2.87 10.417 0 0 4.771 3.556 10.145-.22l-.093.589a.642.642 0 0 0 .634.742h4.451a.689.689 0 0 0 .69-.585l2.708-17.175a.643.643 0 0 0-.634-.742Zm-6.547 9.492a4.996 4.996 0 0 1-4.996 4.276 4.513 4.513 0 0 1-1.397-.205c-1.92-.616-3.015-2.462-2.7-4.462a4.996 4.996 0 0 1 5.014-4.277c.474-.005.946.065 1.398.206 1.913.614 3.001 2.46 2.686 4.462h-.005Z"
+  />
+  <path
+    fill="#0070E0"
+    d="M126.672 28.672a10.115 10.115 0 0 0 9.992-8.56c.779-4.967-3.101-9.303-8.602-9.303h-8.86a.69.69 0 0 0-.689.585l-3.962 25.079a.637.637 0 0 0 .365.683.64.64 0 0 0 .269.06h4.691a.69.69 0 0 0 .689-.586l1.163-7.365a.688.688 0 0 1 .689-.586l4.255-.007Zm3.925-8.786c-.29 1.836-1.709 3.189-4.426 3.189h-3.473l1.054-6.68h3.411c2.808.006 3.723 1.663 3.434 3.496v-.005Zm26.377-1.18h-4.448a.69.69 0 0 0-.689.585l-.146.924s-3.456-3.775-9.574-1.225c-3.509 1.461-5.194 4.48-5.911 6.69 0 0-2.276 6.718 2.87 10.417 0 0 4.772 3.556 10.146-.22l-.093.589a.637.637 0 0 0 .365.683c.084.04.176.06.269.06h4.451a.686.686 0 0 0 .689-.586l2.709-17.175a.657.657 0 0 0-.148-.518.632.632 0 0 0-.49-.224Zm-6.546 9.492a4.986 4.986 0 0 1-4.996 4.276 4.513 4.513 0 0 1-1.399-.205c-1.921-.616-3.017-2.462-2.702-4.462a4.996 4.996 0 0 1 4.996-4.277c.475-.005.947.064 1.399.206 1.933.614 3.024 2.46 2.707 4.462h-.005Z"
+  />
+  <path
+    fill="#003087"
+    d="m109.205 19.131-5.367 9.059-2.723-8.992a.69.69 0 0 0-.664-.492h-4.842a.516.516 0 0 0-.496.689l4.88 15.146-4.413 7.138a.517.517 0 0 0 .442.794h5.217a.858.858 0 0 0 .741-.418l13.632-22.552a.516.516 0 0 0-.446-.789h-5.215a.858.858 0 0 0-.746.417Z"
+  />
+  <path
+    fill="#0070E0"
+    d="m161.982 11.387-3.962 25.079a.637.637 0 0 0 .365.683c.084.04.176.06.269.06h4.689a.688.688 0 0 0 .689-.586l3.963-25.079a.637.637 0 0 0-.146-.517.645.645 0 0 0-.488-.225h-4.69a.69.69 0 0 0-.689.585Z"
+  />
+  <path
+    fill="#001C64"
+    d="M37.146 22.26c-1.006 5.735-5.685 10.07-11.825 10.07h-3.898c-.795 0-1.596.736-1.723 1.55l-1.707 10.835c-.099.617-.388.822-1.013.822h-6.27c-.634 0-.784-.212-.689-.837l.72-7.493-7.526-.389c-.633 0-.862-.345-.772-.977l5.135-32.56c.099-.617.483-.882 1.106-.882h13.023c6.269 0 10.235 4.22 10.72 9.692 3.73 2.52 5.474 5.873 4.72 10.168Z"
+  />
+  <path
+    fill="#0070E0"
+    d="m12.649 25.075-1.907 12.133-1.206 7.612a1.034 1.034 0 0 0 1.016 1.19h6.622a1.27 1.27 0 0 0 1.253-1.072l1.743-11.06a1.27 1.27 0 0 1 1.253-1.071h3.898A12.46 12.46 0 0 0 37.617 22.26c.675-4.307-1.492-8.228-5.201-10.165a9.96 9.96 0 0 1-.12 1.37 12.461 12.461 0 0 1-12.295 10.54h-6.1a1.268 1.268 0 0 0-1.252 1.07Z"
+  />
+  <path
+    fill="#003087"
+    d="M10.741 37.208H3.03a1.035 1.035 0 0 1-1.018-1.192L7.208 3.072A1.268 1.268 0 0 1 8.46 2H21.7c6.269 0 10.827 4.562 10.72 10.089a11.567 11.567 0 0 0-5.399-1.287H15.983a1.27 1.27 0 0 0-1.254 1.071l-2.08 13.202-1.908 12.133Z"
+  />
+</svg>

package/src/components/pictograms/Pictogram.tsx

@@ -60,6 +60,7 @@ import PictogramCharity from "./svg/PictogramCharity";
 import PictogramEmpty from "./svg/PictogramEmpty";
 import PictogramCie from "./svg/PictogramCie";
 import PictogramFeature from "./svg/PictogramFeature";
+import PictogramNotification from "./svg/PictogramNotification";
 import PictogramObjClock from "./svg/PictogramObjClock";
 import PictogramObjIbanCard from "./svg/PictogramObjIbanCard";
 import PictogramObjManual from "./svg/PictogramObjManual";
@@ -77,6 +78,7 @@ import PictogramBleedFeature from "./svg/PictogramBleedFeature";
 import PictogramBleedCie from "./svg/PictogramBleedCie";
 import PictogramBleedCameraRequest from "./svg/PictogramBleedCameraRequest";
 import PictogramBleedCameraDenied from "./svg/PictogramBleedCameraDenied";
+import PictogramBleedNotification from "./svg/PictogramBleedNotification";
 
 export const IOPictograms = {
   // Start legacy pictograms //
@@ -134,6 +136,7 @@ export const IOPictograms = {
   cie: PictogramCie,
   time: PictogramTime,
   passcode: PictogramPasscode,
+  notification: PictogramNotification,
   // Start Objects Pictogram
   ibanCard: PictogramObjIbanCard,
   followMessage: PictogramObjFollowMessage,
@@ -227,7 +230,8 @@ export type IOPictogramsBleed = Extract<
   | "feature"
   | "cie"
   | "cameraRequest"
-  | "cameraDenied",
+  | "cameraDenied"
+  | "notification",
   IOPictograms
 >;
 
@@ -242,7 +246,8 @@ export const IOPictogramsBleed: {
   feature: PictogramBleedFeature,
   cie: PictogramBleedCie,
   cameraRequest: PictogramBleedCameraRequest,
-  cameraDenied: PictogramBleedCameraDenied
+  cameraDenied: PictogramBleedCameraDenied,
+  notification: PictogramBleedNotification
 };
 
 export const PictogramBleed = ({

package/src/components/pictograms/svg/PictogramBleedNotification.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramBleedNotification = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M133.54 173.88c-2.88 0-5.61-1.57-7.03-4.28-1.01-1.92-1.2-4.11-.53-6.18.66-2.04 2.07-3.69 3.98-4.64 6.87-3.44 17.93-6.91 24.11-8.73-2.58-2.4-4.34-6.01-4.32-9.54 0-2.68 1.14-9.19 11.43-11.65 16.12-3.86 78.12 18.71 80.75 19.67l-1.37 3.76c-.16-.06-16.14-5.89-33.81-11.18-29.21-8.75-40.4-9.37-44.64-8.36-5.38 1.29-8.35 4.05-8.36 7.77-.01 3.88 3.08 7.55 5.86 8.23.89.22 1.51 1.01 1.52 1.92.01.91-.6 1.71-1.48 1.95-.18.05-18.53 5.04-27.9 9.73-.94.47-1.64 1.28-1.96 2.29-.33 1.03-.24 2.13.27 3.09.96 1.83 3.13 2.61 5.04 1.82 9.09-3.77 20.95-8.25 26.02-8.25h.12l-.06 4c-3.29-.04-12.27 2.85-24.55 7.94-1.01.42-2.05.62-3.08.62l-.01.02Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M137.45 190.31c-3.78 0-7.45-2.01-9.39-5.54-2.16-3.92-1.62-8.82 1.32-12.19l1.47-1.68 3.01 2.63-1.47 1.68c-1.85 2.11-2.18 5.17-.83 7.63 1.76 3.21 5.81 4.41 9.02 2.67 12.01-6.5 20.06-9.57 23.94-9.11l-.47 3.97c-2.86-.34-10.93 2.9-21.57 8.66-1.6.87-3.33 1.28-5.04 1.28h.01Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M240.36 213.78c-39.81-19.17-81.44-13.87-92.88-10.51-2.81.83-5.84.2-8.1-1.68-2.34-1.95-3.52-5.04-3.07-8.05l.77-5.2 3.96.59-.77 5.2c-.25 1.64.4 3.33 1.67 4.39 1.23 1.03 2.88 1.37 4.41.92 11.83-3.48 54.8-8.97 95.75 10.74l-1.74 3.6ZM169.578 150.271l-.698 3.939 10.349 1.834.698-3.939-10.349-1.834Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M191.139 170.89c-10.44-5.97-15.77-22.75-15.99-23.46l3.82-1.19c.05.16 5.09 15.99 14.16 21.18l-1.99 3.47ZM163.338 156.727l-3.982.38 2.844 29.855 3.982-.38-2.844-29.855Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="m131.07 106.01-2.26-.76c-1.82-.61-3.16-2.16-3.51-4.05l-5.86-31.77c-3.39-18.38-18.83-31.44-36.6605-32.65-.02-.51-.03-1.02-.1299-1.53-1-5.47-6.2601-9.09-11.7401-8.08-5.47 1.01-9.09 6.27-8.08 11.74.1.52.26 1 .43 1.48-16.22 7.49-25.98 25.2-22.59 43.58l5.86 31.77c.35 1.89-.35 3.82-1.83 5.04l-1.84 1.52c-2.89 2.39-2.45 6.95.86 8.73 1.06.57 2.28.76 3.47.55l19.16-3.54c2.07 11.24 14.93 18.29 26.18 16.22 11.2405-2.07 20.7405-13.25 18.6605-24.49l19.16-3.54c1.18-.22 2.26-.84 3.05-1.75 2.45-2.84 1.24-7.26-2.32-8.46l-.01-.01Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M48.7898 127.66c-.83 0-1.56-.59-1.72-1.43-.18-.95.45-1.86 1.4-2.04l76.8402-14.18c.95-.17 1.86.45 2.04 1.4.18.95-.45 1.86-1.4 2.04l-76.8402 14.18c-.11.02-.21.03-.32.03Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M105.77 115.39c1.83 9.92-4.73 19.45-14.6502 21.28-9.92 1.83-19.45-4.73-21.28-14.65"
+      fill={colorValues.secondary}
+    />
+  </Svg>
+);
+
+export default PictogramBleedNotification;

package/src/components/pictograms/svg/PictogramNotification.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramNotification = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M207.289 180.45c-.11-.13-10.98-13.21-23.59-26.68-20.84-22.26-30.19-28.43-34.36-29.69-5.3-1.6-9.25-.7-11.14 2.51-1.96 3.35-1.13 8.07.92 10.06.66.63.8 1.63.35 2.42-.45.79-1.38 1.18-2.26.94-.18-.05-18.54-4.97-29.01-5.63-1.05-.07-2.06.29-2.85.99-.81.72-1.27 1.72-1.32 2.8-.09 2.07 1.39 3.83 3.43 4.11 9.84 1.33 22.46 3.45 26.74 6.03l-2.06 3.43c-2.84-1.71-12.03-3.71-25.22-5.49-4.11-.55-7.0795-4.1-6.9-8.25.1-2.17 1.04-4.16 2.65-5.6 1.59-1.43 3.64-2.14 5.77-2.01 7.67.48 18.97 3.05 25.23 4.59-1.02-3.37-.72-7.38 1.07-10.42 1.36-2.31 5.61-7.36 15.74-4.31 15.87 4.78 58.09 55.48 59.88 57.64l-3.08 2.55.01.01Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M127.05 166.22c-2.31-1.73-10.9-2.99-22.99-3.37-5.8401-.18-10.4701-5.09-10.3201-10.95.11-4.48 3.04-8.44 7.2801-9.87l2.11-.71 1.27 3.79-2.11.71c-2.6601.89-4.4901 3.37-4.5601 6.17-.09 3.66 2.8001 6.73 6.4501 6.85 13.65.43 22.16 1.83 25.27 4.17l-2.4 3.2v.01Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M167.13 225.39c-16.99-25.12-39-41.13-65.42-47.6l-.51-.12c-2.8501-.7-5.1501-2.77-6.1501-5.53-1.04-2.87-.5-6.12 1.4-8.5l3.29-4.1 3.1201 2.5-3.2901 4.1c-1.04 1.3-1.33 3.07-.76 4.64.55 1.51 1.8001 2.63 3.3501 3.01l.5.12c27.41 6.71 50.22 23.28 67.78 49.25l-3.31 2.24v-.01ZM146.973 142.998l-2.585 3.052 8.019 6.794 2.585-3.052-8.019-6.794Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M155.239 171.66c-6.01-10.42-2.18-27.59-2.01-28.32l3.9.89c-.04.16-3.65 16.37 1.58 25.42l-3.46 2-.01.01ZM134.705 143.744l-12.57 27.229 3.631 1.676 12.57-27.229-3.631-1.676Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="m120.07 94.01-2.26-.76c-1.82-.61-3.16-2.16-3.51-4.05l-5.86-31.77c-3.39-18.38-18.8304-31.44-36.6605-32.65-.02-.51-.03-1.02-.1299-1.53-1-5.47-6.2601-9.09-11.7401-8.08-5.47 1.01-9.09 6.27-8.08 11.74.1.52.26 1 .43 1.48-16.22 7.49-25.98 25.2-22.59 43.58l5.86 31.77c.35 1.89-.35 3.82-1.83 5.04l-1.84 1.52c-2.89 2.39-2.45 6.95.86 8.73 1.06.57 2.28.76 3.47.55l19.16-3.54c2.07 11.24 14.93 18.29 26.18 16.22 11.24-2.07 20.7405-13.25 18.6605-24.49l19.16-3.54c1.18-.22 2.26-.84 3.05-1.75 2.45-2.84 1.24-7.26-2.32-8.46l-.01-.01Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M37.7898 115.66c-.83 0-1.56-.59-1.72-1.43-.18-.95.45-1.86 1.4-2.04L114.31 98.01c.95-.17 1.86.45 2.04 1.4.18.95-.45 1.86-1.4 2.04l-76.8402 14.18c-.11.02-.21.03-.32.03Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M94.7698 103.39c1.83 9.92-4.73 19.45-14.65 21.28-9.92 1.83-19.45-4.73-21.28-14.65"
+      fill={colorValues.secondary}
+    />
+  </Svg>
+);
+
+export default PictogramNotification;

package/src/components/pictograms/svg/originals/PictogramBleedNotification.svg

@@ -0,0 +1,30 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
+  <path
+    d="M133.54 173.88c-2.88 0-5.61-1.57-7.03-4.28-1.01-1.92-1.2-4.11-.53-6.18.66-2.04 2.07-3.69 3.98-4.64 6.87-3.44 17.93-6.91 24.11-8.73-2.58-2.4-4.34-6.01-4.32-9.54 0-2.68 1.14-9.19 11.43-11.65 16.12-3.86 78.12 18.71 80.75 19.67l-1.37 3.76c-.16-.06-16.14-5.89-33.81-11.18-29.21-8.75-40.4-9.37-44.64-8.36-5.38 1.29-8.35 4.05-8.36 7.77-.01 3.88 3.08 7.55 5.86 8.23.89.22 1.51 1.01 1.52 1.92.01.91-.6 1.71-1.48 1.95-.18.05-18.53 5.04-27.9 9.73-.94.47-1.64 1.28-1.96 2.29-.33 1.03-.24 2.13.27 3.09.96 1.83 3.13 2.61 5.04 1.82 9.09-3.77 20.95-8.25 26.02-8.25h.12l-.06 4c-3.29-.04-12.27 2.85-24.55 7.94-1.01.42-2.05.62-3.08.62l-.01.02Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M137.45 190.31c-3.78 0-7.45-2.01-9.39-5.54-2.16-3.92-1.62-8.82 1.32-12.19l1.47-1.68 3.01 2.63-1.47 1.68c-1.85 2.11-2.18 5.17-.83 7.63 1.76 3.21 5.81 4.41 9.02 2.67 12.01-6.5 20.06-9.57 23.94-9.11l-.47 3.97c-2.86-.34-10.93 2.9-21.57 8.66-1.6.87-3.33 1.28-5.04 1.28h.01Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M240.36 213.78c-39.81-19.17-81.44-13.87-92.88-10.51-2.81.83-5.84.2-8.1-1.68-2.34-1.95-3.52-5.04-3.07-8.05l.77-5.2 3.96.59-.77 5.2c-.25 1.64.4 3.33 1.67 4.39 1.23 1.03 2.88 1.37 4.41.92 11.83-3.48 54.8-8.97 95.75 10.74l-1.74 3.6ZM169.578 150.271l-.698 3.939 10.349 1.834.698-3.939-10.349-1.834Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M191.139 170.89c-10.44-5.97-15.77-22.75-15.99-23.46l3.82-1.19c.05.16 5.09 15.99 14.16 21.18l-1.99 3.47ZM163.338 156.727l-3.982.38 2.844 29.855 3.982-.38-2.844-29.855Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="m131.07 106.01-2.26-.76c-1.82-.61-3.16-2.16-3.51-4.05l-5.86-31.77c-3.39-18.38-18.83-31.44-36.6605-32.65-.02-.51-.03-1.02-.1299-1.53-1-5.47-6.2601-9.09-11.7401-8.08-5.47 1.01-9.09 6.27-8.08 11.74.1.52.26 1 .43 1.48-16.22 7.49-25.98 25.2-22.59 43.58l5.86 31.77c.35 1.89-.35 3.82-1.83 5.04l-1.84 1.52c-2.89 2.39-2.45 6.95.86 8.73 1.06.57 2.28.76 3.47.55l19.16-3.54c2.07 11.24 14.93 18.29 26.18 16.22 11.2405-2.07 20.7405-13.25 18.6605-24.49l19.16-3.54c1.18-.22 2.26-.84 3.05-1.75 2.45-2.84 1.24-7.26-2.32-8.46l-.01-.01Z"
+    fill="#AAEEEF"
+  />
+  <path
+    d="M48.7898 127.66c-.83 0-1.56-.59-1.72-1.43-.18-.95.45-1.86 1.4-2.04l76.8402-14.18c.95-.17 1.86.45 2.04 1.4.18.95-.45 1.86-1.4 2.04l-76.8402 14.18c-.11.02-.21.03-.32.03Z"
+    fill="#00C5CA"
+  />
+  <path
+    d="M105.77 115.39c1.83 9.92-4.73 19.45-14.6502 21.28-9.92 1.83-19.45-4.73-21.28-14.65"
+    fill="#00C5CA"
+  />
+</svg>

package/src/components/pictograms/svg/originals/PictogramNotification.svg

@@ -0,0 +1,30 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
+  <path
+    d="M207.289 180.45c-.11-.13-10.98-13.21-23.59-26.68-20.84-22.26-30.19-28.43-34.36-29.69-5.3-1.6-9.25-.7-11.14 2.51-1.96 3.35-1.13 8.07.92 10.06.66.63.8 1.63.35 2.42-.45.79-1.38 1.18-2.26.94-.18-.05-18.54-4.97-29.01-5.63-1.05-.07-2.06.29-2.85.99-.81.72-1.27 1.72-1.32 2.8-.09 2.07 1.39 3.83 3.43 4.11 9.84 1.33 22.46 3.45 26.74 6.03l-2.06 3.43c-2.84-1.71-12.03-3.71-25.22-5.49-4.11-.55-7.0795-4.1-6.9-8.25.1-2.17 1.04-4.16 2.65-5.6 1.59-1.43 3.64-2.14 5.77-2.01 7.67.48 18.97 3.05 25.23 4.59-1.02-3.37-.72-7.38 1.07-10.42 1.36-2.31 5.61-7.36 15.74-4.31 15.87 4.78 58.09 55.48 59.88 57.64l-3.08 2.55.01.01Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M127.05 166.22c-2.31-1.73-10.9-2.99-22.99-3.37-5.8401-.18-10.4701-5.09-10.3201-10.95.11-4.48 3.04-8.44 7.2801-9.87l2.11-.71 1.27 3.79-2.11.71c-2.6601.89-4.4901 3.37-4.5601 6.17-.09 3.66 2.8001 6.73 6.4501 6.85 13.65.43 22.16 1.83 25.27 4.17l-2.4 3.2v.01Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M167.13 225.39c-16.99-25.12-39-41.13-65.42-47.6l-.51-.12c-2.8501-.7-5.1501-2.77-6.1501-5.53-1.04-2.87-.5-6.12 1.4-8.5l3.29-4.1 3.1201 2.5-3.2901 4.1c-1.04 1.3-1.33 3.07-.76 4.64.55 1.51 1.8001 2.63 3.3501 3.01l.5.12c27.41 6.71 50.22 23.28 67.78 49.25l-3.31 2.24v-.01ZM146.973 142.998l-2.585 3.052 8.019 6.794 2.585-3.052-8.019-6.794Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="M155.239 171.66c-6.01-10.42-2.18-27.59-2.01-28.32l3.9.89c-.04.16-3.65 16.37 1.58 25.42l-3.46 2-.01.01ZM134.705 143.744l-12.57 27.229 3.631 1.676 12.57-27.229-3.631-1.676Z"
+    fill="#0B3EE3"
+  />
+  <path
+    d="m120.07 94.01-2.26-.76c-1.82-.61-3.16-2.16-3.51-4.05l-5.86-31.77c-3.39-18.38-18.8304-31.44-36.6605-32.65-.02-.51-.03-1.02-.1299-1.53-1-5.47-6.2601-9.09-11.7401-8.08-5.47 1.01-9.09 6.27-8.08 11.74.1.52.26 1 .43 1.48-16.22 7.49-25.98 25.2-22.59 43.58l5.86 31.77c.35 1.89-.35 3.82-1.83 5.04l-1.84 1.52c-2.89 2.39-2.45 6.95.86 8.73 1.06.57 2.28.76 3.47.55l19.16-3.54c2.07 11.24 14.93 18.29 26.18 16.22 11.24-2.07 20.7405-13.25 18.6605-24.49l19.16-3.54c1.18-.22 2.26-.84 3.05-1.75 2.45-2.84 1.24-7.26-2.32-8.46l-.01-.01Z"
+    fill="#AAEEEF"
+  />
+  <path
+    d="M37.7898 115.66c-.83 0-1.56-.59-1.72-1.43-.18-.95.45-1.86 1.4-2.04L114.31 98.01c.95-.17 1.86.45 2.04 1.4.18.95-.45 1.86-1.4 2.04l-76.8402 14.18c-.11.02-.21.03-.32.03Z"
+    fill="#00C5CA"
+  />
+  <path
+    d="M94.7698 103.39c1.83 9.92-4.73 19.45-14.65 21.28-9.92 1.83-19.45-4.73-21.28-14.65"
+    fill="#00C5CA"
+  />
+</svg>

package/src/components/radio/RadioGroup.tsx

@@ -4,7 +4,7 @@ import { Divider } from "../divider";
 import { IOIcons } from "../icons";
 import { ListItemRadio } from "../listitems/ListItemRadio";
 
-export type NewRadioItem<T> = {
+export type RadioItem<T> = {
   id: T;
   value: string;
   description?: string;
@@ -13,7 +13,7 @@ export type NewRadioItem<T> = {
 };
 
 type Props<T> = {
-  items: ReadonlyArray<NewRadioItem<T>>;
+  items: ReadonlyArray<RadioItem<T>>;
   selectedItem?: T;
   onPress: (selected: T) => void;
 };

package/src/components/toast/ToastNotification.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import { Icon } from "../icons";
+import { IOColors, IOAlertRadius } from "../../core";
+import { ButtonText } from "../typography";
+import { Toast, ToastVariant } from "./types";
+
+type ColorVariant = {
+  background: IOColors;
+  stroke: IOColors;
+};
+
+const toastColorVariants: Record<ToastVariant, ColorVariant> = {
+  neutral: {
+    background: "turquoise-150",
+    stroke: "turquoise-850"
+  },
+  error: {
+    background: "error-100",
+    stroke: "error-850"
+  },
+  info: {
+    background: "info-100",
+    stroke: "info-850"
+  },
+  success: {
+    background: "success-100",
+    stroke: "success-850"
+  },
+  warning: {
+    background: "warning-100",
+    stroke: "warning-850"
+  }
+};
+
+type Props = Pick<Toast, "message" | "variant" | "icon">;
+
+const ToastNotification = ({ message, variant = "neutral", icon }: Props) => {
+  const colors = toastColorVariants[variant];
+
+  return (
+    <View
+      style={[
+        styles.toast,
+        {
+          backgroundColor: IOColors[colors.background],
+          borderColor: IOColors[colors.stroke]
+        }
+      ]}
+      accessible={true}
+      accessibilityRole={"alert"}
+      accessibilityLabel={message}
+    >
+      <ButtonText color={colors.stroke} style={styles.content}>
+        {message}
+      </ButtonText>
+      {icon && <Icon name={icon} size={24} color={colors.stroke} />}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  toast: {
+    borderRadius: IOAlertRadius,
+    borderWidth: 1,
+    padding: 16,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  content: {
+    paddingVertical: 2
+  }
+});
+
+export { ToastNotification };

package/src/components/toast/ToastProvider.tsx

@@ -0,0 +1,153 @@
+import { throttle } from "lodash";
+import React from "react";
+import { SafeAreaView, StyleSheet, View } from "react-native";
+import Animated, {
+  Easing,
+  SequencedTransition,
+  SlideInUp,
+  SlideOutUp
+} from "react-native-reanimated";
+import { Dismissable } from "../layout/Dismissable";
+import { triggerHaptic } from "../../functions";
+import { ToastNotification } from "./ToastNotification";
+import { Toast } from "./types";
+import { IOToastRef, useIOToast } from "./useIOToast";
+import { ToastContext } from "./context";
+
+/**
+ * The maximum number of toasts that can be displayed at the same time
+ * If the number of the toasts exceeds this number, the oldest one will be removed
+ */
+export const MAX_TOAST_STACK_SIZE = 3;
+
+/**
+ * The time in milliseconds that a toast notification will be displayed
+ */
+export const TOAST_DURATION_TIME = 5000;
+
+/**
+ * This is the time in milliseconds between two toast notifications.
+ * This will throttle the toast notifications to avoid displaying too many of them at the same time
+ * and causing visual glitches.
+ */
+export const TOAST_THROTTLE_TIME = 500;
+
+type ToastNotificationStackItem = Toast & { id: number };
+type ToastNotificationStackItemProps = ToastNotificationStackItem &
+  Pick<Dismissable, "onDismiss">;
+
+/**
+ * A toast notification item that can be swiped to the right to dismiss it, with enter and exit animations
+ */
+const ToastNotificationStackItem = ({
+  onDismiss,
+  ...toast
+}: ToastNotificationStackItemProps) => (
+  <Animated.View
+    entering={SlideInUp.duration(300).easing(Easing.inOut(Easing.exp))}
+    exiting={SlideOutUp.duration(300).easing(Easing.inOut(Easing.exp))}
+    layout={SequencedTransition.duration(300)}
+    style={{ paddingBottom: 8 }}
+  >
+    <Dismissable onDismiss={onDismiss}>
+      <ToastNotification {...toast} />
+    </Dismissable>
+  </Animated.View>
+);
+
+type ToastProviderProps = {
+  children: React.ReactNode;
+};
+
+export const ToastProvider = ({ children }: ToastProviderProps) => {
+  const toastId = React.useRef(1);
+  const [toasts, setToasts] = React.useState<
+    ReadonlyArray<ToastNotificationStackItem>
+  >([]);
+
+  const addToast = React.useCallback((toast: Toast): number => {
+    const id = (toastId.current ?? 0) + 1;
+    setToasts(prevToasts => [{ id, ...toast }, ...prevToasts]);
+
+    setTimeout(() => {
+      setToasts(prevToasts => prevToasts.filter(t => t.id !== id));
+    }, TOAST_DURATION_TIME);
+
+    if (toast.hapticFeedback) {
+      triggerHaptic(toast.hapticFeedback);
+    }
+
+    return id;
+  }, []);
+
+  const removeToast = React.useCallback((id: number) => {
+    setToasts(prevToasts => prevToasts.filter(t => t.id !== id));
+  }, []);
+
+  const removeToastAtIndex = (index: number) => {
+    setToasts(prevToasts => [
+      ...prevToasts.slice(0, index),
+      ...prevToasts.slice(index + 1)
+    ]);
+  };
+
+  // If stack size exceed the maximum, remove the oldest toast
+  React.useEffect(() => {
+    if (toasts.length > MAX_TOAST_STACK_SIZE) {
+      removeToastAtIndex(MAX_TOAST_STACK_SIZE);
+    }
+  }, [toasts]);
+
+  const removeAllToasts = React.useCallback(() => {
+    setToasts([]);
+  }, []);
+
+  const contextValue = React.useMemo(
+    () => ({
+      addToast: throttle(addToast, TOAST_THROTTLE_TIME),
+      removeToast: throttle(removeToast, TOAST_THROTTLE_TIME),
+      removeAllToasts
+    }),
+    [addToast, removeToast, removeAllToasts]
+  );
+
+  return (
+    <ToastContext.Provider value={contextValue as ToastContext}>
+      <InitializeToastRef />
+      <SafeAreaView style={styles.container} pointerEvents="box-none">
+        <View style={styles.list} pointerEvents="box-none">
+          {toasts.map(toast => (
+            <ToastNotificationStackItem
+              key={toast.id}
+              {...toast}
+              onDismiss={() => removeToast(toast.id)}
+            />
+          ))}
+        </View>
+      </SafeAreaView>
+      {children}
+    </ToastContext.Provider>
+  );
+};
+
+const InitializeToastRef = () => {
+  const toast = useIOToast();
+  // eslint-disable-next-line functional/immutable-data
+  IOToastRef.current = toast;
+  return null;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    zIndex: 1000,
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    overflow: "visible"
+  },
+  list: {
+    padding: 24
+  }
+});

package/src/components/toast/context.ts

@@ -0,0 +1,14 @@
+import { createContext } from "react";
+import { Toast } from "./types";
+
+export type ToastContext = {
+  addToast: (props: Toast) => number;
+  removeToast: (id: number) => void;
+  removeAllToasts: () => void;
+};
+
+export const ToastContext = createContext<ToastContext>({
+  addToast: () => 0,
+  removeToast: () => undefined,
+  removeAllToasts: () => undefined
+});

package/src/components/toast/index.ts

@@ -0,0 +1,3 @@
+export * from "./ToastNotification";
+export * from "./ToastProvider";
+export * from "./useIOToast";

package/src/components/toast/types.ts

@@ -0,0 +1,13 @@
+import { HapticFeedbackTypes } from "react-native-haptic-feedback";
+import { IOIcons } from "@pagopa/io-app-design-system";
+
+export type ToastVariant = "neutral" | "error" | "info" | "success" | "warning";
+
+export type Toast = {
+  message: string;
+  variant?: ToastVariant;
+  icon?: IOIcons;
+  hapticFeedback?: keyof typeof HapticFeedbackTypes;
+};
+
+export type ToastOptions = Omit<Toast, "message">;