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

package/src/components/numberpad/NumberPad.tsx

@@ -0,0 +1,135 @@
+/* eslint-disable functional/immutable-data */
+import React, { ComponentProps, useRef } from "react";
+import { View } from "react-native";
+import { BiometricsValidType } from "../../utils/types";
+import { IONumberPadButtonStyles, IOStyles } from "../../core";
+import { VSpacer } from "../spacer";
+import { IconButton } from "../buttons";
+import { IOIconSizeScale, IOIcons } from "../icons";
+import { NumberButton } from "./NumberButton";
+
+type BiometricAuthProps =
+  | {
+      biometricType: BiometricsValidType;
+      onBiometricPress: () => void;
+      biometricAccessibilityLabel: string;
+    }
+  | {
+      biometricType?: never;
+      onBiometricPress?: never;
+      biometricAccessibilityLabel?: never;
+    };
+
+type NumberPadProps = {
+  onValueChange: (value: string) => void;
+  variant: ComponentProps<typeof NumberButton>["variant"];
+  deleteAccessibilityLabel: string;
+} & BiometricAuthProps;
+
+const mapIconSpecByBiometric: Record<
+  BiometricsValidType,
+  { icon: IOIcons; size: IOIconSizeScale }
+> = {
+  FACE_ID: { icon: "biomFaceID", size: 32 },
+  TOUCH_ID: { icon: "fingerprint", size: 24 },
+  BIOMETRICS: { icon: "fingerprint", size: 24 }
+};
+
+const ButtonWrapper = ({ children }: { children: React.ReactNode }) => (
+  <View
+    style={[
+      IONumberPadButtonStyles.buttonSize,
+      IOStyles.alignCenter,
+      IOStyles.centerJustified
+    ]}
+  >
+    {children}
+  </View>
+);
+export const NumberPad = ({
+  variant = "dark",
+  onValueChange,
+  biometricType,
+  onBiometricPress,
+  biometricAccessibilityLabel,
+  deleteAccessibilityLabel
+}: NumberPadProps) => {
+  const numberPadValue = useRef<string>("");
+
+  const numberPadPress = (number: number) => {
+    numberPadValue.current = `${numberPadValue.current}${number}`;
+    onValueChange(numberPadValue.current);
+  };
+
+  const onDeletePress = () => {
+    numberPadValue.current = numberPadValue.current.slice(0, -1);
+    onValueChange(numberPadValue.current);
+  };
+
+  type ButtonType = "biometric" | "delete";
+
+  const RowButtons = ({
+    buttons
+  }: {
+    buttons: ReadonlyArray<number | ButtonType>;
+  }) => (
+    <View
+      style={[
+        IOStyles.flex,
+        IOStyles.rowSpaceBetween,
+        { justifyContent: "space-between", alignItems: "center" }
+      ]}
+    >
+      {buttons.map(elem => {
+        if (typeof elem === "number") {
+          return (
+            <NumberButton
+              key={elem}
+              number={elem}
+              onPress={numberPadPress}
+              variant={variant}
+            />
+          );
+        }
+
+        if (elem === "delete") {
+          return (
+            <ButtonWrapper key={elem}>
+              <IconButton
+                icon="cancel"
+                color={variant === "dark" ? "contrast" : "primary"}
+                onPress={onDeletePress}
+                accessibilityLabel={deleteAccessibilityLabel}
+              />
+            </ButtonWrapper>
+          );
+        }
+        return biometricType ? (
+          <ButtonWrapper key={elem}>
+            <IconButton
+              icon={mapIconSpecByBiometric[biometricType].icon}
+              iconSize={mapIconSpecByBiometric[biometricType].size}
+              color={variant === "dark" ? "contrast" : "primary"}
+              onPress={onBiometricPress}
+              accessibilityLabel={biometricAccessibilityLabel}
+            />
+          </ButtonWrapper>
+        ) : (
+          <View key={"emptyElem"} style={IONumberPadButtonStyles.buttonSize} />
+        );
+      })}
+    </View>
+  );
+
+  return (
+    <View style={IOStyles.horizontalContentPadding}>
+      <RowButtons buttons={[1, 2, 3]} />
+      <VSpacer />
+      <RowButtons buttons={[4, 5, 6]} />
+      <VSpacer />
+      <RowButtons buttons={[7, 8, 9]} />
+      <VSpacer />
+      <RowButtons buttons={["biometric", 0, "delete"]} />
+    </View>
+  );
+};

package/src/components/numberpad/index.tsx

@@ -0,0 +1,2 @@
+// export * from "./NumberButton";
+export * from "./NumberPad";

package/src/components/pictograms/Pictogram.tsx

@@ -79,6 +79,46 @@ import PictogramBleedCie from "./svg/PictogramBleedCie";
 import PictogramBleedCameraRequest from "./svg/PictogramBleedCameraRequest";
 import PictogramBleedCameraDenied from "./svg/PictogramBleedCameraDenied";
 import PictogramBleedNotification from "./svg/PictogramBleedNotification";
+import PictogramStar from "./svg/PictogramStar";
+import PictogramBleedStar from "./svg/PictogramBleedStar";
+import PictogramBleedEmpty from "./svg/PictogramBleedEmpty";
+import PictogramBleedAttention from "./svg/PictogramBleedAttention";
+import PictogramBleedSuccess from "./svg/PictogramBleedSuccess";
+import PictogramBleedFatalError from "./svg/PictogramBleedFatalError";
+import PictogramBleedIdentity from "./svg/PictogramBleedIdentity";
+import PictogramBleedIdentityAdd from "./svg/PictogramBleedIdentityAdd";
+import PictogramBleedIdentityCheck from "./svg/PictogramBleedIdentityCheck";
+import PictogramBleedIdentityRefresh from "./svg/PictogramBleedIdentityRefresh";
+import PictogramBleedAccessDenied from "./svg/PictogramBleedAccessDenied";
+import PictogramBleedStopSecurity from "./svg/PictogramBleedStopSecurity";
+import PictogramBleedTime from "./svg/PictogramBleedTime";
+import PictogramBleedPasscode from "./svg/PictogramBleedPasscode";
+import PictogramTiming from "./svg/PictogramTiming";
+import PictogramBleedTiming from "./svg/PictogramBleedTiming";
+import PictogramCardIssue from "./svg/PictogramCardIssue";
+import PictogramCardQuestion from "./svg/PictogramCardQuestion";
+import PictogramCardFavourite from "./svg/PictogramCardFavourite";
+import PictogramCardAdd from "./svg/PictogramCardAdd";
+import PictogramBleedCardAdd from "./svg/PictogramBleedCardAdd";
+import PictogramBleedCardFavourite from "./svg/PictogramBleedCardFavourite";
+import PictogramBleedCardQuestion from "./svg/PictogramBleedCardQuestion";
+import PictogramBleedCardIssue from "./svg/PictogramBleedCardIssue";
+import PictogramSearchLens from "./svg/PictogramSearchLens";
+import PictogramBleedSearch from "./svg/PictogramBleedSearch";
+import PictogramBleedDoc from "./svg/PictogramBleedDoc";
+import PictogramDoc from "./svg/PictogramDoc";
+import PictogramPending from "./svg/PictogramPending";
+import PictogramBleedPending from "./svg/PictogramBleedPending";
+import PictogramMessage from "./svg/PictogramMessage";
+import PictogramBleedMessage from "./svg/PictogramBleedMessage";
+import PictogramIdea from "./svg/PictogramIdea";
+import PictogramBleedIdea from "./svg/PictogramBleedIdea";
+import PictogramMoneyCheck from "./svg/PictogramMoneyCheck";
+import PictogramReactivate from "./svg/PictogramReactivate";
+import PictogramActivate from "./svg/PictogramActivate";
+import PictogramNFCScanAndroid from "./svg/PictogramNFCScanAndroid";
+import PictogramNFCScaniOS from "./svg/PictogramNFCScaniOS";
+import PictogramAttachment from "./svg/PictogramAttachment";
 
 export const IOPictograms = {
   // Start legacy pictograms //
@@ -116,9 +156,11 @@ export const IOPictograms = {
   feature: PictogramFeature,
   charity: PictogramCharity,
   attention: PictogramAttention,
+  message: PictogramMessage,
   emptyArchive: PictogramEmptyArchive,
   umbrellaNew: PictogramUmbrellaNew,
   feedback: PictogramFeedback,
+  idea: PictogramIdea,
   cameraRequest: PictogramCameraRequest,
   cameraDenied: PictogramCameraDenied,
   success: PictogramSuccess,
@@ -134,9 +176,24 @@ export const IOPictograms = {
   stopSecurity: PictogramStopSecurity,
   security: PictogramSecurity,
   cie: PictogramCie,
+  pending: PictogramPending,
   time: PictogramTime,
+  timing: PictogramTiming,
+  searchLens: PictogramSearchLens,
   passcode: PictogramPasscode,
   notification: PictogramNotification,
+  star: PictogramStar,
+  doc: PictogramDoc,
+  cardAdd: PictogramCardAdd,
+  cardFavourite: PictogramCardFavourite,
+  cardQuestion: PictogramCardQuestion,
+  cardIssue: PictogramCardIssue,
+  moneyCheck: PictogramMoneyCheck,
+  reactivate: PictogramReactivate,
+  activate: PictogramActivate,
+  nfcScanAndroid: PictogramNFCScanAndroid,
+  nfcScaniOS: PictogramNFCScaniOS,
+  attachment: PictogramAttachment,
   // Start Objects Pictogram
   ibanCard: PictogramObjIbanCard,
   followMessage: PictogramObjFollowMessage,
@@ -222,32 +279,80 @@ export const Pictogram = ({
 */
 
 export type IOPictogramsBleed = Extract<
+  | "empty"
   | "charity"
+  | "attention"
+  | "message"
   | "help"
   | "feedback"
+  | "idea"
   | "itWallet"
   | "security"
   | "feature"
   | "cie"
+  | "identity"
+  | "identityAdd"
+  | "identityCheck"
+  | "identityRefresh"
   | "cameraRequest"
   | "cameraDenied"
-  | "notification",
+  | "cardAdd"
+  | "cardFavourite"
+  | "cardQuestion"
+  | "cardIssue"
+  | "accessDenied"
+  | "stopSecurity"
+  | "time"
+  | "pending"
+  | "timing"
+  | "searchLens"
+  | "passcode"
+  | "success"
+  | "fatalError"
+  | "notification"
+  | "star"
+  | "doc"
+  | "notification"
+  | "star",
   IOPictograms
 >;
 
 export const IOPictogramsBleed: {
   [key in IOPictogramsBleed]: ({ size }: SVGPictogramProps) => JSX.Element;
 } = {
+  empty: PictogramBleedEmpty,
   charity: PictogramBleedCharity,
   help: PictogramBleedHelp,
+  attention: PictogramBleedAttention,
+  message: PictogramBleedMessage,
   feedback: PictogramBleedFeedback,
+  idea: PictogramBleedIdea,
   itWallet: PictogramBleedITWallet,
   security: PictogramBleedSecurity,
   feature: PictogramBleedFeature,
   cie: PictogramBleedCie,
+  identity: PictogramBleedIdentity,
+  identityAdd: PictogramBleedIdentityAdd,
+  identityCheck: PictogramBleedIdentityCheck,
+  identityRefresh: PictogramBleedIdentityRefresh,
   cameraRequest: PictogramBleedCameraRequest,
   cameraDenied: PictogramBleedCameraDenied,
-  notification: PictogramBleedNotification
+  cardAdd: PictogramBleedCardAdd,
+  cardFavourite: PictogramBleedCardFavourite,
+  cardQuestion: PictogramBleedCardQuestion,
+  cardIssue: PictogramBleedCardIssue,
+  accessDenied: PictogramBleedAccessDenied,
+  stopSecurity: PictogramBleedStopSecurity,
+  time: PictogramBleedTime,
+  pending: PictogramBleedPending,
+  timing: PictogramBleedTiming,
+  searchLens: PictogramBleedSearch,
+  passcode: PictogramBleedPasscode,
+  success: PictogramBleedSuccess,
+  fatalError: PictogramBleedFatalError,
+  notification: PictogramBleedNotification,
+  star: PictogramBleedStar,
+  doc: PictogramBleedDoc
 };
 
 export const PictogramBleed = ({

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;