@pagopa/io-app-design-system 1.9.2 → 1.10.0

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

@@ -2,53 +2,57 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramBleedITWallet = ({ size, ...props }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+const PictogramBleedITWallet = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="M12 47c0-8.8366 7.1634-16 16-16h71c8.837 0 16 7.1634 16 16v151c0 8.837-7.163 16-16 16H28c-8.8366 0-16-7.163-16-16V47Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M16 50.9292C16 42.1317 23.1317 35 31.9292 35h64.1416C104.868 35 112 42.1317 112 50.9292V195.071c0 8.797-7.132 15.929-15.9292 15.929H31.9292C23.1317 211 16 203.868 16 195.071V50.9292ZM31.9292 37C24.2363 37 18 43.2363 18 50.9292V195.071C18 202.764 24.2363 209 31.9292 209h64.1416C103.764 209 110 202.764 110 195.071V50.9292C110 43.2363 103.764 37 96.0708 37H31.9292Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="M42 45c0-1.6569 1.3431-3 3-3h37c1.6569 0 3 1.3431 3 3s-1.3431 3-3 3H45c-1.6569 0-3-1.3431-3-3Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M24.1953 82.863c0-5.1409 4.1675-9.3083 9.3083-9.3083h61.9925c5.1409 0 9.3079 4.1674 9.3079 9.3083v34.511c0 5.141-4.167 9.309-9.3079 9.309H33.5036c-5.1408 0-9.3083-4.168-9.3083-9.309V82.863Zm9.3083-7.3083c-4.0363 0-7.3083 3.272-7.3083 7.3083v34.511c0 4.036 3.272 7.309 7.3083 7.309h61.9925c4.0362 0 7.3079-3.273 7.3079-7.309V82.863c0-4.0363-3.2717-7.3083-7.3079-7.3083H33.5036Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M103.679 114.82H25.0703v-2h78.6087v2ZM92.1746 80.0312c-3.3303 0-6.0301 2.6998-6.0301 6.0301s2.6998 6.0301 6.0301 6.0301 6.0301-2.6998 6.0301-6.0301-2.6998-6.0301-6.0301-6.0301Zm-8.0301 6.0301c0-4.4349 3.5952-8.0301 8.0301-8.0301 4.4349 0 8.0304 3.5952 8.0304 8.0301 0 4.4349-3.5955 8.0301-8.0304 8.0301-4.4349 0-8.0301-3.5952-8.0301-8.0301ZM52.9121 84.5039c0 .5523-.4477 1-1 1h-19.812c-.5523 0-1-.4477-1-1s.4477-1 1-1h19.812c.5523 0 1 .4477 1 1ZM52.9121 88.9766c0 .5522-.4477 1-1 1h-19.812c-.5523 0-1-.4478-1-1 0-.5523.4477-1 1-1h19.812c.5523 0 1 .4477 1 1ZM55.1054 69.4473c-.494.247-1.0947.0468-1.3417-.4472L48.6582 58.789c-.247-.494-.0468-1.0947.4472-1.3417.4939-.247 1.0946-.0467 1.3416.4472l5.1056 10.2112c.247.494.0467 1.0946-.4472 1.3416ZM71.122 68.5218c-.4848-.2644-.6635-.8719-.399-1.3567l5.0423-9.2442c.2645-.4849.8719-.6635 1.3567-.3991.4849.2645.6635.8719.3991 1.3568l-5.0423 9.2442c-.2645.4848-.8719.6635-1.3568.399ZM56.9411 132.336c.5201.185.7911.758.6054 1.278l-4.3274 12.116c-.1857.52-.7579.791-1.278.606-.5201-.186-.7912-.758-.6054-1.279l4.3273-12.116c.1857-.52.758-.791 1.2781-.605ZM72.9084 131.579c.5015-.231 1.0956-.012 1.3271.489l5.1618 11.184c.2315.502.0126 1.096-.4889 1.327-.5014.232-1.0955.013-1.327-.489l-5.1619-11.184c-.2314-.501-.0125-1.095.4889-1.327Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="M133.026 95.4111c10.19-1.93 81.474-6.4098 109.474 9.0889l1.41-3.74c-24.41-15.7622-101.104-11.2689-111.624-9.2689-5.67 1.07-9.65 6.1-9.26 11.6799.25 3.64 2.38 8.28 11.09 9.68 15.98 2.57 29.78-.26 30.36-.38l-.82-3.92c-.14.03-13.65 2.8-28.9.34-7.4-1.2-7.66-4.82-7.74-6.01-.25-3.5599 2.33-6.7699 6.01-7.4699Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M169.026 134.771c-.25 0-.5-.01-.74-.04-2.86-.28-4.82-2.19-5.36-5.23-.75-4.24 1.3-10.09 6.11-17.36 3.44-5.21 7.03-9.24 7.18-9.41l2.98 2.67c-3.83 4.28-13.5 16.84-12.33 23.41.28 1.59 1.04 1.88 1.81 1.95 4.02.4 12.54-5.66 14.87-11.62l3.72 1.46c-2.77 7.07-12.05 14.18-18.25 14.18l.01-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M189.457 135.551c-.76-3.95-6.5-7.16-8.65-8.07l1.55-3.69c.4.17 9.71 4.14 11.03 11l-3.93.75v.01ZM155.287 133.011c-3.2 0-6.37-.78-8.24-3.29-2.41-3.24-3.22-8.18-2-12.31.99-3.35 3.17-5.81 6.13-6.91.74-.28 1.53-.47 2.35-.57l.5 3.97c-.52.06-1.01.18-1.46.35-2.25.84-3.25 2.8-3.69 4.29-.86 2.93-.3 6.54 1.37 8.78 2.42 3.25 11.11.99 13.96-.06l1.38 3.75c-.84.31-5.61 1.99-10.31 1.99l.01.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M168.897 147.651c-2.27 0-4.46-.51-6.55-1.52-8.18-3.97-11.68-14.35-11.83-14.79l3.8-1.25c.03.09 3.14 9.23 9.79 12.45 2.91 1.41 6.03 1.48 9.51.21 3.5-1.27 5.57-2.79 5.68-4.17.14-1.9-3.15-4.62-5.42-5.85l1.9-3.52c.81.44 7.89 4.42 7.51 9.66-.23 3.15-3.02 5.72-8.3 7.64-2.08.76-4.12 1.14-6.09 1.14Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M241 156.998c-35.5 4.5-64.721-10.34-65.647-10.804l1.798-3.575c.218.104 30.849 14.379 63.595 10.389l.254 3.99Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
   </Svg>
 );

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

@@ -4,33 +4,33 @@ import { SVGPictogramProps } from "../Pictogram";
 
 const PictogramBleedSecurity = ({
   size,
-  color,
+  colorValues,
   ...props
 }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="m141.53 162.33-1.17-10.28 6.77-5.65 4.83.62 2.92-10.71 2.61-3.84 9.51-2.64 6.8 3.32c.02-.34.06-.68.06-1.02V68.12c0-7.32-4.35-13.95-11.06-16.87l-38.56-16.73c-4.67-2.03-9.98-2.03-14.65 0L71.06 51.25C64.35 54.17 60 60.79 60 68.12v64.01c0 5.42 2.39 10.57 6.54 14.07l38.53 32.45c6.84 5.76 16.84 5.76 23.69 0l14.63-12.32-1.87-3.99.01-.01Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M168.661 196.7c-1.31 0-2.73-.14-4.27-.43-10.76-1.98-18.32-11.19-20.8-18.9-1.51-4.72-1.14-8.71 1.03-10.95l2.88 2.78c-1.06 1.1-1.1 3.83-.1 6.96 2.12 6.62 8.57 14.5 17.71 16.19 4.24.78 7.1.31 8.51-1.39 2.37-2.88.66-9.13-.2-11.29l3.72-1.48c.41 1.02 3.85 10.09-.42 15.3-1.76 2.15-4.46 3.22-8.06 3.22v-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M172.3 179.76c-2.96 0-6.55-.51-10.77-1.55-16.89-4.13-21.03-15.98-22-22.68-.53-3.67.42-7.29 2.61-9.95 2.82-3.43 6.74-4.12 10.75-1.89l-1.94 3.5c-2.35-1.31-4.12-1.02-5.72.93-1.47 1.79-2.11 4.29-1.74 6.84.82 5.7 4.38 15.8 18.99 19.37 10.13 2.47 14.73 1.34 15.67-.54.69-1.39-.39-3.51-1.44-4.35l2.51-3.11c2.49 2.01 4.11 6.01 2.51 9.24-1.38 2.8-4.54 4.2-9.43 4.2v-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M177.89 169.91c-4.77 0-11.22-2.99-20.41-9.38-5.51-3.83-8.1-10.04-7.5-17.94.56-7.33 6.17-13.28 13.04-13.84 2.04-.17 6.27-.51 9.51 2.37 2.41 2.14 3.72 5.62 3.9 10.32l-4 .15c-.13-3.58-.99-6.09-2.56-7.48-1.81-1.61-4.32-1.55-6.53-1.37-4.94.4-8.97 4.77-9.38 10.16-.5 6.5 1.45 11.33 5.79 14.36 9.48 6.6 15.86 9.38 19.5 8.52 1.35-.32 2.36-1.17 3.17-2.66.77-1.42-.53-3.65-1.38-4.86-4.21-5.99-14.24-11.84-17.81-11.3l-.6-3.95c5.86-.89 17.18 6.54 21.69 12.95 3.05 4.34 2.57 7.33 1.62 9.07-1.36 2.5-3.29 4.06-5.76 4.65-.72.17-1.48.26-2.29.26v-.03Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M224.3 159.28c-6.98 0-13.93-1.73-20.62-5.2-6.62-3.43-11.12-9.88-12.04-17.27-.5-4.05.36-9.22 1.19-14.22.98-5.91 2.09-12.61.2-14.85-.31-.37-.9-.86-2.39-.86-2.81 0-5.15 1.01-7.15 3.08-7.72 8.02-7.06 28.27-7.05 28.47l-4 .15c-.03-.9-.73-22.15 8.17-31.39 2.75-2.86 6.13-4.31 10.03-4.31 2.33 0 4.16.76 5.44 2.27 3.09 3.65 1.93 10.66.7 18.09-.78 4.72-1.59 9.59-1.16 13.07.76 6.17 4.37 11.35 9.91 14.21 11.51 5.96 23.84 6.3 35.64 1.01l1.64 3.65c-6.09 2.73-12.31 4.1-18.5 4.1h-.01ZM218.88 206.26c-8.46 0-16.4-1.38-22.77-2.99-13.19-3.33-22.44-8.17-22.83-8.37l1.87-3.54c.36.19 36.66 19 66.06 6.78l1.54 3.69c-7.84 3.26-16.07 4.43-23.86 4.43h-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M109.51 128.64c-.4 0-.79-.16-1.07-.45l-25.2299-25.74c-.58-.59-.57-1.54.02-2.12.59-.58 1.54-.57 2.12.02l24.1299 24.62 42.36-45.48c.56-.61 1.51-.64 2.12-.08.61.56.64 1.51.08 2.12l-43.43 46.63c-.28.3-.67.47-1.08.48h-.02Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramCameraDenied = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M7 160.98v15.07c0 5.87 4.76 10.63 10.63 10.63h152.76c5.87 0 10.63-4.76 10.63-10.63v-8.43c0-.39-11.44-17.76-18.33-18.63-6.89-.87-15.91-3.54-15.91-3.54-10.32-3.9-.42-12.65-.42-12.65l2.72-.43c-11.11-.83-12.16-11.46-12.16-11.46l5.18-2.95-1.41-2.87-.67-2.83-.07-2.37 1.38-.98s4.14-1.27 4.79-1.33c.65-.06 6.02.68 6.02.68l7.73.98s11.4 3.27 11.63 3.34c.23.07 9.5 4.71 9.5 4.71V75.21c0-5.87-4.76-10.63-10.63-10.63H17.63C11.76 64.57 7 69.33 7 75.21V160.98Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M229.74 154.75c-14.46-19.53-40.46-50.52-48.72-50.52v-4c12.97 0 47.98 46.8 51.93 52.14l-3.21 2.38ZM165.6 125.62c-18.46-2.42-27.63-6.04-28.84-11.37-.74-3.27 1.84-5.94 3.48-7.01 9.19-5.89 38.25 5.61 41.53 6.94l-1.5 3.71c-11.66-4.73-32.25-10.89-37.85-7.29 0 0-2.06 1.44-1.75 2.77.2.85 2.36 5.25 25.46 8.28l-.52 3.97h-.01Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M165.45 138.84c-27.17-5.71-30.83-11.35-31.22-15.1-.53-5.04 5.75-7.95 6.47-8.27l1.62 3.66c-1.42.63-4.29 2.49-4.1 4.2.15 1.37 2.6 6.25 28.07 11.6l-.82 3.91h-.02Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M201.77 196.03c-2.43-3.36-4.81-6.87-7.33-10.59-11.38-16.79-23.15-34.16-38.58-35.71-8.27-.83-13.23-3.3-14.76-7.35-2.06-5.44 3.13-11.13 3.35-11.37l2.94 2.71c-1.04 1.14-3.53 4.66-2.55 7.25.93 2.43 4.98 4.13 11.42 4.77 17.29 1.74 29.59 19.89 41.49 37.45 2.5 3.69 4.86 7.18 7.26 10.49l-3.24 2.34v.01Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M50.2699 44h-32.72c-1.5795 0-2.86 1.2805-2.86 2.86v9.97c0 1.5795 1.2805 2.86 2.86 2.86h32.72c1.5796 0 2.86-1.2805 2.86-2.86v-9.97c0-1.5795-1.2804-2.86-2.86-2.86Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M79.0899 138.19c-.38 0-.77-.15-1.06-.44-.59-.59-.59-1.54 0-2.12l26.0901-26.09c.59-.59 1.54-.59 2.12 0 .59.59.59 1.54 0 2.12l-26.0901 26.09c-.29.29-.68.44-1.06.44Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M105.18 138.19c-.38 0-.77-.15-1.06-.44l-26.0901-26.09c-.59-.59-.59-1.54 0-2.12.59-.59 1.54-.59 2.12 0l26.0901 26.09c.59.59.59 1.54 0 2.12-.29.29-.68.44-1.06.44Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M92.14 161.76c-21.02 0-38.12-17.1-38.12-38.12 0-21.02 17.1-38.12 38.12-38.12 21.02 0 38.12 17.1 38.12 38.12 0 21.02-17.1 38.12-38.12 38.12Zm0-73.23c-19.36 0-35.12 15.75-35.12 35.12 0 19.37 15.75 35.12 35.12 35.12 19.37 0 35.12-15.75 35.12-35.12 0-19.37-15.75-35.12-35.12-35.12ZM167.56 90.54h-23.67c-2.78 0-5.04-2.26-5.04-5.04v-9.23c0-2.78 2.26-5.04 5.04-5.04h23.67c2.78 0 5.04 2.26 5.04 5.04v9.23c0 2.78-2.26 5.04-5.04 5.04Zm-23.67-16.32c-1.13 0-2.04.92-2.04 2.04v9.23c0 1.13.92 2.04 2.04 2.04h23.67c1.13 0 2.04-.92 2.04-2.04v-9.23c0-1.13-.92-2.04-2.04-2.04h-23.67Z"
+      fill={colorValues.secondary}
+    />
+  </Svg>
+);
+
+export default PictogramCameraDenied;

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

@@ -1,56 +1,41 @@
 import React from "react";
-import { Svg, Path, G, Defs, ClipPath, Rect } from "react-native-svg";
+import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
 const PictogramCameraRequest = ({
   size,
-  color,
+  colorValues,
   ...props
 }: SVGPictogramProps) => (
-  <Svg width={size} height={size} viewBox="0 0 124 124" fill="none" {...props}>
-    <G clip-path="url(#clip0_42_891)">
-      <Path
-        d="M40.2701 47.2157V31.1277C40.2701 28.2034 42.6401 25.8334 45.5645 25.8334H118.706C121.63 25.8334 124 28.2034 124 31.1277V82.1674C124 85.0918 121.63 87.4618 118.706 87.4618H45.5645C42.6401 87.4618 40.2701 85.0918 40.2701 82.1674V74.6878L44.0983 69.9478C44.0983 69.9478 48.8263 66.9672 48.983 67.0194C49.1396 67.0716 57.756 64.6534 57.756 64.6534L60.0658 63.3399L61.0098 61.6045L60.118 58.877L59.4873 56.6476L63.0062 53.8839L62.6366 49.7866L62.1185 48.1838L62.9018 44.3074L60.0136 42.536L42.1501 46.3722L40.2661 47.2157"
-        fill="#305CE7"
-      />
-      <Path
-        d="M16.8591 77.5318C16.9917 77.2024 30.7298 44.3475 39.8965 40.8367L40.2821 40.6881V36.9161L39.4627 37.2295C28.8177 41.3067 14.1196 76.0254 13.979 76.3749L13.754 76.9332L16.6302 78.0861L16.8551 77.5278L16.8591 77.5318Z"
-        fill="white"
-      />
-      <Path
-        d="M63.677 48.4368C63.7694 48.2521 63.8578 48.0673 63.9261 47.8745C64.9062 45.1951 63.2151 42.8773 63.1428 42.7809L62.8214 42.4676L62.7371 42.3993C60.4313 40.9211 55.9122 41.0536 49.3043 42.789C44.263 44.1146 39.6194 45.9624 38.7397 46.3159L38.1813 46.5408L39.3462 49.413L39.9046 49.188C46.2112 46.6332 57.3463 43.2469 60.7888 44.8577C60.9857 45.2313 61.303 46.0307 61.0098 46.818C60.5157 48.1396 58.4871 49.2724 55.2896 50.0155L54.7031 50.1521L55.4061 53.1729L55.9926 53.0363C58.2702 52.506 60.0819 51.783 61.4235 50.8711C61.5963 51.3652 61.6886 51.9437 61.5199 52.5181C61.07 54.0646 58.8687 55.4706 55.3217 56.4748L54.7433 56.6395L55.5869 59.6241L56.1653 59.4594C57.041 59.2104 57.8484 58.9412 58.5875 58.644C59.2021 59.5036 59.877 60.8533 59.5195 61.7933C59.0495 63.0225 56.8643 63.8942 53.3655 64.2477C44.3433 65.1555 39.4145 73.5831 34.1925 82.5048C32.3728 85.618 30.4888 88.8356 28.4241 91.6916C26.05 94.9735 18.2892 96.5361 11.842 93.6358C7.41931 91.6474 0.514133 85.9996 3.95668 70.5503L4.08924 69.9638L1.06446 69.289L0.931898 69.8754C-0.421822 75.9571 -2.19331 90.7195 10.5726 96.4638C13.1395 97.6167 16.092 98.2272 19.1167 98.2272C24.3027 98.2272 28.8338 96.4196 30.9387 93.5113C33.0878 90.5428 35.0079 87.2609 36.8718 84.0714C41.6801 75.8527 46.2233 68.0879 53.6748 67.3367C58.5474 66.8466 61.4878 65.3523 62.4197 62.8939C63.2392 60.7288 62.2309 58.5556 61.3713 57.234C63.0263 56.1494 64.0747 54.856 64.4965 53.3657C65.079 51.3291 64.3157 49.5094 63.669 48.4409L63.677 48.4368Z"
-        fill="white"
-      />
-      <Path
-        d="M113.648 43.255H103.469C101.517 43.255 99.9263 41.6643 99.9263 39.712V34.6064C99.9263 32.6542 101.517 31.0635 103.469 31.0635H113.648C115.601 31.0635 117.191 32.6542 117.191 34.6064V39.712C117.191 41.6643 115.601 43.255 113.648 43.255ZM103.469 33.6183C102.923 33.6183 102.481 34.0601 102.481 34.6064V39.712C102.481 40.2583 102.923 40.7002 103.469 40.7002H113.648C114.195 40.7002 114.636 40.2583 114.636 39.712V34.6064C114.636 34.0601 114.195 33.6183 113.648 33.6183H103.469Z"
-        fill="#AAEEEF"
-      />
-      <Path
-        d="M82.135 71.5104C73.9404 71.5104 67.2722 64.8422 67.2722 56.6476C67.2722 48.453 73.9404 41.7848 82.135 41.7848C90.3297 41.7848 96.9978 48.453 96.9978 56.6476C96.9978 64.8422 90.3297 71.5104 82.135 71.5104ZM82.135 44.3396C75.3504 44.3396 69.827 49.8589 69.827 56.6476C69.827 63.4363 75.3463 68.9556 82.135 68.9556C88.9237 68.9556 94.443 63.4363 94.443 56.6476C94.443 49.8589 88.9237 44.3396 82.135 44.3396Z"
-        fill="#AAEEEF"
-      />
-      <Path
-        d="M82.1351 58.7846C81.4281 58.7846 80.8577 58.2142 80.8577 57.5072V48.1557C80.8577 47.4487 81.4281 46.8783 82.1351 46.8783C82.8421 46.8783 83.4125 47.4487 83.4125 48.1557V57.5072C83.4125 58.2142 82.8421 58.7846 82.1351 58.7846Z"
-        fill="#AAEEEF"
-      />
-      <Path
-        d="M82.1351 63.8821C81.4281 63.8821 80.8577 63.3117 80.8577 62.6047V61.7652C80.8577 61.0582 81.4281 60.4878 82.1351 60.4878C82.8421 60.4878 83.4125 61.0582 83.4125 61.7652V62.6047C83.4125 63.3117 82.8421 63.8821 82.1351 63.8821Z"
-        fill="#AAEEEF"
-      />
-      <Rect
-        x="46.5"
-        y="18.6"
-        width="14.9833"
-        height="5.16667"
-        rx="2"
-        fill="#305CE7"
-      />
-    </G>
-    <Defs>
-      <ClipPath id="clip0_42_891">
-        <Rect width="124" height="124" fill="white" />
-      </ClipPath>
-    </Defs>
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M7 160.98v15.07c0 5.87 4.76 10.63 10.63 10.63h152.76c5.87 0 10.63-4.76 10.63-10.63v-8.43c0-.39-11.44-17.76-18.33-18.63-6.89-.87-15.91-3.54-15.91-3.54-10.32-3.9-.42-12.65-.42-12.65l2.72-.43c-11.11-.83-12.16-11.46-12.16-11.46l5.18-2.95-1.41-2.87-.67-2.83-.07-2.37 1.38-.98s4.14-1.27 4.79-1.33c.65-.06 6.02.68 6.02.68l7.73.98s11.4 3.27 11.63 3.34c.23.07 9.5 4.71 9.5 4.71V75.21c0-5.87-4.76-10.63-10.63-10.63H17.63C11.76 64.57 7 69.33 7 75.21V160.98Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M229.74 154.75c-14.46-19.53-40.46-50.52-48.72-50.52v-4c12.97 0 47.98 46.8 51.93 52.14l-3.21 2.38ZM165.6 125.62c-18.46-2.42-27.63-6.04-28.84-11.37-.74-3.27 1.84-5.94 3.48-7.01 9.19-5.89 38.25 5.61 41.53 6.94l-1.5 3.71c-11.66-4.73-32.25-10.89-37.85-7.29 0 0-2.06 1.44-1.75 2.77.2.85 2.36 5.25 25.46 8.28l-.52 3.97h-.01Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M165.45 138.84c-27.17-5.71-30.83-11.35-31.22-15.1-.53-5.04 5.75-7.95 6.47-8.27l1.62 3.66c-1.42.63-4.29 2.49-4.1 4.2.15 1.37 2.6 6.25 28.07 11.6l-.82 3.91h-.02Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M201.77 196.03c-2.43-3.36-4.81-6.87-7.33-10.59-11.38-16.79-23.15-34.16-38.58-35.71-8.27-.83-13.23-3.3-14.76-7.35-2.06-5.44 3.13-11.13 3.35-11.37l2.94 2.71c-1.04 1.14-3.53 4.66-2.55 7.25.93 2.43 4.98 4.13 11.42 4.77 17.29 1.74 29.59 19.89 41.49 37.45 2.5 3.69 4.86 7.18 7.26 10.49l-3.24 2.34v.01Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M50.2699 44h-32.72c-1.5795 0-2.86 1.2805-2.86 2.86v9.97c0 1.5795 1.2805 2.86 2.86 2.86h32.72c1.5796 0 2.86-1.2805 2.86-2.86v-9.97c0-1.5795-1.2804-2.86-2.86-2.86Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M92.0098 135.34c-.83 0-1.5-.67-1.5-1.5v-36.9c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v36.9c0 .83-.67 1.5-1.5 1.5ZM92.1402 150.34c2.0269 0 3.67-1.643 3.67-3.67s-1.6431-3.67-3.67-3.67-3.67 1.643-3.67 3.67 1.6431 3.67 3.67 3.67Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M92.14 161.76c-21.02 0-38.12-17.1-38.12-38.12 0-21.02 17.1-38.12 38.12-38.12 21.02 0 38.12 17.1 38.12 38.12 0 21.02-17.1 38.12-38.12 38.12Zm0-73.23c-19.36 0-35.12 15.75-35.12 35.12 0 19.37 15.75 35.12 35.12 35.12 19.37 0 35.12-15.75 35.12-35.12 0-19.37-15.75-35.12-35.12-35.12ZM167.56 90.54h-23.67c-2.78 0-5.04-2.26-5.04-5.04v-9.23c0-2.78 2.26-5.04 5.04-5.04h23.67c2.78 0 5.04 2.26 5.04 5.04v9.23c0 2.78-2.26 5.04-5.04 5.04Zm-23.67-16.32c-1.13 0-2.04.92-2.04 2.04v9.23c0 1.13.92 2.04 2.04 2.04h23.67c1.13 0 2.04-.92 2.04-2.04v-9.23c0-1.13-.92-2.04-2.04-2.04h-23.67Z"
+      fill={colorValues.secondary}
+    />
   </Svg>
 );
 

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

@@ -2,31 +2,35 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramCharity = ({ size, color, ...props }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+const PictogramCharity = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="M221.881 180.37c-.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.04-.06-2.06.29-2.85.99-.8.72-1.27 1.72-1.32 2.8-.09 2.07 1.38 3.83 3.43 4.11 9.84 1.33 22.46 3.45 26.75 6.03l-2.06 3.43c-2.84-1.71-12.03-3.71-25.22-5.49-4.11-.56-7.08-4.1-6.89-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"
+      fill={colorValues.hands}
     />
     <Path
       d="M141.65 166.14c-2.31-1.73-10.9-2.99-22.99-3.37-5.84-.18-10.47-5.09-10.32-10.94.11-4.48 3.04-8.44 7.28-9.87l2.11-.71 1.27 3.79-2.11.71c-2.66.89-4.49 3.37-4.56 6.17-.09 3.66 2.8 6.73 6.45 6.85 13.65.43 22.16 1.83 25.27 4.17l-2.4 3.2Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M181.73 225.31c-16.99-25.12-39-41.13-65.42-47.6l-.51-.12c-2.85-.7-5.15-2.77-6.15-5.53-1.04-2.87-.5-6.13 1.4-8.5l3.28-4.1 3.12 2.5-3.29 4.1c-1.04 1.3-1.33 3.07-.77 4.64.55 1.51 1.8 2.63 3.35 3.01l.5.12c27.41 6.71 50.22 23.28 67.78 49.25l-3.31 2.24.02-.01ZM161.573 142.908l-2.586 3.052 8.02 6.793 2.585-3.052-8.019-6.793Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M169.83 171.57c-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.01ZM149.299 143.674 136.725 170.9l3.631 1.677 12.575-27.226-3.632-1.677Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M134.75 27.82c-4.15-4.68-9.41-8.27-15.31-10.44-5.9-2.18-12.26-2.88-18.51-2.03-3.7799.51-7.4499 1.58-10.8899 3.15-4.49 2.05-7.86 5.81-10.65 9.88l-3.1 4.53c-3.74-2.62-7.92-4.57-12.35-5.72-4.86-1.26-9.92-1.56-14.89-.88-4.97.68-9.77 2.33-14.1 4.86-4.33 2.52-8.13 5.87-11.16 9.85-3.04 3.98-5.25 8.52-6.53 13.35-1.28 4.83-1.59 9.87-.91 14.81.68 4.95 2.34 9.71 4.87 14.02 2.53 4.31 5.9 8.08 9.89 11.09L104.6 133.21l26.72-45.64 10.54-20.04c1.85-4.42 3.76-12.92 1.34-23.34-1.41-6.07-4.32-11.7-8.47-16.38l.02.01Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M26.2295 69.79c-.79 0-1.45-.62-1.5-1.42-1.37-25.26 18.17-33.75 28.7-34.71.83-.08 1.55.53 1.63 1.36.08.83-.53 1.55-1.35 1.63-1.12.11-27.54 2.92-25.98 31.56.04.83-.59 1.53-1.42 1.58h-.08Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );

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

@@ -2,35 +2,35 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramCie = ({ size, color, ...props }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+const PictogramCie = ({ size, colorValues, ...props }: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="M7 150.41v15.07c0 5.87 4.76 10.63 10.63 10.63h152.76c5.87 0 10.63-4.76 10.63-10.63v-8.43c0-.39-11.44-17.76-18.33-18.63-6.89-.87-15.91-3.54-15.91-3.54-10.32-3.9-.42-12.65-.42-12.65l2.72-.43c-11.11-.83-12.16-11.46-12.16-11.46l5.18-2.95-1.41-2.87-.67-2.83-.07-2.37 1.38-.98s4.14-1.27 4.79-1.33c.65-.06 6.02.68 6.02.68l7.73.98s11.4 3.27 11.63 3.34c.23.07 9.5 4.71 9.5 4.71V64.63c0-5.87-4.76-10.63-10.63-10.63H17.63C11.76 54 7 58.76 7 64.63V150.41Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M168.31 172.12H18.9201c-4.6 0-8.34-3.74-8.34-8.34V65.41c0-4.59 3.74-8.33 8.34-8.33H169.51c4.6 0 8.34 3.74 8.34 8.34v37.71c0 .75-.61 1.35-1.35 1.35-.74 0-1.35-.61-1.35-1.35V65.41c0-3.1-2.53-5.63-5.63-5.63H18.9201c-3.1 0-5.63 2.53-5.63 5.63v98.37c0 3.1 2.53 5.63 5.63 5.63H168.31c3.1 0 5.63-2.53 5.63-5.63v-16.29c0-.75.61-1.35 1.35-1.35.74 0 1.35.61 1.35 1.35v16.29c0 4.6-3.74 8.34-8.34 8.34h.01Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="M229.74 144.18c-14.45-19.53-40.46-50.52-48.71-50.52v-4c12.97 0 47.98 46.8 51.93 52.14l-3.22 2.38ZM165.6 115.05c-18.46-2.42-27.63-6.04-28.84-11.37-.74-3.26 1.84-5.94 3.48-7.01 9.19-5.9 38.25 5.61 41.53 6.94l-1.5 3.71c-11.66-4.73-32.25-10.89-37.85-7.29 0 0-2.06 1.44-1.75 2.77.2.85 2.36 5.25 25.45 8.28l-.52 3.97Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M165.45 128.27c-27.17-5.71-30.83-11.35-31.22-15.1-.52-5.04 5.75-7.95 6.47-8.27l1.62 3.66c-1.42.63-4.29 2.49-4.1 4.2.15 1.37 2.6 6.25 28.07 11.6l-.82 3.91h-.02Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M201.77 185.46c-2.43-3.36-4.81-6.87-7.33-10.59-11.38-16.79-23.15-34.16-38.58-35.71-8.27-.83-13.23-3.3-14.76-7.35-2.06-5.44 3.13-11.13 3.35-11.37l2.94 2.72c-1.04 1.14-3.53 4.66-2.55 7.25.93 2.43 4.98 4.13 11.42 4.77 17.29 1.74 29.59 19.89 41.49 37.45 2.5 3.69 4.86 7.18 7.26 10.49l-3.24 2.34Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M43.6602 138.19c-8.36 0-15.17-6.8-15.17-15.17 0-8.37 6.8-15.17 15.17-15.17 8.37 0 15.17 6.8 15.17 15.17 0 8.37-6.8 15.17-15.17 15.17Zm0-27.33c-6.71 0-12.17 5.46-12.17 12.17s5.46 12.17 12.17 12.17 12.17-5.46 12.17-12.17-5.46-12.17-12.17-12.17Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="M63.5003 158.12c-.83 0-1.5-.67-1.5-1.5 0-10.11-8.23-18.34-18.34-18.34s-18.34 8.23-18.34 18.34c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5c0-11.77 9.57-21.34 21.34-21.34s21.34 9.57 21.34 21.34c0 .83-.67 1.5-1.5 1.5ZM118.02 139.21H75.4902c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5H118.02c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5ZM104.62 77H29.9902c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5H104.62c1.93 0 3.5 1.57 3.5 3.5s-1.57 3.5-3.5 3.5ZM71.6702 88.77h-41.68c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5h41.67c1.93 0 3.5 1.57 3.5 3.5s-1.57 3.5-3.5 3.5h.01ZM107.18 153.73H75.4902c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5H107.18c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5ZM124.2 146.66H75.4902c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5H124.2c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );

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

@@ -5,23 +5,27 @@ import { SVGPictogramProps } from "../Pictogram";
 /**
  * @deprecated Use `charity` key instead
  */
-const PictogramDonation = ({ size, color, ...props }: SVGPictogramProps) => (
+const PictogramDonation = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
   <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M147.212 192.138c.852.489 1.722.687 2.557.688 1.688-.002 3.239-.8 4.178-1.531 7.01-3.154 96.182-35.614 99.267-36.674h.001l.189-.065-1.328-3.835-.574.197c-5.355 1.842-93.089 33.823-99.504 36.809-.155.077-.319.189-.457.301 0 0-.006.004-.015.011h-.001c-.157.12-1.433 1.085-2.287.591-1.146-.68-6.407-6.424 2.924-52.883 4.407-21.91 2.285-38.661-6.295-49.7966-10.504-13.6464-27.726-14.7298-33.383-15.0824l-.888-.0516c-3.536.0774-11.8661.7223-12.832 5.1851-.6467 2.9494 1.932 5.8989 8.503 9.5534-12.1766.4299-28.967 2.4593-35.0553 9.9833-.0776.1032-.1466.2063-.2069.3181-.6037 1.1179-1.1901 3.5084.3794 5.3917.4798.573 1.161 1.147 2.2752 1.557-2.1345 1.696-3.9916 3.899-3.8706 6.38.207 4.187 5.5364 5.984 7.287 6.569.1294.043.2587.078.3967.095.1811.026 1.7075.206 4.0963.206l-.0087.009c1.4315 0 3.1716-.066 5.1144-.271-.581 2.115-.8166 4.783.629 6.892 1.3194 1.935 3.6737 2.898 6.9248 2.898l.0087-.009c.8537 0 1.7678-.06 2.7509-.198 1.8857-.095 5.7711-.365 9.6731-1.091-3.196 15.023-15.1229 77.882 4.582 96.651 1.561 2.063 15.359 19.055 45.05 19.055v.008c15.574 0 65.53-14.678 90.374-28.642l-2-3.534C138 262 121 220.936 115.442 218.433c-.086-.12-.181-.232-.284-.326-19.07-17.837-5.227-85.166-3.106-94.877 2.869-.886 5.268-2.124 6.21-3.856l-3.579-1.934c-1 1.84-9.71 3.525-17.0745 3.903-3.0701.422-5.2432.069-5.9417-.945-.8383-1.215-.129-3.711.5702-5.31 3.7122-.764 7.786-2.086 11.701-4.33l-2.026-3.517c-9.8141 5.624-21.1456 4.764-22.7496 4.609-3.1218-1.083-4.2773-2.21-4.3118-2.855-.0756-1.499 3.5311-4.206 6.9223-5.792 3.4963-.397 8.28-1.458 14.887-3.5632l-1.2418-3.8609c-17.3595 5.5291-19.8 2.9924-19.9035 2.8807-.138-.1634-.0518-.5504.0259-.7653 6.5712-7.6702 29.8555-8.3581 36.8925-8.3839 1.285-.0086 2.38-.8857 2.664-2.1326.285-1.2726-.336-2.5624-1.517-3.13-10.487-5.0561-10.849-7.3434-10.849-7.3434.483-.9373 4.915-1.9433 8.779-2.0379l.724.0516.008.0004c5.757.3615 21.029 1.3204 30.408 13.4998 7.83 10.1639 9.693 25.8227 5.528 46.5287-10.391 51.726-3.295 55.841-.966 57.191Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M89.9306 0C76.0999 0 64.8867 11.1786 64.8867 24.9668 64.8867 11.1786 53.6769 0 39.8462 0c-.2464 0-.4929.00332-.7393.00996C21.2631.52456 11.9649 21.5073 23.268 35.2822l32.1174 39.1467c4.9122 5.986 14.0938 5.986 19.006 0l32.1176-39.1467C117.809 21.5073 108.51.52457 90.6666.00996A27.44628 27.44628 0 0 0 89.9273 0h.0033Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M87.1816 7.87002c0-.72428.5872-1.31143 1.3115-1.31143 5.9448 0 10.2533 2.29037 13.0539 5.63291 2.77 3.3058 3.994 7.5532 3.994 11.4157 0 .7242-.587 1.3114-1.311 1.3114s-1.311-.5872-1.311-1.3114c0-3.3505-1.07-6.9716-3.3825-9.7312-2.2813-2.7228-5.8413-4.69455-11.0434-4.69455-.7243 0-1.3115-.58715-1.3115-1.31143Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );

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

@@ -2,31 +2,31 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramEmpty = ({ size, ...props }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+const PictogramEmpty = ({ size, colorValues, ...props }: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="M102.76 55c27.83 0 50.39 22.56 50.39 50.39 0 1.8-.1 3.58-.28 5.33l-3.63-2.63-3.97-1.84s-5.58.69-6.49 0c-.91-.69-3.36.07-3.68.25-.32.18-3.22 3.07-3.22 3.07l-1.28 3.54v3.94l1.28 2.9v1.89l-5.56-1.38s-.81-.19-2.71-.63c-1.89-.44-7.77-.02-7.96-.87-.19-.85-.1-.92-1.53-1.1-1.43-.17-4.95-.81-4.95-.81l-2.77-.35-2.72-.24s-3.41.83-3.63.98c-.2299.15-2.6699 6.32-2.6699 6.32v1.98l-.93 1.54-2.44 1.36-3.35 3.73.43 8.12 4.02 4.73-4.02 5.58.99 3.82c-22.7-4.9-39.71-25.08-39.71-49.25 0-27.83 22.56-50.39 50.3899-50.39V55Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M202.651 164.54c-.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-.06-2.06.29-2.85.99-.8004.72-1.2704 1.72-1.3204 2.8-.09 2.07 1.3904 3.83 3.4304 4.11 9.84 1.33 22.46 3.45 26.75 6.03l-2.06 3.43c-2.84-1.71-12.03-3.71-25.22-5.49-4.1104-.55-7.0804-4.1-6.9004-8.25.1-2.17 1.04-4.16 2.65-5.6 1.59-1.43 3.6404-2.14 5.7704-2.01 7.67.48 18.97 3.05 25.23 4.59-1.02-3.37-.72-7.37 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.55v.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M122.41 150.3c-2.3-1.73-10.9-2.99-22.9898-3.37-5.84-.18-10.47-5.09-10.32-10.94.11-4.47 3.04-8.44 7.28-9.87l2.11-.71 1.27 3.79-2.11.71c-2.66.89-4.49 3.37-4.55 6.17-.09 3.66 2.8 6.73 6.45 6.85 13.6498.43 22.1598 1.83 25.2698 4.17l-2.4 3.2h-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M162.49 209.47c-16.99-25.12-39-41.13-65.4198-47.6l-.51-.12c-2.85-.7-5.15-2.77-6.15-5.53-1.04-2.86-.5-6.12 1.4-8.5l3.29-4.1 3.12 2.5-3.29 4.1c-1.04 1.3-1.33 3.07-.76 4.64.55 1.51 1.8 2.63 3.35 3.02l.5.12c27.4098 6.71 50.2198 23.28 67.7798 49.25l-3.31 2.24v-.02ZM142.327 127.059l-2.585 3.052 8.021 6.792 2.585-3.052-8.021-6.792Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M150.6 155.74c-6.01-10.42-2.18-27.59-2.01-28.32l3.9.89c-.04.16-3.65 16.38 1.58 25.42l-3.46 2-.01.01ZM130.063 127.83l-12.575 27.227 3.632 1.677 12.574-27.226-3.631-1.678Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M123.15 84.47c-.39 0-.79-.15-1.08-.46-.57-.6-.55-1.55.05-2.12l31.26-29.92c.6-.57 1.55-.55 2.12.05.57.6.55 1.55-.05 2.12l-31.26 29.92c-.29.28-.66.42-1.04.42v-.01ZM106.62 75.54c-.82 0-1.49-.66-1.5-1.48l-.45-41.54c0-.83.66-1.51 1.48-1.52h.02c.82 0 1.49.66 1.5 1.48l.45 41.54c0 .83-.66 1.51-1.48 1.52h-.02ZM87.8601 82.24c-.39 0-.78-.15-1.07-.45l-26.8-27.47c-.58-.59-.57-1.54.03-2.12.59-.58 1.54-.57 2.12.03l26.8 27.47c.58.59.57 1.54-.03 2.12-.29.28-.67.43-1.05.43v-.01ZM82.0598 100.99c-.06 0-.12 0-.18-.01l-45.55-5.36c-.82-.1-1.41-.84-1.31-1.67.1-.82.84-1.41 1.66-1.31l45.56 5.36c.82.1 1.41.84 1.31 1.67-.09.76-.74 1.32-1.49 1.32Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );

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

@@ -4,25 +4,25 @@ import { SVGPictogramProps } from "../Pictogram";
 
 const PictogramEmptyArchive = ({
   size,
-  color,
+  colorValues,
   ...props
 }: SVGPictogramProps) => (
   <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="M76.1996 43.73 189.8 73.56c3.22.83 6.51-1.11 7.34-4.33l5.65-21.86c.83-3.22-1.11-6.51-4.33-7.34L84.8596 10.19c-3.22-.83-6.51 1.11-7.34 4.33l-5.65 21.86c-.83 3.22 1.11 6.51 4.33 7.34v.01ZM179.55 157.73v-72.6c0-2.56-2.08-4.64-4.64-4.64H65.8197c-2.56 0-4.64 2.08-4.64 4.64v71.44c0 2.56 2.08 4.64 4.64 4.64H129.69l-.55-4.65 4.67-6.35 6.64-4.86 9.01-2.33 15.19 3.55"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M188.171 70.34c-.13 0-.26-.02-.39-.05L80.9709 41.46c-1.65-.44-3.03-1.49-3.88-2.97-.85-1.48-1.08-3.2-.64-4.85l2.95-10.93c.22-.8 1.03-1.27 1.84-1.06.8.22 1.27 1.04 1.06 1.84l-2.95 10.93c-.24.87-.12 1.78.34 2.57.45.78 1.18 1.34 2.06 1.57L188.561 67.38c.8.22 1.27 1.04 1.06 1.84-.18.67-.79 1.11-1.45 1.11v.01ZM131.44 155.34H71.6796c-3.08 0-5.58-2.5-5.58-5.58V89.99c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v59.77c0 1.42 1.16 2.58 2.58 2.58H131.44c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5ZM64.44 56.92c-.36 0-.73-.13-1.01-.39l-23.4-21.46c-.61-.56-.65-1.51-.09-2.12.56-.61 1.51-.65 2.12-.09l23.39 21.46c.61.56.65 1.51.09 2.12-.3.32-.7.49-1.11.49l.01-.01ZM60.7404 68.7c-.07 0-.15 0-.22-.02l-33.24-4.92c-.82-.12-1.39-.88-1.26-1.7.12-.82.89-1.39 1.7-1.26l33.24 4.92c.82.12 1.39.88 1.26 1.7-.11.75-.75 1.28-1.48 1.28Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="M174.141 230.45c-14.96-4.85-23.75-15.74-32.24-26.27-12.08-14.98-23.49-29.12-51.7505-29.39-.14 0-.28-.02-.42-.05-3.46-.78-9.81-4.65-9.03-13.7l3.99.34c-.62 7.24 4.68 9.11 5.75 9.41 29.9805.37 42.4905 15.88 54.5805 30.88 8.5 10.54 16.53 20.5 30.36 24.98l-1.231 3.81-.009-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M98.4708 174.84c-8.32-6.55-8.42-13.34-8.42-13.63h4-2l2-.02c0 .21.2 5.24 6.8902 10.51l-2.4702 3.14ZM211.62 193.75l-41.86-40.14c-5.14-4.93-11.67-7.68-18.4-7.76h-.32c-8.7 0-15.49 4.21-20.17 12.52-1.55 2.75-1.65 5.99-.26 8.47.89 1.58 2.13 2.54 3.81 2.92 2.99.68 8.89-.15 20.02-7.99l2.3 3.27c-10.04 7.07-17.63 9.88-23.21 8.62-2.77-.63-4.99-2.31-6.42-4.87-2.07-3.69-1.96-8.44.27-12.39 6.87-12.18 16.82-14.61 24.02-14.56 7.74.09 15.24 3.24 21.12 8.87l41.86 40.14-2.77 2.89.01.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
   </Svg>
 );

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

@@ -2,31 +2,35 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramFatalError = ({ size, color, ...props }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+const PictogramFatalError = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="m163.7 156.28-8.51-5.4-3.63-6.05 2.33-3.93 4.14-5.57-5.33-6.74-.55-5.22 7.37-2.49-1.05-4.44 3.79-2.49s9.52 1.63 9.77 1.63c.2 0 17.76 13.61 24.84 19.11 3.66-5.07 8.6-15.33 8.6-29.28 0-8.14-2.04-16.16-5.93-23.34-3.89-7.18-9.52-13.29-16.39-17.8-6.86-4.51-14.75-7.27-22.96-8.04-4.96-.47-9.94-.2-14.79.79-6.31 1.28-11.72 5.07-16.46 9.42l-15 13.78 17 28.16-24.5 24.7 15 29.15-21.4996 23.71 9.9996 24.21 57.96-49.85-4.21-4.02h.01Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M84.1001 58.86c6.14 2.27 11.78 5.73 16.5799 10.17l-5.0399 9.55 20.4699 30.29-20.4699 24.83 16.9699 27.31-16.9699 24.82 9.4899 21.35-72.4499-65.43c-4.8-4.44-8.68-9.78-11.4-15.71-2.73-5.93-4.25-12.33-4.49-18.85-.24-6.52.82-13.01 3.1-19.13 2.29-6.11 5.76-11.71 10.23-16.49 4.46-4.77 9.83-8.63 15.79-11.34 5.96-2.71 12.4-4.23 18.95-4.47 6.55-.24 13.09.81 19.23 3.09l.01.01Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M228.62 188.2c-6.57-23.39-19.88-61.6-27.59-64.53l1.42-3.74c12.13 4.61 28.23 60.79 30.03 67.19l-3.85 1.08h-.01ZM179.01 138.19c-16.4-8.82-23.68-15.46-22.92-20.87.47-3.31 3.83-4.9 5.75-5.32 10.67-2.24 33.76 18.83 36.36 21.24l-2.72 2.93c-9.22-8.56-26.31-21.63-32.8-20.26 0 0-2.44.62-2.62 1.97-.12.87.34 5.74 20.85 16.78l-1.89 3.52-.01.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M174.17 150.49c-23.37-14.99-24.79-21.56-23.82-25.21 1.3-4.9 8.2-5.39 8.98-5.43l.21 3.99c-1.55.09-4.89.81-5.33 2.47-.35 1.33.21 6.76 22.12 20.81l-2.16 3.37Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M187.81 216.85c-1.08-4.01-2.06-8.13-3.09-12.5-4.67-19.74-9.51-40.15-23.38-47.08-7.43-3.71-11.2-7.79-11.19-12.11 0-5.82 6.88-9.29 7.17-9.44l1.78 3.58c-1.38.69-4.96 3.1-4.96 5.87 0 2.6 3.19 5.63 8.98 8.52 15.54 7.77 20.59 29.11 25.48 49.74 1.03 4.34 2 8.44 3.06 12.39l-3.86 1.04.01-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M30.7095 64.21c-.24 0-.48-.07-.69-.21L8.52952 49.25c-.56-.38-.7-1.14-.32-1.7.38-.56 1.14-.69 1.69-.32L31.3895 61.98c.56.38.7 1.14.32 1.7-.24.34-.62.53-1.01.53h.01ZM40.0601 55.47c-.54 0-1.04-.37-1.18-.92l-7.63-30.03c-.17-.65.23-1.32.88-1.48.65-.16 1.32.23 1.48.88l7.63 30.03c.17.65-.23 1.32-.88 1.48-.1.03-.2.04-.3.04ZM77.7702 174.8c-.37 0-.74-.14-1.03-.41l-38.61-36.71c-7.1-6.75-12.09-16.59-12.72-25.08-3.29-44.4 36.91-48.46 37.32-48.5.83-.07 1.55.54 1.62 1.36.07.82-.54 1.55-1.36 1.63-1.54.14-37.67 3.87-34.59 45.29.58 7.79 5.21 16.87 11.8 23.13l38.61 36.71c.6.57.62 1.52.05 2.12-.29.31-.69.47-1.09.47v-.01Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );

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

@@ -2,39 +2,43 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramFeature = ({ size, color, ...props }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+const PictogramFeature = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="M93.3604 126.53c-.71 0-1.44-.15-2.13-.48-2.5-1.18-3.57-4.16-2.39-6.66L132.94 25.87c1.18-2.5 4.16-3.57 6.66-2.39 2.5 1.18 3.57 4.16 2.39 6.66l-44.1096 93.53c-.85 1.81-2.65 2.87-4.53 2.87l.01-.01Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M152.65 156.79c-25.22 0-35.15-10.21-35.61-10.69l-.13-.16c-4.39-5.74-17.89-20.46-27.39-19.73-3.14.24-5.64 2.15-7.64 5.84-1.94 3.21-6.54 12.31-5.19 16.82.28.92.79 1.53 1.61 1.92 1.13.53 2.25.58 3.45.15 3.94-1.44 7.5-7.62 8.53-9.89l3.64 1.66c-.18.39-4.47 9.67-10.8 11.98-2.22.81-4.42.71-6.54-.29-1.84-.87-3.13-2.39-3.73-4.38-2.11-7.01 4.76-18.66 5.55-19.96 2.62-4.82 6.27-7.48 10.8-7.83 13.3-1.02 29.36 19.33 30.8 21.18.87.84 12.71 11.65 41.86 8.94l.37 3.98c-3.41.32-6.61.46-9.59.46h.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M51.0402 169.86c-2.64-1.44-4.26-3.52-4.82-6.19-1.32-6.3 4.17-13.51 4.41-13.81l.17-.22.23-.17c1.66-1.21 16.43-11.7 24.64-6.62l-2.11 3.4c-4.92-3.04-16.06 3.5-19.94 6.27-1.37 1.87-4.25 6.76-3.49 10.33.31 1.48 1.24 2.62 2.82 3.49l-1.92 3.51.01.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M141.66 216.45c-35.07 0-68.7497-16.76-70.2397-17.51-15.93-7.18-26.49-12.51-27.32-20.6-.56-5.48 1.2-8.61 6.51-11.57 4.69-2.61 12.31-5.49 22.03-4.4 7.05.79 12.88 5.23 14.85 11.32 1.31 4.05.24 6.65-.89 8.12-2.49 3.24-7.79 4.6-16.2 4.15l.21-3.99c9.04.48 11.91-1.41 12.81-2.59.29-.38 1.19-1.55.26-4.45-1.49-4.6-5.99-7.96-11.49-8.58-8.67-.97-15.47 1.6-19.64 3.92-4.22 2.35-4.84 4.05-4.47 7.66.61 5.94 11.23 11.17 25.06 17.4.45.23 37.7897 18.8 73.6097 16.99l.2 4c-1.76.09-3.53.13-5.29.13Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="m86.3804 174.4-2.69-2.96c4.44-4.04 6.07-8.61 4.86-13.61-.95-3.89-3.31-6.65-3.34-6.68l3.01-2.64c.12.13 11.68 13.59-1.84 25.88v.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M100.11 171.22c-5.84 0-10.85-4.39-11.11-4.63l2.66-2.98c.06.05 6.12 5.33 11.25 3.02l1.64 3.65c-1.49.67-3 .94-4.45.94h.01ZM54.1802 151.43l-3.94-.71c2.06-11.46 6.62-19.24 13.54-23.12 9.05-5.08 18.66-1.46 19.06-1.3l-1.44 3.73c-.08-.03-8.31-3.09-15.7 1.08-5.81 3.28-9.68 10.11-11.52 20.32Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M52.4304 217.61c-.71 0-1.44-.15-2.12-.48-2.5-1.17-3.57-4.15-2.4-6.65l14.51-30.9c1.17-2.5 4.15-3.57 6.65-2.4s3.57 4.15 2.4 6.65l-14.51 30.9c-.85 1.81-2.65 2.88-4.53 2.88ZM134.58 37.11l58.03 60.29c5.47 5.68 1.2 15.12-6.67 14.78l-85.01-3.72 33.65-71.35Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M184.82 100.66c-.39 0-.79-.15-1.08-.46l-49.57-51.59c-.57-.6-.55-1.55.04-2.12.6-.57 1.54-.56 2.12.04l49.57 51.59c.57.6.55 1.55-.04 2.12-.29.28-.67.42-1.04.42Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );

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

@@ -2,27 +2,31 @@ import React from "react";
 import Svg, { Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramFeedback = ({ size, color, ...props }: SVGPictogramProps) => (
+const PictogramFeedback = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
   <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="m114.24 60.39-26.41 33.4 3.46 2.32 3.8 3.66 3.27 5.19v3.94l-4 2.71-4.08-.07 3.06 1.9 1.02 3.28-1.13 2.72-2.95 1.31s-.26 1.11-.34 1.41c-.08.3.98 3.38.98 3.38l-1.46 7.32-2.53 2.93-3.67.83-6.06-1.24-5.09-2.47-4.9-4.58L56.9 140.2l-.9 47.91 45.66-17.42 35.63-52.16-1.69-1.46-9.46-5.56-10.25-4.39-6.4-8.19.78-5.97 6.21-6.99 8.99-1.87 14.31 3.67 9.85 7.83 3.79-5.06c8.42-11.23 5.8-27.21-5.75-35.18-10.72-7.4-25.35-5.2-33.43 5.02v.01ZM71.81 178.11c-3.15-9.61-12.77-8.86-12.77-8.86l1.01-24.84c20.88-1.35 36.99 23.48 36.99 23.48L71.81 178.1v.01Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M100.22 160.11c-.3102 0-.6202-.09-.8902-.29-.67-.49-.81-1.43-.32-2.1l32.2002-43.91c.49-.67 1.43-.81 2.1-.32.67.49.81 1.43.32 2.1l-32.2 43.91c-.29.4-.75.61-1.21.61ZM145.19 93.58c-.33 0-.66-.11-.94-.33-.65-.52-.75-1.46-.23-2.11.04-.05 3.76-4.75 5.46-10.99 2.21-8.1.11-14.91-6.25-20.25-.63-.53-.72-1.48-.18-2.11.53-.63 1.48-.72 2.11-.18 17.49 14.69 1.37 35.21 1.2 35.42-.3.37-.73.56-1.17.56v-.01Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="M91.7298 113.89h-.32c-9.06-.16-19.97-8-23.82-17.13-2.57-6.1-1.66-11.94 2.57-16.43 3.23-3.43 7.03-5.21 11.29-5.27h.25c8.78 0 16.25 7.33 16.56 7.64l-2.82 2.83c-.07-.07-6.63-6.48-13.74-6.48h-.2c-3.17.06-5.93 1.37-8.42 4.02-3.94 4.19-3.15 8.91-1.79 12.13 3.24 7.69 12.68 14.56 20.2 14.69 2.03.03 4.5-.33 4.84-2.28.62-3.53-4.83-11.05-14.45-14.33l1.29-3.79c10.25 3.5 18.2402 12.29 17.1002 18.81-.3002 1.69-1.7202 5.59-8.5302 5.59h-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M83.8496 123.72c-5.34 0-14.79-1.83-21.61-13.29-4.24-7.12-5.27-12.63-3.06-16.37 2.66-4.52 8.79-4.38 9.04-4.38l-.12 4 .06-2-.05 2s-4.05-.06-5.49 2.42c-1.36 2.33-.27 6.69 3.06 12.28 3.88 6.52 9.06 10.27 15.4 11.15 5.72.79 10.19-1.09 11.09-1.77.22-.53.3-1.38.02-2.24-.19-.58-.62-1.37-1.6-1.83l1.72-3.61c1.76.84 3.07 2.33 3.68 4.2.62 1.89.48 3.96-.38 5.54-1.08 2.01-6.24 3.79-11.27 3.9h-.5.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M83.3394 138.63c-1.97 0-4.24-.45-6.8-1.35-19.8-6.99-14.57-28.16-14.52-28.37l3.87 1s-1.15 4.64-.19 9.85c1.25 6.72 5.34 11.35 12.16 13.76 2.94 1.04 6.85 1.89 8.78.04 2.69-2.56 1.36-9.65.68-11.93l3.83-1.15c.34 1.14 3.2 11.25-1.75 15.97-1.53 1.46-3.56 2.19-6.08 2.19l.02-.01ZM166.88 178.05c-10.96-1.06-23.28-5.82-36.6-14.16-9.87-6.17-16.45-11.96-16.73-12.2l2.65-3c.26.23 26.34 22.99 51.07 25.38l-.38 3.98h-.01ZM136.97 125.59l-3.54-1.85c.02-.05.91-1.93-.13-4.43-1.01-2.44-4.08-5.98-12.92-9.02-8.06-2.77-12.68-6.39-13.73-10.76-1-4.14 1.61-7.31 2.11-7.87 13.8-17.12 31.88-4.55 32.06-4.42.03.02.06.04.08.06 21.25 16.88 43.78 20.01 44.01 20.04l-.52 3.97c-.96-.13-23.83-3.3-45.93-20.83-1.01-.7-15.37-10.26-26.62 3.74-.04.05-.08.09-.12.13-.06.07-1.77 1.94-1.18 4.28.72 2.86 4.67 5.65 11.14 7.88 8.33 2.86 13.5 6.71 15.38 11.42 1.68 4.22 0 7.52-.08 7.66h-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
   </Svg>
 );