@pagopa/io-app-design-system 1.2.0 → 1.3.1

package/src/components/listitems/ListItemNavAlert.tsx

@@ -1,136 +1,140 @@
 import React, { useCallback } from "react";
-import {
-    GestureResponderEvent,
-    Pressable,
-    View
-} from "react-native";
+import { GestureResponderEvent, Pressable, View } from "react-native";
 import Animated, {
-    Extrapolate,
-    interpolate,
-    interpolateColor,
-    useAnimatedStyle,
-    useDerivedValue,
-    useSharedValue,
-    withSpring
+  Extrapolate,
+  interpolate,
+  interpolateColor,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withSpring
 } from "react-native-reanimated";
-import { IOColors, IOListItemStyles, IOListItemVisualParams, IOScaleValues, IOSpringValues, IOStyles, hexToRgba, useIOTheme } from "../../core";
+import {
+  IOColors,
+  IOListItemStyles,
+  IOListItemVisualParams,
+  IOScaleValues,
+  IOSpringValues,
+  IOStyles,
+  hexToRgba,
+  useIOTheme
+} from "../../core";
 import { WithTestID } from "../../utils/types";
 import { Icon } from "../icons";
 import { H6, LabelSmall } from "../typography";
 
 export type ListItemNavAlert = WithTestID<{
-    value: string;
-    description?: string;
-    withoutIcon?: boolean;
-    onPress: (event: GestureResponderEvent) => void;
-    // Accessibility
-    accessibilityLabel: string;
+  value: string;
+  description?: string;
+  withoutIcon?: boolean;
+  onPress: (event: GestureResponderEvent) => void;
+  // Accessibility
+  accessibilityLabel: string;
 }>;
 
 export const ListItemNavAlert = ({
-    value,
-    description,
-    withoutIcon = false,
-    onPress,
-    accessibilityLabel,
-    testID
+  value,
+  description,
+  withoutIcon = false,
+  onPress,
+  accessibilityLabel,
+  testID
 }: ListItemNavAlert) => {
-    const isPressed: Animated.SharedValue<number> = useSharedValue(0);
+  const isPressed: Animated.SharedValue<number> = useSharedValue(0);
 
-    const theme = useIOTheme();
+  const theme = useIOTheme();
 
-    const mapBackgroundStates: Record<string, string> = {
-        default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
-        pressed: IOColors[theme["listItem-pressed"]]
-    };
+  const mapBackgroundStates: Record<string, string> = {
+    default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
+    pressed: IOColors[theme["listItem-pressed"]]
+  };
 
-    // Scaling transformation applied when the button is pressed
-    const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
-
-    const progressPressed = useDerivedValue(() =>
-        withSpring(isPressed.value, IOSpringValues.button)
-    );
+  // Scaling transformation applied when the button is pressed
+  const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
 
-    // Interpolate animation values from `isPressed` values
-    const animatedScaleStyle = useAnimatedStyle(() => {
-        const scale = interpolate(
-            progressPressed.value,
-            [0, 1],
-            [1, animationScaleValue],
-            Extrapolate.CLAMP
-        );
+  const progressPressed = useDerivedValue(() =>
+    withSpring(isPressed.value, IOSpringValues.button)
+  );
 
-        return {
-            transform: [{ scale }]
-        };
-    });
+  // Interpolate animation values from `isPressed` values
+  const animatedScaleStyle = useAnimatedStyle(() => {
+    const scale = interpolate(
+      progressPressed.value,
+      [0, 1],
+      [1, animationScaleValue],
+      Extrapolate.CLAMP
+    );
 
-    const animatedBackgroundStyle = useAnimatedStyle(() => {
-        const backgroundColor = interpolateColor(
-            progressPressed.value,
-            [0, 1],
-            [mapBackgroundStates.default, mapBackgroundStates.pressed]
-        );
+    return {
+      transform: [{ scale }]
+    };
+  });
 
-        return {
-            backgroundColor
-        };
-    });
+  const animatedBackgroundStyle = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      progressPressed.value,
+      [0, 1],
+      [mapBackgroundStates.default, mapBackgroundStates.pressed]
+    );
 
-    const handlePressIn = useCallback(() => {
-        // eslint-disable-next-line functional/immutable-data
-        isPressed.value = 1;
-    }, [isPressed]);
-    const handlePressOut = useCallback(() => {
-        // eslint-disable-next-line functional/immutable-data
-        isPressed.value = 0;
-    }, [isPressed]);
+    return {
+      backgroundColor
+    };
+  });
 
+  const handlePressIn = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 1;
+  }, [isPressed]);
+  const handlePressOut = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 0;
+  }, [isPressed]);
 
-    return (
-        <Pressable
-            onPress={onPress}
-            onPressIn={handlePressIn}
-            onPressOut={handlePressOut}
-            accessible={true}
-            accessibilityLabel={accessibilityLabel}
-            accessibilityRole="button"
-            testID={testID}
+  return (
+    <Pressable
+      onPress={onPress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      accessible={true}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      testID={testID}
+    >
+      <Animated.View
+        style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
+      >
+        <Animated.View
+          style={[IOListItemStyles.listItemInner, animatedScaleStyle]}
         >
-            <Animated.View
-                style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
-            >
-                <Animated.View
-                    style={[IOListItemStyles.listItemInner, animatedScaleStyle]}
-                >
-                    {!withoutIcon && (
-                        <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-                            <Icon
-                                name="errorFilled"
-                                color={theme.errorIcon}
-                                size={IOListItemVisualParams.iconSize}
-                            />
-                        </View>
-                    )}
-                    <View style={IOStyles.flex}>
-                        <H6 color={theme["textBody-default"]}>{value}</H6>
-                        {description && (
-                            <LabelSmall weight="SemiBold" color={theme.errorText}>
-                                {description}
-                            </LabelSmall>
-                        )}
-                    </View>
-                    <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
-                        <Icon
-                            name="chevronRightListItem"
-                            color={theme["interactiveElem-default"]}
-                            size={IOListItemVisualParams.chevronSize}
-                        />
-                    </View>
-                </Animated.View>
-            </Animated.View>
-        </Pressable>
-    );
+          {!withoutIcon && (
+            <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
+              <Icon
+                name="errorFilled"
+                color={theme.errorIcon}
+                size={IOListItemVisualParams.iconSize}
+              />
+            </View>
+          )}
+          <View style={IOStyles.flex}>
+            <H6 color={theme["textBody-default"]}>{value}</H6>
+            {description && (
+              <LabelSmall weight="SemiBold" color={theme.errorText}>
+                {description}
+              </LabelSmall>
+            )}
+          </View>
+          <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
+            <Icon
+              name="chevronRightListItem"
+              color={theme["interactiveElem-default"]}
+              size={IOListItemVisualParams.chevronSize}
+            />
+          </View>
+        </Animated.View>
+      </Animated.View>
+    </Pressable>
+  );
 };
 
 export default ListItemNavAlert;

package/src/components/listitems/ListItemTransaction.tsx

@@ -101,13 +101,9 @@ export const ListItemTransaction = ({
           );
 
         case "failure":
-          return (
-            <Badge variant="error" text={"Failed"} />
-          );
+          return <Badge variant="error" text={"Failed"} />;
         case "pending":
-          return (
-            <Badge variant="info" text={"Cancelled"} />
-          );
+          return <Badge variant="info" text={"Cancelled"} />;
       }
     };
 

package/src/components/listitems/PressableListItemsBase.tsx

@@ -6,37 +6,37 @@ import { WithTestID } from "../../utils/types";
 import { useListItemSpringAnimation } from "./hooks/useListItemSpringAnimation";
 
 export type PressableBaseProps = WithTestID<{
-    accessibilityLabel?: string;
-    onPress?: () => void;
+  accessibilityLabel?: string;
+  onPress?: () => void;
 }>;
 export const PressableListItemBase = ({
-    onPress,
-    testID,
-    accessibilityLabel,
-    children
+  onPress,
+  testID,
+  accessibilityLabel,
+  children
 }: React.PropsWithChildren<PressableBaseProps>) => {
-    const { onPressIn, onPressOut, animatedScaleStyle, animatedBackgroundStyle } =
-        useListItemSpringAnimation();
-    return (
-        <Pressable
-            onPress={onPress}
-            testID={testID}
-            accessible={true}
-            accessibilityLabel={accessibilityLabel}
-            onPressIn={onPressIn}
-            onPressOut={onPressOut}
-            onTouchEnd={onPressOut}
-            accessibilityRole="button"
+  const { onPressIn, onPressOut, animatedScaleStyle, animatedBackgroundStyle } =
+    useListItemSpringAnimation();
+  return (
+    <Pressable
+      onPress={onPress}
+      testID={testID}
+      accessible={true}
+      accessibilityLabel={accessibilityLabel}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onTouchEnd={onPressOut}
+      accessibilityRole="button"
+    >
+      <Animated.View
+        style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
+      >
+        <Animated.View
+          style={[IOListItemStyles.listItemInner, animatedScaleStyle]}
         >
-            <Animated.View
-                style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
-            >
-                <Animated.View
-                    style={[IOListItemStyles.listItemInner, animatedScaleStyle]}
-                >
-                    {children}
-                </Animated.View>
-            </Animated.View>
-        </Pressable>
-    );
+          {children}
+        </Animated.View>
+      </Animated.View>
+    </Pressable>
+  );
 };

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

@@ -16,42 +16,80 @@ const onButtonPress = () => {
 
 describe("Test List Item Components", () => {
   it("ListItemInfo Snapshot", () => {
-    const listItemInfo = TestRenderer.create(<ListItemInfo label={"label"} value={"testValue"} accessibilityLabel={"accessibilityLabel"}></ListItemInfo>).toJSON();
+    const listItemInfo = TestRenderer.create(
+      <ListItemInfo
+        label={"label"}
+        value={"testValue"}
+        accessibilityLabel={"accessibilityLabel"}
+      ></ListItemInfo>
+    ).toJSON();
     expect(listItemInfo).toMatchSnapshot();
   });
   it("ListItemInfoCopy Snapshot", () => {
-    const listItemInfoCopy = TestRenderer.create(<ListItemInfoCopy label={"label"} value={"testValue"} onPress={onButtonPress} accessibilityLabel={"accessibilityLabel"}></ListItemInfoCopy>).toJSON();
+    const listItemInfoCopy = TestRenderer.create(
+      <ListItemInfoCopy
+        label={"label"}
+        value={"testValue"}
+        onPress={onButtonPress}
+        accessibilityLabel={"accessibilityLabel"}
+      ></ListItemInfoCopy>
+    ).toJSON();
     expect(listItemInfoCopy).toMatchSnapshot();
   });
   it("ListItemNav Snapshot", () => {
-    const listItemNav = TestRenderer.create(<ListItemNav value={"testValue"} onPress={onButtonPress} accessibilityLabel={"accessibilityLabel"} ></ListItemNav>).toJSON();
+    const listItemNav = TestRenderer.create(
+      <ListItemNav
+        value={"testValue"}
+        onPress={onButtonPress}
+        accessibilityLabel={"accessibilityLabel"}
+      ></ListItemNav>
+    ).toJSON();
     expect(listItemNav).toMatchSnapshot();
   });
   it("ListItemNavAlert Snapshot", () => {
-    const listItemNavAlert = TestRenderer.create(<ListItemNavAlert value={"testValue"} onPress={onButtonPress} accessibilityLabel={"accessibilityLabel"} ></ListItemNavAlert>).toJSON();
+    const listItemNavAlert = TestRenderer.create(
+      <ListItemNavAlert
+        value={"testValue"}
+        onPress={onButtonPress}
+        accessibilityLabel={"accessibilityLabel"}
+      ></ListItemNavAlert>
+    ).toJSON();
     expect(listItemNavAlert).toMatchSnapshot();
   });
   it("ListItemAction Snapshot", () => {
-    const listItemAction = TestRenderer.create(<ListItemAction label={"label"} variant={"primary"} onPress={onButtonPress} accessibilityLabel={"accessibilityLabel"}></ListItemAction>).toJSON();
+    const listItemAction = TestRenderer.create(
+      <ListItemAction
+        label={"label"}
+        variant={"primary"}
+        onPress={onButtonPress}
+        accessibilityLabel={"accessibilityLabel"}
+      ></ListItemAction>
+    ).toJSON();
     expect(listItemAction).toMatchSnapshot();
   });
   it("ListItemIDP Snapshot", () => {
-    const listItemIDP = TestRenderer.create(<ListItemIDP></ListItemIDP>).toJSON();
+    const listItemIDP = TestRenderer.create(
+      <ListItemIDP></ListItemIDP>
+    ).toJSON();
     expect(listItemIDP).toMatchSnapshot();
   });
   it("ListItemTransaction Snapshot", () => {
-    const listItemIDP = TestRenderer.create(<ListItemTransaction
-      title="TITLE"
-      subtitle="subtitle"
-      transactionStatus="success"
-      transactionAmount="€ 1.000,00"
-      isLoading={true}
-      onPress={onButtonPress}
-    />).toJSON();
+    const listItemIDP = TestRenderer.create(
+      <ListItemTransaction
+        title="TITLE"
+        subtitle="subtitle"
+        transactionStatus="success"
+        transactionAmount="€ 1.000,00"
+        isLoading={true}
+        onPress={onButtonPress}
+      />
+    ).toJSON();
     expect(listItemIDP).toMatchSnapshot();
   });
   it("PressableListItemsBase Snapshot", () => {
-    const listItemIDP = TestRenderer.create(<PressableListItemBase></PressableListItemBase>).toJSON();
+    const listItemIDP = TestRenderer.create(
+      <PressableListItemBase></PressableListItemBase>
+    ).toJSON();
     expect(listItemIDP).toMatchSnapshot();
   });
 });

package/src/components/listitems/hooks/useListItemSpringAnimation.ts

@@ -1,70 +1,72 @@
 import * as React from "react";
 import Animated, {
-    Extrapolate,
-    interpolate,
-    interpolateColor,
-    useAnimatedStyle,
-    useDerivedValue,
-    useSharedValue,
-    withSpring
+  Extrapolate,
+  interpolate,
+  interpolateColor,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withSpring
 } from "react-native-reanimated";
 import {
-    IOColors,
-    IOScaleValues, IOSpringValues,
-    hexToRgba, useIOTheme
+  IOColors,
+  IOScaleValues,
+  IOSpringValues,
+  hexToRgba,
+  useIOTheme
 } from "../../../core";
 
 export const useListItemSpringAnimation = () => {
-    const theme = useIOTheme();
+  const theme = useIOTheme();
 
-    const isPressed: Animated.SharedValue<number> = useSharedValue(0);
+  const isPressed: Animated.SharedValue<number> = useSharedValue(0);
 
-    const mapBackgroundStates: Record<string, string> = {
-        default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
-        pressed: IOColors[theme["listItem-pressed"]]
-    };
+  const mapBackgroundStates: Record<string, string> = {
+    default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
+    pressed: IOColors[theme["listItem-pressed"]]
+  };
 
-    // Scaling transformation applied when the button is pressed
-    const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
+  // Scaling transformation applied when the button is pressed
+  const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
 
-    const progressPressed = useDerivedValue(() =>
-        withSpring(isPressed.value, IOSpringValues.button)
-    );
+  const progressPressed = useDerivedValue(() =>
+    withSpring(isPressed.value, IOSpringValues.button)
+  );
 
-    // Interpolate animation values from `isPressed` values
-    const animatedScaleStyle = useAnimatedStyle(() => {
-        const scale = interpolate(
-            progressPressed.value,
-            [0, 1],
-            [1, animationScaleValue],
-            Extrapolate.CLAMP
-        );
+  // Interpolate animation values from `isPressed` values
+  const animatedScaleStyle = useAnimatedStyle(() => {
+    const scale = interpolate(
+      progressPressed.value,
+      [0, 1],
+      [1, animationScaleValue],
+      Extrapolate.CLAMP
+    );
 
-        return {
-            transform: [{ scale }]
-        };
-    });
+    return {
+      transform: [{ scale }]
+    };
+  });
 
-    const animatedBackgroundStyle = useAnimatedStyle(() => {
-        const backgroundColor = interpolateColor(
-            progressPressed.value,
-            [0, 1],
-            [mapBackgroundStates.default, mapBackgroundStates.pressed]
-        );
+  const animatedBackgroundStyle = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      progressPressed.value,
+      [0, 1],
+      [mapBackgroundStates.default, mapBackgroundStates.pressed]
+    );
 
-        return {
-            backgroundColor
-        };
-    });
+    return {
+      backgroundColor
+    };
+  });
 
-    const onPressIn = React.useCallback(() => {
-        // eslint-disable-next-line functional/immutable-data
-        isPressed.value = 1;
-    }, [isPressed]);
-    const onPressOut = React.useCallback(() => {
-        // eslint-disable-next-line functional/immutable-data
-        isPressed.value = 0;
-    }, [isPressed]);
+  const onPressIn = React.useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 1;
+  }, [isPressed]);
+  const onPressOut = React.useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 0;
+  }, [isPressed]);
 
-    return { onPressIn, onPressOut, animatedScaleStyle, animatedBackgroundStyle };
+  return { onPressIn, onPressOut, animatedScaleStyle, animatedBackgroundStyle };
 };

package/src/components/pictograms/Pictogram.tsx

@@ -41,6 +41,7 @@ import PictogramUmbrellaNew from "./svg/PictogramUmbrellaNew";
 import PictogramUnrecognized from "./svg/PictogramUnrecognized";
 import PictogramUploadFile from "./svg/PictogramUploadFile";
 import PictogramSuccess from "./svg/PictogramSuccess";
+import PictogramFocusOn from "./svg/PictogramFocusOn";
 
 export const IOPictograms = {
   airBaloon: PictogramAirBaloon,
@@ -81,7 +82,8 @@ export const IOPictograms = {
   umbrellaNew: PictogramUmbrellaNew,
   feedback: PictogramFeedback,
   cameraRequest: PictogramCameraRequest,
-  success: PictogramSuccess
+  success: PictogramSuccess,
+  focusOn: PictogramFocusOn
 };
 
 export type IOPictograms = keyof typeof IOPictograms;
@@ -115,11 +117,12 @@ export const Pictogram = ({
 /* Bleed pictograms
     Used in the <Banner /> component
 */
-const { donation, feedback } = IOPictograms;
+const { donation, feedback, focusOn } = IOPictograms;
 
 const IOPictogramsBleed = {
   donation,
-  feedback
+  feedback,
+  focusOn
 } as const;
 
 export type IOPictogramsBleed = keyof typeof IOPictogramsBleed;

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { Svg, Path, G, Defs } from "react-native-svg";
+import { SVGPictogramProps } from "../Pictogram";
+
+const PictogramFocusOn = ({ size, color, ...props }: SVGPictogramProps) => (
+  <Svg fill="none" width={size} height={size} viewBox="0 0 80 80" {...props}>
+    <G clip-path="url(#a)">
+      <Path
+        fill="#AAEEEF"
+        fill-rule="evenodd"
+        d="M37.0385 36.6024c2.6444-3.4677 4.2148-7.7986 4.2148-12.4963 0-11.3918-9.2348-20.62667-20.6266-20.62667C9.23488 3.47943 0 12.7143 0 24.1061s9.23488 20.6267 20.6267 20.6267c4.4277 0 8.5295-1.3951 11.89-3.7697l-1.5767-.6757-.7113-1.4226V37.798l1.6004-.8891 5.2094-.3065Z"
+        clip-rule="evenodd"
+      />
+      <Path
+        fill="#00C5CA"
+        d="M20.5295 29.5c-.3443 0-.6293-.2724-.651-.6222l-.1207-1.9419c-.0817-1.313.7858-2.4577 1.9653-2.995.1316-.0599.2599-.1217.3849-.1853.7403-.3871 1.3506-.825 1.8308-1.3139.4801-.4889.8303-1.0389 1.0504-1.65.2401-.6111.3601-1.263.3601-1.9556 0-.7741-.1801-1.487-.5402-2.1389-.3601-.6518-.8904-1.1815-1.5906-1.5889-.6803-.4074-1.4906-.6111-2.431-.6111-.7203 0-1.4105.1426-2.0708.4278-.6403.2648-1.2305.6824-1.7707 1.2528-.3548.389-.6724.8538-.9527 1.3945-.2058.3968-.7123.5401-1.0638.2693-.244-.188-.3347-.5216-.2013-.802.3663-.7697.8154-1.4338 1.3475-1.9924.6402-.6722 1.3605-1.1815 2.1608-1.5278.8203-.3463 1.6907-.5194 2.611-.5194 1.2005 0 2.2609.2648 3.1813.7944.9404.5093 1.6706 1.2019 2.1909 2.0778.5202.8759.7803 1.8537.7803 2.9334 0 1.0388-.2401 2.0064-.7203 2.9027-.4602.876-1.1105 1.65-1.9508 2.3223-.4332.336-.9062.6314-1.4191.8862-.8979.4461-1.5879 1.2888-1.6416 2.3045l-.0873 1.6503c-.0186.3524-.3048.6284-.6514.6284Zm-1.1826 4.125c0-.4278.1101-.7741.3302-1.0389.2201-.2648.5202-.3972.9003-.3972.4002 0 .7003.1222.9004.3667.2201.2444.3301.6009.3301 1.0694 0 .387-.11.713-.3301.9778-.2201.2648-.5202.3972-.9004.3972-.4001 0-.7103-.1222-.9303-.3667-.2001-.2444-.3002-.5805-.3002-1.0083Z"
+      />
+      <G fill="#0B3EE3" clip-path="url(#b)">
+        <Path d="M57.8921 36.9438c.0571.1885.4071.7038.5898.7809 2.0276 2.5853 9.2849 6.7823 22.9454 4.3214v-1.6532c-9.4293 2.1222-15.7294.5002-19.2706-1.5552-2.2284-1.2935-3.3109-3.7543-4.2552-6.1516-1.3778-3.4978-3.5629-7.8791-5.8681-8.0139-.5196-.0371-1.5274.1142-2.1613 1.459-1.1106 2.3441-.6024 7.4292.8109 10.2245-3.7688-.2599-14.2127-.8937-18.4212-.2713-2.581.3798-2.6324 1.8559-2.5867 2.2984.3112 3.0265 6.2584 4.6512 11.015 4.6826-.4796.9907-.9308 2.4925-.2455 3.903.9878 2.0301 3.9743 3.0751 8.8765 3.1036h.0342c1.3591 0 2.5754-.4483 3.4376-1.262 1.0535-.9993 1.1934-2.2356.3826-3.392-.8908-1.2705-2.4554-2.0014-4.1342-1.9615-1.3105.0314-2.6124.3398-3.8715.9108l.5567 1.2249c1.0907-.4968 2.2184-.7623 3.3462-.7909 1.2648-.0342 2.3669.4883 2.9979 1.3876.4282.6082.3654 1.0993-.2056 1.6418-.6082.5739-1.4989.8908-2.5097.8908h-.0285c-5.4076-.0314-7.1549-1.2905-7.6688-2.3413-.768-1.5732.7566-3.5889.7737-3.6089.1599-.2085.1827-.4911.06-.7252-.1228-.2313-.3712-.3712-.6339-.3569-6.8779.3911-10.718-2.2328-10.8436-3.4406-.0457-.4482.7166-.7223 1.4446-.8308 4.9194-.7252 19.3377.3683 19.4833.3797.294.0286.5367-.1285.6566-.3769.12-.2512.0771-.5482-.1113-.7509-1.6246-1.7588-2.4611-7.7176-1.399-9.9617.336-.7117.7084-.6971.8601-.6912l.005.0002c1.8672.1085 4.5967 6.4556 5.9386 10.9268Z" />
+        <Path d="M48.1249 55.006c-.7652 0-1.5875-.0343-2.4697-.0999-2.1556-.1656-3.5146-.8623-4.0457-2.0758-.8993-2.0614 1.0593-4.6197 1.2848-4.9052l1.0536.8366c-.474.5996-1.5989 2.4041-1.1078 3.5319.394.8965 1.8015 1.1849 2.9122 1.2705 3.98.3055 6.6381-.1028 7.9229-1.2049.5425-.4654.8337-1.0621.8908-1.8216l1.3419.0999c-.0828 1.1164-.5396 2.0387-1.3562 2.741-1.2677 1.0907-3.3833 1.6275-6.4325 1.6275h.0057Z" />
+        <Path d="M80.8936 54.09c-11.9529 4.5537-21.8188.2965-26.3249-1.6009l-.8894 1.0673c10.6723 5.5142 21.2853 4.1505 27.2143 2.1345V54.09Z" />
+      </G>
+    </G>
+    <Defs>
+      <clipPath id="a">
+        <Path fill="#fff" d="M0 0h80v80H0z" />
+      </clipPath>
+      <clipPath id="b">
+        <Path
+          fill="#fff"
+          d="M0 0h52v44.6667H0z"
+          transform="translate(29.6666 24.6667)"
+        />
+      </clipPath>
+    </Defs>
+  </Svg>
+);
+
+export default PictogramFocusOn;

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

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 80 80">
+  <g clip-path="url(#a)">
+    <path fill="#AAEEEF" fill-rule="evenodd" d="M37.0385 36.6024c2.6444-3.4677 4.2148-7.7986 4.2148-12.4963 0-11.3918-9.2348-20.62667-20.6266-20.62667C9.23488 3.47943 0 12.7143 0 24.1061s9.23488 20.6267 20.6267 20.6267c4.4277 0 8.5295-1.3951 11.89-3.7697l-1.5767-.6757-.7113-1.4226V37.798l1.6004-.8891 5.2094-.3065Z" clip-rule="evenodd"/>
+    <path fill="#00C5CA" d="M20.5295 29.5c-.3443 0-.6293-.2724-.651-.6222l-.1207-1.9419c-.0817-1.313.7858-2.4577 1.9653-2.995.1316-.0599.2599-.1217.3849-.1853.7403-.3871 1.3506-.825 1.8308-1.3139.4801-.4889.8303-1.0389 1.0504-1.65.2401-.6111.3601-1.263.3601-1.9556 0-.7741-.1801-1.487-.5402-2.1389-.3601-.6518-.8904-1.1815-1.5906-1.5889-.6803-.4074-1.4906-.6111-2.431-.6111-.7203 0-1.4105.1426-2.0708.4278-.6403.2648-1.2305.6824-1.7707 1.2528-.3548.389-.6724.8538-.9527 1.3945-.2058.3968-.7123.5401-1.0638.2693-.244-.188-.3347-.5216-.2013-.802.3663-.7697.8154-1.4338 1.3475-1.9924.6402-.6722 1.3605-1.1815 2.1608-1.5278.8203-.3463 1.6907-.5194 2.611-.5194 1.2005 0 2.2609.2648 3.1813.7944.9404.5093 1.6706 1.2019 2.1909 2.0778.5202.8759.7803 1.8537.7803 2.9334 0 1.0388-.2401 2.0064-.7203 2.9027-.4602.876-1.1105 1.65-1.9508 2.3223-.4332.336-.9062.6314-1.4191.8862-.8979.4461-1.5879 1.2888-1.6416 2.3045l-.0873 1.6503c-.0186.3524-.3048.6284-.6514.6284Zm-1.1826 4.125c0-.4278.1101-.7741.3302-1.0389.2201-.2648.5202-.3972.9003-.3972.4002 0 .7003.1222.9004.3667.2201.2444.3301.6009.3301 1.0694 0 .387-.11.713-.3301.9778-.2201.2648-.5202.3972-.9004.3972-.4001 0-.7103-.1222-.9303-.3667-.2001-.2444-.3002-.5805-.3002-1.0083Z"/>
+    <g fill="#0B3EE3" clip-path="url(#b)">
+      <path d="M57.8921 36.9438c.0571.1885.4071.7038.5898.7809 2.0276 2.5853 9.2849 6.7823 22.9454 4.3214v-1.6532c-9.4293 2.1222-15.7294.5002-19.2706-1.5552-2.2284-1.2935-3.3109-3.7543-4.2552-6.1516-1.3778-3.4978-3.5629-7.8791-5.8681-8.0139-.5196-.0371-1.5274.1142-2.1613 1.459-1.1106 2.3441-.6024 7.4292.8109 10.2245-3.7688-.2599-14.2127-.8937-18.4212-.2713-2.581.3798-2.6324 1.8559-2.5867 2.2984.3112 3.0265 6.2584 4.6512 11.015 4.6826-.4796.9907-.9308 2.4925-.2455 3.903.9878 2.0301 3.9743 3.0751 8.8765 3.1036h.0342c1.3591 0 2.5754-.4483 3.4376-1.262 1.0535-.9993 1.1934-2.2356.3826-3.392-.8908-1.2705-2.4554-2.0014-4.1342-1.9615-1.3105.0314-2.6124.3398-3.8715.9108l.5567 1.2249c1.0907-.4968 2.2184-.7623 3.3462-.7909 1.2648-.0342 2.3669.4883 2.9979 1.3876.4282.6082.3654 1.0993-.2056 1.6418-.6082.5739-1.4989.8908-2.5097.8908h-.0285c-5.4076-.0314-7.1549-1.2905-7.6688-2.3413-.768-1.5732.7566-3.5889.7737-3.6089.1599-.2085.1827-.4911.06-.7252-.1228-.2313-.3712-.3712-.6339-.3569-6.8779.3911-10.718-2.2328-10.8436-3.4406-.0457-.4482.7166-.7223 1.4446-.8308 4.9194-.7252 19.3377.3683 19.4833.3797.294.0286.5367-.1285.6566-.3769.12-.2512.0771-.5482-.1113-.7509-1.6246-1.7588-2.4611-7.7176-1.399-9.9617.336-.7117.7084-.6971.8601-.6912l.005.0002c1.8672.1085 4.5967 6.4556 5.9386 10.9268Z"/>
+      <path d="M48.1249 55.006c-.7652 0-1.5875-.0343-2.4697-.0999-2.1556-.1656-3.5146-.8623-4.0457-2.0758-.8993-2.0614 1.0593-4.6197 1.2848-4.9052l1.0536.8366c-.474.5996-1.5989 2.4041-1.1078 3.5319.394.8965 1.8015 1.1849 2.9122 1.2705 3.98.3055 6.6381-.1028 7.9229-1.2049.5425-.4654.8337-1.0621.8908-1.8216l1.3419.0999c-.0828 1.1164-.5396 2.0387-1.3562 2.741-1.2677 1.0907-3.3833 1.6275-6.4325 1.6275h.0057Z"/>
+      <path d="M80.8936 54.09c-11.9529 4.5537-21.8188.2965-26.3249-1.6009l-.8894 1.0673c10.6723 5.5142 21.2853 4.1505 27.2143 2.1345V54.09Z"/>
+    </g>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h80v80H0z"/>
+    </clipPath>
+    <clipPath id="b">
+      <path fill="#fff" d="M0 0h52v44.6667H0z" transform="translate(29.6666 24.6667)"/>
+    </clipPath>
+  </defs>
+</svg>