@pagopa/io-app-design-system 6.0.5 → 6.0.7

package/src/components/otpInput/OTPInput.tsx

@@ -8,10 +8,11 @@ import {
 } from "react";
 import {
   AccessibilityInfo,
-  NativeSyntheticEvent,
+  Platform,
   Pressable,
+  StyleSheet,
   TextInput,
-  TextInputKeyPressEventData,
+  TextInputKeyPressEvent,
   View
 } from "react-native";
 import Animated from "react-native-reanimated";
@@ -35,6 +36,10 @@ type Props = {
   accessibilityLabel?: string;
   deleteButtonAccessibilityLabel?: string;
   accessibilityHint?: string;
+  accessibilityValueText?: (params: {
+    valueLength: number;
+    length: number;
+  }) => string;
   inputAccessoryViewID?: string;
   autoFocus?: boolean;
 };
@@ -60,6 +65,7 @@ export const OTPInput = forwardRef<View, Props>(
       length,
       accessibilityLabel,
       accessibilityHint,
+      accessibilityValueText,
       onValidate,
       errorMessage = "",
       secret = false,
@@ -120,10 +126,8 @@ export const OTPInput = forwardRef<View, Props>(
       handleValidate(value);
     };
 
-    const handleKeyPress = ({
-      nativeEvent
-    }: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
-      switch (nativeEvent.key) {
+    const handleKeyPress = (e: TextInputKeyPressEvent) => {
+      switch (e.nativeEvent.key) {
         case "Backspace":
           if (deleteButtonAccessibilityLabel && value.length > 0) {
             AccessibilityInfo.announceForAccessibility(
@@ -132,7 +136,7 @@ export const OTPInput = forwardRef<View, Props>(
           }
           break;
         default:
-          AccessibilityInfo.announceForAccessibility(nativeEvent.key);
+          AccessibilityInfo.announceForAccessibility(e.nativeEvent.key);
           break;
       }
     };
@@ -147,21 +151,20 @@ export const OTPInput = forwardRef<View, Props>(
             setHasFocus(true);
           }}
           ref={ref}
-          style={{
-            flexDirection: "row",
-            justifyContent: "space-between",
-            columnGap: OTP_ITEMS_GAP
-          }}
-          accessible={true}
-          accessibilityLabel={accessibilityLabel}
-          accessibilityHint={accessibilityHint}
-          accessibilityValue={{ text: value }}
+          accessible={false}
         >
           <TextInput
             value={value}
             onChangeText={handleChange}
             onKeyPress={handleKeyPress}
-            style={{ position: "absolute", opacity: 0 }}
+            caretHidden={Platform.OS === "ios"}
+            style={[
+              StyleSheet.absoluteFillObject,
+              Platform.select({
+                ios: { opacity: 0.01 },
+                android: { opacity: 0 }
+              })
+            ]}
             maxLength={length}
             ref={inputRef}
             onBlur={() => setHasFocus(false)}
@@ -172,23 +175,45 @@ export const OTPInput = forwardRef<View, Props>(
             autoComplete={autocomplete ? "sms-otp" : undefined}
             inputAccessoryViewID={inputAccessoryViewID}
             accessible={true}
+            accessibilityLabel={accessibilityLabel}
+            accessibilityHint={accessibilityHint}
+            // Ensure the screen reader pronounces the code digit by digit
+            accessibilityValue={{
+              text:
+                accessibilityValueText?.({
+                  valueLength: value.length,
+                  length
+                }) ?? value.split("").join(" ")
+            }}
             autoFocus={autoFocus}
-            secureTextEntry={true}
+            secureTextEntry={secret}
           />
-          {cells.map((_, i) => (
-            <BoxedInput
-              key={i}
-              status={
-                hasError
-                  ? "error"
-                  : hasFocus && value.length === i
-                  ? "focus"
-                  : "default"
-              }
-              secret={secret}
-              value={value[i]}
-            />
-          ))}
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              columnGap: OTP_ITEMS_GAP,
+              flexGrow: 1,
+              zIndex: 10
+            }}
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+          >
+            {cells.map((_, i) => (
+              <BoxedInput
+                key={i}
+                status={
+                  hasError
+                    ? "error"
+                    : hasFocus && value.length === i
+                    ? "focus"
+                    : "default"
+                }
+                secret={secret}
+                value={value[i]}
+              />
+            ))}
+          </View>
         </Pressable>
         <VSpacer size={4} />
         {hasError && errorMessage && (

package/src/components/searchInput/SearchInput.tsx

@@ -307,7 +307,6 @@ export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
           >
             <IOText
               color={theme["interactiveElem-default"]}
-              font={newTypefaceEnabled ? "Titillio" : "TitilliumSansPro"}
               weight={"Semibold"}
               size={buttonTextFontSize}
               lineHeight={buttonTextLineHeight}

package/src/components/tabs/TabItem.tsx

@@ -13,7 +13,7 @@ import Animated, {
   useReducedMotion,
   withSpring
 } from "react-native-reanimated";
-import { useIONewTypeface, useIOTheme } from "../../context";
+import { useIOTheme } from "../../context";
 import { IOColors, IOSpringValues, hexToRgba } from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
@@ -77,7 +77,6 @@ const TabItem = forwardRef(
       useScaleAnimation("medium");
     const theme = useIOTheme();
     const reducedMotion = useReducedMotion();
-    const { newTypefaceEnabled } = useIONewTypeface();
 
     const mapColorStates: Record<
       NonNullable<TabItem["color"]>,
@@ -199,12 +198,7 @@ const TabItem = forwardRef(
           {activeIcon && (
             <Icon name={activeIcon} color={foregroundColor} size={16} />
           )}
-          <IOText
-            size={14}
-            font={newTypefaceEnabled ? "Titillio" : "TitilliumSansPro"}
-            weight="Semibold"
-            color={foregroundColor}
-          >
+          <IOText size={14} weight="Semibold" color={foregroundColor}>
             {label}
           </IOText>
         </Animated.View>

package/src/components/tag/Tag.tsx

@@ -1,5 +1,5 @@
 import { Platform, StyleSheet, View, ViewStyle } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../context";
+import { useIOTheme } from "../../context";
 import {
   IOColors,
   IOSpacingScale,
@@ -155,7 +155,6 @@ export const Tag = ({
   forceLightMode = false
 }: Tag) => {
   const theme = useIOTheme();
-  const { newTypefaceEnabled } = useIONewTypeface();
   const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale();
 
   const variantProps = getVariantProps(variant, icon);
@@ -203,7 +202,6 @@ export const Tag = ({
       {text && (
         <IOText
           allowFontScaling={allowFontScaling}
-          font={newTypefaceEnabled ? "Titillio" : "TitilliumSansPro"}
           weight={"Semibold"}
           size={12}
           lineHeight={16}

package/src/components/toast/ToastProvider.tsx

@@ -1,4 +1,3 @@
-import { throttle } from "lodash";
 import { ReactNode, useCallback, useMemo, useRef, useState } from "react";
 import { AccessibilityInfo, StyleSheet, View } from "react-native";
 import Animated, {
@@ -10,6 +9,7 @@ import Animated, {
 import { SafeAreaView } from "react-native-safe-area-context";
 import { IOVisualCostants } from "../../core";
 import { triggerHaptic } from "../../functions";
+import { throttle } from "../../utils/throttle";
 import { Dismissable } from "../templates";
 import { ToastNotification } from "./ToastNotification";
 import { ToastContext } from "./context";

package/src/components/tooltip/Tooltip.tsx

@@ -1,4 +1,3 @@
-import { every, some } from "lodash";
 import {
   JSXElementConstructor,
   PropsWithChildren,
@@ -194,8 +193,10 @@ export const Tooltip = ({
     () => ARROWS_BY_PLACEMENT[currentPlacement],
     [currentPlacement]
   );
+  const childrenCoordsValues = Object.values(childrenCoords);
   const isChildrenMeasurementFinished =
-    every(childrenCoords, isDefined) && some(childrenCoords, isNotZero);
+    childrenCoordsValues.every(isDefined) &&
+    childrenCoordsValues.some(isNotZero);
   const isTooltipMeasurementCompleted = isDefined(tooltipLayout);
   const tooltipVisibility = { opacity: isTooltipMeasurementCompleted ? 1 : 0 };
 
@@ -211,7 +212,7 @@ export const Tooltip = ({
           width,
           height
         };
-        if (every(coords, isDefined)) {
+        if (Object.values(coords).every(isDefined)) {
           setChildrenCoords(coords);
         }
       });

package/src/components/typography/Body.tsx

@@ -1,7 +1,7 @@
 import { ForwardedRef, forwardRef } from "react";
 import { Pressable, View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../context";
-import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
+import { useIOTheme } from "../../context";
+import { IOFontWeight } from "../../utils/fonts";
 import {
   IOText,
   IOTextProps,
@@ -16,9 +16,6 @@ type BodyStyleProps = TypographicStyleProps & {
 export const bodyFontSize = 16;
 export const bodyLineHeight = 24;
 
-const fontName: IOFontFamily = "Titillio";
-const legacyFontName: IOFontFamily = "TitilliumSansPro";
-
 /**
  * `Body` typographic style
  */
@@ -37,7 +34,6 @@ export const Body = forwardRef<View, BodyStyleProps>(
     ref?: ForwardedRef<View>
   ) => {
     const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
 
     const defaultColor = asLink
       ? theme["interactiveElem-default"]
@@ -46,8 +42,7 @@ export const Body = forwardRef<View, BodyStyleProps>(
     const BodyProps: IOTextProps = {
       ...props,
       dynamicTypeRamp: "body", // iOS only
-      font: newTypefaceEnabled ? fontName : legacyFontName,
-      weight: customWeight ? customWeight : "Regular",
+      weight: customWeight || "Regular",
       size: bodyFontSize,
       lineHeight: bodyLineHeight,
       color: customColor ?? defaultColor,

package/src/components/typography/BodySmall.tsx

@@ -1,7 +1,7 @@
 import { ForwardedRef, forwardRef } from "react";
 import { Pressable, View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../context";
-import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
+import { useIOTheme } from "../../context";
+import { IOFontWeight } from "../../utils/fonts";
 import {
   IOText,
   IOTextProps,
@@ -13,9 +13,6 @@ type BodySmallProps = TypographicStyleProps & {
   weight?: Extract<IOFontWeight, "Regular" | "Semibold">;
 } & TypographicStyleAsLinkProps;
 
-const fontName: IOFontFamily = "Titillio";
-const legacyFontName: IOFontFamily = "TitilliumSansPro";
-
 /**
  * `BodySmall` typographic style
  */
@@ -34,7 +31,6 @@ export const BodySmall = forwardRef<View, BodySmallProps>(
     ref?: ForwardedRef<View>
   ) => {
     const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
 
     const defaultColor = asLink
       ? theme["interactiveElem-default"]
@@ -43,7 +39,6 @@ export const BodySmall = forwardRef<View, BodySmallProps>(
     const BodySmallProps: IOTextProps = {
       ...props,
       dynamicTypeRamp: "footnote" /* iOS only */,
-      font: newTypefaceEnabled ? fontName : legacyFontName,
       weight: customWeight ?? "Regular",
       size: 14,
       lineHeight: 21,

package/src/components/typography/ButtonText.tsx

@@ -1,8 +1,8 @@
 import { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface } from "../../context";
+
 import { IOColors } from "../../core";
-import { IOFontFamily, IOFontSize } from "../../utils/fonts";
+import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
 export const buttonTextFontSize: IOFontSize = 16;
@@ -11,19 +11,14 @@ export const buttonTextLineHeight = 20;
 /* Needed to render `ButtonOutline` and`ButtonLink` because they use
 `AnimatedText` for color transition through Reanimated */
 const defaultColor: IOColors = "white";
-const fontName: IOFontFamily = "Titillio";
-const legacyFontName: IOFontFamily = "TitilliumSansPro";
 
 /**
  * `ButtonText` typographic style
  */
 export const ButtonText = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
-    const { newTypefaceEnabled } = useIONewTypeface();
-
     const ButtonTextProps: IOTextProps = {
       ...props,
-      font: newTypefaceEnabled ? fontName : legacyFontName,
       weight: "Semibold",
       size: buttonTextFontSize,
       lineHeight: buttonTextLineHeight,

package/src/components/typography/Caption.tsx

@@ -1,6 +1,6 @@
 import { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../context";
+import { useIOTheme } from "../../context";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
@@ -12,12 +12,10 @@ export const captionFontSize: IOFontSize = 12;
 export const Caption = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
 
     const CaptionProps: IOTextProps = {
       ...props,
       dynamicTypeRamp: "caption1", // iOS only
-      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
       weight: "Regular",
       size: captionFontSize,
       color: customColor ?? theme["textBody-default"],

package/src/components/typography/H1.tsx

@@ -1,6 +1,6 @@
 import { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../context";
+import { useIOTheme } from "../../context";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
@@ -13,12 +13,10 @@ export const h1LineHeight = 42;
 export const H1 = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
 
     const H1Props: IOTextProps = {
       ...props,
       dynamicTypeRamp: "largeTitle", // iOS only
-      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
       weight: "Semibold",
       size: h1FontSize,
       lineHeight: h1LineHeight,

package/src/components/typography/H2.tsx

@@ -1,6 +1,6 @@
 import { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../context";
+import { useIOTheme } from "../../context";
 import { IOFontSize, IOFontWeight } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
@@ -20,12 +20,10 @@ export const H2 = forwardRef<View, H2StyleProps>(
     ref?: ForwardedRef<View>
   ) => {
     const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
 
     const H2Props: IOTextProps = {
       ...props,
       dynamicTypeRamp: "title1", // iOS only
-      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
       weight: customWeight ?? "Semibold",
       size: h2FontSize,
       lineHeight: h2LineHeight,

package/src/components/typography/H3.tsx

@@ -1,6 +1,6 @@
 import { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../context";
+import { useIOTheme } from "../../context";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
@@ -14,12 +14,10 @@ export const h3LineHeight = 33;
 export const H3 = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
 
     const H3Props: IOTextProps = {
       ...props,
       dynamicTypeRamp: "title2", // iOS only
-      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
       weight: "Semibold",
       size: h3FontSize,
       lineHeight: h3LineHeight,

package/src/components/typography/H4.tsx

@@ -1,6 +1,6 @@
 import { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../context";
+import { useIOTheme } from "../../context";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
@@ -13,12 +13,10 @@ export const h4LineHeight = 24;
 export const H4 = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
 
     const H4Props: IOTextProps = {
       ...props,
       dynamicTypeRamp: "title3", // iOS only
-      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
       weight: "Semibold",
       size: h4FontSize,
       lineHeight: h4LineHeight,

package/src/components/typography/H5.tsx

@@ -1,6 +1,6 @@
 import { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../context";
+import { useIOTheme } from "../../context";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
@@ -13,12 +13,10 @@ export const h5LineHeight = 16;
 export const H5 = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
 
     const H5Props: IOTextProps = {
       ...props,
       dynamicTypeRamp: "subheadline", // iOS only
-      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
       weight: "Semibold",
       size: h5FontSize,
       lineHeight: h5LineHeight,

package/src/components/typography/H6.tsx

@@ -21,7 +21,6 @@ export const H6 = forwardRef<View, TypographicStyleProps>(
     const H6Props: IOTextProps = {
       ...props,
       dynamicTypeRamp: "headline", // iOS only
-      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
       weight: "Semibold",
       size: newTypefaceEnabled ? h6FontSize : legacyFontSize,
       lineHeight: h6LineHeight,

package/src/components/typography/Hero.tsx

@@ -1,6 +1,6 @@
 import { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../context";
+import { useIOTheme } from "../../context";
 import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
@@ -13,11 +13,9 @@ export const heroLineHeight = 48;
 export const Hero = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
 
     const HeroProps: IOTextProps = {
       ...props,
-      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
       weight: "Semibold",
       size: 32,
       lineHeight: 48,

package/src/components/typography/IOText.tsx

@@ -8,7 +8,7 @@ import {
   View
 } from "react-native";
 import Animated from "react-native-reanimated";
-import { useIOTheme } from "../../context";
+import { useIONewTypeface } from "../../context";
 import { IOColors } from "../../core";
 import { useBoldTextEnabled } from "../../utils/accessibility";
 import {
@@ -74,11 +74,11 @@ export type TypographicStyleAsLinkProps =
  * @param args the args of the function {@link makeFontStyleObject}
  */
 const calculateTextStyle = (
-  color: IOColors,
+  color?: IOColors,
   ...args: Parameters<typeof makeFontStyleObject>
 ) => ({
   ...makeFontStyleObject(...args),
-  color: IOColors[color]
+  color: color ? IOColors[color] : undefined
 });
 
 /**
@@ -106,21 +106,24 @@ export const IOText = forwardRef<View, IOTextProps>(
     },
     ref
   ) => {
-    const theme = useIOTheme();
     const boldEnabled = useBoldTextEnabled();
+    const { newTypefaceEnabled } = useIONewTypeface();
+
+    const computedFont =
+      font || (newTypefaceEnabled ? "Titillio" : "TitilliumSansPro");
 
     const computedStyleObj = useMemo(
       () =>
         calculateTextStyle(
-          color ?? theme["textBody-default"],
+          color,
           size,
-          font,
+          computedFont,
           lineHeight,
           weight,
           fontStyle,
           boldEnabled
         ),
-      [color, theme, size, font, lineHeight, weight, fontStyle, boldEnabled]
+      [color, size, computedFont, lineHeight, weight, fontStyle, boldEnabled]
     );
 
     /* In some cases, for example when we use color transitions with

package/src/components/typography/LabelMini.tsx

@@ -1,7 +1,7 @@
 import { ForwardedRef, forwardRef } from "react";
 import { Pressable, View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../context";
-import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
+import { useIOTheme } from "../../context";
+import { IOFontWeight } from "../../utils/fonts";
 import {
   IOText,
   IOTextProps,
@@ -13,9 +13,6 @@ type LabelMiniProps = TypographicStyleProps & {
   weight?: Extract<IOFontWeight, "Regular" | "Semibold">;
 } & TypographicStyleAsLinkProps;
 
-const fontName: IOFontFamily = "Titillio";
-const legacyFontName: IOFontFamily = "TitilliumSansPro";
-
 /**
  * `LabelMini` typographic style
  */
@@ -33,7 +30,6 @@ export const LabelMini = forwardRef<View, LabelMiniProps>(
     ref?: ForwardedRef<View>
   ) => {
     const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
 
     const defaultColor = asLink
       ? theme["interactiveElem-default"]
@@ -42,8 +38,7 @@ export const LabelMini = forwardRef<View, LabelMiniProps>(
     const LabelMiniProps: IOTextProps = {
       ...props,
       dynamicTypeRamp: "footnote" /* iOS only */,
-      font: newTypefaceEnabled ? fontName : legacyFontName,
-      weight: customWeight ? customWeight : "Semibold",
+      weight: customWeight || "Semibold",
       size: 12,
       lineHeight: 18,
       color: customColor ?? defaultColor,

package/src/components/typography/markdown/MdH1.tsx

@@ -1,6 +1,6 @@
 import { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../../context";
+import { useIOTheme } from "../../../context";
 import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 
 /**
@@ -9,11 +9,9 @@ import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 export const MdH1 = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
 
     const MdH1Props: IOTextProps = {
       ...props,
-      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
       weight: "Semibold",
       size: 20,
       lineHeight: 24,

package/src/components/typography/markdown/MdH2.tsx

@@ -1,6 +1,6 @@
 import { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../../context";
+import { useIOTheme } from "../../../context";
 import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 
 /**
@@ -9,11 +9,9 @@ import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 export const MdH2 = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
 
     const MdH2Props: IOTextProps = {
       ...props,
-      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
       weight: "Semibold",
       size: 18,
       lineHeight: 24,

package/src/components/typography/markdown/MdH3.tsx

@@ -1,6 +1,6 @@
 import { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIONewTypeface, useIOTheme } from "../../../context";
+import { useIOTheme } from "../../../context";
 import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 
 /**
@@ -9,11 +9,9 @@ import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 export const MdH3 = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
-    const { newTypefaceEnabled } = useIONewTypeface();
 
     const MdH3Props: IOTextProps = {
       ...props,
-      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
       weight: "Semibold",
       size: 16,
       lineHeight: 24,