@pagopa/io-app-design-system 1.11.2 → 1.12.0

package/lib/typescript/components/toast/ToastProvider.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+/**
+ * The maximum number of toasts that can be displayed at the same time
+ * If the number of the toasts exceeds this number, the oldest one will be removed
+ */
+export declare const MAX_TOAST_STACK_SIZE = 3;
+/**
+ * The time in milliseconds that a toast notification will be displayed
+ */
+export declare const TOAST_DURATION_TIME = 5000;
+/**
+ * This is the time in milliseconds between two toast notifications.
+ * This will throttle the toast notifications to avoid displaying too many of them at the same time
+ * and causing visual glitches.
+ */
+export declare const TOAST_THROTTLE_TIME = 500;
+type ToastProviderProps = {
+    children: React.ReactNode;
+};
+export declare const ToastProvider: ({ children }: ToastProviderProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=ToastProvider.d.ts.map

package/lib/typescript/components/toast/ToastProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/ToastProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B;;;GAGG;AACH,eAAO,MAAM,oBAAoB,IAAI,CAAC;AAEtC;;GAEG;AACH,eAAO,MAAM,mBAAmB,OAAO,CAAC;AAExC;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,MAAM,CAAC;AAyBvC,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,aAAa,iBAAkB,kBAAkB,sBAqE7D,CAAC"}

package/lib/typescript/components/toast/context.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Toast } from "./types";
+export type ToastContext = {
+    addToast: (props: Toast) => number;
+    removeToast: (id: number) => void;
+    removeAllToasts: () => void;
+};
+export declare const ToastContext: import("react").Context<ToastContext>;
+//# sourceMappingURL=context.d.ts.map

package/lib/typescript/components/toast/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/context.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC;IACnC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,YAAY,uCAIvB,CAAC"}

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

@@ -0,0 +1,4 @@
+export * from "./ToastNotification";
+export * from "./ToastProvider";
+export * from "./useIOToast";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC"}

package/lib/typescript/components/toast/types.d.ts

@@ -0,0 +1,11 @@
+import { HapticFeedbackTypes } from "react-native-haptic-feedback";
+import { IOIcons } from "@pagopa/io-app-design-system";
+export type ToastVariant = "neutral" | "error" | "info" | "success" | "warning";
+export type Toast = {
+    message: string;
+    variant?: ToastVariant;
+    icon?: IOIcons;
+    hapticFeedback?: keyof typeof HapticFeedbackTypes;
+};
+export type ToastOptions = Omit<Toast, "message">;
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/components/toast/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAEvD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AAEhF,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,OAAO,mBAAmB,CAAC;CACnD,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC"}

package/lib/typescript/components/toast/useIOToast.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { ToastOptions } from "./types";
+export declare const useIOToast: () => {
+    show: (message: string, options?: ToastOptions) => void;
+    error: (message: string) => void;
+    info: (message: string) => void;
+    success: (message: string) => void;
+    warning: (message: string) => void;
+    hide: (id: number) => void;
+    hideAll: () => void;
+};
+export type IOToast = ReturnType<typeof useIOToast>;
+export declare const IOToastRef: React.MutableRefObject<{
+    show: (message: string, options?: ToastOptions) => void;
+    error: (message: string) => void;
+    info: (message: string) => void;
+    success: (message: string) => void;
+    warning: (message: string) => void;
+    hide: (id: number) => void;
+    hideAll: () => void;
+}>;
+export declare const IOToast: IOToast;
+//# sourceMappingURL=useIOToast.d.ts.map

package/lib/typescript/components/toast/useIOToast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIOToast.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/useIOToast.ts"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,eAAO,MAAM,UAAU;oBAKT,MAAM,YAAY,YAAY;qBAO9B,MAAM;oBAWN,MAAM;uBAWN,MAAM;uBAWN,MAAM;;;CAsBnB,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAEpD,eAAO,MAAM,UAAU;oBAlET,MAAM,YAAY,YAAY;qBAO9B,MAAM;oBAWN,MAAM;uBAWN,MAAM;uBAWN,MAAM;;;EA2BqC,CAAC;AAE1D,eAAO,MAAM,OAAO,EAAE,OASrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.11.2",
+  "version": "1.12.0",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -67,6 +67,7 @@
     "@storybook/react-webpack5": "^7.4.0",
     "@storybook/testing-library": "^0.2.0",
     "@types/jest": "^28.1.2",
+    "@types/lodash": "^4.14.157",
     "@types/react": "~17.0.38",
     "@types/react-native": "0.70.0",
     "babel-loader": "^9.1.3",
@@ -170,6 +171,7 @@
     ]
   },
   "dependencies": {
+    "lodash": "^4.17.21",
     "@expo/vector-icons": "^13.0.0",
     "@pagopa/ts-commons": "^12.0.0",
     "@testing-library/jest-native": "^5.4.2",

package/src/components/Advice/__test__/__snapshots__/advice.test.tsx.snap

@@ -78,6 +78,7 @@ exports[`Test Advice Components Advice Snapshot 1`] = `
     }
   />
   <Text
+    allowFontScaling={false}
     color="bluegrey"
     defaultColor="bluegrey"
     defaultWeight="Regular"

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

@@ -70,6 +70,7 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         color="blueIO-850"
         defaultColor="black"
         defaultWeight="SemiBold"
@@ -184,7 +185,9 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
             }
           >
             <Text
+              allowFontScaling={false}
               ellipsizeMode="tail"
+              maxFontSizeMultiplier={1.3}
               numberOfLines={1}
               style={
                 [

package/src/components/buttons/ButtonLink.tsx

@@ -236,10 +236,8 @@ export const ButtonLink = React.memo(
             ]}
             numberOfLines={1}
             ellipsizeMode="tail"
-            /* A11y-related props:
-                DON'T UNCOMMENT THEM */
-            /* allowFontScaling
-                maxFontSizeMultiplier={1.3} */
+            allowFontScaling={isExperimental}
+            maxFontSizeMultiplier={1.3}
           >
             {label}
           </Animated.Text>

package/src/components/buttons/ButtonOutline.tsx

@@ -332,6 +332,7 @@ export const ButtonOutline = ({
       <Animated.View
         style={[
           buttonStyles.button,
+          isExperimental && fullWidth && { paddingHorizontal: 16 },
           buttonStylesLocal.buttonWithBorder,
           buttonStyles.buttonSizeDefault,
           iconPosition === "end" && { flexDirection: "row-reverse" },
@@ -380,10 +381,8 @@ export const ButtonOutline = ({
           ]}
           numberOfLines={1}
           ellipsizeMode="tail"
-          /* A11y-related props:
-                DON'T UNCOMMENT THEM */
-          /* allowFontScaling
-                maxFontSizeMultiplier={1.3} */
+          allowFontScaling={isExperimental}
+          maxFontSizeMultiplier={1.3}
         >
           {label}
         </Animated.Text>

package/src/components/buttons/ButtonSolid.tsx

@@ -232,6 +232,7 @@ export const ButtonSolid = React.memo(
         <Animated.View
           style={[
             buttonStyles.button,
+            isExperimental && fullWidth && { paddingHorizontal: 16 },
             iconPosition === "end" && { flexDirection: "row-reverse" },
             buttonStyles.buttonSizeDefault,
             disabled
@@ -259,10 +260,8 @@ export const ButtonSolid = React.memo(
             style={IOButtonStyles.label}
             numberOfLines={1}
             ellipsizeMode="tail"
-            /* A11y-related props:
-                DON'T UNCOMMENT THEM */
-            /* allowFontScaling
-                maxFontSizeMultiplier={1.3} */
+            allowFontScaling={isExperimental}
+            maxFontSizeMultiplier={1.3}
           >
             {label}
           </ButtonText>

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

@@ -67,6 +67,7 @@ exports[`Test Buttons Components ButtonExtendedOutline Snapshot 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         color="black"
         defaultColor="black"
         defaultWeight="SemiBold"
@@ -232,7 +233,9 @@ exports[`Test Buttons Components ButtonLink Snapshot 1`] = `
     }
   >
     <Text
+      allowFontScaling={false}
       ellipsizeMode="tail"
+      maxFontSizeMultiplier={1.3}
       numberOfLines={1}
       style={
         [
@@ -308,6 +311,7 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
           "paddingHorizontal": 16,
           "textAlignVertical": "center",
         },
+        false,
         {
           "borderWidth": 1,
         },
@@ -332,7 +336,9 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
     }
   >
     <Text
+      allowFontScaling={false}
       ellipsizeMode="tail"
+      maxFontSizeMultiplier={1.3}
       numberOfLines={1}
       style={
         [
@@ -411,6 +417,7 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
           "textAlignVertical": "center",
         },
         false,
+        false,
         {
           "height": 40,
         },
@@ -429,6 +436,7 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
     }
   >
     <Text
+      allowFontScaling={false}
       color="white"
       defaultColor="white"
       defaultWeight="Bold"
@@ -439,6 +447,7 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
           "fontSize": 16,
         }
       }
+      maxFontSizeMultiplier={1.3}
       numberOfLines={1}
       style={
         [

package/src/components/icons/Icon.tsx

@@ -157,6 +157,9 @@ import IconContactless from "./svg/IconContactless";
 import IconDisabilityCard from "./svg/IconDisabilityCard";
 import IconDriverLicense from "./svg/IconDriverLicense";
 import IconHealthCard from "./svg/IconHealthCard";
+import IconDocPaymentCode from "./svg/IconDocPaymentCode";
+import IconNotes from "./svg/IconNotes";
+import IconEntityCode from "./svg/IconEntityCode";
 
 export const IOIcons = {
   archive: IconArchive,
@@ -200,13 +203,16 @@ export const IOIcons = {
   option: IconOption,
   key: IconKey,
   docGiacenza: IconGiacenza,
+  docPaymentCode: IconDocPaymentCode,
   docAttach: IconDocumentAttachment,
   docAttachPDF: IconDocumentAttachmentPDF,
+  notes: IconNotes,
   attachment: IconAttachment,
   add: IconAdd,
   success: IconSuccess,
   ok: IconOk,
   fiscalCodeIndividual: IconFiscalCodeIndividual,
+  entityCode: IconEntityCode,
   creditCard: IconCreditCard,
   bonus: IconBonus,
   transactionsBoxed: IconTransactionsBoxed,

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconDocPaymentCode = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5 2C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V10H17C15.3431 10 14 8.65685 14 7V2H5ZM16 2.49902V7C16 7.55229 16.4477 8 17 8H21.501C21.3911 7.83409 21.2641 7.67835 21.1213 7.53553L16.4645 2.87868C16.3216 2.73586 16.1659 2.60893 16 2.49902ZM0 5C0 2.23858 2.23858 0 5 0H14.3431C15.6692 0 16.941 0.526784 17.8787 1.46447L22.5355 6.12132C23.4732 7.059 24 8.33077 24 9.65685V19C24 21.7614 21.7614 24 19 24H5C2.23858 24 0 21.7614 0 19V5ZM5 17.5C5 16.6716 5.67157 16 6.5 16C7.32843 16 8 16.6716 8 17.5C8 18.3284 7.32843 19 6.5 19C5.67157 19 5 18.3284 5 17.5ZM10 17.5C10 16.6716 10.6716 16 11.5 16H14.5C15.3284 16 16 16.6716 16 17.5C16 18.3284 15.3284 19 14.5 19H11.5C10.6716 19 10 18.3284 10 17.5Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconDocPaymentCode;

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconEntityCode = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4 4H20C21.1046 4 22 4.89543 22 6V18C22 19.1046 21.1046 20 20 20H4C2.89543 20 2 19.1046 2 18V6C2 4.89543 2.89543 4 4 4ZM0 6C0 3.79086 1.79086 2 4 2H20C22.2091 2 24 3.79086 24 6V18C24 20.2091 22.2091 22 20 22H4C1.79086 22 0 20.2091 0 18V6ZM7.20416 8.26887C7.76751 7.91038 8.48744 7.91038 9.05078 8.26887L11.7771 10.0038C12.0747 10.1932 12.2549 10.5215 12.2549 10.8743V11.5286C12.2549 11.7185 12.1009 11.8725 11.911 11.8725H11.567V15.656C11.567 15.846 11.413 16 11.2231 16H9.84725C9.65729 16 9.5033 15.846 9.5033 15.656V11.8725H6.75165V15.656C6.75165 15.846 6.59765 16 6.40769 16H5.03187C4.84191 16 4.68791 15.846 4.68791 15.656V11.8725H4.34396C4.15399 11.8725 4 11.7185 4 11.5286V10.8743C4 10.5215 4.18024 10.1932 4.47788 10.0038L7.20416 8.26887ZM15 9C14.4477 9 14 9.44772 14 10C14 10.5523 14.4477 11 15 11H17C17.5523 11 18 10.5523 18 10C18 9.44772 17.5523 9 17 9H15ZM14 14C14 13.4477 14.4477 13 15 13H19C19.5523 13 20 13.4477 20 14C20 14.5523 19.5523 15 19 15H15C14.4477 15 14 14.5523 14 14Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconEntityCode;

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconNotes = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5 2C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V10H17C15.3431 10 14 8.65685 14 7V2H5ZM16 2.49902V7C16 7.55229 16.4477 8 17 8H21.501C21.3911 7.83409 21.2641 7.67835 21.1213 7.53553L16.4645 2.87868C16.3216 2.73586 16.1659 2.60893 16 2.49902ZM0 5C0 2.23858 2.23858 0 5 0H14.3431C15.6692 0 16.941 0.526784 17.8787 1.46447L22.5355 6.12132C23.4732 7.059 24 8.33077 24 9.65685V19C24 21.7614 21.7614 24 19 24H5C2.23858 24 0 21.7614 0 19V5ZM5 6.5C5 5.67157 5.67157 5 6.5 5H9.5C10.3284 5 11 5.67157 11 6.5C11 7.32843 10.3284 8 9.5 8H6.5C5.67157 8 5 7.32843 5 6.5ZM6 13C5.44772 13 5 13.4477 5 14C5 14.5523 5.44772 15 6 15H18C18.5523 15 19 14.5523 19 14C19 13.4477 18.5523 13 18 13H6ZM5 18C5 17.4477 5.44772 17 6 17H18C18.5523 17 19 17.4477 19 18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18Z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default IconNotes;

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

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V10H17C15.3431 10 14 8.65685 14 7V2H5ZM16 2.49902V7C16 7.55229 16.4477 8 17 8H21.501C21.3911 7.83409 21.2641 7.67835 21.1213 7.53553L16.4645 2.87868C16.3216 2.73586 16.1659 2.60893 16 2.49902ZM0 5C0 2.23858 2.23858 0 5 0H14.3431C15.6692 0 16.941 0.526784 17.8787 1.46447L22.5355 6.12132C23.4732 7.059 24 8.33077 24 9.65685V19C24 21.7614 21.7614 24 19 24H5C2.23858 24 0 21.7614 0 19V5ZM5 17.5C5 16.6716 5.67157 16 6.5 16C7.32843 16 8 16.6716 8 17.5C8 18.3284 7.32843 19 6.5 19C5.67157 19 5 18.3284 5 17.5ZM10 17.5C10 16.6716 10.6716 16 11.5 16H14.5C15.3284 16 16 16.6716 16 17.5C16 18.3284 15.3284 19 14.5 19H11.5C10.6716 19 10 18.3284 10 17.5Z" fill="#BBC2D6"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 4H20C21.1046 4 22 4.89543 22 6V18C22 19.1046 21.1046 20 20 20H4C2.89543 20 2 19.1046 2 18V6C2 4.89543 2.89543 4 4 4ZM0 6C0 3.79086 1.79086 2 4 2H20C22.2091 2 24 3.79086 24 6V18C24 20.2091 22.2091 22 20 22H4C1.79086 22 0 20.2091 0 18V6ZM7.20416 8.26887C7.76751 7.91038 8.48744 7.91038 9.05078 8.26887L11.7771 10.0038C12.0747 10.1932 12.2549 10.5215 12.2549 10.8743V11.5286C12.2549 11.7185 12.1009 11.8725 11.911 11.8725H11.567V15.656C11.567 15.846 11.413 16 11.2231 16H9.84725C9.65729 16 9.5033 15.846 9.5033 15.656V11.8725H6.75165V15.656C6.75165 15.846 6.59765 16 6.40769 16H5.03187C4.84191 16 4.68791 15.846 4.68791 15.656V11.8725H4.34396C4.15399 11.8725 4 11.7185 4 11.5286V10.8743C4 10.5215 4.18024 10.1932 4.47788 10.0038L7.20416 8.26887ZM15 9C14.4477 9 14 9.44772 14 10C14 10.5523 14.4477 11 15 11H17C17.5523 11 18 10.5523 18 10C18 9.44772 17.5523 9 17 9H15ZM14 14C14 13.4477 14.4477 13 15 13H19C19.5523 13 20 13.4477 20 14C20 14.5523 19.5523 15 19 15H15C14.4477 15 14 14.5523 14 14Z" fill="#2B2E38"/>
+</svg>

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

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C3.34315 2 2 3.34315 2 5V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V10H17C15.3431 10 14 8.65685 14 7V2H5ZM16 2.49902V7C16 7.55229 16.4477 8 17 8H21.501C21.3911 7.83409 21.2641 7.67835 21.1213 7.53553L16.4645 2.87868C16.3216 2.73586 16.1659 2.60893 16 2.49902ZM0 5C0 2.23858 2.23858 0 5 0H14.3431C15.6692 0 16.941 0.526784 17.8787 1.46447L22.5355 6.12132C23.4732 7.059 24 8.33077 24 9.65685V19C24 21.7614 21.7614 24 19 24H5C2.23858 24 0 21.7614 0 19V5ZM5 6.5C5 5.67157 5.67157 5 6.5 5H9.5C10.3284 5 11 5.67157 11 6.5C11 7.32843 10.3284 8 9.5 8H6.5C5.67157 8 5 7.32843 5 6.5ZM6 13C5.44772 13 5 13.4477 5 14C5 14.5523 5.44772 15 6 15H18C18.5523 15 19 14.5523 19 14C19 13.4477 18.5523 13 18 13H6ZM5 18C5 17.4477 5.44772 17 6 17H18C18.5523 17 19 17.4477 19 18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18Z" fill="#BBC2D6"/>
+</svg>

package/src/components/index.tsx

@@ -18,6 +18,7 @@ export * from "./spacer";
 export * from "./switch";
 export * from "./tag";
 export * from "./tabs";
+export * from "./toast";
 export * from "./typography";
 export * from "./textInput";
 export * from "./layout";

package/src/components/layout/Dismissable.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { Dimensions } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+  Easing,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming
+} from "react-native-reanimated";
+import { WithTestID } from "../../utils/types";
+
+const windowWidth = Dimensions.get("window").width;
+
+type Dismissable = WithTestID<{
+  onDismiss?: () => void;
+  dismissThreshold?: number;
+  children: React.ReactNode;
+}>;
+
+/**
+ * Component that allows for a dismissable gesture, both left and right.
+ * When the threshold is reached, the `onDismiss` callback is called.
+ * @param onDismiss Callback to be called when the threshold is reached.
+ * @param dismissThreshold Threshold to be reached to call the `onDismiss` callback.
+ * @param children Children to be rendered inside the component.
+ * @returns A dismissable component.
+ */
+const Dismissable = ({
+  onDismiss = () => undefined,
+  dismissThreshold = windowWidth / 3,
+  children,
+  testID
+}: Dismissable) => {
+  const translateX = useSharedValue(0);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      {
+        translateX: translateX.value
+      }
+    ]
+  }));
+
+  const pan = Gesture.Pan()
+    .onUpdate(event => {
+      // eslint-disable-next-line functional/immutable-data
+      translateX.value = event.translationX;
+    })
+    .onEnd(event => {
+      if (Math.abs(event.translationX) > dismissThreshold) {
+        // eslint-disable-next-line functional/immutable-data
+        translateX.value = withTiming(
+          windowWidth * Math.sign(event.translationX),
+          {
+            duration: 300,
+            easing: Easing.inOut(Easing.exp)
+          },
+          runOnJS(onDismiss)
+        );
+      } else {
+        // eslint-disable-next-line functional/immutable-data
+        translateX.value = withSpring(0, { mass: 0.5 });
+      }
+    })
+    .withTestId(testID ?? "");
+
+  return (
+    <GestureDetector gesture={pan}>
+      <Animated.View style={animatedStyle}>{children}</Animated.View>
+    </GestureDetector>
+  );
+};
+
+export { Dismissable };

package/src/components/layout/HeaderFirstLevel.tsx

@@ -5,16 +5,43 @@ import { WithTestID } from "../../utils/types";
 import { IOStyles, IOVisualCostants, IOColors } from "../../core";
 import { H3 } from "../typography";
 import { HSpacer } from "../spacer";
+import { IconButton } from "../buttons";
+import { ActionProp } from "./common";
 
-export type HeaderFirstLevel = WithTestID<{
+type CommonProps = WithTestID<{
   title: string;
-  // Accepted components: IconButton
-  // Don't use any components other than this, please.
-  firstAction?: React.ReactNode;
-  secondAction?: React.ReactNode;
-  thirdAction?: React.ReactNode;
 }>;
 
+interface Base extends CommonProps {
+  type: "base";
+  firstAction?: never;
+  secondAction?: never;
+  thirdAction?: never;
+}
+
+interface OneAction extends CommonProps {
+  type: "singleAction";
+  firstAction: ActionProp;
+  secondAction?: never;
+  thirdAction?: never;
+}
+
+interface TwoActions extends CommonProps {
+  type: "twoActions";
+  firstAction: ActionProp;
+  secondAction: ActionProp;
+  thirdAction?: never;
+}
+
+interface ThreeActions extends CommonProps {
+  type: "threeActions";
+  firstAction: ActionProp;
+  secondAction: ActionProp;
+  thirdAction: ActionProp;
+}
+
+export type HeaderFirstLevel = Base | OneAction | TwoActions | ThreeActions;
+
 const HEADER_BG_COLOR: IOColors = "white";
 
 const styles = StyleSheet.create({
@@ -30,10 +57,11 @@ const styles = StyleSheet.create({
 
 export const HeaderFirstLevel = ({
   title,
+  type,
+  testID,
   firstAction,
   secondAction,
-  thirdAction,
-  testID
+  thirdAction
 }: HeaderFirstLevel) => {
   const insets = useSafeAreaInsets();
 
@@ -51,20 +79,21 @@ export const HeaderFirstLevel = ({
           {title}
         </H3>
         <View style={[IOStyles.row, { flexShrink: 0 }]}>
-          {firstAction}
-          {secondAction && (
+          {type !== "base" && <IconButton {...firstAction} color="neutral" />}
+          {(type === "twoActions" || type === "threeActions") && (
             <>
               {/* Ideally, with the "gap" flex property,
               we can get rid of these ugly constructs */}
+              +.9+
               <HSpacer size={16} />
-              {secondAction}
+              <IconButton {...secondAction} color="neutral" />
             </>
           )}
-          {thirdAction && (
+          {type === "threeActions" && (
             <>
               {/* Same as above */}
               <HSpacer size={16} />
-              {thirdAction}
+              <IconButton {...thirdAction} color="neutral" />
             </>
           )}
         </View>

package/src/components/layout/HeaderSecondLevel.tsx

@@ -19,11 +19,7 @@ import type { IOSpacer } from "../../core/IOSpacing";
 import { WithTestID } from "../../utils/types";
 import IconButton from "../buttons/IconButton";
 import { makeFontStyleObject } from "../../utils/fonts";
-
-type ActionProp = Pick<
-  React.ComponentProps<typeof IconButton>,
-  "icon" | "onPress" | "accessibilityLabel" | "accessibilityHint" | "testID"
->;
+import { ActionProp } from "./common";
 
 type ScrollValues = {
   contentOffsetY: Animated.SharedValue<number>;
@@ -41,17 +37,23 @@ type CommonProps = WithTestID<{
 
 interface Base extends CommonProps {
   type: "base";
+  firstAction?: never;
+  secondAction?: never;
+  thirdAction?: never;
 }
 
 interface OneAction extends CommonProps {
   type: "singleAction";
   firstAction: ActionProp;
+  secondAction?: never;
+  thirdAction?: never;
 }
 
 interface TwoActions extends CommonProps {
   type: "twoActions";
   firstAction: ActionProp;
   secondAction: ActionProp;
+  thirdAction?: never;
 }
 
 interface ThreeActions extends CommonProps {
@@ -98,16 +100,18 @@ const styles = StyleSheet.create({
  * @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;
+export const HeaderSecondLevel = ({
+  scrollValues = undefined,
+  goBack,
+  backAccessibilityLabel,
+  title,
+  type,
+  transparent = false,
+  testID,
+  firstAction,
+  secondAction,
+  thirdAction
+}: HeaderSecondLevel) => {
   const { isExperimental } = useIOExperimentalDesign();
   const insets = useSafeAreaInsets();
 
@@ -176,7 +180,7 @@ export const HeaderSecondLevel = (props: HeaderSecondLevel) => {
         </Animated.Text>
         <View style={[IOStyles.row, { flexShrink: 0 }]}>
           {type !== "base" ? (
-            <IconButton {...props.firstAction} color="neutral" />
+            <IconButton {...firstAction} color="neutral" />
           ) : (
             <HSpacer size={iconBtnSizeSmall as IOSpacer} />
           )}
@@ -185,14 +189,14 @@ export const HeaderSecondLevel = (props: HeaderSecondLevel) => {
               {/* Ideally, with the "gap" flex property,
               we can get rid of these ugly constructs */}
               <HSpacer size={16} />
-              <IconButton {...props.secondAction} color="neutral" />
+              <IconButton {...secondAction} color="neutral" />
             </>
           )}
           {type === "threeActions" && (
             <>
               {/* Same as above */}
               <HSpacer size={16} />
-              <IconButton {...props.thirdAction} color="neutral" />
+              <IconButton {...thirdAction} color="neutral" />
             </>
           )}
         </View>

package/src/components/layout/common.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { IconButton } from "../buttons";
+
+export type ActionProp = Pick<
+  React.ComponentProps<typeof IconButton>,
+  "icon" | "onPress" | "accessibilityLabel" | "accessibilityHint" | "testID"
+>;

package/src/components/layout/index.tsx

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