@pagopa/io-app-design-system 3.0.1 → 4.0.0

package/lib/module/components/tooltip/styles.js

@@ -0,0 +1,43 @@
+import { StyleSheet } from 'react-native';
+import { IOColors } from '../../core';
+export const tooltipStyles = StyleSheet.create({
+  overlay: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    backgroundColor: IOColors["grey-850"],
+    opacity: 0.6,
+    zIndex: 997
+  },
+  childrenContainer: {
+    position: "absolute",
+    zIndex: 1000
+  },
+  tooltipContainer: {
+    position: "absolute",
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    backgroundColor: IOColors.white,
+    borderRadius: 8,
+    zIndex: 2000,
+    overflow: "visible"
+  },
+  arrowContainer: {
+    position: "absolute",
+    display: 'flex',
+    zIndex: 3000
+  },
+  closeIcon: {
+    position: 'absolute',
+    right: 8,
+    top: 9 // It's been used `9` instead of `8` to fix accessibility focus order. In this way title is read before close icon.
+  }
+});
+
+export const getChildrenPosition = childrenCoords => ({
+  top: childrenCoords.y,
+  left: childrenCoords.x,
+  width: childrenCoords.width,
+  height: childrenCoords.height
+});
+//# sourceMappingURL=styles.js.map

package/lib/module/components/tooltip/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","IOColors","tooltipStyles","create","overlay","position","width","height","backgroundColor","opacity","zIndex","childrenContainer","tooltipContainer","paddingHorizontal","paddingVertical","white","borderRadius","overflow","arrowContainer","display","closeIcon","right","top","getChildrenPosition","childrenCoords","y","left","x"],"sourceRoot":"../../../../src","sources":["components/tooltip/styles.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,QAAQ,QAAQ,YAAY;AAGrC,OAAO,MAAMC,aAAa,GAAGF,UAAU,CAACG,MAAM,CAAC;EAC7CC,OAAO,EAAE;IACPC,QAAQ,EAAE,UAAU;IACpBC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,eAAe,EAAEP,QAAQ,CAAC,UAAU,CAAC;IACrCQ,OAAO,EAAE,GAAG;IACZC,MAAM,EAAE;EACV,CAAC;EACDC,iBAAiB,EAAE;IACjBN,QAAQ,EAAE,UAAU;IACpBK,MAAM,EAAE;EACV,CAAC;EACDE,gBAAgB,EAAE;IAChBP,QAAQ,EAAE,UAAU;IACpBQ,iBAAiB,EAAE,EAAE;IACrBC,eAAe,EAAE,EAAE;IACnBN,eAAe,EAAEP,QAAQ,CAACc,KAAK;IAC/BC,YAAY,EAAE,CAAC;IACfN,MAAM,EAAE,IAAI;IACZO,QAAQ,EAAE;EACZ,CAAC;EACDC,cAAc,EAAE;IACdb,QAAQ,EAAE,UAAU;IACpBc,OAAO,EAAE,MAAM;IACfT,MAAM,EAAE;EACV,CAAC;EACDU,SAAS,EAAE;IACTf,QAAQ,EAAE,UAAU;IACpBgB,KAAK,EAAE,CAAC;IACRC,GAAG,EAAE,CAAC,CAAC;EACT;AACF,CAAC,CAAC;;AAEF,OAAO,MAAMC,mBAAmB,GAAIC,cAA8B,KAAM;EACtEF,GAAG,EAAEE,cAAc,CAACC,CAAC;EACrBC,IAAI,EAAEF,cAAc,CAACG,CAAC;EACtBrB,KAAK,EAAEkB,cAAc,CAAClB,KAAK;EAC3BC,MAAM,EAAEiB,cAAc,CAACjB;AACzB,CAAC,CAAC"}

package/lib/module/components/tooltip/utils/index.js

@@ -0,0 +1,163 @@
+import { IOVisualCostants } from '../../../core';
+export const ARROW_WIDTH = 24;
+export const ARROW_HEIGHT = 14;
+export const EMPTY_SPACE = 8;
+const DEFAULT_INSETS = {
+  top: 0,
+  bottom: 0,
+  left: IOVisualCostants.appMarginDefault,
+  right: IOVisualCostants.appMarginDefault
+};
+
+/**
+ * @param displayInsets custom display insets
+ * @returns An `object` based on `DEFAULT_INSETS` and `displayInsets`
+ */
+export const getDisplayInsets = displayInsets => ({
+  ...DEFAULT_INSETS,
+  ...displayInsets
+});
+
+/**
+ * 
+ * @param placement The `Tooltip` placement
+ * @returns The `Arrow` box `width` and `height` based on `placement` value
+ */
+export const getArrowBoxByPlacement = placement => {
+  switch (placement) {
+    case 'left':
+    case 'right':
+      return {
+        width: ARROW_HEIGHT,
+        height: ARROW_WIDTH
+      };
+    default:
+      return {
+        height: ARROW_HEIGHT,
+        width: ARROW_WIDTH
+      };
+  }
+};
+
+/**
+ * A utility function to calculate the `Tooltip` coordinates and dimensions
+ * @param placement The `Tooltip` placement in relation of its children
+ * @param childrenCoords The measures in screen of the `Tooltip` children
+ * @param displayInsets The active display insets
+ * @param screenDimensions The dimensions of the device screen
+ * @returns The `Tooltip` coordinates
+ */
+export const getTooltipCoords = (placement, childrenCoords, displayInsets, screenDimensions) => {
+  const {
+    width: screenWidth,
+    height: screenHeight
+  } = screenDimensions;
+  switch (placement) {
+    case "top":
+      return {
+        bottom: screenHeight - childrenCoords.y + ARROW_HEIGHT + EMPTY_SPACE,
+        left: displayInsets.left,
+        width: screenWidth - displayInsets.left - displayInsets.right
+      };
+    case "bottom":
+      return {
+        top: childrenCoords.y + childrenCoords.height + ARROW_HEIGHT + EMPTY_SPACE,
+        left: displayInsets.left,
+        width: screenWidth - displayInsets.left - displayInsets.right
+      };
+    case "left":
+      return {
+        top: childrenCoords.y,
+        left: displayInsets.left,
+        width: screenWidth - (screenWidth - childrenCoords.x) - ARROW_HEIGHT - displayInsets.left - EMPTY_SPACE
+      };
+    case "right":
+      const elementSize = childrenCoords.width + childrenCoords.x + ARROW_HEIGHT + EMPTY_SPACE;
+      return {
+        top: childrenCoords.y,
+        left: elementSize,
+        width: screenWidth - (elementSize + displayInsets.right)
+      };
+    // TODO: provide a default center position in case of Tooltip without children
+    default:
+      return {};
+  }
+};
+
+/**
+ * A utility function to calculate the `Tooltip`'s `Arrow` coordinates
+ * @param placement The `Arrow` placement in relation of the `Tooltip` children
+ * @param childrenCoords The measures in screen of the `Tooltip` children
+ * @param screenDimensions The active display insets
+ * @returns The `Tooltip`'s Arrow coordinates
+ */
+export const getArrowCoords = (placement, childrenCoords, screenDimensions) => {
+  const {
+    width: screenWidth,
+    height: screenHeight
+  } = screenDimensions;
+  switch (placement) {
+    case "top":
+      return {
+        bottom: screenHeight - childrenCoords.y + EMPTY_SPACE,
+        left: childrenCoords.x + childrenCoords.width / 2 - ARROW_WIDTH / 2
+      };
+    case "bottom":
+      return {
+        top: childrenCoords.y + childrenCoords.height + EMPTY_SPACE,
+        left: childrenCoords.x + childrenCoords.width / 2 - ARROW_WIDTH / 2
+      };
+    case "left":
+      return {
+        top: childrenCoords.y,
+        left: screenWidth - (screenWidth - childrenCoords.x) - ARROW_HEIGHT - EMPTY_SPACE - 1 // FIXME -> This `-1` is necessary because of the Svg size doesn't match the box size
+      };
+
+    case "right":
+      return {
+        top: childrenCoords.y,
+        left: childrenCoords.width + childrenCoords.x + EMPTY_SPACE
+      };
+    default:
+      // TODO: provide a default center position in case of Tooltip without children
+      return {};
+  }
+};
+
+/**
+ * A utility function to calculate the `Tooltip` vertical alignment
+ * @param placement The `Tooltip` placement in relation of its children
+ * @param childrenHeight The `Tooltip`'s children height
+ * @param tooltipHeight The `Tooltip`'s height
+ * @returns If placement is `left` or `right` it returns the vertical tranlsation to align the `Tooltip` center with its `children` center, 
+ * otherwise `null` is returned
+ */
+export const getTooltipVerticalAlignment = (placement, childrenHeight, tooltipHeight) => {
+  if ((placement === "left" || placement === "right") && tooltipHeight) {
+    return {
+      transform: [{
+        translateY: -tooltipHeight / 2 + childrenHeight / 2
+      }]
+    };
+  }
+  return null;
+};
+
+/**
+ * A utility function to calculate the `Arrow` vertical alignment
+ * @param placement The `Tooltip` placement in relation of its children
+ * @param childrenHeight The `Tooltip`'s children height
+*/
+export const getArrowVerticalAlignment = (placement, childrenHeight) => {
+  if (placement === "left" || placement === "right") {
+    return {
+      transform: [{
+        translateY: -ARROW_WIDTH / 2 + childrenHeight / 2
+      }]
+    };
+  }
+  return null;
+};
+export const isDefined = v => v !== undefined;
+export const isNotZero = v => v !== 0;
+//# sourceMappingURL=index.js.map

package/lib/module/components/tooltip/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["IOVisualCostants","ARROW_WIDTH","ARROW_HEIGHT","EMPTY_SPACE","DEFAULT_INSETS","top","bottom","left","appMarginDefault","right","getDisplayInsets","displayInsets","getArrowBoxByPlacement","placement","width","height","getTooltipCoords","childrenCoords","screenDimensions","screenWidth","screenHeight","y","x","elementSize","getArrowCoords","getTooltipVerticalAlignment","childrenHeight","tooltipHeight","transform","translateY","getArrowVerticalAlignment","isDefined","v","undefined","isNotZero"],"sourceRoot":"../../../../../src","sources":["components/tooltip/utils/index.ts"],"mappings":"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"}

package/lib/module/components/tooltip/utils/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/lib/module/components/tooltip/utils/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["components/tooltip/utils/types.ts"],"mappings":""}

package/lib/module/components/typography/{LabelSmall.js → BodySmall.js}

@@ -3,14 +3,12 @@ import React, { forwardRef } from "react";
 import { useIOExperimentalDesign, useIOTheme } from "../../core";
 import { IOText } from "./IOText";
 const fontName = "Titillio";
-const fontWeight = "Semibold";
 const legacyFontName = "TitilliumSansPro";
-const legacyFontWeight = "Semibold";
 
 /**
- * `LabelSmall` typographic style
+ * `BodySmall` typographic style
  */
-export const LabelSmall = /*#__PURE__*/forwardRef(({
+export const BodySmall = /*#__PURE__*/forwardRef(({
   weight: customWeight,
   color: customColor,
   asLink,
@@ -21,11 +19,11 @@ export const LabelSmall = /*#__PURE__*/forwardRef(({
     isExperimental
   } = useIOExperimentalDesign();
   const defaultColor = asLink ? theme["interactiveElem-default"] : theme["textBody-tertiary"];
-  const LabelSmallProps = {
+  const BodySmallProps = {
     ...props,
     dynamicTypeRamp: "footnote" /* iOS only */,
     font: isExperimental ? fontName : legacyFontName,
-    weight: customWeight ? customWeight : isExperimental ? fontWeight : legacyFontWeight,
+    weight: customWeight ?? "Regular",
     size: 14,
     lineHeight: 21,
     color: customColor ?? defaultColor,
@@ -38,6 +36,6 @@ export const LabelSmall = /*#__PURE__*/forwardRef(({
   };
   return /*#__PURE__*/React.createElement(IOText, _extends({
     ref: ref
-  }, LabelSmallProps), props.children);
+  }, BodySmallProps), props.children);
 });
-//# sourceMappingURL=LabelSmall.js.map
+//# sourceMappingURL=BodySmall.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","forwardRef","useIOExperimentalDesign","useIOTheme","IOText","fontName","legacyFontName","BodySmall","weight","customWeight","color","customColor","asLink","props","ref","theme","isExperimental","defaultColor","BodySmallProps","dynamicTypeRamp","font","size","lineHeight","accessibilityRole","textStyle","textDecorationLine","createElement","_extends","children"],"sourceRoot":"../../../../src","sources":["components/typography/BodySmall.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAkBC,UAAU,QAAQ,OAAO;AAEvD,SAASC,uBAAuB,EAAEC,UAAU,QAAQ,YAAY;AAEhE,SACEC,MAAM,QAID,UAAU;AAMjB,MAAMC,QAAsB,GAAG,UAAU;AACzC,MAAMC,cAA4B,GAAG,kBAAkB;;AAEvD;AACA;AACA;AACA,OAAO,MAAMC,SAAS,gBAAGN,UAAU,CACjC,CACE;EAAEO,MAAM,EAAEC,YAAY;EAAEC,KAAK,EAAEC,WAAW;EAAEC,MAAM;EAAE,GAAGC;AAAM,CAAC,EAC9DC,GAAwB,KACrB;EACH,MAAMC,KAAK,GAAGZ,UAAU,CAAC,CAAC;EAC1B,MAAM;IAAEa;EAAe,CAAC,GAAGd,uBAAuB,CAAC,CAAC;EAEpD,MAAMe,YAAY,GAAGL,MAAM,GACvBG,KAAK,CAAC,yBAAyB,CAAC,GAChCA,KAAK,CAAC,mBAAmB,CAAC;EAE9B,MAAMG,cAA2B,GAAG;IAClC,GAAGL,KAAK;IACRM,eAAe,EAAE,UAAU,CAAC;IAC5BC,IAAI,EAAEJ,cAAc,GAAGX,QAAQ,GAAGC,cAAc;IAChDE,MAAM,EAAEC,YAAY,IAAI,SAAS;IACjCY,IAAI,EAAE,EAAE;IACRC,UAAU,EAAE,EAAE;IACdZ,KAAK,EAAEC,WAAW,IAAIM,YAAY;IAClC,IAAIL,MAAM,GACN;MACEW,iBAAiB,EAAE,MAAM;MACzBC,SAAS,EAAE;QAAEC,kBAAkB,EAAE;MAAY;IAC/C,CAAC,GACD,CAAC,CAAC;EACR,CAAC;EAED,oBACEzB,KAAA,CAAA0B,aAAA,CAACtB,MAAM,EAAAuB,QAAA;IAACb,GAAG,EAAEA;EAAI,GAAKI,cAAc,GACjCL,KAAK,CAACe,QACD,CAAC;AAEb,CACF,CAAC"}

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

@@ -7,11 +7,9 @@ export const buttonTextFontSize = 16;
 `AnimatedText` for color transition through Reanimated */
 const defaultColor = "white";
 const fontName = "Titillio";
-const fontWeight = "Semibold";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFontName = "TitilliumSansPro";
-const legacyFontWeight = "Bold";
 
 /**
  * `ButtonText` typographic style
@@ -26,7 +24,7 @@ export const ButtonText = /*#__PURE__*/forwardRef(({
   const ButtonTextProps = {
     ...props,
     font: isExperimental ? fontName : legacyFontName,
-    weight: isExperimental ? fontWeight : legacyFontWeight,
+    weight: "Semibold",
     size: buttonTextFontSize,
     lineHeight: 20,
     color: customColor ?? defaultColor

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

@@ -1 +1 @@
-{"version":3,"names":["React","forwardRef","useIOExperimentalDesign","IOText","buttonTextFontSize","defaultColor","fontName","fontWeight","legacyFontName","legacyFontWeight","ButtonText","color","customColor","props","ref","isExperimental","ButtonTextProps","font","weight","size","lineHeight","createElement","_extends","children"],"sourceRoot":"../../../../src","sources":["components/typography/ButtonText.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAkBC,UAAU,QAAQ,OAAO;AAEvD,SAASC,uBAAuB,QAAQ,YAAY;AAGpD,SAASC,MAAM,QAA4C,UAAU;AAErE,OAAO,MAAMC,kBAA8B,GAAG,EAAE;AAChD;AACA;AACA,MAAMC,YAAsB,GAAG,OAAO;AACtC,MAAMC,QAAsB,GAAG,UAAU;AACzC,MAAMC,UAAwB,GAAG,UAAU;;AAE3C;AACA,MAAMC,cAA4B,GAAG,kBAAkB;AACvD,MAAMC,gBAA8B,GAAG,MAAM;;AAE7C;AACA;AACA;AACA,OAAO,MAAMC,UAAU,gBAAGT,UAAU,CAClC,CAAC;EAAEU,KAAK,EAAEC,WAAW;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAwB,KAAK;EAC9D,MAAM;IAAEC;EAAe,CAAC,GAAGb,uBAAuB,CAAC,CAAC;EAEpD,MAAMc,eAA4B,GAAG;IACnC,GAAGH,KAAK;IACRI,IAAI,EAAEF,cAAc,GAAGT,QAAQ,GAAGE,cAAc;IAChDU,MAAM,EAAEH,cAAc,GAAGR,UAAU,GAAGE,gBAAgB;IACtDU,IAAI,EAAEf,kBAAkB;IACxBgB,UAAU,EAAE,EAAE;IACdT,KAAK,EAAEC,WAAW,IAAIP;EACxB,CAAC;EAED,oBACEL,KAAA,CAAAqB,aAAA,CAAClB,MAAM,EAAAmB,QAAA;IAACR,GAAG,EAAEA;EAAI,GAAKE,eAAe,GAClCH,KAAK,CAACU,QACD,CAAC;AAEb,CACF,CAAC"}
+{"version":3,"names":["React","forwardRef","useIOExperimentalDesign","IOText","buttonTextFontSize","defaultColor","fontName","legacyFontName","ButtonText","color","customColor","props","ref","isExperimental","ButtonTextProps","font","weight","size","lineHeight","createElement","_extends","children"],"sourceRoot":"../../../../src","sources":["components/typography/ButtonText.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAkBC,UAAU,QAAQ,OAAO;AAEvD,SAASC,uBAAuB,QAAQ,YAAY;AAGpD,SAASC,MAAM,QAA4C,UAAU;AAErE,OAAO,MAAMC,kBAA8B,GAAG,EAAE;AAChD;AACA;AACA,MAAMC,YAAsB,GAAG,OAAO;AACtC,MAAMC,QAAsB,GAAG,UAAU;;AAEzC;AACA,MAAMC,cAA4B,GAAG,kBAAkB;;AAEvD;AACA;AACA;AACA,OAAO,MAAMC,UAAU,gBAAGP,UAAU,CAClC,CAAC;EAAEQ,KAAK,EAAEC,WAAW;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAwB,KAAK;EAC9D,MAAM;IAAEC;EAAe,CAAC,GAAGX,uBAAuB,CAAC,CAAC;EAEpD,MAAMY,eAA4B,GAAG;IACnC,GAAGH,KAAK;IACRI,IAAI,EAAEF,cAAc,GAAGP,QAAQ,GAAGC,cAAc;IAChDS,MAAM,EAAE,UAAU;IAClBC,IAAI,EAAEb,kBAAkB;IACxBc,UAAU,EAAE,EAAE;IACdT,KAAK,EAAEC,WAAW,IAAIL;EACxB,CAAC;EAED,oBACEL,KAAA,CAAAmB,aAAA,CAAChB,MAAM,EAAAiB,QAAA;IAACR,GAAG,EAAEA;EAAI,GAAKE,eAAe,GAClCH,KAAK,CAACU,QACD,CAAC;AAEb,CACF,CAAC"}

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

@@ -2,22 +2,19 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 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 = "Titillio";
-const fontWeight = "Semibold";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFontName = "TitilliumSansPro";
-const legacyFontWeight = "Semibold";
 
 /**
  * `H3` typographic style
  */
 export const H3 = /*#__PURE__*/forwardRef(({
+  weight: customWeight,
   color: customColor,
   ...props
 }, ref) => {
@@ -30,10 +27,10 @@ export const H3 = /*#__PURE__*/forwardRef(({
     dynamicTypeRamp: "title2",
     // iOS only
     font: isExperimental ? fontName : legacyFontName,
-    weight: isExperimental ? fontWeight : legacyFontWeight,
+    weight: customWeight ?? "Semibold",
     size: h3FontSize,
     lineHeight: h3LineHeight,
-    color: customColor ?? theme[defaultColor]
+    color: customColor ?? theme["textHeading-default"]
   };
   return /*#__PURE__*/React.createElement(IOText, _extends({
     ref: ref

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

@@ -1 +1 @@
-{"version":3,"names":["React","forwardRef","useIOExperimentalDesign","useIOTheme","IOText","defaultColor","h3FontSize","h3LineHeight","fontName","fontWeight","legacyFontName","legacyFontWeight","H3","color","customColor","props","ref","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,UAAU;AACzC,MAAMC,UAAwB,GAAG,UAAU;;AAE3C;AACA,MAAMC,cAA4B,GAAG,kBAAkB;AACvD,MAAMC,gBAA8B,GAAG,UAAU;;AAEjD;AACA;AACA;AACA,OAAO,MAAMC,EAAE,gBAAGX,UAAU,CAC1B,CAAC;EAAEY,KAAK,EAAEC,WAAW;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAwB,KAAK;EAC9D,MAAMC,KAAK,GAAGd,UAAU,CAAC,CAAC;EAC1B,MAAM;IAAEe;EAAe,CAAC,GAAGhB,uBAAuB,CAAC,CAAC;EAEpD,MAAMiB,OAAoB,GAAG;IAC3B,GAAGJ,KAAK;IACRK,eAAe,EAAE,QAAQ;IAAE;IAC3BC,IAAI,EAAEH,cAAc,GAAGV,QAAQ,GAAGE,cAAc;IAChDY,MAAM,EAAEJ,cAAc,GAAGT,UAAU,GAAGE,gBAAgB;IACtDY,IAAI,EAAEjB,UAAU;IAChBkB,UAAU,EAAEjB,YAAY;IACxBM,KAAK,EAAEC,WAAW,IAAIG,KAAK,CAACZ,YAAY;EAC1C,CAAC;EAED,oBACEL,KAAA,CAAAyB,aAAA,CAACrB,MAAM,EAAAsB,QAAA;IAACV,GAAG,EAAEA;EAAI,GAAKG,OAAO,GAC1BJ,KAAK,CAACY,QACD,CAAC;AAEb,CACF,CAAC"}
+{"version":3,"names":["React","forwardRef","useIOExperimentalDesign","useIOTheme","IOText","h3FontSize","h3LineHeight","fontName","legacyFontName","H3","weight","customWeight","color","customColor","props","ref","theme","isExperimental","H3Props","dynamicTypeRamp","font","size","lineHeight","createElement","_extends","children"],"sourceRoot":"../../../../src","sources":["components/typography/H3.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAkBC,UAAU,QAAQ,OAAO;AAEvD,SAASC,uBAAuB,EAAEC,UAAU,QAAQ,YAAY;AAEhE,SAASC,MAAM,QAA4C,UAAU;AAMrE;AACA,OAAO,MAAMC,UAAsB,GAAG,EAAE;AACxC,OAAO,MAAMC,YAAY,GAAG,EAAE;AAC9B,MAAMC,QAAsB,GAAG,UAAU;;AAEzC;AACA,MAAMC,cAA4B,GAAG,kBAAkB;;AAEvD;AACA;AACA;AACA,OAAO,MAAMC,EAAE,gBAAGR,UAAU,CAC1B,CACE;EAAES,MAAM,EAAEC,YAAY;EAAEC,KAAK,EAAEC,WAAW;EAAE,GAAGC;AAAM,CAAC,EACtDC,GAAwB,KACrB;EACH,MAAMC,KAAK,GAAGb,UAAU,CAAC,CAAC;EAC1B,MAAM;IAAEc;EAAe,CAAC,GAAGf,uBAAuB,CAAC,CAAC;EAEpD,MAAMgB,OAAoB,GAAG;IAC3B,GAAGJ,KAAK;IACRK,eAAe,EAAE,QAAQ;IAAE;IAC3BC,IAAI,EAAEH,cAAc,GAAGV,QAAQ,GAAGC,cAAc;IAChDE,MAAM,EAAEC,YAAY,IAAI,UAAU;IAClCU,IAAI,EAAEhB,UAAU;IAChBiB,UAAU,EAAEhB,YAAY;IACxBM,KAAK,EAAEC,WAAW,IAAIG,KAAK,CAAC,qBAAqB;EACnD,CAAC;EAED,oBACEhB,KAAA,CAAAuB,aAAA,CAACnB,MAAM,EAAAoB,QAAA;IAACT,GAAG,EAAEA;EAAI,GAAKG,OAAO,GAC1BJ,KAAK,CAACW,QACD,CAAC;AAEb,CACF,CAAC"}

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

@@ -3,14 +3,13 @@ import React, { forwardRef } from "react";
 import { useIOExperimentalDesign, useIOTheme } from "../../core";
 import { IOText } from "./IOText";
 const defaultColor = "textHeading-default";
-export const h6FontSize = 18;
+export const h6FontSize = 16;
 export const h6LineHeight = 24;
 const fontName = "Titillio";
-const fontWeight = "Semibold";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyFontSize = 18;
 const legacyFontName = "TitilliumSansPro";
-const legacyFontWeight = "Semibold";
 
 /**
  * `H6` typographic style
@@ -28,9 +27,9 @@ export const H6 = /*#__PURE__*/forwardRef(({
     dynamicTypeRamp: "headline",
     // iOS only
     font: isExperimental ? fontName : legacyFontName,
-    size: h6FontSize,
+    size: isExperimental ? h6FontSize : legacyFontSize,
     lineHeight: h6LineHeight,
-    weight: isExperimental ? fontWeight : legacyFontWeight,
+    weight: "Semibold",
     color: customColor ?? theme[defaultColor]
   };
   return /*#__PURE__*/React.createElement(IOText, _extends({

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

@@ -1 +1 @@
-{"version":3,"names":["React","forwardRef","useIOExperimentalDesign","useIOTheme","IOText","defaultColor","h6FontSize","h6LineHeight","fontName","fontWeight","legacyFontName","legacyFontWeight","H6","color","customColor","props","ref","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,UAAU;AACzC,MAAMC,UAAwB,GAAG,UAAU;;AAE3C;AACA,MAAMC,cAA4B,GAAG,kBAAkB;AACvD,MAAMC,gBAA8B,GAAG,UAAU;;AAEjD;AACA;AACA;AACA,OAAO,MAAMC,EAAE,gBAAGX,UAAU,CAC1B,CAAC;EAAEY,KAAK,EAAEC,WAAW;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAwB,KAAK;EAC9D,MAAMC,KAAK,GAAGd,UAAU,CAAC,CAAC;EAC1B,MAAM;IAAEe;EAAe,CAAC,GAAGhB,uBAAuB,CAAC,CAAC;EAEpD,MAAMiB,OAAoB,GAAG;IAC3B,GAAGJ,KAAK;IACRK,eAAe,EAAE,UAAU;IAAE;IAC7BC,IAAI,EAAEH,cAAc,GAAGV,QAAQ,GAAGE,cAAc;IAChDY,IAAI,EAAEhB,UAAU;IAChBiB,UAAU,EAAEhB,YAAY;IACxBiB,MAAM,EAAEN,cAAc,GAAGT,UAAU,GAAGE,gBAAgB;IACtDE,KAAK,EAAEC,WAAW,IAAIG,KAAK,CAACZ,YAAY;EAC1C,CAAC;EAED,oBACEL,KAAA,CAAAyB,aAAA,CAACrB,MAAM,EAAAsB,QAAA;IAACV,GAAG,EAAEA;EAAI,GAAKG,OAAO,GAC1BJ,KAAK,CAACY,QACD,CAAC;AAEb,CACF,CAAC"}
+{"version":3,"names":["React","forwardRef","useIOExperimentalDesign","useIOTheme","IOText","defaultColor","h6FontSize","h6LineHeight","fontName","legacyFontSize","legacyFontName","H6","color","customColor","props","ref","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,UAAU;;AAEzC;AACA,MAAMC,cAA0B,GAAG,EAAE;AACrC,MAAMC,cAA4B,GAAG,kBAAkB;;AAEvD;AACA;AACA;AACA,OAAO,MAAMC,EAAE,gBAAGV,UAAU,CAC1B,CAAC;EAAEW,KAAK,EAAEC,WAAW;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAwB,KAAK;EAC9D,MAAMC,KAAK,GAAGb,UAAU,CAAC,CAAC;EAC1B,MAAM;IAAEc;EAAe,CAAC,GAAGf,uBAAuB,CAAC,CAAC;EAEpD,MAAMgB,OAAoB,GAAG;IAC3B,GAAGJ,KAAK;IACRK,eAAe,EAAE,UAAU;IAAE;IAC7BC,IAAI,EAAEH,cAAc,GAAGT,QAAQ,GAAGE,cAAc;IAChDW,IAAI,EAAEJ,cAAc,GAAGX,UAAU,GAAGG,cAAc;IAClDa,UAAU,EAAEf,YAAY;IACxBgB,MAAM,EAAE,UAAU;IAClBX,KAAK,EAAEC,WAAW,IAAIG,KAAK,CAACX,YAAY;EAC1C,CAAC;EAED,oBACEL,KAAA,CAAAwB,aAAA,CAACpB,MAAM,EAAAqB,QAAA;IAACV,GAAG,EAAEA;EAAI,GAAKG,OAAO,GAC1BJ,KAAK,CAACY,QACD,CAAC;AAEb,CACF,CAAC"}