@pagopa/io-app-design-system 6.0.4 → 6.0.6

package/src/components/listitems/ListItemInfo.tsx

@@ -1,5 +1,5 @@
 import { ComponentProps, ReactNode } from "react";
-import { AccessibilityRole, Platform, Pressable, View } from "react-native";
+import { AccessibilityRole, Pressable, View } from "react-native";
 import Animated from "react-native-reanimated";
 import { useIOTheme } from "../../context";
 import { IOListItemStyles, IOListItemVisualParams } from "../../core";
@@ -35,14 +35,8 @@ type EndElementProps =
   | BadgeProps;
 
 type GraphicProps =
-  | {
-      paymentLogoIcon?: IOLogoPaymentType;
-      icon?: never;
-    }
-  | {
-      paymentLogoIcon?: never;
-      icon?: IOIcons;
-    };
+  | { paymentLogoIcon?: IOLogoPaymentType; icon?: never }
+  | { paymentLogoIcon?: never; icon?: IOIcons };
 
 type InteractiveProps = Pick<
   ComponentProps<typeof Pressable>,
@@ -55,7 +49,6 @@ export type ListItemInfo = WithTestID<{
   numberOfLines?: number;
   endElement?: EndElementProps;
   topElement?: BadgeProps;
-  // Accessibility
   accessibilityLabel?: string;
   accessibilityRole?: AccessibilityRole;
   reversed?: boolean;
@@ -72,16 +65,16 @@ const EndElementComponent = ({ type, componentProps }: EndElementProps) => {
         <IOButton
           variant="link"
           {...componentProps}
-          accessibilityLabel={`${
+          accessibilityLabel={
             componentProps.accessibilityLabel ?? componentProps.label
-          }`}
+          }
         />
       );
     case "iconButton":
       return (
         <IconButton
           {...componentProps}
-          accessibilityLabel={`${componentProps.accessibilityLabel}`}
+          accessibilityLabel={componentProps.accessibilityLabel}
         />
       );
     case "badge":
@@ -99,7 +92,9 @@ const ListItemInfoContent = ({
   numberOfLines,
   reversed,
   topElement,
-  endElement
+  endElement,
+  hasInteractiveElements,
+  listItemAccessibilityLabel
 }: Pick<
   ListItemInfo,
   | "icon"
@@ -110,7 +105,10 @@ const ListItemInfoContent = ({
   | "reversed"
   | "topElement"
   | "endElement"
->) => {
+> & {
+  hasInteractiveElements: boolean;
+  listItemAccessibilityLabel?: string;
+}) => {
   const theme = useIOTheme();
   const { hugeFontEnabled } = useIOFontDynamicScale();
 
@@ -124,15 +122,23 @@ const ListItemInfoContent = ({
           size={IOListItemVisualParams.iconSize}
         />
       )}
+
       {paymentLogoIcon && (
         <LogoPaymentWithFallback
           brand={paymentLogoIcon}
           size={PAYMENT_LOGO_SIZE}
         />
       )}
+
       <View style={{ flex: 1 }}>
         <View
-          accessible={Platform.OS === "ios"}
+          accessible={hasInteractiveElements}
+          accessibilityLabel={
+            hasInteractiveElements ? listItemAccessibilityLabel : undefined
+          }
+          importantForAccessibility={
+            hasInteractiveElements ? "yes" : "no-hide-descendants"
+          }
           style={{ flexDirection: reversed ? "column-reverse" : "column" }}
         >
           {topElement?.type === "badge" && (
@@ -141,11 +147,13 @@ const ListItemInfoContent = ({
               <VSpacer size={4} />
             </View>
           )}
+
           {label && (
             <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
               {label}
             </BodySmall>
           )}
+
           {typeof value === "string" ? (
             <H6 color={theme["textBody-default"]} numberOfLines={numberOfLines}>
               {value}
@@ -155,8 +163,14 @@ const ListItemInfoContent = ({
           )}
         </View>
       </View>
+
       {endElement && (
-        <View>
+        <View
+          accessible={false}
+          importantForAccessibility={
+            hasInteractiveElements ? "auto" : "no-hide-descendants"
+          }
+        >
           <EndElementComponent {...endElement} />
         </View>
       )}
@@ -164,6 +178,35 @@ const ListItemInfoContent = ({
   );
 };
 
+/**
+ * ListItemInfo component displays information in a list item format with optional icons,
+ * labels, values, and end elements (buttons, badges).
+ *
+ * @remarks
+ * **Accessibility for Interactive Elements:**
+ * When using interactive end elements (`buttonLink` or `iconButton`), you must provide
+ * an appropriate `accessibilityLabel` directly to the interactive component props.
+ * This ensures that screen reader users can understand the relationship between the
+ * list item content and the action that the interactive element triggers.
+ *
+ * Example:
+ * ```tsx
+ * <ListItemInfo
+ *   label="Email"
+ *   value="user@example.com"
+ *   endElement={{
+ *     type: "buttonLink",
+ *     componentProps: {
+ *       label: "Edit",
+ *       accessibilityLabel: "Edit email address"
+ *     }
+ *   }}
+ * />
+ * ```
+ *
+ * The design system cannot enforce this pattern automatically, so it's the responsibility
+ * of the implementing software engineer to ensure proper accessibility labels are set.
+ */
 export const ListItemInfo = ({
   value,
   label,
@@ -185,13 +228,41 @@ export const ListItemInfo = ({
   const { onPressIn, onPressOut, scaleAnimatedStyle, backgroundAnimatedStyle } =
     useListItemAnimation();
 
+  /**
+   * A11Y Support: Two different combinations based on interactive elements
+   *
+   * 1. NO interactive elements (or just badge):
+   *    - The outer container is accessible and receives the complete accessibility label
+   *    - This allows the entire list item to be treated as a single accessibility element
+   *
+   * 2. WITH interactive elements (buttonLink or iconButton):
+   *    - The outer container is NOT accessible
+   *    - The inner content becomes accessible with its label
+   *    - The interactive element is separately accessible with its own label
+   *    - This allows screen readers to navigate between the content and the action separately
+   */
+  const hasInteractiveElements =
+    endElement?.type === "buttonLink" || endElement?.type === "iconButton";
+
   const componentValueToAccessibility = typeof value === "string" ? value : "";
 
+  const topBadgeText =
+    topElement?.type === "badge" ? topElement.componentProps.text ?? "" : "";
+
+  const endBadgeText =
+    endElement?.type === "badge" ? endElement.componentProps.text ?? "" : "";
+
+  /**
+   * Build text in VISUAL ORDER
+   */
+  const mainTextParts = reversed
+    ? [componentValueToAccessibility, label]
+    : [label, componentValueToAccessibility];
+
+  const textParts = [topBadgeText, ...mainTextParts, endBadgeText];
+
   const listItemAccessibilityLabel =
-    accessibilityLabel ??
-    (label
-      ? `${label}; ${componentValueToAccessibility}`
-      : componentValueToAccessibility);
+    accessibilityLabel ?? textParts.filter(Boolean).join("; ");
 
   const contentProps = {
     icon,
@@ -201,7 +272,9 @@ export const ListItemInfo = ({
     numberOfLines,
     reversed,
     topElement,
-    endElement
+    endElement,
+    hasInteractiveElements,
+    listItemAccessibilityLabel
   } as const;
 
   if (onLongPress) {
@@ -209,14 +282,14 @@ export const ListItemInfo = ({
       <Pressable
         onLongPress={onLongPress}
         testID={testID}
-        accessible={!endElement}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        onTouchEnd={onPressOut}
-        accessibilityRole={"button"}
+        accessible
+        accessibilityRole="button"
         accessibilityLabel={listItemAccessibilityLabel}
         accessibilityActions={accessibilityActions}
         onAccessibilityAction={onAccessibilityAction}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        onTouchEnd={onPressOut}
       >
         <Animated.View
           style={[IOListItemStyles.listItem, backgroundAnimatedStyle]}
@@ -238,29 +311,31 @@ export const ListItemInfo = ({
         </Animated.View>
       </Pressable>
     );
-  } else {
-    return (
+  }
+
+  return (
+    <View
+      style={IOListItemStyles.listItem}
+      testID={testID}
+      accessible={!hasInteractiveElements}
+      accessibilityLabel={
+        hasInteractiveElements ? undefined : listItemAccessibilityLabel
+      }
+      accessibilityRole={hasInteractiveElements ? undefined : accessibilityRole}
+    >
       <View
-        style={IOListItemStyles.listItem}
-        testID={testID}
-        accessible={!endElement}
-        accessibilityLabel={listItemAccessibilityLabel}
-        accessibilityRole={accessibilityRole}
+        style={[
+          IOListItemStyles.listItemInner,
+          {
+            columnGap:
+              IOListItemVisualParams.iconMargin *
+              dynamicFontScale *
+              spacingScaleMultiplier
+          }
+        ]}
       >
-        <View
-          style={[
-            IOListItemStyles.listItemInner,
-            {
-              columnGap:
-                IOListItemVisualParams.iconMargin *
-                dynamicFontScale *
-                spacingScaleMultiplier
-            }
-          ]}
-        >
-          <ListItemInfoContent {...contentProps} />
-        </View>
+        <ListItemInfoContent {...contentProps} />
       </View>
-    );
-  }
+    </View>
+  );
 };

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

@@ -190,7 +190,8 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfo Snapshot
       }
     >
       <View
-        accessible={true}
+        accessible={false}
+        importantForAccessibility="no-hide-descendants"
         style={
           {
             "flexDirection": "column",
@@ -1379,7 +1380,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
                 <RNSVGPath
                   d="m7 12 4 4 7-7"
                   fill={null}
-                  onLayout={[Function]}
+                  onSvgLayout={[Function]}
                   propList={
                     [
                       "fill",
@@ -2308,7 +2309,8 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
       }
     >
       <View
-        accessible={true}
+        accessible={false}
+        importantForAccessibility="no-hide-descendants"
         style={
           {
             "flexDirection": "column",
@@ -3497,7 +3499,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
                 <RNSVGPath
                   d="m7 12 4 4 7-7"
                   fill={null}
-                  onLayout={[Function]}
+                  onSvgLayout={[Function]}
                   propList={
                     [
                       "fill",

package/src/components/loadingSpinner/LoadingSpinner.tsx

@@ -1,12 +1,6 @@
-import { ReactElement, useEffect } from "react";
+import { ReactElement, useId } from "react";
 import { ColorValue, View } from "react-native";
-import Animated, {
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withRepeat,
-  withTiming
-} from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 import Svg, { Defs, G, LinearGradient, Path, Stop } from "react-native-svg";
 import { useIOTheme } from "../../context";
 import { IOColors } from "../../core/IOColors";
@@ -21,15 +15,18 @@ export type LoadingSpinner = WithTestID<{
 }>;
 
 /**
- * Size scale, 76 is kept for backward compatibility with the old design system but 48 is enough for the new one.
- * It will be removed in the future.
+ * Size scale
  */
-export type IOLoadingSpinnerSizeScale = 24 | 48 | 76;
+export type IOLoadingSpinnerSizeScale = 24 | 48;
 
-const strokeMap: Record<NonNullable<LoadingSpinner["size"]>, number> = {
+const spinKeyframes = {
+  from: { transform: [{ rotateZ: "0deg" }] },
+  to: { transform: [{ rotateZ: "360deg" }] }
+};
+
+const strokeMap: Record<IOLoadingSpinnerSizeScale, number> = {
   24: 3,
-  48: 5,
-  76: 7
+  48: 5
 };
 
 export const LoadingSpinner = ({
@@ -41,23 +38,13 @@ export const LoadingSpinner = ({
   testID = "LoadingSpinnerTestID"
 }: LoadingSpinner): ReactElement => {
   const theme = useIOTheme();
-  const rotation = useSharedValue(0);
-  const stroke: number = strokeMap[size];
+  const id = useId();
+  const stroke = strokeMap[size];
 
   const color = customColor ?? IOColors[theme["interactiveElem-default"]];
 
-  useEffect(() => {
-    // eslint-disable-next-line functional/immutable-data
-    rotation.value = withRepeat(
-      withTiming(360, { duration: durationMs, easing: Easing.linear }),
-      -1,
-      false
-    );
-  }, [durationMs, rotation]);
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ rotateZ: `${rotation.value}deg` }]
-  }));
+  const secondHalfId = `${id}-secondHalf`;
+  const firstHalfId = `${id}-firstHalf`;
 
   return (
     <View
@@ -70,7 +57,13 @@ export const LoadingSpinner = ({
     >
       <Animated.View
         testID={"LoadingSpinnerAnimatedTestID"}
-        style={animatedStyle}
+        style={{
+          animationName: spinKeyframes,
+          animationDuration: durationMs,
+          animationIterationCount: "infinite",
+          animationTimingFunction: "linear",
+          transformOrigin: "center"
+        }}
       >
         {/* Thanks to Ben Ilegbodu for the article on how to
           create a a SVG gradient loading spinner. Below is
@@ -83,11 +76,11 @@ export const LoadingSpinner = ({
           fill="none"
         >
           <Defs>
-            <LinearGradient id="spinner-secondHalf">
+            <LinearGradient id={secondHalfId}>
               <Stop offset="0%" stopOpacity="0" stopColor={color} />
               <Stop offset="100%" stopOpacity="1" stopColor={color} />
             </LinearGradient>
-            <LinearGradient id="spinner-firstHalf">
+            <LinearGradient id={firstHalfId}>
               <Stop offset="0%" stopOpacity="1" stopColor={color} />
               <Stop offset="100%" stopOpacity="1" stopColor={color} />
             </LinearGradient>
@@ -95,13 +88,13 @@ export const LoadingSpinner = ({
 
           <G strokeWidth={stroke}>
             <Path
-              stroke="url(#spinner-secondHalf)"
+              stroke={`url(#${secondHalfId})`}
               d={`M ${stroke / 2} ${size / 2} A ${size / 2 - stroke / 2} ${
                 size / 2 - stroke / 2
               } 0 0 1 ${size - stroke / 2} ${size / 2}`}
             />
             <Path
-              stroke="url(#spinner-firstHalf)"
+              stroke={`url(#${firstHalfId})`}
               d={`M ${size - stroke / 2} ${size / 2} A ${
                 size / 2 - stroke / 2
               } ${size / 2 - stroke / 2} 0 0 1 ${stroke / 2} ${size / 2}`}

package/src/components/modules/ModuleIDP.tsx

@@ -1,5 +1,5 @@
 import { Image, ImageSourcePropType, StyleSheet } from "react-native";
-import { useIONewTypeface, useIOThemeContext, useIOTheme } from "../../context";
+import { useIOThemeContext, useIOTheme } from "../../context";
 import { IOListItemLogoMargin } from "../../core";
 import { addCacheTimestampToUri } from "../../utils/image";
 import { IOText } from "../typography";
@@ -49,7 +49,6 @@ export const ModuleIDP = ({
   testID,
   accessibilityLabel
 }: ModuleIDP) => {
-  const { newTypefaceEnabled } = useIONewTypeface();
   const theme = useIOTheme();
   const IDPLogoSource = useIDPLogo(logo);
 
@@ -60,7 +59,6 @@ export const ModuleIDP = ({
       withLooseSpacing={withLooseSpacing}
     >
       <IOText
-        font={newTypefaceEnabled ? "Titillio" : "TitilliumSansPro"}
         weight={"Semibold"}
         size={12}
         lineHeight={16}

package/src/components/numberpad/NumberButton.tsx

@@ -6,7 +6,7 @@ import Animated, {
   useAnimatedStyle,
   useReducedMotion
 } from "react-native-reanimated";
-import { useIONewTypeface, useIOTheme } from "../../context";
+import { useIOTheme } from "../../context";
 import { hexToRgba, IOColors } from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { IOText } from "../typography";
@@ -50,7 +50,6 @@ export const NumberButton = memo(
     const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
       useScaleAnimation("medium");
     const reducedMotion = useReducedMotion();
-    const { newTypefaceEnabled } = useIONewTypeface();
 
     const colorMap: Record<NumberButtonVariantType, ColorMapVariant> = useMemo(
       () => ({
@@ -103,7 +102,6 @@ export const NumberButton = memo(
         >
           <IOText
             size={22}
-            font={newTypefaceEnabled ? "Titillio" : "TitilliumSansPro"}
             weight="Semibold"
             color={colorMap[variant].foreground}
             style={{

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/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"],