@pagopa/io-app-design-system 5.0.0-3 → 5.0.0-5

package/src/components/buttons/ButtonSolid.tsx

@@ -1,8 +1,14 @@
-import React, { ComponentProps, useCallback, useEffect, useRef } from "react";
+import React, {
+  ComponentProps,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef
+} from "react";
 import {
+  ColorValue,
   GestureResponderEvent,
   Pressable,
-  StyleSheet,
   View
 } from "react-native";
 import ReactNativeHapticFeedback from "react-native-haptic-feedback";
@@ -16,7 +22,8 @@ import {
   IOColors,
   enterTransitionInnerContent,
   enterTransitionInnerContentSmall,
-  exitTransitionInnerContent
+  exitTransitionInnerContent,
+  useIOTheme
 } from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
@@ -27,28 +34,23 @@ import { ButtonText } from "../typography/ButtonText";
 export type ButtonSolidColor = "primary" | "danger" | "contrast";
 
 type ColorStates = {
-  default: string;
-  pressed: string;
-  label: {
+  background: {
+    default: string;
+    pressed: string;
+    disabled: string;
+  };
+  foreground: {
     default: IOColors;
     disabled: IOColors;
   };
 };
 
-const colorPrimaryButtonDisabled: IOColors = "grey-200";
 const ICON_MARGIN = 8;
 const DISABLED_OPACITY = 0.5;
 
 // Icon size
 const iconSize: IOIconSizeScale = 20;
 
-const styles = StyleSheet.create({
-  backgroundDisabled: {
-    backgroundColor: IOColors[colorPrimaryButtonDisabled],
-    opacity: DISABLED_OPACITY
-  }
-});
-
 export type ButtonSolidProps = WithTestID<
   {
     /**
@@ -76,40 +78,7 @@ export type ButtonSolidProps = WithTestID<
   >
 >;
 
-const mapColorStates: Record<
-  NonNullable<ButtonSolidProps["color"]>,
-  ColorStates
-> = {
-  // Primary button
-  primary: {
-    default: IOColors["blueIO-500"],
-    pressed: IOColors["blueIO-600"],
-    label: {
-      default: "white",
-      disabled: "grey-700"
-    }
-  },
-  // Danger button
-  danger: {
-    default: IOColors["error-600"],
-    pressed: IOColors["error-500"],
-    label: {
-      default: "white",
-      disabled: "grey-700"
-    }
-  },
-  // Contrast button
-  contrast: {
-    default: IOColors.white,
-    pressed: IOColors["blueIO-50"],
-    label: {
-      default: "blueIO-500",
-      disabled: "grey-700"
-    }
-  }
-};
-
-export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
+export const ButtonSolid = forwardRef<View, ButtonSolidProps>(
   (
     {
       color = "primary",
@@ -126,10 +95,53 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
     },
     ref
   ) => {
+    const theme = useIOTheme();
     const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
       useScaleAnimation();
     const reducedMotion = useReducedMotion();
 
+    const mapColorStates: Record<
+      NonNullable<ButtonSolidProps["color"]>,
+      ColorStates
+    > = {
+      // Primary button
+      primary: {
+        background: {
+          default: IOColors[theme["interactiveElem-default"]],
+          pressed: IOColors[theme["interactiveElem-pressed"]],
+          disabled: IOColors[theme["interactiveElem-disabled"]]
+        },
+        foreground: {
+          default: theme["buttonText-default"],
+          disabled: theme["buttonText-disabled"]
+        }
+      },
+      // Danger button
+      danger: {
+        background: {
+          default: IOColors["error-600"],
+          pressed: IOColors["error-500"],
+          disabled: IOColors[theme["interactiveElem-disabled"]]
+        },
+        foreground: {
+          default: theme["buttonText-default"],
+          disabled: theme["buttonText-disabled"]
+        }
+      },
+      // Contrast button
+      contrast: {
+        background: {
+          default: IOColors.white,
+          pressed: IOColors["blueIO-50"],
+          disabled: IOColors["blueIO-50"]
+        },
+        foreground: {
+          default: "blueIO-500",
+          disabled: "blueIO-500"
+        }
+      }
+    };
+
     /* Prevent the component from triggering the `isEntering' transition
        on the on the first render. Solution from this discussion:
        https://github.com/software-mansion/react-native-reanimated/discussions/2513
@@ -147,7 +159,10 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
       const backgroundColor = interpolateColor(
         progress.value,
         [0, 1],
-        [mapColorStates[color].default, mapColorStates[color].pressed]
+        [
+          mapColorStates[color].background.default,
+          mapColorStates[color].background.pressed
+        ]
       );
 
       return { backgroundColor };
@@ -166,10 +181,15 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
       [loading, onPress]
     );
 
+    // Background
+    const backgroundColor: ColorValue = disabled
+      ? mapColorStates[color]?.background?.disabled
+      : mapColorStates[color]?.background?.default;
+
     // Label & Icons colors
     const foregroundColor: IOColors = disabled
-      ? mapColorStates[color]?.label?.disabled
-      : mapColorStates[color]?.label?.default;
+      ? mapColorStates[color]?.foreground?.disabled
+      : mapColorStates[color]?.foreground?.default;
 
     return (
       <Pressable
@@ -194,11 +214,9 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
           style={[
             IOButtonStyles.button,
             IOButtonStyles.buttonSizeDefault,
-            { overflow: "hidden" },
+            { backgroundColor, overflow: "hidden" },
             fullWidth && { paddingHorizontal: 16 },
-            disabled
-              ? styles.backgroundDisabled
-              : { backgroundColor: mapColorStates[color]?.default },
+            disabled ? { opacity: DISABLED_OPACITY } : {},
             /* Prevent Reanimated from overriding background colors
               if button is disabled */
             !disabled && !reducedMotion && scaleAnimatedStyle,

package/src/components/buttons/IconButton.tsx

@@ -5,7 +5,14 @@ import Animated, {
   useAnimatedProps,
   useReducedMotion
 } from "react-native-reanimated";
-import { IOColors, IOIconButtonStyles, IOStyles, hexToRgba } from "../../core";
+import {
+  IOColors,
+  IOIconButtonStyles,
+  IOStyles,
+  IOThemeLight,
+  hexToRgba,
+  useIOTheme
+} from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 import {
@@ -23,6 +30,7 @@ export type IconButton = WithTestID<{
   accessibilityLabel: string;
   accessibilityHint?: string;
   onPress: (event: GestureResponderEvent) => void;
+  persistentColorMode?: boolean;
 }>;
 
 type ColorStates = {
@@ -33,38 +41,12 @@ type ColorStates = {
   };
 };
 
-const mapColorStates: Record<NonNullable<IconButton["color"]>, ColorStates> = {
-  // Primary button
-  primary: {
-    icon: {
-      default: IOColors["blueIO-500"],
-      pressed: IOColors["blueIO-600"],
-      disabled: hexToRgba(IOColors["blueIO-500"], 0.25)
-    }
-  },
-  // Neutral button
-  neutral: {
-    icon: {
-      default: IOColors.black,
-      pressed: IOColors["grey-850"],
-      disabled: IOColors["grey-450"]
-    }
-  },
-  // Contrast button
-  contrast: {
-    icon: {
-      default: IOColors.white,
-      pressed: hexToRgba(IOColors.white, 0.85),
-      disabled: hexToRgba(IOColors.white, 0.25)
-    }
-  }
-};
-
 const AnimatedIconClassComponent =
   Animated.createAnimatedComponent(IconClassComponent);
 
 export const IconButton = ({
   color = "primary",
+  persistentColorMode = false,
   icon,
   iconSize = 24,
   disabled = false,
@@ -73,10 +55,47 @@ export const IconButton = ({
   accessibilityHint,
   testID
 }: IconButton) => {
+  const theme = useIOTheme();
   const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
     useScaleAnimation("exaggerated");
   const reducedMotion = useReducedMotion();
 
+  const mapColorStates: Record<
+    NonNullable<IconButton["color"]>,
+    ColorStates
+  > = {
+    // Primary button
+    primary: {
+      icon: {
+        default: IOColors[theme["interactiveElem-default"]],
+        pressed: IOColors[theme["interactiveElem-pressed"]],
+        disabled: IOColors[theme["interactiveElem-disabled"]]
+      }
+    },
+    // Neutral button
+    neutral: {
+      icon: {
+        default: persistentColorMode
+          ? IOColors[IOThemeLight["neutralButton-default"]]
+          : IOColors[theme["neutralButton-default"]],
+        pressed: persistentColorMode
+          ? IOColors[IOThemeLight["neutralButton-pressed"]]
+          : IOColors[theme["neutralButton-pressed"]],
+        disabled: persistentColorMode
+          ? IOColors[IOThemeLight["neutralButton-disabled"]]
+          : IOColors[theme["neutralButton-disabled"]]
+      }
+    },
+    // Contrast button
+    contrast: {
+      icon: {
+        default: IOColors.white,
+        pressed: hexToRgba(IOColors.white, 0.85),
+        disabled: hexToRgba(IOColors.white, 0.25)
+      }
+    }
+  };
+
   // Animate the <Icon> color prop
   const animatedColor = useAnimatedProps(() => {
     const iconColor = interpolateColor(

package/src/components/buttons/IconButtonSolid.tsx

@@ -5,7 +5,7 @@ import Animated, {
   useAnimatedStyle,
   useReducedMotion
 } from "react-native-reanimated";
-import { IOButtonStyles, IOIconButtonStyles } from "../../core";
+import { IOButtonStyles, IOIconButtonStyles, useIOTheme } from "../../core";
 import { IOColors, hexToRgba } from "../../core/IOColors";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
@@ -32,35 +32,6 @@ type ColorStates = {
   };
 };
 
-const mapColorStates: Record<
-  NonNullable<IconButtonSolid["color"]>,
-  ColorStates
-> = {
-  // Primary button
-  primary: {
-    background: {
-      default: IOColors["blueIO-500"],
-      pressed: IOColors["blueIO-600"],
-      disabled: IOColors["grey-100"]
-    },
-    icon: {
-      default: IOColors.white,
-      disabled: IOColors["grey-450"]
-    }
-  },
-  contrast: {
-    background: {
-      default: IOColors.white,
-      pressed: IOColors["blueIO-50"],
-      disabled: hexToRgba(IOColors.white, 0.25)
-    },
-    icon: {
-      default: IOColors["blueIO-500"],
-      disabled: IOColors["blueIO-500"]
-    }
-  }
-};
-
 export const IconButtonSolid = ({
   icon,
   color = "primary",
@@ -70,10 +41,40 @@ export const IconButtonSolid = ({
   accessibilityHint,
   testID
 }: IconButtonSolid) => {
+  const theme = useIOTheme();
   const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
     useScaleAnimation("exaggerated");
   const reducedMotion = useReducedMotion();
 
+  const mapColorStates: Record<
+    NonNullable<IconButtonSolid["color"]>,
+    ColorStates
+  > = {
+    // Primary button
+    primary: {
+      background: {
+        default: IOColors[theme["interactiveElem-default"]],
+        pressed: IOColors[theme["interactiveElem-pressed"]],
+        disabled: IOColors[theme["interactiveElem-disabled"]]
+      },
+      icon: {
+        default: IOColors[theme["buttonText-default"]],
+        disabled: IOColors[theme["buttonText-disabled"]]
+      }
+    },
+    contrast: {
+      background: {
+        default: IOColors.white,
+        pressed: IOColors["blueIO-50"],
+        disabled: hexToRgba(IOColors.white, 0.25)
+      },
+      icon: {
+        default: IOColors["blueIO-500"],
+        disabled: IOColors["blueIO-500"]
+      }
+    }
+  };
+
   const backgroundColorAnimationStyle = useAnimatedStyle(() => ({
     backgroundColor: interpolateColor(
       progress.value,
@@ -106,12 +107,8 @@ export const IconButtonSolid = ({
           !disabled && !reducedMotion && scaleAnimatedStyle,
           !disabled && backgroundColorAnimationStyle,
           disabled
-            ? {
-                backgroundColor: mapColorStates[color]?.background?.disabled
-              }
-            : {
-                backgroundColor: mapColorStates[color]?.background?.default
-              }
+            ? { backgroundColor: mapColorStates[color]?.background?.disabled }
+            : { backgroundColor: mapColorStates[color]?.background?.default }
         ]}
       >
         <AnimatedIcon

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

@@ -176,7 +176,7 @@ exports[`Test Buttons Components - Experimental Enabled ButtonOutline Snapshot 1
         },
         false,
         {
-          "backgroundColor": "rgba(231,236,252,0)",
+          "backgroundColor": "rgba(9,50,182,0)",
           "borderColor": "#0B3EE3",
         },
         {
@@ -285,12 +285,11 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`]
           "height": 48,
         },
         {
+          "backgroundColor": "#0B3EE3",
           "overflow": "hidden",
         },
         false,
-        {
-          "backgroundColor": "#0B3EE3",
-        },
+        {},
         {
           "transform": [
             {
@@ -920,7 +919,7 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
         },
         false,
         {
-          "backgroundColor": "rgba(231,236,252,0)",
+          "backgroundColor": "rgba(9,50,182,0)",
           "borderColor": "#0B3EE3",
         },
         {
@@ -1029,12 +1028,11 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
           "height": 48,
         },
         {
+          "backgroundColor": "#0B3EE3",
           "overflow": "hidden",
         },
         false,
-        {
-          "backgroundColor": "#0B3EE3",
-        },
+        {},
         {
           "transform": [
             {

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

@@ -1,21 +1,20 @@
 import React from "react";
-import { Svg, Path, G, Mask, Rect } from "react-native-svg";
+import { Path, Svg } from "react-native-svg";
+import { IOColors } from "../../../core";
 import { SVGIconProps } from "../types";
 
 const IconProductIOAppBlueBg = ({ size, style, ...props }: SVGIconProps) => (
   <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
-    <Rect width={size} height={size} fill="#0B3EE3" rx="4" />
-    <Mask id="a" width={size} height={size} x="6" y="7">
-      <Path
-        fill="#fff"
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M7.25 7c.69036 0 1.25.55964 1.25 1.25S7.94036 9.5 7.25 9.5 6 8.94036 6 8.25 6.55964 7 7.25 7Zm10.5 6c0 2.2091-1.7909 4-3.8095 4-2.3996 0-4.1905-1.7909-4.1905-4 0-2.2091 1.7909-4 4.1905-4 2.0186 0 3.8095 1.7909 3.8095 4Zm-9.5-1.25c0-.5523-.44772-1-1-1s-1 .4477-1 1V16c0 .5523.44772 1 1 1s1-.4477 1-1v-4.25Zm6.4826.8302h.5326v-.524h-.5287v-.6337h-.5785v2.1082c0 .3331.0459.5606.1417.6824.092.1259.2682.1869.5287.1869.0996 0 .249-.0244.4406-.0691l-.0268-.4874-.3295.0081c-.0575 0-.0996-.0122-.1264-.0406-.0268-.0285-.0422-.061-.046-.0975-.0038-.0406-.0077-.1016-.0077-.195v-.9383Zm-1.7431-.52v2.287h.5785v-2.287h-.5785Zm-.8683-.0568c.1011 0 .1867.034.2528.1021.0661.0681.0972.1514.0972.2536 0 .1021-.0311.1816-.0972.2497-.0623.0605-.1439.0946-.2489.0946-.1011 0-.1867-.0341-.2528-.1022-.0661-.0681-.1011-.1513-.1011-.2497 0-.0984.035-.1816.0972-.2497.0661-.0682.1517-.0984.2528-.0984Z"
-      />
-    </Mask>
-    <G mask="url(#a)">
-      <Path fill="#fff" d="M-13-13h50v50h-50z" />
-    </G>
+    <Path
+      d="M0 9.6c0-3.36 0-5.04.654-6.324A6 6 0 0 1 3.276.654C4.56 0 6.24 0 9.6 0h4.8c3.36 0 5.04 0 6.324.654a6 6 0 0 1 2.622 2.622C24 4.56 24 6.24 24 9.6v4.8c0 3.36 0 5.04-.654 6.324a6 6 0 0 1-2.622 2.622C19.44 24 17.76 24 14.4 24H9.6c-3.36 0-5.04 0-6.324-.654a6 6 0 0 1-2.622-2.622C0 19.44 0 17.76 0 14.4V9.6Z"
+      fill={IOColors["blueIO-500"]}
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.21 6.4a1.35 1.35 0 1 1 0 2.7 1.35 1.35 0 0 1 0-2.7Zm11.34 6.48c0 2.386-1.934 4.32-4.114 4.32-2.592 0-4.526-1.934-4.526-4.32s1.934-4.32 4.526-4.32c2.18 0 4.114 1.934 4.114 4.32ZM8.29 11.53a1.08 1.08 0 1 0-2.16 0v4.59a1.08 1.08 0 0 0 2.16 0v-4.59Zm7.001.897h.576v-.566h-.571v-.685h-.625v2.277c0 .36.05.606.153.737.1.136.29.202.57.202.108 0 .27-.026.477-.075l-.03-.526-.355.009c-.062 0-.108-.013-.137-.044a.177.177 0 0 1-.05-.105 2.24 2.24 0 0 1-.008-.211v-1.013Zm-1.882-.562v2.47h.624v-2.47h-.624Zm-.938-.062a.366.366 0 0 1 .378.385c0 .11-.034.196-.105.27a.37.37 0 0 1-.269.101.375.375 0 0 1-.382-.38c0-.106.038-.196.105-.27a.363.363 0 0 1 .273-.106Z"
+      fill={IOColors.white}
+    />
   </Svg>
 );
 

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

@@ -1,9 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-  <rect width="24" height="24" fill="#0B3EE3" rx="4"/>
-  <mask id="a" width="12" height="10" x="6" y="7" maskUnits="userSpaceOnUse" style="mask-type:luminance">
-    <path fill="#fff" fill-rule="evenodd" d="M7.25 7c.69036 0 1.25.55964 1.25 1.25S7.94036 9.5 7.25 9.5 6 8.94036 6 8.25 6.55964 7 7.25 7Zm10.5 6c0 2.2091-1.7909 4-3.8095 4-2.3996 0-4.1905-1.7909-4.1905-4 0-2.2091 1.7909-4 4.1905-4 2.0186 0 3.8095 1.7909 3.8095 4Zm-9.5-1.25c0-.5523-.44772-1-1-1s-1 .4477-1 1V16c0 .5523.44772 1 1 1s1-.4477 1-1v-4.25Zm6.4826.8302h.5326v-.524h-.5287v-.6337h-.5785v2.1082c0 .3331.0459.5606.1417.6824.092.1259.2682.1869.5287.1869.0996 0 .249-.0244.4406-.0691l-.0268-.4874-.3295.0081c-.0575 0-.0996-.0122-.1264-.0406-.0268-.0285-.0422-.061-.046-.0975-.0038-.0406-.0077-.1016-.0077-.195v-.9383Zm-1.7431-.52v2.287h.5785v-2.287h-.5785Zm-.8683-.0568c.1011 0 .1867.034.2528.1021.0661.0681.0972.1514.0972.2536 0 .1021-.0311.1816-.0972.2497-.0623.0605-.1439.0946-.2489.0946-.1011 0-.1867-.0341-.2528-.1022-.0661-.0681-.1011-.1513-.1011-.2497 0-.0984.035-.1816.0972-.2497.0661-.0682.1517-.0984.2528-.0984Z" clip-rule="evenodd"/>
-  </mask>
-  <g mask="url(#a)">
-    <path fill="#fff" d="M-13-13h50v50h-50z"/>
-  </g>
-</svg>
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+        d="M0 9.6c0-3.36 0-5.04.654-6.324A6 6 0 0 1 3.276.654C4.56 0 6.24 0 9.6 0h4.8c3.36 0 5.04 0 6.324.654a6 6 0 0 1 2.622 2.622C24 4.56 24 6.24 24 9.6v4.8c0 3.36 0 5.04-.654 6.324a6 6 0 0 1-2.622 2.622C19.44 24 17.76 24 14.4 24H9.6c-3.36 0-5.04 0-6.324-.654a6 6 0 0 1-2.622-2.622C0 19.44 0 17.76 0 14.4V9.6Z"
+        fill="#0B3EE3"
+    />
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M7.21 6.4a1.35 1.35 0 1 1 0 2.7 1.35 1.35 0 0 1 0-2.7Zm11.34 6.48c0 2.386-1.934 4.32-4.114 4.32-2.592 0-4.526-1.934-4.526-4.32s1.934-4.32 4.526-4.32c2.18 0 4.114 1.934 4.114 4.32ZM8.29 11.53a1.08 1.08 0 1 0-2.16 0v4.59a1.08 1.08 0 0 0 2.16 0v-4.59Zm7.001.897h.576v-.566h-.571v-.685h-.625v2.277c0 .36.05.606.153.737.1.136.29.202.57.202.108 0 .27-.026.477-.075l-.03-.526-.355.009c-.062 0-.108-.013-.137-.044a.177.177 0 0 1-.05-.105 2.24 2.24 0 0 1-.008-.211v-1.013Zm-1.882-.562v2.47h.624v-2.47h-.624Zm-.938-.062a.366.366 0 0 1 .378.385c0 .11-.034.196-.105.27a.37.37 0 0 1-.269.101.375.375 0 0 1-.382-.38c0-.106.038-.196.105-.27a.363.363 0 0 1 .273-.106Z"
+        fill="#fff"
+    />
+</svg>

package/src/components/layout/HeaderFirstLevel.tsx

@@ -26,11 +26,15 @@ import { HStack } from "../stack";
 import { H3 } from "../typography";
 import { HeaderActionProps } from "./common";
 
+type HeaderActionsProp =
+  | readonly [] // No actions
+  | readonly [HeaderActionProps] // Single action
+  | readonly [HeaderActionProps, HeaderActionProps] // Two actions
+  | readonly [HeaderActionProps, HeaderActionProps, HeaderActionProps]; // Three actions
+
 export type HeaderFirstLevel = WithTestID<{
   title: string;
-  firstAction: HeaderActionProps;
-  secondAction: HeaderActionProps;
-  thirdAction?: HeaderActionProps;
+  actions: HeaderActionsProp;
   animatedRef?: AnimatedRef<Animated.ScrollView>;
   animatedFlatListRef?: AnimatedRef<Animated.FlatList<any>>;
   ignoreSafeAreaMargin?: boolean;
@@ -58,9 +62,7 @@ const styles = StyleSheet.create({
 export const HeaderFirstLevel = ({
   title,
   testID,
-  firstAction,
-  secondAction,
-  thirdAction,
+  actions = [],
   ignoreSafeAreaMargin = false,
   animatedRef,
   animatedFlatListRef
@@ -133,9 +135,17 @@ export const HeaderFirstLevel = ({
           </H3>
         </View>
         <HStack space={16} style={{ flexShrink: 0 }}>
-          {thirdAction && <IconButton {...thirdAction} color={"primary"} />}
-          <IconButton {...secondAction} color={"primary"} />
-          <IconButton {...firstAction} color={"primary"} />
+          {actions
+            .filter(
+              (action): action is HeaderActionProps => action !== undefined
+            )
+            .map((action, index) => (
+              <IconButton
+                key={`header-first-level-action-${index}`}
+                {...action}
+                color={"primary"}
+              />
+            ))}
         </HStack>
       </View>
     </Animated.View>