@pagopa/io-app-design-system 1.15.0 → 1.16.1

package/src/components/pictograms/generateNewPictograms.js

@@ -0,0 +1,181 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-console */
+/* eslint-disable @typescript-eslint/restrict-plus-operands */
+
+/**
+DRAFT for an AUTOMATIC process to generate new pictogram components 
+(`Pictogram....tsx`) from the SVG files exported from Figma.
+
+Prerequisites:
+- The pictogram must be exported from the 240 × 240 frame
+- The pictogram must be saved with the final name
+  - To learn more about naming conventions, please read the local README
+*/
+
+// STEPS:
+
+/**
+ * 1. Only process the newly added files
+ *
+ * Suggested path:
+ * 1. Files that need to be processed must be in the `svg/originals` folder.
+ * 2. Add a new file with the timestamp of the last process run.
+ *    The file must be committed along with others.
+ * 3. Only files added after that timestamp value will be processed.
+ * 4. After the process run, update the new file with the current timestamp.
+ */
+
+/**
+ * 2. Optimize SVG files with SVGO package (https://github.com/svg/svgo)
+ *
+ * Suggested path:
+ * 1. Add `svgo` to the `package.json` to use it as an executable
+ * 2. Configure it with the following parameters:
+ *   - removeDimensions
+ *   - removeRasterImages
+ *   - removeScriptElement
+ *   - removeViewBox (disabled)
+ * 3. Overwrite the original files
+ */
+
+/**
+ * 3. Create the relative React component (with .tsx)
+ *
+ * Suggested path:
+ * - For every new SVG file:
+ *   1. Copy all the code contained in the `<svg>` tag
+ *   2. Use the file `_PictogramTemplate.tsx` as component template
+ *      - Replace `PictogramTemplate` with the original SVG name
+ *      - Remove all the comments inserted in the component file
+ *   3. Replace the `{SVGContent}` placeholder with the code copied
+ *      in the step 1, replacing all the tags with the appropriate
+ *      React ones. E.g: `path` becomes `Path` and so on…
+ *   4. Replace all the color values, set in hexadecimal format, with the
+ *      correct `colorValues…` chromatic value.
+ *      E.g: fill="#CCCCCC" -> fill="colorValues.hands"
+ *   5. Save a new file in the `svg` folder with the same filename
+ *      of the relative SVG file and extension `.tsx`.
+ *      E.g: svg/originals/PictogramProfile.svg -> svg/PictogramProfile.tsx
+ */
+
+const path = require("path");
+const join = path.join;
+const { optimize } = require("svgo");
+const prettier = require("prettier");
+const fs = require("fs-extra");
+const { transform } = require("@svgr/core");
+
+const svgDir = join(__dirname, "svg/originals");
+const tsxDir = join(__dirname, "svg");
+const templateFilePath = join(__dirname, "svg/_PictogramTemplate.tsx");
+const timestampFilePath = join(__dirname, "timestamp.txt");
+
+const colorMapValues = {
+  "#0B3EE3": "{colorValues.hands}",
+  "#AAEEEF": "{colorValues.main}",
+  "#00C5CA": "{colorValues.secondary}"
+};
+
+const convertTimestampToReadableFormat = timestamp =>
+  new Date(timestamp).toLocaleString("it-IT", {
+    timeZone: "Europe/Rome"
+  });
+
+fs.readFile(timestampFilePath, "utf8", (err, timestamp) => {
+  if (err) {
+    console.log("Timestamp file not found.");
+    throw err;
+  }
+
+  console.log(
+    "Last processed timestamp:",
+    convertTimestampToReadableFormat(timestamp)
+  );
+  console.log(`————————————————`);
+
+  fs.readdir(svgDir, (err, files) => {
+    if (err) {
+      throw err;
+    }
+
+    files.forEach(file => {
+      const filePath = join(svgDir, file);
+      const fileStats = fs.statSync(filePath);
+
+      /* Only process files with a more recent creation
+      date later than the timestamp value */
+      if (fileStats.mtime > new Date(timestamp)) {
+        const data = fs.readFileSync(filePath, "utf8");
+
+        // Check if the file is an SVG
+        if (!file.endsWith(".svg")) {
+          return;
+        }
+
+        // Using SVGO to optimize the SVG
+        const result = optimize(data, {
+          path: filePath,
+          plugins: [
+            "removeDimensions",
+            "removeRasterImages",
+            "removeScriptElement",
+            "removeUselessDefs"
+          ]
+        });
+        // Overwrite original SVG file with optimized code
+        fs.writeFileSync(filePath, result.data);
+
+        // Convert SVG to JSX using `svgr`
+        const jsxCode = transform.sync(result.data, {
+          // Optimize SVG code using SVGO
+          svgo: true,
+          svgoConfig: {
+            removeRasterImages: true,
+            removeScriptElement: true,
+            removeUselessDefs: true
+          },
+          // Transform tags in Capital Case for React Native
+          native: true,
+          // Remove `width` and `height` attrs
+          dimensions: false,
+          /* Replace the hardcoded color value with one
+          obtained from `colorMapValues`. */
+          replaceAttrValues: colorMapValues,
+          /* Prettify the result */
+          plugins: ["@svgr/plugin-jsx"]
+        });
+
+        // Extract only the Path tags from the JSX code
+        const pathTagRegex = /<Path[^>]*\/>/g;
+        const pathTags = jsxCode.match(pathTagRegex);
+        const jsxCodeWithPathOnly = pathTags.join("");
+
+        const template = fs.readFileSync(templateFilePath, "utf8");
+        const componentData = template
+          .replace(/PictogramTemplate/g, file.replace(".svg", ""))
+          .replace(/\/\/.*\n/g, "") // Remove lines starting with //
+          .replace(`{/* SVGContent */}`, jsxCodeWithPathOnly);
+
+        // Save the file with the same filename with `.tsx` extension
+        const fileWithTsxExtension = file.replace(".svg", ".tsx");
+        const tsxFilePath = join(tsxDir, fileWithTsxExtension);
+        fs.writeFileSync(
+          tsxFilePath,
+          prettier.format(componentData, { parser: "typescript" })
+        );
+
+        console.log(`${file} → ${fileWithTsxExtension}`);
+      }
+    });
+
+    const newTimestamp = new Date();
+    const convertedISOTimestamp = newTimestamp.toISOString();
+    fs.writeFileSync(timestampFilePath, convertedISOTimestamp);
+
+    const readableUpdatedTimestamp =
+      convertTimestampToReadableFormat(newTimestamp);
+
+    console.log(`————————————————`);
+    console.log("Updated timestamp:", readableUpdatedTimestamp);
+  });
+});

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

@@ -0,0 +1,54 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramActivate = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M144.48 140.45L145.64 135.04L147.68 132.44L151.01 131.61C151.17 131.15 151.32 130.69 151.45 130.22L148.34 130.69L141.54 129.73H132.3C132.3 129.73 128.95 128.8 126.95 127.98C124.95 127.16 125.17 126.63 124.59 125.97C124.02 125.31 123.16 125.15 123.16 125.15L123.18 122.14L122.32 120.35L125.57 115.61L127.74 113.92L130.58 112.87L134.61 112.17L148.33 110.69L151.48 110.58C147.25 96.05 133.85 85.43 117.96 85.43H42.91C23.63 85.43 8 101.07 8 120.35C8 139.63 23.63 155.26 42.91 155.26H117.96C128.82 155.26 138.52 150.3 144.92 142.53L144.47 140.45H144.48Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M231.619 188.04L227.619 188.01C227.769 165.26 213.199 140.49 204.499 127.75C200.829 122.37 195.769 118.36 189.849 116.13C167.319 107.64 141.189 111.23 130.999 113.16C127.319 113.86 124.739 117.07 124.989 120.63C125.069 121.82 125.329 125.44 132.729 126.64C147.979 129.1 161.489 126.33 161.629 126.3L162.449 130.22C161.869 130.34 148.069 133.17 132.089 130.6C123.379 129.2 121.249 124.56 120.989 120.92C120.599 115.34 124.579 110.31 130.249 109.24C140.769 107.24 167.779 103.55 191.249 112.39C197.939 114.91 203.659 119.44 207.789 125.5C216.749 138.63 231.769 164.21 231.609 188.04H231.619Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M166.999 152.52C166.749 152.52 166.499 152.51 166.259 152.48C163.399 152.2 161.439 150.29 160.899 147.25C160.149 143.01 162.199 137.16 167.009 129.89C170.449 124.68 174.039 120.65 174.189 120.48L177.169 123.15C173.339 127.43 163.669 139.99 164.839 146.56C165.119 148.15 165.879 148.44 166.649 148.51C170.659 148.9 179.189 142.85 181.519 136.89L185.239 138.35C182.469 145.42 173.189 152.53 166.989 152.53L166.999 152.52Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M187.429 153.3C186.669 149.35 180.929 146.14 178.779 145.23L180.329 141.54C180.729 141.71 190.039 145.68 191.359 152.54L187.429 153.29V153.3Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M153.259 150.76C150.059 150.76 146.889 149.98 145.019 147.47C142.609 144.23 141.799 139.29 143.019 135.16C144.009 131.81 146.189 129.35 149.149 128.25C149.889 127.97 150.679 127.78 151.499 127.68L151.999 131.65C151.479 131.71 150.989 131.83 150.539 132C148.289 132.84 147.289 134.8 146.849 136.29C145.989 139.22 146.549 142.83 148.219 145.07C150.639 148.32 159.329 146.06 162.179 145.01L163.559 148.76C162.719 149.07 157.949 150.75 153.249 150.75L153.259 150.76Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M166.859 165.4C164.589 165.4 162.399 164.89 160.309 163.88C152.129 159.91 148.629 149.53 148.479 149.09L152.279 147.84C152.309 147.93 155.419 157.07 162.069 160.29C164.979 161.7 168.099 161.77 171.579 160.5C175.079 159.23 177.149 157.71 177.259 156.33C177.399 154.43 174.109 151.71 171.839 150.48L173.739 146.96C174.549 147.4 181.629 151.38 181.249 156.62C181.019 159.77 178.229 162.34 172.949 164.26C170.869 165.02 168.829 165.4 166.859 165.4Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M187.93 204.91C174.99 187.36 172.28 162.84 172.17 161.81L176.15 161.39C176.18 161.63 178.86 185.87 191.15 202.54L187.93 204.91Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M43.1305 146.75C57.7108 146.75 69.5305 134.93 69.5305 120.35C69.5305 105.77 57.7108 93.95 43.1305 93.95C28.5502 93.95 16.7305 105.77 16.7305 120.35C16.7305 134.93 28.5502 146.75 43.1305 146.75Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M132.6 76.11C132.34 76.11 132.07 76.04 131.83 75.9C131.12 75.47 130.89 74.55 131.32 73.84L154.18 35.73C154.61 35.02 155.53 34.79 156.24 35.22C156.95 35.65 157.18 36.57 156.75 37.28L133.88 75.39C133.6 75.86 133.1 76.12 132.59 76.12L132.6 76.11Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M144.04 86.94C143.41 86.94 142.82 86.53 142.61 85.9C142.36 85.11 142.79 84.27 143.58 84.01L188.81 69.54C189.6 69.29 190.44 69.72 190.7 70.51C190.95 71.3 190.52 72.14 189.73 72.4L144.5 86.87C144.35 86.92 144.19 86.94 144.04 86.94Z"
+      fill={colorValues.secondary}
+    />
+  </Svg>
+);
+
+export default PictogramActivate;

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

@@ -0,0 +1,38 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramAttachment = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M98.64 164.14L100.21 154.73L101.27 151.36C101.27 151.36 102.54 146.25 102.71 145.34C102.88 144.43 103.95 139.54 103.94 139.17C103.93 138.79 106.85 136.31 106.85 136.31L109.75 135.32L114.61 136.08L118.32 137.89L120.53 134.63L123.45 129.48L127.49 128.22L130.55 130.71C130.55 130.71 132.29 133.52 132.63 132.26C132.97 131 135.69 130.76 135.93 130.71C136.17 130.66 138.59 131.52 138.59 131.52L140.67 133.36L141.99 138.06L142.06 141.87L140.33 153.72L133.72 173.05H182.77C185.19 173.05 187.22 171.23 187.49 168.83L186.21 13.29C186.52 10.47 184.32 8.00999 181.49 8.00999H56.72C54.3 7.99999 52.27 9.81999 52 12.22L53.28 167.76C52.97 170.58 55.17 173.04 58 173.04H95.9L97.19 169.07L98.64 164.15V164.14Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M113.42 110.05C113.04 110.05 112.65 109.9 112.36 109.61C111.77 109.02 111.77 108.07 112.36 107.49L154.05 65.8C160.86 58.99 160.86 47.91 154.05 41.1C150.75 37.8 146.37 35.99 141.7 35.99C137.03 35.99 132.65 37.81 129.35 41.1L83.26 87.19C81.16 89.29 80 92.09 80 95.07C80 98.05 81.16 100.84 83.26 102.95C87.6 107.29 94.67 107.29 99.02 102.95L144.52 57.45C146.24 55.73 146.24 52.94 144.52 51.22C142.8 49.5 140.01 49.5 138.29 51.22L98.94 90.56C98.35 91.15 97.4 91.15 96.82 90.56C96.23 89.97 96.23 89.02 96.82 88.44L136.17 49.1C139.06 46.21 143.76 46.21 146.64 49.1C149.53 51.99 149.53 56.69 146.64 59.57L101.14 105.07C95.63 110.58 86.65 110.58 81.14 105.07C78.47 102.4 77 98.85 77 95.07C77 91.29 78.47 87.74 81.14 85.07L127.23 38.98C135.21 31 148.19 31 156.17 38.98C164.15 46.96 164.15 59.94 156.17 67.92L114.48 109.61C114.19 109.9 113.8 110.05 113.42 110.05Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M130.032 231.33L126.352 229.77C126.542 229.32 145.342 184.84 145.342 173.04H149.342C149.342 185.64 130.822 229.47 130.032 231.33Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M135.391 173.79L131.681 172.29C136.411 160.63 142.561 140.04 138.971 134.44C138.971 134.44 137.521 132.38 136.201 132.69C135.351 132.89 130.951 135.05 127.921 158.14L123.951 157.62C126.371 139.16 129.991 129.99 135.321 128.78C138.581 128.04 141.261 130.62 142.331 132.26C148.231 141.45 136.721 170.51 135.391 173.79Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M114.65 158.29L110.74 157.47C116.45 130.3 122.09 126.64 125.84 126.25C130.89 125.72 133.79 132 134.11 132.72L130.45 134.34C129.82 132.92 127.97 130.06 126.25 130.24C124.88 130.39 120 132.84 114.65 158.31V158.29Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M77.4707 218.92L73.9707 216.98C85.1507 196.8 97.8107 168.05 99.8407 147.87C100.671 139.6 103.141 134.64 107.191 133.11C112.631 131.05 118.321 136.24 118.561 136.46L115.841 139.4C114.701 138.36 111.181 135.87 108.591 136.85C106.161 137.78 104.461 141.83 103.821 148.27C101.731 169.05 88.8307 198.39 77.4707 218.92Z"
+      fill={colorValues.hands}
+    />
+  </Svg>
+);
+
+export default PictogramAttachment;

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

@@ -0,0 +1,62 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramBleedAccessDenied = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M135.95 174.84C135.03 174.84 134.13 174.77 133.28 174.63C127.13 173.59 123.77 169 124.07 162.03C124.43 153.57 129.79 146.84 139.59 142.58C144.41 140.48 149.79 139.32 155.6 139.14L239.42 136.5L239.55 140.5L155.73 143.14C150.44 143.31 145.55 144.35 141.2 146.25C132.79 149.92 128.37 155.29 128.08 162.21C127.87 167.22 129.79 170 133.96 170.7C140.38 171.78 148.45 167.51 149.19 165.05C149.59 163.71 149.87 160.7 148.36 157.94C147.03 155.51 144.59 153.78 141.1 152.79L142.19 148.94C146.74 150.23 150 152.61 151.86 156.02C153.87 159.69 153.74 163.8 153.01 166.21C151.64 170.75 143.1 174.86 135.96 174.86L135.95 174.84Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M151.87 157.16L148.55 154.92C148.72 154.67 152.66 148.9 158.1 146.98L159.43 150.75C155.25 152.22 151.91 157.1 151.87 157.15V157.16Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M143.27 192.48C138.63 192.09 135.08 190.29 132.7 187.14C128.11 181.05 129.79 172.18 129.86 171.8L133.78 172.57L131.82 172.18L133.78 172.56C133.77 172.63 132.38 180.09 135.9 184.73C137.57 186.93 140.16 188.19 143.6 188.48L143.27 192.47V192.48Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M176.64 185.18C169.13 184.12 165.2 180.53 163.24 177.71C161.1 174.64 160.75 171.84 160.72 171.53L164.7 171.11L162.71 171.32L164.7 171.1C164.74 171.45 165.85 179.62 177.21 181.22L176.65 185.18H176.64Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M156.63 185.42L152.71 184.61C153.59 180.37 153.2 177.09 151.58 174.86C149.68 172.25 146.57 171.89 146.54 171.89L146.92 167.91C147.12 167.93 151.77 168.4 154.77 172.44C157.13 175.62 157.75 179.99 156.63 185.42Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M155.57 202.63C152.2 202.63 146.57 201.58 141.2 195.78C140.23 194.73 139.83 193.32 140.1 191.9C140.37 190.5 141.29 189.3 142.58 188.69L159.53 180.63C161.29 179.98 163.25 180.13 164.91 181.04C166.6 181.97 167.81 183.6 168.22 185.5C169.48 191.31 167.32 196.64 162.13 200.49C160.42 201.76 158.48 202.49 156.5 202.61C156.22 202.63 155.91 202.64 155.58 202.64L155.57 202.63ZM160.98 184.35L144.3 192.3C144.11 192.39 144.05 192.56 144.03 192.66C144.01 192.77 144.01 192.93 144.14 193.06C148.68 197.97 153.23 198.79 156.26 198.61C157.46 198.54 158.66 198.08 159.74 197.28C163.7 194.33 165.24 190.65 164.31 186.34C164.14 185.57 163.66 184.91 162.98 184.54C162.36 184.2 161.65 184.13 160.99 184.35H160.98Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M161.13 200.87L160.74 196.89C161.16 196.85 203.39 192.74 239.58 194.69L239.37 198.68C203.49 196.75 161.56 200.83 161.14 200.87H161.13Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M176.83 217.33C174.27 218.37 171.36 217.13 170.32 214.57L164.01 198.97L164.56 198.4C167.8 195.07 169.28 190.41 168.57 185.82L168.89 184.37L179.59 210.81C180.63 213.37 179.39 216.28 176.83 217.32V217.33Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M154.53 148.92L150.26 153.39L143.94 149.4L129.49 113.7L138.76 109.94L154.53 148.92Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M135.546 116.818C157.059 108.114 166.243 80.6543 156.059 55.4863C145.875 30.3183 120.18 16.9722 98.6674 25.6769C77.1547 34.3817 67.971 61.841 78.1549 87.009C88.3387 112.177 114.034 125.523 135.546 116.818Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M144.66 92.54C144.36 92.54 144.05 92.45 143.79 92.26L90.4198 54.04C89.7498 53.56 89.5898 52.62 90.0698 51.95C90.5498 51.28 91.4898 51.12 92.1598 51.6L145.53 89.82C146.2 90.3 146.36 91.24 145.88 91.91C145.59 92.32 145.13 92.54 144.66 92.54Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M112.1 105.72C112.01 105.72 111.92 105.72 111.83 105.7C111.02 105.55 110.47 104.77 110.62 103.96L122.38 39.38C122.53 38.57 123.31 38.02 124.12 38.17C124.93 38.32 125.48 39.1 125.33 39.91L113.57 104.49C113.44 105.21 112.81 105.72 112.1 105.72Z"
+      fill={colorValues.secondary}
+    />
+  </Svg>
+);
+
+export default PictogramBleedAccessDenied;

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

@@ -0,0 +1,50 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramBleedAttention = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M185.04 102.91L182.33 106.14L179.12 108.17L173.91 110.09L168.03 107.77L163.58 101.84L160.08 94.1L160.55 87.96L159.15 86.35L155.57 83.19L154.12 79.53L154.41 74.04L151.3 72.25L149.05 72.73L142.54 74.72L134.89 75.96L131.51 76.66L124.36 75.13L121.55 73.4L120.1 68.59L120.65 64.78L129.35 59.57L127.43 58.46C123.64 56.27 118.96 56.27 115.17 58.46L62.13 89.07C58.34 91.26 56 95.31 56 99.69V160.92C56 165.3 58.34 169.35 62.13 171.54L115.16 202.16C118.95 204.35 123.63 204.35 127.42 202.16L180.45 171.54C184.24 169.35 186.58 165.3 186.58 160.92V101.8L185.04 102.9V102.91Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M186.58 94.65V92.61L186.13 92.35L186.58 94.65Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M239.62 101.63C203.58 103.8 175.5 93.02 174.33 92.56L175.78 88.83C176.06 88.94 204.26 99.75 239.38 97.63L239.62 101.62V101.63Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M187.04 98.92C187.04 100.81 186.72 102.91 185.73 104.86C184.3 107.65 181.8 109.57 178.31 110.56C171.6 112.46 164.77 107.18 160.98 101.1C156.64 94.13 156.27 86.92 160.03 82.72C167.77 74.1 176.67 75.32 177.05 75.38L176.46 79.34C176.18 79.3 169.26 78.44 163.01 85.4C160.11 88.63 161.61 94.55 164.37 98.99C167.27 103.64 172.53 108.04 177.22 106.71C179.63 106.03 181.24 104.83 182.16 103.05C184.07 99.35 182.31 94.33 182.29 94.28L186.05 92.92C186.11 93.09 187.04 95.7 187.04 98.92Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M239.86 52.54C221.11 54.8 206.61 54.24 196.07 53.74C191.31 53.52 186.81 53.3 182.05 53.37C167.01 53.57 150.53 57.15 150.36 57.18L150.25 57.2C129.24 60.62 124.42 65.01 123.42 67.31C123.13 67.99 122.86 69.08 124 70.78C125.45 72.95 128.14 74.25 131.02 74.16C153.41 73.5 169.38 59.74 169.54 59.61L172.18 62.62C171.49 63.23 155.01 77.46 131.14 78.16C126.9 78.29 122.89 76.31 120.68 73C119.06 70.57 118.75 68.05 119.76 65.71C122.15 60.21 131.9 56.14 149.56 53.25C150.8 52.98 166.82 49.56 182 49.36C186.87 49.3 191.43 49.51 196.26 49.74C206.64 50.23 220.96 50.78 239.38 48.57L239.86 52.54Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M206.07 50.39L204.28 53.97C183.67 43.66 165.04 39.2 161.21 41.63C160.64 42 160.33 42.44 160.22 43.09C159.82 45.43 162.1 49.4 163.64 51.36L160.49 53.83C159.97 53.17 155.45 47.26 156.28 42.43C156.58 40.68 157.54 39.24 159.06 38.27C166.39 33.6 191.19 42.97 206.06 50.4L206.07 50.39Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M160.7 84.12L159.78 88.01C159.6 87.97 155.36 86.94 153.03 82.78C151.16 79.46 151.06 75.22 152.72 70.18L156.52 71.43C155.24 75.33 155.23 78.48 156.49 80.77C157.93 83.39 160.68 84.1 160.71 84.11L160.7 84.12Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M123.54 141.98C122.71 141.98 122.04 141.31 122.04 140.48V93.85C122.04 93.02 122.71 92.35 123.54 92.35C124.37 92.35 125.04 93.02 125.04 93.85V140.48C125.04 141.31 124.37 141.98 123.54 141.98Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M123.69 161.34C126.252 161.34 128.33 159.263 128.33 156.7C128.33 154.137 126.252 152.06 123.69 152.06C121.127 152.06 119.05 154.137 119.05 156.7C119.05 159.263 121.127 161.34 123.69 161.34Z"
+      fill={colorValues.secondary}
+    />
+  </Svg>
+);
+
+export default PictogramBleedAttention;

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

@@ -0,0 +1,50 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramBleedCardAdd = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M44.201 111.799C49.268 116.866 56.268 120 64 120C79.464 120 92 107.464 92 92C92 86.9129 90.6434 82.1426 88.2721 78.0313C88.2661 78.0208 88.2601 78.0104 88.2541 78H162.751L163.412 81.2325L166.448 85.7159L154.935 92.9714L143.803 101.358L138.322 107.432L138.171 112.246L142.65 115.669L152.52 112.847L161.859 106.712C161.859 106.712 167.541 101.728 167.791 101.978C168.052 102.238 168.232 107.713 168.232 107.713C168.232 107.713 169.204 112.376 169.575 112.336C169.945 112.306 175.146 114.518 175.146 114.518L177.07 122.114L183.893 128.609L193.022 129.88L197.34 127.618L199.675 122.634L198.843 116.119L217 115.188V174.964C217 179.407 213.393 183 208.954 183H51.0462C46.5972 183 43 179.397 43 174.964V110.521C43.387 110.959 43.7876 111.386 44.201 111.799Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M66 78H62V89H51V93H62V105H66V93H78V89H66V78Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M49 115.647C48.3124 115.21 47.6451 114.744 47 114.25V171.576C47 175.672 50.4318 179 54.6762 179H205.324C209.559 179 213 175.681 213 171.576V116.355L195.678 117.215L198.587 123.641L195.678 129.927H190.124L181.416 128.753L176.719 122.172L174.282 117.874C174.11 117.143 173.278 116.064 173.242 116.039L173.07 115.736C173.07 115.736 169.617 113.326 169.263 113.354C168.91 113.391 167.772 109.434 167.772 109.434C167.772 109.434 167.218 107.535 166.733 106.012L166.731 106.004C166.426 105.049 166.149 104.244 166.054 104.151C165.971 104.072 165.27 104.569 164.388 105.254L164.371 105.267C162.701 106.565 160.394 108.524 160.394 108.524L151.485 114.192L142.069 116.799L151.485 114.621L161.584 110.138L161.69 110.048L161.748 109.999L161.917 109.856C162.064 109.732 162.275 109.555 162.528 109.343C163.035 108.919 163.712 108.357 164.393 107.805C164.611 107.628 164.828 107.454 165.038 107.287C165.047 107.318 165.246 107.275 165.445 107.232C165.645 107.189 165.845 107.145 165.854 107.177C165.96 107.52 165.843 107.948 165.735 108.344C165.643 108.681 165.557 108.995 165.622 109.213C165.692 109.449 165.75 109.645 165.79 109.782L165.848 109.981L165.85 109.987L165.851 109.988L165.852 109.991L165.852 109.994L165.854 110.001L165.865 110.037L165.903 110.168C165.936 110.281 165.984 110.441 166.042 110.632C166.157 111.012 166.316 111.525 166.488 112.041C166.577 112.306 166.799 112.435 167.018 112.562C167.215 112.677 167.41 112.789 167.5 113C167.59 113.21 167.71 113.472 167.856 113.707C167.924 113.816 168.054 114.015 168.253 114.208C168.335 114.287 168.662 114.601 169.185 114.742C169.201 114.751 169.26 114.744 169.332 114.736C169.55 114.712 169.887 114.674 169.5 115C169.661 115.096 169.769 115.203 169.887 115.321C170.012 115.446 170.151 115.584 170.38 115.736C170.616 115.891 171.323 115.904 171.981 115.916C172.555 115.926 173.091 115.936 173.242 116.039L174.282 117.874C174.389 118.326 174.243 118.645 173.5 118.5L175.03 123.249L181.416 129.5L189.99 131.927L196.5 131L200.786 123.651L198.587 118L211 117.5V171.576C211 174.512 208.519 177 205.324 177H54.6762C51.4745 177 49 174.506 49 171.576V115.647ZM90.8405 84H163.046L164.5 86.5L152.694 94.1538L141.835 102.075L135.964 108.376L137.804 113.376L137.796 113.637L137.939 113.743L137.804 113.376L137.939 109.19L143.168 103.578L153.789 95.8307L165.784 88.8586L164.773 82H90.1615C90.4121 82.6552 90.6388 83.3222 90.8405 84Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M142.86 117.92C140.37 117.92 138.05 116.68 136.67 114.5C134.97 111.84 135.13 108.49 137.07 105.98C148.57 91.05 179.16 78.31 180.46 77.78L180.73 77.69C222.93 66.99 242.32 56.11 242.51 56L244.49 59.47C243.7 59.92 224.57 70.69 181.86 81.53C179.68 82.45 150.73 94.81 140.24 108.42C139.15 109.83 139.43 111.38 140.05 112.35C140.67 113.32 141.94 114.21 143.66 113.83C152.64 111.83 165.66 105.87 176.68 88.88L180.04 91.05C168.29 109.18 154.25 115.56 144.54 117.73C143.98 117.85 143.43 117.91 142.88 117.91L142.86 117.92Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M173.07 117.01C170.19 116.44 168.08 115.02 166.82 112.79C164.25 108.27 166.38 102.11 166.48 101.85L170.25 103.18C169.79 104.48 168.92 108.39 170.31 110.82C170.99 112 172.15 112.74 173.86 113.08L173.08 117L173.07 117.01Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M190.99 132.98C186.74 132.98 181.75 130.95 177.1 126.09C173.43 122.26 171.94 118.26 172.66 114.18C174.13 105.9 184.45 100.76 184.89 100.55L186.65 104.14C186.56 104.18 177.71 108.61 176.6 114.89C176.12 117.63 177.26 120.47 179.99 123.32C186.01 129.6 192.56 130.11 195.67 127.39C198.22 125.16 197.87 121.19 194.75 117.29L197.88 114.8C203.07 121.3 201.83 127.32 198.3 130.41C196.43 132.05 193.88 132.99 190.99 132.99V132.98Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M199.2 118.63C192.65 118.63 188.44 118.19 188.15 118.15L188.58 114.17C189.04 114.22 235.36 118.92 261.78 95.63L264.42 98.63C256.39 105.71 241.41 114.77 215.67 117.7C209.4 118.41 203.73 118.63 199.19 118.63H199.2Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M166.12 87.65C165.47 87.19 159.8 83.03 160.1 78.11C160.25 75.61 161.82 73.54 164.77 71.95C174.2 66.87 204.74 70.1 206.04 70.24L205.61 74.22C197.13 73.3 173.59 71.74 166.67 75.47C165.02 76.36 164.16 77.33 164.09 78.35C163.96 80.5 166.96 83.34 168.43 84.38L166.12 87.65Z"
+      fill={colorValues.hands}
+    />
+  </Svg>
+);
+
+export default PictogramBleedCardAdd;

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramBleedCardFavourite = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M188.53 119.39L189.36 125.9L187.03 130.88L182.72 133.14L173.61 131.87L166.8 125.38L164.88 117.79C164.88 117.79 159.69 115.58 159.32 115.61C158.95 115.65 157.98 110.99 157.98 110.99C157.98 110.99 157.8 105.52 157.54 105.26C157.29 105.01 151.62 109.99 151.62 109.99L142.3 116.12L132.45 118.94L127.98 115.52L128.13 110.71L133.6 104.64L144.71 96.26L156.2 89.01L153.17 84.53L152.51 81.3H41.03C36.6 81.3 33 84.89 33 89.33V178.19C33 182.62 36.59 186.22 41.03 186.22H198.62C203.05 186.22 206.65 182.63 206.65 178.19V118.46L188.53 119.39Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M132.86 120.66C130.37 120.66 128.05 119.42 126.67 117.24C124.97 114.58 125.13 111.23 127.07 108.72C138.57 93.79 169.17 81.05 170.46 80.52L170.73 80.43C213.07 69.7 244.38 54.16 244.69 54L246.48 57.58C246.17 57.74 214.54 73.44 171.85 84.27C169.67 85.19 140.72 97.55 130.23 111.16C129.14 112.57 129.42 114.12 130.04 115.1C130.34 115.57 131.48 117.06 133.65 116.58C142.63 114.58 155.65 108.62 166.66 91.63L170.02 93.8C158.27 111.93 144.23 118.31 134.52 120.48C133.96 120.6 133.41 120.66 132.86 120.66Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M163.07 119.75C160.19 119.18 158.08 117.76 156.82 115.53C154.25 111.01 156.38 104.85 156.47 104.59L160.24 105.93L158.36 105.26L160.25 105.92C159.79 107.22 158.92 111.13 160.31 113.56C160.98 114.74 162.14 115.48 163.86 115.82L163.08 119.74L163.07 119.75Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M180.99 135.72C176.74 135.72 171.75 133.69 167.1 128.83C163.43 125 161.94 121 162.66 116.92C164.13 108.64 174.45 103.5 174.89 103.29L176.65 106.88C176.56 106.92 167.71 111.35 166.6 117.63C166.12 120.37 167.26 123.21 169.99 126.06C176.01 132.35 182.56 132.85 185.67 130.13C188.22 127.9 187.87 123.93 184.75 120.03L187.88 117.54C193.07 124.04 191.83 130.06 188.3 133.15C186.43 134.79 183.88 135.73 180.99 135.73V135.72Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M178.88 120.91C178.6 120.91 178.42 120.91 178.34 120.91L178.39 116.91C178.75 116.91 216.21 117.18 244.61 101.29L246.56 104.78C218.76 120.34 183.84 120.91 178.88 120.91Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M156.12 90.4C155.47 89.94 149.8 85.78 150.1 80.86C150.25 78.36 151.82 76.29 154.77 74.7C164.2 69.62 194.75 72.85 196.04 72.99L195.61 76.97C187.13 76.05 163.59 74.49 156.67 78.22C155.03 79.11 154.16 80.08 154.1 81.1C153.96 83.41 157.27 86.31 158.44 87.14L156.13 90.4H156.12Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M206.65 162.48H33V165.48H206.65V162.48Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M58.8199 91.39L63.2699 100.41L73.2199 101.86L66.0199 108.87L67.7199 118.78L58.8199 114.1L49.9199 118.78L51.6199 108.87L44.4199 101.86L54.3699 100.41L58.8199 91.39Z"
+      fill={colorValues.secondary}
+    />
+  </Svg>
+);
+
+export default PictogramBleedCardFavourite;

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramBleedCardIssue = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M18 155.41V170.48C18 176.35 22.76 181.11 28.63 181.11H181.39C187.26 181.11 192.02 176.35 192.02 170.48V162.05C192.02 161.66 180.3 146.62 173.4 145.75C166.5 144.88 157.77 139.88 157.77 139.88C147.45 135.98 157.35 127.23 157.35 127.23L160.07 126.8C148.96 125.97 147.31 116.43 147.31 116.43L153.1 112.4L151.69 109.53L149.86 107.05L150.95 104.34L152.33 103.36C152.33 103.36 156.47 102.09 157.12 102.03C157.77 101.97 163.14 102.71 163.14 102.71L170.87 103.69C170.87 103.69 182.27 106.96 182.5 107.03C182.73 107.1 192 111.74 192 111.74V69.63C192 63.76 187.24 59 181.37 59H28.63C22.76 59 18 63.76 18 69.63V122.9V155.4V155.41Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M240.38 121.8C230.68 115.23 203.3 98.17 193.2 98.17V93.97C206.64 93.97 241.27 117.33 242.73 118.32L240.37 121.8H240.38Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M177.01 120.62C157.63 118.08 148.01 114.28 146.74 108.68C145.96 105.25 148.67 102.44 150.4 101.32C160.05 95.1299 190.55 107.21 193.99 108.61L192.41 112.5C180.17 107.54 158.56 101.07 152.67 104.85C152.67 104.85 150.51 106.36 150.83 107.76C151.04 108.65 153.3 113.27 177.55 116.45L177 120.61L177.01 120.62Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M176.85 134.5C148.33 128.51 144.48 122.58 144.07 118.65C143.52 113.36 150.11 110.3 150.86 109.97L152.55 113.81C151.06 114.47 148.05 116.42 148.24 118.22C148.39 119.66 150.97 124.78 177.7 130.39L176.84 134.5H176.85Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M240.69 174.22C201.7 156.54 187.49 152.63 169.5 147.68L166.95 146.98C157.93 144.49 152.76 140.84 151.57 136.13C150.21 130.73 154.69 126.38 154.88 126.19L157.79 129.22C157.79 129.22 154.87 132.1 155.65 135.12C156.43 138.16 160.84 140.93 168.07 142.93L170.61 143.63C188.78 148.63 203.13 152.58 242.42 170.39L240.69 174.21V174.22Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M101.95 129.81C101.12 129.81 100.45 129.14 100.45 128.31V81.68C100.45 80.85 101.12 80.18 101.95 80.18C102.78 80.18 103.45 80.85 103.45 81.68V128.31C103.45 129.14 102.78 129.81 101.95 129.81Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M102.11 149.17C104.673 149.17 106.75 147.093 106.75 144.53C106.75 141.967 104.673 139.89 102.11 139.89C99.5476 139.89 97.4702 141.967 97.4702 144.53C97.4702 147.093 99.5476 149.17 102.11 149.17Z"
+      fill={colorValues.secondary}
+    />
+  </Svg>
+);
+
+export default PictogramBleedCardIssue;

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramBleedCardQuestion = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M19 155.41V170.48C19 176.35 23.76 181.11 29.63 181.11H182.39C188.26 181.11 193.02 176.35 193.02 170.48V156.06C193.02 155.67 179.15 149.85 172.25 148.98C165.35 148.11 156.95 141.83 156.95 141.83C146.63 137.93 157.24 129.87 157.24 129.87L157.34 128.49C146.23 127.66 147.31 117.08 147.31 117.08L151.36 112.8L149.5 109.47L152.03 106.7L151.96 104.33L153.34 103.35C153.34 103.35 157.48 102.08 158.13 102.02C158.78 101.96 164.15 102.7 164.15 102.7L171.88 103.68C171.88 103.68 183.28 106.95 183.51 107.02C183.74 107.09 193.01 111.73 193.01 111.73V69.63C193.01 63.76 188.25 59 182.38 59H29.63C23.76 59 19 63.76 19 69.63V122.9V155.4V155.41Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M240.21 123.96C230.51 117.39 203.13 100.33 193.03 100.33V96.13C206.47 96.13 241.1 119.49 242.56 120.48L240.2 123.96H240.21Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M176.84 122.79C157.46 120.25 147.84 116.45 146.57 110.85C145.79 107.42 148.5 104.61 150.23 103.49C159.88 97.3 190.38 109.38 193.82 110.78L192.24 114.67C180 109.71 158.39 103.24 152.5 107.02C152.5 107.02 150.34 108.53 150.66 109.93C150.87 110.82 153.13 115.44 177.38 118.62L176.83 122.78L176.84 122.79Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M176.68 136.66C148.16 130.67 144.31 124.74 143.9 120.81C143.35 115.52 149.94 112.46 150.69 112.13L152.38 115.97C150.89 116.63 147.88 118.58 148.07 120.38C148.22 121.82 150.8 126.94 177.53 132.55L176.67 136.66H176.68Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M240.52 176.38C201.53 158.7 187.32 154.79 169.33 149.84L166.78 149.14C157.76 146.65 152.59 143 151.4 138.29C150.04 132.89 154.52 128.54 154.71 128.35L157.62 131.38C157.62 131.38 154.7 134.26 155.48 137.28C156.26 140.32 160.67 143.09 167.9 145.09L170.44 145.79C188.61 150.79 202.96 154.74 242.25 172.55L240.52 176.37V176.38Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M101.37 153.62C103.933 153.62 106.01 151.543 106.01 148.98C106.01 146.417 103.933 144.34 101.37 144.34C98.8074 144.34 96.73 146.417 96.73 148.98C96.73 151.543 98.8074 153.62 101.37 153.62Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M101.13 137.85C100.3 137.85 99.6299 137.18 99.6299 136.35C99.6299 117.92 105.53 114.06 111.78 109.97C112.73 109.35 113.71 108.71 114.66 108.01C119.51 104.46 121.52 98.43 119.77 92.63C118.43 88.21 114.52 83.37 107.55 83.05C107.46 83.05 107.37 83.05 107.28 83.05C107.04 83.05 106.74 83.06 106.4 83.01C101.98 82.29 94.7299 84.69 90.9599 89.39C88.0999 92.96 87.6199 97.21 89.5499 102.02C89.8599 102.79 89.4799 103.66 88.7099 103.97C87.9399 104.28 87.0699 103.9 86.7599 103.13C83.8299 95.79 86.1499 90.59 88.6099 87.51C93.1799 81.81 101.65 79.2 106.87 80.05C106.98 80.07 107.09 80.05 107.2 80.05C107.36 80.05 107.52 80.05 107.67 80.05C114.81 80.37 120.54 84.86 122.63 91.76C124.75 98.79 122.31 106.12 116.41 110.43C115.4 111.17 114.38 111.83 113.4 112.48C107.61 116.27 102.61 119.54 102.61 136.35C102.61 137.18 101.94 137.85 101.11 137.85H101.13Z"
+      fill={colorValues.secondary}
+    />
+  </Svg>
+);
+
+export default PictogramBleedCardQuestion;

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

@@ -0,0 +1,48 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramBleedDoc = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M112 79.67V176.89C112 179.31 113.82 181.34 116.22 181.61L189.76 189.83C192.58 190.14 195.04 187.94 195.04 185.11V157.64L191.52 153.43L185.87 148.28L175.8 146.6L168.57 145.63C168.57 145.63 165.25 143.32 164.34 143.16C163.43 142.99 161.54 139.17 161.17 139.18C160.79 139.19 157.19 136.12 157.19 136.12L155.82 133.08L158.08 128.51L159.89 124.8L155.27 124.15L149.25 119.93L150.22 115.63L152.71 112.57C152.71 112.57 155.52 110.83 154.26 110.49C153 110.15 152.76 107.43 152.71 107.19C152.66 106.95 153.52 104.53 153.52 104.53L155.36 102.45L160.06 101.13L163.87 101.06L175.72 102.79L195.05 109.4V60.36C195.05 57.94 193.23 55.91 190.83 55.64L140.72 50.03C139.07 49.85 137.43 50.45 136.29 51.66L113.42 76.07C112.51 77.05 112 78.33 112 79.67Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M242.22 121.67C232.52 115.1 205.14 98.04 195.04 98.04V93.84C208.48 93.84 243.11 117.2 244.57 118.19L242.21 121.67H242.22Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M178.86 120.5C159.48 117.96 149.86 114.16 148.59 108.56C147.81 105.13 150.52 102.32 152.25 101.2C161.9 95.01 192.4 107.09 195.84 108.49L194.26 112.38C182.02 107.42 160.4 100.96 154.52 104.73C154.52 104.73 152.36 106.24 152.68 107.64C152.89 108.53 155.15 113.15 179.4 116.33L178.85 120.49L178.86 120.5Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M178.7 134.37C150.18 128.38 146.33 122.45 145.92 118.52C145.37 113.23 151.96 110.17 152.71 109.84L154.4 113.68C152.91 114.34 149.9 116.29 150.09 118.09C150.24 119.53 152.82 124.65 179.55 130.26L178.69 134.37H178.7Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M242.541 174.09C203.551 156.41 189.341 152.5 171.351 147.55L168.801 146.85C159.781 144.36 154.611 140.71 153.421 136C152.061 130.6 156.541 126.25 156.731 126.06L159.641 129.09C159.641 129.09 156.721 131.97 157.501 134.99C158.281 138.03 162.691 140.8 169.921 142.8L172.461 143.5C190.631 148.5 204.981 152.45 244.271 170.26L242.541 174.08V174.09Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M181.5 77.44L136.77 73.22"
+      stroke={colorValues.secondary}
+      strokeWidth={3}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M180.32 89.9L135.59 85.67"
+      stroke={colorValues.secondary}
+      strokeWidth={3}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export default PictogramBleedDoc;