@pagopa/io-app-design-system 1.36.11 → 1.36.13

package/lib/typescript/components/typography/H1.d.ts

@@ -1,15 +1,15 @@
-/// <reference types="react" />
-import { IOTheme } from "../../core";
+import React from "react";
+import { View } from "react-native";
 import { IOFontWeight } from "../../utils/fonts";
-import { ExternalTypographyProps, TypographyProps } from "./common";
-type AllowedColors = IOTheme["textHeading-default"];
+import { TypographyProps } from "./common";
 type AllowedWeight = Extract<IOFontWeight, "Regular" | "SemiBold">;
-type H1Props = ExternalTypographyProps<TypographyProps<AllowedWeight, AllowedColors>>;
 export declare const h1FontSize = 28;
 export declare const h1LineHeight = 42;
 /**
  * `H1` typographic style
  */
-export declare const H1: (props: H1Props) => import("react").JSX.Element;
+export declare const H1: React.ForwardRefExoticComponent<Omit<Omit<import("react-native").TextProps & React.RefAttributes<import("react-native").Text>, "style"> & TypographyProps<AllowedWeight, "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-400" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "bluegrey" | "bluegreyDark" | "noCieButton" | "blue" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "red" | "green" | "greenLight"> & {
+    style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
+}, "ref"> & React.RefAttributes<View>>;
 export {};
 //# sourceMappingURL=H1.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"H1.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/H1.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAA2B,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAc,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEpE,KAAK,aAAa,GAAG,OAAO,CAAC,qBAAqB,CAAC,CAAC;AACpD,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;AAEnE,KAAK,OAAO,GAAG,uBAAuB,CACpC,eAAe,CAAC,aAAa,EAAE,aAAa,CAAC,CAC9C,CAAC;AAEF,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,YAAY,KAAK,CAAC;AAW/B;;GAEG;AACH,eAAO,MAAM,EAAE,UAAW,OAAO,gCAahC,CAAC"}
+{"version":3,"file":"H1.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/H1.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAc,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAA2B,eAAe,EAAE,MAAM,UAAU,CAAC;AAGpE,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;AAMnE,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,YAAY,KAAK,CAAC;AAW/B;;GAEG;AACH,eAAO,MAAM,EAAE;;sCAgBb,CAAC"}

package/lib/typescript/components/typography/H2.d.ts

@@ -1,15 +1,15 @@
-/// <reference types="react" />
-import { IOTheme } from "../../core";
+import React from "react";
+import { View } from "react-native";
 import { IOFontWeight } from "../../utils/fonts";
-import { ExternalTypographyProps, TypographyProps } from "./common";
-type AllowedColors = IOTheme["textHeading-default"];
+import { TypographyProps } from "./common";
 type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
-type H2Props = ExternalTypographyProps<TypographyProps<AllowedWeight, AllowedColors>>;
 export declare const h2FontSize = 26;
 export declare const h2LineHeight = 39;
 /**
  * `H2` typographic style
  */
-export declare const H2: (props: H2Props) => import("react").JSX.Element;
+export declare const H2: React.ForwardRefExoticComponent<Omit<Omit<import("react-native").TextProps & React.RefAttributes<import("react-native").Text>, "style"> & TypographyProps<AllowedWeight, "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-400" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "bluegrey" | "bluegreyDark" | "noCieButton" | "blue" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "red" | "green" | "greenLight"> & {
+    style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
+}, "ref"> & React.RefAttributes<View>>;
 export {};
 //# sourceMappingURL=H2.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"H2.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/H2.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAA2B,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAc,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEpE,KAAK,aAAa,GAAG,OAAO,CAAC,qBAAqB,CAAC,CAAC;AACpD,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;AAEnE,KAAK,OAAO,GAAG,uBAAuB,CACpC,eAAe,CAAC,aAAa,EAAE,aAAa,CAAC,CAC9C,CAAC;AAEF,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,YAAY,KAAK,CAAC;AAW/B;;GAEG;AACH,eAAO,MAAM,EAAE,UAAW,OAAO,gCAahC,CAAC"}
+{"version":3,"file":"H2.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/H2.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAc,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAA2B,eAAe,EAAE,MAAM,UAAU,CAAC;AAGpE,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;AAMnE,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,YAAY,KAAK,CAAC;AAW/B;;GAEG;AACH,eAAO,MAAM,EAAE;;sCAgBb,CAAC"}

package/lib/typescript/components/typography/H3.d.ts

@@ -1,15 +1,15 @@
-/// <reference types="react" />
-import { IOTheme } from "../../core";
+import React from "react";
+import { View } from "react-native";
 import { IOFontWeight } from "../../utils/fonts";
-import { ExternalTypographyProps, TypographyProps } from "./common";
-type AllowedColors = IOTheme["textHeading-default"];
+import { TypographyProps } from "./common";
 type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
-type H3Props = ExternalTypographyProps<TypographyProps<AllowedWeight, AllowedColors>>;
 export declare const h3FontSize = 22;
 export declare const h3LineHeight = 33;
 /**
  * `H3` typographic style
  */
-export declare const H3: (props: H3Props) => import("react").JSX.Element;
+export declare const H3: React.ForwardRefExoticComponent<Omit<Omit<import("react-native").TextProps & React.RefAttributes<import("react-native").Text>, "style"> & TypographyProps<AllowedWeight, "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-400" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "bluegrey" | "bluegreyDark" | "noCieButton" | "blue" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "red" | "green" | "greenLight"> & {
+    style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
+}, "ref"> & React.RefAttributes<View>>;
 export {};
 //# sourceMappingURL=H3.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"H3.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/H3.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAA2B,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAc,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEpE,KAAK,aAAa,GAAG,OAAO,CAAC,qBAAqB,CAAC,CAAC;AACpD,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;AAEnE,KAAK,OAAO,GAAG,uBAAuB,CACpC,eAAe,CAAC,aAAa,EAAE,aAAa,CAAC,CAC9C,CAAC;AAGF,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,YAAY,KAAK,CAAC;AAW/B;;GAEG;AACH,eAAO,MAAM,EAAE,UAAW,OAAO,gCAahC,CAAC"}
+{"version":3,"file":"H3.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/H3.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAc,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAA2B,eAAe,EAAE,MAAM,UAAU,CAAC;AAGpE,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;AAOnE,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,YAAY,KAAK,CAAC;AAW/B;;GAEG;AACH,eAAO,MAAM,EAAE;;sCAgBb,CAAC"}

package/lib/typescript/components/typography/H4.d.ts

@@ -1,15 +1,15 @@
-/// <reference types="react" />
-import { IOTheme } from "../../core";
+import React from "react";
+import { View } from "react-native";
 import { IOFontWeight } from "../../utils/fonts";
-import { ExternalTypographyProps, TypographyProps } from "./common";
-type AllowedColors = IOTheme["textHeading-default"];
+import { TypographyProps } from "./common";
 type AllowedWeight = Extract<IOFontWeight, "Regular" | "SemiBold">;
-type H4Props = ExternalTypographyProps<TypographyProps<AllowedWeight, AllowedColors>>;
 export declare const h4FontSize = 20;
 export declare const h4LineHeight = 30;
 /**
  * `H4` typographic style
  */
-export declare const H4: (props: H4Props) => import("react").JSX.Element;
+export declare const H4: React.ForwardRefExoticComponent<Omit<Omit<import("react-native").TextProps & React.RefAttributes<import("react-native").Text>, "style"> & TypographyProps<AllowedWeight, "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-400" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "bluegrey" | "bluegreyDark" | "noCieButton" | "blue" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "red" | "green" | "greenLight"> & {
+    style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
+}, "ref"> & React.RefAttributes<View>>;
 export {};
 //# sourceMappingURL=H4.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"H4.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/H4.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAA2B,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAc,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEpE,KAAK,aAAa,GAAG,OAAO,CAAC,qBAAqB,CAAC,CAAC;AACpD,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;AAEnE,KAAK,OAAO,GAAG,uBAAuB,CACpC,eAAe,CAAC,aAAa,EAAE,aAAa,CAAC,CAC9C,CAAC;AAEF,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,YAAY,KAAK,CAAC;AAW/B;;GAEG;AACH,eAAO,MAAM,EAAE,UAAW,OAAO,gCAYhC,CAAC"}
+{"version":3,"file":"H4.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/H4.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAc,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAA2B,eAAe,EAAE,MAAM,UAAU,CAAC;AAGpE,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;AAMnE,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,YAAY,KAAK,CAAC;AAW/B;;GAEG;AACH,eAAO,MAAM,EAAE;;sCAeb,CAAC"}

package/lib/typescript/components/typography/H5.d.ts

@@ -1,15 +1,12 @@
-/// <reference types="react" />
-import { IOTheme } from "../../core";
-import { IOFontWeight } from "../../utils/fonts";
-import { ExternalTypographyProps, TypographyProps } from "./common";
-type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "SemiBold">;
-type H5Props = ExternalTypographyProps<TypographyProps<AllowedWeight, AllowedColors>>;
+import React from "react";
+import { View } from "react-native";
+import { TypographyProps } from "./common";
 export declare const h5FontSize = 14;
 export declare const h5LineHeight = 16;
 /**
  * `H5` typographic style
  */
-export declare const H5: (props: H5Props) => import("react").JSX.Element;
-export {};
+export declare const H5: React.ForwardRefExoticComponent<Omit<Omit<import("react-native").TextProps & React.RefAttributes<import("react-native").Text>, "style"> & TypographyProps<"SemiBold", "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-400" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "bluegrey" | "bluegreyDark" | "noCieButton" | "blue" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "red" | "green" | "greenLight"> & {
+    style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
+}, "ref"> & React.RefAttributes<View>>;
 //# sourceMappingURL=H5.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"H5.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/H5.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAA2B,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAc,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEpE,KAAK,aAAa,GAAG,OAAO,CAAC,qBAAqB,CAAC,CAAC;AACpD,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;AAEvD,KAAK,OAAO,GAAG,uBAAuB,CACpC,eAAe,CAAC,aAAa,EAAE,aAAa,CAAC,CAC9C,CAAC;AAEF,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,YAAY,KAAK,CAAC;AAM/B;;GAEG;AACH,eAAO,MAAM,EAAE,UAAW,OAAO,gCAehC,CAAC"}
+{"version":3,"file":"H5.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/H5.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIpC,OAAO,EAA2B,eAAe,EAAE,MAAM,UAAU,CAAC;AASpE,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,YAAY,KAAK,CAAC;AAM/B;;GAEG;AACH,eAAO,MAAM,EAAE;;sCAkBb,CAAC"}

package/lib/typescript/components/typography/H6.d.ts

@@ -1,15 +1,17 @@
-/// <reference types="react" />
+import React from "react";
+import { View } from "react-native";
 import { IOTheme } from "../../core";
 import { IOFontWeight } from "../../utils/fonts";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { TypographyProps } from "./common";
 type AllowedColors = IOTheme["textBody-default"] | "blueIO-850";
 type AllowedWeight = Extract<IOFontWeight, "Regular" | "SemiBold">;
-type H6Props = ExternalTypographyProps<TypographyProps<AllowedWeight, AllowedColors>>;
 export declare const h6FontSize = 16;
 export declare const h6LineHeight = 24;
 /**
  * `H6` typographic style
  */
-export declare const H6: (props: H6Props) => import("react").JSX.Element;
+export declare const H6: React.ForwardRefExoticComponent<Omit<Omit<import("react-native").TextProps & React.RefAttributes<import("react-native").Text>, "style"> & TypographyProps<AllowedWeight, AllowedColors> & {
+    style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
+}, "ref"> & React.RefAttributes<View>>;
 export {};
 //# sourceMappingURL=H6.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"H6.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/H6.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAyC,MAAM,YAAY,CAAC;AAC5E,OAAO,EAAc,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAGpE,KAAK,aAAa,GAAG,OAAO,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAAC;AAChE,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;AAEnE,KAAK,OAAO,GAAG,uBAAuB,CACpC,eAAe,CAAC,aAAa,EAAE,aAAa,CAAC,CAC9C,CAAC;AAEF,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,YAAY,KAAK,CAAC;AAW/B;;GAEG;AACH,eAAO,MAAM,EAAE,UAAW,OAAO,gCAahC,CAAC"}
+{"version":3,"file":"H6.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/H6.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,OAAO,EAAyC,MAAM,YAAY,CAAC;AAC5E,OAAO,EAAc,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAA2B,eAAe,EAAE,MAAM,UAAU,CAAC;AAGpE,KAAK,aAAa,GAAG,OAAO,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAAC;AAChE,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;AAMnE,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,YAAY,KAAK,CAAC;AAW/B;;GAEG;AACH,eAAO,MAAM,EAAE;;sCAgBb,CAAC"}

package/lib/typescript/components/typography/Hero.d.ts

@@ -1,15 +1,15 @@
-/// <reference types="react" />
-import { IOTheme } from "../../core";
+import React from "react";
+import { View } from "react-native";
 import { IOFontWeight } from "../../utils/fonts";
-import { ExternalTypographyProps, TypographyProps } from "./common";
-type AllowedColors = IOTheme["textHeading-default"];
+import { TypographyProps } from "./common";
 type AllowedWeight = Extract<IOFontWeight, "Regular" | "SemiBold">;
-type HeroProps = ExternalTypographyProps<TypographyProps<AllowedWeight, AllowedColors>>;
 export declare const heroFontSize = 32;
 export declare const heroLineHeight = 48;
 /**
  * `Hero` typographic style
  */
-export declare const Hero: (props: HeroProps) => import("react").JSX.Element;
+export declare const Hero: React.ForwardRefExoticComponent<Omit<Omit<import("react-native").TextProps & React.RefAttributes<import("react-native").Text>, "style"> & TypographyProps<AllowedWeight, "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-400" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "bluegrey" | "bluegreyDark" | "noCieButton" | "blue" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "red" | "green" | "greenLight"> & {
+    style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
+}, "ref"> & React.RefAttributes<View>>;
 export {};
 //# sourceMappingURL=Hero.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/Hero.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA2B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAc,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEpE,KAAK,aAAa,GAAG,OAAO,CAAC,qBAAqB,CAAC,CAAC;AACpD,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;AAEnE,KAAK,SAAS,GAAG,uBAAuB,CACtC,eAAe,CAAC,aAAa,EAAE,aAAa,CAAC,CAC9C,CAAC;AAEF,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,cAAc,KAAK,CAAC;AAWjC;;GAEG;AACH,eAAO,MAAM,IAAI,UAAW,SAAS,gCAapC,CAAC"}
+{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/Hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAc,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAA2B,eAAe,EAAE,MAAM,UAAU,CAAC;AAGpE,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;AAMnE,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,cAAc,KAAK,CAAC;AAWjC;;GAEG;AACH,eAAO,MAAM,IAAI;;sCAgBf,CAAC"}

package/lib/typescript/components/typography/Label.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+import React from "react";
+import { View } from "react-native";
 import { IOColors, IOColorsStatusForeground } from "../../core";
 import { IOFontWeight } from "../../utils/fonts";
 import { ExternalTypographyProps, FontSize, TypographyProps } from "./common";
@@ -11,6 +12,6 @@ type LabelProps = ExternalTypographyProps<TypographyProps<AllowedWeight, Allowed
 /**
  * `Label` typographic style
  */
-export declare const Label: ({ fontSize, ...props }: LabelProps) => import("react").JSX.Element;
+export declare const Label: React.ForwardRefExoticComponent<Omit<LabelProps, "ref"> & React.RefAttributes<View>>;
 export {};
 //# sourceMappingURL=Label.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/Label.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,QAAQ,EACR,wBAAwB,EAEzB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAc,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EACL,uBAAuB,EACvB,QAAQ,EACR,eAAe,EAGhB,MAAM,UAAU,CAAC;AAElB,KAAK,oBAAoB,GAAG,OAAO,CAAC,QAAQ,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;AACjE,KAAK,aAAa,GAAG,oBAAoB,GAAG,wBAAwB,CAAC;AACrE,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;AAC5E,KAAK,UAAU,GAAG,uBAAuB,CACvC,eAAe,CAAC,aAAa,EAAE,aAAa,CAAC,CAC9C,GAAG;IAAE,QAAQ,CAAC,EAAE,QAAQ,CAAA;CAAE,CAAC;AAO5B;;GAEG;AACH,eAAO,MAAM,KAAK,2BAA4B,UAAU,gCAevD,CAAC"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EACL,QAAQ,EACR,wBAAwB,EAEzB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAc,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EACL,uBAAuB,EACvB,QAAQ,EACR,eAAe,EAGhB,MAAM,UAAU,CAAC;AAElB,KAAK,oBAAoB,GAAG,OAAO,CAAC,QAAQ,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC;AACjE,KAAK,aAAa,GAAG,oBAAoB,GAAG,wBAAwB,CAAC;AACrE,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;AAC5E,KAAK,UAAU,GAAG,uBAAuB,CACvC,eAAe,CAAC,aAAa,EAAE,aAAa,CAAC,CAC9C,GAAG;IAAE,QAAQ,CAAC,EAAE,QAAQ,CAAA;CAAE,CAAC;AAO5B;;GAEG;AACH,eAAO,MAAM,KAAK,sFAsBjB,CAAC"}

package/lib/typescript/components/typography/LabelHeader.d.ts

@@ -1,16 +1,18 @@
-/// <reference types="react" />
+import { View } from "react-native";
+import React from "react";
 import { IOFontWeight } from "../../utils/fonts";
 import { IOTheme } from "../../core";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { TypographyProps } from "./common";
 type AllowedColors = IOTheme["textBody-default"] | "grey-650" | "grey-850" | "white" | "black";
 type AllowedWeight = Extract<IOFontWeight, "Regular" | "SemiBold">;
-type LabelHeaderProps = ExternalTypographyProps<TypographyProps<AllowedWeight, AllowedColors>>;
 export declare const labelHeaderFontSize = 14;
 export declare const labelHeaderLineHeight = 18;
 export declare const labelHeaderDefaultColor: AllowedColors;
 /**
  * `LabelHeader` typographic style
  */
-export declare const LabelHeader: (props: LabelHeaderProps) => import("react").JSX.Element;
+export declare const LabelHeader: React.ForwardRefExoticComponent<Omit<Omit<import("react-native").TextProps & React.RefAttributes<import("react-native").Text>, "style"> & TypographyProps<AllowedWeight, AllowedColors> & {
+    style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
+}, "ref"> & React.RefAttributes<View>>;
 export {};
 //# sourceMappingURL=LabelHeader.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LabelHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/LabelHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAyC,MAAM,YAAY,CAAC;AAE5E,OAAO,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEpE,KAAK,aAAa,GACd,OAAO,CAAC,kBAAkB,CAAC,GAC3B,UAAU,GACV,UAAU,GACV,OAAO,GACP,OAAO,CAAC;AACZ,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;AAEnE,KAAK,gBAAgB,GAAG,uBAAuB,CAC7C,eAAe,CAAC,aAAa,EAAE,aAAa,CAAC,CAC9C,CAAC;AAEF,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,qBAAqB,KAAK,CAAC;AACxC,eAAO,MAAM,uBAAuB,EAAE,aACJ,CAAC;AAQnC;;GAEG;AACH,eAAO,MAAM,WAAW,UAAW,gBAAgB,gCAiBlD,CAAC"}
+{"version":3,"file":"LabelHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/LabelHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAgB,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAyC,MAAM,YAAY,CAAC;AAE5E,OAAO,EAA2B,eAAe,EAAE,MAAM,UAAU,CAAC;AAEpE,KAAK,aAAa,GACd,OAAO,CAAC,kBAAkB,CAAC,GAC3B,UAAU,GACV,UAAU,GACV,OAAO,GACP,OAAO,CAAC;AACZ,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;AAMnE,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,qBAAqB,KAAK,CAAC;AACxC,eAAO,MAAM,uBAAuB,EAAE,aACJ,CAAC;AAQnC;;GAEG;AACH,eAAO,MAAM,WAAW;;sCAsBvB,CAAC"}

package/lib/typescript/components/typography/LabelLink.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+import React from "react";
+import { View } from "react-native";
 import { type IOColors } from "../../core";
 import { IOFontWeight } from "../../utils/fonts";
 import { ExternalTypographyProps, FontSize, TypographyProps } from "./common";
@@ -14,6 +15,6 @@ export declare const linkDefaultWeight: AllowedWeight;
 /**
  * `Link` typographic style
  */
-export declare const LabelLink: (props: LinkProps) => import("react").JSX.Element;
+export declare const LabelLink: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<View>>;
 export {};
 //# sourceMappingURL=LabelLink.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LabelLink.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/LabelLink.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA2B,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AACpE,OAAO,EAAgB,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EACL,uBAAuB,EACvB,QAAQ,EACR,eAAe,EAGhB,MAAM,UAAU,CAAC;AAElB,KAAK,aAAa,GAAG,QAAQ,CAAC;AAC9B,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;AACvD,KAAK,eAAe,GAAG;IAAE,QAAQ,CAAC,EAAE,QAAQ,CAAA;CAAE,CAAC;AAE/C,KAAK,SAAS,GAAG,uBAAuB,CACtC,eAAe,CAAC,aAAa,EAAE,aAAa,CAAC,CAC9C,GACC,eAAe,CAAC;AAKlB,eAAO,MAAM,sBAAsB,EAAE,aAAsB,CAAC;AAE5D,eAAO,MAAM,gBAAgB,EAAE,aAA4B,CAAC;AAC5D,eAAO,MAAM,iBAAiB,EAAE,aAA0B,CAAC;AAE3D;;GAEG;AACH,eAAO,MAAM,SAAS,UAAW,SAAS,gCAmBzC,CAAC"}
+{"version":3,"file":"LabelLink.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/LabelLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAA2B,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AACpE,OAAO,EAAgB,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EACL,uBAAuB,EACvB,QAAQ,EACR,eAAe,EAGhB,MAAM,UAAU,CAAC;AAElB,KAAK,aAAa,GAAG,QAAQ,CAAC;AAC9B,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;AACvD,KAAK,eAAe,GAAG;IAAE,QAAQ,CAAC,EAAE,QAAQ,CAAA;CAAE,CAAC;AAE/C,KAAK,SAAS,GAAG,uBAAuB,CACtC,eAAe,CAAC,aAAa,EAAE,aAAa,CAAC,CAC9C,GACC,eAAe,CAAC;AAKlB,eAAO,MAAM,sBAAsB,EAAE,aAAsB,CAAC;AAE5D,eAAO,MAAM,gBAAgB,EAAE,aAA4B,CAAC;AAC5D,eAAO,MAAM,iBAAiB,EAAE,aAA0B,CAAC;AAE3D;;GAEG;AACH,eAAO,MAAM,SAAS,qFAsBpB,CAAC"}

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

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+import React from "react";
+import { View } from "react-native";
 import { IOColors, IOTheme } from "../../core";
 import { IOFontWeight } from "../../utils/fonts";
 import { ExternalTypographyProps, FontType, TypographyProps } from "./common";
@@ -13,6 +14,6 @@ type LabelSmallProps = ExternalTypographyProps<TypographyProps<AllowedWeight, Al
 /**
  * `LabelSmall` typographic style
  */
-export declare const LabelSmall: (props: LabelSmallProps) => import("react").JSX.Element;
+export declare const LabelSmall: React.ForwardRefExoticComponent<Omit<LabelSmallProps, "ref"> & React.RefAttributes<View>>;
 export {};
 //# sourceMappingURL=LabelSmall.d.ts.map

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":";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"}
+{"version":3,"file":"LabelSmall.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/LabelSmall.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,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,2FAsBtB,CAAC"}

package/lib/typescript/components/typography/LabelSmallAlt.d.ts

@@ -1,14 +1,16 @@
-/// <reference types="react" />
+import React from "react";
+import { View } from "react-native";
 import type { IOColors, IOTheme } from "../../core/IOColors";
 import { IOFontWeight } from "../../utils/fonts";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { TypographyProps } from "./common";
 type PartialAllowedColors = Extract<IOColors, "blue" | "bluegrey" | "red" | "white" | "bluegreyDark" | "grey-700" | "grey-200">;
 type AllowedColors = PartialAllowedColors | IOTheme["textBody-tertiary"];
 type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular" | "SemiBold">;
-type LabelSmallAltProps = ExternalTypographyProps<TypographyProps<AllowedWeight, AllowedColors>>;
 /**
  * `LabelSmallAlt` typographic style. It's referenced as `LabelSmallReadex` in the design projects.
  */
-export declare const LabelSmallAlt: (props: LabelSmallAltProps) => import("react").JSX.Element;
+export declare const LabelSmallAlt: React.ForwardRefExoticComponent<Omit<Omit<import("react-native").TextProps & React.RefAttributes<import("react-native").Text>, "style"> & TypographyProps<AllowedWeight, AllowedColors> & {
+    style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
+}, "ref"> & React.RefAttributes<View>>;
 export {};
 //# sourceMappingURL=LabelSmallAlt.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LabelSmallAlt.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/LabelSmallAlt.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,eAAe,EAAE,MAAM,UAAU,CAAC;AAEpE,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,kBAAkB,GAAG,uBAAuB,CAC/C,eAAe,CAAC,aAAa,EAAE,aAAa,CAAC,CAC9C,CAAC;AAaF;;GAEG;AACH,eAAO,MAAM,aAAa,UAAW,kBAAkB,gCAatD,CAAC"}
+{"version":3,"file":"LabelSmallAlt.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/LabelSmallAlt.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAc,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAA2B,eAAe,EAAE,MAAM,UAAU,CAAC;AAEpE,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;AAiB5E;;GAEG;AACH,eAAO,MAAM,aAAa;;sCAkBzB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.36.11",
+  "version": "1.36.13",
   "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/listitems/ListItemNav.tsx

@@ -48,6 +48,10 @@ type ListItemTopElementProps =
 type ListItemNavPartialProps = WithTestID<
   {
     value: string | React.ReactNode;
+    /**
+     * The maximum number of lines to display for the value.
+     */
+    numberOfLines?: number;
     description?: string | React.ReactNode;
     loading?: boolean;
     onPress: (event: GestureResponderEvent) => void;
@@ -107,7 +111,8 @@ export const ListItemNav = ({
   testID,
   hideChevron = false,
   topElement,
-  loading
+  loading,
+  numberOfLines
 }: ListItemNav) => {
   const isPressed = useSharedValue(0);
   const { isExperimental } = useIOExperimentalDesign();
@@ -147,7 +152,9 @@ export const ListItemNav = ({
       )}
       {/* Let developer using a custom component (e.g: skeleton) */}
       {typeof value === "string" ? (
-        <H6 color={theme["textBody-default"]}>{value}</H6>
+        <H6 color={theme["textBody-default"]} numberOfLines={numberOfLines}>
+          {value}
+        </H6>
       ) : (
         value
       )}

package/src/components/typography/BaseTypography.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { StyleProp, Text, TextStyle } from "react-native";
+import { StyleProp, Text, TextStyle, View } from "react-native";
 import { IOColors } from "../../core/IOColors";
 import {
   IOFontFamily,
@@ -43,7 +43,7 @@ const calculateTextStyle = (
  * @param props
  * @constructor
  */
-export const BaseTypography: React.FC<OwnProps> = props => {
+export const BaseTypography = React.forwardRef<View, OwnProps>((props, ref) => {
   const fontStyle = useMemo(
     () =>
       calculateTextStyle(props.color, props.weight, props.isItalic, props.font),
@@ -54,8 +54,8 @@ export const BaseTypography: React.FC<OwnProps> = props => {
     : [props.fontStyle, fontStyle];
 
   return (
-    <Text allowFontScaling={false} {...props} style={style}>
+    <Text allowFontScaling={false} {...props} ref={ref} style={style}>
       {props.children}
     </Text>
   );
-};
+});

package/src/components/typography/Body.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+import { View } from "react-native";
 import { IOColors, IOTheme, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
@@ -25,14 +27,17 @@ export const bodyDefaultWeight: AllowedWeight = "Regular";
 /**
  * `Body` typographic style
  */
-export const Body = (props: BodyProps) => {
+export const Body = React.forwardRef<View, BodyProps>((props, ref) => {
   const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight: bodyDefaultWeight,
-    defaultColor: bodyDefaultColor,
-    font: isExperimental ? fontName : legacyFontName,
-    fontStyle: { fontSize: bodyFontSize, lineHeight: bodyLineHeight }
-  });
-};
+  return useTypographyFactory<AllowedWeight, AllowedColors>(
+    {
+      ...props,
+      defaultWeight: bodyDefaultWeight,
+      defaultColor: bodyDefaultColor,
+      font: isExperimental ? fontName : legacyFontName,
+      fontStyle: { fontSize: bodyFontSize, lineHeight: bodyLineHeight }
+    },
+    ref
+  );
+});

package/src/components/typography/BodyMonospace.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+import { View } from "react-native";
 import type { IOColors } from "../../core/IOColors";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
@@ -19,11 +21,16 @@ const monospaceDefaultcolor = "bluegrey";
 /**
  * `BodyMonospace` typographic style
  */
-export const BodyMonospace = (props: BodyMonospaceProps) =>
-  useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight: monospaceDefaultWeight,
-    defaultColor: monospaceDefaultcolor,
-    font: fontName,
-    fontStyle: { fontSize, lineHeight }
-  });
+export const BodyMonospace = React.forwardRef<View, BodyMonospaceProps>(
+  (props, ref) =>
+    useTypographyFactory<AllowedWeight, AllowedColors>(
+      {
+        ...props,
+        defaultWeight: monospaceDefaultWeight,
+        defaultColor: monospaceDefaultcolor,
+        font: fontName,
+        fontStyle: { fontSize, lineHeight }
+      },
+      ref
+    )
+);

package/src/components/typography/ButtonText.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+import { View } from "react-native";
 import { IOColors } from "../../core/IOColors";
 import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
 import { useIOExperimentalDesign } from "../../core";
@@ -25,18 +27,23 @@ const legacyTextDefaultWeight: AllowedWeight = "Bold";
 /**
  * `ButtonText` typographic style
  */
-export const ButtonText = (props: ButtonTextProps) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const ButtonText = React.forwardRef<View, ButtonTextProps>(
+  (props, ref) => {
+    const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, ButtonTextAllowedColors>({
-    ...props,
-    defaultWeight: isExperimental
-      ? buttonTextDefaultWeight
-      : legacyTextDefaultWeight,
-    defaultColor: buttonTextDefaultColor,
-    font: isExperimental ? buttonTextFontName : legacyTextFontName,
-    fontStyle: {
-      fontSize: buttonTextFontSize
-    }
-  });
-};
+    return useTypographyFactory<AllowedWeight, ButtonTextAllowedColors>(
+      {
+        ...props,
+        defaultWeight: isExperimental
+          ? buttonTextDefaultWeight
+          : legacyTextDefaultWeight,
+        defaultColor: buttonTextDefaultColor,
+        font: isExperimental ? buttonTextFontName : legacyTextFontName,
+        fontStyle: {
+          fontSize: buttonTextFontSize
+        }
+      },
+      ref
+    );
+  }
+);

package/src/components/typography/Caption.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+import { View } from "react-native";
 import { IOTheme, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
@@ -21,17 +23,20 @@ const legacyFont: FontFamily = "TitilliumWeb";
 /**
  * `Caption` typographic style
  */
-export const Caption = (props: CaptionProps) => {
+export const Caption = React.forwardRef<View, CaptionProps>((props, ref) => {
   const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight,
-    defaultColor,
-    font: isExperimental ? font : legacyFont,
-    fontStyle: {
-      fontSize: captionFontSize,
-      textTransform: "uppercase"
-    }
-  });
-};
+  return useTypographyFactory<AllowedWeight, AllowedColors>(
+    {
+      ...props,
+      defaultWeight,
+      defaultColor,
+      font: isExperimental ? font : legacyFont,
+      fontStyle: {
+        fontSize: captionFontSize,
+        textTransform: "uppercase"
+      }
+    },
+    ref
+  );
+});