@pagopa/io-app-design-system 1.1.1 → 1.1.3

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import Animated from "react-native-reanimated";
+import { WithTestID } from "../../utils/types";
+export type HeaderSecondLevel = WithTestID<{
+    scrollValues: ScrollValues;
+    title: string;
+    goBack: () => void;
+    backAccessibilityLabel: string;
+    firstAction?: React.ReactNode;
+    secondAction?: React.ReactNode;
+    thirdAction?: React.ReactNode;
+    transparent?: boolean;
+}>;
+type ScrollValues = {
+    contentOffsetY: Animated.SharedValue<number>;
+    triggerOffset: number;
+};
+export declare const HeaderSecondLevel: ({ scrollValues, goBack, backAccessibilityLabel, title, firstAction, secondAction, thirdAction, transparent, testID }: HeaderSecondLevel) => React.JSX.Element;
+export default HeaderSecondLevel;
+//# sourceMappingURL=HeaderSecondLevel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderSecondLevel.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/HeaderSecondLevel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,QAIN,MAAM,yBAAyB,CAAC;AAUjC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAI/C,MAAM,MAAM,iBAAiB,GAAG,UAAU,CAAC;IACzC,YAAY,EAAE,YAAY,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,sBAAsB,EAAE,MAAM,CAAC;IAG/B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC,CAAC;AAEH,KAAK,YAAY,GAAG;IAClB,cAAc,EAAE,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7C,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AA2BF,eAAO,MAAM,iBAAiB,yHAU3B,iBAAiB,sBA2EnB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -1,2 +1,5 @@
+export * from "./GradientScrollView";
 export * from "./GradientBottomActions";
+export * from "./HeaderFirstLevel";
+export * from "./HeaderSecondLevel";
 //# 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,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/index.tsx"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC"}

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

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { IOTheme } from "../../core/IOColors";
+import { IOFontWeight } from "../../utils/fonts";
+import { ExternalTypographyProps, TypographyProps } from "./common";
+type AllowedColors = IOTheme["textBody-default"] | "blueIO-850";
+type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
+type OwnProps = ExternalTypographyProps<TypographyProps<AllowedWeight, AllowedColors>>;
+/**
+ * Typography component to render `CTA` text with font size {@link ctaFontSize} and fontFamily {@link ctaFontName}.
+ * default values(if not defined) are weight: {@link ctaDefaultWeight}, color: {@link ctaDefaultColor}
+ * @param props
+ * @constructor
+ */
+export declare const CTA: React.FunctionComponent<OwnProps>;
+export {};
+//# sourceMappingURL=CTA.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CTA.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/CTA.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAgB,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAgB,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEpE,KAAK,aAAa,GAAG,OAAO,CAAC,kBAAkB,CAAC,GAAG,YAAY,CAAC;AAChE,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;AAEnE,KAAK,QAAQ,GAAG,uBAAuB,CACrC,eAAe,CAAC,aAAa,EAAE,aAAa,CAAC,CAC9C,CAAC;AAUF;;;;;GAKG;AACH,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAO9C,CAAC"}

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

@@ -1,6 +1,6 @@
 export * from "./BaseTypography";
 export * from "./Body";
-export * from "./common";
+export * from "./CTA";
 export * from "./Factory";
 export * from "./H1";
 export * from "./H2";
@@ -12,4 +12,5 @@ export * from "./Label";
 export * from "./LabelSmall";
 export * from "./Link";
 export * from "./Monospace";
+export * from "./common";
 //# sourceMappingURL=index.d.ts.map

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,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,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,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/index.tsx"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,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,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC"}

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

@@ -60,6 +60,7 @@ export declare const IOStyles: {
     };
 };
 export declare const buttonSolidHeight: number;
+export declare const iconBtnSizeSmall: number;
 export declare const IOButtonLegacyStyles: {
     button: {
         flexDirection: "row";

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

@@ -1 +1 @@
-{"version":3,"file":"IOStyles.d.ts","sourceRoot":"","sources":["../../../src/core/IOStyles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEpE;;GAEG;AAEH,UAAU,gBAAgB;IACxB,gBAAgB,EAAE,WAAW,CAAC;IAE9B,YAAY,EAAE,MAAM,CAAC;IAErB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,EAAE,gBAK9B,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDnB,CAAC;AAgBH,eAAO,MAAM,iBAAiB,EAAE,MAAuB,CAAC;AAKxD,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;CAuC/B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDzB,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;CAsB7B,CAAC;AAEH;;GAEG;AAEH,UAAU,sBAAsB;IAC9B,eAAe,EAAE,cAAc,CAAC;IAChC,iBAAiB,EAAE,WAAW,CAAC;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,YAAY,EAAE,cAAc,CAAC;IAC7B,QAAQ,EAAE,eAAe,CAAC;IAC1B,WAAW,EAAE,eAAe,CAAC;CAC9B;AAED,eAAO,MAAM,sBAAsB,EAAE,sBAOpC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;CAW3B,CAAC;AAEH;;GAEG;AAEH,UAAU,2BAA2B;IACnC,IAAI,EAAE,eAAe,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,QAAQ,CAAC;IAC9B,cAAc,EAAE,QAAQ,CAAC;IACzB,SAAS,EAAE,QAAQ,CAAC;CACrB;AAED,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,QAAQ,CAAC;IAC1B,cAAc,EAAE,QAAQ,CAAC;IACzB,SAAS,EAAE,QAAQ,CAAC;IACpB,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,iCAAiC;IACzC,mBAAmB,EAAE,QAAQ,CAAC;IAC9B,cAAc,EAAE,QAAQ,CAAC;CAC1B;AAED,eAAO,MAAM,2BAA2B,EAAE,2BAMzC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,oBASlC,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,iCAI7C,CAAC;AAEJ,UAAU,+BAA+B;IACvC,eAAe,EAAE,cAAc,CAAC;IAChC,iBAAiB,EAAE,WAAW,CAAC;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,YAAY,EAAE,QAAQ,CAAC;IACvB,QAAQ,EAAE,eAAe,CAAC;IAC1B,iBAAiB,EAAE,QAAQ,CAAC;CAC7B;AAED,eAAO,MAAM,+BAA+B,EAAE,+BAQ3C,CAAC;AAEJ,eAAO,MAAM,yBAAyB;;;;;;;;;;;CAWpC,CAAC"}
+{"version":3,"file":"IOStyles.d.ts","sourceRoot":"","sources":["../../../src/core/IOStyles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEpE;;GAEG;AAEH,UAAU,gBAAgB;IACxB,gBAAgB,EAAE,WAAW,CAAC;IAE9B,YAAY,EAAE,MAAM,CAAC;IAErB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,EAAE,gBAK9B,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDnB,CAAC;AAgBH,eAAO,MAAM,iBAAiB,EAAE,MAAuB,CAAC;AAGxD,eAAO,MAAM,gBAAgB,EAAE,MAAW,CAAC;AAE3C,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;CAuC/B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDzB,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;CAsB7B,CAAC;AAEH;;GAEG;AAEH,UAAU,sBAAsB;IAC9B,eAAe,EAAE,cAAc,CAAC;IAChC,iBAAiB,EAAE,WAAW,CAAC;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,YAAY,EAAE,cAAc,CAAC;IAC7B,QAAQ,EAAE,eAAe,CAAC;IAC1B,WAAW,EAAE,eAAe,CAAC;CAC9B;AAED,eAAO,MAAM,sBAAsB,EAAE,sBAOpC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;CAW3B,CAAC;AAEH;;GAEG;AAEH,UAAU,2BAA2B;IACnC,IAAI,EAAE,eAAe,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,QAAQ,CAAC;IAC9B,cAAc,EAAE,QAAQ,CAAC;IACzB,SAAS,EAAE,QAAQ,CAAC;CACrB;AAED,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,QAAQ,CAAC;IAC1B,cAAc,EAAE,QAAQ,CAAC;IACzB,SAAS,EAAE,QAAQ,CAAC;IACpB,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,iCAAiC;IACzC,mBAAmB,EAAE,QAAQ,CAAC;IAC9B,cAAc,EAAE,QAAQ,CAAC;CAC1B;AAED,eAAO,MAAM,2BAA2B,EAAE,2BAMzC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,oBASlC,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,iCAI7C,CAAC;AAEJ,UAAU,+BAA+B;IACvC,eAAe,EAAE,cAAc,CAAC;IAChC,iBAAiB,EAAE,WAAW,CAAC;IAC/B,UAAU,EAAE,cAAc,CAAC;IAC3B,YAAY,EAAE,QAAQ,CAAC;IACvB,QAAQ,EAAE,eAAe,CAAC;IAC1B,iBAAiB,EAAE,QAAQ,CAAC;CAC7B;AAED,eAAO,MAAM,+BAA+B,EAAE,+BAQ3C,CAAC;AAEJ,eAAO,MAAM,yBAAyB;;;;;;;;;;;CAWpC,CAAC"}

package/package.json

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

package/src/components/alert/Alert.tsx

@@ -1,11 +1,11 @@
+import React, { useCallback } from "react";
 import {
   GestureResponderEvent,
   Pressable,
   StyleSheet,
-  View,
-  Text
+  Text,
+  View
 } from "react-native";
-import React, { useCallback } from "react";
 import Animated, {
   Extrapolate,
   interpolate,
@@ -14,21 +14,21 @@ import Animated, {
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
-import { Label } from "../typography/Label";
+import { IOScaleValues, IOSpringValues } from "../../core/IOAnimations";
 import {
   IOColors,
   IOColorsStatusBackground,
   IOColorsStatusForeground
 } from "../../core/IOColors";
-import { IOIconSizeScale, IOIcons, Icon } from "../icons";
-import { HSpacer, VSpacer } from "../spacer";
-import { IOStyles } from "../../core/IOStyles";
 import { IOAlertRadius } from "../../core/IOShapes";
 import { IOAlertSpacing } from "../../core/IOSpacing";
-import { H4 } from "../typography/H4";
-import { IOScaleValues, IOSpringValues } from "../../core/IOAnimations";
+import { IOStyles } from "../../core/IOStyles";
 import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
+import { IOIconSizeScale, IOIcons, Icon } from "../icons";
+import { HSpacer, VSpacer } from "../spacer";
+import { H4 } from "../typography/H4";
+import { Label } from "../typography/Label";
 
 const iconSize: IOIconSizeScale = 24;
 
@@ -73,7 +73,7 @@ type AlertActionProps =
       onPress?: never;
     };
 
-export type Alert = AlertProps & AlertActionProps;
+type AlertType = AlertProps & AlertActionProps;
 
 type VariantStates = {
   icon: IOIcons;
@@ -83,7 +83,7 @@ type VariantStates = {
 
 // COMPONENT CONFIGURATION
 
-const mapVariantStates: Record<NonNullable<Alert["variant"]>, VariantStates> = {
+const mapVariantStates: Record<NonNullable<AlertType["variant"]>, VariantStates> = {
   error: {
     icon: "errorFilled",
     background: "error-100",
@@ -116,7 +116,7 @@ export const Alert = ({
   fullWidth = false,
   accessibilityHint,
   testID
-}: Alert) => {
+}: AlertType): JSX.Element => {
   const isPressed: Animated.SharedValue<number> = useSharedValue(0);
 
   // Scaling transformation applied when the button is pressed

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

@@ -154,6 +154,7 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
+          onTouchEnd={[Function]}
           style={
             {
               "alignSelf": "flex-start",

package/src/components/buttons/ButtonLink.tsx

@@ -185,6 +185,7 @@ export const ButtonLink = React.memo(
         onPress={onPress}
         onPressIn={onPressIn}
         onPressOut={onPressOut}
+        onTouchEnd={onPressOut}
         accessible={true}
         disabled={disabled}
         hitSlop={{ top: 14, right: 24, bottom: 14, left: 24 }}

package/src/components/buttons/IconButton.tsx

@@ -11,7 +11,6 @@ import Animated, {
   withSpring
 } from "react-native-reanimated";
 import {
-  IOButtonStyles,
   IOColors,
   IOIconButtonStyles,
   IOScaleValues,
@@ -124,7 +123,6 @@ export const IconButton = ({
 
   return (
     <Pressable
-      style={IOButtonStyles.dimensionsDefault}
       disabled={disabled}
       // Events
       onPress={onPress}

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

@@ -202,6 +202,7 @@ exports[`Test Buttons Components ButtonLink Snapshot 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  onTouchEnd={[Function]}
   style={
     {
       "alignSelf": "flex-start",
@@ -496,11 +497,6 @@ exports[`Test Buttons Components IconButton Snapshot 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  style={
-    {
-      "alignSelf": "flex-start",
-    }
-  }
 >
   <View
     style={

package/src/components/checkbox/AnimatedMessageCheckbox.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect } from "react";
+import { StyleSheet, Pressable, PressableProps } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  interpolate,
+  withSpring,
+  withTiming,
+  Easing
+} from "react-native-reanimated";
+import { IOColors } from "../../core/IOColors";
+import { IOSpringValues } from "../../core/IOAnimations";
+import { AnimatedTick } from "../common/AnimatedTick";
+import {
+  IOSelectionTickVisualParams,
+  IOVisualCostants
+} from "../../core/IOStyles";
+import { IOSpacingScale } from "../../core/IOSpacing";
+
+type Props = {
+  checked?: boolean;
+};
+
+type AnimatedMessageCheckbox = Props & Pick<PressableProps, "onPress">;
+
+const internalSpacing: IOSpacingScale = 4;
+
+const styles = StyleSheet.create({
+  checkBoxWrapper: {
+    width: IOVisualCostants.avatarSizeSmall,
+    height: IOVisualCostants.avatarSizeSmall,
+    padding: internalSpacing
+  },
+  checkBoxCircle: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: IOVisualCostants.avatarSizeSmall,
+    height: IOVisualCostants.avatarSizeSmall,
+    borderRadius: IOVisualCostants.avatarSizeSmall
+  }
+});
+
+/**
+ * Animated message checkbox used for the specific message
+ * list item (Select mode that enables related actions)
+ */
+export const AnimatedMessageCheckbox = ({
+  checked,
+  onPress
+}: AnimatedMessageCheckbox) => {
+  const isChecked = checked ?? true;
+
+  const circleAnimationProgress = useSharedValue(checked ? 1 : 0);
+  const tickAnimationProgress = useSharedValue(checked ? 1 : 0);
+
+  useEffect(() => {
+    // eslint-disable-next-line functional/immutable-data
+    circleAnimationProgress.value = withSpring(
+      checked ? 1 : 0,
+      IOSpringValues.selection
+    );
+    // eslint-disable-next-line functional/immutable-data
+    tickAnimationProgress.value = withTiming(checked ? 1 : 0, {
+      duration: 250,
+      easing: Easing.out(Easing.cubic)
+    });
+  }, [checked, circleAnimationProgress, tickAnimationProgress]);
+
+  const animatedCheckboxCircle = useAnimatedStyle(() => {
+    const scale = interpolate(circleAnimationProgress.value, [0, 1], [0.8, 1]);
+    const opacity = circleAnimationProgress.value;
+
+    return {
+      opacity,
+      transform: [{ scale }]
+    };
+  });
+
+  return (
+    <Pressable
+      testID="AnimatedMessageCheckboxInput"
+      onPress={onPress}
+      style={styles.checkBoxWrapper}
+    >
+      <Animated.View
+        style={[
+          styles.checkBoxCircle,
+          {
+            backgroundColor:
+              IOColors[IOSelectionTickVisualParams.bgColorOnState]
+          },
+          animatedCheckboxCircle
+        ]}
+      />
+      {isChecked && (
+        <AnimatedTick
+          progress={tickAnimationProgress}
+          strokeWidth={1.5}
+          stroke={IOColors[IOSelectionTickVisualParams.tickColor]}
+        />
+      )}
+    </Pressable>
+  );
+};

package/src/components/checkbox/index.tsx

@@ -1,2 +1,3 @@
 export * from "./CheckboxLabel";
 export * from "./AnimatedCheckbox";
+export * from "./AnimatedMessageCheckbox";

package/src/components/icons/Icon.tsx

@@ -144,8 +144,10 @@ import IconSystemSettingsiOS from "./svg/IconSystemSettingsiOS";
 import IconSystemToggleInstructions from "./svg/IconSystemToggleInstructions";
 import IconSystemAppsAndroid from "./svg/IconSystemAppsAndroid";
 import IconSystemNotificationsInstructions from "./svg/IconSystemNotificationsInstructions";
+import IconArchive from "./svg/IconArchive";
 
 export const IOIcons = {
+  archive: IconArchive,
   spid: IconSpid,
   cie: IconCie /* io-cie */,
   qrCode: IconQrCode,

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconArchive = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0 4c0-1.65685 1.34315-3 3-3h18c1.6569 0 3 1.34315 3 3v2c0 1.30622-.8348 2.41746-2 2.82929V18c0 2.7614-2.2386 5-5 5H7c-2.76142 0-5-2.2386-5-5V8.82929C.8348 8.41746 0 7.30622 0 6V4Zm4 5h16v9c0 1.6569-1.3431 3-3 3H7c-1.65685 0-3-1.3431-3-3V9Zm18-3c0 .55228-.4477 1-1 1H3c-.55228 0-1-.44771-1-1V4c0-.55228.44772-1 1-1h18c.5523 0 1 .44771 1 1v2ZM9 11c-.55229 0-1 .4477-1 1s.44771 1 1 1h6c.5523 0 1-.4477 1-1s-.4477-1-1-1H9Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconArchive;

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

@@ -0,0 +1,4 @@
+<svg fill="none"
+  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M0 4c0-1.65685 1.34315-3 3-3h18c1.6569 0 3 1.34315 3 3v2c0 1.30622-.8348 2.41746-2 2.82929V18c0 2.7614-2.2386 5-5 5H7c-2.76142 0-5-2.2386-5-5V8.82929C.8348 8.41746 0 7.30622 0 6V4Zm4 5h16v9c0 1.6569-1.3431 3-3 3H7c-1.65685 0-3-1.3431-3-3V9Zm18-3c0 .55228-.4477 1-1 1H3c-.55228 0-1-.44771-1-1V4c0-.55228.44772-1 1-1h18c.5523 0 1 .44771 1 1v2ZM9 11c-.55229 0-1 .4477-1 1s.44771 1 1 1h6c.5523 0 1-.4477 1-1s-.4477-1-1-1H9Z" fill="#0E0F13" />
+</svg>

package/src/components/layout/HeaderSecondLevel.tsx

@@ -0,0 +1,153 @@
+import * as React from "react";
+import { View, StyleSheet, Platform } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import Animated, {
+  interpolate,
+  interpolateColor,
+  useAnimatedStyle
+} from "react-native-reanimated";
+import { IOColors, hexToRgba } from "../../core/IOColors";
+
+import {
+  IOStyles,
+  IOVisualCostants,
+  iconBtnSizeSmall
+} from "../../core/IOStyles";
+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;
+  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;
+};
+
+const HEADER_BG_COLOR: IOColors = "white";
+const borderColorDisabled = hexToRgba(IOColors["grey-100"], 0);
+const headerTransparent = hexToRgba(IOColors[HEADER_BG_COLOR], 0);
+const titleHorizontalMargin: IOSpacer = 16;
+
+const styles = StyleSheet.create({
+  headerInner: {
+    paddingHorizontal: IOVisualCostants.appMarginDefault,
+    height: IOVisualCostants.headerHeight,
+    borderBottomWidth: 1,
+    flexGrow: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  headerTitle: {
+    ...makeFontStyleObject("Regular", false, "ReadexPro"),
+    fontSize: 14,
+    textAlign: "center",
+    flexGrow: 1,
+    flexShrink: 1,
+    marginHorizontal: titleHorizontalMargin
+  }
+});
+
+export const HeaderSecondLevel = ({
+  scrollValues,
+  goBack,
+  backAccessibilityLabel,
+  title,
+  firstAction,
+  secondAction,
+  thirdAction,
+  transparent = false,
+  testID
+}: HeaderSecondLevel) => {
+  const insets = useSafeAreaInsets();
+
+  const headerWrapperAnimatedStyle = useAnimatedStyle(() => ({
+    backgroundColor: transparent
+      ? interpolateColor(
+          scrollValues.contentOffsetY.value,
+          [0, scrollValues.triggerOffset],
+          [headerTransparent, IOColors[HEADER_BG_COLOR]]
+        )
+      : undefined,
+    borderColor: interpolateColor(
+      scrollValues.contentOffsetY.value,
+      [0, scrollValues.triggerOffset],
+      [borderColorDisabled, IOColors["grey-100"]]
+    )
+  }));
+
+  const titleAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(
+      scrollValues.contentOffsetY.value,
+      [0, scrollValues.triggerOffset],
+      [0, 1]
+    )
+  }));
+
+  return (
+    <Animated.View
+      accessibilityRole="header"
+      testID={testID}
+      style={[
+        { marginTop: insets.top },
+        styles.headerInner,
+        transparent
+          ? { borderBottomWidth: 0 }
+          : { backgroundColor: IOColors[HEADER_BG_COLOR] },
+        headerWrapperAnimatedStyle
+      ]}
+    >
+      <IconButton
+        icon={Platform.OS === "ios" ? "backiOS" : "backAndroid"}
+        color="neutral"
+        onPress={goBack}
+        accessibilityLabel={backAccessibilityLabel}
+      />
+      <Animated.Text
+        numberOfLines={1}
+        style={[styles.headerTitle, titleAnimatedStyle]}
+      >
+        {title}
+      </Animated.Text>
+      <View style={[IOStyles.row, { flexShrink: 0 }]}>
+        {firstAction ? (
+          firstAction
+        ) : (
+          <HSpacer size={iconBtnSizeSmall as IOSpacer} />
+        )}
+        {secondAction && (
+          <>
+            {/* 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>
+    </Animated.View>
+  );
+};
+
+export default HeaderSecondLevel;

package/src/components/layout/index.tsx

@@ -1 +1,4 @@
+export * from "./GradientScrollView";
 export * from "./GradientBottomActions";
+export * from "./HeaderFirstLevel";
+export * from "./HeaderSecondLevel";

package/src/components/typography/CTA.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { IOTheme, IOThemeLight } from "../../core/IOColors";
+import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
+import { useTypographyFactory } from "./Factory";
+import { ExternalTypographyProps, TypographyProps } from "./common";
+
+type AllowedColors = IOTheme["textBody-default"] | "blueIO-850";
+type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
+
+type OwnProps = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+/* Common typographic styles */
+const ctaFontSize = 16;
+const ctaLineHeight = 20;
+const ctaDefaultColor: AllowedColors = IOThemeLight["textBody-default"];
+/* New typographic styles */
+const ctaFontName: IOFontFamily = "ReadexPro";
+const ctaDefaultWeight: AllowedWeight = "Regular";
+
+/**
+ * Typography component to render `CTA` text with font size {@link ctaFontSize} and fontFamily {@link ctaFontName}.
+ * default values(if not defined) are weight: {@link ctaDefaultWeight}, color: {@link ctaDefaultColor}
+ * @param props
+ * @constructor
+ */
+export const CTA: React.FunctionComponent<OwnProps> = props =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: ctaDefaultWeight,
+    defaultColor: ctaDefaultColor,
+    font: ctaFontName,
+    fontStyle: { fontSize: ctaFontSize, lineHeight: ctaLineHeight }
+  });

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

@@ -32,6 +32,38 @@ exports[`Test Typography Components Body Snapshot 1`] = `
 </Text>
 `;
 
+exports[`Test Typography Components CTA Snapshot 1`] = `
+<Text
+  color="black"
+  defaultColor="black"
+  defaultWeight="Regular"
+  font="ReadexPro"
+  fontStyle={
+    {
+      "fontSize": 16,
+      "lineHeight": 20,
+    }
+  }
+  style={
+    [
+      {
+        "fontSize": 16,
+        "lineHeight": 20,
+      },
+      {
+        "color": "#0E0F13",
+        "fontFamily": "Readex Pro",
+        "fontStyle": "normal",
+        "fontWeight": "400",
+      },
+    ]
+  }
+  weight="Regular"
+>
+  Text
+</Text>
+`;
+
 exports[`Test Typography Components H1 Snapshot 1`] = `
 <Text
   color="bluegreyDark"

package/src/components/typography/__test__/typography.test.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import * as TestRenderer from "react-test-renderer";
-import { IOFontWeight } from "../../../utils/fonts";
 import type { IOColors } from "../../../core/IOColors";
+import { IOFontWeight } from "../../../utils/fonts";
 import { Body } from "../Body";
-import { calculateWeightColor } from "../common";
+import { CTA } from "../CTA";
 import { H1 } from "../H1";
 import { H2 } from "../H2";
 import { H3 } from "../H3";
@@ -14,6 +14,7 @@ import { Label } from "../Label";
 import { LabelSmall } from "../LabelSmall";
 import { Link } from "../Link";
 import { Monospace } from "../Monospace";
+import { calculateWeightColor } from "../common";
 
 describe("Test Typography Components", () => {
   it("H1 Snapshot", () => {
@@ -144,6 +145,10 @@ describe("Test Typography Components", () => {
     const bodyDefault = TestRenderer.create(<Body>Text</Body>).toJSON();
     expect(bodyDefault).toMatchSnapshot();
   });
+  it("CTA Snapshot", () => {
+    const cta = TestRenderer.create(<CTA>Text</CTA>).toJSON();
+    expect(cta).toMatchSnapshot();
+  });
   it("LabelSmall Snapshot", () => {
     const labelSmallDefault = TestRenderer.create(
       <LabelSmall>Text</LabelSmall>

package/src/components/typography/index.tsx

@@ -1,6 +1,6 @@
 export * from "./BaseTypography";
 export * from "./Body";
-export * from "./common";
+export * from "./CTA";
 export * from "./Factory";
 export * from "./H1";
 export * from "./H2";
@@ -12,5 +12,5 @@ export * from "./Label";
 export * from "./LabelSmall";
 export * from "./Link";
 export * from "./Monospace";
-
+export * from "./common";