@pagopa/io-app-design-system 1.7.1 → 1.9.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

@@ -17,13 +17,10 @@ import PictogramEmptyArchive from "./svg/PictogramEmptyArchive";
 import PictogramError from "./svg/PictogramError";
 import PictogramFeedback from "./svg/PictogramFeedback";
 import PictogramFireworks from "./svg/PictogramFireworks";
-import PictogramFollowMessage from "./svg/PictogramFollowMessage";
 import PictogramHeart from "./svg/PictogramHeart";
 import PictogramHourglass from "./svg/PictogramHourglass";
-import PictogramIBANCard from "./svg/PictogramIBANCard";
 import PictogramInProgress from "./svg/PictogramInProgress";
 import PictogramInbox from "./svg/PictogramInbox";
-import PictogramManual from "./svg/PictogramManual";
 import PictogramNotAvailable from "./svg/PictogramNotAvailable";
 import PictogramPiggyBank from "./svg/PictogramPiggyBank";
 import PictogramPin from "./svg/PictogramPin";
@@ -50,16 +47,28 @@ 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";
+import PictogramObjClock from "./svg/PictogramObjClock";
+import PictogramObjIbanCard from "./svg/PictogramObjIbanCard";
+import PictogramObjManual from "./svg/PictogramObjManual";
+import PictogramObjTrash from "./svg/PictogramObjTrash";
+import PictogramObjKey from "./svg/PictogramObjKey";
+import PictogramObjFlyingMessage from "./svg/PictogramObjFlyingMessage";
+import PictogramObjFollowMessage from "./svg/PictogramObjFollowMessage";
 /* 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 //
@@ -93,11 +102,8 @@ export const IOPictograms = {
   heart: PictogramHeart,
   completed: PictogramCompleted,
   // End legacy pictograms
-  ibanCard: PictogramIBANCard,
-  followMessage: PictogramFollowMessage,
-  manual: PictogramManual,
-  trash: PictogramTrash,
   empty: PictogramEmpty,
+  feature: PictogramFeature,
   charity: PictogramCharity,
   attention: PictogramAttention,
   emptyArchive: PictogramEmptyArchive,
@@ -115,8 +121,19 @@ export const IOPictograms = {
   identityCheck: PictogramIdentityCheck,
   accessDenied: PictogramAccessDenied,
   stopSecurity: PictogramStopSecurity,
+  security: PictogramSecurity,
+  cie: PictogramCie,
   time: PictogramTime,
-  passcode: PictogramPasscode
+  passcode: PictogramPasscode,
+  // Start Objects Pictogram
+  ibanCard: PictogramObjIbanCard,
+  followMessage: PictogramObjFollowMessage,
+  manual: PictogramObjManual,
+  trash: PictogramObjTrash,
+  clock: PictogramObjClock,
+  key: PictogramObjKey,
+  flyingMessage: PictogramObjFlyingMessage
+  // End Objects Pictogram
 };
 
 export type IOPictograms = keyof typeof IOPictograms;
@@ -152,7 +169,7 @@ export const Pictogram = ({
 */
 
 export type IOPictogramsBleed = Extract<
-  "charity" | "help" | "feedback" | "itWallet",
+  "charity" | "help" | "feedback" | "itWallet" | "security" | "feature" | "cie",
   IOPictograms
 >;
 
@@ -162,7 +179,10 @@ export const IOPictogramsBleed: {
   charity: PictogramBleedCharity,
   help: PictogramBleedHelp,
   feedback: PictogramBleedFeedback,
-  itWallet: PictogramBleedITWallet
+  itWallet: PictogramBleedITWallet,
+  security: PictogramBleedSecurity,
+  feature: PictogramBleedFeature,
+  cie: PictogramBleedCie
 };
 
 export const PictogramBleed = ({
@@ -175,6 +195,23 @@ export const PictogramBleed = ({
   return <PictogramElement {...props} size={size} color={IOColors[color]} />;
 };
 
+/* Object Pictograms */
+
+const { ibanCard, followMessage, manual, trash, clock, key, flyingMessage } =
+  IOPictograms;
+
+export const IOPictogramsObject = {
+  ibanCard,
+  followMessage,
+  manual,
+  trash,
+  clock,
+  key,
+  flyingMessage
+} as const;
+
+export type IOPictogramsObject = keyof typeof IOPictogramsObject;
+
 /* Legacy pictograms */
 
 const {

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;