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

package/lib/typescript/components/tooltip/styles.d.ts

@@ -0,0 +1,41 @@
+import { ChildrenCoords } from './utils/types';
+export declare const tooltipStyles: {
+    overlay: {
+        position: "absolute";
+        width: string;
+        height: string;
+        backgroundColor: string;
+        opacity: number;
+        zIndex: number;
+    };
+    childrenContainer: {
+        position: "absolute";
+        zIndex: number;
+    };
+    tooltipContainer: {
+        position: "absolute";
+        paddingHorizontal: number;
+        paddingVertical: number;
+        backgroundColor: string;
+        borderRadius: number;
+        zIndex: number;
+        overflow: "visible";
+    };
+    arrowContainer: {
+        position: "absolute";
+        display: "flex";
+        zIndex: number;
+    };
+    closeIcon: {
+        position: "absolute";
+        right: number;
+        top: number;
+    };
+};
+export declare const getChildrenPosition: (childrenCoords: ChildrenCoords) => {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/tooltip/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/tooltip/styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCxB,CAAC;AAEH,eAAO,MAAM,mBAAmB,mBAAoB,cAAc;;;;;CAKhE,CAAC"}

package/lib/typescript/components/tooltip/utils/index.d.ts

@@ -0,0 +1,89 @@
+import { ScaledSize } from 'react-native';
+import { ChildrenCoords, DisplayInsets, Placement } from './types';
+export declare const ARROW_WIDTH = 24;
+export declare const ARROW_HEIGHT = 14;
+export declare const EMPTY_SPACE = 8;
+/**
+ * @param displayInsets custom display insets
+ * @returns An `object` based on `DEFAULT_INSETS` and `displayInsets`
+ */
+export declare const getDisplayInsets: (displayInsets: Partial<DisplayInsets>) => DisplayInsets;
+/**
+ *
+ * @param placement The `Tooltip` placement
+ * @returns The `Arrow` box `width` and `height` based on `placement` value
+ */
+export declare const getArrowBoxByPlacement: (placement: Placement) => {
+    width: number;
+    height: number;
+};
+/**
+ * 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 declare const getTooltipCoords: (placement: Placement, childrenCoords: ChildrenCoords, displayInsets: DisplayInsets, screenDimensions: ScaledSize) => {
+    bottom: number;
+    left: number;
+    width: number;
+    top?: undefined;
+} | {
+    top: number;
+    left: number;
+    width: number;
+    bottom?: undefined;
+} | {
+    bottom?: undefined;
+    left?: undefined;
+    width?: undefined;
+    top?: undefined;
+};
+/**
+ * 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 declare const getArrowCoords: (placement: Placement, childrenCoords: ChildrenCoords, screenDimensions: ScaledSize) => {
+    bottom: number;
+    left: number;
+    top?: undefined;
+} | {
+    top: number;
+    left: number;
+    bottom?: undefined;
+} | {
+    bottom?: undefined;
+    left?: undefined;
+    top?: undefined;
+};
+/**
+ * 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 declare const getTooltipVerticalAlignment: (placement: Placement, childrenHeight: number, tooltipHeight?: number) => {
+    transform: {
+        translateY: number;
+    }[];
+} | 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 declare const getArrowVerticalAlignment: (placement: Placement, childrenHeight: number) => {
+    transform: {
+        translateY: number;
+    }[];
+} | null;
+export declare const isDefined: <T>(v: T) => boolean;
+export declare const isNotZero: (v: number) => boolean;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/tooltip/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/tooltip/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEnE,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,WAAW,IAAI,CAAC;AAQ7B;;;GAGG;AACH,eAAO,MAAM,gBAAgB,kBACZ,QAAQ,aAAa,CAAC,KACpC,aAA0D,CAAC;AAE9D;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,cAAe,SAAS;;;CAc1D,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,cAChB,SAAS,kBACJ,cAAc,iBACf,aAAa,oBACV,UAAU;;;;;;;;;;;;;;;CAsC7B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,cACd,SAAS,kBACJ,cAAc,oBACZ,UAAU;;;;;;;;;;;;CA6B7B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,2BAA2B,cAAe,SAAS,kBAAkB,MAAM,kBAAkB,MAAM;;;;QAY/G,CAAC;AAEF;;;;EAIE;AACF,eAAO,MAAM,yBAAyB,cAAe,SAAS,kBAAkB,MAAM;;;;QAYrF,CAAC;AAEF,eAAO,MAAM,SAAS,SAAU,CAAC,YAAoB,CAAC;AACtD,eAAO,MAAM,SAAS,MAAO,MAAM,YAAY,CAAC"}

package/lib/typescript/components/tooltip/utils/types.d.ts

@@ -0,0 +1,10 @@
+export type DisplayInsets = Record<Placement, number>;
+export type Placement = "top" | "bottom" | "left" | "right";
+export type ChildrenCoords = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type TooltipLayout = ChildrenCoords;
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/components/tooltip/utils/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/tooltip/utils/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AACtD,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAC5D,MAAM,MAAM,cAAc,GAAG;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AACF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC"}

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

@@ -3,7 +3,7 @@ import { View } from "react-native";
 import { IOFontWeight } from "../../utils/fonts";
 import { TypographicStyleAsLinkProps, TypographicStyleProps } from "./IOText";
 type BodyStyleProps = TypographicStyleProps & {
-    weight?: Extract<IOFontWeight, "Regular" | "Semibold" | "Bold">;
+    weight?: Extract<IOFontWeight, "Regular" | "Semibold">;
 } & TypographicStyleAsLinkProps;
 export declare const bodyFontSize = 16;
 export declare const bodyLineHeight = 24;

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

@@ -1 +1 @@
-{"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/Body.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAgB,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAGL,2BAA2B,EAC3B,qBAAqB,EACtB,MAAM,UAAU,CAAC;AAElB,KAAK,cAAc,GAAG,qBAAqB,GAAG;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;CACjE,GAAG,2BAA2B,CAAC;AAEhC,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,cAAc,KAAK,CAAC;AAQjC;;GAEG;AACH,eAAO,MAAM,IAAI,6EAsChB,CAAC"}
+{"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/Body.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAgB,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAGL,2BAA2B,EAC3B,qBAAqB,EACtB,MAAM,UAAU,CAAC;AAElB,KAAK,cAAc,GAAG,qBAAqB,GAAG;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;CACxD,GAAG,2BAA2B,CAAC;AAEhC,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,cAAc,KAAK,CAAC;AAQjC;;GAEG;AACH,eAAO,MAAM,IAAI,6EAsChB,CAAC"}

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { View } from "react-native";
+import { IOFontWeight } from "../../utils/fonts";
+import { TypographicStyleAsLinkProps, TypographicStyleProps } from "./IOText";
+type BodySmallProps = TypographicStyleProps & {
+    weight?: Extract<IOFontWeight, "Regular" | "Semibold">;
+} & TypographicStyleAsLinkProps;
+/**
+ * `BodySmall` typographic style
+ */
+export declare const BodySmall: React.ForwardRefExoticComponent<BodySmallProps & React.RefAttributes<View>>;
+export {};
+//# sourceMappingURL=BodySmall.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BodySmall.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/BodySmall.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAgB,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAGL,2BAA2B,EAC3B,qBAAqB,EACtB,MAAM,UAAU,CAAC;AAElB,KAAK,cAAc,GAAG,qBAAqB,GAAG;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;CACxD,GAAG,2BAA2B,CAAC;AAKhC;;GAEG;AACH,eAAO,MAAM,SAAS,6EAkCrB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonText.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/ButtonText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,EAAgB,UAAU,EAAgB,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAU,WAAW,EAAyB,MAAM,UAAU,CAAC;AAEtE,eAAO,MAAM,kBAAkB,EAAE,UAAe,CAAC;AAWjD;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;8BAmBtB,CAAC"}
+{"version":3,"file":"ButtonText.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/ButtonText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,EAAgB,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAU,WAAW,EAAyB,MAAM,UAAU,CAAC;AAEtE,eAAO,MAAM,kBAAkB,EAAE,UAAe,CAAC;AASjD;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;8BAmBtB,CAAC"}

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

@@ -12,5 +12,7 @@ export declare const H3: React.ForwardRefExoticComponent<Omit<IOTextProps, "styl
     style?: import("./IOText").IOTextStyle | undefined;
 } & {
     color?: "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-400" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "bluegrey" | "bluegreyDark" | "blue" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "orange" | "red" | "green" | "greenLight" | undefined;
+} & {
+    weight?: "Semibold" | "Bold" | undefined;
 } & React.RefAttributes<View>>;
 //# sourceMappingURL=H3.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"H3.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/H3.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAgB,UAAU,EAAgB,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAU,WAAW,EAAyB,MAAM,UAAU,CAAC;AAKtE,eAAO,MAAM,UAAU,EAAE,UAAe,CAAC;AACzC,eAAO,MAAM,YAAY,KAAK,CAAC;AAQ/B;;GAEG;AACH,eAAO,MAAM,EAAE;;;;;8BAqBd,CAAC"}
+{"version":3,"file":"H3.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/H3.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAgB,UAAU,EAAgB,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAU,WAAW,EAAyB,MAAM,UAAU,CAAC;AAOtE,eAAO,MAAM,UAAU,EAAE,UAAe,CAAC;AACzC,eAAO,MAAM,YAAY,KAAK,CAAC;AAM/B;;GAEG;AACH,eAAO,MAAM,EAAE;;;;;;;8BAwBd,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"H6.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/H6.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAgB,UAAU,EAAgB,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAU,WAAW,EAAyB,MAAM,UAAU,CAAC;AAItE,eAAO,MAAM,UAAU,EAAE,UAAe,CAAC;AACzC,eAAO,MAAM,YAAY,KAAK,CAAC;AAQ/B;;GAEG;AACH,eAAO,MAAM,EAAE;;;;;8BAqBd,CAAC"}
+{"version":3,"file":"H6.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/H6.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAgB,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAU,WAAW,EAAyB,MAAM,UAAU,CAAC;AAItE,eAAO,MAAM,UAAU,EAAE,UAAe,CAAC;AACzC,eAAO,MAAM,YAAY,KAAK,CAAC;AAO/B;;GAEG;AACH,eAAO,MAAM,EAAE;;;;;8BAqBd,CAAC"}

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

@@ -3,7 +3,7 @@ import { View } from "react-native";
 import { IOFontWeight } from "../../utils/fonts";
 import { TypographicStyleAsLinkProps, TypographicStyleProps } from "./IOText";
 type LabelMiniProps = TypographicStyleProps & {
-    weight?: Extract<IOFontWeight, "Regular" | "Semibold" | "Bold">;
+    weight?: Extract<IOFontWeight, "Regular" | "Semibold">;
 } & TypographicStyleAsLinkProps;
 /**
  * `LabelMini` typographic style

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

@@ -1 +1 @@
-{"version":3,"file":"LabelMini.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/LabelMini.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAgB,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAGL,2BAA2B,EAC3B,qBAAqB,EACtB,MAAM,UAAU,CAAC;AAElB,KAAK,cAAc,GAAG,qBAAqB,GAAG;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;CACjE,GAAG,2BAA2B,CAAC;AAQhC;;GAEG;AACH,eAAO,MAAM,SAAS,6EAsCrB,CAAC"}
+{"version":3,"file":"LabelMini.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/LabelMini.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAgB,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAGL,2BAA2B,EAC3B,qBAAqB,EACtB,MAAM,UAAU,CAAC;AAElB,KAAK,cAAc,GAAG,qBAAqB,GAAG;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;CACxD,GAAG,2BAA2B,CAAC;AAQhC;;GAEG;AACH,eAAO,MAAM,SAAS,6EAsCrB,CAAC"}

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

@@ -1,11 +1,10 @@
-export * from "./BaseTypography";
-export * from "./IOText";
 export * from "./Body";
-export * from "./ComposedBodyFromArray";
-export * from "./Caption";
-export * from "./Chip";
+export * from "./BodyMonospace";
+export * from "./BodySmall";
 export * from "./ButtonText";
-export * from "./Factory";
+export * from "./Caption";
+export * from "./common";
+export * from "./ComposedBodyFromArray";
 export * from "./H1";
 export * from "./H2";
 export * from "./H3";
@@ -13,11 +12,8 @@ export * from "./H4";
 export * from "./H5";
 export * from "./H6";
 export * from "./Hero";
-export * from "./Label";
-export * from "./LabelSmall";
+export * from "./IOText";
 export * from "./LabelMini";
-export * from "./BodyMonospace";
-export * from "./common";
 export * from "./markdown/MdH1";
 export * from "./markdown/MdH2";
 export * from "./markdown/MdH3";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/index.tsx"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,yBAAyB,CAAC;AACxC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/index.tsx"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,yBAAyB,CAAC;AACxC,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/alert/Alert.tsx

@@ -29,9 +29,8 @@ import { IOAlertSpacing } from "../../core/IOSpacing";
 import { WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { VSpacer } from "../spacer";
-import { ButtonText } from "../typography";
+import { Body, ButtonText } from "../typography";
 import { H4 } from "../typography/H4";
-import { Label } from "../typography/Label";
 
 const iconSize: IOIconSizeScale = 24;
 
@@ -197,14 +196,14 @@ export const Alert = React.forwardRef<View, AlertType>(
               <VSpacer size={8} />
             </>
           )}
-          <Label
+          <Body
             color={mapVariantStates[variant].foreground}
             weight={"Regular"}
             accessibilityRole="text"
             onTextLayout={onTextLayout}
           >
             {content}
-          </Label>
+          </Body>
           {action && (
             <>
               <VSpacer size={8} />

package/src/components/alert/AlertEdgeToEdge.tsx

@@ -33,7 +33,7 @@ import { IOStyles } from "../../core/IOStyles";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
-import { Label } from "../typography/Label";
+import { Body } from "../typography";
 
 const iconSize: IOIconSizeScale = 24;
 
@@ -161,7 +161,7 @@ export const AlertEdgeToEdge = ({
         />
       </View>
       <View style={IOStyles.flex}>
-        <Label
+        <Body
           color={mapVariantStates[variant].foreground}
           weight={"Regular"}
           accessibilityRole="text"
@@ -182,7 +182,7 @@ export const AlertEdgeToEdge = ({
               {` ${action}`}
             </Text>
           )}
-        </Label>
+        </Body>
       </View>
     </>
   );

package/src/components/banner/Banner.tsx

@@ -33,7 +33,7 @@ import {
   PictogramBleed
 } from "../pictograms";
 import { VSpacer } from "../spacer";
-import { H6, LabelSmall } from "../typography";
+import { H6, BodySmall } from "../typography";
 
 /* Styles */
 const colorTitle: IOColors = "blueIO-850";
@@ -157,7 +157,7 @@ export const Banner = ({
   onClose,
   accessibilityHint,
   accessibilityLabel,
-  testID,
+  testID
 }: Banner) => {
   const isPressed: Animated.SharedValue<number> = useSharedValue(0);
 
@@ -197,7 +197,9 @@ export const Banner = ({
 
   /* Generates a complete fallbackAccessibilityLabel by concatenating the title, content, and action
    if they are present. */
-  const fallbackAccessibilityLabel = [title, content, action].filter(Boolean).join(" ");
+  const fallbackAccessibilityLabel = [title, content, action]
+    .filter(Boolean)
+    .join(" ");
 
   const renderMainBlock = () => (
     <>
@@ -219,9 +221,9 @@ export const Banner = ({
         )}
         {content && (
           <>
-            <LabelSmall color={colorContent} weight={"Regular"}>
+            <BodySmall color={colorContent} weight={"Regular"}>
               {content}
-            </LabelSmall>
+            </BodySmall>
             {action && <VSpacer size={8} />}
           </>
         )}

package/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap

@@ -82,7 +82,7 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
             {
               "color": "#031344",
               "fontFamily": "Titillio",
-              "fontSize": 18,
+              "fontSize": 16,
               "fontStyle": "normal",
               "fontWeight": "600",
               "lineHeight": 24,
@@ -546,7 +546,7 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
                     "fontFamily": "Titillium Sans Pro",
                     "fontSize": 16,
                     "fontStyle": "normal",
-                    "fontWeight": "700",
+                    "fontWeight": "600",
                     "lineHeight": undefined,
                   },
                   {

package/src/components/buttons/ButtonLink.tsx

@@ -238,7 +238,7 @@ export const ButtonLink = React.forwardRef<View, ButtonLinkProps>(
             accessibilityElementsHidden
             importantForAccessibility="no-hide-descendants"
             font={isExperimental ? "Titillio" : "TitilliumSansPro"}
-            weight={isExperimental ? "Semibold" : "Bold"}
+            weight={"Semibold"}
             size={buttonTextFontSize}
             style={
               disabled

package/src/components/buttons/ButtonOutline.tsx

@@ -375,7 +375,7 @@ export const ButtonOutline = React.forwardRef<View, ButtonOutline>(
           )}
           <AnimatedIOText
             font={isExperimental ? "Titillio" : "TitilliumSansPro"}
-            weight={isExperimental ? "Semibold" : "Bold"}
+            weight={"Semibold"}
             size={buttonTextFontSize}
             accessible={false}
             accessibilityElementsHidden

package/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap

@@ -805,7 +805,7 @@ exports[`Test Buttons Components ButtonLink Snapshot 1`] = `
             "fontFamily": "Titillium Sans Pro",
             "fontSize": 16,
             "fontStyle": "normal",
-            "fontWeight": "700",
+            "fontWeight": "600",
             "lineHeight": undefined,
           },
           {
@@ -911,7 +911,7 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
             "fontFamily": "Titillium Sans Pro",
             "fontSize": 16,
             "fontStyle": "normal",
-            "fontWeight": "700",
+            "fontWeight": "600",
             "lineHeight": undefined,
           },
           [
@@ -1031,7 +1031,7 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
               "fontFamily": "Titillium Sans Pro",
               "fontSize": 16,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "600",
               "lineHeight": 20,
             },
             {

package/src/components/featureInfo/FeatureInfo.tsx

@@ -1,14 +1,13 @@
 import React, { ReactNode } from "react";
 import { GestureResponderEvent, View } from "react-native";
 import {
-  Body,
+  BodySmall,
   HSpacer,
   IOIconSizeScale,
   IOIcons,
   IOPictogramSizeScale,
   IOPictograms,
   Icon,
-  Label,
   Pictogram,
   VSpacer
 } from "../../components";
@@ -44,9 +43,9 @@ const DEFAULT_PICTOGRAM_SIZE: IOPictogramSizeScale = 48;
 const renderNode = (body: FeatureInfoProps["body"]) => {
   if (typeof body === "string") {
     return (
-      <Body color="grey-700" testID="infoScreenBody">
+      <BodySmall color="grey-700" testID="infoScreenBody">
         {body}
-      </Body>
+      </BodySmall>
     );
   }
 
@@ -75,7 +74,8 @@ export const FeatureInfo = ({
           This verbose code could be deleted once we got "gap"
           property support */}
           {body && <VSpacer size={4} />}
-          <Label
+          <BodySmall
+            weight="Semibold"
             asLink
             onPress={action.onPress}
             accessible
@@ -83,7 +83,7 @@ export const FeatureInfo = ({
             accessibilityElementsHidden={false}
           >
             {action.label}
-          </Label>
+          </BodySmall>
         </>
       )}
     </View>

package/src/components/index.tsx

@@ -30,4 +30,5 @@ export * from "./tag";
 export * from "./textInput";
 export * from "./searchInput";
 export * from "./toast";
+export * from "./tooltip";
 export * from "./typography";

package/src/components/layout/HeaderFirstLevel.tsx

@@ -126,6 +126,7 @@ export const HeaderFirstLevel = ({
       <View style={styles.headerInner}>
         <View ref={titleRef} accessible accessibilityRole="header">
           <H3
+            weight="Bold"
             style={{ flexShrink: 1 }}
             numberOfLines={1}
             color={

package/src/components/listitems/ListItemCheckbox.tsx

@@ -24,7 +24,7 @@ import {
 import { AnimatedCheckbox } from "../checkbox/AnimatedCheckbox";
 import { IOIcons, Icon } from "../icons";
 import { HSpacer, VSpacer } from "../spacer";
-import { H6, LabelSmall } from "../typography";
+import { H6, BodySmall } from "../typography";
 
 type Props = {
   value: string;
@@ -188,9 +188,9 @@ export const ListItemCheckbox = ({
               <VSpacer
                 size={IOSelectionListItemVisualParams.descriptionMargin}
               />
-              <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+              <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
                 {description}
-              </LabelSmall>
+              </BodySmall>
             </View>
           )}
         </Animated.View>

package/src/components/listitems/ListItemInfo.tsx

@@ -12,7 +12,7 @@ import { ButtonLink, IconButton } from "../buttons";
 import { LogoPaymentWithFallback } from "../common/LogoPaymentWithFallback";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { IOLogoPaymentType } from "../logos";
-import { H6, LabelSmall } from "../typography";
+import { H6, BodySmall } from "../typography";
 
 type ButtonLinkActionProps = {
   type: "buttonLink";
@@ -84,9 +84,9 @@ export const ListItemInfo = ({
   const itemInfoTextComponent = useMemo(
     () => (
       <View accessible={Platform.OS === "ios"}>
-        <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+        <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
           {label}
-        </LabelSmall>
+        </BodySmall>
         {typeof value === "string" ? (
           <H6 color={theme["textBody-default"]} numberOfLines={numberOfLines}>
             {value}

package/src/components/listitems/ListItemInfoCopy.tsx

@@ -22,7 +22,7 @@ import {
 } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
-import { H6, LabelSmall } from "../typography";
+import { BodySmall, H6 } from "../typography";
 
 export type ListItemInfoCopy = WithTestID<{
   label: string;
@@ -69,9 +69,9 @@ export const ListItemInfoCopy = ({
 
   const listItemInfoCopyContent = (
     <>
-      <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+      <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
         {label}
-      </LabelSmall>
+      </BodySmall>
       {/* Let developer using a custom component (e.g: skeleton) */}
       {typeof value === "string" ? (
         <H6 color={foregroundColor} numberOfLines={numberOfLines}>

package/src/components/listitems/ListItemNav.tsx

@@ -33,7 +33,7 @@ import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
 import { HSpacer, VSpacer } from "../spacer";
-import { Caption, H6, LabelSmall } from "../typography";
+import { Caption, H6, BodySmall } from "../typography";
 
 type ListItemTopElementProps =
   | {
@@ -161,9 +161,9 @@ export const ListItemNav = ({
       {description && (
         <>
           {typeof description === "string" ? (
-            <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+            <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
               {description}
-            </LabelSmall>
+            </BodySmall>
           ) : (
             description
           )}

package/src/components/listitems/ListItemNavAlert.tsx

@@ -22,7 +22,7 @@ import {
 } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { Icon } from "../icons";
-import { H6, LabelSmall } from "../typography";
+import { H6, BodySmall } from "../typography";
 
 export type ListItemNavAlert = WithTestID<{
   value: string | React.ReactNode;
@@ -82,9 +82,9 @@ export const ListItemNavAlert = ({
       {description && (
         <>
           {typeof description === "string" ? (
-            <LabelSmall weight="Semibold" color={theme.errorText}>
+            <BodySmall weight="Semibold" color={theme.errorText}>
               {description}
-            </LabelSmall>
+            </BodySmall>
           ) : (
             description
           )}

package/src/components/listitems/ListItemRadio.tsx

@@ -27,7 +27,7 @@ import { IOIcons, Icon } from "../icons";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
 import { AnimatedRadio } from "../radio/AnimatedRadio";
 import { HSpacer, VSpacer } from "../spacer";
-import { H6, LabelSmall } from "../typography";
+import { H6, BodySmall } from "../typography";
 
 type ListItemRadioGraphicProps =
   | { icon?: never; paymentLogo: IOLogoPaymentType; uri?: never }
@@ -287,9 +287,9 @@ export const ListItemRadio = ({
               <VSpacer
                 size={IOSelectionListItemVisualParams.descriptionMargin}
               />
-              <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+              <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
                 {description}
-              </LabelSmall>
+              </BodySmall>
             </View>
           )}
         </Animated.View>