@pagopa/io-app-design-system 1.0.0-9 → 1.1.1

package/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap

@@ -461,3 +461,373 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
   </View>
 </View>
 `;
+
+exports[`Test Buttons Components IconButton Snapshot 1`] = `
+<View
+  accessibilityLabel="accessibilityLabel"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  hitSlop={8}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignSelf": "flex-start",
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "height": 24,
+          "width": 24,
+        },
+        {
+          "transform": [
+            {
+              "scale": undefined,
+            },
+          ],
+        },
+      ]
+    }
+  >
+    <RNSVGSvgView
+      accessibilityElementsHidden={true}
+      accessibilityLabel=""
+      accessible={false}
+      align="xMidYMid"
+      animatedProps={
+        {
+          "color": undefined,
+        }
+      }
+      bbHeight={24}
+      bbWidth={24}
+      color={4278927075}
+      focusable={false}
+      height={24}
+      importantForAccessibility="no-hide-descendants"
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "color": "#0B3EE3",
+          },
+          {
+            "flex": 0,
+            "height": 24,
+            "width": 24,
+          },
+        ]
+      }
+      tintColor={4278927075}
+      vbHeight={24}
+      vbWidth={24}
+      width={24}
+    >
+      <RNSVGGroup>
+        <RNSVGPath
+          clipRule={0}
+          d="M12 24c6.629 0 12-5.371 12-12S18.629 0 12 0C5.375 0 0 5.371 0 12s5.375 12 12 12Zm.033-10.97c-.997 0-1.818-.336-2.463-1.014-.646-.674-.968-1.51-.968-2.507 0-1.001.322-1.83.964-2.492.64-.662 1.458-.992 2.458-.992.997 0 1.81.334 2.435 1.017.625.678.94 1.51.94 2.511 0 .993-.315 1.822-.94 2.484-.625.657-1.43.992-2.426.992Zm-3.431 4.905c0-1.001.322-1.83.96-2.492.64-.662 1.458-.992 2.467-.992.996 0 1.809.335 2.43 1.017.625.682.94 1.515.94 2.512l-6.797-.045Z"
+          fill={
+            [
+              2,
+            ]
+          }
+          fillRule={0}
+          propList={
+            [
+              "fill",
+              "fillRule",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;
+
+exports[`Test Buttons Components IconButtonContained Snapshot 1`] = `
+<View
+  accessibilityLabel="accessibilityLabel"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignSelf": "flex-start",
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "elevation": 0,
+          "justifyContent": "center",
+        },
+        {
+          "borderRadius": 48,
+          "height": 48,
+          "width": 48,
+        },
+        {
+          "backgroundColor": undefined,
+          "transform": [
+            {
+              "scale": undefined,
+            },
+          ],
+        },
+      ]
+    }
+  >
+    <RNSVGSvgView
+      accessibilityElementsHidden={true}
+      accessibilityLabel=""
+      accessible={false}
+      align="xMidYMid"
+      animatedProps={
+        {
+          "color": undefined,
+        }
+      }
+      bbHeight={24}
+      bbWidth={24}
+      color={4278927075}
+      focusable={false}
+      height={24}
+      importantForAccessibility="no-hide-descendants"
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "color": "#0B3EE3",
+          },
+          {
+            "flex": 0,
+            "height": 24,
+            "width": 24,
+          },
+        ]
+      }
+      tintColor={4278927075}
+      vbHeight={24}
+      vbWidth={24}
+      width={24}
+    >
+      <RNSVGGroup>
+        <RNSVGPath
+          clipRule={0}
+          d="M12 24c6.629 0 12-5.371 12-12S18.629 0 12 0C5.375 0 0 5.371 0 12s5.375 12 12 12Zm.033-10.97c-.997 0-1.818-.336-2.463-1.014-.646-.674-.968-1.51-.968-2.507 0-1.001.322-1.83.964-2.492.64-.662 1.458-.992 2.458-.992.997 0 1.81.334 2.435 1.017.625.678.94 1.51.94 2.511 0 .993-.315 1.822-.94 2.484-.625.657-1.43.992-2.426.992Zm-3.431 4.905c0-1.001.322-1.83.96-2.492.64-.662 1.458-.992 2.467-.992.996 0 1.809.335 2.43 1.017.625.682.94 1.515.94 2.512l-6.797-.045Z"
+          fill={
+            [
+              2,
+            ]
+          }
+          fillRule={0}
+          propList={
+            [
+              "fill",
+              "fillRule",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;
+
+exports[`Test Buttons Components IconButtonSolid Snapshot 1`] = `
+<View
+  accessibilityLabel="accessibilityLabel"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    {
+      "alignSelf": "flex-start",
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "elevation": 0,
+          "justifyContent": "center",
+        },
+        {
+          "borderRadius": 56,
+          "height": 56,
+          "width": 56,
+        },
+        {
+          "backgroundColor": undefined,
+          "transform": [
+            {
+              "scale": undefined,
+            },
+          ],
+        },
+        {
+          "backgroundColor": "#0B3EE3",
+        },
+      ]
+    }
+  >
+    <RNSVGSvgView
+      accessibilityElementsHidden={true}
+      accessibilityLabel=""
+      accessible={false}
+      align="xMidYMid"
+      bbHeight={24}
+      bbWidth={24}
+      color={4294967295}
+      focusable={false}
+      height={24}
+      importantForAccessibility="no-hide-descendants"
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        [
+          {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          {
+            "color": "#FFFFFF",
+          },
+          {
+            "flex": 0,
+            "height": 24,
+            "width": 24,
+          },
+        ]
+      }
+      tintColor={4294967295}
+      vbHeight={24}
+      vbWidth={24}
+      width={24}
+    >
+      <RNSVGGroup>
+        <RNSVGPath
+          clipRule={0}
+          d="M12 24c6.629 0 12-5.371 12-12S18.629 0 12 0C5.375 0 0 5.371 0 12s5.375 12 12 12Zm.033-10.97c-.997 0-1.818-.336-2.463-1.014-.646-.674-.968-1.51-.968-2.507 0-1.001.322-1.83.964-2.492.64-.662 1.458-.992 2.458-.992.997 0 1.81.334 2.435 1.017.625.678.94 1.51.94 2.511 0 .993-.315 1.822-.94 2.484-.625.657-1.43.992-2.426.992Zm-3.431 4.905c0-1.001.322-1.83.96-2.492.64-.662 1.458-.992 2.467-.992.996 0 1.809.335 2.43 1.017.625.682.94 1.515.94 2.512l-6.797-.045Z"
+          fill={
+            [
+              2,
+            ]
+          }
+          fillRule={0}
+          propList={
+            [
+              "fill",
+              "fillRule",
+            ]
+          }
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+  </View>
+</View>
+`;

package/src/components/buttons/__test__/button.test.tsx

@@ -5,6 +5,9 @@ import ButtonExtendedOutline from "../ButtonExtendedOutline";
 import ButtonLink from "../ButtonLink";
 import ButtonOutline from "../ButtonOutline";
 import ButtonSolid from "../ButtonSolid";
+import IconButton from "../IconButton";
+import IconButtonContained from "../IconButtonContained";
+import IconButtonSolid from "../IconButtonSolid";
 
 const onButtonPress = () => {
   Alert.alert("Alert", "Action triggered");
@@ -12,22 +15,74 @@ const onButtonPress = () => {
 
 describe("Test Buttons Components", () => {
   it("ButtonSolid Snapshot", () => {
-    const buttonSolid = TestRenderer.create(<ButtonSolid label={"label"} accessibilityLabel={"accessibilityLabel"} onPress={onButtonPress}></ButtonSolid>).toJSON();
+    const buttonSolid = TestRenderer.create(
+      <ButtonSolid
+        label={"label"}
+        accessibilityLabel={"accessibilityLabel"}
+        onPress={onButtonPress}
+      ></ButtonSolid>
+    ).toJSON();
     expect(buttonSolid).toMatchSnapshot();
   });
 
   it("ButtonLink Snapshot", () => {
-    const buttonLink = TestRenderer.create(<ButtonLink label={"label"} onPress={onButtonPress} ></ButtonLink>).toJSON();
+    const buttonLink = TestRenderer.create(
+      <ButtonLink label={"label"} onPress={onButtonPress}></ButtonLink>
+    ).toJSON();
     expect(buttonLink).toMatchSnapshot();
   });
 
   it("ButtonOutline Snapshot", () => {
-    const buttonOutline = TestRenderer.create(<ButtonOutline label={"label"} accessibilityLabel={"accessibilityLabel"} onPress={onButtonPress} ></ButtonOutline>).toJSON();
+    const buttonOutline = TestRenderer.create(
+      <ButtonOutline
+        label={"label"}
+        accessibilityLabel={"accessibilityLabel"}
+        onPress={onButtonPress}
+      ></ButtonOutline>
+    ).toJSON();
     expect(buttonOutline).toMatchSnapshot();
   });
 
   it("ButtonExtendedOutline Snapshot", () => {
-    const buttonExtendedOutline = TestRenderer.create(<ButtonExtendedOutline label={"label"} onPress={onButtonPress}></ButtonExtendedOutline>).toJSON();
+    const buttonExtendedOutline = TestRenderer.create(
+      <ButtonExtendedOutline
+        label={"label"}
+        onPress={onButtonPress}
+      ></ButtonExtendedOutline>
+    ).toJSON();
     expect(buttonExtendedOutline).toMatchSnapshot();
   });
+
+  it("IconButtonSolid Snapshot", () => {
+    const iconButtonSolid = TestRenderer.create(
+      <IconButtonSolid
+        onPress={onButtonPress}
+        icon={"spid"}
+        accessibilityLabel={"accessibilityLabel"}
+      ></IconButtonSolid>
+    ).toJSON();
+    expect(iconButtonSolid).toMatchSnapshot();
+  });
+
+  it("IconButton Snapshot", () => {
+    const iconButton = TestRenderer.create(
+      <IconButton
+        onPress={onButtonPress}
+        icon={"spid"}
+        accessibilityLabel={"accessibilityLabel"}
+      ></IconButton>
+    ).toJSON();
+    expect(iconButton).toMatchSnapshot();
+  });
+
+  it("IconButtonContained Snapshot", () => {
+    const iconButtonContained = TestRenderer.create(
+      <IconButtonContained
+        onPress={onButtonPress}
+        icon={"spid"}
+        accessibilityLabel={"accessibilityLabel"}
+      ></IconButtonContained>
+    ).toJSON();
+    expect(iconButtonContained).toMatchSnapshot();
+  });
 });

package/src/components/buttons/index.tsx

@@ -1,5 +1,7 @@
-export * from "./ButtonSolid";
+export * from "./ButtonExtendedOutline";
 export * from "./ButtonLink";
 export * from "./ButtonOutline";
-export * from "./ButtonExtendedOutline";
-export * from "./IconButton";
+export * from "./ButtonSolid";
+export * from "./IconButtonContained";
+export * from "./IconButtonSolid";
+export * from "./IconButton";

package/src/components/checkbox/AnimatedCheckbox.tsx

@@ -1,16 +1,16 @@
 import React, { useEffect } from "react";
-import { StyleSheet, View, Pressable, PressableProps } from "react-native";
+import { Pressable, PressableProps, StyleSheet, View } from "react-native";
 import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
+  Easing,
   interpolate,
+  useAnimatedStyle,
+  useSharedValue,
   withSpring,
-  withTiming,
-  Easing
+  withTiming
 } from "react-native-reanimated";
-import { IOSelectionTickVisualParams } from "../../core/IOStyles";
 import { IOSpringValues } from "../../core/IOAnimations";
 import { IOColors } from "../../core/IOColors";
+import { IOSelectionTickVisualParams } from "../../core/IOStyles";
 import { AnimatedTick } from "../common/AnimatedTick";
 
 type Props = {
@@ -85,7 +85,6 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => {
       onPress={onPress}
       style={styles.checkBoxWrapper}
     >
-      {/* ◀ REMOVE_LEGACY_COMPONENT: Remove the following conditions */}
       <View
         style={[
           styles.checkboxBorder,
@@ -105,7 +104,6 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => {
           animatedCheckboxSquare
         ]}
       />
-      {/* REMOVE_LEGACY_COMPONENT: End ▶ */}
       {isChecked && (
         <AnimatedTick
           progress={tickAnimationProgress}

package/src/components/icons/Icon.tsx

@@ -38,7 +38,6 @@ import IconGiacenza from "./svg/IconGiacenza";
 import IconChat from "./svg/IconChat";
 import IconAgreement from "./svg/IconAgreement";
 import IconSave from "./svg/IconSave";
-import IconCompleted from "./svg/IconCompleted";
 import IconSuccess from "./svg/IconSuccess";
 import IconOk from "./svg/IconOk";
 import IconFiscalCodeIndividual from "./svg/IconFiscalCodeIndividual";
@@ -132,13 +131,19 @@ import IconProductIOAppBlueBg from "./svg/IconProductIOAppBlueBg";
 import IconProductPagoPA from "./svg/IconProductPagoPA";
 import IconWebsite from "./svg/IconWebsite";
 import IconSecurity from "./svg/IconSecurity";
-import LegIconSearch from "./svg/LegIconSearch";
-import LegIconChevronLeft from "./svg/LegIconChevronLeft";
 import LegIconRadioOn from "./svg/LegIconRadioOn";
 import LegIconRadioOff from "./svg/LegIconRadioOff";
 import LegIconCheckOn from "./svg/LegIconCheckOn";
 import LegIconCheckOff from "./svg/LegIconCheckOff";
 import IconCloseMedium from "./svg/IconCloseMedium";
+import IconCheckTick from "./svg/IconCheckTick";
+import IconCheckTickBig from "./svg/IconCheckTickBig";
+import IconMerchant from "./svg/IconMerchant";
+import IconSystemSettingsAndroid from "./svg/IconSystemSettingsAndroid";
+import IconSystemSettingsiOS from "./svg/IconSystemSettingsiOS";
+import IconSystemToggleInstructions from "./svg/IconSystemToggleInstructions";
+import IconSystemAppsAndroid from "./svg/IconSystemAppsAndroid";
+import IconSystemNotificationsInstructions from "./svg/IconSystemNotificationsInstructions";
 
 export const IOIcons = {
   spid: IconSpid,
@@ -182,7 +187,6 @@ export const IOIcons = {
   docAttachPDF: IconDocumentAttachmentPDF,
   attachment: IconAttachment,
   add: IconAdd,
-  completed: IconCompleted,
   success: IconSuccess,
   ok: IconOk,
   fiscalCodeIndividual: IconFiscalCodeIndividual,
@@ -229,15 +233,13 @@ export const IOIcons = {
   gallery: IconGallery,
   externalLink: IconExternalLink,
   cancel: IconCancel,
-  help: IconQuestion /* io-question */,
+  help: IconQuestion,
   search: IconSearch /* io-search */,
-  legSearch: LegIconSearch,
   chevronRight: IconChevronRight,
   chevronLeft: IconChevronLeft,
   chevronBottom: IconChevronBottom,
   chevronTop: IconChevronTop,
   chevronRightListItem: IconChevronRightListItem,
-  legChevronLeft: LegIconChevronLeft,
   closeLarge: IconCloseLarge /* io-close */,
   closeMedium: IconCloseMedium,
   closeSmall: IconCloseSmall,
@@ -276,7 +278,15 @@ export const IOIcons = {
   categSustainability: IconCategSustainability,
   productIOApp: IconProductIOApp,
   productPagoPA: IconProductPagoPA /* io-pagopa */,
-  productIOAppBlueBg: IconProductIOAppBlueBg
+  productIOAppBlueBg: IconProductIOAppBlueBg,
+  checkTick: IconCheckTick,
+  checkTickBig: IconCheckTickBig,
+  merchant: IconMerchant,
+  systemSettingsAndroid: IconSystemSettingsAndroid,
+  systemSettingsiOS: IconSystemSettingsiOS,
+  systemToggleInstructions: IconSystemToggleInstructions,
+  systemAppsAndroid: IconSystemAppsAndroid,
+  systemNotificationsInstructions: IconSystemNotificationsInstructions
 } as const;
 
 export type IOIcons = keyof typeof IOIcons;
@@ -471,3 +481,22 @@ export const IOProductIcons = {
 } as const;
 
 export type IOProductIcons = keyof typeof IOProductIcons;
+
+/* System */
+const {
+  systemSettingsAndroid,
+  systemSettingsiOS,
+  systemToggleInstructions,
+  systemAppsAndroid,
+  systemNotificationsInstructions
+} = IOIcons;
+
+export const IOSystemIcons = {
+  systemSettingsAndroid,
+  systemSettingsiOS,
+  systemToggleInstructions,
+  systemAppsAndroid,
+  systemNotificationsInstructions
+} as const;
+
+export type IOSystemIcons = keyof typeof IOSystemIcons;

package/src/components/icons/index.tsx

@@ -1,2 +1 @@
-export * from "./Icon";
-export { Icon, AnimatedIcon } from "../icons/Icon";
+export * from "./Icon";

package/src/components/icons/svg/IconCheckTick.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconCheckTick = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M17.7071 9.29289C18.0976 9.68342 18.0976 10.3166 17.7071 10.7071L11.4142 17C10.6332 17.781 9.36684 17.7811 8.58579 17L5.29289 13.7071C4.90237 13.3166 4.90237 12.6834 5.29289 12.2929C5.68342 11.9024 6.31658 11.9024 6.70711 12.2929L10 15.5858L16.2929 9.29289C16.6834 8.90237 17.3166 8.90237 17.7071 9.29289Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconCheckTick;

package/src/components/icons/svg/{IconCompleted.tsx → IconCheckTickBig.tsx}

@@ -2,7 +2,7 @@ import React from "react";
 import { Svg, Path } from "react-native-svg";
 import { SVGIconProps } from "../Icon";
 
-const IconCompleted = ({ size, style, ...props }: SVGIconProps) => (
+const IconCheckTickBig = ({ size, style, ...props }: SVGIconProps) => (
   <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
     <Path
       fillRule="evenodd"
@@ -13,4 +13,4 @@ const IconCompleted = ({ size, style, ...props }: SVGIconProps) => (
   </Svg>
 );
 
-export default IconCompleted;
+export default IconCheckTickBig;

package/src/components/icons/svg/IconMerchant.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconMerchant = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0 5V9C0 10.6602 0.776973 12.1764 2 13.0935V22H1C0.447715 22 0 22.4477 0 23C0 23.5523 0.447716 24 1 24H2V24H22V24H23C23.5523 24 24 23.5523 24 23C24 22.4477 23.5523 22 23 22H22V13.0935C23.223 12.1764 24 10.6602 24 9V5C24 2.23858 21.7614 0 19 0H5C2.23858 0 0 2.23858 0 5ZM20 13.9446C19.7697 13.9811 19.5332 14 19.2916 14C17.9025 14 16.6807 13.3699 15.8304 12.3893C15.7456 12.2914 15.5914 12.2909 15.5059 12.3883C14.6426 13.3716 13.4024 14 11.9996 14C10.597 14 9.35702 13.3718 8.49367 12.3887C8.40819 12.2914 8.25406 12.2919 8.1692 12.3897C7.31896 13.3701 6.09726 14 4.70842 14C4.46675 14 4.23027 13.9811 4 13.9446V22H8V18C8 16.8954 8.89543 16 10 16H14C15.1046 16 16 16.8954 16 18V22H20V13.9446ZM4.70842 12C3.28253 12 2 10.7295 2 9V5C2 3.34315 3.34315 2 5 2H7.30078V9.87156C6.95182 11.148 5.88415 12 4.70842 12ZM9.30078 9.69118C9.30852 9.71511 9.31542 9.7395 9.32144 9.76433C9.64273 11.0892 10.7528 12 11.9996 12C13.2464 12 14.3565 11.0892 14.6778 9.76433C14.684 9.73866 14.6912 9.71347 14.6992 9.68878V2H9.30078V9.69118ZM19.2916 12C18.1159 12 17.0482 11.148 16.6992 9.87156V2H19C20.6569 2 22 3.34315 22 5V9C22 10.7295 20.7175 12 19.2916 12ZM14 18V22H10V18H14Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconMerchant;

package/src/components/icons/svg/IconSystemAppsAndroid.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Svg, Rect, G, Circle } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconSystemAppsAndroid = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Rect width={size} height={size} fill="#F79E1B" rx="8" />
+    <G fill="#fff">
+      <Circle cx="8" cy="8" r="3" />
+      <Circle cx="8" cy="16" r="3" />
+      <Circle cx="16" cy="16" r="3" />
+      <Circle cx="16" cy="8" r="3" />
+    </G>
+  </Svg>
+);
+
+export default IconSystemAppsAndroid;