@pagopa/io-app-design-system 1.17.2 → 1.19.0

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { Alert } from "react-native";
 import * as TestRenderer from "react-test-renderer";
+import { TestRendererWithExperimentalEnabledContextProvider } from "../../../utils/testing";
 import ButtonExtendedOutline from "../ButtonExtendedOutline";
 import ButtonLink from "../ButtonLink";
 import ButtonOutline from "../ButtonOutline";
@@ -8,7 +9,6 @@ import ButtonSolid from "../ButtonSolid";
 import IconButton from "../IconButton";
 import IconButtonContained from "../IconButtonContained";
 import IconButtonSolid from "../IconButtonSolid";
-
 const onButtonPress = () => {
   Alert.alert("Alert", "Action triggered");
 };
@@ -86,3 +86,79 @@ describe("Test Buttons Components", () => {
     expect(iconButtonContained).toMatchSnapshot();
   });
 });
+
+describe("Test Buttons Components - Experimental Enabled", () => {
+  it("ButtonSolid Snapshot", () => {
+    const buttonSolid = TestRendererWithExperimentalEnabledContextProvider(
+      <ButtonSolid
+        label={"label"}
+        accessibilityLabel={"accessibilityLabel"}
+        onPress={onButtonPress}
+      ></ButtonSolid>
+    ).toJSON();
+    expect(buttonSolid).toMatchSnapshot();
+  });
+
+  it("ButtonLink Snapshot", () => {
+    const buttonLink = TestRendererWithExperimentalEnabledContextProvider(
+      <ButtonLink label={"label"} onPress={onButtonPress}></ButtonLink>
+    ).toJSON();
+    expect(buttonLink).toMatchSnapshot();
+  });
+
+  it("ButtonOutline Snapshot", () => {
+    const buttonOutline = TestRendererWithExperimentalEnabledContextProvider(
+      <ButtonOutline
+        label={"label"}
+        accessibilityLabel={"accessibilityLabel"}
+        onPress={onButtonPress}
+      ></ButtonOutline>
+    ).toJSON();
+    expect(buttonOutline).toMatchSnapshot();
+  });
+
+  it("ButtonExtendedOutline Snapshot", () => {
+    const buttonExtendedOutline =
+      TestRendererWithExperimentalEnabledContextProvider(
+        <ButtonExtendedOutline
+          label={"label"}
+          onPress={onButtonPress}
+        ></ButtonExtendedOutline>
+      ).toJSON();
+    expect(buttonExtendedOutline).toMatchSnapshot();
+  });
+
+  it("IconButtonSolid Snapshot", () => {
+    const iconButtonSolid = TestRendererWithExperimentalEnabledContextProvider(
+      <IconButtonSolid
+        onPress={onButtonPress}
+        icon={"spid"}
+        accessibilityLabel={"accessibilityLabel"}
+      ></IconButtonSolid>
+    ).toJSON();
+    expect(iconButtonSolid).toMatchSnapshot();
+  });
+
+  it("IconButton Snapshot", () => {
+    const iconButton = TestRendererWithExperimentalEnabledContextProvider(
+      <IconButton
+        onPress={onButtonPress}
+        icon={"spid"}
+        accessibilityLabel={"accessibilityLabel"}
+      ></IconButton>
+    ).toJSON();
+    expect(iconButton).toMatchSnapshot();
+  });
+
+  it("IconButtonContained Snapshot", () => {
+    const iconButtonContained =
+      TestRendererWithExperimentalEnabledContextProvider(
+        <IconButtonContained
+          onPress={onButtonPress}
+          icon={"spid"}
+          accessibilityLabel={"accessibilityLabel"}
+        ></IconButtonContained>
+      ).toJSON();
+    expect(iconButtonContained).toMatchSnapshot();
+  });
+});

package/src/components/checkbox/CheckboxLabel.tsx

@@ -1,10 +1,8 @@
 import * as React from "react";
 import { useState } from "react";
-import { Pressable, StyleSheet, Text, View } from "react-native";
-import { IOColors, useIOExperimentalDesign } from "../../core";
+import { Pressable, View } from "react-native";
 import { IOStyles } from "../../core/IOStyles";
 import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { HSpacer } from "../spacer/Spacer";
 import { H6 } from "../typography/H6";
 import { AnimatedCheckbox } from "./AnimatedCheckbox";
@@ -23,17 +21,6 @@ type OwnProps = Props &
   Pick<React.ComponentProps<typeof AnimatedCheckbox>, "disabled" | "checked"> &
   Pick<React.ComponentProps<typeof Pressable>, "onPress">;
 
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const styles = StyleSheet.create({
-  legacyTextValue: {
-    fontSize: 16,
-    lineHeight: 24,
-    color: IOColors.bluegreyDark,
-    flexShrink: 1,
-    ...makeFontStyleObject("SemiBold", undefined, "TitilliumWeb")
-  }
-});
-
 /**
  * A checkbox with the automatic state management that uses a {@link AnimatedCheckBox}
  * The toggleValue change when a `onPress` event is received and dispatch the `onValueChange`.
@@ -49,22 +36,6 @@ export const CheckboxLabel = ({
 }: OwnProps) => {
   const [toggleValue, setToggleValue] = useState(checked ?? false);
 
-  const { isExperimental } = useIOExperimentalDesign();
-  const checkboxLabelText = (
-    <H6 style={{ flexShrink: 1 }} color={"black"}>
-      {label}
-    </H6>
-  );
-
-  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-  const legacyCheckboxlabelText = (
-    <Text style={styles.legacyTextValue}>{label}</Text>
-  );
-
-  const checkboxLabelTextComponent = isExperimental
-    ? checkboxLabelText
-    : legacyCheckboxlabelText;
-
   const toggleCheckbox = () => {
     triggerHaptic("impactLight");
     setToggleValue(!toggleValue);
@@ -96,7 +67,9 @@ export const CheckboxLabel = ({
           <AnimatedCheckbox checked={checked ?? toggleValue} />
         </View>
         <HSpacer size={8} />
-        {checkboxLabelTextComponent}
+        <H6 style={{ flexShrink: 1 }} color={"black"}>
+          {label}
+        </H6>
       </View>
     </Pressable>
   );

package/src/components/codeInput/CodeInput.tsx

@@ -1,15 +1,10 @@
 import React, { useEffect, useMemo } from "react";
 import { StyleSheet, View } from "react-native";
-import Animated, {
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withSequence,
-  withTiming
-} from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 import { IOColors, IOStyles } from "../../core";
 import { triggerHaptic } from "../../functions";
 import { HSpacer } from "../spacer";
+import { useErrorShakeAnimation } from "../../utils/hooks/useErrorShakeAnimation";
 
 type CodeInputProps = {
   value: string;
@@ -56,12 +51,7 @@ export const CodeInput = ({
 }: CodeInputProps) => {
   const [status, setStatus] = React.useState<"default" | "error">("default");
 
-  const translate = useSharedValue(0);
-  const shakeOffset: number = 8;
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: translate.value }]
-  }));
+  const { translate, animatedStyle, shakeAnimation } = useErrorShakeAnimation();
 
   const fillColor = useMemo(
     () =>
@@ -82,25 +72,7 @@ export const CodeInput = ({
         triggerHaptic("notificationError");
 
         // eslint-disable-next-line functional/immutable-data
-        translate.value = withSequence(
-          withTiming(shakeOffset, {
-            duration: 75,
-            easing: Easing.inOut(Easing.cubic)
-          }),
-          withTiming(-shakeOffset, {
-            duration: 75,
-            easing: Easing.inOut(Easing.cubic)
-          }),
-          withTiming(shakeOffset / 2, {
-            duration: 75,
-            easing: Easing.inOut(Easing.cubic)
-          }),
-          withTiming(-shakeOffset / 2, {
-            duration: 75,
-            easing: Easing.inOut(Easing.cubic)
-          }),
-          withTiming(0, { duration: 75, easing: Easing.inOut(Easing.cubic) })
-        );
+        translate.value = shakeAnimation();
 
         const timer = setTimeout(() => {
           setStatus("default");
@@ -110,7 +82,7 @@ export const CodeInput = ({
       }
     }
     return;
-  }, [value, onValidate, length, onValueChange, translate]);
+  }, [value, onValidate, length, onValueChange, translate, shakeAnimation]);
 
   return (
     <Animated.View style={[IOStyles.row, styles.wrapper, animatedStyle]}>

package/src/components/endOfPage/EndOfPage.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { View } from "react-native";
+import { VSpacer } from "../spacer";
+import {
+  ButtonLink,
+  ButtonLinkProps,
+  ButtonSolid,
+  ButtonSolidProps
+} from "../buttons";
+
+type PrimaryActionProp = {
+  type: "Solid";
+  props: Omit<ButtonSolidProps, "fullWidth">;
+};
+
+type SecondaryActionProp = {
+  type: "Link";
+  props: ButtonLinkProps;
+};
+
+type Props =
+  | {
+      primaryAction?: never;
+      secondaryAction?: never;
+    }
+  | {
+      primaryAction: PrimaryActionProp;
+      secondaryAction?: never;
+    }
+  | {
+      primaryAction: PrimaryActionProp;
+      secondaryAction: SecondaryActionProp;
+    };
+
+export const EndOfPage = ({ primaryAction, secondaryAction }: Props) => (
+  <>
+    <VSpacer size={32} />
+    {primaryAction ? (
+      <>
+        <ButtonSolid {...primaryAction.props} fullWidth />
+        {secondaryAction && (
+          <>
+            <VSpacer size={16} />
+            <VSpacer size={4} />
+            <View style={{ justifyContent: "center", flexDirection: "row" }}>
+              <ButtonLink {...secondaryAction.props} />
+            </View>
+          </>
+        )}
+      </>
+    ) : (
+      <VSpacer size={32} />
+    )}
+  </>
+);

package/src/components/endOfPage/index.tsx

@@ -0,0 +1 @@
+export * from "./EndOfPage";

package/src/components/icons/Icon.tsx

@@ -5,10 +5,12 @@ import { IOColors } from "../../core/IOColors";
 /* Icons */
 import IconAbacus from "./svg/IconAbacus";
 import IconAdd from "./svg/IconAdd";
+import IconAddSmall from "./svg/IconAddSmall";
 import IconAgreement from "./svg/IconAgreement";
 import IconAmount from "./svg/IconAmount";
 import IconAnalytics from "./svg/IconAnalytics";
 import IconArchive from "./svg/IconArchive";
+import IconArchiveFilled from "./svg/IconArchiveFilled";
 import IconArrowBottom from "./svg/IconArrowBottom";
 import IconArrowLeft from "./svg/IconArrowLeft";
 import IconArrowRight from "./svg/IconArrowRight";
@@ -37,6 +39,7 @@ import IconCategSustainability from "./svg/IconCategSustainability";
 import IconCategTelco from "./svg/IconCategTelco";
 import IconCategTravel from "./svg/IconCategTravel";
 import IconCategWellness from "./svg/IconCategWellness";
+import IconChange from "./svg/IconChange";
 import IconChat from "./svg/IconChat";
 import IconCheckTick from "./svg/IconCheckTick";
 import IconCheckTickBig from "./svg/IconCheckTickBig";
@@ -49,35 +52,63 @@ import IconCie from "./svg/IconCie";
 import IconCloseLarge from "./svg/IconCloseLarge";
 import IconCloseMedium from "./svg/IconCloseMedium";
 import IconCloseSmall from "./svg/IconCloseSmall";
+import IconCode from "./svg/IconCode";
 import IconCoggle from "./svg/IconCoggle";
+import IconCompare from "./svg/IconCompare";
+import IconContactless from "./svg/IconContactless";
 import IconCopy from "./svg/IconCopy";
 import IconCreditCard from "./svg/IconCreditCard";
+import IconCreditCardOff from "./svg/IconCreditCardOff";
 import IconDevice from "./svg/IconDevice";
+import IconDeviceVibration from "./svg/IconDeviceVibration";
+import IconDisabilityCard from "./svg/IconDisabilityCard";
+import IconDocGiacenza from "./svg/IconDocGiacenza";
+import IconDocPaymentCode from "./svg/IconDocPaymentCode";
+import IconDocPaymentTitle from "./svg/IconDocPaymentTitle";
 import IconDocument from "./svg/IconDocument";
 import IconDocumentAttachment from "./svg/IconDocumentAttachment";
 import IconDocumentAttachmentPDF from "./svg/IconDocumentAttachmentPDF";
 import IconDocumentSign from "./svg/IconDocumentSign";
 import IconDotMenu from "./svg/IconDotMenu";
+import IconDriverLicense from "./svg/IconDriverLicense";
 import IconEdit from "./svg/IconEdit";
 import IconEmail from "./svg/IconEmail";
 import IconEmailFill from "./svg/IconEmailFill";
 import IconEmojiHappy from "./svg/IconEmojiHappy";
 import IconEmojiSad from "./svg/IconEmojiSad";
+import IconEntityCode from "./svg/IconEntityCode";
 import IconErrorFilled from "./svg/IconErrorFilled";
 import IconExternalLink from "./svg/IconExternalLink";
+import IconExternalLinkSmall from "./svg/IconExternalLinkSmall";
 import IconEyeHide from "./svg/IconEyeHide";
 import IconEyeShow from "./svg/IconEyeShow";
+import IconFamilySharing from "./svg/IconFamilySharing";
+import IconFilterAndroid from "./svg/IconFilterAndroid";
+import IconFilterOffiOS from "./svg/IconFilterOffiOS";
+import IconFilterOniOS from "./svg/IconFilterOniOS";
+import IconFingerprint from "./svg/IconFingerprint";
 import IconFiscalCodeIndividual from "./svg/IconFiscalCodeIndividual";
+import IconFolder from "./svg/IconFolder";
 import IconFornitori from "./svg/IconFornitori";
+import IconForward from "./svg/IconForward";
 import IconGallery from "./svg/IconGallery";
+import IconHealthCard from "./svg/IconHealthCard";
+import IconHearthEmpty from "./svg/IconHearthEmpty";
+import IconHearthFilled from "./svg/IconHearthFilled";
 import IconHistory from "./svg/IconHistory";
 import IconHome from "./svg/IconHome";
 import IconHomeFill from "./svg/IconHomeFill";
 import IconHourglass from "./svg/IconHourglass";
+import IconInboxEmpty from "./svg/IconInboxEmpty";
+import IconInboxFilled from "./svg/IconInboxFilled";
 import IconInfo from "./svg/IconInfo";
 import IconInfoFilled from "./svg/IconInfoFilled";
 import IconInitiatives from "./svg/IconInitiatives";
 import IconInstitution from "./svg/IconInstitution";
+import IconInstruction from "./svg/IconInstruction";
+import IconKey from "./svg/IconKey";
+import IconKeyboard from "./svg/IconKeyboard";
+import IconKeyboardDown from "./svg/IconKeyboardDown";
 import IconLadybug from "./svg/IconLadybug";
 import IconLegalValue from "./svg/IconLegalValue";
 import IconLight from "./svg/IconLight";
@@ -91,6 +122,7 @@ import IconLockOn from "./svg/IconLockOn";
 import IconLogin from "./svg/IconLogin";
 import IconLogout from "./svg/IconLogout";
 import IconMagicWand from "./svg/IconMagicWand";
+import IconMapPin from "./svg/IconMapPin";
 import IconMerchant from "./svg/IconMerchant";
 import IconMessage from "./svg/IconMessage";
 import IconMessageLegal from "./svg/IconMessageLegal";
@@ -103,14 +135,19 @@ import IconNavServices from "./svg/IconNavServices";
 import IconNavServicesFocused from "./svg/IconNavServicesFocused";
 import IconNavWallet from "./svg/IconNavWallet";
 import IconNavWalletFocused from "./svg/IconNavWalletFocused";
+import IconNotes from "./svg/IconNotes";
 import IconNotice from "./svg/IconNotice";
 import IconNoticeFilled from "./svg/IconNoticeFilled";
+import IconNoticePlain from "./svg/IconNoticePlain";
+import IconNotification from "./svg/IconNotification";
 import IconOk from "./svg/IconOk";
+import IconOption from "./svg/IconOption";
 import IconPEC from "./svg/IconPEC";
 import IconPSP from "./svg/IconPSP";
 import IconPhone from "./svg/IconPhone";
 import IconPinOff from "./svg/IconPinOff";
 import IconPinOn from "./svg/IconPinOn";
+import IconPrint from "./svg/IconPrint";
 import IconProductIOApp from "./svg/IconProductIOApp";
 import IconProductIOAppBlueBg from "./svg/IconProductIOAppBlueBg";
 import IconProductPagoPA from "./svg/IconProductPagoPA";
@@ -119,6 +156,9 @@ import IconProfileAlt from "./svg/IconProfileAlt";
 import IconProfileFilled from "./svg/IconProfileFilled";
 import IconQrCode from "./svg/IconQrCode";
 import IconQuestion from "./svg/IconQuestion";
+import IconRead from "./svg/IconRead";
+import IconReceiptOff from "./svg/IconReceiptOff";
+import IconReceiptOn from "./svg/IconReceiptOn";
 import IconRefund from "./svg/IconRefund";
 import IconReload from "./svg/IconReload";
 import IconSave from "./svg/IconSave";
@@ -127,70 +167,34 @@ import IconSecurity from "./svg/IconSecurity";
 import IconSelfCertification from "./svg/IconSelfCertification";
 import IconShareAndroid from "./svg/IconShareAndroid";
 import IconShareiOs from "./svg/IconShareiOs";
+import IconSignal from "./svg/IconSignal";
+import IconSparkles from "./svg/IconSparkles";
 import IconSpid from "./svg/IconSpid";
 import IconStarEmpty from "./svg/IconStarEmpty";
 import IconStarFilled from "./svg/IconStarFilled";
 import IconSuccess from "./svg/IconSuccess";
 import IconSwitchOff from "./svg/IconSwitchOff";
 import IconSystemAppsAndroid from "./svg/IconSystemAppsAndroid";
+import IconSystemLocationiOS from "./svg/IconSystemLocationiOS";
 import IconSystemNotificationsInstructions from "./svg/IconSystemNotificationsInstructions";
+import IconSystemPermissionsAndroid from "./svg/IconSystemPermissionsAndroid";
+import IconSystemPhotosiOS from "./svg/IconSystemPhotosiOS";
+import IconSystemPrivacyiOS from "./svg/IconSystemPrivacyiOS";
 import IconSystemSettingsAndroid from "./svg/IconSystemSettingsAndroid";
 import IconSystemSettingsiOS from "./svg/IconSystemSettingsiOS";
 import IconSystemToggleInstructions from "./svg/IconSystemToggleInstructions";
 import IconTag from "./svg/IconTag";
-import IconTransactionsBoxed from "./svg/IconTransactionsBoxed";
+import IconTerms from "./svg/IconTerms";
+import IconTouch from "./svg/IconTouch";
 import IconTransactions from "./svg/IconTransactions";
+import IconTransactionsBoxed from "./svg/IconTransactionsBoxed";
 import IconTrashcan from "./svg/IconTrashcan";
 import IconWarningFilled from "./svg/IconWarningFilled";
 import IconWebsite from "./svg/IconWebsite";
-import IconOption from "./svg/IconOption";
-import IconKey from "./svg/IconKey";
-import IconNotification from "./svg/IconNotification";
-import IconChange from "./svg/IconChange";
 import LegIconCheckOff from "./svg/LegIconCheckOff";
 import LegIconCheckOn from "./svg/LegIconCheckOn";
 import LegIconRadioOff from "./svg/LegIconRadioOff";
 import LegIconRadioOn from "./svg/LegIconRadioOn";
-import IconKeyboard from "./svg/IconKeyboard";
-import IconContactless from "./svg/IconContactless";
-import IconDisabilityCard from "./svg/IconDisabilityCard";
-import IconDriverLicense from "./svg/IconDriverLicense";
-import IconHealthCard from "./svg/IconHealthCard";
-import IconDocPaymentCode from "./svg/IconDocPaymentCode";
-import IconNotes from "./svg/IconNotes";
-import IconEntityCode from "./svg/IconEntityCode";
-import IconFolder from "./svg/IconFolder";
-import IconReceiptOn from "./svg/IconReceiptOn";
-import IconFingerprint from "./svg/IconFingerprint";
-import IconAddSmall from "./svg/IconAddSmall";
-import IconArchiveFilled from "./svg/IconArchiveFilled";
-import IconCode from "./svg/IconCode";
-import IconCompare from "./svg/IconCompare";
-import IconCreditCardOff from "./svg/IconCreditCardOff";
-import IconDeviceVibration from "./svg/IconDeviceVibration";
-import IconDocPaymentTitle from "./svg/IconDocPaymentTitle";
-import IconDocGiacenza from "./svg/IconDocGiacenza";
-import IconExternalLinkSmall from "./svg/IconExternalLinkSmall";
-import IconFamilySharing from "./svg/IconFamilySharing";
-import IconFilterOniOS from "./svg/IconFilterOniOS";
-import IconFilterOffiOS from "./svg/IconFilterOffiOS";
-import IconFilterAndroid from "./svg/IconFilterAndroid";
-import IconForward from "./svg/IconForward";
-import IconHearthEmpty from "./svg/IconHearthEmpty";
-import IconHearthFilled from "./svg/IconHearthFilled";
-import IconInboxEmpty from "./svg/IconInboxEmpty";
-import IconInboxFilled from "./svg/IconInboxFilled";
-import IconInstruction from "./svg/IconInstruction";
-import IconTerms from "./svg/IconTerms";
-import IconKeyboardDown from "./svg/IconKeyboardDown";
-import IconMapPin from "./svg/IconMapPin";
-import IconNoticePlain from "./svg/IconNoticePlain";
-import IconPrint from "./svg/IconPrint";
-import IconRead from "./svg/IconRead";
-import IconReceiptOff from "./svg/IconReceiptOff";
-import IconSignal from "./svg/IconSignal";
-import IconTouch from "./svg/IconTouch";
-import IconSparkles from "./svg/IconSparkles";
 
 export const IOIcons = {
   spid: IconSpid,
@@ -381,7 +385,11 @@ export const IOIcons = {
   systemSettingsiOS: IconSystemSettingsiOS,
   systemToggleInstructions: IconSystemToggleInstructions,
   systemAppsAndroid: IconSystemAppsAndroid,
-  systemNotificationsInstructions: IconSystemNotificationsInstructions
+  systemNotificationsInstructions: IconSystemNotificationsInstructions,
+  systemPermissionsAndroid: IconSystemPermissionsAndroid,
+  systemLocationiOS: IconSystemLocationiOS,
+  systemPhotosiOS: IconSystemPhotosiOS,
+  systemPrivacyiOS: IconSystemPrivacyiOS
 } as const;
 
 export type IOIcons = keyof typeof IOIcons;
@@ -649,7 +657,11 @@ const {
   systemSettingsiOS,
   systemToggleInstructions,
   systemAppsAndroid,
-  systemNotificationsInstructions
+  systemNotificationsInstructions,
+  systemPermissionsAndroid,
+  systemLocationiOS,
+  systemPhotosiOS,
+  systemPrivacyiOS
 } = IOIcons;
 
 export const IOSystemIcons = {
@@ -657,7 +669,11 @@ export const IOSystemIcons = {
   systemSettingsiOS,
   systemToggleInstructions,
   systemAppsAndroid,
-  systemNotificationsInstructions
+  systemNotificationsInstructions,
+  systemPermissionsAndroid,
+  systemLocationiOS,
+  systemPhotosiOS,
+  systemPrivacyiOS
 } as const;
 
 export type IOSystemIcons = keyof typeof IOSystemIcons;

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { Path, Rect, Svg } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconSystemLocationiOS = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Rect width={size} height={size} fill="#3478F6" rx="8" />
+    <Path
+      d="M11.6519 12.4068C11.4302 12.4068 11.28 12.4068 11.1297 12.4068C9.79024 12.4032 8.44894 12.4032 7.10947 12.3958C6.92806 12.3958 6.74483 12.3738 6.56892 12.3354C6.2739 12.2731 6.08517 12.0807 6.0302 11.7856C5.97339 11.4815 6.05585 11.2084 6.30689 11.0142C6.42599 10.9226 6.56525 10.8548 6.70268 10.7907C9.98447 9.27162 13.2663 7.75258 16.5499 6.23903C16.7551 6.14375 16.9732 6.06129 17.193 6.01915C17.7464 5.9147 18.1294 6.24636 18.0872 6.79791C18.0726 6.98848 18.0066 7.18271 17.9242 7.35862C16.6928 10.0119 15.456 12.6633 14.2209 15.3148C13.9204 15.9598 13.6236 16.6085 13.3176 17.2516C13.2461 17.4019 13.1655 17.5503 13.0629 17.6804C12.8393 17.9608 12.4692 18.0744 12.1613 17.9498C11.848 17.8233 11.6996 17.5705 11.6904 17.2351C11.6867 17.1142 11.6867 16.9933 11.6867 16.8705C11.6849 15.5658 11.6831 14.2612 11.6794 12.9565C11.6794 12.7934 11.6648 12.6304 11.6538 12.4086L11.6519 12.4068Z"
+      fill="#FFF"
+    />
+  </Svg>
+);
+
+export default IconSystemLocationiOS;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Svg, Path, Rect, Circle } from "react-native-svg";
+import { Circle, Path, Rect, Svg } from "react-native-svg";
 import { SVGIconProps } from "../Icon";
 
 const IconSystemNotificationsInstructions = ({
@@ -10,6 +10,7 @@ const IconSystemNotificationsInstructions = ({
   <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
     <Rect width={size} height={size} fill="#EB4E3E" rx="4.364" />
     <Path
+      fill="#EB4E3E"
       stroke="#fff"
       stroke-width="1.091"
       d="M4.909 8.727c0-1.044 0-1.772.075-2.321.072-.534.203-.816.404-1.018.201-.2.484-.332 1.018-.404.549-.074 1.277-.075 2.32-.075h6.546c1.044 0 1.772.001 2.322.075.533.072.816.203 1.017.404.202.202.333.484.404 1.018.074.55.076 1.277.076 2.321v6.546c0 1.044-.002 1.772-.076 2.321-.071.534-.202.816-.404 1.018-.201.201-.484.332-1.017.404-.55.074-1.278.075-2.322.075H8.727c-1.044 0-1.772-.001-2.321-.075-.534-.072-.817-.203-1.018-.404-.201-.201-.332-.484-.404-1.018-.074-.55-.075-1.277-.075-2.321V8.727Z"

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { Path, Rect, Svg } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconSystemPermissionsAndroid = ({
+  size,
+  style,
+  ...props
+}: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Rect width={size} height={size} fill="#636B82" rx="8" />
+    <Path
+      d="M12 15.75C12.825 15.75 13.5 15.075 13.5 14.25C13.5 13.425 12.825 12.75 12 12.75C11.175 12.75 10.5 13.425 10.5 14.25C10.5 15.075 11.175 15.75 12 15.75ZM16.5 9H15.75V7.5C15.75 5.43 14.07 3.75 12 3.75C9.93 3.75 8.25 5.43 8.25 7.5H9.675C9.675 6.2175 10.7175 5.175 12 5.175C13.2825 5.175 14.325 6.2175 14.325 7.5V9H7.5C6.675 9 6 9.675 6 10.5V18C6 18.825 6.675 19.5 7.5 19.5H16.5C17.325 19.5 18 18.825 18 18V10.5C18 9.675 17.325 9 16.5 9ZM16.5 18H7.5V10.5H16.5V18Z"
+      fill="#FFFFFF"
+    />
+  </Svg>
+);
+
+export default IconSystemPermissionsAndroid;