@pagopa/io-app-design-system 1.7.1 → 1.8.0

package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap

@@ -78,14 +78,14 @@ exports[`Test List Item Components ListItemAction Snapshot 1`] = `
           style={
             [
               {
-                "fontFamily": "Readex Pro",
-                "fontSize": 16,
+                "fontFamily": "Titillium Web",
+                "fontSize": 18,
                 "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 20,
+                "fontWeight": "600",
+                "lineHeight": 24,
               },
               {
-                "color": "#0B3EE3",
+                "color": "#0073E6",
               },
             ]
           }
@@ -159,17 +159,21 @@ exports[`Test List Item Components ListItemIDP Snapshot 1`] = `
   >
     <Text
       style={
-        {
-          "alignSelf": "center",
-          "color": "#555C70",
-          "flexShrink": 1,
-          "fontFamily": "Readex Pro",
-          "fontSize": 12,
-          "fontStyle": "normal",
-          "fontWeight": "400",
-          "lineHeight": 16,
-          "textTransform": "uppercase",
-        }
+        [
+          {
+            "alignSelf": "center",
+            "color": "#555C70",
+            "flexShrink": 1,
+            "fontSize": 12,
+            "lineHeight": 16,
+            "textTransform": "uppercase",
+          },
+          {
+            "fontFamily": "Titillium Web",
+            "fontStyle": "normal",
+            "fontWeight": "600",
+          },
+        ]
       }
     />
     <Image
@@ -220,22 +224,24 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
       }
     >
       <Text
-        color="grey-700"
-        defaultColor="blue"
-        defaultWeight="Bold"
+        color="bluegrey"
+        defaultColor="bluegrey"
+        defaultWeight="Regular"
         font="TitilliumWeb"
         fontStyle={
           {
-            "fontSize": 14,
+            "fontSize": 16,
+            "lineHeight": 24,
           }
         }
         style={
           [
             {
-              "fontSize": 14,
+              "fontSize": 16,
+              "lineHeight": 24,
             },
             {
-              "color": "#555C70",
+              "color": "#475A6D",
               "fontFamily": "Titillium Web",
               "fontStyle": "normal",
               "fontWeight": "400",
@@ -247,32 +253,21 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
         label
       </Text>
       <Text
-        color="black"
-        defaultColor="black"
-        defaultWeight="Regular"
-        font="ReadexPro"
-        fontStyle={
-          {
-            "fontSize": 16,
-            "lineHeight": 20,
-          }
-        }
         numberOfLines={2}
         style={
           [
             {
-              "fontSize": 16,
-              "lineHeight": 20,
+              "fontFamily": "Titillium Web",
+              "fontSize": 18,
+              "fontStyle": "normal",
+              "fontWeight": "600",
+              "lineHeight": 24,
             },
             {
-              "color": "#0E0F13",
-              "fontFamily": "Readex Pro",
-              "fontStyle": "normal",
-              "fontWeight": "400",
+              "color": "#17324D",
             },
           ]
         }
-        weight="Regular"
       >
         testValue
       </Text>
@@ -355,22 +350,24 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
         }
       >
         <Text
-          color="grey-700"
-          defaultColor="blue"
-          defaultWeight="Bold"
+          color="bluegrey"
+          defaultColor="bluegrey"
+          defaultWeight="Regular"
           font="TitilliumWeb"
           fontStyle={
             {
-              "fontSize": 14,
+              "fontSize": 16,
+              "lineHeight": 24,
             }
           }
           style={
             [
               {
-                "fontSize": 14,
+                "fontSize": 16,
+                "lineHeight": 24,
               },
               {
-                "color": "#555C70",
+                "color": "#475A6D",
                 "fontFamily": "Titillium Web",
                 "fontStyle": "normal",
                 "fontWeight": "400",
@@ -381,33 +378,29 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
         >
           label
         </Text>
-        <Text
-          color="blueIO-500"
-          defaultColor="black"
-          defaultWeight="Regular"
-          font="ReadexPro"
-          fontStyle={
+        <View
+          style={
             {
-              "fontSize": 16,
-              "lineHeight": 20,
+              "height": 4,
             }
           }
+        />
+        <Text
           numberOfLines={2}
           style={
             [
               {
-                "fontSize": 16,
-                "lineHeight": 20,
+                "fontFamily": "Titillium Web",
+                "fontSize": 18,
+                "fontStyle": "normal",
+                "fontWeight": "600",
+                "lineHeight": 24,
               },
               {
-                "color": "#0B3EE3",
-                "fontFamily": "Readex Pro",
-                "fontStyle": "normal",
-                "fontWeight": "400",
+                "color": "#0073E6",
               },
             ]
           }
-          weight="Regular"
         >
           testValue
         </Text>
@@ -426,7 +419,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
           align="xMidYMid"
           bbHeight={24}
           bbWidth={24}
-          color={4278927075}
+          color={4278219750}
           focusable={false}
           height={24}
           importantForAccessibility="no-hide-descendants"
@@ -440,7 +433,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
                 "borderWidth": 0,
               },
               {
-                "color": "#0B3EE3",
+                "color": "#0073E6",
               },
               {
                 "flex": 0,
@@ -449,7 +442,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
               },
             ]
           }
-          tintColor={4278927075}
+          tintColor={4278219750}
           vbHeight={24}
           vbWidth={24}
           width={24}
@@ -553,31 +546,16 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
         }
       >
         <Text
-          color="black"
-          defaultColor="black"
-          defaultWeight="Regular"
-          font="ReadexPro"
-          fontStyle={
+          style={
             {
-              "fontSize": 16,
-              "lineHeight": 20,
+              "color": "#17324D",
+              "fontFamily": "Titillium Web",
+              "fontSize": 18,
+              "fontStyle": "normal",
+              "fontWeight": "600",
+              "lineHeight": 24,
             }
           }
-          style={
-            [
-              {
-                "fontSize": 16,
-                "lineHeight": 20,
-              },
-              {
-                "color": "#0E0F13",
-                "fontFamily": "Readex Pro",
-                "fontStyle": "normal",
-                "fontWeight": "400",
-              },
-            ]
-          }
-          weight="Regular"
         >
           testValue
         </Text>
@@ -596,7 +574,7 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
           align="xMidYMid"
           bbHeight={24}
           bbWidth={24}
-          color={4278927075}
+          color={4278219750}
           focusable={false}
           height={24}
           importantForAccessibility="no-hide-descendants"
@@ -610,7 +588,7 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
                 "borderWidth": 0,
               },
               {
-                "color": "#0B3EE3",
+                "color": "#0073E6",
               },
               {
                 "flex": 0,
@@ -619,7 +597,7 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
               },
             ]
           }
-          tintColor={4278927075}
+          tintColor={4278219750}
           vbHeight={24}
           vbWidth={24}
           width={24}
@@ -785,31 +763,20 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
         }
       >
         <Text
-          color="black"
-          defaultColor="black"
-          defaultWeight="Regular"
-          font="ReadexPro"
-          fontStyle={
-            {
-              "fontSize": 16,
-              "lineHeight": 20,
-            }
-          }
           style={
             [
               {
-                "fontSize": 16,
-                "lineHeight": 20,
+                "fontFamily": "Titillium Web",
+                "fontSize": 18,
+                "fontStyle": "normal",
+                "fontWeight": "600",
+                "lineHeight": 24,
               },
               {
-                "color": "#0E0F13",
-                "fontFamily": "Readex Pro",
-                "fontStyle": "normal",
-                "fontWeight": "400",
+                "color": "#17324D",
               },
             ]
           }
-          weight="Regular"
         >
           testValue
         </Text>
@@ -828,7 +795,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
           align="xMidYMid"
           bbHeight={24}
           bbWidth={24}
-          color={4278927075}
+          color={4278219750}
           focusable={false}
           height={24}
           importantForAccessibility="no-hide-descendants"
@@ -842,7 +809,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
                 "borderWidth": 0,
               },
               {
-                "color": "#0B3EE3",
+                "color": "#0073E6",
               },
               {
                 "flex": 0,
@@ -851,7 +818,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
               },
             ]
           }
-          tintColor={4278927075}
+          tintColor={4278219750}
           vbHeight={24}
           vbWidth={24}
           width={24}

package/src/components/listitems/__test__/listitem.test.tsx

@@ -6,7 +6,7 @@ import ListItemInfoCopy from "../ListItemInfoCopy";
 import ListItemNav from "../ListItemNav";
 import ListItemNavAlert from "../ListItemNavAlert";
 import ListItemAction from "../ListItemAction";
-import ListItemIDP from "../ListItemIDP";
+import ListItemIDP from "../../modules/ModuleIDP";
 import { ListItemTransaction } from "../ListItemTransaction";
 import { PressableListItemBase } from "../PressableListItemsBase";
 

package/src/components/listitems/index.tsx

@@ -1,5 +1,5 @@
 export * from "./ListItemAction";
-export * from "./ListItemIDP";
+export * from "../modules/ModuleIDP";
 export * from "./ListItemInfo";
 export * from "./ListItemInfoCopy";
 export * from "./ListItemNav";

package/src/components/{listitems/ListItemIDP.tsx → modules/ModuleIDP.tsx}

@@ -19,19 +19,20 @@ import Animated, {
 } from "react-native-reanimated";
 import {
   IOColors,
-  IOListItemIDPHSpacing,
-  IOListItemIDPRadius,
-  IOListItemIDPSavedVSpacing,
-  IOListItemIDPVSpacing,
+  IOModuleIDPHSpacing,
+  IOModuleIDPRadius,
+  IOModuleIDPSavedVSpacing,
+  IOModuleIDPVSpacing,
   IOListItemLogoMargin,
   IOScaleValues,
-  IOSpringValues
+  IOSpringValues,
+  useIOExperimentalDesign
 } from "../../core";
 import { toAndroidCacheTimestamp } from "../../utils/dates";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 
-type ListItemIDP = WithTestID<{
+type ModuleIDP = WithTestID<{
   name: string;
   localLogo: ImageSourcePropType;
   logo: ImageSourcePropType;
@@ -44,13 +45,13 @@ const styles = StyleSheet.create({
   button: {
     borderWidth: 1,
     borderColor: IOColors["grey-100"],
-    borderRadius: IOListItemIDPRadius,
+    borderRadius: IOModuleIDPRadius,
     backgroundColor: IOColors.white,
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    paddingVertical: IOListItemIDPVSpacing,
-    paddingHorizontal: IOListItemIDPHSpacing
+    paddingVertical: IOModuleIDPVSpacing,
+    paddingHorizontal: IOModuleIDPHSpacing
   },
   idpName: {
     color: IOColors["grey-700"],
@@ -58,9 +59,14 @@ const styles = StyleSheet.create({
     lineHeight: 16,
     alignSelf: "center",
     textTransform: "uppercase",
-    flexShrink: 1,
+    flexShrink: 1
+  },
+  idpNameFont: {
     ...makeFontStyleObject("Regular", false, "ReadexPro")
   },
+  idpLegacyNameFont: {
+    ...makeFontStyleObject("SemiBold", false, "TitilliumWeb")
+  },
   idpLogo: {
     marginStart: IOListItemLogoMargin,
     width: 120,
@@ -75,16 +81,16 @@ const styles = StyleSheet.create({
 const androidIdpLogoForcedRefreshed = () =>
   Platform.OS === "android" ? `?ts=${toAndroidCacheTimestamp()}` : "";
 
-export const ListItemIDP = ({
+export const ModuleIDP = ({
   name,
   localLogo,
   logo,
   saved,
   onPress,
   testID
-}: ListItemIDP) => {
+}: ModuleIDP) => {
   const isPressed = useSharedValue(0);
-
+  const { isExperimental } = useIOExperimentalDesign();
   // Scaling transformation applied when the button is pressed
   const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
 
@@ -135,15 +141,22 @@ export const ListItemIDP = ({
       <Animated.View
         style={[
           styles.button,
-          saved && { paddingVertical: IOListItemIDPSavedVSpacing },
+          saved && { paddingVertical: IOModuleIDPSavedVSpacing },
           animatedStyle
         ]}
       >
-        <Text style={styles.idpName}>{name}</Text>
+        <Text
+          style={[
+            styles.idpName,
+            isExperimental ? styles.idpNameFont : styles.idpLegacyNameFont
+          ]}
+        >
+          {name}
+        </Text>
         <Image source={urlLogoIDP} style={styles.idpLogo} />
       </Animated.View>
     </Pressable>
   );
 };
 
-export default ListItemIDP;
+export default ModuleIDP;

package/src/components/modules/index.tsx

@@ -0,0 +1 @@
+export * from "./ModuleIDP";

package/src/components/pictograms/Pictogram.tsx

@@ -50,16 +50,22 @@ import PictogramIdentity from "./svg/PictogramIdentity";
 import PictogramAccessDenied from "./svg/PictogramAccessDenied";
 import PictogramTime from "./svg/PictogramTime";
 import PictogramStopSecurity from "./svg/PictogramStopSecurity";
+import PictogramSecurity from "./svg/PictogramSecurity";
 import PictogramPasscode from "./svg/PictogramPasscode";
 import PictogramIdentityCheck from "./svg/PictogramIdentityCheck";
 import PictogramTrash from "./svg/PictogramTrash";
 import PictogramCharity from "./svg/PictogramCharity";
 import PictogramEmpty from "./svg/PictogramEmpty";
+import PictogramCie from "./svg/PictogramCie";
+import PictogramFeature from "./svg/PictogramFeature";
 /* Bleed Pictograms */
 import PictogramBleedCharity from "./svg/PictogramBleedCharity";
 import PictogramBleedHelp from "./svg/PictogramBleedHelp";
 import PictogramBleedITWallet from "./svg/PictogramBleedITWallet";
 import PictogramBleedFeedback from "./svg/PictogramBleedFeedback";
+import PictogramBleedSecurity from "./svg/PictogramBleedSecurity";
+import PictogramBleedFeature from "./svg/PictogramBleedFeature";
+import PictogramBleedCie from "./svg/PictogramBleedCie";
 
 export const IOPictograms = {
   // Start legacy pictograms //
@@ -98,6 +104,7 @@ export const IOPictograms = {
   manual: PictogramManual,
   trash: PictogramTrash,
   empty: PictogramEmpty,
+  feature: PictogramFeature,
   charity: PictogramCharity,
   attention: PictogramAttention,
   emptyArchive: PictogramEmptyArchive,
@@ -115,6 +122,8 @@ export const IOPictograms = {
   identityCheck: PictogramIdentityCheck,
   accessDenied: PictogramAccessDenied,
   stopSecurity: PictogramStopSecurity,
+  security: PictogramSecurity,
+  cie: PictogramCie,
   time: PictogramTime,
   passcode: PictogramPasscode
 };
@@ -152,7 +161,7 @@ export const Pictogram = ({
 */
 
 export type IOPictogramsBleed = Extract<
-  "charity" | "help" | "feedback" | "itWallet",
+  "charity" | "help" | "feedback" | "itWallet" | "security" | "feature" | "cie",
   IOPictograms
 >;
 
@@ -162,7 +171,10 @@ export const IOPictogramsBleed: {
   charity: PictogramBleedCharity,
   help: PictogramBleedHelp,
   feedback: PictogramBleedFeedback,
-  itWallet: PictogramBleedITWallet
+  itWallet: PictogramBleedITWallet,
+  security: PictogramBleedSecurity,
+  feature: PictogramBleedFeature,
+  cie: PictogramBleedCie
 };
 
 export const PictogramBleed = ({

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

@@ -0,0 +1,38 @@
+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}>
+    <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"
+    />
+    <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"
+    />
+    <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"
+    />
+    <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"
+    />
+    <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"
+    />
+    <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"
+    />
+    <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"
+    />
+  </Svg>
+);
+
+export default PictogramBleedCie;

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramBleedFeature = ({
+  size,
+  color,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg fill="none" 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"
+    />
+    <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"
+    />
+    <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"
+    />
+    <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"
+    />
+    <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"
+    />
+    <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"
+    />
+    <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"
+    />
+    <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"
+    />
+  </Svg>
+);
+
+export default PictogramBleedFeature;

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

@@ -0,0 +1,38 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramBleedSecurity = ({
+  size,
+  color,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg fill="none" 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"
+    />
+    <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"
+    />
+    <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"
+    />
+    <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"
+    />
+    <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"
+    />
+    <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"
+    />
+  </Svg>
+);
+
+export default PictogramBleedSecurity;