@pagopa/io-app-design-system 1.9.3 → 1.10.0

package/lib/typescript/components/pictograms/svg/PictogramUpdateOS.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PictogramUpdateOS.d.ts","sourceRoot":"","sources":["../../../../../src/components/pictograms/svg/PictogramUpdateOS.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,QAAA,MAAM,iBAAiB,8BAA+B,iBAAiB,sBA2BtE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"PictogramUpdateOS.d.ts","sourceRoot":"","sources":["../../../../../src/components/pictograms/svg/PictogramUpdateOS.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,QAAA,MAAM,iBAAiB,oCAIpB,iBAAiB,sBA2BnB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/typescript/components/textInput/TextInputBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInputBase.d.ts","sourceRoot":"","sources":["../../../../src/components/textInput/TextInputBase.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,SAAS,EAGV,MAAM,cAAc,CAAC;AACtB,OAAO,KAAkD,MAAM,OAAO,CAAC;AAOvE,OAAO,EACL,QAAQ,EAIT,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,OAAO,EAAQ,MAAM,UAAU,CAAC;AAGzC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAI9C,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAEhE,KAAK,gBAAgB,GAAG,IAAI,CAC1B,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EACtC,cAAc,GAAG,WAAW,GAAG,iBAAiB,GAAG,cAAc,CAClE,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,QAAQ,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AA6FF,eAAO,MAAM,aAAa,4MAiBvB,cAAc,sBAqLhB,CAAC"}
+{"version":3,"file":"TextInputBase.d.ts","sourceRoot":"","sources":["../../../../src/components/textInput/TextInputBase.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,SAAS,EAGV,MAAM,cAAc,CAAC;AACtB,OAAO,KAAkD,MAAM,OAAO,CAAC;AAOvE,OAAO,EACL,QAAQ,EAIT,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,OAAO,EAAQ,MAAM,UAAU,CAAC;AAGzC,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAI9C,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAEhE,KAAK,gBAAgB,GAAG,IAAI,CAC1B,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EACtC,cAAc,GAAG,WAAW,GAAG,iBAAiB,GAAG,cAAc,CAClE,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,QAAQ,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AA+FF,eAAO,MAAM,aAAa,4MAiBvB,cAAc,sBAqLhB,CAAC"}

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { IOColors, IOTheme } from "../../core/IOColors";
 import { IOFontWeight } from "../../utils/fonts";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { ExternalTypographyProps, FontType, TypographyProps } from "./common";
 type PartialAllowedColors = Extract<IOColors, "blue" | "bluegrey" | "red" | "white" | "bluegreyDark" | "grey-700" | "grey-200">;
 type AllowedColors = PartialAllowedColors | IOTheme["textBody-tertiary"];
 type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular" | "SemiBold">;
@@ -9,7 +9,7 @@ type FontSize = "regular" | "small";
 type AllowedFontSize = {
     fontSize?: FontSize;
 };
-type LabelSmallProps = ExternalTypographyProps<TypographyProps<AllowedWeight, AllowedColors>> & AllowedFontSize;
+type LabelSmallProps = ExternalTypographyProps<TypographyProps<AllowedWeight, AllowedColors>> & AllowedFontSize & FontType;
 /**
  * `LabelSmall` typographic style
  */

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

@@ -1 +1 @@
-{"version":3,"file":"LabelSmall.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/LabelSmall.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAc,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEpE,KAAK,oBAAoB,GAAG,OAAO,CACjC,QAAQ,EACN,MAAM,GACN,UAAU,GACV,KAAK,GACL,OAAO,GACP,cAAc,GACd,UAAU,GACV,UAAU,CACb,CAAC;AACF,KAAK,aAAa,GAAG,oBAAoB,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;AACzE,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;AAC5E,KAAK,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AACpC,KAAK,eAAe,GAAG;IAAE,QAAQ,CAAC,EAAE,QAAQ,CAAA;CAAE,CAAC;AAE/C,KAAK,eAAe,GAAG,uBAAuB,CAC5C,eAAe,CAAC,aAAa,EAAE,aAAa,CAAC,CAC9C,GACC,eAAe,CAAC;AAUlB;;GAEG;AACH,eAAO,MAAM,UAAU,UAAW,eAAe,gCAW7C,CAAC"}
+{"version":3,"file":"LabelSmall.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/LabelSmall.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAc,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,uBAAuB,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE9E,KAAK,oBAAoB,GAAG,OAAO,CACjC,QAAQ,EACN,MAAM,GACN,UAAU,GACV,KAAK,GACL,OAAO,GACP,cAAc,GACd,UAAU,GACV,UAAU,CACb,CAAC;AACF,KAAK,aAAa,GAAG,oBAAoB,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;AACzE,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;AAE5E,KAAK,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AACpC,KAAK,eAAe,GAAG;IAAE,QAAQ,CAAC,EAAE,QAAQ,CAAA;CAAE,CAAC;AAE/C,KAAK,eAAe,GAAG,uBAAuB,CAC5C,eAAe,CAAC,aAAa,EAAE,aAAa,CAAC,CAC9C,GACC,eAAe,GACf,QAAQ,CAAC;AAUX;;GAEG;AACH,eAAO,MAAM,UAAU,UAAW,eAAe,gCAehD,CAAC"}

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { StyleProp, Text, TextStyle } from "react-native";
 import type { IOColors } from "../../core";
-import { IOFontWeight } from "../../utils/fonts";
+import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
 import { RequiredAll } from "../../utils/types";
 /**
  * Define the font size values for the typography elements
@@ -9,6 +9,12 @@ import { RequiredAll } from "../../utils/types";
 export type FontSize = "regular" | "small" | "mini";
 export declare const fontSizeMapping: Record<FontSize, number>;
 export declare const lineHeightMapping: Record<FontSize, number>;
+/**
+ * Define the font name values for the typography elements
+ */
+export type FontType = {
+    font?: IOFontFamily;
+};
 /**
  * The style exported for the typography elements, without the fields characterizing the font style
  */

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

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/common.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpD,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAIpD,CAAC;AACF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAItD,CAAC;AAEF;;GAEG;AACH,KAAK,eAAe,GAAG,SAAS,CAC9B,IAAI,CACF,SAAS,EACT,OAAO,GAAG,YAAY,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,CACjE,CACF,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,eAAe,CAAC,eAAe,EAAE,eAAe,IAAI;IAC9D,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB,CAAC;AAGF,KAAK,sBAAsB,GAAG,eAAe,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;AAEtE;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,eAAe,EAAE,eAAe,EACnE,aAAa,EAAE,eAAe,EAC9B,YAAY,EAAE,eAAe,EAC7B,MAAM,CAAC,EAAE,eAAe,EACxB,KAAK,CAAC,EAAE,eAAe,GACtB,uBAAuB,CAAC,eAAe,EAAE,eAAe,CAAC,CAK3D;AAED;;;GAGG;AACH,MAAM,MAAM,uBAAuB,CAAC,CAAC,IAAI,CAAC,SAAS,sBAAsB,GACrE,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,OAAO,IAAI,CAAC,EAAE,OAAO,CAAC,GACrD,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,eAAe,CAAA;CAAE,GACjC,KAAK,CAAC;AAEV;;GAEG;AACH,MAAM,MAAM,uBAAuB,CAAC,eAAe,EAAE,eAAe,IAClE,WAAW,CAAC,eAAe,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/common.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEpD,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAIpD,CAAC;AACF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAItD,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,KAAK,eAAe,GAAG,SAAS,CAC9B,IAAI,CACF,SAAS,EACT,OAAO,GAAG,YAAY,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,CACjE,CACF,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,eAAe,CAAC,eAAe,EAAE,eAAe,IAAI;IAC9D,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB,CAAC;AAGF,KAAK,sBAAsB,GAAG,eAAe,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;AAEtE;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,eAAe,EAAE,eAAe,EACnE,aAAa,EAAE,eAAe,EAC9B,YAAY,EAAE,eAAe,EAC7B,MAAM,CAAC,EAAE,eAAe,EACxB,KAAK,CAAC,EAAE,eAAe,GACtB,uBAAuB,CAAC,eAAe,EAAE,eAAe,CAAC,CAK3D;AAED;;;GAGG;AACH,MAAM,MAAM,uBAAuB,CAAC,CAAC,IAAI,CAAC,SAAS,sBAAsB,GACrE,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,OAAO,IAAI,CAAC,EAAE,OAAO,CAAC,GACrD,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,eAAe,CAAA;CAAE,GACjC,KAAK,CAAC;AAEV;;GAEG;AACH,MAAM,MAAM,uBAAuB,CAAC,eAAe,EAAE,eAAe,IAClE,WAAW,CAAC,eAAe,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC"}

package/lib/typescript/core/IOColors.d.ts

@@ -205,6 +205,9 @@ export type IOTheme = {
     "divider-default": IOColors;
     errorIcon: IOColors;
     errorText: IOColors;
+    "pictogram-hands": IOColors;
+    "pictogram-tint-main": IOColors;
+    "pictogram-tint-secondary": IOColors;
 };
 export declare const IOThemeLight: IOTheme;
 export declare const IOThemeDark: IOTheme;

package/lib/typescript/core/IOColors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IOColors.d.ts","sourceRoot":"","sources":["../../../src/core/IOColors.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"IOColors.d.ts","sourceRoot":"","sources":["../../../src/core/IOColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,UAAU,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,KAAK,cAAc,MAAM,8BAA8B,CAAC;AAyB/D,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8EnB,CAAC;AAEH,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,QAAQ,CAAC;AAE7C,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;CAgB3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAE7D,eAAO,MAAM,sBAAsB,eACrB,gBAAgB,KAC3B,eAAe,qBAAqB,CAAC,CAAC,QAAQ,CAGhD,CAAC;AA8BF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;CAsB1B,CAAC;AACF,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AAExD,eAAO,MAAM,eAAe;;;;;;;;;;;CAW1B,CAAC;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,eAAe,CAAC;AAE3D,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;CAexB,CAAC;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,aAAa,CAAC;AAEvD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;CAqBzB,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,cAAc,CAAC;AACzD,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAC5C,cAAc,EACd,WAAW,GAAG,aAAa,GAAG,UAAU,GAAG,aAAa,CACzD,CAAC;AACF,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAC5C,cAAc,EACd,WAAW,GAAG,aAAa,GAAG,UAAU,GAAG,aAAa,CACzD,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;CASzB,CAAC;AACF,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,aAAa,CAAC;AAMvD,MAAM,MAAM,OAAO,GAAG;IAEpB,uBAAuB,EAAE,QAAQ,CAAC;IAClC,yBAAyB,EAAE,QAAQ,CAAC;IACpC,wBAAwB,EAAE,QAAQ,CAAC;IACnC,yBAAyB,EAAE,QAAQ,CAAC;IACpC,yBAAyB,EAAE,QAAQ,CAAC;IACpC,kBAAkB,EAAE,QAAQ,CAAC;IAE7B,qBAAqB,EAAE,QAAQ,CAAC;IAChC,kBAAkB,EAAE,QAAQ,CAAC;IAC7B,oBAAoB,EAAE,QAAQ,CAAC;IAC/B,mBAAmB,EAAE,QAAQ,CAAC;IAE9B,oBAAoB,EAAE,QAAQ,CAAC;IAC/B,cAAc,EAAE,QAAQ,CAAC;IAEzB,iBAAiB,EAAE,QAAQ,CAAC;IAE5B,SAAS,EAAE,QAAQ,CAAC;IACpB,SAAS,EAAE,QAAQ,CAAC;IAEpB,iBAAiB,EAAE,QAAQ,CAAC;IAC5B,qBAAqB,EAAE,QAAQ,CAAC;IAChC,0BAA0B,EAAE,QAAQ,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,OAyB1B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,OA0BzB,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;CAiBrC,CAAC;AAEH,MAAM,MAAM,0BAA0B,GACpC,MAAM,OAAO,0BAA0B,CAAC;AAE1C,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAC5C,WAAW,CAAC,0BAA0B,CAAC,EACvC,cAAc,CAkBf,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,MAAM,OAAO,yBAAyB,CAAC;AAK/E,eAAO,MAAM,QAAQ;;;CAA6C,CAAC;AACnE,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAEjD,CAAC;AACF,eAAO,MAAM,UAAU,eAAyC,CAAC;AAMjE;;;;GAIG;AAEH,eAAO,MAAM,SAAS,YAAa,UAAU,YAAW,MAAM,WAQ7D,CAAC"}

package/lib/typescript/core/IOSpacing.d.ts

@@ -1,5 +1,4 @@
-export declare const IOSpacingScale: readonly [4, 6, 8, 12, 16, 20, 24, 28, 32, 40, 48, 56, 64, 72, 80];
-export type IOSpacingScale = (typeof IOSpacingScale)[number];
+export type IOSpacingScale = 4 | 6 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 40 | 48 | 56 | 64 | 72 | 80;
 export type IOSpacer = Extract<IOSpacingScale, 4 | 8 | 16 | 24 | 32 | 40 | 48>;
 export declare const IOSpacer: ReadonlyArray<IOSpacer>;
 export type IOAppMargin = Extract<IOSpacingScale, 8 | 16 | 24 | 32>;

package/lib/typescript/core/IOSpacing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IOSpacing.d.ts","sourceRoot":"","sources":["../../../src/core/IOSpacing.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,cAAc,oEAEjB,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAG7D,MAAM,MAAM,QAAQ,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AAC/E,eAAO,MAAM,QAAQ,EAAE,aAAa,CAAC,QAAQ,CAEnC,CAAC;AAGX,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACpE,eAAO,MAAM,WAAW,EAAE,aAAa,CAAC,WAAW,CAA4B,CAAC;AAGhF,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC;AAC9D,eAAO,MAAM,cAAc,EAAE,aAAa,CAAC,cAAc,CAAqB,CAAC;AAG/E,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC;AAC/D,eAAO,MAAM,kBAAkB,EAAE,eAA6B,CAAC;AAC/D,eAAO,MAAM,qBAAqB,EAAE,eAA6B,CAAC;AAClE,eAAO,MAAM,qBAAqB,EAAE,eAA6B,CAAC;AAGlE,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AAC1D,eAAO,MAAM,aAAa,EAAE,YAAyB,CAAC;AACtD,eAAO,MAAM,aAAa,EAAE,YAAyB,CAAC;AAGtD,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AAC5D,eAAO,MAAM,eAAe,EAAE,cAA2B,CAAC;AAC1D,eAAO,MAAM,eAAe,EAAE,cAA2B,CAAC;AAG1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACtE,eAAO,MAAM,mBAAmB,EAAE,kBAAgC,CAAC;AACnE,eAAO,MAAM,mBAAmB,EAAE,kBAAgC,CAAC;AACnE,eAAO,MAAM,wBAAwB,EAAE,kBAAgC,CAAC;AACxE,eAAO,MAAM,oBAAoB,EAAE,kBAA+B,CAAC"}
+{"version":3,"file":"IOSpacing.d.ts","sourceRoot":"","sources":["../../../src/core/IOSpacing.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,cAAc,GACtB,CAAC,GACD,CAAC,GACD,CAAC,GACD,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,CAAC;AAGP,MAAM,MAAM,QAAQ,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AAC/E,eAAO,MAAM,QAAQ,EAAE,aAAa,CAAC,QAAQ,CAEnC,CAAC;AAGX,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACpE,eAAO,MAAM,WAAW,EAAE,aAAa,CAAC,WAAW,CAA4B,CAAC;AAGhF,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC;AAC9D,eAAO,MAAM,cAAc,EAAE,aAAa,CAAC,cAAc,CAAqB,CAAC;AAG/E,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC;AAC/D,eAAO,MAAM,kBAAkB,EAAE,eAA6B,CAAC;AAC/D,eAAO,MAAM,qBAAqB,EAAE,eAA6B,CAAC;AAClE,eAAO,MAAM,qBAAqB,EAAE,eAA6B,CAAC;AAGlE,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AAC1D,eAAO,MAAM,aAAa,EAAE,YAAyB,CAAC;AACtD,eAAO,MAAM,aAAa,EAAE,YAAyB,CAAC;AAGtD,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AAC5D,eAAO,MAAM,eAAe,EAAE,cAA2B,CAAC;AAC1D,eAAO,MAAM,eAAe,EAAE,cAA2B,CAAC;AAG1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACtE,eAAO,MAAM,mBAAmB,EAAE,kBAAgC,CAAC;AACnE,eAAO,MAAM,mBAAmB,EAAE,kBAAgC,CAAC;AACnE,eAAO,MAAM,wBAAwB,EAAE,kBAAgC,CAAC;AACxE,eAAO,MAAM,oBAAoB,EAAE,kBAA+B,CAAC"}

package/lib/typescript/core/IOStyles.d.ts

@@ -153,7 +153,7 @@ interface IOListItemVisualParams {
 export declare const IOListItemVisualParams: IOListItemVisualParams;
 export declare const IOListItemStyles: {
     listItem: {
-        paddingVertical: 16 | 4 | 6 | 12 | 20 | 24 | 32 | 48 | 8 | 28 | 40 | 56 | 64 | 72 | 80;
+        paddingVertical: IOSpacingScale;
         paddingHorizontal: IOAppMargin;
         marginHorizontal: number;
     };
@@ -200,7 +200,7 @@ interface IOSelectionListItemVisualParams {
 export declare const IOSelectionListItemVisualParams: IOSelectionListItemVisualParams;
 export declare const IOSelectionListItemStyles: {
     listItem: {
-        paddingVertical: 16 | 4 | 6 | 12 | 20 | 24 | 32 | 48 | 8 | 28 | 40 | 56 | 64 | 72 | 80;
+        paddingVertical: IOSpacingScale;
         paddingHorizontal: IOAppMargin;
         marginHorizontal: number;
     };

package/lib/typescript/stories/LabelSmall.stories.d.ts

@@ -6,7 +6,7 @@ declare const meta: {
         style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
     } & {
         fontSize?: ("small" | "regular") | undefined;
-    }) => import("react").JSX.Element;
+    } & import("../components").FontType) => import("react").JSX.Element;
     parameters: {
         layout: string;
         actions: {

package/lib/typescript/utils/fonts.d.ts

@@ -3,11 +3,6 @@
  * Fonts are managed differently on Android and iOS. Read the Font section of the
  * README file included in this repository.
  */
-export type IOFontFamily = keyof typeof fonts;
-declare const weights: readonly ["Light", "Regular", "Medium", "SemiBold", "Bold"];
-export type IOFontWeight = (typeof weights)[number];
-declare const weightValues: readonly ["300", "400", "500", "600", "700"];
-export type FontWeightValue = (typeof weightValues)[number];
 /**
  * Choose the font name based on the platform
  */
@@ -16,6 +11,11 @@ declare const fonts: {
     ReadexPro: string | undefined;
     DMMono: string | undefined;
 };
+export type IOFontFamily = keyof typeof fonts;
+declare const weights: readonly ["Light", "Regular", "Medium", "SemiBold", "Bold"];
+export type IOFontWeight = (typeof weights)[number];
+declare const weightValues: readonly ["300", "400", "500", "600", "700"];
+export type FontWeightValue = (typeof weightValues)[number];
 /**
  * Mapping between the nominal description of the weight (also the postfix used on Android) and the numeric value
  * used on iOS

package/lib/typescript/utils/fonts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../../src/utils/fonts.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,KAAK,CAAC;AAE9C,QAAA,MAAM,OAAO,6DAA8D,CAAC;AAC5E,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpD,QAAA,MAAM,YAAY,8CAA+C,CAAC;AAClE,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5D;;GAEG;AACH,QAAA,MAAM,KAAK;;;;CAgBV,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,YAAY,EAAE,eAAe,CAM7D,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,KAAK,CAAC;AAC5C,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAElD;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,YAAY,EAAE,eAAe,CAMhE,CAAC;AAEF,oBAAY,SAAS;IACnB,QAAQ,WAAW;IACnB,QAAQ,WAAW;CACpB;AAED,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,SACvB,UAAU,WACP,YAAY,aACX,OAAO,KAChB,MAMC,CAAC;AAEL;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,YACtB,YAAY,GAAG,SAAS,aACtB,OAAO,GAAG,SAAS,SACvB,UAAU,GAAG,SAAS,KAC3B,eAgBC,CAAC"}
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../../src/utils/fonts.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH;;GAEG;AACH,QAAA,MAAM,KAAK;;;;CAgBV,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,KAAK,CAAC;AAE9C,QAAA,MAAM,OAAO,6DAA8D,CAAC;AAC5E,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC;AAEpD,QAAA,MAAM,YAAY,8CAA+C,CAAC;AAClE,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5D;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,YAAY,EAAE,eAAe,CAM7D,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,KAAK,CAAC;AAC5C,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAElD;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,YAAY,EAAE,eAAe,CAMhE,CAAC;AAEF,oBAAY,SAAS;IACnB,QAAQ,WAAW;IACnB,QAAQ,WAAW;CACpB;AAED,KAAK,eAAe,GAAG;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,SACvB,UAAU,WACP,YAAY,aACX,OAAO,KAChB,MAMC,CAAC;AAEL;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,YACtB,YAAY,GAAG,SAAS,aACtB,OAAO,GAAG,SAAS,SACvB,UAAU,GAAG,SAAS,KAC3B,eAgBC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.9.3",
+  "version": "1.10.0",
   "description": "test",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/banner/Banner.tsx

@@ -225,6 +225,7 @@ export const Banner = ({
       </View>
       <View style={[styles.bleedPictogram, IOStyles.selfCenter]}>
         <PictogramBleed
+          pictogramStyle="dark-content"
           name={pictogramName}
           size={size === "big" ? sizePictogramBig : sizePictogramSmall}
         />

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

@@ -226,7 +226,6 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
         bbHeight={80}
         bbWidth={80}
         color={4278240714}
-        fill="none"
         focusable={false}
         height={80}
         meetOrSlice={0}
@@ -250,14 +249,7 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
         vbWidth={240}
         width={80}
       >
-        <RNSVGGroup
-          fill={null}
-          propList={
-            [
-              "fill",
-            ]
-          }
-        >
+        <RNSVGGroup>
           <RNSVGPath
             d="M133.46 173.8c-2.88 0-5.61-1.57-7.03-4.28-1.01-1.92-1.2-4.11-.53-6.18.66-2.04 2.07-3.69 3.98-4.64 6.87-3.44 17.93-6.91 24.11-8.73-2.58-2.4-4.34-6.01-4.32-9.54 0-2.68 1.14-9.19 11.43-11.65 16.11-3.86 78.12 18.71 80.75 19.67l-1.37 3.76c-.16-.06-16.14-5.89-33.81-11.18-29.21-8.75-40.4-9.37-44.64-8.36-5.38 1.29-8.35 4.05-8.36 7.77-.01 3.88 3.08 7.55 5.86 8.23.88.22 1.51 1.01 1.52 1.92 0 .91-.6 1.71-1.48 1.95-.18.05-18.53 5.04-27.9 9.73-.94.47-1.64 1.28-1.96 2.29-.33 1.03-.24 2.13.27 3.09.96 1.83 3.13 2.61 5.04 1.82 9.17-3.8 21.12-8.32 26.15-8.25l-.06 4h-.08c-3.38 0-12.29 2.89-24.47 7.94-1.01.42-2.05.62-3.08.62l-.02.02Z"
             fill={4278927075}

package/src/components/layout/BlockButtons.tsx

@@ -23,7 +23,7 @@ type CommonProps = Readonly<{
 
 export type BlockButtonProps = {
   type: "Solid" | "Outline";
-  buttonProps: ButtonSolidProps;
+  buttonProps: Omit<ButtonSolidProps, "fullWidth">;
 };
 
 /**
@@ -125,9 +125,9 @@ export const BlockButtons = (props: Props) => {
   ) => (
     <View style={style}>
       {props.type === "Solid" ? (
-        <ButtonSolid {...props.buttonProps} />
+        <ButtonSolid fullWidth {...props.buttonProps} />
       ) : (
-        <ButtonOutline {...props.buttonProps} />
+        <ButtonOutline fullWidth {...props.buttonProps} />
       )}
     </View>
   );

package/src/components/layout/HeaderSecondLevel.tsx

@@ -6,37 +6,62 @@ import Animated, {
   interpolateColor,
   useAnimatedStyle
 } from "react-native-reanimated";
-import { IOColors, hexToRgba } from "../../core/IOColors";
-
 import {
   IOStyles,
   IOVisualCostants,
-  iconBtnSizeSmall
-} from "../../core/IOStyles";
+  iconBtnSizeSmall,
+  IOColors,
+  hexToRgba,
+  useIOExperimentalDesign
+} from "../../core";
 import { HSpacer } from "../spacer";
 import type { IOSpacer } from "../../core/IOSpacing";
 import { WithTestID } from "../../utils/types";
 import IconButton from "../buttons/IconButton";
 import { makeFontStyleObject } from "../../utils/fonts";
 
-export type HeaderSecondLevel = WithTestID<{
-  scrollValues: ScrollValues;
+type ActionProp = Pick<
+  React.ComponentProps<typeof IconButton>,
+  "icon" | "onPress" | "accessibilityLabel" | "accessibilityHint"
+>;
+
+type ScrollValues = {
+  contentOffsetY: Animated.SharedValue<number>;
+  triggerOffset: number;
+};
+
+type CommonProps = WithTestID<{
+  scrollValues?: ScrollValues;
   title: string;
   goBack: () => void;
   backAccessibilityLabel: string;
-  // Accepted components: IconButton
-  // Don't use any components other than this, please.
-  firstAction?: React.ReactNode;
-  secondAction?: React.ReactNode;
-  thirdAction?: React.ReactNode;
   // Visual attributes
   transparent?: boolean;
 }>;
 
-type ScrollValues = {
-  contentOffsetY: Animated.SharedValue<number>;
-  triggerOffset: number;
-};
+interface Base extends CommonProps {
+  type: "base";
+}
+
+interface OneAction extends CommonProps {
+  type: "singleAction";
+  firstAction: ActionProp;
+}
+
+interface TwoActions extends CommonProps {
+  type: "twoActions";
+  firstAction: ActionProp;
+  secondAction: ActionProp;
+}
+
+interface ThreeActions extends CommonProps {
+  type: "threeActions";
+  firstAction: ActionProp;
+  secondAction: ActionProp;
+  thirdAction: ActionProp;
+}
+
+export type HeaderSecondLevel = Base | OneAction | TwoActions | ThreeActions;
 
 const HEADER_BG_COLOR: IOColors = "white";
 const borderColorDisabled = hexToRgba(IOColors["grey-100"], 0);
@@ -54,98 +79,124 @@ const styles = StyleSheet.create({
     justifyContent: "space-between"
   },
   headerTitle: {
-    ...makeFontStyleObject("Regular", false, "ReadexPro"),
     fontSize: 14,
     textAlign: "center",
     flexGrow: 1,
     flexShrink: 1,
     marginHorizontal: titleHorizontalMargin
+  },
+  headerTitleFont: {
+    ...makeFontStyleObject("Regular", false, "ReadexPro")
+  },
+  headerTitleLegacyFont: {
+    ...makeFontStyleObject("SemiBold", false, "TitilliumWeb")
   }
 });
 
-export const HeaderSecondLevel = ({
-  scrollValues,
-  goBack,
-  backAccessibilityLabel,
-  title,
-  firstAction,
-  secondAction,
-  thirdAction,
-  transparent = false,
-  testID
-}: HeaderSecondLevel) => {
+/**
+ * HeaderSecondLevel component is used to display the header on pages on the second level of navigation.
+ * @param {HeaderSecondLevel} props - The props of the component
+ * @returns React Element
+ */
+export const HeaderSecondLevel = (props: HeaderSecondLevel) => {
+  const {
+    scrollValues = undefined,
+    goBack,
+    backAccessibilityLabel,
+    title,
+    type,
+    transparent = false,
+    testID
+  } = props;
+  const { isExperimental } = useIOExperimentalDesign();
   const insets = useSafeAreaInsets();
 
   const headerWrapperAnimatedStyle = useAnimatedStyle(() => ({
-    backgroundColor: transparent
+    backgroundColor:
+      transparent && scrollValues
+        ? interpolateColor(
+            scrollValues.contentOffsetY.value,
+            [0, scrollValues.triggerOffset],
+            [headerTransparent, IOColors[HEADER_BG_COLOR]]
+          )
+        : IOColors[HEADER_BG_COLOR],
+    borderColor: scrollValues
       ? interpolateColor(
           scrollValues.contentOffsetY.value,
           [0, scrollValues.triggerOffset],
-          [headerTransparent, IOColors[HEADER_BG_COLOR]]
+          [borderColorDisabled, IOColors["grey-100"]]
         )
-      : undefined,
-    borderColor: interpolateColor(
-      scrollValues.contentOffsetY.value,
-      [0, scrollValues.triggerOffset],
-      [borderColorDisabled, IOColors["grey-100"]]
-    )
+      : "transparent"
   }));
 
   const titleAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: interpolate(
-      scrollValues.contentOffsetY.value,
-      [0, scrollValues.triggerOffset],
-      [0, 1]
-    )
+    opacity: scrollValues
+      ? interpolate(
+          scrollValues.contentOffsetY.value,
+          [0, scrollValues.triggerOffset],
+          [0, 1]
+        )
+      : 1
   }));
 
   return (
     <Animated.View
       accessibilityRole="header"
-      testID={testID}
-      style={[
-        { marginTop: insets.top },
-        styles.headerInner,
+      style={
         transparent
           ? { borderBottomWidth: 0 }
-          : { backgroundColor: IOColors[HEADER_BG_COLOR] },
-        headerWrapperAnimatedStyle
-      ]}
+          : { backgroundColor: IOColors[HEADER_BG_COLOR] }
+      }
     >
-      <IconButton
-        icon={Platform.OS === "ios" ? "backiOS" : "backAndroid"}
-        color="neutral"
-        onPress={goBack}
-        accessibilityLabel={backAccessibilityLabel}
-      />
-      <Animated.Text
-        numberOfLines={1}
-        style={[styles.headerTitle, titleAnimatedStyle]}
+      <Animated.View
+        testID={testID}
+        style={[
+          { marginTop: insets.top },
+          styles.headerInner,
+          headerWrapperAnimatedStyle
+        ]}
       >
-        {title}
-      </Animated.Text>
-      <View style={[IOStyles.row, { flexShrink: 0 }]}>
-        {firstAction ? (
-          firstAction
-        ) : (
-          <HSpacer size={iconBtnSizeSmall as IOSpacer} />
-        )}
-        {secondAction && (
-          <>
-            {/* Ideally, with the "gap" flex property,
+        <IconButton
+          icon={Platform.OS === "ios" ? "backiOS" : "backAndroid"}
+          color="neutral"
+          onPress={goBack}
+          accessibilityLabel={backAccessibilityLabel}
+        />
+        <Animated.Text
+          numberOfLines={1}
+          style={[
+            styles.headerTitle,
+            isExperimental
+              ? styles.headerTitleFont
+              : styles.headerTitleLegacyFont,
+            titleAnimatedStyle
+          ]}
+        >
+          {title}
+        </Animated.Text>
+        <View style={[IOStyles.row, { flexShrink: 0 }]}>
+          {type !== "base" ? (
+            <IconButton {...props.firstAction} color="neutral" />
+          ) : (
+            <HSpacer size={iconBtnSizeSmall as IOSpacer} />
+          )}
+          {(type === "twoActions" || type === "threeActions") && (
+            <>
+              {/* Ideally, with the "gap" flex property,
               we can get rid of these ugly constructs */}
-            <HSpacer size={16} />
-            {secondAction}
-          </>
-        )}
-        {thirdAction && (
-          <>
-            {/* Same as above */}
-            <HSpacer size={16} />
-            {thirdAction}
-          </>
-        )}
-      </View>
+              <HSpacer size={16} />
+              <IconButton {...props.secondAction} color="neutral" />
+            </>
+          )}
+          {type === "threeActions" && (
+            <>
+              {/* Same as above */}
+              <HSpacer size={16} />
+              <IconButton {...props.thirdAction} color="neutral" />
+            </>
+          )}
+        </View>
+      </Animated.View>
     </Animated.View>
   );
 };

package/src/components/layout/index.tsx

@@ -3,3 +3,4 @@ export * from "./GradientBottomActions";
 export * from "./HeaderFirstLevel";
 export * from "./HeaderSecondLevel";
 export * from "./FooterWithButtons";
+export * from "./BlockButtons";

package/src/components/listitems/ListItemSwitch.tsx

@@ -1,5 +1,10 @@
 import React from "react";
-import { GestureResponderEvent, Switch, View } from "react-native";
+import {
+  ActivityIndicator,
+  GestureResponderEvent,
+  Switch,
+  View
+} from "react-native";
 import {
   IOSelectionListItemStyles,
   IOSelectionListItemVisualParams,
@@ -10,6 +15,7 @@ import { IOIcons, Icon } from "../icons";
 import { HSpacer, VSpacer } from "../spacer";
 import { H6, LabelSmall, LabelLink } from "../typography";
 import { NativeSwitch } from "../switch/NativeSwitch";
+import { Badge } from "../badge";
 
 type Props = {
   label: string;
@@ -17,6 +23,8 @@ type Props = {
   description?: string;
   icon?: IOIcons;
   action?: SwitchAction;
+  isLoading?: boolean;
+  badge?: Badge;
 };
 
 export type SwitchAction = {
@@ -37,6 +45,8 @@ export const ListItemSwitch = React.memo(
     value,
     disabled,
     action,
+    isLoading,
+    badge,
     onSwitchValueChange
   }: OwnProps) => {
     const theme = useIOTheme();
@@ -59,7 +69,7 @@ export const ListItemSwitch = React.memo(
             { alignItems: "center" }
           ]}
         >
-          <View style={{ flexShrink: 1 }}>
+          <View style={{ flex: 1 }}>
             <View style={[IOStyles.row, { flexShrink: 1 }]}>
               {icon && (
                 <View
@@ -74,9 +84,34 @@ export const ListItemSwitch = React.memo(
                   />
                 </View>
               )}
-              <H6 color={"black"} style={{ flexShrink: 1 }}>
-                {label}
-              </H6>
+              <View
+                style={{
+                  flex: 1,
+                  flexDirection: "row",
+                  alignContent: "space-between"
+                }}
+              >
+                <H6 color={"black"} style={{ flex: 1 }}>
+                  {label}
+                </H6>
+                <HSpacer size={8} />
+                <View>
+                  {badge && (
+                    <Badge
+                      text={badge.text}
+                      variant={badge.variant}
+                      testID={badge.testID}
+                    />
+                  )}
+                  {isLoading && <ActivityIndicator color={"black"} />}
+                  {!isLoading && !badge && (
+                    <NativeSwitch
+                      value={value}
+                      onValueChange={onSwitchValueChange}
+                    />
+                  )}
+                </View>
+              </View>
             </View>
             {description && (
               <>
@@ -97,11 +132,6 @@ export const ListItemSwitch = React.memo(
               </>
             )}
           </View>
-
-          <HSpacer size={8} />
-          <View style={{ flexShrink: 0, alignSelf: "flex-start" }}>
-            <NativeSwitch value={value} onValueChange={onSwitchValueChange} />
-          </View>
         </View>
       </View>
     );