@pagopa/io-app-design-system 1.16.0 → 1.17.0

package/lib/module/components/radio/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Divider","ListItemRadio","RadioGroup","_ref","items","selectedItem","onPress","createElement","map","item","index","Fragment","key","id","testID","value","description","icon","disabled","onValueChange","selected","length"],"sourceRoot":"../../../../src","sources":["components/radio/RadioGroup.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,OAAO,QAAQ,YAAY;AAEpC,SAASC,aAAa,QAAQ,4BAA4B;AAgB1D;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,UAAU,GAAGC,IAAA;EAAA,IAAK;IAAEC,KAAK;IAAEC,YAAY;IAAEC;EAAkB,CAAC,GAAAH,IAAA;EAAA,oBACvEL,KAAA,CAAAS,aAAA,CAACR,IAAI,QACFK,KAAK,CAACI,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,kBACrBZ,KAAA,CAAAS,aAAA,CAACT,KAAK,CAACa,QAAQ;IAACC,GAAG,EAAG,cAAaH,IAAI,CAACI,EAAG;EAAE,gBAC3Cf,KAAA,CAAAS,aAAA,CAACN,aAAa;IACZa,MAAM,EAAG,mBAAkBL,IAAI,CAACI,EAAG,EAAE;IACrCE,KAAK,EAAEN,IAAI,CAACM,KAAM;IAClBC,WAAW,EAAEP,IAAI,CAACO,WAAY;IAC9BC,IAAI,EAAER,IAAI,CAACQ,IAAK;IAChBC,QAAQ,EAAET,IAAI,CAACS,QAAS;IACxBC,aAAa,EAAEA,CAAA,KAAMb,OAAO,CAACG,IAAI,CAACI,EAAE,CAAE;IACtCO,QAAQ,EAAEf,YAAY,KAAKI,IAAI,CAACI;EAAG,CACpC,CAAC,EACDH,KAAK,GAAGN,KAAK,CAACiB,MAAM,GAAG,CAAC,iBAAIvB,KAAA,CAAAS,aAAA,CAACP,OAAO,MAAE,CACzB,CACjB,CACG,CAAC;AAAA,CACR"}
+{"version":3,"names":["React","View","Divider","ListItemRadio","RadioGroup","_ref","items","selectedItem","onPress","createElement","map","item","index","Fragment","key","id","testID","value","description","startImage","disabled","loadingProps","onValueChange","selected","length"],"sourceRoot":"../../../../src","sources":["components/radio/RadioGroup.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAA0B,OAAO;AAC7C,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,OAAO,QAAQ,YAAY;AACpC,SAASC,aAAa,QAAQ,4BAA4B;AAiB1D;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,UAAU,GAAGC,IAAA;EAAA,IAAK;IAAEC,KAAK;IAAEC,YAAY;IAAEC;EAAkB,CAAC,GAAAH,IAAA;EAAA,oBACvEL,KAAA,CAAAS,aAAA,CAACR,IAAI,QACFK,KAAK,CAACI,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,kBACrBZ,KAAA,CAAAS,aAAA,CAACT,KAAK,CAACa,QAAQ;IAACC,GAAG,EAAG,cAAaH,IAAI,CAACI,EAAG;EAAE,gBAC3Cf,KAAA,CAAAS,aAAA,CAACN,aAAa;IACZa,MAAM,EAAG,mBAAkBL,IAAI,CAACI,EAAG,EAAE;IACrCE,KAAK,EAAEN,IAAI,CAACM,KAAM;IAClBC,WAAW,EAAEP,IAAI,CAACO,WAAY;IAC9BC,UAAU,EAAER,IAAI,CAACQ,UAAW;IAC5BC,QAAQ,EAAET,IAAI,CAACS,QAAS;IACxBC,YAAY,EAAEV,IAAI,CAACU,YAAa;IAChCC,aAAa,EAAEA,CAAA,KAAMd,OAAO,CAACG,IAAI,CAACI,EAAE,CAAE;IACtCQ,QAAQ,EAAEhB,YAAY,KAAKI,IAAI,CAACI;EAAG,CACpC,CAAC,EACDH,KAAK,GAAGN,KAAK,CAACkB,MAAM,GAAG,CAAC,iBAAIxB,KAAA,CAAAS,aAAA,CAACP,OAAO,MAAE,CACzB,CACjB,CACG,CAAC;AAAA,CACR"}

package/lib/module/components/stepper/Stepper.js

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { Dimensions, View } from "react-native";
+// import { useCallback } from "react";
+import { useMemo } from "react";
+import { IOColors, IOStyles, IOVisualCostants, useIOExperimentalDesign } from "../../core";
+const STEPPER_SPACE = 4;
+const colorMap = {
+  active: "blueIO-500"
+};
+const legacyColorMap = {
+  active: "blue"
+};
+export const Stepper = _ref => {
+  let {
+    steps,
+    currentStep
+  } = _ref;
+  const {
+    isExperimental
+  } = useIOExperimentalDesign();
+  const colors = useMemo(() => isExperimental ? colorMap : legacyColorMap, [isExperimental]);
+  const [stepWidth, setStepWidth] = React.useState(Dimensions.get("window").width / steps);
+  const onLayout = e => {
+    setStepWidth(e.nativeEvent.layout.width / steps);
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: {
+      paddingHorizontal: IOVisualCostants.appMarginDefault
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    onLayout: onLayout,
+    style: [IOStyles.flex, IOStyles.rowSpaceBetween]
+  }, [...Array(steps)].map((_, i) => /*#__PURE__*/React.createElement(View, {
+    key: i,
+    style: {
+      borderRadius: 2,
+      borderBottomColor: IOColors[i > currentStep - 1 ? "grey-200" : colors.active],
+      borderBottomWidth: 2,
+      width: stepWidth - STEPPER_SPACE
+    }
+  }))));
+};
+//# sourceMappingURL=Stepper.js.map

package/lib/module/components/stepper/Stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Dimensions","View","useMemo","IOColors","IOStyles","IOVisualCostants","useIOExperimentalDesign","STEPPER_SPACE","colorMap","active","legacyColorMap","Stepper","_ref","steps","currentStep","isExperimental","colors","stepWidth","setStepWidth","useState","get","width","onLayout","e","nativeEvent","layout","createElement","style","paddingHorizontal","appMarginDefault","flex","rowSpaceBetween","Array","map","_","i","key","borderRadius","borderBottomColor","borderBottomWidth"],"sourceRoot":"../../../../src","sources":["components/stepper/Stepper.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAqBC,IAAI,QAAQ,cAAc;AAClE;AACA,SAASC,OAAO,QAAQ,OAAO;AAC/B,SACEC,QAAQ,EAERC,QAAQ,EACRC,gBAAgB,EAChBC,uBAAuB,QAClB,YAAY;AAMnB,MAAMC,aAAuB,GAAG,CAAC;AAEjC,MAAMC,QAAkC,GAAG;EACzCC,MAAM,EAAE;AACV,CAAC;AAED,MAAMC,cAAwC,GAAG;EAC/CD,MAAM,EAAE;AACV,CAAC;AAED,OAAO,MAAME,OAAO,GAAGC,IAAA,IAA0C;EAAA,IAAzC;IAAEC,KAAK;IAAEC;EAA0B,CAAC,GAAAF,IAAA;EAC1D,MAAM;IAAEG;EAAe,CAAC,GAAGT,uBAAuB,CAAC,CAAC;EACpD,MAAMU,MAAM,GAAGd,OAAO,CACpB,MAAOa,cAAc,GAAGP,QAAQ,GAAGE,cAAe,EAClD,CAACK,cAAc,CACjB,CAAC;EAED,MAAM,CAACE,SAAS,EAAEC,YAAY,CAAC,GAAGnB,KAAK,CAACoB,QAAQ,CAC9CnB,UAAU,CAACoB,GAAG,CAAC,QAAQ,CAAC,CAACC,KAAK,GAAGR,KACnC,CAAC;EACD,MAAMS,QAAQ,GAAIC,CAAoB,IAAK;IACzCL,YAAY,CAACK,CAAC,CAACC,WAAW,CAACC,MAAM,CAACJ,KAAK,GAAGR,KAAK,CAAC;EAClD,CAAC;EAED,oBACEd,KAAA,CAAA2B,aAAA,CAACzB,IAAI;IAAC0B,KAAK,EAAE;MAAEC,iBAAiB,EAAEvB,gBAAgB,CAACwB;IAAiB;EAAE,gBACpE9B,KAAA,CAAA2B,aAAA,CAACzB,IAAI;IACHqB,QAAQ,EAAEA,QAAS;IACnBK,KAAK,EAAE,CAACvB,QAAQ,CAAC0B,IAAI,EAAE1B,QAAQ,CAAC2B,eAAe;EAAE,GAEhD,CAAC,GAAGC,KAAK,CAACnB,KAAK,CAAC,CAAC,CAACoB,GAAG,CAAC,CAACC,CAAC,EAAEC,CAAC,kBAC1BpC,KAAA,CAAA2B,aAAA,CAACzB,IAAI;IACHmC,GAAG,EAAED,CAAE;IACPR,KAAK,EAAE;MACLU,YAAY,EAAE,CAAC;MACfC,iBAAiB,EACfnC,QAAQ,CAACgC,CAAC,GAAGrB,WAAW,GAAG,CAAC,GAAG,UAAU,GAAGE,MAAM,CAACP,MAAM,CAAC;MAC5D8B,iBAAiB,EAAE,CAAC;MACpBlB,KAAK,EAAEJ,SAAS,GAAGV;IACrB;EAAE,CACH,CACF,CACG,CACF,CAAC;AAEX,CAAC"}

package/lib/module/components/stepper/index.js

@@ -0,0 +1,2 @@
+export * from "./Stepper";
+//# sourceMappingURL=index.js.map

package/lib/module/components/stepper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/stepper/index.tsx"],"mappings":"AAAA,cAAc,WAAW"}

package/lib/module/components/typography/H1.js

@@ -8,7 +8,9 @@ const defaultWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFont = "TitilliumWeb";
-const legacyDefaultWeight = "Bold";
+const legacyDefaultWeight = "SemiBold";
+const legacyH1FontSize = 31;
+const legacyH1LineHeight = 43;
 
 /**
  * `H1` typographic style
@@ -23,8 +25,8 @@ export const H1 = props => {
     defaultColor,
     font: isExperimental ? font : legacyFont,
     fontStyle: {
-      fontSize: h1FontSize,
-      lineHeight: h1LineHeight
+      fontSize: isExperimental ? h1FontSize : legacyH1FontSize,
+      lineHeight: isExperimental ? h1LineHeight : legacyH1LineHeight
     }
   });
 };

package/lib/module/components/typography/H1.js.map

@@ -1 +1 @@
-{"version":3,"names":["useIOExperimentalDesign","useTypographyFactory","h1FontSize","h1LineHeight","font","defaultColor","defaultWeight","legacyFont","legacyDefaultWeight","H1","props","isExperimental","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/H1.tsx"],"mappings":"AAAA,SAAkBA,uBAAuB,QAAQ,YAAY;AAE7D,SAASC,oBAAoB,QAAQ,WAAW;AAUhD,OAAO,MAAMC,UAAU,GAAG,EAAE;AAC5B,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,MAAMC,IAAgB,GAAG,WAAW;AACpC,MAAMC,YAA2B,GAAG,OAAO;AAC3C,MAAMC,aAA4B,GAAG,SAAS;;AAE9C;AACA,MAAMC,UAAsB,GAAG,cAAc;AAC7C,MAAMC,mBAAkC,GAAG,MAAM;;AAEjD;AACA;AACA;AACA,OAAO,MAAMC,EAAE,GAAIC,KAAc,IAAK;EACpC,MAAM;IAAEC;EAAe,CAAC,GAAGX,uBAAuB,CAAC,CAAC;EAEpD,OAAOC,oBAAoB,CAA+B;IACxD,GAAGS,KAAK;IACRJ,aAAa,EAAEK,cAAc,GAAGL,aAAa,GAAGE,mBAAmB;IACnEH,YAAY;IACZD,IAAI,EAAEO,cAAc,GAAGP,IAAI,GAAGG,UAAU;IACxCK,SAAS,EAAE;MAAEC,QAAQ,EAAEX,UAAU;MAAEY,UAAU,EAAEX;IAAa;EAC9D,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"names":["useIOExperimentalDesign","useTypographyFactory","h1FontSize","h1LineHeight","font","defaultColor","defaultWeight","legacyFont","legacyDefaultWeight","legacyH1FontSize","legacyH1LineHeight","H1","props","isExperimental","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/H1.tsx"],"mappings":"AAAA,SAAkBA,uBAAuB,QAAQ,YAAY;AAE7D,SAASC,oBAAoB,QAAQ,WAAW;AAUhD,OAAO,MAAMC,UAAU,GAAG,EAAE;AAC5B,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,MAAMC,IAAgB,GAAG,WAAW;AACpC,MAAMC,YAA2B,GAAG,OAAO;AAC3C,MAAMC,aAA4B,GAAG,SAAS;;AAE9C;AACA,MAAMC,UAAsB,GAAG,cAAc;AAC7C,MAAMC,mBAAkC,GAAG,UAAU;AACrD,MAAMC,gBAAgB,GAAG,EAAE;AAC3B,MAAMC,kBAAkB,GAAG,EAAE;;AAE7B;AACA;AACA;AACA,OAAO,MAAMC,EAAE,GAAIC,KAAc,IAAK;EACpC,MAAM;IAAEC;EAAe,CAAC,GAAGb,uBAAuB,CAAC,CAAC;EAEpD,OAAOC,oBAAoB,CAA+B;IACxD,GAAGW,KAAK;IACRN,aAAa,EAAEO,cAAc,GAAGP,aAAa,GAAGE,mBAAmB;IACnEH,YAAY;IACZD,IAAI,EAAES,cAAc,GAAGT,IAAI,GAAGG,UAAU;IACxCO,SAAS,EAAE;MACTC,QAAQ,EAAEF,cAAc,GAAGX,UAAU,GAAGO,gBAAgB;MACxDO,UAAU,EAAEH,cAAc,GAAGV,YAAY,GAAGO;IAC9C;EACF,CAAC,CAAC;AACJ,CAAC"}

package/lib/module/components/typography/H2.js

@@ -8,7 +8,9 @@ const defaultWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFont = "TitilliumWeb";
-const legacyDefaultWeight = "Bold";
+const legacyDefaultWeight = "SemiBold";
+const legacyH2FontSize = 28;
+const legacyH2LineHeight = 40;
 
 /**
  * `H2` typographic style
@@ -23,8 +25,8 @@ export const H2 = props => {
     defaultColor,
     font: isExperimental ? font : legacyFont,
     fontStyle: {
-      fontSize: h2FontSize,
-      lineHeight: h2LineHeight
+      fontSize: isExperimental ? h2FontSize : legacyH2FontSize,
+      lineHeight: isExperimental ? h2LineHeight : legacyH2LineHeight
     }
   });
 };

package/lib/module/components/typography/H2.js.map

@@ -1 +1 @@
-{"version":3,"names":["useIOExperimentalDesign","useTypographyFactory","h2FontSize","h2LineHeight","font","defaultColor","defaultWeight","legacyFont","legacyDefaultWeight","H2","props","isExperimental","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/H2.tsx"],"mappings":"AAAA,SAAkBA,uBAAuB,QAAQ,YAAY;AAE7D,SAASC,oBAAoB,QAAQ,WAAW;AAUhD,OAAO,MAAMC,UAAU,GAAG,EAAE;AAC5B,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,MAAMC,IAAgB,GAAG,WAAW;AACpC,MAAMC,YAA2B,GAAG,OAAO;AAC3C,MAAMC,aAA4B,GAAG,SAAS;;AAE9C;AACA,MAAMC,UAAsB,GAAG,cAAc;AAC7C,MAAMC,mBAAkC,GAAG,MAAM;;AAEjD;AACA;AACA;AACA,OAAO,MAAMC,EAAE,GAAIC,KAAc,IAAK;EACpC,MAAM;IAAEC;EAAe,CAAC,GAAGX,uBAAuB,CAAC,CAAC;EAEpD,OAAOC,oBAAoB,CAA+B;IACxD,GAAGS,KAAK;IACRJ,aAAa,EAAEK,cAAc,GAAGL,aAAa,GAAGE,mBAAmB;IACnEH,YAAY;IACZD,IAAI,EAAEO,cAAc,GAAGP,IAAI,GAAGG,UAAU;IACxCK,SAAS,EAAE;MAAEC,QAAQ,EAAEX,UAAU;MAAEY,UAAU,EAAEX;IAAa;EAC9D,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"names":["useIOExperimentalDesign","useTypographyFactory","h2FontSize","h2LineHeight","font","defaultColor","defaultWeight","legacyFont","legacyDefaultWeight","legacyH2FontSize","legacyH2LineHeight","H2","props","isExperimental","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/H2.tsx"],"mappings":"AAAA,SAAkBA,uBAAuB,QAAQ,YAAY;AAE7D,SAASC,oBAAoB,QAAQ,WAAW;AAUhD,OAAO,MAAMC,UAAU,GAAG,EAAE;AAC5B,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,MAAMC,IAAgB,GAAG,WAAW;AACpC,MAAMC,YAA2B,GAAG,OAAO;AAC3C,MAAMC,aAA4B,GAAG,SAAS;;AAE9C;AACA,MAAMC,UAAsB,GAAG,cAAc;AAC7C,MAAMC,mBAAkC,GAAG,UAAU;AACrD,MAAMC,gBAAgB,GAAG,EAAE;AAC3B,MAAMC,kBAAkB,GAAG,EAAE;;AAE7B;AACA;AACA;AACA,OAAO,MAAMC,EAAE,GAAIC,KAAc,IAAK;EACpC,MAAM;IAAEC;EAAe,CAAC,GAAGb,uBAAuB,CAAC,CAAC;EAEpD,OAAOC,oBAAoB,CAA+B;IACxD,GAAGW,KAAK;IACRN,aAAa,EAAEO,cAAc,GAAGP,aAAa,GAAGE,mBAAmB;IACnEH,YAAY;IACZD,IAAI,EAAES,cAAc,GAAGT,IAAI,GAAGG,UAAU;IACxCO,SAAS,EAAE;MACTC,QAAQ,EAAEF,cAAc,GAAGX,UAAU,GAAGO,gBAAgB;MACxDO,UAAU,EAAEH,cAAc,GAAGV,YAAY,GAAGO;IAC9C;EACF,CAAC,CAAC;AACJ,CAAC"}

package/lib/module/components/typography/H3.js

@@ -10,7 +10,9 @@ const defaultWeight = "Regular";
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFontName = "TitilliumWeb";
 const legacyDefaultColor = "bluegreyDark";
-const legacyDefaultWeight = "Bold";
+const legacyDefaultWeight = "SemiBold";
+const legacyH3FontSize = 24;
+const legacyH3LineHeight = 34;
 /**
  * `H3` typographic style
  */
@@ -24,8 +26,8 @@ export const H3 = props => {
     defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
     font: isExperimental ? font : legacyFontName,
     fontStyle: {
-      fontSize: h3FontSize,
-      lineHeight: h3LineHeight
+      fontSize: isExperimental ? h3FontSize : legacyH3FontSize,
+      lineHeight: isExperimental ? h3LineHeight : legacyH3LineHeight
     }
   });
 };

package/lib/module/components/typography/H3.js.map

@@ -1 +1 @@
-{"version":3,"names":["useIOExperimentalDesign","useTypographyFactory","h3FontSize","h3LineHeight","font","defaultColor","defaultWeight","legacyFontName","legacyDefaultColor","legacyDefaultWeight","H3","props","isExperimental","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/H3.tsx"],"mappings":"AAAA,SAAkBA,uBAAuB,QAAQ,YAAY;AAE7D,SAASC,oBAAoB,QAAQ,WAAW;AAUhD;AACA,OAAO,MAAMC,UAAU,GAAG,EAAE;AAC5B,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,MAAMC,IAAgB,GAAG,WAAW;AACpC,MAAMC,YAA2B,GAAG,OAAO;AAC3C,MAAMC,aAA4B,GAAG,SAAS;;AAE9C;AACA,MAAMC,cAA0B,GAAG,cAAc;AACjD,MAAMC,kBAAiC,GAAG,cAAc;AACxD,MAAMC,mBAAkC,GAAG,MAAM;AACjD;AACA;AACA;AACA,OAAO,MAAMC,EAAE,GAAIC,KAAc,IAAK;EACpC,MAAM;IAAEC;EAAe,CAAC,GAAGZ,uBAAuB,CAAC,CAAC;EACpD,OAAOC,oBAAoB,CAA+B;IACxD,GAAGU,KAAK;IACRL,aAAa,EAAEM,cAAc,GAAGN,aAAa,GAAGG,mBAAmB;IACnEJ,YAAY,EAAEO,cAAc,GAAGP,YAAY,GAAGG,kBAAkB;IAChEJ,IAAI,EAAEQ,cAAc,GAAGR,IAAI,GAAGG,cAAc;IAC5CM,SAAS,EAAE;MAAEC,QAAQ,EAAEZ,UAAU;MAAEa,UAAU,EAAEZ;IAAa;EAC9D,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"names":["useIOExperimentalDesign","useTypographyFactory","h3FontSize","h3LineHeight","font","defaultColor","defaultWeight","legacyFontName","legacyDefaultColor","legacyDefaultWeight","legacyH3FontSize","legacyH3LineHeight","H3","props","isExperimental","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/H3.tsx"],"mappings":"AAAA,SAAkBA,uBAAuB,QAAQ,YAAY;AAE7D,SAASC,oBAAoB,QAAQ,WAAW;AAUhD;AACA,OAAO,MAAMC,UAAU,GAAG,EAAE;AAC5B,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,MAAMC,IAAgB,GAAG,WAAW;AACpC,MAAMC,YAA2B,GAAG,OAAO;AAC3C,MAAMC,aAA4B,GAAG,SAAS;;AAE9C;AACA,MAAMC,cAA0B,GAAG,cAAc;AACjD,MAAMC,kBAAiC,GAAG,cAAc;AACxD,MAAMC,mBAAkC,GAAG,UAAU;AACrD,MAAMC,gBAAgB,GAAG,EAAE;AAC3B,MAAMC,kBAAkB,GAAG,EAAE;AAC7B;AACA;AACA;AACA,OAAO,MAAMC,EAAE,GAAIC,KAAc,IAAK;EACpC,MAAM;IAAEC;EAAe,CAAC,GAAGd,uBAAuB,CAAC,CAAC;EACpD,OAAOC,oBAAoB,CAA+B;IACxD,GAAGY,KAAK;IACRP,aAAa,EAAEQ,cAAc,GAAGR,aAAa,GAAGG,mBAAmB;IACnEJ,YAAY,EAAES,cAAc,GAAGT,YAAY,GAAGG,kBAAkB;IAChEJ,IAAI,EAAEU,cAAc,GAAGV,IAAI,GAAGG,cAAc;IAC5CQ,SAAS,EAAE;MACTC,QAAQ,EAAEF,cAAc,GAAGZ,UAAU,GAAGQ,gBAAgB;MACxDO,UAAU,EAAEH,cAAc,GAAGX,YAAY,GAAGQ;IAC9C;EACF,CAAC,CAAC;AACJ,CAAC"}

package/lib/module/components/typography/H4.js

@@ -10,6 +10,7 @@ const defaultWeight = "Regular";
 const legacyFontName = "TitilliumWeb";
 const legacyDefaultColor = "bluegreyDark";
 const legacyDefaultWeight = "SemiBold";
+const legacyH4FontSize = 22;
 
 /**
  * `H4` typographic style
@@ -24,7 +25,7 @@ export const H4 = props => {
     defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
     font: isExperimental ? font : legacyFontName,
     fontStyle: {
-      fontSize: h4FontSize,
+      fontSize: isExperimental ? h4FontSize : legacyH4FontSize,
       lineHeight: h4LineHeight
     }
   });

package/lib/module/components/typography/H4.js.map

@@ -1 +1 @@
-{"version":3,"names":["useIOExperimentalDesign","useTypographyFactory","h4FontSize","h4LineHeight","font","defaultColor","defaultWeight","legacyFontName","legacyDefaultColor","legacyDefaultWeight","H4","props","isExperimental","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/H4.tsx"],"mappings":"AAAA,SAAkBA,uBAAuB,QAAQ,YAAY;AAE7D,SAASC,oBAAoB,QAAQ,WAAW;AAUhD,OAAO,MAAMC,UAAU,GAAG,EAAE;AAC5B,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,MAAMC,IAAgB,GAAG,WAAW;AACpC,MAAMC,YAA2B,GAAG,OAAO;AAC3C,MAAMC,aAA4B,GAAG,SAAS;;AAE9C;AACA,MAAMC,cAA0B,GAAG,cAAc;AACjD,MAAMC,kBAAiC,GAAG,cAAc;AACxD,MAAMC,mBAAkC,GAAG,UAAU;;AAErD;AACA;AACA;AACA,OAAO,MAAMC,EAAE,GAAIC,KAAc,IAAK;EACpC,MAAM;IAAEC;EAAe,CAAC,GAAGZ,uBAAuB,CAAC,CAAC;EACpD,OAAOC,oBAAoB,CAA+B;IACxD,GAAGU,KAAK;IACRL,aAAa,EAAEM,cAAc,GAAGN,aAAa,GAAGG,mBAAmB;IACnEJ,YAAY,EAAEO,cAAc,GAAGP,YAAY,GAAGG,kBAAkB;IAChEJ,IAAI,EAAEQ,cAAc,GAAGR,IAAI,GAAGG,cAAc;IAC5CM,SAAS,EAAE;MAAEC,QAAQ,EAAEZ,UAAU;MAAEa,UAAU,EAAEZ;IAAa;EAC9D,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"names":["useIOExperimentalDesign","useTypographyFactory","h4FontSize","h4LineHeight","font","defaultColor","defaultWeight","legacyFontName","legacyDefaultColor","legacyDefaultWeight","legacyH4FontSize","H4","props","isExperimental","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/H4.tsx"],"mappings":"AAAA,SAAkBA,uBAAuB,QAAQ,YAAY;AAE7D,SAASC,oBAAoB,QAAQ,WAAW;AAUhD,OAAO,MAAMC,UAAU,GAAG,EAAE;AAC5B,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,MAAMC,IAAgB,GAAG,WAAW;AACpC,MAAMC,YAA2B,GAAG,OAAO;AAC3C,MAAMC,aAA4B,GAAG,SAAS;;AAE9C;AACA,MAAMC,cAA0B,GAAG,cAAc;AACjD,MAAMC,kBAAiC,GAAG,cAAc;AACxD,MAAMC,mBAAkC,GAAG,UAAU;AACrD,MAAMC,gBAAgB,GAAG,EAAE;;AAE3B;AACA;AACA;AACA,OAAO,MAAMC,EAAE,GAAIC,KAAc,IAAK;EACpC,MAAM;IAAEC;EAAe,CAAC,GAAGb,uBAAuB,CAAC,CAAC;EACpD,OAAOC,oBAAoB,CAA+B;IACxD,GAAGW,KAAK;IACRN,aAAa,EAAEO,cAAc,GAAGP,aAAa,GAAGG,mBAAmB;IACnEJ,YAAY,EAAEQ,cAAc,GAAGR,YAAY,GAAGG,kBAAkB;IAChEJ,IAAI,EAAES,cAAc,GAAGT,IAAI,GAAGG,cAAc;IAC5CO,SAAS,EAAE;MACTC,QAAQ,EAAEF,cAAc,GAAGX,UAAU,GAAGQ,gBAAgB;MACxDM,UAAU,EAAEb;IACd;EACF,CAAC,CAAC;AACJ,CAAC"}

package/lib/module/components/typography/H6.js

@@ -10,6 +10,8 @@ const h6DefaultWeight = "Regular";
 const fontName = "ReadexPro";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyFontSize = 18;
+const legacyLineHeight = 25;
 const legacyFontName = "TitilliumWeb";
 const legacyDefaultWeight = "SemiBold";
 
@@ -26,8 +28,8 @@ export const H6 = props => {
     defaultColor: h6DefaultColor,
     font: isExperimental ? fontName : legacyFontName,
     fontStyle: {
-      fontSize: h6FontSize,
-      lineHeight: h6LineHeight
+      fontSize: isExperimental ? h6FontSize : legacyFontSize,
+      lineHeight: isExperimental ? h6LineHeight : legacyLineHeight
     }
   });
 };

package/lib/module/components/typography/H6.js.map

@@ -1 +1 @@
-{"version":3,"names":["IOThemeLight","useIOExperimentalDesign","useTypographyFactory","h6FontSize","h6LineHeight","h6DefaultColor","h6DefaultWeight","fontName","legacyFontName","legacyDefaultWeight","H6","props","isExperimental","defaultWeight","defaultColor","font","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/H6.tsx"],"mappings":"AAAA,SAAkBA,YAAY,EAAEC,uBAAuB,QAAQ,YAAY;AAE3E,SAASC,oBAAoB,QAAQ,WAAW;;AAGhD;;AAQA,OAAO,MAAMC,UAAU,GAAG,EAAE;AAC5B,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,MAAMC,cAA6B,GAAGL,YAAY,CAAC,kBAAkB,CAAC;AACtE,MAAMM,eAA8B,GAAG,SAAS;AAChD,MAAMC,QAAoB,GAAG,WAAW;;AAExC;AACA,MAAMC,cAA0B,GAAG,cAAc;AACjD,MAAMC,mBAAkC,GAAG,UAAU;;AAErD;AACA;AACA;AACA,OAAO,MAAMC,EAAE,GAAIC,KAAc,IAAK;EACpC,MAAM;IAAEC;EAAe,CAAC,GAAGX,uBAAuB,CAAC,CAAC;EAEpD,OAAOC,oBAAoB,CAA+B;IACxD,GAAGS,KAAK;IACRE,aAAa,EAAED,cAAc,GAAGN,eAAe,GAAGG,mBAAmB;IACrEK,YAAY,EAAET,cAAc;IAC5BU,IAAI,EAAEH,cAAc,GAAGL,QAAQ,GAAGC,cAAc;IAChDQ,SAAS,EAAE;MAAEC,QAAQ,EAAEd,UAAU;MAAEe,UAAU,EAAEd;IAAa;EAC9D,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"names":["IOThemeLight","useIOExperimentalDesign","useTypographyFactory","h6FontSize","h6LineHeight","h6DefaultColor","h6DefaultWeight","fontName","legacyFontSize","legacyLineHeight","legacyFontName","legacyDefaultWeight","H6","props","isExperimental","defaultWeight","defaultColor","font","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/H6.tsx"],"mappings":"AAAA,SAAkBA,YAAY,EAAEC,uBAAuB,QAAQ,YAAY;AAE3E,SAASC,oBAAoB,QAAQ,WAAW;;AAGhD;;AAQA,OAAO,MAAMC,UAAU,GAAG,EAAE;AAC5B,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,MAAMC,cAA6B,GAAGL,YAAY,CAAC,kBAAkB,CAAC;AACtE,MAAMM,eAA8B,GAAG,SAAS;AAChD,MAAMC,QAAoB,GAAG,WAAW;;AAExC;AACA,MAAMC,cAAc,GAAG,EAAE;AACzB,MAAMC,gBAAgB,GAAG,EAAE;AAC3B,MAAMC,cAA0B,GAAG,cAAc;AACjD,MAAMC,mBAAkC,GAAG,UAAU;;AAErD;AACA;AACA;AACA,OAAO,MAAMC,EAAE,GAAIC,KAAc,IAAK;EACpC,MAAM;IAAEC;EAAe,CAAC,GAAGb,uBAAuB,CAAC,CAAC;EAEpD,OAAOC,oBAAoB,CAA+B;IACxD,GAAGW,KAAK;IACRE,aAAa,EAAED,cAAc,GAAGR,eAAe,GAAGK,mBAAmB;IACrEK,YAAY,EAAEX,cAAc;IAC5BY,IAAI,EAAEH,cAAc,GAAGP,QAAQ,GAAGG,cAAc;IAChDQ,SAAS,EAAE;MACTC,QAAQ,EAAEL,cAAc,GAAGX,UAAU,GAAGK,cAAc;MACtDY,UAAU,EAAEN,cAAc,GAAGV,YAAY,GAAGK;IAC9C;EACF,CAAC,CAAC;AACJ,CAAC"}

package/lib/module/components/typography/Hero.js

@@ -8,6 +8,10 @@ const defaultWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFont = "TitilliumWeb";
+const legacyWeight = "SemiBold";
+const legacyHeroFontSize = 35;
+const legacyHeroLineHeight = 49;
+
 /**
  * `Hero` typographic style
  */
@@ -17,12 +21,12 @@ export const Hero = props => {
   } = useIOExperimentalDesign();
   return useTypographyFactory({
     ...props,
-    defaultWeight,
+    defaultWeight: isExperimental ? defaultWeight : legacyWeight,
     defaultColor,
     font: isExperimental ? font : legacyFont,
     fontStyle: {
-      fontSize: heroFontSize,
-      lineHeight: heroLineHeight
+      fontSize: isExperimental ? heroFontSize : legacyHeroFontSize,
+      lineHeight: isExperimental ? heroLineHeight : legacyHeroLineHeight
     }
   });
 };

package/lib/module/components/typography/Hero.js.map

@@ -1 +1 @@
-{"version":3,"names":["useIOExperimentalDesign","useTypographyFactory","heroFontSize","heroLineHeight","font","defaultColor","defaultWeight","legacyFont","Hero","props","isExperimental","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/Hero.tsx"],"mappings":"AAAA,SAASA,uBAAuB,QAAiB,YAAY;AAE7D,SAASC,oBAAoB,QAAQ,WAAW;AAUhD,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,OAAO,MAAMC,cAAc,GAAG,EAAE;AAChC,MAAMC,IAAgB,GAAG,WAAW;AACpC,MAAMC,YAA2B,GAAG,OAAO;AAC3C,MAAMC,aAA4B,GAAG,SAAS;;AAE9C;AACA,MAAMC,UAAsB,GAAG,cAAc;AAC7C;AACA;AACA;AACA,OAAO,MAAMC,IAAI,GAAIC,KAAgB,IAAK;EACxC,MAAM;IAAEC;EAAe,CAAC,GAAGV,uBAAuB,CAAC,CAAC;EAEpD,OAAOC,oBAAoB,CAA+B;IACxD,GAAGQ,KAAK;IACRH,aAAa;IACbD,YAAY;IACZD,IAAI,EAAEM,cAAc,GAAGN,IAAI,GAAGG,UAAU;IACxCI,SAAS,EAAE;MAAEC,QAAQ,EAAEV,YAAY;MAAEW,UAAU,EAAEV;IAAe;EAClE,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"names":["useIOExperimentalDesign","useTypographyFactory","heroFontSize","heroLineHeight","font","defaultColor","defaultWeight","legacyFont","legacyWeight","legacyHeroFontSize","legacyHeroLineHeight","Hero","props","isExperimental","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/Hero.tsx"],"mappings":"AAAA,SAASA,uBAAuB,QAAiB,YAAY;AAE7D,SAASC,oBAAoB,QAAQ,WAAW;AAUhD,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,OAAO,MAAMC,cAAc,GAAG,EAAE;AAChC,MAAMC,IAAgB,GAAG,WAAW;AACpC,MAAMC,YAA2B,GAAG,OAAO;AAC3C,MAAMC,aAA4B,GAAG,SAAS;;AAE9C;AACA,MAAMC,UAAsB,GAAG,cAAc;AAC7C,MAAMC,YAA2B,GAAG,UAAU;AAC9C,MAAMC,kBAAkB,GAAG,EAAE;AAC7B,MAAMC,oBAAoB,GAAG,EAAE;;AAE/B;AACA;AACA;AACA,OAAO,MAAMC,IAAI,GAAIC,KAAgB,IAAK;EACxC,MAAM;IAAEC;EAAe,CAAC,GAAGb,uBAAuB,CAAC,CAAC;EAEpD,OAAOC,oBAAoB,CAA+B;IACxD,GAAGW,KAAK;IACRN,aAAa,EAAEO,cAAc,GAAGP,aAAa,GAAGE,YAAY;IAC5DH,YAAY;IACZD,IAAI,EAAES,cAAc,GAAGT,IAAI,GAAGG,UAAU;IACxCO,SAAS,EAAE;MACTC,QAAQ,EAAEF,cAAc,GAAGX,YAAY,GAAGO,kBAAkB;MAC5DO,UAAU,EAAEH,cAAc,GAAGV,cAAc,GAAGO;IAChD;EACF,CAAC,CAAC;AACJ,CAAC"}

package/lib/module/components/typography/LabelSmall.js

@@ -5,6 +5,10 @@ const fontSizeMapping = {
   regular: 14,
   small: 12
 };
+const lineHeightMapping = {
+  regular: 21,
+  small: 18
+};
 const labelDefaultWeight = "Bold";
 const labelDefaultcolor = "blue";
 
@@ -21,7 +25,8 @@ export const LabelSmall = props => {
     defaultColor: labelDefaultcolor,
     font: isExperimental && props.font !== undefined ? props.font : defaultFontName,
     fontStyle: {
-      fontSize: props.fontSize ? fontSizeMapping[props.fontSize] : fontSizeMapping.regular
+      fontSize: props.fontSize ? fontSizeMapping[props.fontSize] : fontSizeMapping.regular,
+      lineHeight: props.fontSize ? lineHeightMapping[props.fontSize] : lineHeightMapping.regular
     }
   });
 };

package/lib/module/components/typography/LabelSmall.js.map

@@ -1 +1 @@
-{"version":3,"names":["useIOExperimentalDesign","useTypographyFactory","defaultFontName","fontSizeMapping","regular","small","labelDefaultWeight","labelDefaultcolor","LabelSmall","props","isExperimental","defaultWeight","defaultColor","font","undefined","fontStyle","fontSize"],"sourceRoot":"../../../../src","sources":["components/typography/LabelSmall.tsx"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,YAAY;AAGpD,SAASC,oBAAoB,QAAQ,WAAW;AAyBhD,MAAMC,eAA2B,GAAG,cAAc;AAClD,MAAMC,eAAyC,GAAG;EAChDC,OAAO,EAAE,EAAE;EACXC,KAAK,EAAE;AACT,CAAC;AACD,MAAMC,kBAAkB,GAAG,MAAM;AACjC,MAAMC,iBAAiB,GAAG,MAAM;;AAEhC;AACA;AACA;AACA,OAAO,MAAMC,UAAU,GAAIC,KAAsB,IAAK;EACpD,MAAM;IAAEC;EAAe,CAAC,GAAGV,uBAAuB,CAAC,CAAC;EAEpD,OAAOC,oBAAoB,CAA+B;IACxD,GAAGQ,KAAK;IACRE,aAAa,EAAEL,kBAAkB;IACjCM,YAAY,EAAEL,iBAAiB;IAC/BM,IAAI,EACFH,cAAc,IAAID,KAAK,CAACI,IAAI,KAAKC,SAAS,GAAGL,KAAK,CAACI,IAAI,GAAGX,eAAe;IAC3Ea,SAAS,EAAE;MACTC,QAAQ,EAAEP,KAAK,CAACO,QAAQ,GACpBb,eAAe,CAACM,KAAK,CAACO,QAAQ,CAAC,GAC/Bb,eAAe,CAACC;IACtB;EACF,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"names":["useIOExperimentalDesign","useTypographyFactory","defaultFontName","fontSizeMapping","regular","small","lineHeightMapping","labelDefaultWeight","labelDefaultcolor","LabelSmall","props","isExperimental","defaultWeight","defaultColor","font","undefined","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/LabelSmall.tsx"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,YAAY;AAGpD,SAASC,oBAAoB,QAAQ,WAAW;AAyBhD,MAAMC,eAA2B,GAAG,cAAc;AAClD,MAAMC,eAAyC,GAAG;EAChDC,OAAO,EAAE,EAAE;EACXC,KAAK,EAAE;AACT,CAAC;AACD,MAAMC,iBAA2C,GAAG;EAClDF,OAAO,EAAE,EAAE;EACXC,KAAK,EAAE;AACT,CAAC;AACD,MAAME,kBAAkB,GAAG,MAAM;AACjC,MAAMC,iBAAiB,GAAG,MAAM;;AAEhC;AACA;AACA;AACA,OAAO,MAAMC,UAAU,GAAIC,KAAsB,IAAK;EACpD,MAAM;IAAEC;EAAe,CAAC,GAAGX,uBAAuB,CAAC,CAAC;EAEpD,OAAOC,oBAAoB,CAA+B;IACxD,GAAGS,KAAK;IACRE,aAAa,EAAEL,kBAAkB;IACjCM,YAAY,EAAEL,iBAAiB;IAC/BM,IAAI,EACFH,cAAc,IAAID,KAAK,CAACI,IAAI,KAAKC,SAAS,GAAGL,KAAK,CAACI,IAAI,GAAGZ,eAAe;IAC3Ec,SAAS,EAAE;MACTC,QAAQ,EAAEP,KAAK,CAACO,QAAQ,GACpBd,eAAe,CAACO,KAAK,CAACO,QAAQ,CAAC,GAC/Bd,eAAe,CAACC,OAAO;MAC3Bc,UAAU,EAAER,KAAK,CAACO,QAAQ,GACtBX,iBAAiB,CAACI,KAAK,CAACO,QAAQ,CAAC,GACjCX,iBAAiB,CAACF;IACxB;EACF,CAAC,CAAC;AACJ,CAAC"}

package/lib/module/components/typography/LabelSmallAlt.js

@@ -0,0 +1,32 @@
+import { useIOExperimentalDesign } from "../../core";
+import { useTypographyFactory } from "./Factory";
+const labelFontSize = 14;
+const labelLineHeight = 21;
+const fontName = "ReadexPro";
+const defaultColor = "black";
+const defaultWeight = "Regular";
+
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyLabelFontSize = 16;
+const legacyFontName = "TitilliumWeb";
+const legacyDefaultWeight = "SemiBold";
+
+/**
+ * `LabelSmallAlt` typographic style. It's referenced as `LabelSmallReadex` in the design projects.
+ */
+export const LabelSmallAlt = props => {
+  const {
+    isExperimental
+  } = useIOExperimentalDesign();
+  return useTypographyFactory({
+    ...props,
+    defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
+    defaultColor,
+    font: isExperimental ? fontName : legacyFontName,
+    fontStyle: {
+      fontSize: isExperimental ? labelFontSize : legacyLabelFontSize,
+      lineHeight: labelLineHeight
+    }
+  });
+};
+//# sourceMappingURL=LabelSmallAlt.js.map

package/lib/module/components/typography/LabelSmallAlt.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useIOExperimentalDesign","useTypographyFactory","labelFontSize","labelLineHeight","fontName","defaultColor","defaultWeight","legacyLabelFontSize","legacyFontName","legacyDefaultWeight","LabelSmallAlt","props","isExperimental","font","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/LabelSmallAlt.tsx"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,YAAY;AAGpD,SAASC,oBAAoB,QAAQ,WAAW;AAoBhD,MAAMC,aAAa,GAAG,EAAE;AACxB,MAAMC,eAAe,GAAG,EAAE;AAC1B,MAAMC,QAAoB,GAAG,WAAW;AACxC,MAAMC,YAA2B,GAAG,OAAO;AAC3C,MAAMC,aAA4B,GAAG,SAAS;;AAE9C;AACA,MAAMC,mBAAmB,GAAG,EAAE;AAC9B,MAAMC,cAA0B,GAAG,cAAc;AACjD,MAAMC,mBAAkC,GAAG,UAAU;;AAErD;AACA;AACA;AACA,OAAO,MAAMC,aAAa,GAAIC,KAAyB,IAAK;EAC1D,MAAM;IAAEC;EAAe,CAAC,GAAGZ,uBAAuB,CAAC,CAAC;EAEpD,OAAOC,oBAAoB,CAA+B;IACxD,GAAGU,KAAK;IACRL,aAAa,EAAEM,cAAc,GAAGN,aAAa,GAAGG,mBAAmB;IACnEJ,YAAY;IACZQ,IAAI,EAAED,cAAc,GAAGR,QAAQ,GAAGI,cAAc;IAChDM,SAAS,EAAE;MACTC,QAAQ,EAAEH,cAAc,GAAGV,aAAa,GAAGK,mBAAmB;MAC9DS,UAAU,EAAEb;IACd;EACF,CAAC,CAAC;AACJ,CAAC"}

package/lib/module/components/typography/README.md

@@ -0,0 +1,23 @@
+# Typography
+
+## Handling font files
+
+The application uses the font _Titillium Web_. Fonts are handled differently than Android and iOS. To use the font, `TitilliumWeb-SemiBoldItalic` example, you must apply the following properties for Android:
+
+```css
+{
+  fontFamily: 'TitilliumWeb-SemiBoldItalic'
+}
+```
+
+while in iOS the code to be applied is:
+
+```css
+{
+  fontFamily: 'Titillium Web',
+  fontWeight: '600',
+  fontStyle: 'italic'
+}
+```
+
+To manage fonts and variants more easily, we have created utility functions within the file [fonts.ts](../../utils/fonts.ts).