@pagopa/io-app-design-system 1.1.3 → 1.3.0

package/src/components/icons/Icon.tsx

@@ -3,148 +3,150 @@ import { ColorValue, StyleProp } from "react-native";
 import { IOColors } from "../../core/IOColors";
 
 /* Icons */
-import IconSpid from "./svg/IconSpid";
-import IconCie from "./svg/IconCie";
-import IconQrCode from "./svg/IconQrCode";
-import IconBell from "./svg/IconBell";
-import IconHome from "./svg/IconHome";
-import IconHomeFill from "./svg/IconHomeFill";
-import IconCopy from "./svg/IconCopy";
-import IconSelfCertification from "./svg/IconSelfCertification";
-import IconInstitution from "./svg/IconInstitution";
-import IconHourglass from "./svg/IconHourglass";
-import IconPEC from "./svg/IconPEC";
-import IconMessageLegal from "./svg/IconMessageLegal";
-import IconShareiOs from "./svg/IconShareiOs";
-import IconShareAndroid from "./svg/IconShareAndroid";
-import IconLockOn from "./svg/IconLockOn";
-import IconLockOff from "./svg/IconLockOff";
-import IconInitiatives from "./svg/IconInitiatives";
-import IconAnalytics from "./svg/IconAnalytics";
-import IconFornitori from "./svg/IconFornitori";
-import IconEyeShow from "./svg/IconEyeShow";
-import IconEyeHide from "./svg/IconEyeHide";
-import IconPinOff from "./svg/IconPinOff";
-import IconPinOn from "./svg/IconPinOn";
-import IconEmojiSad from "./svg/IconEmojiSad";
-import IconEmojiHappy from "./svg/IconEmojiHappy";
-import IconPhone from "./svg/IconPhone";
-import IconEmail from "./svg/IconEmail";
-import IconEmailFill from "./svg/IconEmailFill";
-import IconMessage from "./svg/IconMessage";
-import IconDocument from "./svg/IconDocument";
-import IconDocumentSign from "./svg/IconDocumentSign";
-import IconGiacenza from "./svg/IconGiacenza";
-import IconChat from "./svg/IconChat";
+import IconAbacus from "./svg/IconAbacus";
+import IconAdd from "./svg/IconAdd";
 import IconAgreement from "./svg/IconAgreement";
-import IconSave from "./svg/IconSave";
-import IconSuccess from "./svg/IconSuccess";
-import IconOk from "./svg/IconOk";
-import IconFiscalCodeIndividual from "./svg/IconFiscalCodeIndividual";
-import IconCreditCard from "./svg/IconCreditCard";
-import IconBonus from "./svg/IconBonus";
-import IconTransactions from "./svg/IconTransactions";
 import IconAmount from "./svg/IconAmount";
-import IconPSP from "./svg/IconPSP";
-import IconAdd from "./svg/IconAdd";
-import IconCoggle from "./svg/IconCoggle";
-import IconInfo from "./svg/IconInfo";
-import IconInfoFilled from "./svg/IconInfoFilled";
-import IconNotice from "./svg/IconNotice";
-import IconNoticeFilled from "./svg/IconNoticeFilled";
-import IconRefund from "./svg/IconRefund";
-import IconReload from "./svg/IconReload";
-import IconHistory from "./svg/IconHistory";
-import IconEdit from "./svg/IconEdit";
+import IconAnalytics from "./svg/IconAnalytics";
+import IconArchive from "./svg/IconArchive";
+import IconArrowBottom from "./svg/IconArrowBottom";
+import IconArrowLeft from "./svg/IconArrowLeft";
+import IconArrowRight from "./svg/IconArrowRight";
+import IconArrowTop from "./svg/IconArrowTop";
+import IconAttachment from "./svg/IconAttachment";
+import IconBackAndroid from "./svg/IconBackAndroid";
+import IconBackiOS from "./svg/IconBackiOS";
+import IconBarcode from "./svg/IconBarcode";
 import IconBattery from "./svg/IconBattery";
-import IconTrashcan from "./svg/IconTrashcan";
+import IconBell from "./svg/IconBell";
+import IconBiomFaceID from "./svg/IconBiomFaceID";
+import IconBiomFingerprint from "./svg/IconBiomFingerprint";
+import IconBonus from "./svg/IconBonus";
 import IconCalendar from "./svg/IconCalendar";
-import IconLightbulb from "./svg/IconLightbulb";
-import IconMagicWand from "./svg/IconMagicWand";
-import IconProfile from "./svg/IconProfile";
-import IconProfileFilled from "./svg/IconProfileFilled";
-import IconProfileAlt from "./svg/IconProfileAlt";
-import IconStarFilled from "./svg/IconStarFilled";
-import IconStarEmpty from "./svg/IconStarEmpty";
-import IconAbacus from "./svg/IconAbacus";
-import IconSwitchOff from "./svg/IconSwitchOff";
-import IconDevice from "./svg/IconDevice";
-import IconDotMenu from "./svg/IconDotMenu";
-import IconBarcode from "./svg/IconBarcode";
-import IconLogin from "./svg/IconLogin";
-import IconLogout from "./svg/IconLogout";
-import IconLadybug from "./svg/IconLadybug";
-import IconTag from "./svg/IconTag";
-import IconGallery from "./svg/IconGallery";
 import IconCancel from "./svg/IconCancel";
-import IconQuestion from "./svg/IconQuestion";
-import IconSearch from "./svg/IconSearch";
+import IconCanceled from "./svg/IconCanceled";
+import IconCategCulture from "./svg/IconCategCulture";
+import IconCategFinance from "./svg/IconCategFinance";
+import IconCategHome from "./svg/IconCategHome";
+import IconCategJobOffers from "./svg/IconCategJobOffers";
+import IconCategLearning from "./svg/IconCategLearning";
+import IconCategMobility from "./svg/IconCategMobility";
+import IconCategShopping from "./svg/IconCategShopping";
+import IconCategSport from "./svg/IconCategSport";
+import IconCategSustainability from "./svg/IconCategSustainability";
+import IconCategTelco from "./svg/IconCategTelco";
+import IconCategTravel from "./svg/IconCategTravel";
+import IconCategWellness from "./svg/IconCategWellness";
+import IconChat from "./svg/IconChat";
+import IconCheckTick from "./svg/IconCheckTick";
+import IconCheckTickBig from "./svg/IconCheckTickBig";
+import IconChevronBottom from "./svg/IconChevronBottom";
+import IconChevronLeft from "./svg/IconChevronLeft";
+import IconChevronRight from "./svg/IconChevronRight";
+import IconChevronRightListItem from "./svg/IconChevronRightListItem";
+import IconChevronTop from "./svg/IconChevronTop";
+import IconCie from "./svg/IconCie";
 import IconCloseLarge from "./svg/IconCloseLarge";
+import IconCloseMedium from "./svg/IconCloseMedium";
 import IconCloseSmall from "./svg/IconCloseSmall";
+import IconCoggle from "./svg/IconCoggle";
+import IconCopy from "./svg/IconCopy";
+import IconCreditCard from "./svg/IconCreditCard";
+import IconDevice from "./svg/IconDevice";
+import IconDocument from "./svg/IconDocument";
 import IconDocumentAttachment from "./svg/IconDocumentAttachment";
 import IconDocumentAttachmentPDF from "./svg/IconDocumentAttachmentPDF";
-import IconAttachment from "./svg/IconAttachment";
-import IconLocationiOS from "./svg/IconLocationiOS";
-import IconLocationiOSFilled from "./svg/IconLocationiOSFilled";
-import IconLocationAndroid from "./svg/IconLocationAndroid";
-import IconExternalLink from "./svg/IconExternalLink";
-import IconWarningFilled from "./svg/IconWarningFilled";
-import IconCanceled from "./svg/IconCanceled";
+import IconDocumentSign from "./svg/IconDocumentSign";
+import IconDotMenu from "./svg/IconDotMenu";
+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 IconErrorFilled from "./svg/IconErrorFilled";
+import IconExternalLink from "./svg/IconExternalLink";
+import IconEyeHide from "./svg/IconEyeHide";
+import IconEyeShow from "./svg/IconEyeShow";
+import IconFiscalCodeIndividual from "./svg/IconFiscalCodeIndividual";
+import IconFornitori from "./svg/IconFornitori";
+import IconGallery from "./svg/IconGallery";
+import IconGiacenza from "./svg/IconGiacenza";
+import IconHistory from "./svg/IconHistory";
+import IconHome from "./svg/IconHome";
+import IconHomeFill from "./svg/IconHomeFill";
+import IconHourglass from "./svg/IconHourglass";
+import IconInfo from "./svg/IconInfo";
+import IconInfoFilled from "./svg/IconInfoFilled";
+import IconInitiatives from "./svg/IconInitiatives";
+import IconInstitution from "./svg/IconInstitution";
+import IconLadybug from "./svg/IconLadybug";
 import IconLegalValue from "./svg/IconLegalValue";
-import IconChevronRight from "./svg/IconChevronRight";
-import IconChevronTop from "./svg/IconChevronTop";
-import IconChevronBottom from "./svg/IconChevronBottom";
-import IconChevronLeft from "./svg/IconChevronLeft";
-import IconChevronRightListItem from "./svg/IconChevronRightListItem";
-import IconArrowBottom from "./svg/IconArrowBottom";
-import IconArrowLeft from "./svg/IconArrowLeft";
-import IconArrowTop from "./svg/IconArrowTop";
-import IconArrowRight from "./svg/IconArrowRight";
-import IconBackiOS from "./svg/IconBackiOS";
-import IconBackAndroid from "./svg/IconBackAndroid";
+import IconLight from "./svg/IconLight";
+import IconLightFilled from "./svg/IconLightFilled";
+import IconLightbulb from "./svg/IconLightbulb";
+import IconLocationAndroid from "./svg/IconLocationAndroid";
+import IconLocationiOS from "./svg/IconLocationiOS";
+import IconLocationiOSFilled from "./svg/IconLocationiOSFilled";
+import IconLockOff from "./svg/IconLockOff";
+import IconLockOn from "./svg/IconLockOn";
+import IconLogin from "./svg/IconLogin";
+import IconLogout from "./svg/IconLogout";
+import IconMagicWand from "./svg/IconMagicWand";
+import IconMerchant from "./svg/IconMerchant";
+import IconMessage from "./svg/IconMessage";
+import IconMessageLegal from "./svg/IconMessageLegal";
 import IconNavMessages from "./svg/IconNavMessages";
-import IconNavWallet from "./svg/IconNavWallet";
+import IconNavMessagesFocused from "./svg/IconNavMessagesFocused";
+import IconNavProfile from "./svg/IconNavProfile";
+import IconNavProfileFocused from "./svg/IconNavProfileFocused";
 import IconNavScan from "./svg/IconNavScan";
 import IconNavServices from "./svg/IconNavServices";
-import IconNavProfile from "./svg/IconNavProfile";
-import IconNavMessagesFocused from "./svg/IconNavMessagesFocused";
-import IconNavWalletFocused from "./svg/IconNavWalletFocused";
 import IconNavServicesFocused from "./svg/IconNavServicesFocused";
-import IconNavProfileFocused from "./svg/IconNavProfileFocused";
-import IconBiomFingerprint from "./svg/IconBiomFingerprint";
-import IconBiomFaceID from "./svg/IconBiomFaceID";
-import IconCategCulture from "./svg/IconCategCulture";
-import IconCategWellness from "./svg/IconCategWellness";
-import IconCategLearning from "./svg/IconCategLearning";
-import IconCategSport from "./svg/IconCategSport";
-import IconCategHome from "./svg/IconCategHome";
-import IconCategTelco from "./svg/IconCategTelco";
-import IconCategFinance from "./svg/IconCategFinance";
-import IconCategTravel from "./svg/IconCategTravel";
-import IconCategMobility from "./svg/IconCategMobility";
-import IconCategJobOffers from "./svg/IconCategJobOffers";
-import IconCategShopping from "./svg/IconCategShopping";
-import IconCategSustainability from "./svg/IconCategSustainability";
+import IconNavWallet from "./svg/IconNavWallet";
+import IconNavWalletFocused from "./svg/IconNavWalletFocused";
+import IconNotice from "./svg/IconNotice";
+import IconNoticeFilled from "./svg/IconNoticeFilled";
+import IconOk from "./svg/IconOk";
+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 IconProductIOApp from "./svg/IconProductIOApp";
 import IconProductIOAppBlueBg from "./svg/IconProductIOAppBlueBg";
 import IconProductPagoPA from "./svg/IconProductPagoPA";
-import IconWebsite from "./svg/IconWebsite";
+import IconProfile from "./svg/IconProfile";
+import IconProfileAlt from "./svg/IconProfileAlt";
+import IconProfileFilled from "./svg/IconProfileFilled";
+import IconQrCode from "./svg/IconQrCode";
+import IconQuestion from "./svg/IconQuestion";
+import IconRefund from "./svg/IconRefund";
+import IconReload from "./svg/IconReload";
+import IconSave from "./svg/IconSave";
+import IconSearch from "./svg/IconSearch";
 import IconSecurity from "./svg/IconSecurity";
-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 IconSelfCertification from "./svg/IconSelfCertification";
+import IconShareAndroid from "./svg/IconShareAndroid";
+import IconShareiOs from "./svg/IconShareiOs";
+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 IconSystemNotificationsInstructions from "./svg/IconSystemNotificationsInstructions";
 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";
-import IconArchive from "./svg/IconArchive";
+import IconTag from "./svg/IconTag";
+import IconTransactions from "./svg/IconTransactions";
+import IconTrashcan from "./svg/IconTrashcan";
+import IconWarningFilled from "./svg/IconWarningFilled";
+import IconWebsite from "./svg/IconWebsite";
+import LegIconCheckOff from "./svg/LegIconCheckOff";
+import LegIconCheckOn from "./svg/LegIconCheckOn";
+import LegIconRadioOff from "./svg/LegIconRadioOff";
+import LegIconRadioOn from "./svg/LegIconRadioOn";
 
 export const IOIcons = {
   archive: IconArchive,
@@ -284,6 +286,8 @@ export const IOIcons = {
   checkTick: IconCheckTick,
   checkTickBig: IconCheckTickBig,
   merchant: IconMerchant,
+  light: IconLight,
+  lightFilled: IconLightFilled,
   systemSettingsAndroid: IconSystemSettingsAndroid,
   systemSettingsiOS: IconSystemSettingsiOS,
   systemToggleInstructions: IconSystemToggleInstructions,

package/src/components/icons/index.tsx

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

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconLadybug = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.52556 7.36919L5 4.02177V2H19V4.02177L15.4862 7.35806L15.4817 7.36231C14.8473 7.96113 14.5 8.79051 14.5 9.64538V22H9.5V9.64538C9.5 8.78028 9.14259 7.95878 8.52556 7.36919ZM16.8562 8.81519L20.6438 5.21888C20.87 5.00278 21 4.70203 21 4.38868V1.13994C21 0.509642 20.496 0 19.8728 0H4.12723C3.50396 0 3 0.509642 3 1.13994V4.38868C3 4.70383 3.12822 5.00458 3.35615 5.21888L7.14385 8.81519C7.37 9.03129 7.5 9.33203 7.5 9.64538V22.8601C7.5 23.4904 8.00396 24 8.62723 24H15.3728C15.996 24 16.5 23.4904 16.5 22.8601V9.64538C16.5 9.33023 16.6282 9.02949 16.8562 8.81519ZM11.0098 9.82483V8.07369C11.0098 7.52736 11.4527 7.08447 11.999 7.08447C12.5453 7.08447 12.9882 7.52736 12.9882 8.07369V9.82483C12.9882 10.3712 12.5453 10.814 11.999 10.814C11.4527 10.814 11.0098 10.3712 11.0098 9.82483Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconLadybug;

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconLadybug = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M19.8728 0H4.12723C3.50396 0 3 0.509642 3 1.13994V4.38868C3 4.70383 3.12822 5.00458 3.35615 5.21888L7.14385 8.81519C7.37 9.03129 7.5 9.33203 7.5 9.64538V22.8601C7.5 23.4904 8.00396 24 8.62723 24H15.3728C15.996 24 16.5 23.4904 16.5 22.8601V9.64538C16.5 9.33023 16.6282 9.02949 16.8562 8.81519L20.6438 5.21888C20.87 5.00278 21 4.70203 21 4.38868V1.13994C21 0.509642 20.496 0 19.8728 0ZM12.9883 9.82492C12.9883 10.3712 12.5454 10.8141 11.9991 10.8141C11.4528 10.8141 11.0099 10.3712 11.0099 9.82492V8.07378C11.0099 7.52745 11.4528 7.08457 11.9991 7.08457C12.5454 7.08457 12.9883 7.52745 12.9883 8.07378V9.82492Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconLadybug;

package/src/components/icons/svg/originals/IconLight.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.52556 7.36919L5 4.02177V2H19V4.02177L15.4862 7.35806L15.4817 7.36231C14.8473 7.96113 14.5 8.79051 14.5 9.64538V22H9.5V9.64538C9.5 8.78028 9.14259 7.95878 8.52556 7.36919ZM16.8562 8.81519L20.6438 5.21888C20.87 5.00278 21 4.70203 21 4.38868V1.13994C21 0.509642 20.496 0 19.8728 0H4.12723C3.50396 0 3 0.509642 3 1.13994V4.38868C3 4.70383 3.12822 5.00458 3.35615 5.21888L7.14385 8.81519C7.37 9.03129 7.5 9.33203 7.5 9.64538V22.8601C7.5 23.4904 8.00396 24 8.62723 24H15.3728C15.996 24 16.5 23.4904 16.5 22.8601V9.64538C16.5 9.33023 16.6282 9.02949 16.8562 8.81519ZM11.0098 9.82483V8.07369C11.0098 7.52736 11.4527 7.08447 11.999 7.08447C12.5453 7.08447 12.9882 7.52736 12.9882 8.07369V9.82483C12.9882 10.3712 12.5453 10.814 11.999 10.814C11.4527 10.814 11.0098 10.3712 11.0098 9.82483Z" fill="white"/>
+</svg>

package/src/components/icons/svg/originals/IconLightFilled.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.8728 0H4.12723C3.50396 0 3 0.509642 3 1.13994V4.38868C3 4.70383 3.12822 5.00458 3.35615 5.21888L7.14385 8.81519C7.37 9.03129 7.5 9.33203 7.5 9.64538V22.8601C7.5 23.4904 8.00396 24 8.62723 24H15.3728C15.996 24 16.5 23.4904 16.5 22.8601V9.64538C16.5 9.33023 16.6282 9.02949 16.8562 8.81519L20.6438 5.21888C20.87 5.00278 21 4.70203 21 4.38868V1.13994C21 0.509642 20.496 0 19.8728 0ZM12.9883 9.82492C12.9883 10.3712 12.5454 10.8141 11.9991 10.8141C11.4528 10.8141 11.0099 10.3712 11.0099 9.82492V8.07378C11.0099 7.52745 11.4528 7.08457 11.9991 7.08457C12.5454 7.08457 12.9883 7.52745 12.9883 8.07378V9.82492Z" fill="white"/>
+</svg>

package/src/components/index.tsx

@@ -15,4 +15,5 @@ export * from "./radio";
 export * from "./spacer";
 export * from "./switch";
 export * from "./tag";
+export * from "./tabs";
 export * from "./typography";

package/src/components/listitems/ListItemAction.tsx

@@ -1,154 +1,155 @@
 import React, { useCallback } from "react";
 import {
-    GestureResponderEvent,
-    Pressable,
-    StyleSheet,
-    Text,
-    View
+  GestureResponderEvent,
+  Pressable,
+  StyleSheet,
+  Text,
+  View
 } from "react-native";
 import Animated, {
-    Extrapolate,
-    interpolate,
-    interpolateColor,
-    useAnimatedStyle,
-    useDerivedValue,
-    useSharedValue,
-    withSpring
+  Extrapolate,
+  interpolate,
+  interpolateColor,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withSpring
 } from "react-native-reanimated";
 import {
-    IOColors,
-    IOListItemStyles,
-    IOListItemVisualParams,
-    IOScaleValues,
-    IOSpringValues,
-    IOStyles,
-    hexToRgba, useIOTheme
+  IOColors,
+  IOListItemStyles,
+  IOListItemVisualParams,
+  IOScaleValues,
+  IOSpringValues,
+  IOStyles,
+  hexToRgba,
+  useIOTheme
 } from "../../core";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { AnimatedIcon, IOIcons } from "../icons";
 
 export type ListItemAction = WithTestID<{
-    label: string;
-    variant: "primary" | "danger";
-    onPress: (event: GestureResponderEvent) => void;
-    icon?: IOIcons;
-    // Accessibility
-    accessibilityLabel: string;
+  label: string;
+  variant: "primary" | "danger";
+  onPress: (event: GestureResponderEvent) => void;
+  icon?: IOIcons;
+  // Accessibility
+  accessibilityLabel: string;
 }>;
 
 const styles = StyleSheet.create({
-    label: {
-        fontSize: 16,
-        lineHeight: 20,
-        ...makeFontStyleObject("Regular", false, "ReadexPro")
-    },
+  label: {
+    fontSize: 16,
+    lineHeight: 20,
+    ...makeFontStyleObject("Regular", false, "ReadexPro")
+  }
 });
 
 export const ListItemAction = ({
-    variant,
-    label,
-    onPress,
-    icon,
-    accessibilityLabel,
-    testID
+  variant,
+  label,
+  onPress,
+  icon,
+  accessibilityLabel,
+  testID
 }: ListItemAction) => {
-    const isPressed = useSharedValue(0);
+  const isPressed = useSharedValue(0);
 
-    const theme = useIOTheme();
+  const theme = useIOTheme();
 
-    const mapBackgroundStates: Record<string, string> = {
-        default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
-        pressed: IOColors[theme["listItem-pressed"]]
-    };
+  const mapBackgroundStates: Record<string, string> = {
+    default: hexToRgba(IOColors[theme["listItem-pressed"]], 0),
+    pressed: IOColors[theme["listItem-pressed"]]
+  };
 
-    const mapForegroundColor: Record<
-        NonNullable<ListItemAction["variant"]>,
-        string
-    > = {
-        primary: IOColors[theme["interactiveElem-default"]],
-        danger: IOColors[theme.errorText]
-    };
+  const mapForegroundColor: Record<
+    NonNullable<ListItemAction["variant"]>,
+    string
+  > = {
+    primary: IOColors[theme["interactiveElem-default"]],
+    danger: IOColors[theme.errorText]
+  };
 
-    // Scaling transformation applied when the button is pressed
-    const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
+  // Scaling transformation applied when the button is pressed
+  const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
 
-    const progressPressed = useDerivedValue(() =>
-        withSpring(isPressed.value, IOSpringValues.button)
-    );
+  const progressPressed = useDerivedValue(() =>
+    withSpring(isPressed.value, IOSpringValues.button)
+  );
 
-    // Interpolate animation values from `isPressed` values
-    const animatedScaleStyle = useAnimatedStyle(() => {
-        const scale = interpolate(
-            progressPressed.value,
-            [0, 1],
-            [1, animationScaleValue],
-            Extrapolate.CLAMP
-        );
+  // Interpolate animation values from `isPressed` values
+  const animatedScaleStyle = useAnimatedStyle(() => {
+    const scale = interpolate(
+      progressPressed.value,
+      [0, 1],
+      [1, animationScaleValue],
+      Extrapolate.CLAMP
+    );
 
-        return {
-            transform: [{ scale }]
-        };
-    });
+    return {
+      transform: [{ scale }]
+    };
+  });
 
-    const animatedBackgroundStyle = useAnimatedStyle(() => {
-        const backgroundColor = interpolateColor(
-            progressPressed.value,
-            [0, 1],
-            [mapBackgroundStates.default, mapBackgroundStates.pressed]
-        );
+  const animatedBackgroundStyle = useAnimatedStyle(() => {
+    const backgroundColor = interpolateColor(
+      progressPressed.value,
+      [0, 1],
+      [mapBackgroundStates.default, mapBackgroundStates.pressed]
+    );
 
-        return {
-            backgroundColor
-        };
-    });
+    return {
+      backgroundColor
+    };
+  });
 
-    const handlePressIn = useCallback(() => {
-        // eslint-disable-next-line functional/immutable-data
-        isPressed.value = 1;
-    }, [isPressed]);
-    const handlePressOut = useCallback(() => {
-        // eslint-disable-next-line functional/immutable-data
-        isPressed.value = 0;
-    }, [isPressed]);
+  const handlePressIn = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 1;
+  }, [isPressed]);
+  const handlePressOut = useCallback(() => {
+    // eslint-disable-next-line functional/immutable-data
+    isPressed.value = 0;
+  }, [isPressed]);
 
-    return (
-        <Pressable
-            onPress={onPress}
-            onPressIn={handlePressIn}
-            onPressOut={handlePressOut}
-            onTouchEnd={handlePressOut}
-            accessible={true}
-            accessibilityLabel={accessibilityLabel}
-            accessibilityRole="button"
-            testID={testID}
+  return (
+    <Pressable
+      onPress={onPress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      onTouchEnd={handlePressOut}
+      accessible={true}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      testID={testID}
+    >
+      <Animated.View
+        style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
+      >
+        <Animated.View
+          style={[IOListItemStyles.listItemInner, animatedScaleStyle]}
         >
-            <Animated.View
-                style={[IOListItemStyles.listItem, animatedBackgroundStyle]}
+          {icon && (
+            <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
+              <AnimatedIcon
+                name={icon}
+                color={mapForegroundColor[variant] as IOColors}
+                size={IOListItemVisualParams.iconSize}
+              />
+            </View>
+          )}
+          <View style={IOStyles.flex}>
+            <Text
+              style={[styles.label, { color: mapForegroundColor[variant] }]}
             >
-                <Animated.View
-                    style={[IOListItemStyles.listItemInner, animatedScaleStyle]}
-                >
-                    {icon && (
-                        <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-                            <AnimatedIcon
-                                name={icon}
-                                color={mapForegroundColor[variant] as IOColors}
-                                size={IOListItemVisualParams.iconSize}
-                            />
-                        </View>
-                    )}
-                    <View style={IOStyles.flex}>
-                        <Text
-                            style={[styles.label, { color: mapForegroundColor[variant] }]}
-                        >
-                            {label}
-                        </Text>
-                    </View>
-                </Animated.View>
-            </Animated.View>
-        </Pressable>
-    );
+              {label}
+            </Text>
+          </View>
+        </Animated.View>
+      </Animated.View>
+    </Pressable>
+  );
 };
 
 export default ListItemAction;