@pagopa/io-app-design-system 1.42.0 → 2.0.0-1

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"}

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

@@ -1,34 +1,35 @@
-import React from "react";
-import { IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { useTypographyFactory } from "./Factory";
-import { fontSizeMapping, lineHeightMapping } from "./common";
-const font = "TitilliumSansPro";
-const labelDefaultWeight = "Bold";
-const labelDefaultcolor = "black";
-
+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";
 /**
- * `Label` typographic style
+ * `LabelSmall` typographic style
  */
-export const Label = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+export const Label = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
-    fontSize,
+    weight: customWeight,
+    color: customColor,
+    asLink,
     ...props
   } = _ref;
-  const {
-    isExperimental
-  } = useIOExperimentalDesign();
-  return useTypographyFactory({
+  const theme = useIOTheme();
+  const defaultColor = asLink ? theme["interactiveElem-default"] : theme["textBody-tertiary"];
+  const LabelProps = {
     ...props,
-    allowFontScaling: isExperimental,
-    maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-    dynamicTypeRamp: "footnote" /* iOS only */,
-    defaultWeight: labelDefaultWeight,
-    defaultColor: labelDefaultcolor,
-    font,
-    fontStyle: {
-      fontSize: fontSize ? fontSizeMapping[fontSize] : fontSizeMapping.regular,
-      lineHeight: fontSize ? lineHeightMapping[fontSize] : lineHeightMapping.regular
-    }
-  }, ref);
+    font: "TitilliumSansPro",
+    weight: customWeight ?? "Semibold",
+    size: 16,
+    lineHeight: 24,
+    color: customColor ?? defaultColor,
+    ...(asLink ? {
+      accessibilityRole: "link",
+      textStyle: {
+        textDecorationLine: "underline"
+      }
+    } : {})
+  };
+  return /*#__PURE__*/React.createElement(IOText, _extends({
+    ref: ref
+  }, LabelProps), props.children);
 });
 //# sourceMappingURL=Label.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","IOVisualCostants","useIOExperimentalDesign","useTypographyFactory","fontSizeMapping","lineHeightMapping","font","labelDefaultWeight","labelDefaultcolor","Label","forwardRef","_ref","ref","fontSize","props","isExperimental","allowFontScaling","maxFontSizeMultiplier","dynamicTypeRamp","defaultWeight","defaultColor","fontStyle","regular","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/Label.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAGEC,gBAAgB,EAChBC,uBAAuB,QAClB,YAAY;AAEnB,SAASC,oBAAoB,QAAQ,WAAW;AAChD,SAIEC,eAAe,EACfC,iBAAiB,QACZ,UAAU;AASjB,MAAMC,IAAgB,GAAG,kBAAkB;AAC3C,MAAMC,kBAAkB,GAAG,MAAM;AACjC,MAAMC,iBAAiB,GAAG,OAAO;;AAEjC;AACA;AACA;AACA,OAAO,MAAMC,KAAK,gBAAGT,KAAK,CAACU,UAAU,CACnC,CAAAC,IAAA,EAAyBC,GAAG,KAAK;EAAA,IAAhC;IAAEC,QAAQ;IAAE,GAAGC;EAAM,CAAC,GAAAH,IAAA;EACrB,MAAM;IAAEI;EAAe,CAAC,GAAGb,uBAAuB,CAAC,CAAC;EAEpD,OAAOC,oBAAoB,CACzB;IACE,GAAGW,KAAK;IACRE,gBAAgB,EAAED,cAAc;IAChCE,qBAAqB,EAAEhB,gBAAgB,CAACgB,qBAAqB;IAC7DC,eAAe,EAAE,UAAU,CAAC;IAC5BC,aAAa,EAAEZ,kBAAkB;IACjCa,YAAY,EAAEZ,iBAAiB;IAC/BF,IAAI;IACJe,SAAS,EAAE;MACTR,QAAQ,EAAEA,QAAQ,GACdT,eAAe,CAACS,QAAQ,CAAC,GACzBT,eAAe,CAACkB,OAAO;MAC3BC,UAAU,EAAEV,QAAQ,GAChBR,iBAAiB,CAACQ,QAAQ,CAAC,GAC3BR,iBAAiB,CAACiB;IACxB;EACF,CAAC,EACDV,GACF,CAAC;AACH,CACF,CAAC"}
+{"version":3,"names":["React","forwardRef","useIOTheme","IOText","Label","_ref","ref","weight","customWeight","color","customColor","asLink","props","theme","defaultColor","LabelProps","font","size","lineHeight","accessibilityRole","textStyle","textDecorationLine","createElement","_extends","children"],"sourceRoot":"../../../../src","sources":["components/typography/Label.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAkBC,UAAU,QAAQ,OAAO;AAEvD,SAASC,UAAU,QAAQ,YAAY;AAEvC,SACEC,MAAM,QAID,UAAU;AAMjB;AACA;AACA;AACA,OAAO,MAAMC,KAAK,gBAAGH,UAAU,CAC7B,CAAAI,IAAA,EAEEC,GAAwB,KACrB;EAAA,IAFH;IAAEC,MAAM,EAAEC,YAAY;IAAEC,KAAK,EAAEC,WAAW;IAAEC,MAAM;IAAE,GAAGC;EAAM,CAAC,GAAAP,IAAA;EAG9D,MAAMQ,KAAK,GAAGX,UAAU,CAAC,CAAC;EAE1B,MAAMY,YAAY,GAAGH,MAAM,GACvBE,KAAK,CAAC,yBAAyB,CAAC,GAChCA,KAAK,CAAC,mBAAmB,CAAC;EAE9B,MAAME,UAAuB,GAAG;IAC9B,GAAGH,KAAK;IACRI,IAAI,EAAE,kBAAkB;IACxBT,MAAM,EAAEC,YAAY,IAAI,UAAU;IAClCS,IAAI,EAAE,EAAE;IACRC,UAAU,EAAE,EAAE;IACdT,KAAK,EAAEC,WAAW,IAAII,YAAY;IAClC,IAAIH,MAAM,GACN;MACEQ,iBAAiB,EAAE,MAAM;MACzBC,SAAS,EAAE;QAAEC,kBAAkB,EAAE;MAAY;IAC/C,CAAC,GACD,CAAC,CAAC;EACR,CAAC;EAED,oBACErB,KAAA,CAAAsB,aAAA,CAACnB,MAAM,EAAAoB,QAAA;IAACjB,GAAG,EAAEA;EAAI,GAAKS,UAAU,GAC7BH,KAAK,CAACY,QACD,CAAC;AAEb,CACF,CAAC"}

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

@@ -0,0 +1,36 @@
+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";
+/**
+ * `LabelMini` typographic style
+ */
+export const LabelMini = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    weight: customWeight,
+    color: customColor,
+    asLink,
+    ...props
+  } = _ref;
+  const theme = useIOTheme();
+  const defaultColor = asLink ? theme["interactiveElem-default"] : theme["textBody-tertiary"];
+  const LabelMiniProps = {
+    ...props,
+    dynamicTypeRamp: "footnote" /* iOS only */,
+    font: "TitilliumSansPro",
+    weight: customWeight ?? "Semibold",
+    size: 12,
+    lineHeight: 18,
+    color: customColor ?? defaultColor,
+    ...(asLink ? {
+      accessibilityRole: "link",
+      textStyle: {
+        textDecorationLine: "underline"
+      }
+    } : {})
+  };
+  return /*#__PURE__*/React.createElement(IOText, _extends({
+    ref: ref
+  }, LabelMiniProps), props.children);
+});
+//# sourceMappingURL=LabelMini.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","forwardRef","useIOTheme","IOText","LabelMini","_ref","ref","weight","customWeight","color","customColor","asLink","props","theme","defaultColor","LabelMiniProps","dynamicTypeRamp","font","size","lineHeight","accessibilityRole","textStyle","textDecorationLine","createElement","_extends","children"],"sourceRoot":"../../../../src","sources":["components/typography/LabelMini.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAkBC,UAAU,QAAQ,OAAO;AAEvD,SAASC,UAAU,QAAQ,YAAY;AAEvC,SACEC,MAAM,QAID,UAAU;AAMjB;AACA;AACA;AACA,OAAO,MAAMC,SAAS,gBAAGH,UAAU,CACjC,CAAAI,IAAA,EAEEC,GAAwB,KACrB;EAAA,IAFH;IAAEC,MAAM,EAAEC,YAAY;IAAEC,KAAK,EAAEC,WAAW;IAAEC,MAAM;IAAE,GAAGC;EAAM,CAAC,GAAAP,IAAA;EAG9D,MAAMQ,KAAK,GAAGX,UAAU,CAAC,CAAC;EAE1B,MAAMY,YAAY,GAAGH,MAAM,GACvBE,KAAK,CAAC,yBAAyB,CAAC,GAChCA,KAAK,CAAC,mBAAmB,CAAC;EAE9B,MAAME,cAA2B,GAAG;IAClC,GAAGH,KAAK;IACRI,eAAe,EAAE,UAAU,CAAC;IAC5BC,IAAI,EAAE,kBAAkB;IACxBV,MAAM,EAAEC,YAAY,IAAI,UAAU;IAClCU,IAAI,EAAE,EAAE;IACRC,UAAU,EAAE,EAAE;IACdV,KAAK,EAAEC,WAAW,IAAII,YAAY;IAClC,IAAIH,MAAM,GACN;MACES,iBAAiB,EAAE,MAAM;MACzBC,SAAS,EAAE;QAAEC,kBAAkB,EAAE;MAAY;IAC/C,CAAC,GACD,CAAC,CAAC;EACR,CAAC;EAED,oBACEtB,KAAA,CAAAuB,aAAA,CAACpB,MAAM,EAAAqB,QAAA;IAAClB,GAAG,EAAEA;EAAI,GAAKS,cAAc,GACjCH,KAAK,CAACa,QACD,CAAC;AAEb,CACF,CAAC"}

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

@@ -1,37 +1,36 @@
-import React from "react";
-import { IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { useTypographyFactory } from "./Factory";
-const font = "TitilliumSansPro";
-const fontSizeMapping = {
-  regular: 14,
-  small: 12
-};
-const lineHeightMapping = {
-  regular: 21,
-  small: 18
-};
-const labelDefaultWeight = "Bold";
-const labelDefaultcolor = "blue";
-
+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";
 /**
  * `LabelSmall` typographic style
  */
-export const LabelSmall = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    isExperimental
-  } = useIOExperimentalDesign();
-  return useTypographyFactory({
+export const LabelSmall = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    weight: customWeight,
+    color: customColor,
+    asLink,
+    ...props
+  } = _ref;
+  const theme = useIOTheme();
+  const defaultColor = asLink ? theme["interactiveElem-default"] : theme["textBody-tertiary"];
+  const LabelSmallProps = {
     ...props,
-    allowFontScaling: isExperimental,
-    maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
     dynamicTypeRamp: "footnote" /* iOS only */,
-    defaultWeight: labelDefaultWeight,
-    defaultColor: labelDefaultcolor,
-    font,
-    fontStyle: {
-      fontSize: props.fontSize ? fontSizeMapping[props.fontSize] : fontSizeMapping.regular,
-      lineHeight: props.fontSize ? lineHeightMapping[props.fontSize] : lineHeightMapping.regular
-    }
-  }, ref);
+    font: "TitilliumSansPro",
+    weight: customWeight ?? "Semibold",
+    size: 14,
+    lineHeight: 21,
+    color: customColor ?? defaultColor,
+    ...(asLink ? {
+      accessibilityRole: "link",
+      textStyle: {
+        textDecorationLine: "underline"
+      }
+    } : {})
+  };
+  return /*#__PURE__*/React.createElement(IOText, _extends({
+    ref: ref
+  }, LabelSmallProps), props.children);
 });
 //# sourceMappingURL=LabelSmall.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","IOVisualCostants","useIOExperimentalDesign","useTypographyFactory","font","fontSizeMapping","regular","small","lineHeightMapping","labelDefaultWeight","labelDefaultcolor","LabelSmall","forwardRef","props","ref","isExperimental","allowFontScaling","maxFontSizeMultiplier","dynamicTypeRamp","defaultWeight","defaultColor","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/LabelSmall.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAGEC,gBAAgB,EAChBC,uBAAuB,QAClB,YAAY;AAEnB,SAASC,oBAAoB,QAAQ,WAAW;AAwBhD,MAAMC,IAAgB,GAAG,kBAAkB;AAC3C,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,gBAAGX,KAAK,CAACY,UAAU,CACxC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACd,MAAM;IAAEC;EAAe,CAAC,GAAGb,uBAAuB,CAAC,CAAC;EAEpD,OAAOC,oBAAoB,CACzB;IACE,GAAGU,KAAK;IACRG,gBAAgB,EAAED,cAAc;IAChCE,qBAAqB,EAAEhB,gBAAgB,CAACgB,qBAAqB;IAC7DC,eAAe,EAAE,UAAU,CAAC;IAC5BC,aAAa,EAAEV,kBAAkB;IACjCW,YAAY,EAAEV,iBAAiB;IAC/BN,IAAI;IACJiB,SAAS,EAAE;MACTC,QAAQ,EAAET,KAAK,CAACS,QAAQ,GACpBjB,eAAe,CAACQ,KAAK,CAACS,QAAQ,CAAC,GAC/BjB,eAAe,CAACC,OAAO;MAC3BiB,UAAU,EAAEV,KAAK,CAACS,QAAQ,GACtBd,iBAAiB,CAACK,KAAK,CAACS,QAAQ,CAAC,GACjCd,iBAAiB,CAACF;IACxB;EACF,CAAC,EACDQ,GACF,CAAC;AACH,CACF,CAAC"}
+{"version":3,"names":["React","forwardRef","useIOTheme","IOText","LabelSmall","_ref","ref","weight","customWeight","color","customColor","asLink","props","theme","defaultColor","LabelSmallProps","dynamicTypeRamp","font","size","lineHeight","accessibilityRole","textStyle","textDecorationLine","createElement","_extends","children"],"sourceRoot":"../../../../src","sources":["components/typography/LabelSmall.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAkBC,UAAU,QAAQ,OAAO;AAEvD,SAASC,UAAU,QAAQ,YAAY;AAEvC,SACEC,MAAM,QAID,UAAU;AAMjB;AACA;AACA;AACA,OAAO,MAAMC,UAAU,gBAAGH,UAAU,CAClC,CAAAI,IAAA,EAEEC,GAAwB,KACrB;EAAA,IAFH;IAAEC,MAAM,EAAEC,YAAY;IAAEC,KAAK,EAAEC,WAAW;IAAEC,MAAM;IAAE,GAAGC;EAAM,CAAC,GAAAP,IAAA;EAG9D,MAAMQ,KAAK,GAAGX,UAAU,CAAC,CAAC;EAE1B,MAAMY,YAAY,GAAGH,MAAM,GACvBE,KAAK,CAAC,yBAAyB,CAAC,GAChCA,KAAK,CAAC,mBAAmB,CAAC;EAE9B,MAAME,eAA4B,GAAG;IACnC,GAAGH,KAAK;IACRI,eAAe,EAAE,UAAU,CAAC;IAC5BC,IAAI,EAAE,kBAAkB;IACxBV,MAAM,EAAEC,YAAY,IAAI,UAAU;IAClCU,IAAI,EAAE,EAAE;IACRC,UAAU,EAAE,EAAE;IACdV,KAAK,EAAEC,WAAW,IAAII,YAAY;IAClC,IAAIH,MAAM,GACN;MACES,iBAAiB,EAAE,MAAM;MACzBC,SAAS,EAAE;QAAEC,kBAAkB,EAAE;MAAY;IAC/C,CAAC,GACD,CAAC,CAAC;EACR,CAAC;EAED,oBACEtB,KAAA,CAAAuB,aAAA,CAACpB,MAAM,EAAAqB,QAAA;IAAClB,GAAG,EAAEA;EAAI,GAAKS,eAAe,GAClCH,KAAK,CAACa,QACD,CAAC;AAEb,CACF,CAAC"}

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

@@ -1,36 +1,40 @@
-import React from "react";
-import { IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { useTypographyFactory } from "./Factory";
-const labelFontSize = 14;
-const labelLineHeight = 21;
+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 fontSize = 14;
+const lineHeight = 21;
 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 legacyLabelFontSize = 16;
+const legacyFontSize = 16;
 const legacyFontName = "TitilliumSansPro";
-const legacyDefaultWeight = "Semibold";
+const legacyFontWeight = "Semibold";
 
 /**
  * `LabelSmallAlt` typographic style. It's referenced as `LabelSmallReadex` in the design projects.
  */
-export const LabelSmallAlt = /*#__PURE__*/React.forwardRef((props, ref) => {
+export const LabelSmallAlt = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    color: customColor,
+    ...props
+  } = _ref;
+  const theme = useIOTheme();
   const {
     isExperimental
   } = useIOExperimentalDesign();
-  return useTypographyFactory({
+  const LabelSmallAltProps = {
     ...props,
-    allowFontScaling: isExperimental,
-    maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
     dynamicTypeRamp: "footnote" /* iOS only */,
-    defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
-    defaultColor,
     font: isExperimental ? fontName : legacyFontName,
-    fontStyle: {
-      fontSize: isExperimental ? labelFontSize : legacyLabelFontSize,
-      lineHeight: labelLineHeight
-    }
-  }, ref);
+    weight: isExperimental ? fontWeight : legacyFontWeight,
+    size: isExperimental ? fontSize : legacyFontSize,
+    lineHeight,
+    color: customColor ?? theme["textBody-tertiary"]
+  };
+  return /*#__PURE__*/React.createElement(IOText, _extends({
+    ref: ref
+  }, LabelSmallAltProps), props.children);
 });
 //# sourceMappingURL=LabelSmallAlt.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","IOVisualCostants","useIOExperimentalDesign","useTypographyFactory","labelFontSize","labelLineHeight","fontName","defaultColor","defaultWeight","legacyLabelFontSize","legacyFontName","legacyDefaultWeight","LabelSmallAlt","forwardRef","props","ref","isExperimental","allowFontScaling","maxFontSizeMultiplier","dynamicTypeRamp","font","fontStyle","fontSize","lineHeight"],"sourceRoot":"../../../../src","sources":["components/typography/LabelSmallAlt.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,gBAAgB,EAAEC,uBAAuB,QAAQ,YAAY;AAGtE,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,kBAAkB;AACrD,MAAMC,mBAAkC,GAAG,UAAU;;AAErD;AACA;AACA;AACA,OAAO,MAAMC,aAAa,gBAAGZ,KAAK,CAACa,UAAU,CAC3C,CAACC,KAAK,EAAEC,GAAG,KAAK;EACd,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,UAAU,CAAC;IAC5BX,aAAa,EAAEQ,cAAc,GAAGR,aAAa,GAAGG,mBAAmB;IACnEJ,YAAY;IACZa,IAAI,EAAEJ,cAAc,GAAGV,QAAQ,GAAGI,cAAc;IAChDW,SAAS,EAAE;MACTC,QAAQ,EAAEN,cAAc,GAAGZ,aAAa,GAAGK,mBAAmB;MAC9Dc,UAAU,EAAElB;IACd;EACF,CAAC,EACDU,GACF,CAAC;AACH,CACF,CAAC"}
+{"version":3,"names":["React","forwardRef","useIOExperimentalDesign","useIOTheme","IOText","fontSize","lineHeight","fontName","fontWeight","legacyFontSize","legacyFontName","legacyFontWeight","LabelSmallAlt","_ref","ref","color","customColor","props","theme","isExperimental","LabelSmallAltProps","dynamicTypeRamp","font","weight","size","createElement","_extends","children"],"sourceRoot":"../../../../src","sources":["components/typography/LabelSmallAlt.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAkBC,UAAU,QAAQ,OAAO;AAEvD,SAASC,uBAAuB,EAAEC,UAAU,QAAQ,YAAY;AAEhE,SAASC,MAAM,QAA4C,UAAU;AAErE,MAAMC,QAAQ,GAAG,EAAE;AACnB,MAAMC,UAAU,GAAG,EAAE;AACrB,MAAMC,QAAsB,GAAG,WAAW;AAC1C,MAAMC,UAAwB,GAAG,SAAS;;AAE1C;AACA,MAAMC,cAAc,GAAG,EAAE;AACzB,MAAMC,cAA4B,GAAG,kBAAkB;AACvD,MAAMC,gBAA8B,GAAG,UAAU;;AAEjD;AACA;AACA;AACA,OAAO,MAAMC,aAAa,gBAAGX,UAAU,CACrC,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,kBAA+B,GAAG;IACtC,GAAGH,KAAK;IACRI,eAAe,EAAE,UAAU,CAAC;IAC5BC,IAAI,EAAEH,cAAc,GAAGZ,QAAQ,GAAGG,cAAc;IAChDa,MAAM,EAAEJ,cAAc,GAAGX,UAAU,GAAGG,gBAAgB;IACtDa,IAAI,EAAEL,cAAc,GAAGd,QAAQ,GAAGI,cAAc;IAChDH,UAAU;IACVS,KAAK,EAAEC,WAAW,IAAIE,KAAK,CAAC,mBAAmB;EACjD,CAAC;EAED,oBACElB,KAAA,CAAAyB,aAAA,CAACrB,MAAM,EAAAsB,QAAA;IAACZ,GAAG,EAAEA;EAAI,GAAKM,kBAAkB,GACrCH,KAAK,CAACU,QACD,CAAC;AAEb,CACF,CAAC"}