@pagopa/io-app-design-system 1.7.0 → 1.8.0

package/src/components/buttons/IconButtonSolid.tsx

@@ -14,7 +14,8 @@ import {
   IOButtonStyles,
   IOIconButtonStyles,
   IOScaleValues,
-  IOSpringValues
+  IOSpringValues,
+  useIOExperimentalDesign
 } from "../../core";
 import { IOColors, hexToRgba } from "../../core/IOColors";
 import { WithTestID } from "../../utils/types";
@@ -70,6 +71,36 @@ const mapColorStates: Record<
   }
 };
 
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const mapLegacyColorStates: Record<
+  NonNullable<IconButtonSolid["color"]>,
+  ColorStates
+> = {
+  // Primary button
+  primary: {
+    background: {
+      default: IOColors.blue,
+      pressed: IOColors["blue-600"],
+      disabled: IOColors["grey-100"]
+    },
+    icon: {
+      default: IOColors.white,
+      disabled: IOColors["grey-450"]
+    }
+  },
+  contrast: {
+    background: {
+      default: IOColors.white,
+      pressed: IOColors["blue-50"],
+      disabled: hexToRgba(IOColors.white, 0.25)
+    },
+    icon: {
+      default: IOColors.blue,
+      disabled: IOColors.blue
+    }
+  }
+};
+
 export const IconButtonSolid = ({
   icon,
   color = "primary",
@@ -80,7 +111,7 @@ export const IconButtonSolid = ({
   testID
 }: IconButtonSolid) => {
   const isPressed = useSharedValue(0);
-
+  const { isExperimental } = useIOExperimentalDesign();
   // Scaling transformation applied when the button is pressed
   const animationScaleValue = IOScaleValues?.exaggeratedButton?.pressedState;
 
@@ -89,15 +120,16 @@ export const IconButtonSolid = ({
     withSpring(isPressed.value, IOSpringValues.button)
   );
 
+  const colorMap = React.useMemo(
+    () => (isExperimental ? mapColorStates : mapLegacyColorStates),
+    [isExperimental]
+  );
   // Interpolate animation values from `isPressed` values
   const pressedAnimationStyle = useAnimatedStyle(() => {
     const backgroundColor = interpolateColor(
       progressPressed.value,
       [0, 1],
-      [
-        mapColorStates[color].background.default,
-        mapColorStates[color].background.pressed
-      ]
+      [colorMap[color].background.default, colorMap[color].background.pressed]
     );
 
     // Scale down button slightly when pressed
@@ -123,7 +155,7 @@ export const IconButtonSolid = ({
     isPressed.value = 0;
   }, [isPressed]);
 
-  const NewButton = () => (
+  return (
     <Pressable
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}
@@ -143,10 +175,10 @@ export const IconButtonSolid = ({
           !disabled && pressedAnimationStyle,
           disabled
             ? {
-                backgroundColor: mapColorStates[color]?.background?.disabled
+                backgroundColor: colorMap[color]?.background?.disabled
               }
             : {
-                backgroundColor: mapColorStates[color]?.background?.default
+                backgroundColor: colorMap[color]?.background?.default
               }
         ]}
       >
@@ -154,15 +186,13 @@ export const IconButtonSolid = ({
           name={icon}
           color={
             !disabled
-              ? mapColorStates[color]?.icon?.default
-              : mapColorStates[color]?.icon?.disabled
+              ? colorMap[color]?.icon?.default
+              : colorMap[color]?.icon?.disabled
           }
         />
       </Animated.View>
     </Pressable>
   );
-
-  return <NewButton />;
 };
 
 export default IconButtonSolid;

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

@@ -69,29 +69,29 @@ exports[`Test Buttons Components ButtonExtendedOutline Snapshot 1`] = `
       <Text
         color="black"
         defaultColor="black"
-        defaultWeight="Regular"
-        font="ReadexPro"
+        defaultWeight="SemiBold"
+        font="TitilliumWeb"
         fontStyle={
           {
-            "fontSize": 20,
+            "fontSize": 16,
             "lineHeight": 24,
           }
         }
         style={
           [
             {
-              "fontSize": 20,
+              "fontSize": 16,
               "lineHeight": 24,
             },
             {
               "color": "#0E0F13",
-              "fontFamily": "Readex Pro",
+              "fontFamily": "Titillium Web",
               "fontStyle": "normal",
-              "fontWeight": "400",
+              "fontWeight": "600",
             },
           ]
         }
-        weight="Regular"
+        weight="SemiBold"
       >
         label
       </Text>
@@ -311,10 +311,10 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
         {
           "borderWidth": 1,
         },
-        false,
         {
           "height": 40,
         },
+        false,
         {
           "backgroundColor": "rgba(0,115,230,0)",
           "borderColor": "#0073E6",
@@ -344,9 +344,6 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
           {
             "alignSelf": "center",
           },
-          {
-            "fontSize": 16,
-          },
           {
             "color": "#0073E6",
           },
@@ -433,19 +430,24 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
   >
     <Text
       color="white"
+      defaultColor="white"
+      defaultWeight="Bold"
       ellipsizeMode="tail"
+      font="TitilliumWeb"
+      fontStyle={
+        {
+          "fontSize": 16,
+        }
+      }
       numberOfLines={1}
       style={
         [
-          [
-            {
-              "alignSelf": "center",
-            },
-            {
-              "fontSize": 16,
-            },
-          ],
-          undefined,
+          {
+            "alignSelf": "center",
+          },
+          {
+            "fontSize": 16,
+          },
           {
             "color": "#FFFFFF",
             "fontFamily": "Titillium Web",
@@ -764,7 +766,7 @@ exports[`Test Buttons Components IconButtonSolid Snapshot 1`] = `
           ],
         },
         {
-          "backgroundColor": "#0B3EE3",
+          "backgroundColor": "#0073E6",
         },
       ]
     }

package/src/components/checkbox/AnimatedCheckbox.tsx

@@ -8,9 +8,13 @@ import Animated, {
   withSpring,
   withTiming
 } from "react-native-reanimated";
+import { useIOExperimentalDesign } from "../../core";
 import { IOSpringValues } from "../../core/IOAnimations";
 import { IOColors } from "../../core/IOColors";
-import { IOSelectionTickVisualParams } from "../../core/IOStyles";
+import {
+  IOSelectionTickLegacyVisualParams,
+  IOSelectionTickVisualParams
+} from "../../core/IOStyles";
 import { AnimatedTick } from "../common/AnimatedTick";
 
 type Props = {
@@ -52,6 +56,25 @@ const styles = StyleSheet.create({
 export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => {
   const isChecked = checked ?? false;
 
+  const { isExperimental } = useIOExperimentalDesign();
+  const borderColorOffState =
+    IOColors[IOSelectionTickVisualParams.borderColorOffState];
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  const legacyBorderColorOffState =
+    IOColors[IOSelectionTickLegacyVisualParams.borderColorOffState];
+  const borderColorProp = isExperimental
+    ? borderColorOffState
+    : legacyBorderColorOffState;
+
+  const backgroundColorOnState =
+    IOColors[IOSelectionTickVisualParams.bgColorOnState];
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  const legacyBackgroundColorOnState =
+    IOColors[IOSelectionTickLegacyVisualParams.bgColorOnState];
+  const backgroundColorProp = isExperimental
+    ? backgroundColorOnState
+    : legacyBackgroundColorOnState;
+
   const squareAnimationProgress = useSharedValue(checked ? 1 : 0);
   const tickAnimationProgress = useSharedValue(checked ? 1 : 0);
 
@@ -89,8 +112,7 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => {
         style={[
           styles.checkboxBorder,
           {
-            borderColor:
-              IOColors[IOSelectionTickVisualParams.borderColorOffState]
+            borderColor: borderColorProp
           }
         ]}
       />
@@ -98,8 +120,7 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => {
         style={[
           styles.checkBoxSquare,
           {
-            backgroundColor:
-              IOColors[IOSelectionTickVisualParams.bgColorOnState]
+            backgroundColor: backgroundColorProp
           },
           animatedCheckboxSquare
         ]}

package/src/components/checkbox/AnimatedMessageCheckbox.tsx

@@ -1,21 +1,23 @@
 import React, { useEffect } from "react";
-import { StyleSheet, Pressable, PressableProps } from "react-native";
+import { Pressable, PressableProps, StyleSheet } from "react-native";
 import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
+  Easing,
   interpolate,
+  useAnimatedStyle,
+  useSharedValue,
   withSpring,
-  withTiming,
-  Easing
+  withTiming
 } from "react-native-reanimated";
-import { IOColors } from "../../core/IOColors";
+import { useIOExperimentalDesign } from "../../core";
 import { IOSpringValues } from "../../core/IOAnimations";
-import { AnimatedTick } from "../common/AnimatedTick";
+import { IOColors } from "../../core/IOColors";
+import { IOSpacingScale } from "../../core/IOSpacing";
 import {
+  IOSelectionTickLegacyVisualParams,
   IOSelectionTickVisualParams,
   IOVisualCostants
 } from "../../core/IOStyles";
-import { IOSpacingScale } from "../../core/IOSpacing";
+import { AnimatedTick } from "../common/AnimatedTick";
 
 type Props = {
   checked?: boolean;
@@ -50,9 +52,18 @@ export const AnimatedMessageCheckbox = ({
   onPress
 }: AnimatedMessageCheckbox) => {
   const isChecked = checked ?? true;
+  const { isExperimental } = useIOExperimentalDesign();
 
   const circleAnimationProgress = useSharedValue(checked ? 1 : 0);
   const tickAnimationProgress = useSharedValue(checked ? 1 : 0);
+  const backgroundColorOnState =
+    IOColors[IOSelectionTickVisualParams.bgColorOnState];
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  const legacyBackgroundColorOnState =
+    IOColors[IOSelectionTickLegacyVisualParams.bgColorOnState];
+  const backgroundColorProp = isExperimental
+    ? backgroundColorOnState
+    : legacyBackgroundColorOnState;
 
   useEffect(() => {
     // eslint-disable-next-line functional/immutable-data
@@ -87,8 +98,7 @@ export const AnimatedMessageCheckbox = ({
         style={[
           styles.checkBoxCircle,
           {
-            backgroundColor:
-              IOColors[IOSelectionTickVisualParams.bgColorOnState]
+            backgroundColor: backgroundColorProp
           },
           animatedCheckboxCircle
         ]}

package/src/components/checkbox/CheckboxLabel.tsx

@@ -1,10 +1,12 @@
 import * as React from "react";
 import { useState } from "react";
-import { Pressable, View } from "react-native";
-import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback";
-import { H6 } from "../typography/H6";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { IOColors, useIOExperimentalDesign } from "../../core";
 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";
 
 type Props = {
@@ -21,6 +23,17 @@ 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`.
@@ -36,6 +49,22 @@ 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);
@@ -67,9 +96,7 @@ export const CheckboxLabel = ({
           <AnimatedCheckbox checked={checked ?? toggleValue} />
         </View>
         <HSpacer size={8} />
-        <H6 color={"black"} style={{ flexShrink: 1 }}>
-          {label}
-        </H6>
+        {checkboxLabelTextComponent}
       </View>
     </Pressable>
   );

package/src/components/icons/Icon.tsx

@@ -139,10 +139,16 @@ 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 IconTransactions from "./svg/IconTransactions";
 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 IconDialpad from "./svg/IconDialpad";
 import LegIconCheckOff from "./svg/LegIconCheckOff";
 import LegIconCheckOn from "./svg/LegIconCheckOn";
 import LegIconRadioOff from "./svg/LegIconRadioOff";
@@ -161,10 +167,11 @@ export const IOIcons = {
   copy: IconCopy,
   selfCert: IconSelfCertification,
   institution: IconInstitution,
+  merchant: IconMerchant,
   hourglass: IconHourglass,
   shareiOs: IconShareiOs,
   shareAndroid: IconShareAndroid,
-  locked: IconLockOn /* io-lucchetto */,
+  locked: IconLockOn,
   unlocked: IconLockOff,
   initiatives: IconInitiatives,
   analytics: IconAnalytics,
@@ -175,8 +182,8 @@ export const IOIcons = {
   pinOn: IconPinOn,
   emojiSad: IconEmojiSad,
   emojiHappy: IconEmojiHappy,
-  phone: IconPhone /* io-phone */,
-  email: IconEmail /* io-envelope */,
+  phone: IconPhone,
+  email: IconEmail,
   emailFill: IconEmailFill,
   pec: IconPEC,
   messageLegal: IconMessageLegal,
@@ -186,6 +193,8 @@ export const IOIcons = {
   docSign: IconDocumentSign,
   docAgree: IconAgreement,
   security: IconSecurity,
+  option: IconOption,
+  key: IconKey,
   docGiacenza: IconGiacenza,
   docAttach: IconDocumentAttachment,
   docAttachPDF: IconDocumentAttachmentPDF,
@@ -194,8 +203,9 @@ export const IOIcons = {
   success: IconSuccess,
   ok: IconOk,
   fiscalCodeIndividual: IconFiscalCodeIndividual,
-  creditCard: IconCreditCard /* io-carta */,
+  creditCard: IconCreditCard,
   bonus: IconBonus,
+  transactionsBoxed: IconTransactionsBoxed,
   transactions: IconTransactions,
   amount: IconAmount,
   psp: IconPSP,
@@ -204,7 +214,7 @@ export const IOIcons = {
   locationAndroid: IconLocationAndroid,
   coggle: IconCoggle,
   warningFilled: IconWarningFilled,
-  notice: IconNotice /* io-warning */,
+  notice: IconNotice,
   noticeFilled: IconNoticeFilled,
   info: IconInfo,
   infoFilled: IconInfoFilled,
@@ -217,16 +227,18 @@ export const IOIcons = {
   edit: IconEdit,
   battery: IconBattery,
   trashcan: IconTrashcan,
-  calendar: IconCalendar /* io-calendar */ /* io-calendario */,
+  calendar: IconCalendar,
   profile: IconProfile,
   profileFilled: IconProfileFilled,
-  profileAlt: IconProfileAlt /* io-titolare */,
+  profileAlt: IconProfileAlt,
   lightbulb: IconLightbulb,
   magicWand: IconMagicWand,
   starFilled: IconStarFilled,
   starEmpty: IconStarEmpty,
   switchOff: IconSwitchOff,
   device: IconDevice,
+  notification: IconNotification,
+  dialpad: IconDialpad,
   dotMenu: IconDotMenu,
   barcode: IconBarcode,
   save: IconSave,
@@ -238,24 +250,25 @@ export const IOIcons = {
   externalLink: IconExternalLink,
   cancel: IconCancel,
   help: IconQuestion,
-  search: IconSearch /* io-search */,
+  search: IconSearch,
   chevronRight: IconChevronRight,
   chevronLeft: IconChevronLeft,
   chevronBottom: IconChevronBottom,
   chevronTop: IconChevronTop,
   chevronRightListItem: IconChevronRightListItem,
-  closeLarge: IconCloseLarge /* io-close */,
+  closeLarge: IconCloseLarge,
   closeMedium: IconCloseMedium,
   closeSmall: IconCloseSmall,
   arrowBottom: IconArrowBottom,
   arrowLeft: IconArrowLeft,
   arrowTop: IconArrowTop,
   arrowRight: IconArrowRight,
+  change: IconChange,
   backiOS: IconBackiOS,
   backAndroid: IconBackAndroid,
-  navMessages: IconNavMessages /* io-messaggi */,
+  navMessages: IconNavMessages,
   navMessagesFocused: IconNavMessagesFocused,
-  navWallet: IconNavWallet /* io-portafoglio */,
+  navWallet: IconNavWallet,
   navWalletFocused: IconNavWalletFocused,
   navScan: IconNavScan,
   navServices: IconNavServices,
@@ -267,8 +280,8 @@ export const IOIcons = {
   legRadioOff: LegIconRadioOff,
   legCheckOn: LegIconCheckOn,
   legCheckOff: LegIconCheckOff,
-  biomFingerprint: IconBiomFingerprint /* io-fingerprint */,
-  biomFaceID: IconBiomFaceID /* io-face-id */,
+  biomFingerprint: IconBiomFingerprint,
+  biomFaceID: IconBiomFaceID,
   categCulture: IconCategCulture,
   categWellness: IconCategWellness,
   categLearning: IconCategLearning,
@@ -282,11 +295,10 @@ export const IOIcons = {
   categShopping: IconCategShopping,
   categSustainability: IconCategSustainability,
   productIOApp: IconProductIOApp,
-  productPagoPA: IconProductPagoPA /* io-pagopa */,
+  productPagoPA: IconProductPagoPA,
   productIOAppBlueBg: IconProductIOAppBlueBg,
   checkTick: IconCheckTick,
   checkTickBig: IconCheckTickBig,
-  merchant: IconMerchant,
   light: IconLight,
   lightFilled: IconLightFilled,
   systemSettingsAndroid: IconSystemSettingsAndroid,

package/src/components/icons/IconContained.tsx

@@ -0,0 +1,76 @@
+import * as React from "react";
+import { useMemo } from "react";
+import { StyleSheet, View } from "react-native";
+import { IOVisualCostants, IOColors } from "../../core";
+import { IOIcons, Icon } from ".";
+
+type IconContained = {
+  variant: "tonal";
+  color: "neutral";
+  icon: IOIcons;
+};
+
+type IconContainedVisualAttrs = {
+  background: IOColors;
+  foreground: IOColors;
+};
+
+type IconContainedColorVariants = Record<
+  IconContained["color"],
+  IconContainedVisualAttrs
+>;
+
+const tonalColorMap: IconContainedColorVariants = {
+  neutral: {
+    background: "blueIO-50",
+    foreground: "grey-450"
+  }
+};
+
+const variantMap: Record<IconContained["variant"], IconContainedColorVariants> =
+  {
+    tonal: tonalColorMap
+  };
+
+const IconContainedDefaultSize = IOVisualCostants.iconContainedSizeDefault;
+
+const styles = StyleSheet.create({
+  iconContainedWrapper: {
+    overflow: "hidden",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: IconContainedDefaultSize,
+    height: IconContainedDefaultSize,
+    borderRadius: IconContainedDefaultSize / 2
+  }
+});
+
+/*
+`IconContained` is just a special wrapper for the `Icon` component. 
+It's also not an interactive component, unlike the `IconButton`.
+When adding new styles, you should be aware of this context and be careful
+not to add variants that look like interactive counterparts.
+*/
+export const IconContained = ({ variant, color, icon }: IconContained) => {
+  const backgroundColor = useMemo(
+    () => variantMap[variant][color].background,
+    [variant, color]
+  );
+
+  const foregroundColor = useMemo(
+    () => variantMap[variant][color].foreground,
+    [variant, color]
+  );
+
+  return (
+    <View
+      style={[
+        styles.iconContainedWrapper,
+        { backgroundColor: IOColors[backgroundColor] }
+      ]}
+    >
+      <Icon name={icon} color={foregroundColor} />
+    </View>
+  );
+};

package/src/components/icons/index.tsx

@@ -1 +1,2 @@
 export * from "./Icon";
+export * from "./IconContained";

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconChange = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M23.7071 16.2929C24.0976 16.6834 24.0976 17.3166 23.7071 17.7071C23.3166 18.0976 22.6834 18.0976 22.2929 17.7071L20 15.4142L20 17C20 20.866 16.866 24 13 24L5 24C4.44772 24 4 23.5523 4 23C4 22.4477 4.44772 22 5 22L13 22C15.7614 22 18 19.7614 18 17L18 15.4142L15.7071 17.7071C15.3166 18.0976 14.6834 18.0976 14.2929 17.7071C13.9024 17.3166 13.9024 16.6834 14.2929 16.2929L18.2929 12.2929C18.6834 11.9024 19.3166 11.9024 19.7071 12.2929L23.7071 16.2929ZM6 7C6 4.23858 8.23858 2 11 2L19 2C19.5523 2 20 1.55228 20 1C20 0.447716 19.5523 1.94416e-07 19 2.18557e-07L11 5.68248e-07C7.13401 7.37236e-07 4 3.13401 4 7L4 8.58579L1.70711 6.29289C1.31658 5.90237 0.683417 5.90237 0.292892 6.29289C-0.0976322 6.68342 -0.0976322 7.31658 0.292892 7.70711L4.29289 11.7071C4.68342 12.0976 5.31658 12.0976 5.70711 11.7071L9.70711 7.70711C10.0976 7.31658 10.0976 6.68342 9.70711 6.29289C9.31658 5.90237 8.68342 5.90237 8.29289 6.29289L6 8.58578L6 7Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconChange;

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

@@ -0,0 +1,14 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconDialpad = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fill="currentColor"
+      d="M12 19C10.9 19 10 19.9 10 21C10 22.1 10.9 23 12 23C13.1 23 14 22.1 14 21C14 19.9 13.1 19 12 19ZM6 1C4.9 1 4 1.9 4 3C4 4.1 4.9 5 6 5C7.1 5 8 4.1 8 3C8 1.9 7.1 1 6 1ZM6 7C4.9 7 4 7.9 4 9C4 10.1 4.9 11 6 11C7.1 11 8 10.1 8 9C8 7.9 7.1 7 6 7ZM6 13C4.9 13 4 13.9 4 15C4 16.1 4.9 17 6 17C7.1 17 8 16.1 8 15C8 13.9 7.1 13 6 13ZM18 5C19.1 5 20 4.1 20 3C20 1.9 19.1 1 18 1C16.9 1 16 1.9 16 3C16 4.1 16.9 5 18 5ZM12 13C10.9 13 10 13.9 10 15C10 16.1 10.9 17 12 17C13.1 17 14 16.1 14 15C14 13.9 13.1 13 12 13ZM18 13C16.9 13 16 13.9 16 15C16 16.1 16.9 17 18 17C19.1 17 20 16.1 20 15C20 13.9 19.1 13 18 13ZM18 7C16.9 7 16 7.9 16 9C16 10.1 16.9 11 18 11C19.1 11 20 10.1 20 9C20 7.9 19.1 7 18 7ZM12 7C10.9 7 10 7.9 10 9C10 10.1 10.9 11 12 11C13.1 11 14 10.1 14 9C14 7.9 13.1 7 12 7ZM12 1C10.9 1 10 1.9 10 3C10 4.1 10.9 5 12 5C13.1 5 14 4.1 14 3C14 1.9 13.1 1 12 1Z"
+    />
+  </Svg>
+);
+
+export default IconDialpad;

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconKey = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16 12c0-1.6569 1.3431-3 3-3s3 1.3431 3 3-1.3431 3-3 3-3-1.3431-3-3Zm-1.901.9952A1.01133 1.01133 0 0 1 14 13H8v3c0 .5523-.44772 1-1 1s-1-.4477-1-1v-3H4v1c0 .5523-.44772 1-1 1s-1-.4477-1-1v-1H1c-.55229 0-1-.4477-1-1s.44771-1 1-1h13c.0334 0 .0665.0016.099.0048C14.5604 8.72019 16.5793 7 19 7c2.7614 0 5 2.23858 5 5 0 2.7614-2.2386 5-5 5-2.4207 0-4.4396-1.7202-4.901-4.0048Z"
+    />
+  </Svg>
+);
+
+export default IconKey;