@pagopa/io-app-design-system 1.9.3 → 1.11.0

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramBleedCameraDenied = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M19 165.98v15.07c0 5.87 4.76 10.63 10.63 10.63h152.76c5.87 0 10.63-4.76 10.63-10.63v-15.47c0-3.8-12.11-6.43-19-7.3-6.89-.87-15.24-7.83-15.24-7.83-10.32-3.9-.42-12.65-.42-12.65l2.72-.43c-11.11-.83-14.36-8.24-14.36-8.24l7.39-6.17-3.53-1.39-2.05-4.02 3.44-2.66 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.71V80.21c0-5.87-4.76-10.63-10.63-10.63H29.63C23.76 69.57 19 74.33 19 80.21V165.98ZM62.2699 49h-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="M91.0899 143.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="M117.18 143.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="M104.14 166.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.12ZM179.56 95.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}
+    />
+    <Path
+      d="M240.21 133.29c-9.7-6.57-37.08-23.63-47.18-23.63v-4.2c13.44 0 48.07 23.36 49.53 24.35l-2.36 3.48h.01ZM176.84 132.12c-19.38-2.54-29-6.34-30.27-11.94-.78-3.43 1.93-6.24 3.66-7.36 9.65-6.19 40.15 5.89 43.59 7.29l-1.58 3.89c-12.24-4.96-33.85-11.43-39.74-7.65 0 0-2.16 1.51-1.84 2.91.21.89 2.47 5.51 26.72 8.69l-.55 4.16.01.01Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M176.68 146c-28.52-5.99-32.37-11.92-32.78-15.85-.55-5.29 6.04-8.35 6.79-8.68l1.69 3.84c-1.49.66-4.5 2.61-4.31 4.41.15 1.44 2.73 6.56 29.46 12.17l-.86 4.11h.01Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M240.52 185.71c-38.99-17.68-53.2-21.59-71.19-26.54l-2.55-.7c-9.02-2.49-14.19-6.14-15.38-10.85-1.36-5.4 3.12-9.75 3.31-9.94l2.9 3.04-1.45-1.52 1.46 1.51s-2.92 2.88-2.14 5.9c.78 3.04 5.19 5.81 12.42 7.81l2.54.7c18.17 5 32.52 8.95 71.81 26.76l-1.73 3.82v.01Z"
+      fill={colorValues.hands}
+    />
+  </Svg>
+);
+
+export default PictogramBleedCameraDenied;

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramBleedCameraRequest = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M20 165.98v15.07c0 5.87 4.76 10.63 10.63 10.63h152.76c5.87 0 10.63-4.76 10.63-10.63v-14.83c0-.39-9.03-5.96-15.92-6.83-6.89-.87-18.52-5.24-18.52-5.24-10.32-3.9-.23-16.35-.23-16.35l1.09 2.1c-11.11-.83-14.35-9.17-14.35-9.17l7.68-7.01-2.88-.69-.78-5.36 2.85-2.77 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.71V80.21c0-5.87-4.76-10.63-10.63-10.63H30.63C24.76 69.57 20 74.33 20 80.21V165.98Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M240.33 133.99c-9.7-6.57-37.08-23.63-47.18-23.63v-4.2c13.44 0 48.07 23.36 49.53 24.35l-2.36 3.48h.01ZM176.97 132.82c-19.38-2.54-29-6.34-30.27-11.94-.78-3.43 1.93-6.24 3.66-7.36 9.65-6.19 40.15 5.89 43.59 7.29l-1.58 3.89c-12.24-4.96-33.85-11.43-39.74-7.65 0 0-2.16 1.51-1.84 2.91.21.89 2.47 5.51 26.72 8.69l-.55 4.16.01.01Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M176.81 146.69c-28.52-5.99-32.37-11.92-32.78-15.85-.55-5.29 6.04-8.35 6.79-8.68l1.69 3.84c-1.49.66-4.5 2.61-4.31 4.41.15 1.44 2.73 6.56 29.46 12.17l-.86 4.11h.01Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M240.65 186.41c-38.99-17.68-53.2-21.59-71.19-26.54l-2.55-.7c-9.02-2.49-14.19-6.14-15.38-10.85-1.36-5.4 3.12-9.75 3.31-9.94l2.91 3.03s-2.92 2.88-2.14 5.9c.78 3.04 5.19 5.81 12.42 7.81l2.54.7c18.17 5 32.52 8.95 71.81 26.76l-1.73 3.82v.01Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M63.2699 49h-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="M105.01 140.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.5ZM105.14 155.34c2.027 0 3.67-1.643 3.67-3.67s-1.643-3.67-3.67-3.67-3.67 1.643-3.67 3.67 1.643 3.67 3.67 3.67Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M105.14 166.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.12ZM180.56 95.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 PictogramBleedCameraRequest;

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

@@ -2,31 +2,35 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramBleedCharity = ({ size, ...props }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+const PictogramBleedCharity = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="M133.46 173.8c-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.11-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.88.22 1.51 1.01 1.52 1.92 0 .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.17-3.8 21.12-8.32 26.15-8.25l-.06 4h-.08c-3.38 0-12.29 2.89-24.47 7.94-1.01.42-2.05.62-3.08.62l-.02.02Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M137.37 190.23c-3.78 0-7.45-2.01-9.39-5.54-2.16-3.92-1.62-8.82 1.33-12.19l1.47-1.68 3.01 2.63-1.47 1.68c-1.84 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.08-9.56 23.94-9.11l-.47 3.97c-2.88-.34-10.93 2.9-21.57 8.66-1.6.87-3.33 1.28-5.04 1.28Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M240.29 213.7c-39.81-19.17-81.44-13.87-92.88-10.51-2.82.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.81-8.97 95.75 10.74l-1.73 3.6h-.01ZM169.508 150.199l-.698 3.939 10.348 1.834.698-3.939-10.348-1.834Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M191.07 170.8c-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.258 156.644l-3.982.38 2.844 29.854 3.982-.379-2.844-29.855Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M133.75 39.82c-4.15-4.68-9.41-8.27-15.31-10.44-5.9-2.18-12.26-2.88-18.5099-2.03-3.78.51-7.45 1.58-10.89 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.09L103.6 145.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="M25.2295 81.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/PictogramBleedCie.tsx

@@ -2,35 +2,39 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramBleedCie = ({ size, color, ...props }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+const PictogramBleedCie = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="M19 155.41v15.07c0 5.87 4.76 10.63 10.63 10.63h152.76c5.87 0 10.63-4.76 10.63-10.63v-17.77c0-.39-11.26-4.36-18.16-5.23-6.9-.87-16.08-7.6-16.08-7.6-10.32-3.9-.42-12.65-.42-12.65l2.72-.43c-11.11-.83-15.11-10.96-15.11-10.96l8.14-3.44-1.41-2.87-3.59-2.58 2.86-2.61 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 2.47 9.5 2.47V69.63c0-5.87-4.76-10.63-10.63-10.63H29.63C23.76 59 19 63.76 19 69.63V155.41Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M180.31 177.12H30.9201c-4.6 0-8.34-3.74-8.34-8.34V70.42c0-4.6 3.74-8.34 8.34-8.34H181.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.35V70.42c0-3.1-2.53-5.63-5.63-5.63H30.9201c-3.1 0-5.63 2.53-5.63 5.63v98.37c0 3.1 2.53 5.63 5.63 5.63H180.31c3.1 0 5.63-2.53 5.63-5.63V152.5c0-.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.34l.01-.01Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="M240.209 121.41c-9.7-6.57-37.08-23.63-47.18-23.63v-4.2c13.44 0 48.07 23.36 49.53 24.35l-2.36 3.48h.01ZM176.839 120.23c-19.38-2.54-29-6.34-30.27-11.94-.78-3.43 1.93-6.24 3.66-7.36 9.65-6.19 40.15 5.89 43.59 7.29l-1.58 3.89c-12.24-4.96-33.86-11.43-39.74-7.65 0 0-2.16 1.51-1.84 2.91.21.89 2.47 5.51 26.72 8.69l-.55 4.16.01.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M176.68 134.11c-28.52-5.99-32.37-11.92-32.78-15.85-.55-5.29 6.04-8.35 6.79-8.68l1.69 3.84c-1.49.66-4.5 2.61-4.31 4.41.15 1.44 2.73 6.56 29.46 12.17l-.86 4.11h.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M240.52 173.83c-38.99-17.68-53.2-21.59-71.19-26.54l-2.55-.7c-9.02-2.49-14.19-6.14-15.37-10.85-1.36-5.4 3.12-9.76 3.31-9.94l2.9 3.04-1.45-1.52 1.46 1.51s-2.92 2.88-2.14 5.9c.78 3.04 5.19 5.81 12.41 7.81l2.55.7c18.17 5 32.52 8.95 71.81 26.76l-1.73 3.82-.01.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M54.21 143.18c-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="M74.0501 163.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.5ZM128.57 144.21H86.04c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5h42.53c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5ZM115.18 82H40.5498c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5H115.18c1.93 0 3.5 1.57 3.5 3.5s-1.57 3.5-3.5 3.5ZM82.2198 93.76h-41.67c-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.5ZM117.74 158.72H86.0498c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5H117.74c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5ZM134.76 151.66H86.0498c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5H134.76c.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/PictogramBleedFeature.tsx

@@ -4,41 +4,41 @@ import { SVGPictogramProps } from "../Pictogram";
 
 const PictogramBleedFeature = ({
   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="M156.2 126.24h-.29c-2.76-.16-4.87-2.52-4.71-5.28l5.89-103.24c.16-2.76 2.55-4.88 5.28-4.72 2.76.16 4.87 2.52 4.71 5.28l-5.89 103.24c-.15 2.66-2.36 4.72-4.99 4.72Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M153.501 158.01c-.18 0-.36 0-.55-.02-2.03-.12-3.79-1.04-5.1-2.67-4.58-5.71-2.57-19.08-2.33-20.59.6-5.18 2.79-8.92 6.52-11.01 7.82-4.39 20.48-.22 29.72 4.05 6.08 2.81 12.88 4.15 19.63 3.89 8.93-.35 23.07-1.9 39.71-7.35l1.24 3.8c-17.08 5.59-31.61 7.19-40.8 7.55-7.38.29-14.82-1.18-21.46-4.26-11.87-5.49-21.14-6.98-26.09-4.2-2.58 1.45-4.06 4.09-4.52 8.07-.59 3.7-1.46 13.86 1.49 17.54.6.75 1.3 1.12 2.21 1.17 1.24.07 2.31-.3 3.25-1.15 3.12-2.81 4.1-9.88 4.21-12.36l4 .18c-.02.43-.53 10.64-5.53 15.15-1.62 1.46-3.51 2.2-5.62 2.2l.02.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M135.05 181.89c-2.99-.35-5.27-1.67-6.79-3.93-3.58-5.35-1.19-14.09-1.09-14.46l.08-.27.15-.24c1.08-1.75 10.85-17 20.37-15.36l-.68 3.94c-5.68-.97-13.58 9.26-16.14 13.28-.57 2.24-1.41 7.86.63 10.89.84 1.26 2.13 1.97 3.92 2.18l-.46 3.97h.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M165.16 201.25h-.24c-17.54-.7-29.33-1.7-33.13-8.89-2.57-4.87-2.11-8.44 1.7-13.16 3.37-4.17 9.36-9.7 18.78-12.33 6.84-1.91 13.9.03 18.01 4.94 2.73 3.27 2.71 6.08 2.21 7.87-1.1 3.94-5.5 7.18-13.47 9.91l-1.3-3.78c8.56-2.93 10.51-5.77 10.91-7.2.13-.47.53-1.88-1.43-4.22-3.1-3.71-8.54-5.14-13.86-3.65-8.4 2.35-13.74 7.27-16.75 10.99-3.04 3.76-2.98 5.57-1.28 8.78 2.77 5.25 14.48 6.15 29.51 6.75 4.76-.96 61.18-12.3 76.36-12.3h.59l-.09 4c-14.14-.32-75.68 12.14-76.3 12.26l-.24.05.02-.02Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="m169.52 172.88-3.6-1.74c6.24-12.95-5.67-19.12-6.18-19.37l1.79-3.57c.16.08 15.92 8.23 7.99 24.69v-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M175.67 165.75c-3.52 0-6.42-1.02-6.64-1.1l1.35-3.76-.68 1.88.67-1.88c.08.03 7.67 2.66 11.57-1.41l2.89 2.77c-2.64 2.75-6.13 3.51-9.16 3.51v-.01ZM127.15 164.45c-2.38-11.4-1.06-20.32 3.9-26.51 6.49-8.1 16.75-8.34 17.19-8.34l.06 4c-.09 0-8.87.25-14.16 6.88-4.16 5.21-5.19 13-3.08 23.16l-3.92.82.01-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M152.35 226.02h-.28c-2.76-.15-4.87-2.51-4.72-5.27l1.89-34.08c.15-2.76 2.54-4.87 5.27-4.72 2.76.15 4.87 2.51 4.72 5.27l-1.89 34.08c-.15 2.66-2.35 4.72-4.99 4.72ZM161.02 26l71.02 30.46c6.69 2.87 6.45 12.44-.37 14.97l-73.66 27.36L161.02 26Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M225.95 62.13c.57.04 1.13-.28 1.37-.83.3-.7-.02-1.52-.73-1.82l-60.7-26.1c-.71-.3-1.52.02-1.82.73-.3.7.02 1.52.73 1.82l60.7 26.1c.15.06.3.1.45.11v-.01Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );

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

@@ -2,27 +2,31 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramBleedFeedback = ({ size, ...props }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+const PictogramBleedFeedback = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="m157.94 57.81-17.59 39.34 3.97 1.41 4.64 2.64 4.51 4.28.98 3.87-3.25 3.66-4.02.95 3.48 1.1 1.81 2.97-.43 2.95-2.57 2.02s.02 1.16.02 1.47c0 .31 1.8 3.07 1.8 3.07l.39 7.54-1.75 3.51-3.39 1.72-6.25.29-5.61-1.16-5.94-3.28-7.16 14.2 11.05 47.22 40.45-28.46 21.97-60.04-2.02-1.02-10.67-3.09-11.15-1.75-8.32-6.44-.72-6.05 4.35-8.4 8.35-4.07 14.95.04 11.61 5.22 2.46-5.91c5.46-13.11-1.08-28.14-14.4-33.07-12.36-4.58-26.16 1.21-31.54 13.25l-.01.02Zm-12.3 126.05c-5.49-8.64-14.73-5.51-14.73-5.51l-5.2-24.61c20.14-6.53 42.14 13.82 42.14 13.82l-22.21 16.3Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M168.65 159.17c-.19 0-.38-.04-.57-.11-.78-.31-1.15-1.2-.84-1.98l20.65-51.1c.31-.78 1.2-1.15 1.98-.84.78.31 1.15 1.2.84 1.98l-20.65 51.1c-.24.59-.81.95-1.41.95ZM196.19 82.71c-.21 0-.42-.04-.63-.14-.76-.35-1.1-1.25-.75-2.01.02-.06 2.5-5.6 2.62-12.14.15-8.49-3.61-14.65-11.18-18.31-.75-.36-1.07-1.27-.71-2.03.36-.76 1.27-1.07 2.03-.71 20.82 10.06 10.11 34.2 10 34.44-.25.56-.81.89-1.38.89v.01Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="M144.48 116.46c-8.31 0-18.13-4.6-23.24-11.36-4.04-5.35-4.6-11.3-1.57-16.75 2.32-4.17 5.6-6.86 9.76-7.98 8.69-2.35 18 3.08 18.4 3.31l-2.06 3.48c-.08-.05-8.26-4.8-15.29-2.88-3.1.84-5.47 2.82-7.26 6.04-2.83 5.09-.87 9.52 1.26 12.35 5.1 6.74 16.07 11.12 23.47 9.38 1.99-.47 4.33-1.44 4.18-3.44-.27-3.62-7.49-9.63-17.75-10.46l.33-4.04c10.93.88 20.96 7.51 21.46 14.19.13 1.76-.31 6.04-7.29 7.68-1.39.33-2.86.48-4.39.48h-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M138.02 128.25c-5.25 0-11.98-1.75-18.62-8.39-5.93-5.93-8.32-11.08-7.09-15.3 1.48-5.09 7.53-6.49 7.78-6.54l.89 3.95s-3.99.95-4.79 3.74c-.75 2.62 1.4 6.63 6.06 11.29 5.43 5.43 11.44 7.82 17.88 7.1 5.81-.65 9.72-3.61 10.44-4.5.08-.57-.05-1.43-.54-2.2-.33-.52-.95-1.19-2.02-1.4l.78-3.97c1.94.38 3.59 1.52 4.66 3.2 1.08 1.7 1.46 3.76 1.01 5.53-.56 2.24-5.18 5.27-10.08 6.63-1.66.46-3.84.86-6.37.87l.01-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M142.72 142.75c-.83 0-1.7-.04-2.61-.12-21.16-1.92-21.31-23.99-21.3-24.22h4.05c0 .77.19 18.6 17.62 20.18 3.14.28 7.19.15 8.63-2.15 2.01-3.2-1.07-9.8-2.31-11.87l3.47-2.08c.62 1.03 5.94 10.24 2.26 16.1-1.73 2.76-5.03 4.15-9.81 4.15v.01ZM235.72 159.91c-24.43 0-54.21-11.76-55.54-12.29l1.5-3.76c.34.13 33.93 13.39 58.12 11.88l.25 4.04c-1.42.09-2.86.13-4.32.13h-.01ZM196.48 116.11l-3.94-.93c.01-.06.41-2.12-1.24-4.31-1.6-2.14-5.49-4.85-14.92-5.63-8.59-.71-14.03-3.11-16.15-7.13-2.02-3.82-.24-7.57.11-8.25 9.27-20.23 30.13-12.4 30.34-12.32 25.05 10.56 48.09 8.75 48.33 8.73l.34 4.03c-.98.08-24.27 1.91-50.19-9.01-.66-.25-17.51-6.49-25.17 10.31-.03.05-.05.11-.08.16-.04.08-1.25 2.34-.09 4.49 1.42 2.62 5.99 4.38 12.89 4.95 8.88.73 14.91 3.21 17.93 7.37 2.7 3.72 1.87 7.38 1.83 7.54h.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
   </Svg>
 );

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

@@ -2,31 +2,35 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramBleedHelp = ({ size, ...props }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+const PictogramBleedHelp = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="M133.94 165.85c-2.88 0-5.61-1.57-7.03-4.28-1.01-1.92-1.2-4.12-.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.11-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 0 .91-.6 1.71-1.48 1.95-.18.05-18.53 5.04-27.9 9.73-.94.47-1.63 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.34-.08-12.27 2.85-24.55 7.94-1.01.42-2.05.62-3.08.62l-.01.02Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M137.85 182.28c-3.78 0-7.45-2.01-9.39-5.54-2.16-3.92-1.62-8.82 1.33-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.88-.34-10.93 2.9-21.57 8.66-1.6.87-3.33 1.28-5.04 1.28Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M240.77 205.74c-39.81-19.17-81.44-13.88-92.88-10.51-2.82.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.73 3.6h-.01ZM169.987 142.243l-.698 3.938 10.349 1.834.698-3.938-10.349-1.834Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M191.551 162.85c-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.743 148.684l-3.982.379 2.843 29.855 3.982-.379-2.843-29.855Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M85.52 154.04c32.872 0 59.52-26.648 59.52-59.52S118.392 35 85.52 35 26 61.648 26 94.52s26.648 59.52 59.52 59.52Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M82.4798 130.63c2.5626 0 4.64-2.077 4.64-4.64 0-2.563-2.0774-4.64-4.64-4.64-2.5626 0-4.64 2.077-4.64 4.64 0 2.563 2.0774 4.64 4.64 4.64ZM82.24 114.86c-.83 0-1.5-.67-1.5-1.5 0-18.43 5.9-22.29 12.15-26.38.95-.62 1.93-1.26 2.88-1.96 4.85-3.55 6.86-9.58 5.11-15.38-1.34-4.42-5.25-9.26-12.22-9.58h-.26c-.24 0-.54.01-.88-.04-4.42-.72-11.67 1.68-15.44 6.38-2.86 3.57-3.33 7.82-1.41 12.63.31.77-.07 1.64-.84 1.95-.77.31-1.64-.07-1.95-.84-2.93-7.34-.61-12.54 1.85-15.62 4.57-5.7 13.04-8.31 18.26-7.46.11.02.22 0 .33 0h.47c7.14.32 12.87 4.81 14.96 11.71 2.12 7.03-.32 14.36-6.22 18.67-1.01.74-2.03 1.4-3.01 2.05-5.79 3.79-10.79 7.06-10.79 23.87 0 .83-.67 1.5-1.5 1.5h.01Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );

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>
 );