@pagopa/io-app-design-system 5.3.9 → 5.4.0

package/src/components/layout/FooterActions.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ComponentProps, Fragment, PropsWithChildren, useState } from "react";
+import { Fragment, PropsWithChildren, useState } from "react";
 import {
   ColorValue,
   LayoutChangeEvent,
@@ -20,29 +20,39 @@ import {
   useIOTheme
 } from "../../core";
 import { WithTestID } from "../../utils/types";
-import { ButtonLink, ButtonOutline, ButtonSolid } from "../buttons";
+import {
+  IOButton,
+  IOButtonBlockSpecificProps,
+  IOButtonLinkSpecificProps
+} from "../buttons";
 import { VSpacer } from "../spacer";
 import { useBottomMargins } from "./hooks/useBottomMargins";
 
+type IOButtonBlockProps = Omit<
+  IOButtonBlockSpecificProps,
+  "variant" | "fullWidth"
+>;
+type IOButtonLinkProps = Omit<IOButtonLinkSpecificProps, "variant">;
+
 type FooterSingleButton = {
   type: "SingleButton";
-  primary: Omit<ComponentProps<typeof ButtonSolid>, "fullWidth">;
+  primary: IOButtonBlockProps;
   secondary?: never;
   tertiary?: never;
 };
 
 type FooterTwoButtons = {
   type: "TwoButtons";
-  primary: Omit<ComponentProps<typeof ButtonSolid>, "fullWidth">;
-  secondary: Omit<ComponentProps<typeof ButtonLink>, "color">;
+  primary: IOButtonBlockProps;
+  secondary: IOButtonLinkProps;
   tertiary?: never;
 };
 
 type FooterThreeButtons = {
   type: "ThreeButtons";
-  primary: Omit<ComponentProps<typeof ButtonSolid>, "fullWidth">;
-  secondary: Omit<ComponentProps<typeof ButtonOutline>, "fullWidth" | "color">;
-  tertiary: Omit<ComponentProps<typeof ButtonLink>, "color">;
+  primary: IOButtonBlockProps;
+  secondary: IOButtonBlockProps;
+  tertiary: IOButtonLinkProps;
 };
 
 export type FooterActionsMeasurements = {
@@ -86,9 +96,9 @@ type FooterActionsProps = WithTestID<
   }>
 >;
 
-/* Margin between ButtonSolid and ButtonOutline */
+/* Margin between `solid` and `variant` variant */
 const spaceBetweenActions: IOSpacer = 16;
-/* Margin between ButtonSolid and ButtonLink */
+/* Margin between `solid` and `link` variant */
 const spaceBetweenActionAndLink: IOSpacer = 16;
 
 const styles = StyleSheet.create({
@@ -227,11 +237,13 @@ const renderActions = (
   } = actions;
   return (
     <Fragment>
-      {primaryAction && <ButtonSolid fullWidth {...primaryAction} />}
+      {primaryAction && (
+        <IOButton variant="solid" fullWidth {...primaryAction} />
+      )}
       {type === "TwoButtons" && secondaryAction && (
         <View style={{ alignSelf: "center", marginBottom: extraBottomMargin }}>
           <VSpacer size={spaceBetweenActionAndLink} />
-          <ButtonLink color="primary" {...secondaryAction} />
+          <IOButton variant="link" {...secondaryAction} />
         </View>
       )}
       {type === "ThreeButtons" && (
@@ -239,7 +251,7 @@ const renderActions = (
           {secondaryAction && (
             <>
               <VSpacer size={spaceBetweenActions} />
-              <ButtonOutline fullWidth color="primary" {...secondaryAction} />
+              <IOButton variant="outline" fullWidth {...secondaryAction} />
             </>
           )}
           {tertiaryAction && (
@@ -247,7 +259,7 @@ const renderActions = (
               style={{ alignSelf: "center", marginBottom: extraBottomMargin }}
             >
               <VSpacer size={spaceBetweenActionAndLink} />
-              <ButtonLink color="primary" {...tertiaryAction} />
+              <IOButton variant="link" {...tertiaryAction} />
             </View>
           )}
         </>

package/src/components/layout/FooterActionsInline.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ComponentProps, PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 import { ColorValue, LayoutChangeEvent, StyleSheet, View } from "react-native";
 import {
   IOColors,
@@ -11,10 +11,14 @@ import {
   useIOThemeContext
 } from "../../core";
 import { WithTestID } from "../../utils/types";
-import { ButtonOutline, ButtonSolid } from "../buttons";
-import { HSpacer } from "../spacer";
+import { IOButton, IOButtonBlockSpecificProps } from "../buttons";
 import { useBottomMargins } from "./hooks/useBottomMargins";
 
+type IOButtonBlockProps = Omit<
+  IOButtonBlockSpecificProps,
+  "variant" | "fullWidth"
+>;
+
 export type FooterActionsInlineMeasurements = {
   /* Height of the safe bottom area. It includes:
      - Margin between screen content
@@ -29,8 +33,8 @@ export type FooterActionsInlineMeasurements = {
 
 type FooterActionsInline = WithTestID<
   PropsWithChildren<{
-    startAction: Omit<ComponentProps<typeof ButtonOutline>, "fullWidth">;
-    endAction: Omit<ComponentProps<typeof ButtonSolid>, "fullWidth">;
+    startAction: IOButtonBlockProps;
+    endAction: IOButtonBlockProps;
     onMeasure?: (measurements: FooterActionsInlineMeasurements) => void;
     /* Don't include safe area insets */
     excludeSafeAreaMargins?: boolean;
@@ -39,9 +43,6 @@ type FooterActionsInline = WithTestID<
   }>
 >;
 
-/* Margin between ButtonSolid and ButtonOutline */
-const spaceBetweenActions: IOSpacer = 16;
-
 const styles = StyleSheet.create({
   buttonContainer: {
     paddingHorizontal: IOVisualCostants.appMarginDefault,
@@ -76,6 +77,8 @@ export const FooterActionsInline = ({
 
   const { bottomMargin } = useBottomMargins(false, excludeSafeAreaMargins);
 
+  /* Margin between `solid` and `outline` variant */
+  const spaceBetweenActions: IOSpacer = 16;
   /* Top padding applied above the actions */
   const topSpacingValue: IOSpacingScale = 16;
   const topSpacing = fixed ? topSpacingValue : 0;
@@ -122,13 +125,17 @@ export const FooterActionsInline = ({
         onLayout={getActionBlockMeasurements}
         pointerEvents="box-none"
       >
-        <View style={{ flexDirection: "row" }}>
+        <View
+          style={{
+            flexDirection: "row",
+            gap: spaceBetweenActions
+          }}
+        >
           <View style={styles.buttonWrapper}>
-            <ButtonOutline fullWidth {...startAction} />
+            <IOButton variant="outline" fullWidth {...startAction} />
           </View>
-          <HSpacer size={spaceBetweenActions} />
           <View style={styles.buttonWrapper}>
-            <ButtonSolid fullWidth {...endAction} />
+            <IOButton variant="solid" fullWidth {...endAction} />
           </View>
         </View>
       </View>

package/src/components/layout/GradientBottomActions.tsx

@@ -2,23 +2,24 @@ import * as React from "react";
 import { Easing, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { easeGradient } from "react-native-easing-gradient";
 import LinearGradient from "react-native-linear-gradient";
-import Animated from "react-native-reanimated";
+import Animated, { AnimatedStyle } from "react-native-reanimated";
 import { IOColors, IOSpacer, IOVisualCostants, hexToRgba } from "../../core";
 import { WithTestID } from "../../utils/types";
-import {
-  ButtonLink,
-  ButtonLinkProps,
-  ButtonSolid,
-  ButtonSolidProps
-} from "../buttons";
+import { IOButton, IOButtonProps } from "../buttons";
 import { VSpacer } from "../spacer";
 
+type PrimaryActionProps = Extract<
+  IOButtonProps,
+  { variant?: "solid" | "outline" }
+>;
+type SecondaryActionProps = Extract<IOButtonProps, { variant?: "link" }>;
+
 export type GradientBottomActions = WithTestID<{
-  transitionAnimStyle: Animated.AnimateStyle<StyleProp<ViewStyle>>;
+  transitionAnimStyle: AnimatedStyle<StyleProp<ViewStyle>>;
   dimensions: GradientBottomActionsDimensions;
-  // Accepted components: ButtonSolid for the primaryAction, ButtonLink for the secondaryAction
-  primaryActionProps?: Omit<ButtonSolidProps, "fullWidth">;
-  secondaryActionProps?: ButtonLinkProps;
+  // Button actions
+  primaryActionProps?: PrimaryActionProps;
+  secondaryActionProps?: SecondaryActionProps;
   // Debug mode
   debugMode?: boolean;
 }>;
@@ -68,8 +69,8 @@ const styles = StyleSheet.create({
  * @see IOScrollView
  */
 export const GradientBottomActions = ({
-  primaryActionProps: primaryAction,
-  secondaryActionProps: secondaryAction,
+  primaryActionProps,
+  secondaryActionProps,
   dimensions,
   transitionAnimStyle,
   debugMode,
@@ -122,11 +123,9 @@ export const GradientBottomActions = ({
       ]}
     />
     <View style={styles.buttonContainer} pointerEvents="box-none">
-      {primaryAction && (
-        <ButtonSolid fullWidth {...primaryAction}></ButtonSolid>
-      )}
+      {primaryActionProps && <IOButton {...primaryActionProps} fullWidth />}
 
-      {secondaryAction && (
+      {secondaryActionProps && (
         <View
           style={{
             alignSelf: "center",
@@ -134,7 +133,7 @@ export const GradientBottomActions = ({
           }}
         >
           <VSpacer size={dimensions.spaceBetweenActions} />
-          {<ButtonLink {...secondaryAction}></ButtonLink>}
+          <IOButton {...secondaryActionProps} />
         </View>
       )}
     </View>

package/src/components/layout/GradientScrollView.tsx

@@ -21,7 +21,8 @@ export type GradientScrollView = WithTestID<{
   children: React.ReactNode;
   excludeSafeAreaMargins?: boolean;
   debugMode?: boolean;
-  // Accepted components: ButtonSolid, ButtonLink
+  // Accepted components: `solid` variant for the primaryAction,
+  // `link` variant for the secondaryAction.
   // Don't use any components other than this, please.
   primaryActionProps: GradientBottomActions["primaryActionProps"];
   secondaryActionProps?: GradientBottomActions["secondaryActionProps"];

package/src/components/listitems/ListItemNav.tsx

@@ -229,7 +229,7 @@ export const ListItemNav = ({
           <View style={{ flexGrow: 1, flexShrink: 1 }}>
             {listItemNavContent}
           </View>
-          {loading && <LoadingSpinner color={interactiveColor} />}
+          {loading && <LoadingSpinner color={IOColors[interactiveColor]} />}
           {!loading && !hideChevron && (
             <Icon
               allowFontScaling

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

@@ -321,6 +321,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
         align="xMidYMid"
         bbHeight={24}
         bbWidth={24}
+        color="#0B3EE3"
         focusable={false}
         height={24}
         importantForAccessibility="no-hide-descendants"
@@ -333,9 +334,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
               "backgroundColor": "transparent",
               "borderWidth": 0,
             },
-            {
-              "color": "#0B3EE3",
-            },
             {
               "flex": 0,
               "height": 24,
@@ -348,7 +346,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
         width={24}
       >
         <RNSVGGroup
-          color="#0B3EE3"
           fill={
             {
               "payload": 4278190080,
@@ -482,6 +479,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNav Snapshot
         align="xMidYMid"
         bbHeight={24}
         bbWidth={24}
+        color="#0B3EE3"
         focusable={false}
         height={24}
         importantForAccessibility="no-hide-descendants"
@@ -494,9 +492,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNav Snapshot
               "backgroundColor": "transparent",
               "borderWidth": 0,
             },
-            {
-              "color": "#0B3EE3",
-            },
             {
               "flex": 0,
               "height": 24,
@@ -509,7 +504,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNav Snapshot
         width={24}
       >
         <RNSVGGroup
-          color="#0B3EE3"
           fill={
             {
               "payload": 4278190080,
@@ -619,6 +613,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
         align="xMidYMid"
         bbHeight={24}
         bbWidth={24}
+        color="#D13333"
         focusable={false}
         height={24}
         importantForAccessibility="no-hide-descendants"
@@ -631,9 +626,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
               "backgroundColor": "transparent",
               "borderWidth": 0,
             },
-            {
-              "color": "#D13333",
-            },
             {
               "flex": 0,
               "height": 24,
@@ -646,7 +638,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
         width={24}
       >
         <RNSVGGroup
-          color="#D13333"
           fill={
             {
               "payload": 4278190080,
@@ -707,6 +698,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
         align="xMidYMid"
         bbHeight={24}
         bbWidth={24}
+        color="#0B3EE3"
         focusable={false}
         height={24}
         importantForAccessibility="no-hide-descendants"
@@ -719,9 +711,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
               "backgroundColor": "transparent",
               "borderWidth": 0,
             },
-            {
-              "color": "#0B3EE3",
-            },
             {
               "flex": 0,
               "height": 24,
@@ -734,7 +723,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
         width={24}
       >
         <RNSVGGroup
-          color="#0B3EE3"
           fill={
             {
               "payload": 4278190080,
@@ -880,6 +868,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
             align="xMidYMid"
             bbHeight={16}
             bbWidth={16}
+            color="#5517E3"
             focusable={false}
             height={16}
             importantForAccessibility="no-hide-descendants"
@@ -892,9 +881,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                {
-                  "color": "#5517E3",
-                },
                 {
                   "flex": 0,
                   "height": 16,
@@ -907,7 +893,6 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
             width={16}
           >
             <RNSVGGroup
-              color="#5517E3"
               fill={
                 {
                   "payload": 4278190080,
@@ -1864,6 +1849,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
         align="xMidYMid"
         bbHeight={24}
         bbWidth={24}
+        color="#0B3EE3"
         focusable={false}
         height={24}
         importantForAccessibility="no-hide-descendants"
@@ -1876,9 +1862,6 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
               "backgroundColor": "transparent",
               "borderWidth": 0,
             },
-            {
-              "color": "#0B3EE3",
-            },
             {
               "flex": 0,
               "height": 24,
@@ -1891,7 +1874,6 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
         width={24}
       >
         <RNSVGGroup
-          color="#0B3EE3"
           fill={
             {
               "payload": 4278190080,
@@ -2025,6 +2007,7 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
         align="xMidYMid"
         bbHeight={24}
         bbWidth={24}
+        color="#0B3EE3"
         focusable={false}
         height={24}
         importantForAccessibility="no-hide-descendants"
@@ -2037,9 +2020,6 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
               "backgroundColor": "transparent",
               "borderWidth": 0,
             },
-            {
-              "color": "#0B3EE3",
-            },
             {
               "flex": 0,
               "height": 24,
@@ -2052,7 +2032,6 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
         width={24}
       >
         <RNSVGGroup
-          color="#0B3EE3"
           fill={
             {
               "payload": 4278190080,
@@ -2162,6 +2141,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
         align="xMidYMid"
         bbHeight={24}
         bbWidth={24}
+        color="#D13333"
         focusable={false}
         height={24}
         importantForAccessibility="no-hide-descendants"
@@ -2174,9 +2154,6 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
               "backgroundColor": "transparent",
               "borderWidth": 0,
             },
-            {
-              "color": "#D13333",
-            },
             {
               "flex": 0,
               "height": 24,
@@ -2189,7 +2166,6 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
         width={24}
       >
         <RNSVGGroup
-          color="#D13333"
           fill={
             {
               "payload": 4278190080,
@@ -2250,6 +2226,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
         align="xMidYMid"
         bbHeight={24}
         bbWidth={24}
+        color="#0B3EE3"
         focusable={false}
         height={24}
         importantForAccessibility="no-hide-descendants"
@@ -2262,9 +2239,6 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
               "backgroundColor": "transparent",
               "borderWidth": 0,
             },
-            {
-              "color": "#0B3EE3",
-            },
             {
               "flex": 0,
               "height": 24,
@@ -2277,7 +2251,6 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
         width={24}
       >
         <RNSVGGroup
-          color="#0B3EE3"
           fill={
             {
               "payload": 4278190080,
@@ -2423,6 +2396,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
             align="xMidYMid"
             bbHeight={16}
             bbWidth={16}
+            color="#5517E3"
             focusable={false}
             height={16}
             importantForAccessibility="no-hide-descendants"
@@ -2435,9 +2409,6 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                {
-                  "color": "#5517E3",
-                },
                 {
                   "flex": 0,
                   "height": 16,
@@ -2450,7 +2421,6 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
             width={16}
           >
             <RNSVGGroup
-              color="#5517E3"
               fill={
                 {
                   "payload": 4278190080,

package/src/components/loadingSpinner/LoadingSpinner.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useRef } from "react";
-import { View, Animated, Easing } from "react-native";
+import { View, Animated, Easing, ColorValue } from "react-native";
 import Svg, { Defs, G, LinearGradient, Path, Stop } from "react-native-svg";
 import { WithTestID } from "../../utils/types";
 import { IOColors, useIOTheme } from "../../core";
 
 export type LoadingSpinner = WithTestID<{
-  color?: IOColors;
+  color?: ColorValue;
   size?: IOLoadingSpinnerSizeScale;
   durationMs?: number;
   accessibilityLabel?: string;
@@ -36,7 +36,7 @@ export const LoadingSpinner = ({
   const rotationDegree = useRef(new Animated.Value(0)).current;
   const stroke: number = strokeMap[size];
 
-  const color = customColor ?? theme["interactiveElem-default"];
+  const color = customColor ?? IOColors[theme["interactiveElem-default"]];
 
   useEffect(() => {
     const animation = Animated.loop(
@@ -87,12 +87,12 @@ export const LoadingSpinner = ({
         >
           <Defs>
             <LinearGradient id="spinner-secondHalf">
-              <Stop offset="0%" stopOpacity="0" stopColor={IOColors[color]} />
-              <Stop offset="100%" stopOpacity="1" stopColor={IOColors[color]} />
+              <Stop offset="0%" stopOpacity="0" stopColor={color} />
+              <Stop offset="100%" stopOpacity="1" stopColor={color} />
             </LinearGradient>
             <LinearGradient id="spinner-firstHalf">
-              <Stop offset="0%" stopOpacity="1" stopColor={IOColors[color]} />
-              <Stop offset="100%" stopOpacity="1" stopColor={IOColors[color]} />
+              <Stop offset="0%" stopOpacity="1" stopColor={color} />
+              <Stop offset="100%" stopOpacity="1" stopColor={color} />
             </LinearGradient>
           </Defs>
 
@@ -110,7 +110,7 @@ export const LoadingSpinner = ({
               } ${size / 2 - stroke / 2} 0 0 1 ${stroke / 2} ${size / 2}`}
             />
             <Path
-              stroke={IOColors[color]}
+              stroke={color}
               strokeLinecap="round"
               d={`M ${stroke / 2} ${size / 2} A ${size / 2 - stroke / 2} ${
                 size / 2 - stroke / 2

package/src/components/numberpad/NumberButton.tsx

@@ -1,18 +1,12 @@
 import React, { memo, useCallback, useMemo } from "react";
-import { Pressable } from "react-native";
+import { Pressable, StyleSheet } from "react-native";
 import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import Animated, {
   interpolateColor,
   useAnimatedStyle,
   useReducedMotion
 } from "react-native-reanimated";
-import {
-  hexToRgba,
-  IOColors,
-  IONumberPadButtonStyles,
-  useIONewTypeface,
-  useIOTheme
-} from "../../core";
+import { hexToRgba, IOColors, useIONewTypeface, useIOTheme } from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { IOText } from "../typography";
 
@@ -41,6 +35,8 @@ type ColorMapVariant = {
   foreground: IOColors;
 };
 
+const numberPadBtnSize: number = 56;
+
 /**
  * Based on a `Pressable` element, it displays a number button with animations on press In and Out.
  *
@@ -98,9 +94,8 @@ export const NumberButton = memo(
       >
         <Animated.View
           style={[
-            IONumberPadButtonStyles.button,
-            IONumberPadButtonStyles.circularShape,
-            IONumberPadButtonStyles.buttonSize,
+            numberButtonStyles.circularButton,
+            numberButtonStyles.buttonSize,
             pressedAnimationStyle,
             !reducedMotion && scaleAnimatedStyle
           ]}
@@ -122,3 +117,15 @@ export const NumberButton = memo(
     );
   }
 );
+
+export const numberButtonStyles = StyleSheet.create({
+  circularButton: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: numberPadBtnSize / 2
+  },
+  buttonSize: {
+    width: numberPadBtnSize,
+    height: numberPadBtnSize
+  }
+});

package/src/components/numberpad/NumberPad.tsx

@@ -1,11 +1,11 @@
 import React, { ComponentProps, useCallback, useMemo } from "react";
 import { StyleSheet, View } from "react-native";
-import { IONumberPadButtonStyles, IOStyles } from "../../core";
 import { BiometricsValidType, Optional } from "../../utils/types";
 import { IconButton } from "../buttons";
+import { ContentWrapper } from "../contentWrapper";
 import { IOIconSizeScale, IOIcons } from "../icons";
 import { VStack } from "../stack";
-import { NumberButton } from "./NumberButton";
+import { NumberButton, numberButtonStyles } from "./NumberButton";
 
 type BiometricAuthProps =
   | {
@@ -122,9 +122,7 @@ export const NumberPad = ({
           );
         }
 
-        return (
-          <View key={"emptyElem"} style={IONumberPadButtonStyles.buttonSize} />
-        );
+        return <View key={"emptyElem"} style={numberButtonStyles.buttonSize} />;
       }),
     [
       biometricAccessibilityLabel,
@@ -147,7 +145,7 @@ export const NumberPad = ({
           [7, 8, 9],
           [biometricType, 0, "delete"]
         ].map((row, i) => (
-          <View key={i} style={[IOStyles.rowSpaceBetween, styles.numberPad]}>
+          <View key={i} style={styles.numberPad}>
             {renderButtonsRow(row)}
           </View>
         ))}
@@ -156,15 +154,14 @@ export const NumberPad = ({
     [biometricType, renderButtonsRow]
   );
 
-  return <View style={IOStyles.horizontalContentPadding}>{numberPad}</View>;
+  return <ContentWrapper>{numberPad}</ContentWrapper>;
 };
 
 const ButtonWrapper = ({ children }: { children: React.ReactNode }) => (
   <View
     style={[
-      IONumberPadButtonStyles.buttonSize,
-      IOStyles.alignCenter,
-      IOStyles.centerJustified
+      numberButtonStyles.buttonSize,
+      { alignItems: "center", justifyContent: "center" }
     ]}
   >
     {children}
@@ -173,6 +170,7 @@ const ButtonWrapper = ({ children }: { children: React.ReactNode }) => (
 
 const styles = StyleSheet.create({
   numberPad: {
+    flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
     flexGrow: 1