@pagopa/io-app-design-system 7.0.2 → 7.1.0

package/lib/typescript/components/typography/markdown/MdH1.d.ts

@@ -1,12 +1,6 @@
-import { View } from "react-native";
-import { IOTextProps } from "../IOText";
+import { TypographicStyleProps } from "../IOText";
 /**
  * `MdH1` typographic style
  */
-export declare const MdH1: import("react").ForwardRefExoticComponent<Omit<IOTextProps, "style" | "lineHeight" | "fontStyle" | "size" | "color" | "font" | "weight"> & {
-    textStyle?: import("../IOText").IOTextStyle;
-    style?: import("../IOText").IOTextStyle;
-} & {
-    color?: "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "grey-900" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-400" | "blueIO-300" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-300" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-300" | "blueItalia-100" | "blueItalia-50" | undefined;
-} & import("react").RefAttributes<View>>;
+export declare const MdH1: ({ color: customColor, ...props }: TypographicStyleProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MdH1.d.ts.map

package/lib/typescript/components/typography/markdown/MdH1.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MdH1.d.ts","sourceRoot":"","sources":["../../../../../src/components/typography/markdown/MdH1.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAU,WAAW,EAAyB,MAAM,WAAW,CAAC;AAEvE;;GAEG;AACH,eAAO,MAAM,IAAI;;;;;wCAkBhB,CAAC"}
+{"version":3,"file":"MdH1.d.ts","sourceRoot":"","sources":["../../../../../src/components/typography/markdown/MdH1.tsx"],"names":[],"mappings":"AACA,OAAO,EAAuB,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAEvE;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,kCAGlB,qBAAqB,4CAYvB,CAAC"}

package/lib/typescript/components/typography/markdown/MdH2.d.ts

@@ -1,12 +1,6 @@
-import { View } from "react-native";
-import { IOTextProps } from "../IOText";
+import { TypographicStyleProps } from "../IOText";
 /**
  * `MdH2` typographic style
  */
-export declare const MdH2: import("react").ForwardRefExoticComponent<Omit<IOTextProps, "style" | "lineHeight" | "fontStyle" | "size" | "color" | "font" | "weight"> & {
-    textStyle?: import("../IOText").IOTextStyle;
-    style?: import("../IOText").IOTextStyle;
-} & {
-    color?: "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "grey-900" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-400" | "blueIO-300" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-300" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-300" | "blueItalia-100" | "blueItalia-50" | undefined;
-} & import("react").RefAttributes<View>>;
+export declare const MdH2: ({ color: customColor, ...props }: TypographicStyleProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MdH2.d.ts.map

package/lib/typescript/components/typography/markdown/MdH2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MdH2.d.ts","sourceRoot":"","sources":["../../../../../src/components/typography/markdown/MdH2.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAU,WAAW,EAAyB,MAAM,WAAW,CAAC;AAEvE;;GAEG;AACH,eAAO,MAAM,IAAI;;;;;wCAkBhB,CAAC"}
+{"version":3,"file":"MdH2.d.ts","sourceRoot":"","sources":["../../../../../src/components/typography/markdown/MdH2.tsx"],"names":[],"mappings":"AACA,OAAO,EAAuB,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAEvE;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,kCAGlB,qBAAqB,4CAYvB,CAAC"}

package/lib/typescript/components/typography/markdown/MdH3.d.ts

@@ -1,12 +1,6 @@
-import { View } from "react-native";
-import { IOTextProps } from "../IOText";
+import { TypographicStyleProps } from "../IOText";
 /**
  * `MdH3` typographic style
  */
-export declare const MdH3: import("react").ForwardRefExoticComponent<Omit<IOTextProps, "style" | "lineHeight" | "fontStyle" | "size" | "color" | "font" | "weight"> & {
-    textStyle?: import("../IOText").IOTextStyle;
-    style?: import("../IOText").IOTextStyle;
-} & {
-    color?: "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "grey-900" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-400" | "blueIO-300" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-300" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-300" | "blueItalia-100" | "blueItalia-50" | undefined;
-} & import("react").RefAttributes<View>>;
+export declare const MdH3: ({ color: customColor, ...props }: TypographicStyleProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MdH3.d.ts.map

package/lib/typescript/components/typography/markdown/MdH3.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MdH3.d.ts","sourceRoot":"","sources":["../../../../../src/components/typography/markdown/MdH3.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAU,WAAW,EAAyB,MAAM,WAAW,CAAC;AAEvE;;GAEG;AACH,eAAO,MAAM,IAAI;;;;;wCAkBhB,CAAC"}
+{"version":3,"file":"MdH3.d.ts","sourceRoot":"","sources":["../../../../../src/components/typography/markdown/MdH3.tsx"],"names":[],"mappings":"AACA,OAAO,EAAuB,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAEvE;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,kCAGlB,qBAAqB,4CAYvB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"IOThemeContextProvider.d.ts","sourceRoot":"","sources":["../../../src/context/IOThemeContextProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EAEP,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AACf,OAAO,EAAc,eAAe,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,OAAO,EAA6B,MAAM,kBAAkB,CAAC;AAEtE,eAAO,MAAM,QAAQ;;;CAGpB,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,SAAS,EAAE,eAAe,CAAC;IAC3B,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,kBAAkB,CAMnD,CAAC;AAEL,eAAO,MAAM,iBAAiB,0BAAmC,CAAC;AAElE,eAAO,MAAM,UAAU,eAAkC,CAAC;AAE1D,KAAK,2BAA2B,GAAG;IACjC,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,qBAGpC,iBAAiB,CAAC,2BAA2B,CAAC,4CAyBhD,CAAC"}
+{"version":3,"file":"IOThemeContextProvider.d.ts","sourceRoot":"","sources":["../../../src/context/IOThemeContextProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EAEP,iBAAiB,EAIlB,MAAM,OAAO,CAAC;AACf,OAAO,EAAc,eAAe,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,OAAO,EAA6B,MAAM,kBAAkB,CAAC;AAEtE,eAAO,MAAM,QAAQ;;;CAA6C,CAAC;AAEnE,KAAK,kBAAkB,GAAG;IACxB,SAAS,EAAE,eAAe,CAAC;IAC3B,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,kBAAkB,CAMnD,CAAC;AAEL,eAAO,MAAM,iBAAiB,0BAAmC,CAAC;AAElE,eAAO,MAAM,UAAU,eAAkC,CAAC;AAE1D,KAAK,2BAA2B,GAAG;IACjC,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,qBAGpC,iBAAiB,CAAC,2BAA2B,CAAC,4CAoBhD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "7.0.2",
+  "version": "7.1.0",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -63,14 +63,13 @@
     "@react-native-community/eslint-config": "^3.0.2",
     "@react-native/babel-preset": "^0.82.1",
     "@release-it/conventional-changelog": "^5.0.0",
-    "@stylistic/eslint-plugin": "^2.12.1",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/plugin-svgo": "^8.1.0",
     "@testing-library/react-native": "^13.2.0",
     "@types/jest": "^29.5.14",
     "@types/markdown-it": "^14.1.2",
-    "@types/react": "^19.2.0",
+    "@types/react": "^19.1.0",
     "@types/react-test-renderer": "19.1.0",
     "babel-jest": "^29.7.0",
     "babel-plugin-module-resolver": "^5.0.2",
@@ -87,16 +86,16 @@
     "jest": "^29.6.3",
     "pod-install": "^0.1.0",
     "prettier": "^2.0.5",
-    "react": "19.2.0",
-    "react-native": "0.83.4",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
     "react-native-builder-bob": "^0.38.0",
-    "react-test-renderer": "19.2.0",
+    "react-test-renderer": "19.1.0",
     "release-it": "^15.0.0",
     "svgo": "^3.0.2",
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "react": "*",
+    "react": "^19.0.0",
     "react-native": "*",
     "react-native-easing-gradient": "*",
     "react-native-gesture-handler": "*",

package/src/components/alert/Alert.tsx

@@ -1,4 +1,4 @@
-import { JSX, forwardRef } from "react";
+import { JSX, Ref } from "react";
 import {
   ColorValue,
   GestureResponderEvent,
@@ -24,6 +24,7 @@ const ICON_SIZE: IOIconSizeScale = 24;
 const [padding, paddingFullWidth] = IOAlertSpacing;
 
 type AlertProps = WithTestID<{
+  ref?: Ref<View>;
   variant: "error" | "warning" | "info" | "success";
   content: string;
   fullWidth?: boolean;
@@ -105,123 +106,118 @@ const mapVariantStatesDarkMode: Record<
   }
 };
 
-export const Alert = forwardRef<View, AlertType>(
-  (
-    {
-      variant,
-      content,
-      action,
-      onPress,
-      fullWidth = false,
-      accessibilityHint,
-      testID
-    }: AlertType,
-    viewRef
-  ): JSX.Element => {
-    const { onPressIn, onPressOut, scaleAnimatedStyle } =
-      useScaleAnimation("medium");
-    const { dynamicFontScale, spacingScaleMultiplier } =
-      useIOFontDynamicScale();
-    const { themeType } = useIOThemeContext();
-
-    const paddingDefaultVariant: ViewStyle = {
-      padding,
-      borderRadius: IOAlertRadius * dynamicFontScale * spacingScaleMultiplier,
-      borderCurve: "continuous"
-    };
-
-    const mapVariantStates =
-      themeType === "light"
-        ? mapVariantStatesLightMode
-        : mapVariantStatesDarkMode;
-
-    const renderMainBlock = () => (
-      <HStack
-        space={IOVisualCostants.iconMargin as IOSpacer}
-        allowScaleSpacing
-        style={{ alignItems: "center" }}
-      >
-        <Icon
-          allowFontScaling
-          name={mapVariantStates[variant].icon}
-          size={ICON_SIZE}
-          color={mapVariantStates[variant].foreground}
-        />
-        {/* Sadly we don't have specific alignments style for text
+export const Alert = ({
+  variant,
+  content,
+  action,
+  onPress,
+  fullWidth = false,
+  accessibilityHint,
+  ref: viewRef,
+  testID
+}: AlertType): JSX.Element => {
+  const { onPressIn, onPressOut, scaleAnimatedStyle } =
+    useScaleAnimation("medium");
+  const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale();
+  const { themeType } = useIOThemeContext();
+
+  const paddingDefaultVariant: ViewStyle = {
+    padding,
+    borderRadius: IOAlertRadius * dynamicFontScale * spacingScaleMultiplier,
+    borderCurve: "continuous"
+  };
+
+  const mapVariantStates =
+    themeType === "light"
+      ? mapVariantStatesLightMode
+      : mapVariantStatesDarkMode;
+
+  const renderMainBlock = () => (
+    <HStack
+      space={IOVisualCostants.iconMargin as IOSpacer}
+      allowScaleSpacing
+      style={{ alignItems: "center" }}
+    >
+      <Icon
+        allowFontScaling
+        name={mapVariantStates[variant].icon}
+        size={ICON_SIZE}
+        color={mapVariantStates[variant].foreground}
+      />
+      {/* Sadly we don't have specific alignments style for text
       in React Native, like `text-box-trim` for CSS. So we
       have to put these magic numbers after manual adjustments.
       Tested on both Android and iOS. */}
-        <View
-          style={{
-            marginTop: -4 * dynamicFontScale,
-            marginBottom: -4 * dynamicFontScale,
-            flex: 1
-          }}
-        >
-          <VStack space={8} allowScaleSpacing>
-            <Body
+      <View
+        style={{
+          marginTop: -4 * dynamicFontScale,
+          marginBottom: -4 * dynamicFontScale,
+          flex: 1
+        }}
+      >
+        <VStack space={8} allowScaleSpacing>
+          <Body
+            color={mapVariantStates[variant].foreground}
+            weight={"Regular"}
+            accessibilityRole="text"
+          >
+            {content}
+          </Body>
+          {action && (
+            <ButtonText
               color={mapVariantStates[variant].foreground}
-              weight={"Regular"}
-              accessibilityRole="text"
+              numberOfLines={1}
+              ellipsizeMode="tail"
             >
-              {content}
-            </Body>
-            {action && (
-              <ButtonText
-                color={mapVariantStates[variant].foreground}
-                numberOfLines={1}
-                ellipsizeMode="tail"
-              >
-                {action}
-              </ButtonText>
-            )}
-          </VStack>
-        </View>
-      </HStack>
-    );
-
-    const StaticComponent = () => (
-      <View
-        ref={viewRef}
+              {action}
+            </ButtonText>
+          )}
+        </VStack>
+      </View>
+    </HStack>
+  );
+
+  const StaticComponent = () => (
+    <View
+      ref={viewRef}
+      style={[
+        fullWidth ? { padding: paddingFullWidth } : paddingDefaultVariant,
+        { backgroundColor: mapVariantStates[variant].background }
+      ]}
+      testID={testID}
+      accessible={false}
+      accessibilityRole="alert"
+      accessibilityHint={accessibilityHint}
+    >
+      {renderMainBlock()}
+    </View>
+  );
+
+  const PressableButton = () => (
+    <Pressable
+      ref={viewRef}
+      testID={testID}
+      onPress={onPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onTouchEnd={onPressOut}
+      // A11y related props
+      accessible={true}
+      accessibilityHint={accessibilityHint}
+      accessibilityRole={"button"}
+    >
+      <Animated.View
         style={[
-          fullWidth ? { padding } : paddingDefaultVariant,
-          { backgroundColor: mapVariantStates[variant].background }
+          fullWidth ? { padding: paddingFullWidth } : paddingDefaultVariant,
+          { backgroundColor: mapVariantStates[variant].background },
+          // Disable pressed animation when component is full width
+          !fullWidth && scaleAnimatedStyle
         ]}
-        testID={testID}
-        accessible={false}
-        accessibilityRole="alert"
-        accessibilityHint={accessibilityHint}
       >
         {renderMainBlock()}
-      </View>
-    );
-
-    const PressableButton = () => (
-      <Pressable
-        ref={viewRef}
-        testID={testID}
-        onPress={onPress}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        onTouchEnd={onPressOut}
-        // A11y related props
-        accessible={true}
-        accessibilityHint={accessibilityHint}
-        accessibilityRole={"button"}
-      >
-        <Animated.View
-          style={[
-            fullWidth ? { padding: paddingFullWidth } : paddingDefaultVariant,
-            { backgroundColor: mapVariantStates[variant].background },
-            // Disable pressed animation when component is full width
-            !fullWidth && scaleAnimatedStyle
-          ]}
-        >
-          {renderMainBlock()}
-        </Animated.View>
-      </Pressable>
-    );
-
-    return action ? <PressableButton /> : <StaticComponent />;
-  }
-);
+      </Animated.View>
+    </Pressable>
+  );
+
+  return action ? <PressableButton /> : <StaticComponent />;
+};

package/src/components/banner/Banner.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from "react";
+import { Ref } from "react";
 import {
   AccessibilityRole,
   GestureResponderEvent,
@@ -51,6 +51,7 @@ const styles = StyleSheet.create({
 /* Component Types */
 
 type BaseBannerProps = WithTestID<{
+  ref?: Ref<View>;
   color: "neutral" | "turquoise";
   pictogramName: IOPictogramsBleed;
   // A11y related props
@@ -123,140 +124,135 @@ const mapBackgroundColorDarkMode: Record<
   turquoise: "turquoise-300"
 };
 
-export const Banner = forwardRef<View, Banner>(
-  (
-    {
-      color,
-      pictogramName,
-      title,
-      content,
-      action,
-      labelClose,
-      onPress,
-      onClose,
-      accessibilityHint,
-      accessibilityLabel,
-      accessibilityRole = "button",
-      testID
-    }: Banner,
-    viewRef
-  ) => {
-    const { onPressIn, onPressOut, scaleAnimatedStyle } =
-      useScaleAnimation("medium");
-    const { themeType } = useIOThemeContext();
-    const theme = useIOTheme();
+export const Banner = ({
+  color,
+  pictogramName,
+  title,
+  content,
+  action,
+  labelClose,
+  onPress,
+  onClose,
+  accessibilityHint,
+  accessibilityLabel,
+  accessibilityRole = "button",
+  ref: viewRef,
+  testID
+}: Banner) => {
+  const { onPressIn, onPressOut, scaleAnimatedStyle } =
+    useScaleAnimation("medium");
+  const { themeType } = useIOThemeContext();
+  const theme = useIOTheme();
 
-    // Dynamic colors
-    const colorTitle: IOColors =
-      themeType === "dark" ? "grey-50" : "blueIO-850";
-    const colorCloseButton: IconButton["color"] =
-      themeType === "dark" ? "contrast" : "neutral";
-    const colorMainButton =
-      themeType === "dark" ? "blueIO-200" : theme["interactiveElem-default"];
+  // Dynamic colors
+  const colorTitle: IOColors = themeType === "dark" ? "grey-50" : "blueIO-850";
+  const colorCloseButton: IconButton["color"] =
+    themeType === "dark" ? "contrast" : "neutral";
+  const colorMainButton =
+    themeType === "dark" ? "blueIO-200" : theme["interactiveElem-default"];
 
-    const dynamicContainerStyles: ViewStyle = {
-      backgroundColor:
-        themeType === "dark"
-          ? hexToRgba(IOColors[mapBackgroundColorDarkMode[color]], 0.1)
-          : IOColors[mapBackgroundColorLightMode[color]]
-    };
+  const dynamicContainerStyles: ViewStyle = {
+    backgroundColor:
+      themeType === "dark"
+        ? hexToRgba(IOColors[mapBackgroundColorDarkMode[color]], 0.1)
+        : IOColors[mapBackgroundColorLightMode[color]]
+  };
 
-    /* Generates a complete fallbackAccessibilityLabel by concatenating the title, content, and action
+  /* Generates a complete fallbackAccessibilityLabel by concatenating the title, content, and action
    if they are present. */
-    const fallbackAccessibilityLabel = [title, content, action]
-      .filter(Boolean)
-      .join(" ");
+  const fallbackAccessibilityLabel = [title, content, action]
+    .filter(Boolean)
+    .join(" ");
 
-    const renderMainBlock = () => (
-      <>
-        <View
-          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>}
-          {content && (
-            <BodySmall color={theme["textBody-tertiary"]} weight={"Regular"}>
-              {content}
-            </BodySmall>
-          )}
-          {action && (
-            /* Disable pointer events to avoid
+  const renderMainBlock = () => (
+    <>
+      <View
+        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>}
+        {content && (
+          <BodySmall color={theme["textBody-tertiary"]} weight={"Regular"}>
+            {content}
+          </BodySmall>
+        )}
+        {action && (
+          /* Disable pointer events to avoid
              pressed state on the button */
-            <Pressable
-              pointerEvents="none"
+          <Pressable
+            pointerEvents="none"
+            importantForAccessibility="no-hide-descendants"
+            accessible={true}
+            accessibilityElementsHidden
+            accessibilityLabel={action}
+            accessibilityRole="button"
+            onPress={onPress}
+          >
+            <VSpacer size={8} />
+            <IOText
+              weight="Semibold"
+              color={colorMainButton}
+              size={buttonTextFontSize}
+              numberOfLines={1}
+              ellipsizeMode="tail"
+              // A11y
+              accessible={false}
               importantForAccessibility="no-hide-descendants"
-              accessible={true}
-              accessibilityElementsHidden
-              accessibilityLabel={action}
-              accessibilityRole="button"
-              onPress={onPress}
+              accessibilityElementsHidden={true}
             >
-              <VSpacer size={8} />
-              <IOText
-                weight="Semibold"
-                color={colorMainButton}
-                size={buttonTextFontSize}
-                numberOfLines={1}
-                ellipsizeMode="tail"
-                // A11y
-                accessible={false}
-                importantForAccessibility="no-hide-descendants"
-                accessibilityElementsHidden={true}
-              >
-                {action}
-              </IOText>
-            </Pressable>
-          )}
-        </View>
-        <View style={[styles.bleedPictogram, { alignSelf: "center" }]}>
-          <PictogramBleed name={pictogramName} size={sizePictogram} />
-        </View>
-        {onClose && labelClose && (
-          <View style={styles.closeIconButton}>
-            <IconButton
-              icon="closeSmall"
-              color={colorCloseButton}
-              onPress={onClose}
-              accessibilityLabel={labelClose}
-            />
-          </View>
+              {action}
+            </IOText>
+          </Pressable>
         )}
-      </>
-    );
-
-    const PressableButton = () => (
-      <Pressable
-        ref={viewRef}
-        testID={testID}
-        onPress={onPress}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        accessible={false}
-      >
-        <Animated.View
-          style={[styles.container, dynamicContainerStyles, scaleAnimatedStyle]}
-        >
-          {renderMainBlock()}
-        </Animated.View>
-      </Pressable>
-    );
+      </View>
+      <View style={[styles.bleedPictogram, { alignSelf: "center" }]}>
+        <PictogramBleed name={pictogramName} size={sizePictogram} />
+      </View>
+      {onClose && labelClose && (
+        <View style={styles.closeIconButton}>
+          <IconButton
+            icon="closeSmall"
+            color={colorCloseButton}
+            onPress={onClose}
+            accessibilityLabel={labelClose}
+          />
+        </View>
+      )}
+    </>
+  );
 
-    const StaticComponent = () => (
-      <View
-        ref={viewRef}
-        testID={testID}
-        style={[styles.container, dynamicContainerStyles]}
-        // A11y related props
-        accessible={false}
+  const PressableButton = () => (
+    <Pressable
+      ref={viewRef}
+      testID={testID}
+      onPress={onPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      accessible={false}
+    >
+      <Animated.View
+        style={[styles.container, dynamicContainerStyles, scaleAnimatedStyle]}
       >
         {renderMainBlock()}
-      </View>
-    );
+      </Animated.View>
+    </Pressable>
+  );
 
-    return action ? <PressableButton /> : <StaticComponent />;
-  }
-);
+  const StaticComponent = () => (
+    <View
+      ref={viewRef}
+      testID={testID}
+      style={[styles.container, dynamicContainerStyles]}
+      // A11y related props
+      accessible={false}
+    >
+      {renderMainBlock()}
+    </View>
+  );
+
+  return action ? <PressableButton /> : <StaticComponent />;
+};