@pagopa/io-app-design-system 1.21.0 → 1.22.0

package/lib/typescript/components/typography/LabelSmall.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LabelSmall.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/LabelSmall.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAc,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,uBAAuB,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE9E,KAAK,oBAAoB,GAAG,OAAO,CACjC,QAAQ,EACN,MAAM,GACN,UAAU,GACV,KAAK,GACL,OAAO,GACP,cAAc,GACd,UAAU,GACV,UAAU,CACb,CAAC;AACF,KAAK,aAAa,GAAG,oBAAoB,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;AACzE,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;AAE5E,KAAK,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AACpC,KAAK,eAAe,GAAG;IAAE,QAAQ,CAAC,EAAE,QAAQ,CAAA;CAAE,CAAC;AAE/C,KAAK,eAAe,GAAG,uBAAuB,CAC5C,eAAe,CAAC,aAAa,EAAE,aAAa,CAAC,CAC9C,GACC,eAAe,GACf,QAAQ,CAAC;AAcX;;GAEG;AACH,eAAO,MAAM,UAAU,UAAW,eAAe,gCAkBhD,CAAC"}
+{"version":3,"file":"LabelSmall.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/LabelSmall.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAA2B,MAAM,YAAY,CAAC;AACxE,OAAO,EAAc,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,uBAAuB,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE9E,KAAK,oBAAoB,GAAG,OAAO,CACjC,QAAQ,EACN,MAAM,GACN,UAAU,GACV,KAAK,GACL,OAAO,GACP,cAAc,GACd,UAAU,GACV,UAAU,CACb,CAAC;AACF,KAAK,aAAa,GAAG,oBAAoB,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;AACzE,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;AAE5E,KAAK,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AACpC,KAAK,eAAe,GAAG;IAAE,QAAQ,CAAC,EAAE,QAAQ,CAAA;CAAE,CAAC;AAE/C,KAAK,eAAe,GAAG,uBAAuB,CAC5C,eAAe,CAAC,aAAa,EAAE,aAAa,CAAC,CAC9C,GACC,eAAe,GACf,QAAQ,CAAC;AAeX;;GAEG;AACH,eAAO,MAAM,UAAU,UAAW,eAAe,gCAiBhD,CAAC"}

package/lib/typescript/utils/fonts.d.ts

@@ -8,6 +8,7 @@
  */
 declare const fonts: {
     TitilliumWeb: string | undefined;
+    TitilliumSansPro: string | undefined;
     ReadexPro: string | undefined;
     DMMono: string | undefined;
 };

package/lib/typescript/utils/fonts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../../src/utils/fonts.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH;;GAEG;AACH,QAAA,MAAM,KAAK;;;;CAgBV,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,KAAK,CAAC;AAE9C,QAAA,MAAM,OAAO,6DAA8D,CAAC;AAC5E,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpD,QAAA,MAAM,YAAY,8CAA+C,CAAC;AAClE,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5D;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,YAAY,EAAE,eAAe,CAM7D,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,KAAK,CAAC;AAC5C,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAElD;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,YAAY,EAAE,eAAe,CAMhE,CAAC;AAEF,oBAAY,SAAS;IACnB,QAAQ,WAAW;IACnB,QAAQ,WAAW;CACpB;AAED,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,SACvB,UAAU,WACP,YAAY,aACX,OAAO,KAChB,MAMC,CAAC;AAEL;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,YACtB,YAAY,GAAG,SAAS,aACtB,OAAO,GAAG,SAAS,SACvB,UAAU,GAAG,SAAS,KAC3B,eAgBC,CAAC"}
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../../src/utils/fonts.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH;;GAEG;AACH,QAAA,MAAM,KAAK;;;;;CAqBV,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,KAAK,CAAC;AAE9C,QAAA,MAAM,OAAO,6DAA8D,CAAC;AAC5E,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpD,QAAA,MAAM,YAAY,8CAA+C,CAAC;AAClE,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5D;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,YAAY,EAAE,eAAe,CAM7D,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,KAAK,CAAC;AAC5C,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAElD;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,YAAY,EAAE,eAAe,CAMhE,CAAC;AAEF,oBAAY,SAAS;IACnB,QAAQ,WAAW;IACnB,QAAQ,WAAW;CACpB;AAED,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,SACvB,UAAU,WACP,YAAY,aACX,OAAO,KAChB,MAMC,CAAC;AAEL;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,YACtB,YAAY,GAAG,SAAS,aACtB,OAAO,GAAG,SAAS,SACvB,UAAU,GAAG,SAAS,KAC3B,eAgBC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/Advice/__test__/__snapshots__/advice.test.tsx.snap

@@ -82,7 +82,7 @@ exports[`Test Advice Components - Experimental Enabled Advice Snapshot 1`] = `
     color="bluegrey"
     defaultColor="bluegrey"
     defaultWeight="Regular"
-    font="TitilliumWeb"
+    font="TitilliumSansPro"
     fontStyle={
       {
         "fontSize": 16,
@@ -97,7 +97,7 @@ exports[`Test Advice Components - Experimental Enabled Advice Snapshot 1`] = `
         },
         {
           "color": "#475A6D",
-          "fontFamily": "Titillium Web",
+          "fontFamily": "Titillium Sans Pro",
           "fontStyle": "normal",
           "fontWeight": "400",
         },

package/src/components/accordion/AccordionItem.tsx

@@ -174,7 +174,7 @@ const styles = StyleSheet.create({
     fontSize: 14,
     lineHeight: 21,
     color: IOColors["grey-700"],
-    ...makeFontStyleObject("Regular", undefined, "TitilliumWeb")
+    ...makeFontStyleObject("Regular", undefined, "TitilliumSansPro")
   },
   textContainer: {
     padding: accordionBodySpacing,

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

@@ -233,7 +233,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfo Snapshot
           color="grey-700"
           defaultColor="blue"
           defaultWeight="Bold"
-          font="TitilliumWeb"
+          font="TitilliumSansPro"
           fontStyle={
             {
               "fontSize": 14,
@@ -248,7 +248,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfo Snapshot
               },
               {
                 "color": "#555C70",
-                "fontFamily": "Titillium Web",
+                "fontFamily": "Titillium Sans Pro",
                 "fontStyle": "normal",
                 "fontWeight": "400",
               },
@@ -373,7 +373,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
           color="grey-700"
           defaultColor="blue"
           defaultWeight="Bold"
-          font="TitilliumWeb"
+          font="TitilliumSansPro"
           fontStyle={
             {
               "fontSize": 14,
@@ -388,7 +388,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
               },
               {
                 "color": "#555C70",
-                "fontFamily": "Titillium Web",
+                "fontFamily": "Titillium Sans Pro",
                 "fontStyle": "normal",
                 "fontWeight": "400",
               },
@@ -1076,7 +1076,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
             color="hanPurple-500"
             defaultColor="blue"
             defaultWeight="Bold"
-            font="TitilliumWeb"
+            font="TitilliumSansPro"
             fontStyle={
               {
                 "fontSize": 14,
@@ -1091,7 +1091,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
                 },
                 {
                   "color": "#5517E3",
-                  "fontFamily": "Titillium Web",
+                  "fontFamily": "Titillium Sans Pro",
                   "fontStyle": "normal",
                   "fontWeight": "400",
                 },

package/src/components/modules/ModulePaymentNotice.tsx

@@ -1,18 +1,18 @@
 import * as React from "react";
 import { GestureResponderEvent, StyleSheet, View } from "react-native";
 import Placeholder from "rn-placeholder";
-import { WithTestID } from "../../utils/types";
-import { getAccessibleAmountText } from "../../utils/accessibility";
-import { H6, LabelSmall } from "../typography";
-import { Badge } from "../badge";
-import { Icon } from "../icons";
 import {
   IOListItemVisualParams,
   IOModuleStyles,
   IOStyles,
   useIOExperimentalDesign
 } from "../../core";
+import { getAccessibleAmountText } from "../../utils/accessibility";
+import { WithTestID } from "../../utils/types";
+import { Badge } from "../badge";
+import { Icon } from "../icons";
 import { VSpacer } from "../spacer";
+import { H6, LabelSmall, LabelSmallAlt } from "../typography";
 import { PressableModuleBase } from "./PressableModuleBase";
 
 export type PaymentNoticeStatus =
@@ -97,14 +97,15 @@ const ModulePaymentNoticeContent = ({
             {title}
           </LabelSmall>
         )}
-        <LabelSmall
-          weight="SemiBold"
-          font={isExperimental ? "ReadexPro" : "TitilliumWeb"}
-          color={isExperimental ? "blueIO-500" : "bluegrey"}
-          numberOfLines={2}
-        >
-          {subtitle}
-        </LabelSmall>
+        {isExperimental ? (
+          <LabelSmallAlt color={"blueIO-500"} numberOfLines={2}>
+            {subtitle}
+          </LabelSmallAlt>
+        ) : (
+          <LabelSmall weight="SemiBold" color={"bluegrey"} numberOfLines={2}>
+            {subtitle}
+          </LabelSmall>
+        )}
       </View>
       <View style={[styles.rightSection, { flexShrink: 1 }]}>
         <AmountOrBadgeComponent />

package/src/components/tag/Tag.tsx

@@ -23,6 +23,7 @@ export type Tag = WithTestID<{
     | "success"
     | "attachment"
     | "noIcon";
+  iconAccessibilityLabel?: string;
 }>;
 
 type VariantProps = {
@@ -112,7 +113,7 @@ const styles = StyleSheet.create({
 /**
  * Tag component, used mainly for message list and details
  */
-export const Tag = ({ text, variant, testID }: Tag) => {
+export const Tag = ({ text, variant, testID, iconAccessibilityLabel }: Tag) => {
   const { isExperimental } = useIOExperimentalDesign();
   return (
     <View testID={testID} style={styles.tag}>
@@ -123,7 +124,13 @@ export const Tag = ({ text, variant, testID }: Tag) => {
           () => null,
           ({ iconColor, iconName }) => (
             <View style={styles.iconWrapper}>
-              <Icon name={iconName} color={iconColor} size={IOTagIconSize} />
+              <Icon
+                name={iconName}
+                color={iconColor}
+                size={IOTagIconSize}
+                accessible={!!iconAccessibilityLabel}
+                accessibilityLabel={iconAccessibilityLabel}
+              />
             </View>
           )
         )

package/src/components/toast/ToastNotification.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { StyleSheet, View } from "react-native";
+import { IOAlertRadius, IOColors } from "../../core";
 import { Icon } from "../icons";
-import { IOColors, IOAlertRadius } from "../../core";
+import { HSpacer } from "../spacer";
 import { ButtonText } from "../typography";
 import { Toast, ToastVariant } from "./types";
 
@@ -54,7 +55,12 @@ const ToastNotification = ({ message, variant = "neutral", icon }: Props) => {
       <ButtonText color={colors.stroke} style={styles.content}>
         {message}
       </ButtonText>
-      {icon && <Icon name={icon} size={24} color={colors.stroke} />}
+      {icon && (
+        <>
+          <HSpacer size={16} />
+          <Icon name={icon} size={24} color={colors.stroke} />
+        </>
+      )}
     </View>
   );
 };
@@ -69,6 +75,7 @@ const styles = StyleSheet.create({
     justifyContent: "space-between"
   },
   content: {
+    flexShrink: 1,
     paddingVertical: 2
   }
 });

package/src/components/typography/Body.tsx

@@ -1,4 +1,4 @@
-import { IOColors, IOTheme } from "../../core";
+import { IOColors, IOTheme, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
@@ -14,7 +14,9 @@ type BodyProps = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
 >;
 
-const fontName: FontFamily = "TitilliumWeb";
+const fontName: FontFamily = "TitilliumSansPro";
+const legacyFontName: FontFamily = "TitilliumWeb";
+
 export const bodyFontSize = 16;
 export const bodyLineHeight = 24;
 export const bodyDefaultColor: AllowedColors = "bluegrey";
@@ -23,11 +25,14 @@ export const bodyDefaultWeight: AllowedWeight = "Regular";
 /**
  * `Body` typographic style
  */
-export const Body = (props: BodyProps) =>
-  useTypographyFactory<AllowedWeight, AllowedColors>({
+export const Body = (props: BodyProps) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
     defaultWeight: bodyDefaultWeight,
     defaultColor: bodyDefaultColor,
-    font: fontName,
+    font: isExperimental ? fontName : legacyFontName,
     fontStyle: { fontSize: bodyFontSize, lineHeight: bodyLineHeight }
   });
+};

package/src/components/typography/H3.tsx

@@ -28,6 +28,7 @@ const legacyH3LineHeight = 34;
  */
 export const H3 = (props: H3Props) => {
   const { isExperimental } = useIOExperimentalDesign();
+
   return useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
     defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,

package/src/components/typography/H5.tsx

@@ -1,4 +1,4 @@
-import { IOTheme } from "../../core/IOColors";
+import { IOTheme, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
@@ -12,19 +12,22 @@ type H5Props = ExternalTypographyProps<
 
 export const h5FontSize = 14;
 export const h5LineHeight = 16;
-const font: FontFamily = "TitilliumWeb";
+const font: FontFamily = "TitilliumSansPro";
+const legacyFont: FontFamily = "TitilliumWeb";
 const defaultColor: AllowedColors = "black";
 const defaultWeight: AllowedWeight = "SemiBold";
 
 /**
  * `H5` typographic style
  */
-export const H5 = (props: H5Props) =>
-  useTypographyFactory<AllowedWeight, AllowedColors>({
+export const H5 = (props: H5Props) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
     defaultWeight,
     defaultColor,
-    font,
+    font: isExperimental ? font : legacyFont,
     fontStyle: {
       fontSize: h5FontSize,
       lineHeight: h5LineHeight,
@@ -32,3 +35,4 @@ export const H5 = (props: H5Props) =>
       letterSpacing: 0.5
     }
   });
+};

package/src/components/typography/Label.tsx

@@ -1,4 +1,8 @@
-import type { IOColors, IOColorsStatusForeground } from "../../core/IOColors";
+import {
+  IOColors,
+  IOColorsStatusForeground,
+  useIOExperimentalDesign
+} from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import {
@@ -16,19 +20,22 @@ type LabelProps = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
 > & { fontSize?: FontSize };
 
-const fontName: FontFamily = "TitilliumWeb";
+const fontName: FontFamily = "TitilliumSansPro";
+const legacyFontName: FontFamily = "TitilliumWeb";
 const labelDefaultWeight = "Bold";
 const labelDefaultcolor = "black";
 
 /**
  * `Label` typographic style
  */
-export const Label = ({ fontSize, ...props }: LabelProps) =>
-  useTypographyFactory<AllowedWeight, AllowedColors>({
+export const Label = ({ fontSize, ...props }: LabelProps) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
     defaultWeight: labelDefaultWeight,
     defaultColor: labelDefaultcolor,
-    font: fontName,
+    font: isExperimental ? fontName : legacyFontName,
     fontStyle: {
       fontSize: fontSize ? fontSizeMapping[fontSize] : fontSizeMapping.regular,
       lineHeight: fontSize
@@ -36,3 +43,4 @@ export const Label = ({ fontSize, ...props }: LabelProps) =>
         : lineHeightMapping.regular
     }
   });
+};

package/src/components/typography/LabelLink.tsx

@@ -1,5 +1,6 @@
-import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
 import { useIOExperimentalDesign, type IOColors } from "../../core";
+import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
+import { useTypographyFactory } from "./Factory";
 import {
   ExternalTypographyProps,
   FontSize,
@@ -7,7 +8,6 @@ import {
   fontSizeMapping,
   lineHeightMapping
 } from "./common";
-import { useTypographyFactory } from "./Factory";
 
 type AllowedColors = IOColors;
 type AllowedWeight = Extract<IOFontWeight, "SemiBold">;
@@ -18,7 +18,8 @@ type LinkProps = ExternalTypographyProps<
 > &
   AllowedFontSize;
 
-const fontName: IOFontFamily = "TitilliumWeb";
+const fontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontName: IOFontFamily = "TitilliumWeb";
 
 export const linkLegacyDefaultColor: AllowedColors = "blue";
 
@@ -36,7 +37,7 @@ export const LabelLink = (props: LinkProps) => {
     ...props,
     defaultWeight: linkDefaultWeight,
     defaultColor: isExperimental ? linkDefaultColor : linkLegacyDefaultColor,
-    font: fontName,
+    font: isExperimental ? fontName : legacyFontName,
     fontStyle: {
       fontSize: props.fontSize
         ? fontSizeMapping[props.fontSize]

package/src/components/typography/LabelSmall.tsx

@@ -1,5 +1,4 @@
-import { useIOExperimentalDesign } from "../../core";
-import type { IOColors, IOTheme } from "../../core/IOColors";
+import { IOColors, IOTheme, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, FontType, TypographyProps } from "./common";
@@ -26,7 +25,8 @@ type LabelSmallProps = ExternalTypographyProps<
   AllowedFontSize &
   FontType;
 
-const defaultFontName: FontFamily = "TitilliumWeb";
+const fontName: FontFamily = "TitilliumSansPro";
+const legacyFontName: FontFamily = "TitilliumWeb";
 const fontSizeMapping: Record<FontSize, number> = {
   regular: 14,
   small: 12
@@ -48,8 +48,7 @@ export const LabelSmall = (props: LabelSmallProps) => {
     ...props,
     defaultWeight: labelDefaultWeight,
     defaultColor: labelDefaultcolor,
-    font:
-      isExperimental && props.font !== undefined ? props.font : defaultFontName,
+    font: isExperimental ? fontName : legacyFontName,
     fontStyle: {
       fontSize: props.fontSize
         ? fontSizeMapping[props.fontSize]

package/src/utils/fonts.ts

@@ -15,6 +15,11 @@ const fonts = {
     web: "TitilliumWeb",
     ios: "Titillium Web"
   }),
+  TitilliumSansPro: Platform.select({
+    android: "TitilliumSansPro",
+    web: "TitilliumSansPro",
+    ios: "Titillium Sans Pro"
+  }),
   ReadexPro: Platform.select({
     android: "ReadexPro",
     web: "ReadexPro",