@pagopa/io-app-design-system 2.1.0-3 → 2.1.1

package/lib/typescript/components/typography/IOText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IOText.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/IOText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAuB,MAAM,OAAO,CAAC;AACnE,OAAO,EAEL,qBAAqB,EACrB,IAAI,EACJ,SAAS,EACT,IAAI,EACL,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,QAAQ,EAAuC,MAAM,YAAY,CAAC;AAE3E,OAAO,EACL,YAAY,EACZ,UAAU,EACV,YAAY,EAEb,MAAM,mBAAmB,CAAC;AAE3B;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,SAAS,EACT,YAAY,GAAG,UAAU,GAAG,YAAY,GAAG,YAAY,GAAG,WAAW,CACtE,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACtC,WAAW,EACX,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,GAAG,WAAW,CAC5E,GAAG;IAAE,SAAS,CAAC,EAAE,WAAW,CAAC;IAAC,KAAK,CAAC,EAAE,WAAW,CAAA;CAAE,GAAG;IACrD,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;CAClC,CAAC;AAEF;;;GAGG;AACH,KAAK,eAAe,GAAG;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF,KAAK,mBAAmB,GAAG,IAAI,CAC7B,cAAc,CAAC,OAAO,IAAI,CAAC,EAC3B,kBAAkB,GAAG,uBAAuB,GAAG,OAAO,CACvD,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG,mBAAmB,CAAC;AAEhE;;;GAGG;AACH,MAAM,MAAM,2BAA2B,GACnC;IACE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,MAAM,EAAE,IAAI,CAAC;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACjD,GACD;IAAE,KAAK,CAAC,EAAE,QAAQ,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAezC;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,oGAoElB,CAAC"}
+{"version":3,"file":"IOText.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/IOText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAuB,MAAM,OAAO,CAAC;AACnE,OAAO,EAEL,qBAAqB,EACrB,IAAI,EACJ,SAAS,EACT,IAAI,EACL,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,QAAQ,EAAuC,MAAM,YAAY,CAAC;AAE3E,OAAO,EACL,YAAY,EACZ,UAAU,EACV,YAAY,EAEb,MAAM,mBAAmB,CAAC;AAE3B;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,SAAS,EACT,YAAY,GAAG,UAAU,GAAG,YAAY,GAAG,YAAY,GAAG,WAAW,CACtE,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACtC,WAAW,EACX,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,GAAG,WAAW,CAC5E,GAAG;IAAE,SAAS,CAAC,EAAE,WAAW,CAAC;IAAC,KAAK,CAAC,EAAE,WAAW,CAAA;CAAE,GAAG;IACrD,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;CAClC,CAAC;AAEF;;;GAGG;AACH,KAAK,eAAe,GAAG;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF,KAAK,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC;AAEtE,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG,mBAAmB,CAAC;AAEhE;;;GAGG;AACH,MAAM,MAAM,2BAA2B,GACnC;IACE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,MAAM,EAAE,IAAI,CAAC;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACjD,GACD;IAAE,KAAK,CAAC,EAAE,QAAQ,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAezC;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,oGAsElB,CAAC"}

package/lib/typescript/components/typography/__test__/ComposedBodyFromArray.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ComposedBodyFromArray.test.d.ts.map

package/lib/typescript/components/typography/__test__/ComposedBodyFromArray.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComposedBodyFromArray.test.d.ts","sourceRoot":"","sources":["../../../../../src/components/typography/__test__/ComposedBodyFromArray.test.tsx"],"names":[],"mappings":""}

package/lib/typescript/components/typography/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./BaseTypography";
 export * from "./IOText";
 export * from "./Body";
+export * from "./ComposedBodyFromArray";
 export * from "./Caption";
 export * from "./Chip";
 export * from "./ButtonText";

package/lib/typescript/components/typography/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/index.tsx"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/index.tsx"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,yBAAyB,CAAC;AACxC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC"}

package/lib/typescript/core/IODSExperimentalContextProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IODSExperimentalContextProvider.d.ts","sourceRoot":"","sources":["../../../src/core/IODSExperimentalContextProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,yBAAyB,GAAG;IAC/B,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAC;CACpD,CAAC;AACF;;GAEG;AACH,eAAO,MAAM,2BAA2B,0CAIpC,CAAC;AAEL,eAAO,MAAM,uBAAuB,iCACW,CAAC;AAEhD,KAAK,kCAAkC,GAAG;IACxC,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,+BAA+B,uCAGzC,MAAM,iBAAiB,CAAC,kCAAkC,CAAC,sBAY7D,CAAC"}
+{"version":3,"file":"IODSExperimentalContextProvider.d.ts","sourceRoot":"","sources":["../../../src/core/IODSExperimentalContextProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,yBAAyB,GAAG;IAC/B,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,CAAC,cAAc,EAAE,OAAO,KAAK,IAAI,CAAC;CACpD,CAAC;AACF;;GAEG;AACH,eAAO,MAAM,2BAA2B,0CAIpC,CAAC;AAEL,eAAO,MAAM,uBAAuB,iCACW,CAAC;AAEhD,KAAK,kCAAkC,GAAG;IACxC,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,+BAA+B,uCAGzC,MAAM,iBAAiB,CAAC,kCAAkC,CAAC,sBAY7D,CAAC"}

package/lib/typescript/core/IOThemeContextProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IOThemeContextProvider.d.ts","sourceRoot":"","sources":["../../../src/core/IOThemeContextProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EACL,OAAO,EAIR,MAAM,YAAY,CAAC;AAGpB,eAAO,MAAM,QAAQ;;;CAA6C,CAAC;AACnE,eAAO,MAAM,cAAc;;;CAAmD,CAAC;AAC/E,KAAK,WAAW,GAAG,MAAM,OAAO,QAAQ,CAAC;AAEzC,KAAK,kBAAkB,GAAG;IACxB,SAAS,EAAE,WAAW,CAAC;IACvB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAMzD,CAAC;AAEL,eAAO,MAAM,iBAAiB,0BAAyC,CAAC;AAExE,eAAO,MAAM,UAAU,eAAkC,CAAC;AAE1D,KAAK,2BAA2B,GAAG;IACjC,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,sBAAsB,wBAGhC,MAAM,iBAAiB,CAAC,2BAA2B,CAAC,sBAsBtD,CAAC"}
+{"version":3,"file":"IOThemeContextProvider.d.ts","sourceRoot":"","sources":["../../../src/core/IOThemeContextProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EACL,OAAO,EAIR,MAAM,YAAY,CAAC;AAGpB,eAAO,MAAM,QAAQ;;;CAA6C,CAAC;AACnE,eAAO,MAAM,cAAc;;;CAAmD,CAAC;AAC/E,KAAK,WAAW,GAAG,MAAM,OAAO,QAAQ,CAAC;AAEzC,KAAK,kBAAkB,GAAG;IACxB,SAAS,EAAE,WAAW,CAAC;IACvB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAMzD,CAAC;AAEL,eAAO,MAAM,iBAAiB,0BAAyC,CAAC;AAExE,eAAO,MAAM,UAAU,eAAkC,CAAC;AAE1D,KAAK,2BAA2B,GAAG;IACjC,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,sBAAsB,wBAGhC,MAAM,iBAAiB,CAAC,2BAA2B,CAAC,sBAsBtD,CAAC"}

package/lib/typescript/utils/accessibility.d.ts

@@ -1,8 +1,3 @@
-/**
- * This function is used to get the text that will be read by the screen reader
- * with the correct minus symbol pronunciation.
- */
-export declare const getAccessibleAmountText: (amount?: string) => string | undefined;
 /**
  * Query whether a bold text is currently enabled. The result is true
  * when bold text is enabled and false otherwise.

package/lib/typescript/utils/accessibility.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accessibility.d.ts","sourceRoot":"","sources":["../../../src/utils/accessibility.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,eAAO,MAAM,uBAAuB,YAAa,MAAM,uBAQpD,CAAC;AAEJ;;;GAGG;AACH,eAAO,MAAM,kBAAkB,eA0B9B,CAAC"}
+{"version":3,"file":"accessibility.d.ts","sourceRoot":"","sources":["../../../src/utils/accessibility.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,kBAAkB,eA0B9B,CAAC"}

package/lib/typescript/utils/image.d.ts

@@ -1,4 +1,4 @@
-import { ImageURISource } from "react-native";
+import { ImageSourcePropType } from "react-native";
 /**
  * Adds a locale timestamp to the image URI to invalidate cache on the following day if the current platform is Android.
  * Useful to bypass React Native Image component aggressive cache on Android.
@@ -6,5 +6,5 @@ import { ImageURISource } from "react-native";
  * @returns a new source with a modified URI which includes the actual timestamp in the locale format without slashes
  * if the platform is Android and the source contains an URI. The same source otherwise.
  */
-export declare const addCacheTimestampToUri: (source: ImageURISource) => ImageURISource;
+export declare const addCacheTimestampToUri: (source: ImageSourcePropType) => ImageSourcePropType;
 //# sourceMappingURL=image.d.ts.map

package/lib/typescript/utils/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/utils/image.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAY,MAAM,cAAc,CAAC;AAMxD;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,WAAY,cAAc,mBAuB5D,CAAC"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/utils/image.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAY,MAAM,cAAc,CAAC;AAE7D;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,WAAY,mBAAmB,wBA4BjE,CAAC"}

package/lib/typescript/utils/object.d.ts

@@ -1,5 +1,4 @@
-import * as O from "fp-ts/Option";
 export declare const findFirstCaseInsensitive: <T>(obj: {
     [key: string]: T;
-}) => (key: string) => O.Option<[string, T]>;
+}, key: string) => string | null;
 //# sourceMappingURL=object.d.ts.map

package/lib/typescript/utils/object.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"object.d.ts","sourceRoot":"","sources":["../../../src/utils/object.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAGlC,eAAO,MAAM,wBAAwB,WAC1B;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,CAAA;CAAE,WACvB,MAAM,KAAG,EAAE,MAAM,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,CAKhC,CAAC"}
+{"version":3,"file":"object.d.ts","sourceRoot":"","sources":["../../../src/utils/object.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,wBAAwB,WAC9B;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,CAAA;CAAE,OACpB,MAAM,kBASZ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "2.1.0-3",
+  "version": "2.1.1",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -100,7 +100,6 @@
     "react-dom": "^18.2.0",
     "react-native": "0.71.8",
     "react-native-builder-bob": "^0.20.0",
-    "react-native-i18n": "^2.0.15",
     "react-native-web": "^0.18.12",
     "react-native-web-linear-gradient": "^1.1.2",
     "react-test-renderer": "^18.2.0",
@@ -181,9 +180,7 @@
     ]
   },
   "dependencies": {
-    "@pagopa/ts-commons": "^12.0.0",
     "@testing-library/jest-native": "^5.4.2",
-    "@types/react-native-i18n": "2.0.0",
     "@types/react-test-renderer": "^18.0.0",
     "auto-changelog": "^2.4.0",
     "lodash": "^4.17.21",
@@ -191,7 +188,7 @@
     "react-native-gesture-handler": "^2.12.0",
     "react-native-haptic-feedback": "^2.0.2",
     "react-native-linear-gradient": "^2.5.6",
-    "react-native-reanimated": "3.12.0",
+    "react-native-reanimated": "3.15.0",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-svg": "^15.1.0",
     "rn-placeholder": "1.3.3"

package/src/components/alert/Alert.tsx

@@ -1,13 +1,16 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import {
   GestureResponderEvent,
+  NativeSyntheticEvent,
   PixelRatio,
   Pressable,
   StyleSheet,
+  TextLayoutEventData,
   View
 } from "react-native";
 import Animated, {
-  Extrapolate,
+  Extrapolation,
+  SharedValue,
   interpolate,
   useAnimatedStyle,
   useDerivedValue,
@@ -119,7 +122,16 @@ export const Alert = React.forwardRef<View, AlertType>(
     }: AlertType,
     viewRef
   ): JSX.Element => {
-    const isPressed: Animated.SharedValue<number> = useSharedValue(0);
+    const isPressed: SharedValue<number> = useSharedValue(0);
+
+    const [isMultiline, setIsMultiline] = useState(false);
+
+    const onTextLayout = useCallback(
+      (event: NativeSyntheticEvent<TextLayoutEventData>) => {
+        setIsMultiline(event.nativeEvent.lines.length > 1);
+      },
+      []
+    );
 
     // Scaling transformation applied when the button is pressed
     const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
@@ -136,7 +148,7 @@ export const Alert = React.forwardRef<View, AlertType>(
         progressPressed.value,
         [0, 1],
         [1, animationScaleValue],
-        Extrapolate.CLAMP
+        Extrapolation.CLAMP
       );
 
       return {
@@ -155,7 +167,12 @@ export const Alert = React.forwardRef<View, AlertType>(
 
     const renderMainBlock = () => (
       <>
-        <View style={{ marginRight: IOVisualCostants.iconMargin }}>
+        <View
+          style={{
+            marginRight: IOVisualCostants.iconMargin,
+            alignSelf: "flex-start"
+          }}
+        >
           <Icon
             name={mapVariantStates[variant].icon}
             size={iconSize}
@@ -168,8 +185,10 @@ export const Alert = React.forwardRef<View, AlertType>(
       Tested on both Android and iOS. */}
         <View
           style={[
-            !title && { marginTop: -5 * PixelRatio.getFontScale() },
-            { marginBottom: -3 * PixelRatio.getFontScale(), flex: 1 }
+            !title &&
+              isMultiline && { marginTop: -5 * PixelRatio.getFontScale() },
+            isMultiline && { marginBottom: -3 * PixelRatio.getFontScale() },
+            { flex: 1 }
           ]}
         >
           {title && (
@@ -182,6 +201,7 @@ export const Alert = React.forwardRef<View, AlertType>(
             color={mapVariantStates[variant].foreground}
             weight={"Regular"}
             accessibilityRole="text"
+            onTextLayout={onTextLayout}
           >
             {content}
           </Label>

package/src/components/banner/Banner.tsx

@@ -157,7 +157,7 @@ export const Banner = ({
   onClose,
   accessibilityHint,
   accessibilityLabel,
-  testID
+  testID,
 }: Banner) => {
   const isPressed: Animated.SharedValue<number> = useSharedValue(0);
 
@@ -195,13 +195,17 @@ export const Banner = ({
     isPressed.value = 0;
   }, [isPressed]);
 
+  /* Generates a complete fallbackAccessibilityLabel by concatenating the title, content, and action
+   if they are present. */
+  const fallbackAccessibilityLabel = [title, content, action].filter(Boolean).join(" ");
+
   const renderMainBlock = () => (
     <>
       <View
         style={[IOStyles.flex, IOStyles.selfCenter]}
         accessible={true}
         // A11y related props
-        accessibilityLabel={accessibilityLabel}
+        accessibilityLabel={accessibilityLabel ?? fallbackAccessibilityLabel}
         accessibilityHint={accessibilityHint}
         accessibilityRole={action !== undefined ? "button" : undefined}
       >

package/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap

@@ -58,6 +58,7 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
     }
   >
     <View
+      accessibilityLabel="Action text"
       accessibilityRole="button"
       accessible={true}
       style={
@@ -407,6 +408,7 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
     }
   >
     <View
+      accessibilityLabel="Action text"
       accessibilityRole="button"
       accessible={true}
       style={

package/src/components/banner/__test__/banner.test.tsx

@@ -18,6 +18,7 @@ describe("Test Banner Components", () => {
         pictogramName="charity"
         action="Action text"
         onPress={onLinkPress}
+        accessibilityLabel="Action text"
       />
     ).toJSON();
     expect(advice).toMatchSnapshot();
@@ -34,6 +35,7 @@ describe("Test Banner Components - Experimental Enabled", () => {
         pictogramName="charity"
         action="Action text"
         onPress={onLinkPress}
+        accessibilityLabel="Action text"
       />
     ).toJSON();
     expect(advice).toMatchSnapshot();

package/src/components/codeInput/CodeInput.tsx

@@ -24,7 +24,7 @@ const styles = StyleSheet.create({
     borderWidth: 2
   },
   dotEmpty: {
-    borderColor: IOColors["grey-200"]
+    borderColor: IOColors["grey-650"]
   },
   wrapper: {
     justifyContent: "center"

package/src/components/common/LogoPaymentWithFallback.tsx

@@ -1,7 +1,4 @@
-import * as O from "fp-ts/lib/Option";
-import { pipe } from "fp-ts/lib/function";
 import * as React from "react";
-import { findFirstCaseInsensitive } from "../../utils/object";
 import { IOColors } from "../../core";
 import { IOIconSizeScale, Icon } from "../icons";
 import {
@@ -12,6 +9,7 @@ import {
   LogoPayment,
   LogoPaymentExt
 } from "../logos";
+import { findFirstCaseInsensitive } from "../../utils/object";
 
 export type LogoPaymentWithFallback = {
   brand?: string;
@@ -42,19 +40,19 @@ export const LogoPaymentWithFallback = ({
 }: LogoPaymentWithFallback) => {
   const logos = isExtended ? IOPaymentExtLogos : IOPaymentLogos;
 
-  return pipe(
-    brand,
-    O.fromNullable,
-    O.chain(findFirstCaseInsensitive(logos)),
-    O.map(([brand]) => brand),
-    O.fold(
-      () => <Icon name="creditCard" size={size} color={fallbackIconColor} />,
-      brand =>
-        isExtended ? (
-          <LogoPaymentExt name={brand as IOLogoPaymentExtType} size={size} />
-        ) : (
-          <LogoPayment name={brand as IOLogoPaymentType} size={size} />
-        )
-    )
+  if (!brand) {
+    return <Icon name="creditCard" size={size} color={fallbackIconColor} />;
+  }
+
+  const findCase = findFirstCaseInsensitive(logos, brand);
+
+  if (!findCase) {
+    return <Icon name="creditCard" size={size} color={fallbackIconColor} />;
+  }
+
+  return isExtended ? (
+    <LogoPaymentExt name={findCase as IOLogoPaymentExtType} size={size} />
+  ) : (
+    <LogoPayment name={findCase as IOLogoPaymentType} size={size} />
   );
 };

package/src/components/featureInfo/FeatureInfo.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import { GestureResponderEvent, View } from "react-native";
 import {
   Body,
@@ -16,7 +16,7 @@ import { IOStyles } from "../../core";
 
 type PartialFeatureInfo = {
   // Necessary to render main body with different formatting
-  body?: string | React.ReactNode;
+  body?: string | ReactNode;
 };
 
 type FeatureInfoActionProps =

package/src/components/icons/Icon.tsx

@@ -135,6 +135,7 @@ import IconNavServices from "./svg/IconNavServices";
 import IconNavServicesFocused from "./svg/IconNavServicesFocused";
 import IconNavWallet from "./svg/IconNavWallet";
 import IconNavWalletFocused from "./svg/IconNavWalletFocused";
+import IconNavQrWallet from "./svg/IconNavQrWallet";
 import IconNotes from "./svg/IconNotes";
 import IconNotice from "./svg/IconNotice";
 import IconNoticeFilled from "./svg/IconNoticeFilled";
@@ -199,7 +200,7 @@ import LegIconCheckOff from "./svg/LegIconCheckOff";
 import LegIconCheckOn from "./svg/LegIconCheckOn";
 import LegIconRadioOff from "./svg/LegIconRadioOff";
 import LegIconRadioOn from "./svg/LegIconRadioOn";
-import IconCieLetter from './svg/IconCieLetter';
+import IconCieLetter from "./svg/IconCieLetter";
 
 export const IOIcons = {
   spid: IconSpid,
@@ -360,6 +361,7 @@ export const IOIcons = {
   navMessagesFocused: IconNavMessagesFocused,
   navWallet: IconNavWallet,
   navWalletFocused: IconNavWalletFocused,
+  navQrWallet: IconNavQrWallet,
   navScan: IconNavScan,
   navServices: IconNavServices,
   navServicesFocused: IconNavServicesFocused,
@@ -517,7 +519,8 @@ const {
   navMessagesFocused,
   navWalletFocused,
   navServicesFocused,
-  navProfileFocused
+  navProfileFocused,
+  navQrWallet
 } = IOIcons;
 
 export const IONavIcons = {
@@ -530,7 +533,8 @@ export const IONavIcons = {
   navMessagesFocused,
   navWalletFocused,
   navServicesFocused,
-  navProfileFocused
+  navProfileFocused,
+  navQrWallet
 } as const;
 
 export type IONavIcons = keyof typeof IONavIcons;

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../types";
+
+const IconNavQrWallet = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M14.666 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0 2a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm.886 4.05A8 8 0 0 1 22.666 20a1 1 0 1 0 2 0 10 10 0 0 0-10.347-9.994c.6.531 1.038 1.24 1.233 2.043ZM2.667 18a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-2Zm0 2.25a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25v1.5a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1.5Zm-2-7.25a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-2Zm4 .25a.25.25 0 0 0-.25-.25h-1.5a.25.25 0 0 0-.25.25v1.5c0 .138.112.25.25.25h1.5a.25.25 0 0 0 .25-.25v-1.5Zm5-2.25a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-2Zm0 2.25a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25v1.5a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1.5Zm3 4.75a1 1 0 0 1 1 1v3a2 2 0 0 1-2 2h-3a1 1 0 1 1 0-2h2.75a.25.25 0 0 0 .25-.25V19a1 1 0 0 1 1-1Zm-3 1a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z"
+      clipRule="evenodd"
+    />
+  </Svg>
+);
+
+export default IconNavQrWallet;

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 24"><path fill="#2B2E38" fill-rule="evenodd" d="M14.666 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0 2a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm.886 4.05A8 8 0 0 1 22.666 20a1 1 0 1 0 2 0 10 10 0 0 0-10.347-9.994c.6.531 1.038 1.24 1.233 2.043ZM2.667 18a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-2Zm0 2.25a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25v1.5a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1.5Zm-2-7.25a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-2Zm4 .25a.25.25 0 0 0-.25-.25h-1.5a.25.25 0 0 0-.25.25v1.5c0 .138.112.25.25.25h1.5a.25.25 0 0 0 .25-.25v-1.5Zm5-2.25a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-2Zm0 2.25a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25v1.5a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1.5Zm3 4.75a1 1 0 0 1 1 1v3a2 2 0 0 1-2 2h-3a1 1 0 1 1 0-2h2.75a.25.25 0 0 0 .25-.25V19a1 1 0 0 1 1-1Zm-3 1a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z" clip-rule="evenodd"/></svg>

package/src/components/listitems/ListItemInfo.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentProps, useCallback, useMemo } from "react";
-import { Platform, View } from "react-native";
+import { AccessibilityRole, Platform, View } from "react-native";
 import {
   IOListItemStyles,
   IOListItemVisualParams,
@@ -7,12 +7,12 @@ import {
   useIOTheme
 } from "../../core";
 import { WithTestID } from "../../utils/types";
-import { IOIconSizeScale, IOIcons, Icon } from "../icons";
-import { H6, LabelSmall } from "../typography";
-import { ButtonLink, IconButton } from "../buttons";
 import { Badge } from "../badge";
+import { ButtonLink, IconButton } from "../buttons";
 import { LogoPaymentWithFallback } from "../common/LogoPaymentWithFallback";
+import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { IOLogoPaymentType } from "../logos";
+import { H6, LabelSmall } from "../typography";
 
 type ButtonLinkActionProps = {
   type: "buttonLink";
@@ -41,6 +41,7 @@ export type ListItemInfo = WithTestID<{
   endElement?: EndElementProps;
   // Accessibility
   accessibilityLabel?: string;
+  accessibilityRole?: AccessibilityRole;
 }> &
   (
     | {
@@ -63,6 +64,7 @@ export const ListItemInfo = ({
   paymentLogoIcon,
   endElement,
   accessibilityLabel,
+  accessibilityRole,
   testID
 }: ListItemInfo) => {
   const theme = useIOTheme();
@@ -136,6 +138,7 @@ export const ListItemInfo = ({
       testID={testID}
       accessible={endElement === undefined ? true : false}
       accessibilityLabel={listItemAccessibilityLabel}
+      accessibilityRole={accessibilityRole}
     >
       <View style={IOListItemStyles.listItemInner}>
         {icon && (

package/src/components/listitems/ListItemTransaction.tsx

@@ -1,5 +1,3 @@
-import * as O from "fp-ts/lib/Option";
-import { pipe } from "fp-ts/lib/function";
 import React from "react";
 import { ImageURISource, StyleSheet, View } from "react-native";
 import Placeholder from "rn-placeholder";
@@ -14,8 +12,6 @@ import {
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
-
-import { getAccessibleAmountText } from "../../utils/accessibility";
 import { WithTestID } from "../../utils/types";
 import { isImageUri } from "../../utils/url";
 import { Avatar } from "../avatar/Avatar";
@@ -73,14 +69,20 @@ export type ListItemTransaction = WithTestID<
     accessible?: boolean;
   } & (
       | {
-          transactionStatus: ListItemTransactionStatusWithoutBadge;
+          transaction: {
+            amount: string;
+            amountAccessibilityLabel: string;
+            status: ListItemTransactionStatusWithoutBadge;
+          };
           badgeText?: string;
-          transactionAmount: string;
         }
       | {
-          transactionStatus: ListItemTransactionStatusWithBadge;
+          transaction: {
+            amount?: string;
+            amountAccessibilityLabel?: string;
+            status: ListItemTransactionStatusWithBadge;
+          };
           badgeText: string;
-          transactionAmount?: string;
         }
     )
 >;
@@ -119,20 +121,15 @@ export const ListItemTransaction = ({
   subtitle,
   testID,
   title,
-  transactionAmount,
+  transaction: { amount, amountAccessibilityLabel, status = "success" },
   badgeText,
-  transactionStatus = "success",
   numberOfLines = 2,
   accessible
 }: ListItemTransaction) => {
   const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
 
-  const maybeBadgeText = pipe(
-    badgeText,
-    O.fromNullable,
-    O.getOrElse(() => "-")
-  );
+  const maybeBadgeText = badgeText ?? "-";
 
   if (isLoading) {
     return <SkeletonComponent />;
@@ -147,25 +144,25 @@ export const ListItemTransaction = ({
 
   const ListItemTransactionContent = () => {
     const TransactionAmountOrBadgeComponent = () => {
-      switch (transactionStatus) {
+      switch (status) {
         case "success":
           return (
             <H6
-              accessibilityLabel={getAccessibleAmountText(transactionAmount)}
+              accessibilityLabel={amountAccessibilityLabel}
               color={hasChevronRight ? interactiveColor : amountColor}
               numberOfLines={numberOfLines}
             >
-              {transactionAmount || ""}
+              {amount || ""}
             </H6>
           );
         case "refunded":
           return (
             <H6
-              accessibilityLabel={getAccessibleAmountText(transactionAmount)}
+              accessibilityLabel={amountAccessibilityLabel}
               color={hasChevronRight ? interactiveColor : successColor}
               numberOfLines={numberOfLines}
             >
-              {transactionAmount || ""}
+              {amount || ""}
             </H6>
           );
         case "failure":
@@ -217,33 +214,30 @@ export const ListItemTransaction = ({
     );
   };
 
-  return pipe(
-    onPress,
-    O.fromNullable,
-    O.fold(
-      () => (
-        <View
-          style={IOListItemStyles.listItem}
-          testID={testID}
-          accessible={accessible}
-          accessibilityLabel={accessibilityLabel}
-        >
-          <View style={IOListItemStyles.listItemInner}>
-            <ListItemTransactionContent />
-          </View>
-        </View>
-      ),
-      onPress => (
-        <PressableListItemBase
-          onPress={onPress}
-          testID={testID}
-          accessibilityLabel={accessibilityLabel}
-        >
+  if (onPress) {
+    return (
+      <PressableListItemBase
+        onPress={onPress}
+        testID={testID}
+        accessibilityLabel={accessibilityLabel}
+      >
+        <ListItemTransactionContent />
+      </PressableListItemBase>
+    );
+  } else {
+    return (
+      <View
+        style={IOListItemStyles.listItem}
+        testID={testID}
+        accessible={accessible}
+        accessibilityLabel={accessibilityLabel}
+      >
+        <View style={IOListItemStyles.listItemInner}>
           <ListItemTransactionContent />
-        </PressableListItemBase>
-      )
-    )
-  );
+        </View>
+      </View>
+    );
+  }
 };
 
 const SkeletonComponent = () => (

package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap

@@ -187,11 +187,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemIDP Snapshot
     />
     <Image
       accessibilityIgnoresInvertColors={true}
-      source={
-        {
-          "uri": "undefined",
-        }
-      }
       style={
         {
           "height": 30,
@@ -1884,11 +1879,6 @@ exports[`Test List Item Components ListItemIDP Snapshot 1`] = `
     />
     <Image
       accessibilityIgnoresInvertColors={true}
-      source={
-        {
-          "uri": "undefined",
-        }
-      }
       style={
         {
           "height": 30,