@pagopa/io-app-design-system 1.9.3 → 1.11.0

package/src/components/listitems/ListItemSwitch.tsx

@@ -1,22 +1,29 @@
 import React from "react";
-import { GestureResponderEvent, Switch, View } from "react-native";
+import {
+  ActivityIndicator,
+  GestureResponderEvent,
+  Switch,
+  View
+} from "react-native";
 import {
   IOSelectionListItemStyles,
   IOSelectionListItemVisualParams,
-  IOStyles,
   useIOTheme
 } from "../../core";
 import { IOIcons, Icon } from "../icons";
 import { HSpacer, VSpacer } from "../spacer";
 import { H6, LabelSmall, LabelLink } from "../typography";
 import { NativeSwitch } from "../switch/NativeSwitch";
+import { Badge } from "../badge";
+import { IOLogoPaymentType, LogoPayment } from "../logos";
 
-type Props = {
+type PartialProps = {
   label: string;
   onSwitchValueChange?: (newValue: boolean) => void;
   description?: string;
-  icon?: IOIcons;
   action?: SwitchAction;
+  isLoading?: boolean;
+  badge?: Badge;
 };
 
 export type SwitchAction = {
@@ -24,9 +31,19 @@ export type SwitchAction = {
   onPress: (event: GestureResponderEvent) => void;
 };
 
+type ListItemSwitchGraphicProps =
+  | { icon?: never; paymentLogo: IOLogoPaymentType }
+  | { icon: IOIcons; paymentLogo?: never }
+  | { icon?: never; paymentLogo?: never };
+
 const DISABLED_OPACITY = 0.5;
 
-type OwnProps = Props &
+/* Estimated height of the native switch component,
+both on iOS & Android */
+const ESTIMATED_SWITCH_HEIGHT: number = 32;
+
+type ListItemSwitch = PartialProps &
+  ListItemSwitchGraphicProps &
   Pick<React.ComponentProps<typeof Switch>, "value" | "disabled">;
 
 export const ListItemSwitch = React.memo(
@@ -34,11 +51,14 @@ export const ListItemSwitch = React.memo(
     label,
     description,
     icon,
+    paymentLogo,
     value,
     disabled,
     action,
+    isLoading,
+    badge,
     onSwitchValueChange
-  }: OwnProps) => {
+  }: ListItemSwitch) => {
     const theme = useIOTheme();
 
     return (
@@ -59,50 +79,82 @@ export const ListItemSwitch = React.memo(
             { alignItems: "center" }
           ]}
         >
-          <View style={{ flexShrink: 1 }}>
-            <View style={[IOStyles.row, { flexShrink: 1 }]}>
-              {icon && (
-                <View
-                  style={{
-                    marginRight: IOSelectionListItemVisualParams.iconMargin
-                  }}
-                >
-                  <Icon
-                    name={icon}
-                    color="grey-300"
-                    size={IOSelectionListItemVisualParams.iconSize}
-                  />
-                </View>
-              )}
-              <H6 color={"black"} style={{ flexShrink: 1 }}>
-                {label}
-              </H6>
-            </View>
-            {description && (
-              <>
-                <VSpacer
-                  size={IOSelectionListItemVisualParams.descriptionMargin}
+          <View
+            style={{
+              flex: 1,
+              flexDirection: "row",
+              alignItems: "center"
+            }}
+          >
+            {icon && (
+              <View
+                style={{
+                  marginRight: IOSelectionListItemVisualParams.iconMargin,
+                  alignSelf: "flex-start"
+                }}
+              >
+                <Icon
+                  name={icon}
+                  color="grey-300"
+                  size={IOSelectionListItemVisualParams.iconSize}
                 />
-                <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
-                  {description}
-                </LabelSmall>
-              </>
+              </View>
             )}
-            {action && (
-              <>
-                <VSpacer size={IOSelectionListItemVisualParams.actionMargin} />
-                <LabelLink fontSize="small" onPress={action.onPress}>
-                  {action.label}
-                </LabelLink>
-              </>
+            {paymentLogo && (
+              <View
+                style={{
+                  marginRight: IOSelectionListItemVisualParams.iconMargin,
+                  alignSelf: "center"
+                }}
+              >
+                <LogoPayment
+                  name={paymentLogo}
+                  size={IOSelectionListItemVisualParams.iconSize}
+                />
+              </View>
             )}
-          </View>
 
+            <H6 color={"black"} style={{ flex: 1 }}>
+              {label}
+            </H6>
+          </View>
           <HSpacer size={8} />
-          <View style={{ flexShrink: 0, alignSelf: "flex-start" }}>
-            <NativeSwitch value={value} onValueChange={onSwitchValueChange} />
+          <View
+            style={{
+              justifyContent: "center",
+              alignSelf: "flex-start",
+              minHeight: ESTIMATED_SWITCH_HEIGHT
+            }}
+          >
+            {badge && (
+              <Badge
+                text={badge.text}
+                variant={badge.variant}
+                testID={badge.testID}
+              />
+            )}
+            {isLoading && <ActivityIndicator color={"black"} />}
+            {!isLoading && !badge && (
+              <NativeSwitch value={value} onValueChange={onSwitchValueChange} />
+            )}
           </View>
         </View>
+        {description && (
+          <>
+            <VSpacer size={IOSelectionListItemVisualParams.descriptionMargin} />
+            <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+              {description}
+            </LabelSmall>
+          </>
+        )}
+        {action && (
+          <>
+            <VSpacer size={IOSelectionListItemVisualParams.actionMargin} />
+            <LabelLink fontSize="small" onPress={action.onPress}>
+              {action.label}
+            </LabelLink>
+          </>
+        )}
       </View>
     );
   }

package/src/components/modules/ModulePaymentNotice.tsx

@@ -0,0 +1,229 @@
+import * as React from "react";
+import { useCallback } from "react";
+import {
+  GestureResponderEvent,
+  Pressable,
+  StyleSheet,
+  View
+} from "react-native";
+import Animated, {
+  Extrapolate,
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withSpring
+} from "react-native-reanimated";
+import Placeholder from "rn-placeholder";
+import { WithTestID } from "../../utils/types";
+import { getAccessibleAmountText } from "../../utils/accessibility";
+import { H6, LabelSmall } from "../typography";
+import { Badge } from "../badge";
+import { Icon } from "../icons";
+import {
+  IOColors,
+  IOListItemVisualParams,
+  IOScaleValues,
+  IOSpringValues,
+  IOStyles,
+  useIOExperimentalDesign
+} from "../../core";
+import { VSpacer } from "../spacer";
+
+export type PaymentNoticeStatus =
+  | "default"
+  | "payed"
+  | "error"
+  | "expired"
+  | "revoked"
+  | "canceled";
+
+type Props = WithTestID<
+  {
+    isLoading?: boolean;
+    accessibilityLabel?: string;
+    title?: string;
+    subtitle: string;
+    onPress: (event: GestureResponderEvent) => void;
+  } & (
+    | {
+        paymentNoticeStatus: Extract<PaymentNoticeStatus, "default">;
+        paymentNoticeAmount: string;
+        badgeText?: never;
+      }
+    | {
+        paymentNoticeStatus: Exclude<PaymentNoticeStatus, "default">;
+        paymentNoticeAmount?: never;
+        badgeText: string;
+      }
+  )
+>;
+
+const styles = StyleSheet.create({
+  button: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    borderRadius: 8,
+    borderColor: IOColors.bluegreyLight,
+    backgroundColor: IOColors.white,
+    borderStyle: "solid",
+    borderWidth: 1
+  },
+  rightSection: {
+    marginLeft: IOListItemVisualParams.iconMargin,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end"
+  }
+});
+
+const ModulePaymentNoticeContent = ({
+  title,
+  subtitle,
+  paymentNoticeStatus,
+  paymentNoticeAmount,
+  badgeText = ""
+}: Omit<Props, "isLoading" | "onPress" | "testID">) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  const AmountOrBadgeComponent = () => {
+    switch (paymentNoticeStatus) {
+      case "default":
+        return (
+          <H6
+            accessibilityLabel={getAccessibleAmountText(paymentNoticeAmount)}
+            color={isExperimental ? "blueIO-500" : "blue"}
+          >
+            {paymentNoticeAmount}
+          </H6>
+        );
+      case "payed":
+        return <Badge variant="success" text={badgeText} />;
+      case "error":
+        return <Badge variant="error" text={badgeText} />;
+      case "expired":
+        return <Badge variant="default" text={badgeText} />;
+      case "revoked":
+        return <Badge variant="default" text={badgeText} />;
+      case "canceled":
+        return <Badge variant="default" text={badgeText} />;
+    }
+  };
+
+  return (
+    <>
+      <View style={{ flexGrow: 1, flexShrink: 1 }}>
+        {title && (
+          <LabelSmall numberOfLines={1} weight="Regular" color="bluegrey">
+            {title}
+          </LabelSmall>
+        )}
+        <LabelSmall
+          weight="SemiBold"
+          font={isExperimental ? "ReadexPro" : "TitilliumWeb"}
+          color={isExperimental ? "blueIO-500" : "bluegrey"}
+        >
+          {subtitle}
+        </LabelSmall>
+      </View>
+      <View style={[styles.rightSection, { flexShrink: 1 }]}>
+        <AmountOrBadgeComponent />
+        <Icon
+          name="chevronRightListItem"
+          color={isExperimental ? "blueIO-500" : "blue"}
+          size={IOListItemVisualParams.chevronSize}
+        />
+      </View>
+    </>
+  );
+};
+
+/**
+ * The `ModulePaymentNotice` component is a custom button component with an extended outline style.
+ * It provides an animated scaling effect when pressed.
+ *
+ * @param {boolean} isLoading - If true, displays a skeleton loading component.
+ * @param {function} onPress - The function to be executed when the item is pressed.
+ * @param {string} title - The title text to display.
+ * @param {string} subtitle - The subtitle text to display.
+ * @param {string} testID - The test ID for testing purposes.
+ * @param {string} paymentNoticeAmount - The payment notice amount to display.
+ * @param {string} paymentNoticeStatus - The status of the payment notice.
+ */
+export const ModulePaymentNotice = ({
+  isLoading = false,
+  testID,
+  accessibilityLabel,
+  onPress,
+  ...rest
+}: Props) => {
+  const isPressed: Animated.SharedValue<number> = useSharedValue(0);
+
+  // Scaling transformation applied when the button is pressed
+  const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
+
+  const scaleTraversed = useDerivedValue(() =>
+    withSpring(isPressed.value, IOSpringValues.button)
+  );
+
+  // Interpolate animation values from `isPressed` values
+  const animatedStyle = useAnimatedStyle(() => {
+    const scale = interpolate(
+      scaleTraversed.value,
+      [0, 1],
+      [1, animationScaleValue],
+      Extrapolate.CLAMP
+    );
+
+    return {
+      transform: [{ scale }]
+    };
+  });
+
+  const onPressIn = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 1;
+  }, [isPressed]);
+
+  const onPressOut = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 0;
+  }, [isPressed]);
+
+  if (isLoading) {
+    return <SkeletonComponent />;
+  }
+
+  return (
+    <Pressable
+      testID={testID}
+      onPress={onPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      accessible={true}
+      accessibilityRole={"button"}
+      accessibilityLabel={accessibilityLabel}
+    >
+      <Animated.View style={[styles.button, animatedStyle]}>
+        <ModulePaymentNoticeContent {...rest} />
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+const SkeletonComponent = () => (
+  <View style={styles.button} accessible={false}>
+    <View style={IOStyles.flex}>
+      <Placeholder.Box animate="fade" radius={8} width={179} height={16} />
+      <VSpacer size={4} />
+      <Placeholder.Box animate="fade" radius={8} width={121} height={13} />
+    </View>
+    <View style={{ marginLeft: IOListItemVisualParams.iconMargin }}>
+      <Placeholder.Box animate="fade" radius={8} width={62} height={16} />
+    </View>
+  </View>
+);

package/src/components/modules/index.tsx

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

package/src/components/pictograms/Pictogram.tsx

@@ -1,6 +1,11 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { ColorValue } from "react-native";
-import { IOColors } from "../../core/IOColors";
+import {
+  IOColors,
+  IOThemeDark,
+  IOThemeLight,
+  useIOTheme
+} from "../../core/IOColors";
 
 import PictogramMessages from "./svg/PictogramMessages";
 import PictogramAbacus from "./svg/PictogramAbacus";
@@ -10,6 +15,7 @@ import PictogramAttention from "./svg/PictogramAttention";
 import PictogramBaloons from "./svg/PictogramBaloons";
 import PictogramBeerMug from "./svg/PictogramBeerMug";
 import PictogramCameraRequest from "./svg/PictogramCameraRequest";
+import PictogramCameraDenied from "./svg/PictogramCameraDenied";
 import PictogramCompleted from "./svg/PictogramCompleted";
 import PictogramEmailToValidate from "./svg/PictogramEmailToValidate";
 import PictogramEmailValidation from "./svg/PictogramEmailValidation";
@@ -69,6 +75,8 @@ import PictogramBleedFeedback from "./svg/PictogramBleedFeedback";
 import PictogramBleedSecurity from "./svg/PictogramBleedSecurity";
 import PictogramBleedFeature from "./svg/PictogramBleedFeature";
 import PictogramBleedCie from "./svg/PictogramBleedCie";
+import PictogramBleedCameraRequest from "./svg/PictogramBleedCameraRequest";
+import PictogramBleedCameraDenied from "./svg/PictogramBleedCameraDenied";
 
 export const IOPictograms = {
   // Start legacy pictograms //
@@ -110,6 +118,7 @@ export const IOPictograms = {
   umbrellaNew: PictogramUmbrellaNew,
   feedback: PictogramFeedback,
   cameraRequest: PictogramCameraRequest,
+  cameraDenied: PictogramCameraDenied,
   success: PictogramSuccess,
   fatalError: PictogramFatalError,
   help: PictogramHelp,
@@ -137,27 +146,68 @@ export const IOPictograms = {
 };
 
 export type IOPictograms = keyof typeof IOPictograms;
-export type IOPictogramSizeScale = 48 | 64 | 72 | 80 | 120 | 240;
+export type IOPictogramSizeScale = 48 | 64 | 72 | 80 | 120 | 180;
 
 type IOPictogramsProps = {
   name: IOPictograms;
   color?: IOColors;
+  /* Not too happy about the API choice,
+  but at least we have the same <StatusBar …>
+  component props. */
+  pictogramStyle?: "default" | "light-content" | "dark-content";
   size?: IOPictogramSizeScale | "100%";
 };
 
 export type SVGPictogramProps = {
   size: IOPictogramSizeScale | "100%";
   color: ColorValue;
+  colorValues: Record<string, ColorValue>;
+};
+
+type PictogramPalette = {
+  hands: ColorValue;
+  main: ColorValue;
+  secondary: ColorValue;
 };
 
 export const Pictogram = ({
   name,
   color = "aqua",
+  pictogramStyle = "default",
   size = 120,
   ...props
 }: IOPictogramsProps) => {
   const PictogramElement = IOPictograms[name];
-  return <PictogramElement {...props} size={size} color={IOColors[color]} />;
+  const theme = useIOTheme();
+
+  const themeObj = useMemo(() => {
+    switch (pictogramStyle) {
+      case "dark-content":
+        return IOThemeLight;
+      case "light-content":
+        return IOThemeDark;
+      case "default":
+        return theme;
+    }
+  }, [pictogramStyle, theme]);
+
+  const colorValues: PictogramPalette = useMemo(
+    () => ({
+      hands: IOColors[themeObj["pictogram-hands"]],
+      main: IOColors[themeObj["pictogram-tint-main"]],
+      secondary: IOColors[themeObj["pictogram-tint-secondary"]]
+    }),
+    [themeObj]
+  );
+
+  return (
+    <PictogramElement
+      {...props}
+      size={size}
+      color={IOColors[color]}
+      colorValues={colorValues}
+    />
+  );
 };
 
 /*
@@ -169,7 +219,15 @@ export const Pictogram = ({
 */
 
 export type IOPictogramsBleed = Extract<
-  "charity" | "help" | "feedback" | "itWallet" | "security" | "feature" | "cie",
+  | "charity"
+  | "help"
+  | "feedback"
+  | "itWallet"
+  | "security"
+  | "feature"
+  | "cie"
+  | "cameraRequest"
+  | "cameraDenied",
   IOPictograms
 >;
 
@@ -182,17 +240,50 @@ export const IOPictogramsBleed: {
   itWallet: PictogramBleedITWallet,
   security: PictogramBleedSecurity,
   feature: PictogramBleedFeature,
-  cie: PictogramBleedCie
+  cie: PictogramBleedCie,
+  cameraRequest: PictogramBleedCameraRequest,
+  cameraDenied: PictogramBleedCameraDenied
 };
 
 export const PictogramBleed = ({
   name,
   color = "aqua",
   size = 80,
+  pictogramStyle = "default",
   ...props
 }: IOPictogramsProps) => {
   const PictogramElement = IOPictogramsBleed[name as IOPictogramsBleed];
-  return <PictogramElement {...props} size={size} color={IOColors[color]} />;
+
+  const theme = useIOTheme();
+
+  const themeObj = useMemo(() => {
+    switch (pictogramStyle) {
+      case "dark-content":
+        return IOThemeLight;
+      case "light-content":
+        return IOThemeDark;
+      case "default":
+        return theme;
+    }
+  }, [pictogramStyle, theme]);
+
+  const colorValues: PictogramPalette = useMemo(
+    () => ({
+      hands: IOColors[themeObj["pictogram-hands"]],
+      main: IOColors[themeObj["pictogram-tint-main"]],
+      secondary: IOColors[themeObj["pictogram-tint-secondary"]]
+    }),
+    [themeObj]
+  );
+
+  return (
+    <PictogramElement
+      {...props}
+      size={size}
+      color={IOColors[color]}
+      colorValues={colorValues}
+    />
+  );
 };
 
 /* Object Pictograms */

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

@@ -4,41 +4,41 @@ import { SVGPictogramProps } from "../Pictogram";
 
 const PictogramAccessDenied = ({
   size,
-  color,
+  colorValues,
   ...props
 }: SVGPictogramProps) => (
-  <Svg fill="none" width={size} height={size} viewBox="0 0 240 240" {...props}>
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="m180.1 169.56-71.27-26.27c-4.97-1.83-9.8897-2.7-14.6397-2.57-9.17.24-15.28 3.56-18.15 9.87-2.07 4.56-1.33 7.86 2.27 10.07 5.54 3.41 14.62 2.48 16.23.48.88-1.09 2.26-3.77 1.9-6.91-.32-2.75-1.94-5.27-4.79-7.5l2.46-3.16c3.74 2.91 5.86 6.33 6.3097 10.19.49 4.16-1.1797 7.92-2.7497 9.88-3.35 4.17-14.98 4.4-21.45.42-5.31-3.27-6.7-8.78-3.81-15.14 3.5-7.71 11-11.93 21.68-12.21 5.24-.13 10.6797.81 16.1297 2.82l71.27 26.27-1.38 3.75-.01.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="m100.01 154.85-2.2297-3.32c.25-.17 6.0697-4.03 11.8297-3.77l-.19 4c-4.43-.22-9.36 3.06-9.41 3.1v-.01ZM78.7802 184.37c-4.15-2.1-6.77-5.1-7.8-8.92-1.97-7.36 2.91-14.96 3.12-15.28l3.35 2.19-1.67-1.09 1.68 1.09c-.04.06-4.12 6.45-2.61 12.08.72 2.66 2.65 4.8 5.73 6.37l-1.81 3.57.01-.01ZM112.46 190.12c-6.57-3.8-8.86-8.6-9.62-11.96-.83-3.65-.1-6.37-.02-6.67l3.84 1.11-1.92-.55 1.93.54c-.09.34-2.13 8.33 7.79 14.08l-2 3.46v-.01ZM93.8103 182.84l-3.33-2.22c2.4-3.6 3.28-6.79 2.61-9.46-.78-3.13-3.53-4.63-3.56-4.65l1.85-3.55c.18.09 4.31 2.28 5.57 7.15.99 3.83-.07 8.12-3.14 12.73Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M90.4501 199.23c-1.1 0-2.18-.17-3.2-.52-3.02-1.02-8.54-3.95-11.61-12.06-.51-1.34-.35-2.79.44-4 .78-1.2 2.08-1.96 3.5-2.05l18.64-1.12h.09c1.8799.06 3.6399.94 4.8299 2.4 1.22 1.5 1.73 3.46 1.4 5.38-1.02 5.86-5.0199 9.99-11.2699 11.61-.94.24-1.88.37-2.81.37l-.01-.01Zm7.8-15.75-18.44 1.11c-.21.01-.33.15-.38.23-.06.09-.12.24-.05.41 2.36 6.25 6.28 8.72 9.15 9.69 1.14.38 2.42.41 3.73.07 4.78-1.24 7.58-4.08 8.3399-8.43.13-.78-.07-1.57-.56-2.17-.4499-.55-1.0799-.88-1.7799-.92l-.01.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M165.53 226.17c-32.54-15.26-72.9396-27.2-73.3396-27.32l1.13-3.84c.41.12 41.0896 12.15 73.9096 27.54l-1.7 3.62Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M100.56 220c-2.7599 0-4.9999-2.24-4.9999-5v-16.83l.72-.32c4.2499-1.87 7.3699-5.63 8.4299-10.15l.84-1.22v28.53c0 2.76-2.24 5-5 5l.01-.01ZM105.56 148.21l-5.6299 2.54-4.37-6.07v-38.51h9.9999v42.04Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M100.02 111.32c23.207 0 42.02-22.0097 42.02-49.16 0-27.1503-18.813-49.16-42.02-49.16C76.813 13 58 35.0097 58 62.16c0 27.1503 18.813 49.16 42.02 49.16Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M118.13 92.36c-.5 0-.98-.25-1.27-.7L81.73 36.21c-.44-.7-.24-1.63.46-2.07.7-.44 1.63-.23 2.07.46l35.13 55.45c.44.7.24 1.63-.46 2.07-.25.16-.53.23-.8.23v.01Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
     <Path
       d="M82.9998 92.36c-.27 0-.55-.08-.8-.23-.7-.44-.91-1.37-.46-2.07L116.86 34.6c.44-.7 1.37-.91 2.07-.46.7.45.91 1.37.46 2.07L84.2598 91.66c-.29.45-.77.7-1.27.7h.01Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );

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

@@ -2,27 +2,31 @@ import React from "react";
 import Svg, { Path } from "react-native-svg";
 import { SVGPictogramProps } from "../Pictogram";
 
-const PictogramAttention = ({ size, color, ...props }: SVGPictogramProps) => (
+const PictogramAttention = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
   <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
     <Path
       d="m137.89 157.04-3.23-2.71-2.03-3.21-1.92-5.21 2.32-5.88 5.93-4.45 7.74-3.5 6.14.47 1.61-1.4 3.16-3.58 3.66-1.45 5.49.29 1.79-3.11-.48-2.25-1.99-6.51-1.24-7.65-.7-3.38 1.53-7.15 1.73-2.81 4.81-1.45 3.81.55 5.21 8.7 1.11-1.92c2.19-3.79 2.19-8.47 0-12.26l-30.62-53.04c-2.19-3.79-6.24-6.13-10.62-6.13H79.8701c-4.38 0-8.43 2.34-10.62 6.13l-30.61 53.03c-2.19 3.79-2.19 8.47 0 12.26l30.62 53.03c2.19 3.79 6.24 6.13 10.62 6.13H139l-1.1-1.54h-.01ZM146.15 158.58h2.04l.25-.45-2.29.45Z"
-      fill="#AAEEEF"
+      fill={colorValues.main}
     />
     <Path
       d="M139.17 211.62c-2.17-36.04 8.61-64.12 9.07-65.29l3.73 1.45c-.11.28-10.92 28.48-8.8 63.6l-3.99.24h-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M141.88 159.04c-1.89 0-3.99-.32-5.94-1.31-2.79-1.43-4.71-3.93-5.7-7.42-1.9-6.71 3.38-13.54 9.46-17.33 6.97-4.34 14.18-4.71 18.38-.95 8.62 7.74 7.4 16.64 7.34 17.02l-3.96-.59c.04-.28.9-7.2-6.06-13.45-3.23-2.9-9.15-1.4-13.59 1.36-4.65 2.9-9.05 8.16-7.72 12.85.68 2.41 1.88 4.02 3.66 4.94 3.7 1.91 8.72.15 8.77.13l1.36 3.76c-.17.06-2.78.99-6 .99ZM188.26 209.3c-2.26-18.75-1.7-30.7-1.2-41.23.22-4.76.44-9.26.37-14.02-.2-15.04-3.78-31.52-3.81-31.69l-.02-.11c-3.42-21.01-7.81-25.83-10.11-26.83-.68-.29-1.77-.56-3.47.58-2.17 1.45-3.47 4.14-3.38 7.02.66 22.39 14.42 38.36 14.55 38.52l-3.01 2.64c-.61-.69-14.84-17.17-15.54-41.04-.13-4.24 1.85-8.25 5.16-10.46 2.43-1.62 4.95-1.93 7.29-.92 5.5 2.39 9.57 12.14 12.46 29.8.27 1.24 3.69 17.26 3.89 32.44.06 4.87-.15 9.43-.38 14.26-.49 10.38-1.04 22.15 1.17 40.57l-3.97.48v-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="m190.41 178.07-3.58-1.79c10.31-20.61 14.77-39.24 12.34-43.07-.37-.57-.81-.88-1.46-.99-2.34-.4-6.31 1.88-8.27 3.42l-2.47-3.15c.66-.52 6.57-5.04 11.4-4.21 1.75.3 3.19 1.26 4.16 2.78 4.67 7.33-4.7 32.13-12.13 47l.01.01ZM156.68 132.7l-3.89-.92c.04-.18 1.07-4.42 5.23-6.75 3.32-1.87 7.56-1.97 12.6-.31l-1.25 3.8c-3.9-1.28-7.05-1.29-9.34-.03-2.62 1.44-3.33 4.19-3.34 4.22l-.01-.01Z"
-      fill="#0B3EE3"
+      fill={colorValues.hands}
     />
     <Path
       d="M113.19 106.19c-.83 0-1.5-.67-1.5-1.5V58.06c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v46.63c0 .83-.67 1.5-1.5 1.5ZM113.35 125.55c2.563 0 4.64-2.077 4.64-4.64 0-2.563-2.077-4.64-4.64-4.64-2.563 0-4.64 2.077-4.64 4.64 0 2.563 2.077 4.64 4.64 4.64Z"
-      fill="#00C5CA"
+      fill={colorValues.secondary}
     />
   </Svg>
 );