@pagopa/io-app-design-system 1.36.15 → 1.38.0

package/src/components/avatar/__test__/__snapshots__/avatar.test.tsx.snap

@@ -55,6 +55,65 @@ exports[`Test Avatar Components - Experimental Enabled Avatar Snapshot 1`] = `
 </View>
 `;
 
+exports[`Test Avatar Components - Experimental Enabled AvatarSearch Snapshot 1`] = `
+<View
+  accessibilityIgnoresInvertColors={true}
+  style={
+    [
+      {
+        "borderColor": "rgba(14,15,19,0.1)",
+        "borderCurve": "continuous",
+        "borderWidth": 1,
+        "overflow": "hidden",
+      },
+      {
+        "backgroundColor": "#FFFFFF",
+        "borderRadius": 8,
+        "height": 44,
+        "padding": 6,
+        "width": 44,
+      },
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "#FFFFFF",
+          "borderCurve": "continuous",
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 2,
+        },
+      ]
+    }
+  >
+    <Image
+      accessibilityIgnoresInvertColors={true}
+      defaultSource={
+        {
+          "testUri": "../../../src/components/avatar/placeholder/avatar-placeholder.png",
+        }
+      }
+      source={
+        {
+          "uri": "",
+        }
+      }
+      style={
+        {
+          "height": "100%",
+          "resizeMode": "contain",
+          "width": "100%",
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
 exports[`Test Avatar Components Avatar Snapshot 1`] = `
 <View
   accessibilityIgnoresInvertColors={true}
@@ -109,3 +168,62 @@ exports[`Test Avatar Components Avatar Snapshot 1`] = `
   </View>
 </View>
 `;
+
+exports[`Test Avatar Components AvatarSearch Snapshot 1`] = `
+<View
+  accessibilityIgnoresInvertColors={true}
+  style={
+    [
+      {
+        "borderColor": "rgba(14,15,19,0.1)",
+        "borderCurve": "continuous",
+        "borderWidth": 1,
+        "overflow": "hidden",
+      },
+      {
+        "backgroundColor": "#FFFFFF",
+        "borderRadius": 8,
+        "height": 44,
+        "padding": 6,
+        "width": 44,
+      },
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "#FFFFFF",
+          "borderCurve": "continuous",
+          "overflow": "hidden",
+        },
+        {
+          "borderRadius": 2,
+        },
+      ]
+    }
+  >
+    <Image
+      accessibilityIgnoresInvertColors={true}
+      defaultSource={
+        {
+          "testUri": "../../../src/components/avatar/placeholder/avatar-placeholder.png",
+        }
+      }
+      source={
+        {
+          "uri": "",
+        }
+      }
+      style={
+        {
+          "height": "100%",
+          "resizeMode": "contain",
+          "width": "100%",
+        }
+      }
+    />
+  </View>
+</View>
+`;

package/src/components/avatar/__test__/avatar.test.tsx

@@ -1,12 +1,19 @@
 import React from "react";
 import * as TestRenderer from "react-test-renderer";
 import { TestRendererWithExperimentalEnabledContextProvider } from "../../../utils/testing";
-import { Avatar } from "../Avatar";
+import { Avatar, AvatarSearch } from "../Avatar";
 
 describe("Test Avatar Components", () => {
   it("Avatar Snapshot", () => {
     const avatar = TestRenderer.create(
-      <Avatar shape={"circle"} size={"small"} logoUri={{ uri: "" }}></Avatar>
+      <Avatar size={"small"} logoUri={{ uri: "" }} />
+    ).toJSON();
+    expect(avatar).toMatchSnapshot();
+  });
+
+  it("AvatarSearch Snapshot", () => {
+    const avatar = TestRenderer.create(
+      <AvatarSearch source={{ uri: "" }} />
     ).toJSON();
     expect(avatar).toMatchSnapshot();
   });
@@ -15,7 +22,14 @@ describe("Test Avatar Components", () => {
 describe("Test Avatar Components - Experimental Enabled", () => {
   it("Avatar Snapshot", () => {
     const avatar = TestRendererWithExperimentalEnabledContextProvider(
-      <Avatar shape={"circle"} size={"small"} logoUri={{ uri: "" }}></Avatar>
+      <Avatar size={"small"} logoUri={{ uri: "" }} />
+    ).toJSON();
+    expect(avatar).toMatchSnapshot();
+  });
+
+  it("AvatarSearch Snapshot", () => {
+    const avatar = TestRendererWithExperimentalEnabledContextProvider(
+      <AvatarSearch source={{ uri: "" }} />
     ).toJSON();
     expect(avatar).toMatchSnapshot();
   });

package/src/components/buttons/ButtonSolid.tsx

@@ -210,7 +210,7 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
     // Interpolate animation values from `isPressed` values
     const pressedAnimationStyle = useAnimatedStyle(() => {
       // Link color states to the pressed states
-      const bgColor = interpolateColor(
+      const backgroundColor = interpolateColor(
         progressPressed.value,
         [0, 1],
         [colorMap[color].default, colorMap[color].pressed]
@@ -225,7 +225,7 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
       );
 
       return {
-        backgroundColor: bgColor,
+        backgroundColor,
         transform: [{ scale }]
       };
     });

package/src/components/divider/Divider.tsx

@@ -2,34 +2,20 @@ import React from "react";
 import { View, StyleSheet } from "react-native";
 import { IOColors, useIOTheme } from "../../core";
 
-type DividerOrientation = "vertical" | "horizontal";
-
-type DividerProps = {
-  orientation: DividerOrientation;
-};
-
 const DEFAULT_BORDER_SIZE = StyleSheet.hairlineWidth;
 
 /**
-Native `Divider` component
-@param  {DividerOrientation} orientation
+Horizontal `Divider` component
  */
-const BaseDivider = React.memo(({ orientation }: DividerProps) => {
+export const Divider = () => {
   const theme = useIOTheme();
-  const baseStyle = {
-    backgroundColor: IOColors[theme["divider-default"]],
-    ...(orientation === "vertical"
-      ? { width: DEFAULT_BORDER_SIZE }
-      : { height: DEFAULT_BORDER_SIZE })
-  };
-  return <View style={baseStyle} />;
-});
 
-/**
-Horizontal Divider component
- */
-export const Divider = () => <BaseDivider orientation={"horizontal"} />;
-/**
-Vertical Divider component
- */
-export const VDivider = () => <BaseDivider orientation={"vertical"} />;
+  return (
+    <View
+      style={{
+        backgroundColor: IOColors[theme["divider-default"]],
+        height: DEFAULT_BORDER_SIZE
+      }}
+    />
+  );
+};

package/src/components/index.tsx

@@ -8,7 +8,6 @@ export * from "./checkbox";
 export * from "./codeInput";
 export * from "./contentWrapper";
 export * from "./divider";
-export * from "./endOfPage";
 export * from "./featureInfo";
 export * from "./icons";
 export * from "./image";
@@ -29,5 +28,6 @@ export * from "./switch";
 export * from "./tabs";
 export * from "./tag";
 export * from "./textInput";
+export * from "./searchInput";
 export * from "./toast";
 export * from "./typography";

package/src/components/layout/HeaderSecondLevel.tsx

@@ -36,10 +36,12 @@ type BackProps =
   | {
       goBack: () => void;
       backAccessibilityLabel: string;
+      backTestID?: string;
     }
   | {
       goBack?: never;
       backAccessibilityLabel?: never;
+      backTestID?: never;
     };
 
 type CommonProps = WithTestID<{
@@ -121,6 +123,7 @@ export const HeaderSecondLevel = ({
   scrollValues = undefined,
   goBack,
   backAccessibilityLabel,
+  backTestID,
   title,
   type,
   transparent = false,
@@ -197,6 +200,7 @@ export const HeaderSecondLevel = ({
             color="neutral"
             onPress={goBack}
             accessibilityLabel={backAccessibilityLabel}
+            testID={backTestID}
           />
         ) : (
           <HSpacer size={32} />

package/src/components/listitems/ListItemTransaction.tsx

@@ -97,7 +97,7 @@ const MUNICIPALITY_LOGO_SIZE = 44;
 
 const LeftComponent = ({ logoIcon }: LeftComponentProps) => {
   if (isImageUri(logoIcon)) {
-    return <Avatar logoUri={logoIcon} size="small" shape="circle" />;
+    return <Avatar logoUri={logoIcon} size="small" />;
   }
   if (React.isValidElement(logoIcon)) {
     return <>{logoIcon}</>;
@@ -250,7 +250,7 @@ const SkeletonComponent = () => (
           animate="fade"
           height={IOVisualCostants.avatarSizeSmall}
           width={IOVisualCostants.avatarSizeSmall}
-          radius={100}
+          radius={IOVisualCostants.avatarRadiusSizeSmall}
         />
       </View>
       <View style={IOStyles.flex}>

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

@@ -1619,11 +1619,11 @@ exports[`Test List Item Components - Experimental Enabled  ListItemTransaction S
       >
         <View
           height={44}
-          radius={100}
+          radius={8}
           style={
             {
               "backgroundColor": "#efefef",
-              "borderRadius": 100,
+              "borderRadius": 8,
               "height": 44,
               "width": 44,
             }
@@ -3414,11 +3414,11 @@ exports[`Test List Item Components ListItemTransaction Snapshot 1`] = `
       >
         <View
           height={44}
-          radius={100}
+          radius={8}
           style={
             {
               "backgroundColor": "#efefef",
-              "borderRadius": 100,
+              "borderRadius": 8,
               "height": 44,
               "width": 44,
             }

package/src/components/pictograms/Pictogram.tsx

@@ -69,6 +69,7 @@ import PictogramUmbrellaNew from "./svg/PictogramUmbrellaNew";
 import PictogramUnrecognized from "./svg/PictogramUnrecognized";
 import PictogramUpdateOS from "./svg/PictogramUpdateOS";
 import PictogramUploadFile from "./svg/PictogramUploadFile";
+import PictogramWorkInProgress from "./svg/PictogramWorkInProgress";
 /* Bleed Pictograms */
 import PictogramBleedAccessDenied from "./svg/PictogramBleedAccessDenied";
 import PictogramBleedActivate from "./svg/PictogramBleedActivate";
@@ -109,6 +110,7 @@ import PictogramBleedStopSecurity from "./svg/PictogramBleedStopSecurity";
 import PictogramBleedSuccess from "./svg/PictogramBleedSuccess";
 import PictogramBleedTime from "./svg/PictogramBleedTime";
 import PictogramBleedTiming from "./svg/PictogramBleedTiming";
+import PictogramBleedWorkInProgress from "./svg/PictogramBleedWorkInProgress";
 /* End Bleed Pictograms */
 import PictogramCardAdd from "./svg/PictogramCardAdd";
 import PictogramCardFavourite from "./svg/PictogramCardFavourite";
@@ -217,6 +219,7 @@ export const IOPictograms = {
   hello: PictogramHello,
   comunicationProblem: PictogramComunicationProblem,
   payments: PictogramPayments,
+  workInProgress: PictogramWorkInProgress,
   // Start Objects Pictogram
   ibanCard: PictogramObjIbanCard,
   followMessage: PictogramObjFollowMessage,
@@ -335,7 +338,8 @@ export type IOPictogramsBleed = Extract<
   | "lostConnection"
   | "payments"
   | "activate"
-  | "reactivate",
+  | "reactivate"
+  | "workInProgress",
   IOPictograms
 >;
 
@@ -380,7 +384,8 @@ export const IOPictogramsBleed: {
   lostConnection: PictogramBleedLostConnection,
   payments: PictogramBleedPayments,
   activate: PictogramBleedActivate,
-  reactivate: PictogramBleedReactivate
+  reactivate: PictogramBleedReactivate,
+  workInProgress: PictogramBleedWorkInProgress
 };
 
 export const PictogramBleed = ({

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

@@ -0,0 +1,62 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../types";
+
+const PictogramBleedWorkInProgress = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M168.86 105.96L169.09 101.97C178.66 102.51 186 100.53 190.9 96.07C196.74 90.77 197.09 83.62 197.09 83.55C197.13 82.48 198.02 81.62 199.09 81.62L240.25 81.7V85.7L200.86 85.62C200.36 88.56 198.76 94.29 193.64 98.97C187.91 104.21 179.57 106.56 168.85 105.96H168.86Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M155.84 56.01C151.36 54.44 146.22 52.06 143.24 49.41C141.32 47.71 140.35 45.94 140.34 44.16C140.33 41.56 141.56 39.32 143.8 37.86C148.07 35.08 155.41 35.45 162.94 38.84L161.3 42.49C153.75 39.1 148.33 39.68 145.98 41.21C144.87 41.94 144.33 42.89 144.33 44.14C144.33 44.64 144.78 45.36 145.55 46.11C149.86 50.32 161.74 53.96 163.54 53.93L163.94 57.91C162.76 58.04 159.52 57.31 155.83 56.02L155.84 56.01Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M179.32 51.59C178.61 51.29 161.74 44.24 154.99 37.71C153.55 36.31 153.07 34.27 153.75 32.38C154.42 30.5 156.08 29.23 158.07 29.07C162.39 28.72 169.83 29.55 180.75 35.48C189.87 40.43 200.79 39.01 215.91 37.06C222.81 36.17 230.88 35.15 239.71 34.6V38.6C231.01 39.14 223.26 40.14 216.42 41.03C200.56 43.09 189.1 44.57 178.84 39C168.79 33.54 162.17 32.76 158.39 33.06C157.8 33.11 157.59 33.55 157.52 33.73C157.45 33.92 157.34 34.42 157.78 34.84C163.98 40.84 180.7 47.83 180.86 47.9L179.32 51.59Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M171.761 126.11L134.131 116.49L120.951 138.39L172.811 151.65L171.761 126.11ZM165.951 128.24L138.541 121.23L134.291 128.18C133.911 128.79 133.171 129.04 132.521 128.81C132.421 128.78 132.321 128.73 132.231 128.67C131.521 128.24 131.301 127.31 131.731 126.61L137.141 117.77L166.701 125.33C167.501 125.53 167.991 126.35 167.781 127.15C167.571 127.95 166.761 128.44 165.951 128.23V128.24Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M165.511 80.3L161.611 79.3C159.811 78.84 157.971 79.24 156.531 80.28L160.231 85.38L155.051 90.92L151.231 88.1L144.031 100.07L170.991 106.96L170.121 85.97C170.011 83.27 168.141 80.96 165.521 80.29L165.511 80.3Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M188.901 204.11C189.451 201.97 188.161 199.79 186.021 199.24L174.661 196.34L173.611 170.8L111.081 154.81L97.9007 176.71L87.0507 173.94C84.9107 173.39 82.7307 174.68 82.1807 176.82L81.1307 180.93C80.5807 183.07 81.8707 185.25 84.0107 185.8L182.991 211.1C185.131 211.65 187.311 210.36 187.861 208.22L188.911 204.11H188.901ZM167.071 172.75L115.471 159.56L109.071 170.13C108.701 170.75 107.951 171 107.291 170.77C107.191 170.74 107.101 170.69 107.011 170.64C106.301 170.21 106.081 169.29 106.501 168.58L114.061 156.1L167.821 169.84C168.621 170.05 169.111 170.86 168.901 171.66C168.691 172.46 167.881 172.95 167.081 172.74L167.071 172.75Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M172.82 151.65L120.96 138.39L111.08 154.81L173.61 170.8L172.82 151.65ZM122.38 141.85L169.92 154L170.45 166.89L115.73 152.9L122.38 141.84V141.85Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M170.981 106.96L144.021 100.07L134.141 116.49L171.771 126.11L170.981 106.96ZM145.441 103.53L168.071 109.32L168.601 122.21L138.781 114.59L145.431 103.53H145.441Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M171.761 126.11L134.131 116.49L171.761 126.11Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M167.81 169.84L114.05 156.1L106.49 168.58C106.06 169.29 106.29 170.21 107 170.64C107.09 170.69 107.19 170.74 107.28 170.77C107.93 171 108.68 170.75 109.06 170.13L115.46 159.56L167.06 172.75C167.86 172.96 168.68 172.47 168.88 171.67C169.08 170.87 168.6 170.05 167.8 169.85L167.81 169.84Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M166.701 125.34L137.141 117.78L131.731 126.62C131.301 127.33 131.521 128.25 132.231 128.68C132.321 128.74 132.421 128.78 132.521 128.82C133.171 129.05 133.921 128.8 134.291 128.19L138.541 121.24L165.951 128.25C166.751 128.46 167.571 127.97 167.781 127.17C167.981 126.37 167.501 125.54 166.701 125.35V125.34Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M149.921 90.53C149.621 90.42 149.351 90.25 149.121 90.01C148.751 89.62 137.191 76.4 140.131 67.26C142.181 60.9 149.191 56.52 160.971 54.22C161.731 54.08 168.401 52.93 172.321 55.72L170.001 58.98C167.841 57.44 163.301 57.86 161.731 58.15C151.661 60.11 145.501 63.68 143.951 68.47C142.041 74.38 150.071 84.94 151.611 86.78C152.741 86.94 153.801 86.99 154.771 86.93C155.901 86.85 156.881 86.26 157.481 85.29C158.121 84.26 155.311 79.09 154.841 77.96C153.491 74.71 153.481 72.08 154.811 70.14C156.171 68.15 158.781 67.2 162.561 67.3C179.891 67.76 185.231 75.66 186.651 82.21C187.111 84.31 186.661 86.27 185.361 87.86C181.291 92.84 171.651 92.79 170.341 92.77L170.221 88.77C174.421 88.82 180.121 87.96 182.271 85.32C182.801 84.67 182.941 83.98 182.741 83.06C181.111 75.57 174.281 71.61 162.451 71.3C160.211 71.24 158.631 71.64 158.101 72.41C157.611 73.13 157.761 74.59 158.531 76.43C159.501 78.75 162.191 85.28 160.881 87.4C159.601 89.47 157.471 90.76 155.041 90.93C153.551 91.03 151.931 90.93 150.221 90.62C150.121 90.6 150.011 90.57 149.921 90.54V90.53Z"
+      fill={colorValues.hands}
+    />
+  </Svg>
+);
+
+export default PictogramBleedWorkInProgress;

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

@@ -0,0 +1,62 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../types";
+
+const PictogramWorkInProgress = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M113.61 112.67L111.73 109.14C120.18 104.63 125.42 99.11 127.29 92.76C129.52 85.19 126.1 78.91 126.07 78.84C125.55 77.9 125.86 76.71 126.78 76.15L157.71 57.41L159.78 60.83L130.37 78.64C131.47 81.41 133.09 87.14 131.15 93.8C128.98 101.26 123.08 107.6 113.61 112.66V112.67Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M76.5195 76.78C71.8795 77.77 66.2495 78.41 62.3295 77.7C59.8095 77.24 58.0495 76.24 57.1195 74.72C55.7495 72.51 55.6395 69.95 56.7995 67.53C58.9995 62.93 65.4595 59.44 73.6595 58.42L74.1595 62.39C65.9495 63.42 61.6295 66.74 60.4095 69.26C59.8395 70.46 59.8695 71.56 60.5295 72.62C60.7895 73.04 61.5395 73.43 62.5895 73.67C68.4495 75.02 80.4995 71.96 82.0295 70.99L84.4395 74.18C83.4995 74.91 80.3495 75.96 76.5295 76.78H76.5195Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M94.2796 60.79C93.5196 60.91 75.4396 63.65 66.2796 61.59C64.3196 61.15 62.8496 59.65 62.4496 57.68C62.0496 55.72 62.7996 53.78 64.4196 52.61C67.9296 50.07 74.7196 46.91 87.1196 46.29C97.4796 45.78 106.08 38.89 117.97 29.35C123.4 25 129.55 20.07 136.82 15L139.11 18.28C131.95 23.27 125.86 28.15 120.48 32.46C108 42.47 98.9796 49.69 87.3296 50.27C75.9096 50.84 69.8496 53.61 66.7796 55.83C66.2996 56.17 66.3496 56.66 66.3796 56.86C66.4196 57.06 66.5796 57.54 67.1796 57.67C75.5996 59.57 93.5096 56.85 93.6896 56.82L94.2996 60.77L94.2796 60.79Z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M126.579 128.37L89.4395 139.72L89.5695 165.28L140.759 149.63L126.579 128.37ZM122.729 133.21L95.6695 141.48L95.6495 149.62C95.6495 150.34 95.1395 150.94 94.4595 151.08C94.3595 151.1 94.2495 151.11 94.1395 151.11C93.3095 151.11 92.6395 150.44 92.6395 149.61L92.6595 139.25L121.829 130.33C122.619 130.08 123.459 130.53 123.699 131.33C123.939 132.12 123.499 132.96 122.699 133.2L122.729 133.21Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M97.4098 92.49L93.5598 93.67C91.7898 94.21 90.4198 95.52 89.7298 97.15L95.5398 99.58L93.9898 107.01L89.2598 106.59L89.3298 120.56L115.94 112.43L104.29 94.95C102.79 92.7 99.9898 91.7 97.4098 92.49Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M181.769 186.08C181.119 183.97 178.889 182.78 176.779 183.42L165.569 186.85L151.389 165.59L89.6592 184.45L89.7892 210.01L79.0792 213.28C76.9692 213.93 75.7792 216.16 76.4192 218.27L77.6592 222.33C78.3092 224.44 80.5392 225.63 82.6492 224.99L180.349 195.13C182.459 194.48 183.649 192.25 183.009 190.14L181.769 186.08ZM146.809 170.64L95.8792 186.21L95.9092 198.57C95.9092 199.29 95.3992 199.9 94.7192 200.04C94.6192 200.06 94.5192 200.07 94.4092 200.07C93.5792 200.07 92.9092 199.4 92.9092 198.57L92.8792 183.98L145.939 167.76C146.729 167.52 147.569 167.96 147.809 168.76C148.049 169.55 147.609 170.39 146.809 170.63V170.64Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M140.758 149.64L89.5684 165.29L89.6684 184.46L151.398 165.6L140.768 149.65L140.758 149.64ZM92.5784 167.5L139.498 153.16L146.658 163.9L92.6484 180.41L92.5784 167.51V167.5Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M115.94 112.42L89.3301 120.55L89.4301 139.72L126.57 128.37L115.94 112.42ZM92.3401 122.77L114.68 115.94L121.84 126.68L92.4101 135.68L92.3401 122.78V122.77Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M126.58 128.37L89.4297 139.73L126.58 128.37Z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M145.939 167.78L92.8789 184L92.9089 198.59C92.9089 199.42 93.5789 200.09 94.4089 200.09C94.5189 200.09 94.6189 200.08 94.7189 200.06C95.3989 199.92 95.9089 199.31 95.9089 198.59L95.8789 186.23L146.809 170.66C147.599 170.42 148.049 169.58 147.809 168.79C147.569 168 146.729 167.55 145.939 167.79V167.78Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M121.848 130.34L92.6782 139.26L92.6582 149.62C92.6582 150.45 93.3282 151.12 94.1582 151.12C94.2682 151.12 94.3782 151.11 94.4782 151.09C95.1582 150.95 95.6582 150.35 95.6682 149.63L95.6882 141.49L122.748 133.22C123.538 132.98 123.988 132.14 123.748 131.35C123.508 130.56 122.668 130.1 121.878 130.35L121.848 130.34Z"
+      fill={colorValues.secondary}
+    />
+    <Path
+      d="M89.4102 109.34C89.1002 109.41 88.7702 109.4 88.4602 109.31C87.9402 109.17 71.1902 103.89 68.9502 94.55C67.3902 88.06 71.1002 80.66 79.9702 72.58C80.5502 72.06 85.6502 67.61 90.4402 67.96L90.1502 71.95C87.5102 71.75 83.8402 74.48 82.6502 75.54C75.0702 82.46 71.6702 88.7 72.8402 93.6C74.2802 99.64 86.6302 104.49 88.9102 105.25C89.9602 104.8 90.8902 104.29 91.6902 103.73C92.6102 103.08 93.1502 102.06 93.1502 100.92C93.1502 99.71 88.0802 96.75 87.0802 96.03C84.2402 93.96 82.8602 91.72 82.9902 89.37C83.1202 86.96 84.8502 84.79 88.1402 82.91C103.18 74.3 111.85 78.27 116.47 83.11C117.96 84.67 118.59 86.57 118.31 88.6C117.43 94.97 109.16 99.94 108.04 100.61L105.86 97.26C109.48 95.12 113.89 91.42 114.35 88.05C114.46 87.22 114.23 86.55 113.58 85.87C108.29 80.32 100.4 80.49 90.1302 86.38C88.1902 87.49 87.0402 88.66 86.9902 89.59C86.9402 90.46 87.8402 91.63 89.4402 92.8C91.4702 94.28 97.1702 98.46 97.1502 100.95C97.1302 103.39 95.9802 105.59 93.9902 107C92.7702 107.86 91.3302 108.62 89.7102 109.24C89.6102 109.28 89.5102 109.31 89.4102 109.33V109.34Z"
+      fill={colorValues.hands}
+    />
+  </Svg>
+);
+
+export default PictogramWorkInProgress;

package/src/components/pictograms/svg/originals/PictogramBleedWorkInProgress.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_19676_22999)"><g clip-path="url(#clip1_19676_22999)"><path d="M168.86 105.96L169.09 101.97C178.66 102.51 186 100.53 190.9 96.07C196.74 90.77 197.09 83.62 197.09 83.55C197.13 82.48 198.02 81.62 199.09 81.62L240.25 81.7V85.7L200.86 85.62C200.36 88.56 198.76 94.29 193.64 98.97C187.91 104.21 179.57 106.56 168.85 105.96H168.86Z" fill="#0B3EE3"/><path d="M155.84 56.01C151.36 54.44 146.22 52.06 143.24 49.41C141.32 47.71 140.35 45.94 140.34 44.16C140.33 41.56 141.56 39.32 143.8 37.86C148.07 35.08 155.41 35.45 162.94 38.84L161.3 42.49C153.75 39.1 148.33 39.68 145.98 41.21C144.87 41.94 144.33 42.89 144.33 44.14C144.33 44.64 144.78 45.36 145.55 46.11C149.86 50.32 161.74 53.96 163.54 53.93L163.94 57.91C162.76 58.04 159.52 57.31 155.83 56.02L155.84 56.01Z" fill="#0B3EE3"/><path d="M179.32 51.59C178.61 51.29 161.74 44.24 154.99 37.71C153.55 36.31 153.07 34.27 153.75 32.38C154.42 30.5 156.08 29.23 158.07 29.07C162.39 28.72 169.83 29.55 180.75 35.48C189.87 40.43 200.79 39.01 215.91 37.06C222.81 36.17 230.88 35.15 239.71 34.6V38.6C231.01 39.14 223.26 40.14 216.42 41.03C200.56 43.09 189.1 44.57 178.84 39C168.79 33.54 162.17 32.76 158.39 33.06C157.8 33.11 157.59 33.55 157.52 33.73C157.45 33.92 157.34 34.42 157.78 34.84C163.98 40.84 180.7 47.83 180.86 47.9L179.32 51.59Z" fill="#0B3EE3"/><path d="M171.761 126.11L134.131 116.49L120.951 138.39L172.811 151.65L171.761 126.11ZM165.951 128.24L138.541 121.23L134.291 128.18C133.911 128.79 133.171 129.04 132.521 128.81C132.421 128.78 132.321 128.73 132.231 128.67C131.521 128.24 131.301 127.31 131.731 126.61L137.141 117.77L166.701 125.33C167.501 125.53 167.991 126.35 167.781 127.15C167.571 127.95 166.761 128.44 165.951 128.23V128.24Z" fill="#AAEEEF"/><path d="M165.511 80.3L161.611 79.3C159.811 78.84 157.971 79.24 156.531 80.28L160.231 85.38L155.051 90.92L151.231 88.1L144.031 100.07L170.991 106.96L170.121 85.97C170.011 83.27 168.141 80.96 165.521 80.29L165.511 80.3Z" fill="#AAEEEF"/><path d="M188.901 204.11C189.451 201.97 188.161 199.79 186.021 199.24L174.661 196.34L173.611 170.8L111.081 154.81L97.9007 176.71L87.0507 173.94C84.9107 173.39 82.7307 174.68 82.1807 176.82L81.1307 180.93C80.5807 183.07 81.8707 185.25 84.0107 185.8L182.991 211.1C185.131 211.65 187.311 210.36 187.861 208.22L188.911 204.11H188.901ZM167.071 172.75L115.471 159.56L109.071 170.13C108.701 170.75 107.951 171 107.291 170.77C107.191 170.74 107.101 170.69 107.011 170.64C106.301 170.21 106.081 169.29 106.501 168.58L114.061 156.1L167.821 169.84C168.621 170.05 169.111 170.86 168.901 171.66C168.691 172.46 167.881 172.95 167.081 172.74L167.071 172.75Z" fill="#AAEEEF"/><path d="M172.82 151.65L120.96 138.39L111.08 154.81L173.61 170.8L172.82 151.65ZM122.38 141.85L169.92 154L170.45 166.89L115.73 152.9L122.38 141.84V141.85Z" fill="#AAEEEF"/><path d="M170.981 106.96L144.021 100.07L134.141 116.49L171.771 126.11L170.981 106.96ZM145.441 103.53L168.071 109.32L168.601 122.21L138.781 114.59L145.431 103.53H145.441Z" fill="#AAEEEF"/><path d="M171.761 126.11L134.131 116.49L171.761 126.11Z" fill="#AAEEEF"/><path d="M167.81 169.84L114.05 156.1L106.49 168.58C106.06 169.29 106.29 170.21 107 170.64C107.09 170.69 107.19 170.74 107.28 170.77C107.93 171 108.68 170.75 109.06 170.13L115.46 159.56L167.06 172.75C167.86 172.96 168.68 172.47 168.88 171.67C169.08 170.87 168.6 170.05 167.8 169.85L167.81 169.84Z" fill="#00C5CA"/><path d="M166.701 125.34L137.141 117.78L131.731 126.62C131.301 127.33 131.521 128.25 132.231 128.68C132.321 128.74 132.421 128.78 132.521 128.82C133.171 129.05 133.921 128.8 134.291 128.19L138.541 121.24L165.951 128.25C166.751 128.46 167.571 127.97 167.781 127.17C167.981 126.37 167.501 125.54 166.701 125.35V125.34Z" fill="#00C5CA"/><path d="M149.921 90.53C149.621 90.42 149.351 90.25 149.121 90.01C148.751 89.62 137.191 76.4 140.131 67.26C142.181 60.9 149.191 56.52 160.971 54.22C161.731 54.08 168.401 52.93 172.321 55.72L170.001 58.98C167.841 57.44 163.301 57.86 161.731 58.15C151.661 60.11 145.501 63.68 143.951 68.47C142.041 74.38 150.071 84.94 151.611 86.78C152.741 86.94 153.801 86.99 154.771 86.93C155.901 86.85 156.881 86.26 157.481 85.29C158.121 84.26 155.311 79.09 154.841 77.96C153.491 74.71 153.481 72.08 154.811 70.14C156.171 68.15 158.781 67.2 162.561 67.3C179.891 67.76 185.231 75.66 186.651 82.21C187.111 84.31 186.661 86.27 185.361 87.86C181.291 92.84 171.651 92.79 170.341 92.77L170.221 88.77C174.421 88.82 180.121 87.96 182.271 85.32C182.801 84.67 182.941 83.98 182.741 83.06C181.111 75.57 174.281 71.61 162.451 71.3C160.211 71.24 158.631 71.64 158.101 72.41C157.611 73.13 157.761 74.59 158.531 76.43C159.501 78.75 162.191 85.28 160.881 87.4C159.601 89.47 157.471 90.76 155.041 90.93C153.551 91.03 151.931 90.93 150.221 90.62C150.121 90.6 150.011 90.57 149.921 90.54V90.53Z" fill="#0B3EE3"/></g></g><defs><clipPath id="clip0_19676_22999"><rect width="240" height="240" fill="white"/></clipPath><clipPath id="clip1_19676_22999"><rect width="159.26" height="182.23" fill="white" transform="translate(81 29)"/></clipPath></defs></svg>

package/src/components/pictograms/svg/originals/PictogramWorkInProgress.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_19676_22989)"><path d="M113.61 112.67L111.73 109.14C120.18 104.63 125.42 99.11 127.29 92.76C129.52 85.19 126.1 78.91 126.07 78.84C125.55 77.9 125.86 76.71 126.78 76.15L157.71 57.41L159.78 60.83L130.37 78.64C131.47 81.41 133.09 87.14 131.15 93.8C128.98 101.26 123.08 107.6 113.61 112.66V112.67Z" fill="#0B3EE3"/><path d="M76.5195 76.78C71.8795 77.77 66.2495 78.41 62.3295 77.7C59.8095 77.24 58.0495 76.24 57.1195 74.72C55.7495 72.51 55.6395 69.95 56.7995 67.53C58.9995 62.93 65.4595 59.44 73.6595 58.42L74.1595 62.39C65.9495 63.42 61.6295 66.74 60.4095 69.26C59.8395 70.46 59.8695 71.56 60.5295 72.62C60.7895 73.04 61.5395 73.43 62.5895 73.67C68.4495 75.02 80.4995 71.96 82.0295 70.99L84.4395 74.18C83.4995 74.91 80.3495 75.96 76.5295 76.78H76.5195Z" fill="#0B3EE3"/><path d="M94.2796 60.79C93.5196 60.91 75.4396 63.65 66.2796 61.59C64.3196 61.15 62.8496 59.65 62.4496 57.68C62.0496 55.72 62.7996 53.78 64.4196 52.61C67.9296 50.07 74.7196 46.91 87.1196 46.29C97.4796 45.78 106.08 38.89 117.97 29.35C123.4 25 129.55 20.07 136.82 15L139.11 18.28C131.95 23.27 125.86 28.15 120.48 32.46C108 42.47 98.9796 49.69 87.3296 50.27C75.9096 50.84 69.8496 53.61 66.7796 55.83C66.2996 56.17 66.3496 56.66 66.3796 56.86C66.4196 57.06 66.5796 57.54 67.1796 57.67C75.5996 59.57 93.5096 56.85 93.6896 56.82L94.2996 60.77L94.2796 60.79Z" fill="#0B3EE3"/><path d="M126.579 128.37L89.4395 139.72L89.5695 165.28L140.759 149.63L126.579 128.37ZM122.729 133.21L95.6695 141.48L95.6495 149.62C95.6495 150.34 95.1395 150.94 94.4595 151.08C94.3595 151.1 94.2495 151.11 94.1395 151.11C93.3095 151.11 92.6395 150.44 92.6395 149.61L92.6595 139.25L121.829 130.33C122.619 130.08 123.459 130.53 123.699 131.33C123.939 132.12 123.499 132.96 122.699 133.2L122.729 133.21Z" fill="#AAEEEF"/><path d="M97.4098 92.49L93.5598 93.67C91.7898 94.21 90.4198 95.52 89.7298 97.15L95.5398 99.58L93.9898 107.01L89.2598 106.59L89.3298 120.56L115.94 112.43L104.29 94.95C102.79 92.7 99.9898 91.7 97.4098 92.49Z" fill="#AAEEEF"/><path d="M181.769 186.08C181.119 183.97 178.889 182.78 176.779 183.42L165.569 186.85L151.389 165.59L89.6592 184.45L89.7892 210.01L79.0792 213.28C76.9692 213.93 75.7792 216.16 76.4192 218.27L77.6592 222.33C78.3092 224.44 80.5392 225.63 82.6492 224.99L180.349 195.13C182.459 194.48 183.649 192.25 183.009 190.14L181.769 186.08ZM146.809 170.64L95.8792 186.21L95.9092 198.57C95.9092 199.29 95.3992 199.9 94.7192 200.04C94.6192 200.06 94.5192 200.07 94.4092 200.07C93.5792 200.07 92.9092 199.4 92.9092 198.57L92.8792 183.98L145.939 167.76C146.729 167.52 147.569 167.96 147.809 168.76C148.049 169.55 147.609 170.39 146.809 170.63V170.64Z" fill="#AAEEEF"/><path d="M140.758 149.64L89.5684 165.29L89.6684 184.46L151.398 165.6L140.768 149.65L140.758 149.64ZM92.5784 167.5L139.498 153.16L146.658 163.9L92.6484 180.41L92.5784 167.51V167.5Z" fill="#AAEEEF"/><path d="M115.94 112.42L89.3301 120.55L89.4301 139.72L126.57 128.37L115.94 112.42ZM92.3401 122.77L114.68 115.94L121.84 126.68L92.4101 135.68L92.3401 122.78V122.77Z" fill="#AAEEEF"/><path d="M126.58 128.37L89.4297 139.73L126.58 128.37Z" fill="#AAEEEF"/><path d="M145.939 167.78L92.8789 184L92.9089 198.59C92.9089 199.42 93.5789 200.09 94.4089 200.09C94.5189 200.09 94.6189 200.08 94.7189 200.06C95.3989 199.92 95.9089 199.31 95.9089 198.59L95.8789 186.23L146.809 170.66C147.599 170.42 148.049 169.58 147.809 168.79C147.569 168 146.729 167.55 145.939 167.79V167.78Z" fill="#00C5CA"/><path d="M121.848 130.34L92.6782 139.26L92.6582 149.62C92.6582 150.45 93.3282 151.12 94.1582 151.12C94.2682 151.12 94.3782 151.11 94.4782 151.09C95.1582 150.95 95.6582 150.35 95.6682 149.63L95.6882 141.49L122.748 133.22C123.538 132.98 123.988 132.14 123.748 131.35C123.508 130.56 122.668 130.1 121.878 130.35L121.848 130.34Z" fill="#00C5CA"/><path d="M89.4102 109.34C89.1002 109.41 88.7702 109.4 88.4602 109.31C87.9402 109.17 71.1902 103.89 68.9502 94.55C67.3902 88.06 71.1002 80.66 79.9702 72.58C80.5502 72.06 85.6502 67.61 90.4402 67.96L90.1502 71.95C87.5102 71.75 83.8402 74.48 82.6502 75.54C75.0702 82.46 71.6702 88.7 72.8402 93.6C74.2802 99.64 86.6302 104.49 88.9102 105.25C89.9602 104.8 90.8902 104.29 91.6902 103.73C92.6102 103.08 93.1502 102.06 93.1502 100.92C93.1502 99.71 88.0802 96.75 87.0802 96.03C84.2402 93.96 82.8602 91.72 82.9902 89.37C83.1202 86.96 84.8502 84.79 88.1402 82.91C103.18 74.3 111.85 78.27 116.47 83.11C117.96 84.67 118.59 86.57 118.31 88.6C117.43 94.97 109.16 99.94 108.04 100.61L105.86 97.26C109.48 95.12 113.89 91.42 114.35 88.05C114.46 87.22 114.23 86.55 113.58 85.87C108.29 80.32 100.4 80.49 90.1302 86.38C88.1902 87.49 87.0402 88.66 86.9902 89.59C86.9402 90.46 87.8402 91.63 89.4402 92.8C91.4702 94.28 97.1702 98.46 97.1502 100.95C97.1302 103.39 95.9802 105.59 93.9902 107C92.7702 107.86 91.3302 108.62 89.7102 109.24C89.6102 109.28 89.5102 109.31 89.4102 109.33V109.34Z" fill="#0B3EE3"/></g><defs><clipPath id="clip0_19676_22989"><rect width="127.19" height="210.16" fill="white" transform="translate(56 15)"/></clipPath></defs></svg>