@pagopa/io-app-design-system 1.41.0 → 2.0.0-0

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

@@ -1,37 +1,43 @@
-import React from "react";
-import { IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { useTypographyFactory } from "./Factory";
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { forwardRef } from "react";
+import { useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOText } from "./IOText";
+const defaultColor = "textHeading-default";
 export const h2FontSize = 26;
 export const h2LineHeight = 39;
 const fontName = "ReadexPro";
-const defaultColor = "black";
-const defaultWeight = "Regular";
+const fontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFont = "TitilliumSansPro";
-const legacyDefaultWeight = "Semibold";
 const legacyH2FontSize = 28;
 const legacyH2LineHeight = 40;
+const legacyFontName = "TitilliumSansPro";
+const legacyFontWeight = "Semibold";
 
 /**
  * `H2` typographic style
  */
-export const H2 = /*#__PURE__*/React.forwardRef((props, ref) => {
+export const H2 = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    color: customColor,
+    ...props
+  } = _ref;
+  const theme = useIOTheme();
   const {
     isExperimental
   } = useIOExperimentalDesign();
-  return useTypographyFactory({
+  const H2Props = {
     ...props,
-    allowFontScaling: isExperimental,
-    maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-    dynamicTypeRamp: "title1" /* iOS only */,
-    defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
-    defaultColor,
-    font: isExperimental ? fontName : legacyFont,
-    fontStyle: {
-      fontSize: isExperimental ? h2FontSize : legacyH2FontSize,
-      lineHeight: isExperimental ? h2LineHeight : legacyH2LineHeight
-    }
-  }, ref);
+    dynamicTypeRamp: "title1",
+    // iOS only
+    font: isExperimental ? fontName : legacyFontName,
+    size: isExperimental ? h2FontSize : legacyH2FontSize,
+    weight: isExperimental ? fontWeight : legacyFontWeight,
+    color: customColor ?? theme[defaultColor],
+    lineHeight: isExperimental ? h2LineHeight : legacyH2LineHeight
+  };
+  return /*#__PURE__*/React.createElement(IOText, _extends({
+    ref: ref
+  }, H2Props), props.children);
 });
 //# sourceMappingURL=H2.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","IOVisualCostants","useIOExperimentalDesign","useTypographyFactory","h2FontSize","h2LineHeight","fontName","defaultColor","defaultWeight","legacyFont","legacyDefaultWeight","legacyH2FontSize","legacyH2LineHeight","H2","forwardRef","props","ref","isExperimental","allowFontScaling","maxFontSizeMultiplier","dynamicTypeRamp","font","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/H2.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAAkBC,gBAAgB,EAAEC,uBAAuB,QAAQ,YAAY;AAE/E,SAASC,oBAAoB,QAAQ,WAAW;AAUhD,OAAO,MAAMC,UAAU,GAAG,EAAE;AAC5B,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,MAAMC,QAAoB,GAAG,WAAW;AACxC,MAAMC,YAA2B,GAAG,OAAO;AAC3C,MAAMC,aAA4B,GAAG,SAAS;;AAE9C;AACA,MAAMC,UAAsB,GAAG,kBAAkB;AACjD,MAAMC,mBAAkC,GAAG,UAAU;AACrD,MAAMC,gBAAgB,GAAG,EAAE;AAC3B,MAAMC,kBAAkB,GAAG,EAAE;;AAE7B;AACA;AACA;AACA,OAAO,MAAMC,EAAE,gBAAGb,KAAK,CAACc,UAAU,CAAgB,CAACC,KAAK,EAAEC,GAAG,KAAK;EAChE,MAAM;IAAEC;EAAe,CAAC,GAAGf,uBAAuB,CAAC,CAAC;EAEpD,OAAOC,oBAAoB,CACzB;IACE,GAAGY,KAAK;IACRG,gBAAgB,EAAED,cAAc;IAChCE,qBAAqB,EAAElB,gBAAgB,CAACkB,qBAAqB;IAC7DC,eAAe,EAAE,QAAQ,CAAC;IAC1BZ,aAAa,EAAES,cAAc,GAAGT,aAAa,GAAGE,mBAAmB;IACnEH,YAAY;IACZc,IAAI,EAAEJ,cAAc,GAAGX,QAAQ,GAAGG,UAAU;IAC5Ca,SAAS,EAAE;MACTC,QAAQ,EAAEN,cAAc,GAAGb,UAAU,GAAGO,gBAAgB;MACxDa,UAAU,EAAEP,cAAc,GAAGZ,YAAY,GAAGO;IAC9C;EACF,CAAC,EACDI,GACF,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"names":["React","forwardRef","useIOExperimentalDesign","useIOTheme","IOText","defaultColor","h2FontSize","h2LineHeight","fontName","fontWeight","legacyH2FontSize","legacyH2LineHeight","legacyFontName","legacyFontWeight","H2","_ref","ref","color","customColor","props","theme","isExperimental","H2Props","dynamicTypeRamp","font","size","weight","lineHeight","createElement","_extends","children"],"sourceRoot":"../../../../src","sources":["components/typography/H2.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAkBC,UAAU,QAAQ,OAAO;AAEvD,SAAkBC,uBAAuB,EAAEC,UAAU,QAAQ,YAAY;AAEzE,SAASC,MAAM,QAA4C,UAAU;AAErE,MAAMC,YAA2B,GAAG,qBAAqB;AAEzD,OAAO,MAAMC,UAAsB,GAAG,EAAE;AACxC,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,MAAMC,QAAsB,GAAG,WAAW;AAC1C,MAAMC,UAAwB,GAAG,SAAS;;AAE1C;AACA,MAAMC,gBAA4B,GAAG,EAAE;AACvC,MAAMC,kBAAkB,GAAG,EAAE;AAC7B,MAAMC,cAA4B,GAAG,kBAAkB;AACvD,MAAMC,gBAA8B,GAAG,UAAU;;AAEjD;AACA;AACA;AACA,OAAO,MAAMC,EAAE,gBAAGb,UAAU,CAC1B,CAAAc,IAAA,EAAmCC,GAAwB,KAAK;EAAA,IAA/D;IAAEC,KAAK,EAAEC,WAAW;IAAE,GAAGC;EAAM,CAAC,GAAAJ,IAAA;EAC/B,MAAMK,KAAK,GAAGjB,UAAU,CAAC,CAAC;EAC1B,MAAM;IAAEkB;EAAe,CAAC,GAAGnB,uBAAuB,CAAC,CAAC;EAEpD,MAAMoB,OAAoB,GAAG;IAC3B,GAAGH,KAAK;IACRI,eAAe,EAAE,QAAQ;IAAE;IAC3BC,IAAI,EAAEH,cAAc,GAAGb,QAAQ,GAAGI,cAAc;IAChDa,IAAI,EAAEJ,cAAc,GAAGf,UAAU,GAAGI,gBAAgB;IACpDgB,MAAM,EAAEL,cAAc,GAAGZ,UAAU,GAAGI,gBAAgB;IACtDI,KAAK,EAAEC,WAAW,IAAIE,KAAK,CAACf,YAAY,CAAC;IACzCsB,UAAU,EAAEN,cAAc,GAAGd,YAAY,GAAGI;EAC9C,CAAC;EAED,oBACEX,KAAA,CAAA4B,aAAA,CAACxB,MAAM,EAAAyB,QAAA;IAACb,GAAG,EAAEA;EAAI,GAAKM,OAAO,GAC1BH,KAAK,CAACW,QACD,CAAC;AAEb,CACF,CAAC"}

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

@@ -1,36 +1,43 @@
-import React from "react";
-import { IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { useTypographyFactory } from "./Factory";
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { forwardRef } from "react";
+import { useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOText } from "./IOText";
+const defaultColor = "textHeading-default";
+
 /* Common typographic styles */
 export const h3FontSize = 22;
 export const h3LineHeight = 33;
 const fontName = "ReadexPro";
-const defaultColor = "black";
-const defaultWeight = "Regular";
+const fontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFontName = "TitilliumSansPro";
-const legacyDefaultColor = "bluegreyDark";
-const legacyDefaultWeight = "Semibold";
+const legacyFontWeight = "Semibold";
+
 /**
  * `H3` typographic style
  */
-export const H3 = /*#__PURE__*/React.forwardRef((props, ref) => {
+export const H3 = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    color: customColor,
+    ...props
+  } = _ref;
+  const theme = useIOTheme();
   const {
     isExperimental
   } = useIOExperimentalDesign();
-  return useTypographyFactory({
+  const H3Props = {
     ...props,
-    allowFontScaling: isExperimental,
-    maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-    dynamicTypeRamp: "title2" /* iOS only */,
-    defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
-    defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
+    dynamicTypeRamp: "title2",
+    // iOS only
     font: isExperimental ? fontName : legacyFontName,
-    fontStyle: {
-      fontSize: h3FontSize,
-      lineHeight: h3LineHeight
-    }
-  }, ref);
+    weight: isExperimental ? fontWeight : legacyFontWeight,
+    size: h3FontSize,
+    lineHeight: h3LineHeight,
+    color: customColor ?? theme[defaultColor]
+  };
+  return /*#__PURE__*/React.createElement(IOText, _extends({
+    ref: ref
+  }, H3Props), props.children);
 });
 //# sourceMappingURL=H3.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","IOVisualCostants","useIOExperimentalDesign","useTypographyFactory","h3FontSize","h3LineHeight","fontName","defaultColor","defaultWeight","legacyFontName","legacyDefaultColor","legacyDefaultWeight","H3","forwardRef","props","ref","isExperimental","allowFontScaling","maxFontSizeMultiplier","dynamicTypeRamp","font","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/H3.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAAkBC,gBAAgB,EAAEC,uBAAuB,QAAQ,YAAY;AAE/E,SAASC,oBAAoB,QAAQ,WAAW;AAUhD;AACA,OAAO,MAAMC,UAAU,GAAG,EAAE;AAC5B,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,MAAMC,QAAoB,GAAG,WAAW;AACxC,MAAMC,YAA2B,GAAG,OAAO;AAC3C,MAAMC,aAA4B,GAAG,SAAS;;AAE9C;AACA,MAAMC,cAA0B,GAAG,kBAAkB;AACrD,MAAMC,kBAAiC,GAAG,cAAc;AACxD,MAAMC,mBAAkC,GAAG,UAAU;AACrD;AACA;AACA;AACA,OAAO,MAAMC,EAAE,gBAAGZ,KAAK,CAACa,UAAU,CAAgB,CAACC,KAAK,EAAEC,GAAG,KAAK;EAChE,MAAM;IAAEC;EAAe,CAAC,GAAGd,uBAAuB,CAAC,CAAC;EAEpD,OAAOC,oBAAoB,CACzB;IACE,GAAGW,KAAK;IACRG,gBAAgB,EAAED,cAAc;IAChCE,qBAAqB,EAAEjB,gBAAgB,CAACiB,qBAAqB;IAC7DC,eAAe,EAAE,QAAQ,CAAC;IAC1BX,aAAa,EAAEQ,cAAc,GAAGR,aAAa,GAAGG,mBAAmB;IACnEJ,YAAY,EAAES,cAAc,GAAGT,YAAY,GAAGG,kBAAkB;IAChEU,IAAI,EAAEJ,cAAc,GAAGV,QAAQ,GAAGG,cAAc;IAChDY,SAAS,EAAE;MACTC,QAAQ,EAAElB,UAAU;MACpBmB,UAAU,EAAElB;IACd;EACF,CAAC,EACDU,GACF,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"names":["React","forwardRef","useIOExperimentalDesign","useIOTheme","IOText","defaultColor","h3FontSize","h3LineHeight","fontName","fontWeight","legacyFontName","legacyFontWeight","H3","_ref","ref","color","customColor","props","theme","isExperimental","H3Props","dynamicTypeRamp","font","weight","size","lineHeight","createElement","_extends","children"],"sourceRoot":"../../../../src","sources":["components/typography/H3.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAkBC,UAAU,QAAQ,OAAO;AAEvD,SAAkBC,uBAAuB,EAAEC,UAAU,QAAQ,YAAY;AAEzE,SAASC,MAAM,QAA4C,UAAU;AAErE,MAAMC,YAA2B,GAAG,qBAAqB;;AAEzD;AACA,OAAO,MAAMC,UAAsB,GAAG,EAAE;AACxC,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,MAAMC,QAAsB,GAAG,WAAW;AAC1C,MAAMC,UAAwB,GAAG,SAAS;;AAE1C;AACA,MAAMC,cAA4B,GAAG,kBAAkB;AACvD,MAAMC,gBAA8B,GAAG,UAAU;;AAEjD;AACA;AACA;AACA,OAAO,MAAMC,EAAE,gBAAGX,UAAU,CAC1B,CAAAY,IAAA,EAAmCC,GAAwB,KAAK;EAAA,IAA/D;IAAEC,KAAK,EAAEC,WAAW;IAAE,GAAGC;EAAM,CAAC,GAAAJ,IAAA;EAC/B,MAAMK,KAAK,GAAGf,UAAU,CAAC,CAAC;EAC1B,MAAM;IAAEgB;EAAe,CAAC,GAAGjB,uBAAuB,CAAC,CAAC;EAEpD,MAAMkB,OAAoB,GAAG;IAC3B,GAAGH,KAAK;IACRI,eAAe,EAAE,QAAQ;IAAE;IAC3BC,IAAI,EAAEH,cAAc,GAAGX,QAAQ,GAAGE,cAAc;IAChDa,MAAM,EAAEJ,cAAc,GAAGV,UAAU,GAAGE,gBAAgB;IACtDa,IAAI,EAAElB,UAAU;IAChBmB,UAAU,EAAElB,YAAY;IACxBQ,KAAK,EAAEC,WAAW,IAAIE,KAAK,CAACb,YAAY;EAC1C,CAAC;EAED,oBACEL,KAAA,CAAA0B,aAAA,CAACtB,MAAM,EAAAuB,QAAA;IAACb,GAAG,EAAEA;EAAI,GAAKM,OAAO,GAC1BH,KAAK,CAACW,QACD,CAAC;AAEb,CACF,CAAC"}

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

@@ -1,36 +1,41 @@
-import React from "react";
-import { IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { useTypographyFactory } from "./Factory";
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { forwardRef } from "react";
+import { useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOText } from "./IOText";
+const defaultColor = "textHeading-default";
 export const h4FontSize = 20;
 export const h4LineHeight = 24;
-const font = "ReadexPro";
-const defaultColor = "black";
-const defaultWeight = "Regular";
+const fontName = "ReadexPro";
+const fontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFontName = "TitilliumSansPro";
-const legacyDefaultColor = "bluegreyDark";
-const legacyDefaultWeight = "Semibold";
+const legacyFontWeight = "Semibold";
 
 /**
  * `H4` typographic style
  */
-export const H4 = /*#__PURE__*/React.forwardRef((props, ref) => {
+export const H4 = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    color: customColor,
+    ...props
+  } = _ref;
+  const theme = useIOTheme();
   const {
     isExperimental
   } = useIOExperimentalDesign();
-  return useTypographyFactory({
+  const H4Props = {
     ...props,
-    allowFontScaling: isExperimental,
-    maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-    dynamicTypeRamp: "title3" /* iOS only */,
-    defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
-    defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
-    font: isExperimental ? font : legacyFontName,
-    fontStyle: {
-      fontSize: h4FontSize,
-      lineHeight: h4LineHeight
-    }
-  }, ref);
+    dynamicTypeRamp: "title3",
+    // iOS only
+    font: isExperimental ? fontName : legacyFontName,
+    size: h4FontSize,
+    weight: isExperimental ? fontWeight : legacyFontWeight,
+    color: customColor ?? theme[defaultColor],
+    lineHeight: h4LineHeight
+  };
+  return /*#__PURE__*/React.createElement(IOText, _extends({
+    ref: ref
+  }, H4Props), props.children);
 });
 //# sourceMappingURL=H4.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","IOVisualCostants","useIOExperimentalDesign","useTypographyFactory","h4FontSize","h4LineHeight","font","defaultColor","defaultWeight","legacyFontName","legacyDefaultColor","legacyDefaultWeight","H4","forwardRef","props","ref","isExperimental","allowFontScaling","maxFontSizeMultiplier","dynamicTypeRamp","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/H4.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAAkBC,gBAAgB,EAAEC,uBAAuB,QAAQ,YAAY;AAE/E,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,kBAAkB;AACrD,MAAMC,kBAAiC,GAAG,cAAc;AACxD,MAAMC,mBAAkC,GAAG,UAAU;;AAErD;AACA;AACA;AACA,OAAO,MAAMC,EAAE,gBAAGZ,KAAK,CAACa,UAAU,CAAgB,CAACC,KAAK,EAAEC,GAAG,KAAK;EAChE,MAAM;IAAEC;EAAe,CAAC,GAAGd,uBAAuB,CAAC,CAAC;EACpD,OAAOC,oBAAoB,CACzB;IACE,GAAGW,KAAK;IACRG,gBAAgB,EAAED,cAAc;IAChCE,qBAAqB,EAAEjB,gBAAgB,CAACiB,qBAAqB;IAC7DC,eAAe,EAAE,QAAQ,CAAC;IAC1BX,aAAa,EAAEQ,cAAc,GAAGR,aAAa,GAAGG,mBAAmB;IACnEJ,YAAY,EAAES,cAAc,GAAGT,YAAY,GAAGG,kBAAkB;IAChEJ,IAAI,EAAEU,cAAc,GAAGV,IAAI,GAAGG,cAAc;IAC5CW,SAAS,EAAE;MACTC,QAAQ,EAAEjB,UAAU;MACpBkB,UAAU,EAAEjB;IACd;EACF,CAAC,EACDU,GACF,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"names":["React","forwardRef","useIOExperimentalDesign","useIOTheme","IOText","defaultColor","h4FontSize","h4LineHeight","fontName","fontWeight","legacyFontName","legacyFontWeight","H4","_ref","ref","color","customColor","props","theme","isExperimental","H4Props","dynamicTypeRamp","font","size","weight","lineHeight","createElement","_extends","children"],"sourceRoot":"../../../../src","sources":["components/typography/H4.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAkBC,UAAU,QAAQ,OAAO;AAEvD,SAAkBC,uBAAuB,EAAEC,UAAU,QAAQ,YAAY;AAEzE,SAASC,MAAM,QAA4C,UAAU;AAErE,MAAMC,YAA2B,GAAG,qBAAqB;AAEzD,OAAO,MAAMC,UAAsB,GAAG,EAAE;AACxC,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,MAAMC,QAAsB,GAAG,WAAW;AAC1C,MAAMC,UAAwB,GAAG,SAAS;;AAE1C;AACA,MAAMC,cAA4B,GAAG,kBAAkB;AACvD,MAAMC,gBAA8B,GAAG,UAAU;;AAEjD;AACA;AACA;AACA,OAAO,MAAMC,EAAE,gBAAGX,UAAU,CAC1B,CAAAY,IAAA,EAAmCC,GAAwB,KAAK;EAAA,IAA/D;IAAEC,KAAK,EAAEC,WAAW;IAAE,GAAGC;EAAM,CAAC,GAAAJ,IAAA;EAC/B,MAAMK,KAAK,GAAGf,UAAU,CAAC,CAAC;EAC1B,MAAM;IAAEgB;EAAe,CAAC,GAAGjB,uBAAuB,CAAC,CAAC;EAEpD,MAAMkB,OAAoB,GAAG;IAC3B,GAAGH,KAAK;IACRI,eAAe,EAAE,QAAQ;IAAE;IAC3BC,IAAI,EAAEH,cAAc,GAAGX,QAAQ,GAAGE,cAAc;IAChDa,IAAI,EAAEjB,UAAU;IAChBkB,MAAM,EAAEL,cAAc,GAAGV,UAAU,GAAGE,gBAAgB;IACtDI,KAAK,EAAEC,WAAW,IAAIE,KAAK,CAACb,YAAY,CAAC;IACzCoB,UAAU,EAAElB;EACd,CAAC;EAED,oBACEP,KAAA,CAAA0B,aAAA,CAACtB,MAAM,EAAAuB,QAAA;IAACb,GAAG,EAAEA;EAAI,GAAKM,OAAO,GAC1BH,KAAK,CAACW,QACD,CAAC;AAEb,CACF,CAAC"}

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

@@ -1,33 +1,36 @@
-import React from "react";
-import { IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { useTypographyFactory } from "./Factory";
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { forwardRef } from "react";
+import { useIOTheme } from "../../core";
+import { IOText } from "./IOText";
+const defaultColor = "textHeading-default";
 export const h5FontSize = 14;
 export const h5LineHeight = 16;
-const font = "TitilliumSansPro";
-const defaultColor = "black";
-const defaultWeight = "Semibold";
 
 /**
  * `H5` typographic style
  */
-export const H5 = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    isExperimental
-  } = useIOExperimentalDesign();
-  return useTypographyFactory({
+export const H5 = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    color: customColor,
+    ...props
+  } = _ref;
+  const theme = useIOTheme();
+  const H5Props = {
     ...props,
-    allowFontScaling: isExperimental,
-    maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-    dynamicTypeRamp: "subheadline" /* iOS only */,
-    defaultWeight,
-    defaultColor,
-    font,
-    fontStyle: {
-      fontSize: h5FontSize,
-      lineHeight: h5LineHeight,
+    dynamicTypeRamp: "subheadline",
+    // iOS only
+    font: "TitilliumSansPro",
+    weight: "Semibold",
+    size: h5FontSize,
+    lineHeight: h5LineHeight,
+    color: customColor ?? theme[defaultColor],
+    textStyle: {
       textTransform: "uppercase",
       letterSpacing: 0.5
     }
-  }, ref);
+  };
+  return /*#__PURE__*/React.createElement(IOText, _extends({
+    ref: ref
+  }, H5Props), props.children);
 });
 //# sourceMappingURL=H5.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","IOVisualCostants","useIOExperimentalDesign","useTypographyFactory","h5FontSize","h5LineHeight","font","defaultColor","defaultWeight","H5","forwardRef","props","ref","isExperimental","allowFontScaling","maxFontSizeMultiplier","dynamicTypeRamp","fontStyle","fontSize","lineHeight","textTransform","letterSpacing"],"sourceRoot":"../../../../src","sources":["components/typography/H5.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAAkBC,gBAAgB,EAAEC,uBAAuB,QAAQ,YAAY;AAE/E,SAASC,oBAAoB,QAAQ,WAAW;AAUhD,OAAO,MAAMC,UAAU,GAAG,EAAE;AAC5B,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,MAAMC,IAAgB,GAAG,kBAAkB;AAC3C,MAAMC,YAA2B,GAAG,OAAO;AAC3C,MAAMC,aAA4B,GAAG,UAAU;;AAE/C;AACA;AACA;AACA,OAAO,MAAMC,EAAE,gBAAGT,KAAK,CAACU,UAAU,CAAgB,CAACC,KAAK,EAAEC,GAAG,KAAK;EAChE,MAAM;IAAEC;EAAe,CAAC,GAAGX,uBAAuB,CAAC,CAAC;EAEpD,OAAOC,oBAAoB,CACzB;IACE,GAAGQ,KAAK;IACRG,gBAAgB,EAAED,cAAc;IAChCE,qBAAqB,EAAEd,gBAAgB,CAACc,qBAAqB;IAC7DC,eAAe,EAAE,aAAa,CAAC;IAC/BR,aAAa;IACbD,YAAY;IACZD,IAAI;IACJW,SAAS,EAAE;MACTC,QAAQ,EAAEd,UAAU;MACpBe,UAAU,EAAEd,YAAY;MACxBe,aAAa,EAAE,WAAW;MAC1BC,aAAa,EAAE;IACjB;EACF,CAAC,EACDT,GACF,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"names":["React","forwardRef","useIOTheme","IOText","defaultColor","h5FontSize","h5LineHeight","H5","_ref","ref","color","customColor","props","theme","H5Props","dynamicTypeRamp","font","weight","size","lineHeight","textStyle","textTransform","letterSpacing","createElement","_extends","children"],"sourceRoot":"../../../../src","sources":["components/typography/H5.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAkBC,UAAU,QAAQ,OAAO;AAEvD,SAAkBC,UAAU,QAAQ,YAAY;AAEhD,SAASC,MAAM,QAA4C,UAAU;AAErE,MAAMC,YAA2B,GAAG,qBAAqB;AAEzD,OAAO,MAAMC,UAAsB,GAAG,EAAE;AACxC,OAAO,MAAMC,YAAY,GAAG,EAAE;;AAE9B;AACA;AACA;AACA,OAAO,MAAMC,EAAE,gBAAGN,UAAU,CAC1B,CAAAO,IAAA,EAAmCC,GAAwB,KAAK;EAAA,IAA/D;IAAEC,KAAK,EAAEC,WAAW;IAAE,GAAGC;EAAM,CAAC,GAAAJ,IAAA;EAC/B,MAAMK,KAAK,GAAGX,UAAU,CAAC,CAAC;EAE1B,MAAMY,OAAoB,GAAG;IAC3B,GAAGF,KAAK;IACRG,eAAe,EAAE,aAAa;IAAE;IAChCC,IAAI,EAAE,kBAAkB;IACxBC,MAAM,EAAE,UAAU;IAClBC,IAAI,EAAEb,UAAU;IAChBc,UAAU,EAAEb,YAAY;IACxBI,KAAK,EAAEC,WAAW,IAAIE,KAAK,CAACT,YAAY,CAAC;IACzCgB,SAAS,EAAE;MACTC,aAAa,EAAE,WAAW;MAC1BC,aAAa,EAAE;IACjB;EACF,CAAC;EAED,oBACEtB,KAAA,CAAAuB,aAAA,CAACpB,MAAM,EAAAqB,QAAA;IAACf,GAAG,EAAEA;EAAI,GAAKK,OAAO,GAC1BF,KAAK,CAACa,QACD,CAAC;AAEb,CACF,CAAC"}

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

@@ -1,40 +1,43 @@
-import React from "react";
-import { IOThemeLight, IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { useTypographyFactory } from "./Factory";
-
-// when the weight is bold, only these color are allowed
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { forwardRef } from "react";
+import { useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOText } from "./IOText";
+const defaultColor = "textHeading-default";
 export const h6FontSize = 16;
 export const h6LineHeight = 24;
-const h6DefaultColor = IOThemeLight["textBody-default"];
-const h6DefaultWeight = "Regular";
 const fontName = "ReadexPro";
+const fontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFontSize = 18;
 const legacyLineHeight = 25;
 const legacyFontName = "TitilliumSansPro";
-const legacyDefaultWeight = "Semibold";
+const legacyFontWeight = "Semibold";
 
 /**
  * `H6` typographic style
  */
-export const H6 = /*#__PURE__*/React.forwardRef((props, ref) => {
+export const H6 = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    color: customColor,
+    ...props
+  } = _ref;
+  const theme = useIOTheme();
   const {
     isExperimental
   } = useIOExperimentalDesign();
-  return useTypographyFactory({
+  const H6Props = {
     ...props,
-    allowFontScaling: isExperimental,
-    maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-    dynamicTypeRamp: "headline" /* iOS only */,
-    defaultWeight: isExperimental ? h6DefaultWeight : legacyDefaultWeight,
-    defaultColor: h6DefaultColor,
+    dynamicTypeRamp: "headline",
+    // iOS only
     font: isExperimental ? fontName : legacyFontName,
-    fontStyle: {
-      fontSize: isExperimental ? h6FontSize : legacyFontSize,
-      lineHeight: isExperimental ? h6LineHeight : legacyLineHeight
-    }
-  }, ref);
+    size: isExperimental ? h6FontSize : legacyFontSize,
+    lineHeight: isExperimental ? h6LineHeight : legacyLineHeight,
+    weight: isExperimental ? fontWeight : legacyFontWeight,
+    color: customColor ?? theme[defaultColor]
+  };
+  return /*#__PURE__*/React.createElement(IOText, _extends({
+    ref: ref
+  }, H6Props), props.children);
 });
 //# sourceMappingURL=H6.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","IOThemeLight","IOVisualCostants","useIOExperimentalDesign","useTypographyFactory","h6FontSize","h6LineHeight","h6DefaultColor","h6DefaultWeight","fontName","legacyFontSize","legacyLineHeight","legacyFontName","legacyDefaultWeight","H6","forwardRef","props","ref","isExperimental","allowFontScaling","maxFontSizeMultiplier","dynamicTypeRamp","defaultWeight","defaultColor","font","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/H6.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAEEC,YAAY,EACZC,gBAAgB,EAChBC,uBAAuB,QAClB,YAAY;AAEnB,SAASC,oBAAoB,QAAQ,WAAW;;AAGhD;;AAQA,OAAO,MAAMC,UAAU,GAAG,EAAE;AAC5B,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,MAAMC,cAA6B,GAAGN,YAAY,CAAC,kBAAkB,CAAC;AACtE,MAAMO,eAA8B,GAAG,SAAS;AAChD,MAAMC,QAAoB,GAAG,WAAW;;AAExC;AACA,MAAMC,cAAc,GAAG,EAAE;AACzB,MAAMC,gBAAgB,GAAG,EAAE;AAC3B,MAAMC,cAA0B,GAAG,kBAAkB;AACrD,MAAMC,mBAAkC,GAAG,UAAU;;AAErD;AACA;AACA;AACA,OAAO,MAAMC,EAAE,gBAAGd,KAAK,CAACe,UAAU,CAAgB,CAACC,KAAK,EAAEC,GAAG,KAAK;EAChE,MAAM;IAAEC;EAAe,CAAC,GAAGf,uBAAuB,CAAC,CAAC;EAEpD,OAAOC,oBAAoB,CACzB;IACE,GAAGY,KAAK;IACRG,gBAAgB,EAAED,cAAc;IAChCE,qBAAqB,EAAElB,gBAAgB,CAACkB,qBAAqB;IAC7DC,eAAe,EAAE,UAAU,CAAC;IAC5BC,aAAa,EAAEJ,cAAc,GAAGV,eAAe,GAAGK,mBAAmB;IACrEU,YAAY,EAAEhB,cAAc;IAC5BiB,IAAI,EAAEN,cAAc,GAAGT,QAAQ,GAAGG,cAAc;IAChDa,SAAS,EAAE;MACTC,QAAQ,EAAER,cAAc,GAAGb,UAAU,GAAGK,cAAc;MACtDiB,UAAU,EAAET,cAAc,GAAGZ,YAAY,GAAGK;IAC9C;EACF,CAAC,EACDM,GACF,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"names":["React","forwardRef","useIOExperimentalDesign","useIOTheme","IOText","defaultColor","h6FontSize","h6LineHeight","fontName","fontWeight","legacyFontSize","legacyLineHeight","legacyFontName","legacyFontWeight","H6","_ref","ref","color","customColor","props","theme","isExperimental","H6Props","dynamicTypeRamp","font","size","lineHeight","weight","createElement","_extends","children"],"sourceRoot":"../../../../src","sources":["components/typography/H6.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAkBC,UAAU,QAAQ,OAAO;AAEvD,SAAkBC,uBAAuB,EAAEC,UAAU,QAAQ,YAAY;AAEzE,SAASC,MAAM,QAA4C,UAAU;AAErE,MAAMC,YAA2B,GAAG,qBAAqB;AAEzD,OAAO,MAAMC,UAAsB,GAAG,EAAE;AACxC,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,MAAMC,QAAsB,GAAG,WAAW;AAC1C,MAAMC,UAAwB,GAAG,SAAS;;AAE1C;AACA,MAAMC,cAA0B,GAAG,EAAE;AACrC,MAAMC,gBAAgB,GAAG,EAAE;AAC3B,MAAMC,cAA4B,GAAG,kBAAkB;AACvD,MAAMC,gBAA8B,GAAG,UAAU;;AAEjD;AACA;AACA;AACA,OAAO,MAAMC,EAAE,gBAAGb,UAAU,CAC1B,CAAAc,IAAA,EAAmCC,GAAwB,KAAK;EAAA,IAA/D;IAAEC,KAAK,EAAEC,WAAW;IAAE,GAAGC;EAAM,CAAC,GAAAJ,IAAA;EAC/B,MAAMK,KAAK,GAAGjB,UAAU,CAAC,CAAC;EAC1B,MAAM;IAAEkB;EAAe,CAAC,GAAGnB,uBAAuB,CAAC,CAAC;EAEpD,MAAMoB,OAAoB,GAAG;IAC3B,GAAGH,KAAK;IACRI,eAAe,EAAE,UAAU;IAAE;IAC7BC,IAAI,EAAEH,cAAc,GAAGb,QAAQ,GAAGI,cAAc;IAChDa,IAAI,EAAEJ,cAAc,GAAGf,UAAU,GAAGI,cAAc;IAClDgB,UAAU,EAAEL,cAAc,GAAGd,YAAY,GAAGI,gBAAgB;IAC5DgB,MAAM,EAAEN,cAAc,GAAGZ,UAAU,GAAGI,gBAAgB;IACtDI,KAAK,EAAEC,WAAW,IAAIE,KAAK,CAACf,YAAY;EAC1C,CAAC;EAED,oBACEL,KAAA,CAAA4B,aAAA,CAACxB,MAAM,EAAAyB,QAAA;IAACb,GAAG,EAAEA;EAAI,GAAKM,OAAO,GAC1BH,KAAK,CAACW,QACD,CAAC;AAEb,CACF,CAAC"}

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

@@ -1,34 +1,41 @@
-import React from "react";
-import { useIOExperimentalDesign } from "../../core";
-import { useTypographyFactory } from "./Factory";
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { forwardRef } from "react";
+import { useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOText } from "./IOText";
+const defaultColor = "textHeading-default";
 export const heroFontSize = 32;
 export const heroLineHeight = 48;
 const fontName = "ReadexPro";
-const defaultColor = "black";
-const defaultWeight = "Regular";
+const fontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFont = "TitilliumSansPro";
-const legacyWeight = "Semibold";
 const legacyHeroFontSize = 35;
 const legacyHeroLineHeight = 49;
+const legacyFontName = "TitilliumSansPro";
+const legacyFontWeight = "Semibold";
 
 /**
  * `Hero` typographic style
  */
-export const Hero = /*#__PURE__*/React.forwardRef((props, ref) => {
+export const Hero = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    color: customColor,
+    ...props
+  } = _ref;
+  const theme = useIOTheme();
   const {
     isExperimental
   } = useIOExperimentalDesign();
-  return useTypographyFactory({
+  const HeroProps = {
     ...props,
-    defaultWeight: isExperimental ? defaultWeight : legacyWeight,
-    defaultColor,
-    font: isExperimental ? fontName : legacyFont,
-    fontStyle: {
-      fontSize: isExperimental ? heroFontSize : legacyHeroFontSize,
-      lineHeight: isExperimental ? heroLineHeight : legacyHeroLineHeight
-    }
-  }, ref);
+    font: isExperimental ? fontName : legacyFontName,
+    weight: isExperimental ? fontWeight : legacyFontWeight,
+    size: isExperimental ? heroFontSize : legacyHeroFontSize,
+    lineHeight: isExperimental ? heroLineHeight : legacyHeroLineHeight,
+    color: customColor ?? theme[defaultColor]
+  };
+  return /*#__PURE__*/React.createElement(IOText, _extends({
+    ref: ref
+  }, HeroProps), props.children);
 });
 //# sourceMappingURL=Hero.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useIOExperimentalDesign","useTypographyFactory","heroFontSize","heroLineHeight","fontName","defaultColor","defaultWeight","legacyFont","legacyWeight","legacyHeroFontSize","legacyHeroLineHeight","Hero","forwardRef","props","ref","isExperimental","font","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/Hero.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,uBAAuB,QAAiB,YAAY;AAE7D,SAASC,oBAAoB,QAAQ,WAAW;AAUhD,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,OAAO,MAAMC,cAAc,GAAG,EAAE;AAChC,MAAMC,QAAoB,GAAG,WAAW;AACxC,MAAMC,YAA2B,GAAG,OAAO;AAC3C,MAAMC,aAA4B,GAAG,SAAS;;AAE9C;AACA,MAAMC,UAAsB,GAAG,kBAAkB;AACjD,MAAMC,YAA2B,GAAG,UAAU;AAC9C,MAAMC,kBAAkB,GAAG,EAAE;AAC7B,MAAMC,oBAAoB,GAAG,EAAE;;AAE/B;AACA;AACA;AACA,OAAO,MAAMC,IAAI,gBAAGZ,KAAK,CAACa,UAAU,CAAkB,CAACC,KAAK,EAAEC,GAAG,KAAK;EACpE,MAAM;IAAEC;EAAe,CAAC,GAAGf,uBAAuB,CAAC,CAAC;EAEpD,OAAOC,oBAAoB,CACzB;IACE,GAAGY,KAAK;IACRP,aAAa,EAAES,cAAc,GAAGT,aAAa,GAAGE,YAAY;IAC5DH,YAAY;IACZW,IAAI,EAAED,cAAc,GAAGX,QAAQ,GAAGG,UAAU;IAC5CU,SAAS,EAAE;MACTC,QAAQ,EAAEH,cAAc,GAAGb,YAAY,GAAGO,kBAAkB;MAC5DU,UAAU,EAAEJ,cAAc,GAAGZ,cAAc,GAAGO;IAChD;EACF,CAAC,EACDI,GACF,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"names":["React","forwardRef","useIOExperimentalDesign","useIOTheme","IOText","defaultColor","heroFontSize","heroLineHeight","fontName","fontWeight","legacyHeroFontSize","legacyHeroLineHeight","legacyFontName","legacyFontWeight","Hero","_ref","ref","color","customColor","props","theme","isExperimental","HeroProps","font","weight","size","lineHeight","createElement","_extends","children"],"sourceRoot":"../../../../src","sources":["components/typography/Hero.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAkBC,UAAU,QAAQ,OAAO;AAEvD,SAAkBC,uBAAuB,EAAEC,UAAU,QAAQ,YAAY;AAEzE,SAASC,MAAM,QAA4C,UAAU;AAErE,MAAMC,YAA2B,GAAG,qBAAqB;AAEzD,OAAO,MAAMC,YAAwB,GAAG,EAAE;AAC1C,OAAO,MAAMC,cAAc,GAAG,EAAE;AAChC,MAAMC,QAAsB,GAAG,WAAW;AAC1C,MAAMC,UAAwB,GAAG,SAAS;;AAE1C;AACA,MAAMC,kBAA8B,GAAG,EAAE;AACzC,MAAMC,oBAAoB,GAAG,EAAE;AAC/B,MAAMC,cAA4B,GAAG,kBAAkB;AACvD,MAAMC,gBAA8B,GAAG,UAAU;;AAEjD;AACA;AACA;AACA,OAAO,MAAMC,IAAI,gBAAGb,UAAU,CAC5B,CAAAc,IAAA,EAAmCC,GAAwB,KAAK;EAAA,IAA/D;IAAEC,KAAK,EAAEC,WAAW;IAAE,GAAGC;EAAM,CAAC,GAAAJ,IAAA;EAC/B,MAAMK,KAAK,GAAGjB,UAAU,CAAC,CAAC;EAC1B,MAAM;IAAEkB;EAAe,CAAC,GAAGnB,uBAAuB,CAAC,CAAC;EAEpD,MAAMoB,SAAsB,GAAG;IAC7B,GAAGH,KAAK;IACRI,IAAI,EAAEF,cAAc,GAAGb,QAAQ,GAAGI,cAAc;IAChDY,MAAM,EAAEH,cAAc,GAAGZ,UAAU,GAAGI,gBAAgB;IACtDY,IAAI,EAAEJ,cAAc,GAAGf,YAAY,GAAGI,kBAAkB;IACxDgB,UAAU,EAAEL,cAAc,GAAGd,cAAc,GAAGI,oBAAoB;IAClEM,KAAK,EAAEC,WAAW,IAAIE,KAAK,CAACf,YAAY;EAC1C,CAAC;EAED,oBACEL,KAAA,CAAA2B,aAAA,CAACvB,MAAM,EAAAwB,QAAA;IAACZ,GAAG,EAAEA;EAAI,GAAKM,SAAS,GAC5BH,KAAK,CAACU,QACD,CAAC;AAEb,CACF,CAAC"}

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

@@ -0,0 +1,96 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { forwardRef, useMemo } from "react";
+import { Text } from "react-native";
+import { IOColors, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { useBoldTextEnabled } from "../../utils/accessibility";
+import { makeFontStyleObject } from "../../utils/fonts";
+
+/**
+ * We exclude all of the following props when we define a new
+ * typographic style in which all of these visual attributes
+ * are already defined.
+ */
+
+/**
+ * The specific properties needed to calculate the font style using {@link makeFontStyleObject} (these information
+ * cannot be included in the default StyleProp<TextStyle>
+ */
+
+/**
+ * Extend `TypographicStyleProps` with extra props for styles that
+ * can be used as links
+ */
+
+/**
+ * Decorate the function {@link makeFontStyleObject} with the additional color calculation.
+ * @param color A value key from {@link IOColors}, transformed here in {@link ColorValue}
+ * @param args the args of the function {@link makeFontStyleObject}
+ */
+const calculateTextStyle = function (color) {
+  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    args[_key - 1] = arguments[_key];
+  }
+  return {
+    ...makeFontStyleObject(...args),
+    color: IOColors[color]
+  };
+};
+
+/**
+ * `IOText` is the core Typography component used to render a text.
+ * It accepts all the default text style `StyleProp<TextStyle>` (excluding the ones already applied) in addition with {@link IOTextBaseProps}
+ * used to calculate at runtime the platform-dependent styles.
+ * @param props
+ * @constructor
+ */
+export const IOText = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    color,
+    size,
+    font,
+    lineHeight,
+    weight,
+    fontStyle,
+    textStyle,
+    style,
+    children,
+    ...props
+  } = _ref;
+  const theme = useIOTheme();
+  const boldEnabled = useBoldTextEnabled();
+  const {
+    isExperimental
+  } = useIOExperimentalDesign();
+  const computedStyleObj = useMemo(() => calculateTextStyle(color ?? theme["textBody-default"], size, font, lineHeight, weight, fontStyle, boldEnabled), [color, theme, size, font, lineHeight, weight, fontStyle, boldEnabled]);
+
+  /* In some cases, for example when we use color transitions with
+  `reanimated` we need to manage chromatic values as `ColorValue`
+  or `string` (not `IOColors`). So we keep a way to override
+  the the `color' attribute without giving the ability to
+  override all other all other typographic attributes
+  through the `style' prop. */
+  const fontStyleObj = style !== null && style !== void 0 && style.color ? [{
+    ...computedStyleObj,
+    color: style === null || style === void 0 ? void 0 : style.color
+  }] : computedStyleObj;
+
+  /* Some typographic styles like `H5` have certain `TextStyle` properties
+   like `textTransform` or `letterSpacing` that we want to apply to the text.
+   We use the `textStyle` prop to pass these properties to the `IOText`
+   component and preserve the ability to define the `style` prop as well.
+   The `style` prop is the last one to be applied, so we can properly
+   override the `color` attribute.
+   */
+  const styleObj = style ? [textStyle ?? {}, fontStyleObj ?? {}, style] : [textStyle ?? {}, fontStyleObj ?? {}];
+
+  /* Accessible typography based on the `fontScale` parameter */
+  const accessibleFontSizeProps = {
+    allowFontScaling: isExperimental,
+    maxFontSizeMultiplier: 1.25
+  };
+  return /*#__PURE__*/React.createElement(Text, _extends({
+    ref: ref,
+    style: styleObj
+  }, props, accessibleFontSizeProps), children);
+});
+//# sourceMappingURL=IOText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","forwardRef","useMemo","Text","IOColors","useIOExperimentalDesign","useIOTheme","useBoldTextEnabled","makeFontStyleObject","calculateTextStyle","color","_len","arguments","length","args","Array","_key","IOText","_ref","ref","size","font","lineHeight","weight","fontStyle","textStyle","style","children","props","theme","boldEnabled","isExperimental","computedStyleObj","fontStyleObj","styleObj","accessibleFontSizeProps","allowFontScaling","maxFontSizeMultiplier","createElement","_extends"],"sourceRoot":"../../../../src","sources":["components/typography/IOText.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAoBC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClE,SAGEC,IAAI,QAGC,cAAc;AACrB,SAASC,QAAQ,EAAEC,uBAAuB,EAAEC,UAAU,QAAQ,YAAY;AAC1E,SAASC,kBAAkB,QAAQ,2BAA2B;AAC9D,SAIEC,mBAAmB,QACd,mBAAmB;;AAE1B;AACA;AACA;AACA;AACA;;AAaA;AACA;AACA;AACA;;AAmBA;AACA;AACA;AACA;;AASA;AACA;AACA;AACA;AACA;AACA,MAAMC,kBAAkB,GAAG,SAAAA,CACzBC,KAAe;EAAA,SAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EACZC,IAAI,OAAAC,KAAA,CAAAJ,IAAA,OAAAA,IAAA,WAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;IAAJF,IAAI,CAAAE,IAAA,QAAAJ,SAAA,CAAAI,IAAA;EAAA;EAAA,OACH;IACJ,GAAGR,mBAAmB,CAAC,GAAGM,IAAI,CAAC;IAC/BJ,KAAK,EAAEN,QAAQ,CAACM,KAAK;EACvB,CAAC;AAAA,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMO,MAAM,gBAAGhB,UAAU,CAC9B,CAAAiB,IAAA,EAaEC,GAAG,KACA;EAAA,IAbH;IACET,KAAK;IACLU,IAAI;IACJC,IAAI;IACJC,UAAU;IACVC,MAAM;IACNC,SAAS;IACTC,SAAS;IACTC,KAAK;IACLC,QAAQ;IACR,GAAGC;EACL,CAAC,GAAAV,IAAA;EAGD,MAAMW,KAAK,GAAGvB,UAAU,CAAC,CAAC;EAC1B,MAAMwB,WAAW,GAAGvB,kBAAkB,CAAC,CAAC;EAExC,MAAM;IAAEwB;EAAe,CAAC,GAAG1B,uBAAuB,CAAC,CAAC;EAEpD,MAAM2B,gBAAgB,GAAG9B,OAAO,CAC9B,MACEO,kBAAkB,CAChBC,KAAK,IAAImB,KAAK,CAAC,kBAAkB,CAAC,EAClCT,IAAI,EACJC,IAAI,EACJC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTM,WACF,CAAC,EACH,CAACpB,KAAK,EAAEmB,KAAK,EAAET,IAAI,EAAEC,IAAI,EAAEC,UAAU,EAAEC,MAAM,EAAEC,SAAS,EAAEM,WAAW,CACvE,CAAC;;EAED;AACJ;AACA;AACA;AACA;AACA;EACI,MAAMG,YAAY,GAAGP,KAAK,aAALA,KAAK,eAALA,KAAK,CAAEhB,KAAK,GAC7B,CAAC;IAAE,GAAGsB,gBAAgB;IAAEtB,KAAK,EAAEgB,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEhB;EAAM,CAAC,CAAC,GAC9CsB,gBAAgB;;EAEpB;AACJ;AACA;AACA;AACA;AACA;AACA;EACI,MAAME,QAAQ,GAAGR,KAAK,GAClB,CAACD,SAAS,IAAI,CAAC,CAAC,EAAEQ,YAAY,IAAI,CAAC,CAAC,EAAEP,KAAK,CAAC,GAC5C,CAACD,SAAS,IAAI,CAAC,CAAC,EAAEQ,YAAY,IAAI,CAAC,CAAC,CAAC;;EAEzC;EACA,MAAME,uBAAoD,GAAG;IAC3DC,gBAAgB,EAAEL,cAAc;IAChCM,qBAAqB,EAAE;EACzB,CAAC;EAED,oBACErC,KAAA,CAAAsC,aAAA,CAACnC,IAAI,EAAAoC,QAAA;IAACpB,GAAG,EAAEA,GAAI;IAACO,KAAK,EAAEQ;EAAS,GAAKN,KAAK,EAAMO,uBAAuB,GACpER,QACG,CAAC;AAEX,CACF,CAAC"}