@pagopa/io-app-design-system 2.0.0 → 2.0.2

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

@@ -1,4 +1,6 @@
 export * from "./BlockButtons";
+export * from "./FooterActions";
+export * from "./FooterActionsInline";
 export * from "./FooterWithButtons";
 export * from "./ForceScrollDownView";
 export * from "./GradientBottomActions";
@@ -7,4 +9,5 @@ export * from "./HeaderFirstLevel";
 export * from "./HeaderSecondLevel";
 export * from "./ModalBSHeader";
 export * from "./common";
+export * from "./hooks";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}

package/lib/typescript/components/pictograms/Pictogram.d.ts

@@ -58,6 +58,9 @@ export declare const IOPictograms: {
     comunicationProblem: ({ size, colorValues, ...props }: SVGPictogramProps) => React.JSX.Element;
     payments: ({ size, colorValues, ...props }: SVGPictogramProps) => React.JSX.Element;
     workInProgress: ({ size, colorValues, ...props }: SVGPictogramProps) => React.JSX.Element;
+    smile: ({ size, colorValues, ...props }: SVGPictogramProps) => React.JSX.Element;
+    fingerprint: ({ size, colorValues, ...props }: SVGPictogramProps) => React.JSX.Element;
+    walletDoc: ({ size, colorValues, ...props }: SVGPictogramProps) => React.JSX.Element;
     ibanCard: ({ size, colorValues, ...props }: SVGPictogramProps) => React.JSX.Element;
     followMessage: ({ size, colorValues, ...props }: SVGPictogramProps) => React.JSX.Element;
     manual: ({ size, colorValues, ...props }: SVGPictogramProps) => React.JSX.Element;

package/lib/typescript/components/pictograms/Pictogram.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pictogram.d.ts","sourceRoot":"","sources":["../../../../src/components/pictograms/Pictogram.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,QAAQ,EAAyC,MAAM,YAAY,CAAC;AA4G7E,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAElE,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoExB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,YAAY,CAAC;AAErD,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,CAAC,EAAE,QAAQ,CAAC;IAIjB,cAAc,CAAC,EAAE,SAAS,GAAG,eAAe,GAAG,cAAc,CAAC;IAC9D,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;CACtC,CAAC;AAQF,eAAO,MAAM,SAAS,oDAMnB,iBAAiB,sBAgCnB,CAAC;AAUF,MAAM,MAAM,iBAAiB,GAAG,OAAO,CACnC,OAAO,GACP,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,UAAU,GACV,MAAM,GACN,UAAU,GACV,UAAU,GACV,SAAS,GACT,KAAK,GACL,UAAU,GACV,aAAa,GACb,eAAe,GACf,iBAAiB,GACjB,eAAe,GACf,cAAc,GACd,SAAS,GACT,eAAe,GACf,cAAc,GACd,WAAW,GACX,cAAc,GACd,UAAU,GACV,cAAc,GACd,MAAM,GACN,SAAS,GACT,OAAO,GACP,QAAQ,GACR,YAAY,GACZ,UAAU,GACV,SAAS,GACT,YAAY,GACZ,cAAc,GACd,MAAM,GACN,KAAK,GACL,cAAc,GACd,MAAM,GACN,QAAQ,GACR,gBAAgB,GAChB,UAAU,GACV,UAAU,GACV,YAAY,GACZ,gBAAgB,EAClB,YAAY,CACb,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE;KAC7B,GAAG,IAAI,iBAAiB,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,iBAAiB,KAAK,GAAG,CAAC,OAAO;CA2CzE,CAAC;AAEF,eAAO,MAAM,cAAc,oDAMxB,iBAAiB,sBAiCnB,CAAC;AAOF,eAAO,MAAM,kBAAkB;;;;;;;;CAQrB,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAMjE,eAAO,MAAM,kBAAkB;;;CAGrB,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,kBAAkB,CAAC"}
+{"version":3,"file":"Pictogram.d.ts","sourceRoot":"","sources":["../../../../src/components/pictograms/Pictogram.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,QAAQ,EAAyC,MAAM,YAAY,CAAC;AA+G7E,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAElE,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuExB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,YAAY,CAAC;AAErD,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,CAAC,EAAE,QAAQ,CAAC;IAIjB,cAAc,CAAC,EAAE,SAAS,GAAG,eAAe,GAAG,cAAc,CAAC;IAC9D,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;CACtC,CAAC;AASF,eAAO,MAAM,SAAS,oDAMnB,iBAAiB,sBAiCnB,CAAC;AAUF,MAAM,MAAM,iBAAiB,GAAG,OAAO,CACnC,OAAO,GACP,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,UAAU,GACV,MAAM,GACN,UAAU,GACV,UAAU,GACV,SAAS,GACT,KAAK,GACL,UAAU,GACV,aAAa,GACb,eAAe,GACf,iBAAiB,GACjB,eAAe,GACf,cAAc,GACd,SAAS,GACT,eAAe,GACf,cAAc,GACd,WAAW,GACX,cAAc,GACd,UAAU,GACV,cAAc,GACd,MAAM,GACN,SAAS,GACT,OAAO,GACP,QAAQ,GACR,YAAY,GACZ,UAAU,GACV,SAAS,GACT,YAAY,GACZ,cAAc,GACd,MAAM,GACN,KAAK,GACL,cAAc,GACd,MAAM,GACN,QAAQ,GACR,gBAAgB,GAChB,UAAU,GACV,UAAU,GACV,YAAY,GACZ,gBAAgB,EAClB,YAAY,CACb,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE;KAC7B,GAAG,IAAI,iBAAiB,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,iBAAiB,KAAK,GAAG,CAAC,OAAO;CA2CzE,CAAC;AAEF,eAAO,MAAM,cAAc,oDAMxB,iBAAiB,sBAkCnB,CAAC;AAOF,eAAO,MAAM,kBAAkB;;;;;;;;CAQrB,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAMjE,eAAO,MAAM,kBAAkB;;;CAGrB,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,kBAAkB,CAAC"}

package/lib/typescript/components/pictograms/svg/PictogramFingerprint.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { SVGPictogramProps } from "../types";
+declare const PictogramFingerprint: ({ size, colorValues, ...props }: SVGPictogramProps) => React.JSX.Element;
+export default PictogramFingerprint;
+//# sourceMappingURL=PictogramFingerprint.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PictogramFingerprint.d.ts","sourceRoot":"","sources":["../../../../../src/components/pictograms/svg/PictogramFingerprint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,QAAA,MAAM,oBAAoB,oCAIvB,iBAAiB,sBAuCnB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/lib/typescript/components/pictograms/svg/PictogramSmile.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { SVGPictogramProps } from "../types";
+declare const PictogramSmile: ({ size, colorValues, ...props }: SVGPictogramProps) => React.JSX.Element;
+export default PictogramSmile;
+//# sourceMappingURL=PictogramSmile.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PictogramSmile.d.ts","sourceRoot":"","sources":["../../../../../src/components/pictograms/svg/PictogramSmile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,QAAA,MAAM,cAAc,oCAAqC,iBAAiB,sBAezE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/typescript/components/pictograms/svg/PictogramWalletDoc.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { SVGPictogramProps } from "../types";
+declare const PictogramWalletDoc: ({ size, colorValues, ...props }: SVGPictogramProps) => React.JSX.Element;
+export default PictogramWalletDoc;
+//# sourceMappingURL=PictogramWalletDoc.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PictogramWalletDoc.d.ts","sourceRoot":"","sources":["../../../../../src/components/pictograms/svg/PictogramWalletDoc.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,QAAA,MAAM,kBAAkB,oCAIrB,iBAAiB,sBAiCnB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -180,7 +180,7 @@ export declare const IOColorsExtra: {
     "blue-50": string;
 };
 export type IOColorsExtra = keyof typeof IOColorsExtra;
-declare const themeKeys: readonly ["appBackground-primary", "appBackground-secondary", "appBackground-tertiary", "appBackground-accent", "interactiveElem-default", "interactiveElem-pressed", "listItem-pressed", "textHeading-default", "textHeading-secondary", "textHeading-tertiary", "textBody-default", "textBody-secondary", "textBody-tertiary", "cardBorder-default", "icon-default", "icon-decorative", "divider-default", "errorIcon", "errorText", "pictogram-hands", "pictogram-tint-main", "pictogram-tint-secondary"];
+declare const themeKeys: readonly ["appBackground-primary", "appBackground-secondary", "appBackground-tertiary", "appBackground-accent", "interactiveElem-default", "interactiveElem-pressed", "listItem-pressed", "textHeading-default", "textHeading-secondary", "textHeading-tertiary", "textBody-default", "textBody-secondary", "textBody-tertiary", "cardBorder-default", "icon-default", "icon-decorative", "divider-header", "divider-default", "divider-bottomBar", "errorIcon", "errorText", "pictogram-hands", "pictogram-tint-main", "pictogram-tint-secondary", "pictogram-tint-tertiary"];
 export type IOTheme = {
     [K in (typeof themeKeys)[number]]: IOColors;
 };

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

@@ -1 +1 @@
-{"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,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,cAAc,MAAM,8BAA8B,CAAC;AAyB/D,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2EnB,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;AA0BF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;CAkB1B,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;;;;;;;;CAQzB,CAAC;AACF,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,aAAa,CAAC;AAMvD,QAAA,MAAM,SAAS,8eA6BL,CAAC;AAEX,MAAM,MAAM,OAAO,GAAG;KACnB,CAAC,IAAI,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,GAAG,QAAQ;CAC5C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,OA6B1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,OAKhC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,OA4BzB,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;AAM/E;;;;GAIG;AAEH,eAAO,MAAM,SAAS,YAAa,UAAU,YAAW,MAAM,WAQ7D,CAAC"}
+{"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,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,cAAc,MAAM,8BAA8B,CAAC;AAyB/D,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2EnB,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;AA0BF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;CAkB1B,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;;;;;;;;CAQzB,CAAC;AACF,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,aAAa,CAAC;AAMvD,QAAA,MAAM,SAAS,gjBAgCL,CAAC;AAEX,MAAM,MAAM,OAAO,GAAG;KACnB,CAAC,IAAI,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,GAAG,QAAQ;CAC5C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,OAgC1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,OAKhC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,OA8BzB,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;AAM/E;;;;GAIG;AAEH,eAAO,MAAM,SAAS,YAAa,UAAU,YAAW,MAAM,WAQ7D,CAAC"}

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

@@ -21,4 +21,12 @@ export declare const IOModuleIDPHSpacing: IOModuleIDPSpacing;
 export declare const IOModuleIDPVSpacing: IOModuleIDPSpacing;
 export declare const IOModuleIDPSavedVSpacing: IOModuleIDPSpacing;
 export declare const IOListItemLogoMargin: IOModuleIDPSpacing;
+declare const spacingConstantKeys: readonly ["screenEndMargin"];
+export type IOSpacingConstants = {
+    [K in (typeof spacingConstantKeys)[number]]: IOSpacingScale;
+};
+export declare const IOSpacing: {
+    readonly screenEndMargin: 32;
+};
+export {};
 //# sourceMappingURL=IOSpacing.d.ts.map

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,wEAEjB,CAAC;AACX,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAG7D,eAAO,MAAM,QAAQ,yCAE6B,CAAC;AACnD,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;AAGjD,eAAO,MAAM,WAAW,8BAE0B,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAGvD,eAAO,MAAM,cAAc,mBAEuB,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAG7D,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC;AAC/D,eAAO,MAAM,kBAAkB,EAAE,eAAoB,CAAC;AACtD,eAAO,MAAM,qBAAqB,EAAE,eAAoB,CAAC;AACzD,eAAO,MAAM,qBAAqB,EAAE,eAAoB,CAAC;AAGzD,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AAC1D,eAAO,MAAM,aAAa,EAAE,YAAgB,CAAC;AAC7C,eAAO,MAAM,aAAa,EAAE,YAAgB,CAAC;AAG7C,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AAC5D,eAAO,MAAM,eAAe,EAAE,cAAkB,CAAC;AACjD,eAAO,MAAM,eAAe,EAAE,cAAkB,CAAC;AAGjD,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACtE,eAAO,MAAM,mBAAmB,EAAE,kBAAuB,CAAC;AAC1D,eAAO,MAAM,mBAAmB,EAAE,kBAAuB,CAAC;AAC1D,eAAO,MAAM,wBAAwB,EAAE,kBAAuB,CAAC;AAC/D,eAAO,MAAM,oBAAoB,EAAE,kBAAsB,CAAC"}
+{"version":3,"file":"IOSpacing.d.ts","sourceRoot":"","sources":["../../../src/core/IOSpacing.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,cAAc,wEAEjB,CAAC;AACX,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAG7D,eAAO,MAAM,QAAQ,yCAE6B,CAAC;AACnD,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;AAGjD,eAAO,MAAM,WAAW,8BAE0B,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAGvD,eAAO,MAAM,cAAc,mBAEuB,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAG7D,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC;AAC/D,eAAO,MAAM,kBAAkB,EAAE,eAAoB,CAAC;AACtD,eAAO,MAAM,qBAAqB,EAAE,eAAoB,CAAC;AACzD,eAAO,MAAM,qBAAqB,EAAE,eAAoB,CAAC;AAGzD,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AAC1D,eAAO,MAAM,aAAa,EAAE,YAAgB,CAAC;AAC7C,eAAO,MAAM,aAAa,EAAE,YAAgB,CAAC;AAG7C,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AAC5D,eAAO,MAAM,eAAe,EAAE,cAAkB,CAAC;AACjD,eAAO,MAAM,eAAe,EAAE,cAAkB,CAAC;AAGjD,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACtE,eAAO,MAAM,mBAAmB,EAAE,kBAAuB,CAAC;AAC1D,eAAO,MAAM,mBAAmB,EAAE,kBAAuB,CAAC;AAC1D,eAAO,MAAM,wBAAwB,EAAE,kBAAuB,CAAC;AAC/D,eAAO,MAAM,oBAAoB,EAAE,kBAAsB,CAAC;AAM1D,QAAA,MAAM,mBAAmB,8BAA+B,CAAC;AAEzD,MAAM,MAAM,kBAAkB,GAAG;KAC9B,CAAC,IAAI,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,GAAG,cAAc;CAC5D,CAAC;AAEF,eAAO,MAAM,SAAS;;CAEiB,CAAC"}

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

@@ -4,7 +4,6 @@ export * from "./IOTransitions";
 export * from "./IOStyles";
 export * from "./IOShapes";
 export * from "./IOSpacing";
-export * from "./IOStyleVariables";
 export * from "./IODSExperimentalContextProvider";
 export * from "./IOThemeContextProvider";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mCAAmC,CAAC;AAClD,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,mCAAmC,CAAC;AAClD,cAAc,0BAA0B,CAAC"}

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

@@ -13,7 +13,7 @@ declare const fonts: {
     DMMono: string;
 };
 export type IOFontFamily = keyof typeof fonts;
-declare const allFontSizes: (22 | 16 | 12 | 20 | 32 | 14 | 18 | 28 | 26 | 31 | 35)[];
+declare const allFontSizes: (16 | 12 | 20 | 32 | 14 | 18 | 28 | 22 | 26 | 31 | 35)[];
 export type IOFontSize = (typeof allFontSizes)[number];
 declare const weights: readonly ["Light", "Regular", "Medium", "Semibold", "Bold"];
 export type IOFontWeight = (typeof weights)[number];
@@ -46,6 +46,6 @@ export declare const makeFontFamilyName: (font: IOFontFamily, weight?: IOFontWei
  * @param weight
  * @param fontStyle
  */
-export declare const makeFontStyleObject: (size: 22 | 16 | 12 | 20 | 32 | 14 | 18 | 28 | 26 | 31 | 35 | undefined, font: "TitilliumSansPro" | "ReadexPro" | "DMMono" | undefined, lineHeight: TextStyle["lineHeight"], weight?: IOFontWeight, fontStyle?: TextStyle["fontStyle"], boldEnabled?: boolean) => FontStyleObject;
+export declare const makeFontStyleObject: (size: 16 | 12 | 20 | 32 | 14 | 18 | 28 | 22 | 26 | 31 | 35 | undefined, font: "TitilliumSansPro" | "ReadexPro" | "DMMono" | undefined, lineHeight: TextStyle["lineHeight"], weight?: IOFontWeight, fontStyle?: TextStyle["fontStyle"], boldEnabled?: boolean) => FontStyleObject;
 export {};
 //# sourceMappingURL=fonts.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "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/badge/Badge.tsx

@@ -86,7 +86,7 @@ export const Badge = ({ text, outline = false, variant, testID }: Badge) => {
       background: "error-100"
     },
     purple: {
-      foreground: "hanPurple-850",
+      foreground: "hanPurple-500",
       background: "hanPurple-100"
     },
     lightBlue: {
@@ -127,7 +127,7 @@ export const Badge = ({ text, outline = false, variant, testID }: Badge) => {
       foreground: "error-850"
     },
     purple: {
-      foreground: "hanPurple-850"
+      foreground: "hanPurple-500"
     },
     lightBlue: {
       foreground: "blueIO-850"

package/src/components/contentWrapper/ContentWrapper.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 import { View } from "react-native";
+import { WithTestID } from "src/utils/types";
 import type { IOAppMargin } from "../../core";
 import { IOVisualCostants } from "../../core/IOStyles";
 
-type IOContentWrapperProps = {
+type IOContentWrapperProps = WithTestID<{
   margin?: IOAppMargin;
   children: React.ReactNode;
-};
+}>;
 
 /**
 `ContentWrapper` is the main wrapper of the application. It automatically sets side margins,
@@ -15,9 +16,11 @@ depending on the size value
  */
 export const ContentWrapper = ({
   margin = IOVisualCostants.appMarginDefault,
+  testID,
   children
 }: IOContentWrapperProps) => (
   <View
+    testID={testID}
     style={{
       paddingHorizontal: margin
     }}

package/src/components/icons/Icon.tsx

@@ -199,10 +199,12 @@ import LegIconCheckOff from "./svg/LegIconCheckOff";
 import LegIconCheckOn from "./svg/LegIconCheckOn";
 import LegIconRadioOff from "./svg/LegIconRadioOff";
 import LegIconRadioOn from "./svg/LegIconRadioOn";
+import IconCieLetter from './svg/IconCieLetter';
 
 export const IOIcons = {
   spid: IconSpid,
   cie: IconCie /* io-cie */,
+  cieLetter: IconCieLetter,
   qrCode: IconQrCode,
   bell: IconBell,
   website: IconWebsite,

package/src/components/icons/svg/IconCieLetter.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../types";
+
+const IconCieLetter = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M18.5855 18.458C17.0895 19.3667 15.3387 19.8894 13.46 19.8894C7.97044 19.8894 3.51498 15.4213 3.51498 9.94468C3.51498 4.45532 7.97044 0 13.4472 0C16.8534 0 19.8577 1.72055 21.6503 4.32706L21.9491 4.67563L17.9748 8.08194L17.7289 7.79506L17.7239 7.8C17.7047 7.77353 17.6852 7.74723 17.6655 7.72109L17.4763 7.50035L17.4846 7.49319C16.4164 6.2133 14.8146 5.4 13.0259 5.4C9.82156 5.4 7.20446 8.00426 7.20446 11.2213H6.34911C6.34911 7.54468 9.34921 4.54468 13.0259 4.54468C15.0687 4.54468 16.9055 5.47165 18.1353 6.93552L20.8254 4.62985C19.1728 2.33792 16.4768 0.842553 13.4472 0.842553C8.43003 0.842553 4.35756 4.91489 4.35756 9.93192C4.35756 14.9489 8.43003 19.0213 13.4472 19.0213C15.2037 19.0213 16.8522 18.5179 18.242 17.6506L18.6227 17.3243L21.5772 20.7718C21.5779 20.7713 21.5787 20.7707 21.5794 20.7702L22.1922 21.383C19.9708 23.0298 17.2133 24 14.2387 24C7.58745 24 2.05961 19.1362 1 12.7787H1.86811C2.91496 18.6638 8.0598 23.1447 14.2387 23.1447C16.6948 23.1447 18.9961 22.4328 20.9386 21.2037L18.5855 18.458Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconCieLetter;

package/src/components/icons/svg/originals/IconCieLetter.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.5855 18.458C17.0895 19.3667 15.3387 19.8894 13.46 19.8894C7.97044 19.8894 3.51498 15.4213 3.51498 9.94468C3.51498 4.45532 7.97044 0 13.4472 0C16.8534 0 19.8577 1.72055 21.6503 4.32706L21.9491 4.67563L17.9748 8.08194L17.7289 7.79506L17.7239 7.8C17.7047 7.77353 17.6852 7.74723 17.6655 7.72109L17.4763 7.50035L17.4846 7.49319C16.4164 6.2133 14.8146 5.4 13.0259 5.4C9.82156 5.4 7.20446 8.00426 7.20446 11.2213H6.34911C6.34911 7.54468 9.34921 4.54468 13.0259 4.54468C15.0687 4.54468 16.9055 5.47165 18.1353 6.93552L20.8254 4.62985C19.1728 2.33792 16.4768 0.842553 13.4472 0.842553C8.43003 0.842553 4.35756 4.91489 4.35756 9.93192C4.35756 14.9489 8.43003 19.0213 13.4472 19.0213C15.2037 19.0213 16.8522 18.5179 18.242 17.6506L18.6227 17.3243L21.5772 20.7718C21.5779 20.7713 21.5787 20.7707 21.5794 20.7702L22.1922 21.383C19.9708 23.0298 17.2133 24 14.2387 24C7.58745 24 2.05961 19.1362 1 12.7787H1.86811C2.91496 18.6638 8.0598 23.1447 14.2387 23.1447C16.6948 23.1447 18.9961 22.4328 20.9386 21.2037L18.5855 18.458Z" fill="#0B3EE3"/></svg>

package/src/components/layout/BlockButtons.tsx

@@ -77,7 +77,7 @@ export type BlockButtonsProps = Props;
 
 /**
  * Implements a component that show buttons on a line on 1, 2 or 3 buttons
- * @deprecated This component is deprecated.
+ * @deprecated This component is deprecated. Use `FooterActionsInline` instead.
  */
 export const BlockButtons = (props: Props) => {
   const renderRightButton = () => {

package/src/components/layout/FooterActions.tsx

@@ -0,0 +1,260 @@
+import * as React from "react";
+import { ComponentProps, Fragment, PropsWithChildren, useState } from "react";
+import {
+  ColorValue,
+  LayoutChangeEvent,
+  LayoutRectangle,
+  StyleSheet,
+  Text,
+  View,
+  ViewStyle
+} from "react-native";
+import Animated from "react-native-reanimated";
+import {
+  IOColors,
+  IOSpacer,
+  IOSpacing,
+  IOVisualCostants,
+  buttonSolidHeight,
+  hexToRgba,
+  useIOExperimentalDesign,
+  useIOTheme
+} from "../../core";
+import { WithTestID } from "../../utils/types";
+import { ButtonLink, ButtonOutline, ButtonSolid } from "../buttons";
+import { VSpacer } from "../spacer";
+import { useBottomMargins } from "./hooks/useBottomMargins";
+
+type FooterSingleButton = {
+  type: "SingleButton";
+  primary: Omit<ComponentProps<typeof ButtonSolid>, "fullWidth">;
+  secondary?: never;
+  tertiary?: never;
+};
+
+type FooterTwoButtons = {
+  type: "TwoButtons";
+  primary: Omit<ComponentProps<typeof ButtonSolid>, "fullWidth">;
+  secondary: Omit<ComponentProps<typeof ButtonLink>, "color">;
+  tertiary?: never;
+};
+
+type FooterThreeButtons = {
+  type: "ThreeButtons";
+  primary: Omit<ComponentProps<typeof ButtonSolid>, "fullWidth">;
+  secondary: Omit<ComponentProps<typeof ButtonOutline>, "fullWidth" | "color">;
+  tertiary: Omit<ComponentProps<typeof ButtonLink>, "color">;
+};
+
+export type FooterActionsMeasurements = {
+  // Height of the "Actions" block
+  actionBlockHeight: number;
+  /* Height of the safe bottom area. It includes:
+     - Margin between screen content
+       and actions (contentEndMargin)
+     - Actions block height
+     - Eventual safe area margin (bottomMargin)
+     This is the total bottom padding that needs
+     to be applied to the ScrollView.
+  */
+  safeBottomAreaHeight: number;
+};
+
+type FooterActions = FooterSingleButton | FooterTwoButtons | FooterThreeButtons;
+
+type FooterAnimatedStyles = {
+  /* Apply object returned by `useAnimatedStyle` to the main block */
+  mainBlock?: Animated.AnimateStyle<ViewStyle>;
+  /* Apply object returned by `useAnimatedStyle` to the background */
+  background?: Animated.AnimateStyle<ViewStyle>;
+};
+
+type FooterActionsProps = WithTestID<
+  PropsWithChildren<{
+    actions?: FooterActions;
+    onMeasure?: (measurements: FooterActionsMeasurements) => void;
+    animatedStyles?: FooterAnimatedStyles;
+    /* Make the background transparent */
+    transparent?: boolean;
+    /* Don't include safe area insets */
+    excludeSafeAreaMargins?: boolean;
+    /* Fixed at the bottom of the screen */
+    fixed?: boolean;
+    /* Show the following elements:
+       - Opaque red background to show the component boundaries
+       - Height of the component */
+    debugMode?: boolean;
+  }>
+>;
+
+/* Margin between ButtonSolid and ButtonOutline */
+const spaceBetweenActions: IOSpacer = 16;
+/* Margin between ButtonSolid and ButtonLink */
+const spaceBetweenActionAndLink: IOSpacer = 16;
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    paddingHorizontal: IOVisualCostants.appMarginDefault,
+    width: "100%",
+    flexShrink: 0
+  },
+  debugText: {
+    position: "absolute",
+    right: 8,
+    top: -16,
+    color: IOColors.black,
+    fontSize: 9,
+    opacity: 0.75
+  },
+  blockShadow: {
+    shadowColor: IOColors.black,
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 32
+  }
+});
+
+export const FooterActions = ({
+  actions,
+  excludeSafeAreaMargins = false,
+  animatedStyles,
+  fixed = true,
+  transparent = false,
+  onMeasure,
+  testID,
+  debugMode = false
+}: FooterActionsProps) => {
+  const theme = useIOTheme();
+  const { isExperimental } = useIOExperimentalDesign();
+
+  const { bottomMargin, extraBottomMargin } = useBottomMargins(
+    !!actions?.secondary,
+    excludeSafeAreaMargins
+  );
+
+  /* Total height of actions */
+  const [actionBlockHeight, setActionBlockHeight] =
+    useState<LayoutRectangle["height"]>(0);
+
+  /* Background color should be app main background
+     (both light and dark themes) */
+  const HEADER_BG_COLOR: ColorValue = IOColors[theme["appBackground-primary"]];
+  const TRANSPARENT_BG_COLOR: ColorValue = "transparent";
+  const BUTTONSOLID_HEIGHT = isExperimental ? buttonSolidHeight : 40;
+
+  /* Safe background block. Cover everything until it reaches
+     the half of the primary action button. It avoids
+     glitchy behavior underneath.  */
+  const safeBackgroundBlockHeight =
+    bottomMargin + actionBlockHeight - BUTTONSOLID_HEIGHT / 2;
+
+  const getActionBlockMeasurements = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+    setActionBlockHeight(height);
+    /* Height of the safe bottom area, applied to the ScrollView:
+       Actions + Content end margin */
+    const safeBottomAreaHeight =
+      bottomMargin + height + IOSpacing.screenEndMargin;
+    onMeasure?.({ actionBlockHeight: height, safeBottomAreaHeight });
+  };
+
+  return (
+    <Animated.View
+      style={[
+        {
+          width: "100%",
+          paddingBottom: bottomMargin
+        },
+        fixed
+          ? { position: "absolute", bottom: 0 }
+          : { marginTop: IOSpacing.screenEndMargin },
+        debugMode && {
+          backgroundColor: hexToRgba(IOColors["error-500"], 0.15)
+        },
+        animatedStyles?.mainBlock
+      ]}
+      testID={testID}
+    >
+      {/* Safe background block. It's added because when you swipe up
+          quickly, the content below is visible for about 100ms. Without this
+          block, the content scrolls underneath. */}
+      <Animated.View
+        style={[
+          {
+            ...(fixed && {
+              width: "100%",
+              height: safeBackgroundBlockHeight,
+              position: "absolute",
+              bottom: 0,
+              backgroundColor: transparent
+                ? TRANSPARENT_BG_COLOR
+                : HEADER_BG_COLOR
+            }),
+            ...(fixed ? styles.blockShadow : null)
+          },
+          animatedStyles?.background
+        ]}
+        pointerEvents="none"
+      />
+
+      <View
+        style={styles.buttonContainer}
+        onLayout={getActionBlockMeasurements}
+        pointerEvents="box-none"
+      >
+        {debugMode && (
+          <Text style={styles.debugText}>{`Height: ${actionBlockHeight}`}</Text>
+        )}
+
+        {renderActions(actions, extraBottomMargin)}
+      </View>
+    </Animated.View>
+  );
+};
+
+const renderActions = (
+  actions: FooterActions | undefined,
+  extraBottomMargin: number
+) => {
+  if (!actions) {
+    return null;
+  }
+  const {
+    type,
+    primary: primaryAction,
+    secondary: secondaryAction,
+    tertiary: tertiaryAction
+  } = actions;
+  return (
+    <Fragment>
+      {primaryAction && <ButtonSolid fullWidth {...primaryAction} />}
+      {type === "TwoButtons" && secondaryAction && (
+        <View style={{ alignSelf: "center", marginBottom: extraBottomMargin }}>
+          <VSpacer size={spaceBetweenActionAndLink} />
+          <ButtonLink color="primary" {...secondaryAction} />
+        </View>
+      )}
+      {type === "ThreeButtons" && (
+        <>
+          {secondaryAction && (
+            <>
+              <VSpacer size={spaceBetweenActions} />
+              <ButtonOutline fullWidth color="primary" {...secondaryAction} />
+            </>
+          )}
+          {tertiaryAction && (
+            <View
+              style={{ alignSelf: "center", marginBottom: extraBottomMargin }}
+            >
+              <VSpacer size={spaceBetweenActionAndLink} />
+              <ButtonLink color="primary" {...tertiaryAction} />
+            </View>
+          )}
+        </>
+      )}
+    </Fragment>
+  );
+};

package/src/components/layout/FooterActionsInline.tsx

@@ -0,0 +1,137 @@
+import * as React from "react";
+import { ComponentProps, PropsWithChildren } from "react";
+import { ColorValue, LayoutChangeEvent, StyleSheet, View } from "react-native";
+import {
+  IOColors,
+  IOSpacer,
+  IOSpacing,
+  IOSpacingScale,
+  IOVisualCostants,
+  useIOTheme,
+  useIOThemeContext
+} from "../../core";
+import { WithTestID } from "../../utils/types";
+import { ButtonOutline, ButtonSolid } from "../buttons";
+import { HSpacer } from "../spacer";
+import { useBottomMargins } from "./hooks/useBottomMargins";
+
+export type FooterActionsInlineMeasurements = {
+  /* Height of the safe bottom area. It includes:
+     - Margin between screen content
+       and actions (contentEndMargin)
+     - Actions block height
+     - Eventual safe area margin (bottomMargin)
+     This is the total bottom padding that needs
+     to be applied to the ScrollView.
+  */
+  safeBottomAreaHeight: number;
+};
+
+type FooterActionsInline = WithTestID<
+  PropsWithChildren<{
+    startAction: Omit<ComponentProps<typeof ButtonOutline>, "fullWidth">;
+    endAction: Omit<ComponentProps<typeof ButtonSolid>, "fullWidth">;
+    onMeasure?: (measurements: FooterActionsInlineMeasurements) => void;
+    /* Don't include safe area insets */
+    excludeSafeAreaMargins?: boolean;
+    /* Fixed at the bottom of the screen */
+    fixed?: boolean;
+  }>
+>;
+
+/* Margin between ButtonSolid and ButtonOutline */
+const spaceBetweenActions: IOSpacer = 16;
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    paddingHorizontal: IOVisualCostants.appMarginDefault,
+    width: "100%",
+    flexShrink: 0
+  },
+  buttonWrapper: {
+    flex: 1
+  },
+  blockShadow: {
+    shadowColor: IOColors.black,
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 32,
+    elevation: 10 // Prop supported on Android only
+  }
+});
+
+export const FooterActionsInline = ({
+  startAction,
+  endAction,
+  excludeSafeAreaMargins = false,
+  fixed = true,
+  onMeasure,
+  testID
+}: FooterActionsInline) => {
+  const theme = useIOTheme();
+  const { themeType } = useIOThemeContext();
+
+  const { bottomMargin } = useBottomMargins(false, excludeSafeAreaMargins);
+
+  /* Top padding applied above the actions */
+  const topSpacingValue: IOSpacingScale = 16;
+  const topSpacing = fixed ? topSpacingValue : 0;
+
+  /* Background color should be app main background
+     (both light and dark themes) */
+  const HEADER_BG_COLOR: ColorValue = IOColors[theme["appBackground-primary"]];
+
+  const getActionBlockMeasurements = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+    /* Height of the safe bottom area, applied to the ScrollView:
+       Actions + Screen end margin */
+    const safeBottomAreaHeight =
+      bottomMargin + height + IOSpacing.screenEndMargin;
+    onMeasure?.({ safeBottomAreaHeight });
+  };
+
+  return (
+    <View
+      style={[
+        {
+          width: "100%",
+          paddingBottom: bottomMargin
+        },
+        fixed
+          ? {
+              position: "absolute",
+              bottom: 0,
+              backgroundColor: HEADER_BG_COLOR
+            }
+          : { marginTop: IOSpacing.screenEndMargin },
+        /* Apply shadow only on light theme OR if fixed */
+        fixed || themeType === "light" ? styles.blockShadow : {},
+        /* Apply bottom border only on dark theme */
+        themeType === "dark" && {
+          borderTopColor: IOColors[theme["divider-bottomBar"]],
+          borderTopWidth: 1
+        }
+      ]}
+      testID={testID}
+    >
+      <View
+        style={[styles.buttonContainer, { paddingTop: topSpacing }]}
+        onLayout={getActionBlockMeasurements}
+        pointerEvents="box-none"
+      >
+        <View style={{ flexDirection: "row" }}>
+          <View style={styles.buttonWrapper}>
+            <ButtonOutline fullWidth {...startAction} />
+          </View>
+          <HSpacer size={spaceBetweenActions} />
+          <View style={styles.buttonWrapper}>
+            <ButtonSolid fullWidth {...endAction} />
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};