@pagopa/io-app-design-system 5.3.1 → 5.3.2

package/lib/module/components/banner/BannerErrorState.js

@@ -0,0 +1,124 @@
+"use strict";
+
+import React from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
+import { hexToRgba, IOBannerBigSpacing, IOBannerRadius, IOColors, useIOTheme, useIOThemeContext } from "../../core";
+import { Icon } from "../icons";
+import { useScaleAnimation } from "../../hooks";
+import { VSpacer } from "../spacer";
+import { Body } from "../typography";
+import { ButtonLink } from "../buttons";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignContent: "center",
+    borderRadius: IOBannerRadius,
+    borderCurve: "continuous",
+    padding: IOBannerBigSpacing
+  }
+});
+
+/* Component Types */
+
+/**
+ ** TODO: Move it to the `io-app-design-system` package
+ */
+export const BannerErrorState = ({
+  viewRef,
+  icon = "warningFilled",
+  label,
+  actionText,
+  onPress,
+  accessibilityHint,
+  accessibilityLabel,
+  testID
+}) => {
+  const {
+    onPressIn,
+    onPressOut,
+    scaleAnimatedStyle
+  } = useScaleAnimation("medium");
+  const theme = useIOTheme();
+  const {
+    themeType
+  } = useIOThemeContext();
+
+  /* Styles */
+  const foregroundColor = theme["textBody-tertiary"];
+  const backgroundColor = "grey-50";
+  const dynamicContainerStyles = {
+    backgroundColor: themeType === "dark" ? hexToRgba(IOColors[backgroundColor], 0.1) : IOColors[backgroundColor]
+  };
+  const renderMainBlock = () => /*#__PURE__*/_jsxs(View, {
+    style: {
+      flex: 1,
+      alignItems: "center",
+      gap: 8
+    },
+    accessible: true
+    // A11y related props
+    ,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    accessibilityRole: actionText !== undefined ? "button" : undefined,
+    children: [icon && /*#__PURE__*/_jsx(Icon, {
+      name: icon,
+      size: 24,
+      color: foregroundColor
+    }), label && /*#__PURE__*/_jsx(Body, {
+      color: foregroundColor,
+      textStyle: {
+        textAlign: "center"
+      },
+      children: label
+    }), actionText &&
+    /*#__PURE__*/
+    /* Disable pointer events to avoid
+        pressed state on the button */
+    _jsxs(View, {
+      pointerEvents: "none",
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      children: [/*#__PURE__*/_jsx(VSpacer, {
+        size: 4
+      }), /*#__PURE__*/_jsx(ButtonLink, {
+        color: "primary",
+        onPress: onPress,
+        label: actionText
+      })]
+    })]
+  });
+  const PressableContent = () => /*#__PURE__*/_jsx(Pressable, {
+    ref: viewRef,
+    testID: testID,
+    onPress: onPress,
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
+    accessible: false,
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.container, dynamicContainerStyles, scaleAnimatedStyle],
+      children: renderMainBlock()
+    })
+  });
+  const StaticComponent = () => /*#__PURE__*/_jsx(View, {
+    ref: viewRef,
+    testID: testID,
+    style: [styles.container, dynamicContainerStyles]
+    // A11y related props
+    ,
+    accessible: false,
+    accessibilityHint: accessibilityHint,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: "text",
+    children: renderMainBlock()
+  });
+  return /*#__PURE__*/_jsx(Animated.View, {
+    entering: FadeIn.duration(150),
+    exiting: FadeOut.duration(150),
+    children: actionText ? /*#__PURE__*/_jsx(PressableContent, {}) : /*#__PURE__*/_jsx(StaticComponent, {})
+  });
+};
+//# sourceMappingURL=BannerErrorState.js.map

package/lib/module/components/banner/BannerErrorState.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Pressable","StyleSheet","View","Animated","FadeIn","FadeOut","hexToRgba","IOBannerBigSpacing","IOBannerRadius","IOColors","useIOTheme","useIOThemeContext","Icon","useScaleAnimation","VSpacer","Body","ButtonLink","jsx","_jsx","jsxs","_jsxs","styles","create","container","flexDirection","alignItems","alignContent","borderRadius","borderCurve","padding","BannerErrorState","viewRef","icon","label","actionText","onPress","accessibilityHint","accessibilityLabel","testID","onPressIn","onPressOut","scaleAnimatedStyle","theme","themeType","foregroundColor","backgroundColor","dynamicContainerStyles","renderMainBlock","style","flex","gap","accessible","accessibilityRole","undefined","children","name","size","color","textStyle","textAlign","pointerEvents","accessibilityElementsHidden","importantForAccessibility","PressableContent","ref","StaticComponent","entering","duration","exiting"],"sourceRoot":"../../../../src","sources":["components/banner/BannerErrorState.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/banner/__test__/__snapshots__/banner.test.tsx.snap

@@ -61,14 +61,11 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
       accessibilityRole="button"
       accessible={true}
       style={
-        [
-          {
-            "flex": 1,
-          },
-          {
-            "alignSelf": "center",
-          },
-        ]
+        {
+          "alignSelf": "center",
+          "flex": 1,
+          "gap": 4,
+        }
       }
     >
       <Text
@@ -91,13 +88,6 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
       >
         Banner title
       </Text>
-      <View
-        style={
-          {
-            "height": 4,
-          }
-        }
-      />
       <View
         accessibilityElementsHidden={true}
         accessibilityLabel="Action text"
@@ -137,7 +127,7 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
         <View
           style={
             {
-              "height": 4,
+              "height": 8,
             }
           }
         />
@@ -365,14 +355,11 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
       accessibilityRole="button"
       accessible={true}
       style={
-        [
-          {
-            "flex": 1,
-          },
-          {
-            "alignSelf": "center",
-          },
-        ]
+        {
+          "alignSelf": "center",
+          "flex": 1,
+          "gap": 4,
+        }
       }
     >
       <Text
@@ -395,13 +382,6 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
       >
         Banner title
       </Text>
-      <View
-        style={
-          {
-            "height": 4,
-          }
-        }
-      />
       <View
         accessibilityElementsHidden={true}
         accessibilityLabel="Action text"
@@ -441,7 +421,7 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
         <View
           style={
             {
-              "height": 4,
+              "height": 8,
             }
           }
         />

package/lib/module/components/banner/index.js

@@ -1,4 +1,5 @@
 "use strict";
 
 export * from "./Banner";
+export * from "./BannerErrorState";
 //# sourceMappingURL=index.js.map

package/lib/module/components/banner/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/banner/index.tsx"],"mappings":";;AAAA,cAAc,UAAU","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/banner/index.tsx"],"mappings":";;AAAA,cAAc,UAAU;AACxB,cAAc,oBAAoB","ignoreList":[]}

package/lib/typescript/components/avatar/Avatar.d.ts

@@ -1,8 +1,8 @@
 import React, { ComponentProps } from "react";
-import { Image, ImageRequireSource, ImageURISource } from "react-native";
+import { Image, ImageSourcePropType } from "react-native";
 type Avatar = {
     size: "small" | "medium";
-    logoUri?: ImageRequireSource | ImageURISource | ReadonlyArray<ImageURISource>;
+    logoUri?: ImageSourcePropType;
 };
 /**
  * Avatar component is used to display the logo of an organization. It accepts the following props:

package/lib/typescript/components/avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EACL,KAAK,EACL,kBAAkB,EAClB,cAAc,EAGf,MAAM,cAAc,CAAC;AAYtB,KAAK,MAAM,GAAG;IACZ,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,kBAAkB,GAAG,cAAc,GAAG,aAAa,CAAC,cAAc,CAAC,CAAC;CAC/E,CAAC;AA0CF;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,GAAI,mBAAmB,MAAM,sBAoE/C,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,cAAc,CAAC,OAAO,KAAK,CAAC,EAC5B,QAAQ,GAAG,eAAe,CAC3B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,wDACK,iBAAiB,uBAkC9C,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAoB,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,mBAAmB,EAAoB,MAAM,cAAc,CAAC;AAY5E,KAAK,MAAM,GAAG;IACZ,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B,CAAC;AA0CF;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,GAAI,mBAAmB,MAAM,sBA8D/C,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,cAAc,CAAC,OAAO,KAAK,CAAC,EAC5B,QAAQ,GAAG,eAAe,CAC3B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,wDACK,iBAAiB,uBAkC9C,CAAC"}

package/lib/typescript/components/banner/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../src/components/banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EAGrB,IAAI,EAEL,MAAM,cAAc,CAAC;AAYtB,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EACL,iBAAiB,EAGlB,MAAM,eAAe,CAAC;AAgCvB,KAAK,eAAe,GAAG,UAAU,CAAC;IAChC,KAAK,EAAE,SAAS,GAAG,WAAW,CAAC;IAC/B,aAAa,EAAE,iBAAiB,CAAC;IACjC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAEhC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC,CAAC;AAGH,KAAK,mBAAmB,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,KAAK,oBAAoB,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,KAAK,CAAA;CAAE,CAAC;AAE/D,KAAK,uBAAuB,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpE,KAAK,mBAAmB,GACpB,mBAAmB,GACnB,oBAAoB,GACpB,uBAAuB,CAAC;AAE5B,KAAK,iBAAiB,GAClB;IACE,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD,iBAAiB,CAAC,EAAE,OAAO,CAAC,iBAAiB,EAAE,QAAQ,GAAG,MAAM,CAAC,CAAC;CACnE,GACD;IACE,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACvC,CAAC;AAGN,KAAK,gBAAgB,GACjB;IACE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GACD;IACE,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEN,MAAM,MAAM,MAAM,GAAG,eAAe,GAClC,mBAAmB,GACnB,iBAAiB,GACjB,gBAAgB,CAAC;AAMnB,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,eAAe,CAAC,OAAO,CAAC,CAGnE,CAAC;AAkBF,eAAO,MAAM,MAAM,GAAI,2JAcpB,MAAM,sBA+HR,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../src/components/banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EAGrB,IAAI,EAEL,MAAM,cAAc,CAAC;AAWtB,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EACL,iBAAiB,EAGlB,MAAM,eAAe,CAAC;AAgCvB,KAAK,eAAe,GAAG,UAAU,CAAC;IAChC,KAAK,EAAE,SAAS,GAAG,WAAW,CAAC;IAC/B,aAAa,EAAE,iBAAiB,CAAC;IACjC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAEhC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC,CAAC;AAGH,KAAK,mBAAmB,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,KAAK,oBAAoB,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,KAAK,CAAA;CAAE,CAAC;AAE/D,KAAK,uBAAuB,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpE,KAAK,mBAAmB,GACpB,mBAAmB,GACnB,oBAAoB,GACpB,uBAAuB,CAAC;AAE5B,KAAK,iBAAiB,GAClB;IACE,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD,iBAAiB,CAAC,EAAE,OAAO,CAAC,iBAAiB,EAAE,QAAQ,GAAG,MAAM,CAAC,CAAC;CACnE,GACD;IACE,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACvC,CAAC;AAGN,KAAK,gBAAgB,GACjB;IACE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GACD;IACE,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEN,MAAM,MAAM,MAAM,GAAG,eAAe,GAClC,mBAAmB,GACnB,iBAAiB,GACjB,gBAAgB,CAAC;AAMnB,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,eAAe,CAAC,OAAO,CAAC,CAGnE,CAAC;AAkBF,eAAO,MAAM,MAAM,GAAI,2JAcpB,MAAM,sBAuHR,CAAC"}

package/lib/typescript/components/banner/BannerErrorState.d.ts

@@ -0,0 +1,27 @@
+import React, { RefObject } from "react";
+import { AccessibilityRole, GestureResponderEvent, View } from "react-native";
+import { WithTestID } from "../../utils/types";
+import { IOIcons } from "../icons";
+type BaseBannerErrorStateProps = WithTestID<{
+    icon?: IOIcons;
+    label: string;
+    viewRef?: RefObject<View>;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+}>;
+type BannerErrorStateActionProps = {
+    actionText?: string;
+    onPress: (event: GestureResponderEvent) => void;
+    accessibilityRole?: never;
+} | {
+    actionText?: never;
+    onPress?: never;
+    accessibilityRole?: AccessibilityRole;
+};
+export type BannerErrorStateProps = BaseBannerErrorStateProps & BannerErrorStateActionProps;
+/**
+ ** TODO: Move it to the `io-app-design-system` package
+ */
+export declare const BannerErrorState: ({ viewRef, icon, label, actionText, onPress, accessibilityHint, accessibilityLabel, testID }: BannerErrorStateProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=BannerErrorState.d.ts.map

package/lib/typescript/components/banner/BannerErrorState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerErrorState.d.ts","sourceRoot":"","sources":["../../../../src/components/banner/BannerErrorState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EAGrB,IAAI,EAEL,MAAM,cAAc,CAAC;AAUtB,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAQ,OAAO,EAAE,MAAM,UAAU,CAAC;AAmBzC,KAAK,yBAAyB,GAAG,UAAU,CAAC;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;IAE1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC,CAAC;AAEH,KAAK,2BAA2B,GAC5B;IACE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,GACD;IACE,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACvC,CAAC;AAEN,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,GAC3D,2BAA2B,CAAC;AAE9B;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,8FAS9B,qBAAqB,sBAwFvB,CAAC"}

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

@@ -1,2 +1,3 @@
 export * from "./Banner";
+export * from "./BannerErrorState";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/banner/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/banner/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "5.3.1",
+  "version": "5.3.2",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/avatar/Avatar.tsx

@@ -1,11 +1,5 @@
-import React, { ComponentProps } from "react";
-import {
-  Image,
-  ImageRequireSource,
-  ImageURISource,
-  StyleSheet,
-  View
-} from "react-native";
+import React, { ComponentProps, useRef, useState } from "react";
+import { Image, ImageSourcePropType, StyleSheet, View } from "react-native";
 import { Icon } from "../../components/icons";
 import {
   IOColors,
@@ -19,7 +13,7 @@ import avatarSearchPlaceholder from "./placeholder/avatar-placeholder.png";
 
 type Avatar = {
   size: "small" | "medium";
-  logoUri?: ImageRequireSource | ImageURISource | ReadonlyArray<ImageURISource>;
+  logoUri?: ImageSourcePropType;
 };
 
 const internalSpaceDefaultSize: number = 6;
@@ -72,16 +66,10 @@ const styles = StyleSheet.create({
  */
 export const Avatar = ({ logoUri, size }: Avatar) => {
   const theme = useIOTheme();
-  const indexValue = React.useRef<number>(0);
+  const indexValue = useRef<number>(0);
 
-  const [imageSource, setImageSource] = React.useState(
-    logoUri === undefined
-      ? undefined
-      : Array.isArray(logoUri)
-      ? addCacheTimestampToUri(logoUri[0])
-      : typeof logoUri === "number"
-      ? logoUri
-      : addCacheTimestampToUri(logoUri as ImageURISource)
+  const [imageSource, setImageSource] = useState(
+    logoUri === undefined ? undefined : addCacheTimestampToUri(logoUri)
   );
 
   const onError = () => {

package/src/components/banner/Banner.tsx

@@ -11,7 +11,6 @@ import Animated from "react-native-reanimated";
 import {
   IOBannerBigSpacing,
   IOBannerRadius,
-  IOStyles,
   useIONewTypeface,
   useIOTheme,
   useIOThemeContext
@@ -174,26 +173,18 @@ export const Banner = ({
   const renderMainBlock = () => (
     <>
       <View
-        style={[IOStyles.flex, IOStyles.selfCenter]}
+        style={{ flex: 1, alignSelf: "center", gap: 4 }}
         accessible={true}
         // A11y related props
         accessibilityLabel={accessibilityLabel ?? fallbackAccessibilityLabel}
         accessibilityHint={accessibilityHint}
         accessibilityRole={action !== undefined ? accessibilityRole : "text"}
       >
-        {title && (
-          <>
-            <H6 color={colorTitle}>{title}</H6>
-            <VSpacer size={4} />
-          </>
-        )}
+        {title && <H6 color={colorTitle}>{title}</H6>}
         {content && (
-          <>
-            <BodySmall color={theme["textBody-tertiary"]} weight={"Regular"}>
-              {content}
-            </BodySmall>
-            {action && <VSpacer size={8} />}
-          </>
+          <BodySmall color={theme["textBody-tertiary"]} weight={"Regular"}>
+            {content}
+          </BodySmall>
         )}
         {action && (
           /* Disable pointer events to avoid
@@ -207,7 +198,7 @@ export const Banner = ({
             accessibilityRole="button"
             onPress={onPress}
           >
-            <VSpacer size={4} />
+            <VSpacer size={8} />
             <IOText
               font={newTypefaceEnabled ? "Titillio" : "TitilliumSansPro"}
               weight="Semibold"
@@ -225,7 +216,7 @@ export const Banner = ({
           </Pressable>
         )}
       </View>
-      <View style={[styles.bleedPictogram, IOStyles.selfCenter]}>
+      <View style={[styles.bleedPictogram, { alignSelf: "center" }]}>
         <PictogramBleed name={pictogramName} size={sizePictogram} />
       </View>
       {onClose && labelClose && (

package/src/components/banner/BannerErrorState.tsx

@@ -0,0 +1,163 @@
+import React, { RefObject } from "react";
+import {
+  AccessibilityRole,
+  GestureResponderEvent,
+  Pressable,
+  StyleSheet,
+  View,
+  ViewStyle
+} from "react-native";
+import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
+import {
+  hexToRgba,
+  IOBannerBigSpacing,
+  IOBannerRadius,
+  IOColors,
+  useIOTheme,
+  useIOThemeContext
+} from "../../core";
+import { WithTestID } from "../../utils/types";
+import { Icon, IOIcons } from "../icons";
+import { useScaleAnimation } from "../../hooks";
+import { VSpacer } from "../spacer";
+import { Body } from "../typography";
+import { ButtonLink } from "../buttons";
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignContent: "center",
+    borderRadius: IOBannerRadius,
+    borderCurve: "continuous",
+    padding: IOBannerBigSpacing
+  }
+});
+
+/* Component Types */
+
+type BaseBannerErrorStateProps = WithTestID<{
+  icon?: IOIcons;
+  label: string;
+  viewRef?: RefObject<View>;
+  // A11y related props
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+}>;
+
+type BannerErrorStateActionProps =
+  | {
+      actionText?: string;
+      onPress: (event: GestureResponderEvent) => void;
+      accessibilityRole?: never;
+    }
+  | {
+      actionText?: never;
+      onPress?: never;
+      accessibilityRole?: AccessibilityRole;
+    };
+
+export type BannerErrorStateProps = BaseBannerErrorStateProps &
+  BannerErrorStateActionProps;
+
+/**
+ ** TODO: Move it to the `io-app-design-system` package
+ */
+export const BannerErrorState = ({
+  viewRef,
+  icon = "warningFilled",
+  label,
+  actionText,
+  onPress,
+  accessibilityHint,
+  accessibilityLabel,
+  testID
+}: BannerErrorStateProps) => {
+  const { onPressIn, onPressOut, scaleAnimatedStyle } =
+    useScaleAnimation("medium");
+
+  const theme = useIOTheme();
+  const { themeType } = useIOThemeContext();
+
+  /* Styles */
+  const foregroundColor: IOColors = theme["textBody-tertiary"];
+  const backgroundColor: IOColors = "grey-50";
+
+  const dynamicContainerStyles: ViewStyle = {
+    backgroundColor:
+      themeType === "dark"
+        ? hexToRgba(IOColors[backgroundColor], 0.1)
+        : IOColors[backgroundColor]
+  };
+
+  const renderMainBlock = () => (
+    <View
+      style={{ flex: 1, alignItems: "center", gap: 8 }}
+      accessible={true}
+      // A11y related props
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityRole={actionText !== undefined ? "button" : undefined}
+    >
+      {icon && <Icon name={icon} size={24} color={foregroundColor} />}
+      {label && (
+        <Body color={foregroundColor} textStyle={{ textAlign: "center" }}>
+          {label}
+        </Body>
+      )}
+      {actionText && (
+        /* Disable pointer events to avoid
+            pressed state on the button */
+        <View
+          pointerEvents="none"
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+        >
+          <VSpacer size={4} />
+          <ButtonLink color="primary" onPress={onPress} label={actionText} />
+        </View>
+      )}
+    </View>
+  );
+
+  const PressableContent = () => (
+    <Pressable
+      ref={viewRef}
+      testID={testID}
+      onPress={onPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      accessible={false}
+    >
+      <Animated.View
+        style={[styles.container, dynamicContainerStyles, scaleAnimatedStyle]}
+      >
+        {renderMainBlock()}
+      </Animated.View>
+    </Pressable>
+  );
+
+  const StaticComponent = () => (
+    <View
+      ref={viewRef}
+      testID={testID}
+      style={[styles.container, dynamicContainerStyles]}
+      // A11y related props
+      accessible={false}
+      accessibilityHint={accessibilityHint}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={"text"}
+    >
+      {renderMainBlock()}
+    </View>
+  );
+
+  return (
+    <Animated.View
+      entering={FadeIn.duration(150)}
+      exiting={FadeOut.duration(150)}
+    >
+      {actionText ? <PressableContent /> : <StaticComponent />}
+    </Animated.View>
+  );
+};

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

@@ -61,14 +61,11 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
       accessibilityRole="button"
       accessible={true}
       style={
-        [
-          {
-            "flex": 1,
-          },
-          {
-            "alignSelf": "center",
-          },
-        ]
+        {
+          "alignSelf": "center",
+          "flex": 1,
+          "gap": 4,
+        }
       }
     >
       <Text
@@ -91,13 +88,6 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
       >
         Banner title
       </Text>
-      <View
-        style={
-          {
-            "height": 4,
-          }
-        }
-      />
       <View
         accessibilityElementsHidden={true}
         accessibilityLabel="Action text"
@@ -137,7 +127,7 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
         <View
           style={
             {
-              "height": 4,
+              "height": 8,
             }
           }
         />
@@ -365,14 +355,11 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
       accessibilityRole="button"
       accessible={true}
       style={
-        [
-          {
-            "flex": 1,
-          },
-          {
-            "alignSelf": "center",
-          },
-        ]
+        {
+          "alignSelf": "center",
+          "flex": 1,
+          "gap": 4,
+        }
       }
     >
       <Text
@@ -395,13 +382,6 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
       >
         Banner title
       </Text>
-      <View
-        style={
-          {
-            "height": 4,
-          }
-        }
-      />
       <View
         accessibilityElementsHidden={true}
         accessibilityLabel="Action text"
@@ -441,7 +421,7 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
         <View
           style={
             {
-              "height": 4,
+              "height": 8,
             }
           }
         />

package/src/components/banner/index.tsx

@@ -1 +1,2 @@
 export * from "./Banner";
+export * from "./BannerErrorState";