@pagopa/io-app-design-system 1.13.1 → 1.15.0

package/lib/typescript/components/badge/Badge.d.ts

@@ -1,11 +1,12 @@
 import React from "react";
 import { WithTestID } from "../../utils/types";
 export type Badge = WithTestID<{
+    outline?: boolean;
     text: string;
     variant: "default" | "info" | "warning" | "error" | "success" | "purple" | "lightBlue" | "blue" | "turquoise" | "contrast";
 }>;
 /**
  * Official badge component
  */
-export declare const Badge: ({ text, variant, testID }: Badge) => React.JSX.Element;
+export declare const Badge: ({ text, outline, variant, testID }: Badge) => React.JSX.Element;
 //# sourceMappingURL=Badge.d.ts.map

package/lib/typescript/components/badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,MAAM,MAAM,KAAK,GAAG,UAAU,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EACH,SAAS,GACT,MAAM,GACN,SAAS,GACT,OAAO,GACP,SAAS,GACT,QAAQ,GACR,WAAW,GACX,MAAM,GACN,WAAW,GACX,UAAU,CAAC;CAChB,CAAC,CAAC;AAgFH;;GAEG;AACH,eAAO,MAAM,KAAK,8BAA+B,KAAK,sBAuBrD,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAUvC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,MAAM,MAAM,KAAK,GAAG,UAAU,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EACH,SAAS,GACT,MAAM,GACN,SAAS,GACT,OAAO,GACP,SAAS,GACT,QAAQ,GACR,WAAW,GACX,MAAM,GACN,WAAW,GACX,UAAU,CAAC;CAChB,CAAC,CAAC;AAyHH;;GAEG;AACH,eAAO,MAAM,KAAK,uCAAgD,KAAK,sBAqCtE,CAAC"}

package/lib/typescript/components/banner/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../src/components/banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EAGrB,IAAI,EAEL,MAAM,cAAc,CAAC;AAmBtB,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAGL,iBAAiB,EAClB,MAAM,eAAe,CAAC;AA8CvB,KAAK,eAAe,GAAG,UAAU,CAAC;IAChC,IAAI,EAAE,KAAK,GAAG,OAAO,CAAC;IACtB,KAAK,EAAE,SAAS,GAAG,WAAW,CAAC;IAC/B,aAAa,EAAE,iBAAiB,CAAC;IACjC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAE/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC,CAAC;AAGH,KAAK,mBAAmB,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,KAAK,oBAAoB,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,KAAK,CAAA;CAAE,CAAC;AAE/D,KAAK,uBAAuB,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpE,KAAK,mBAAmB,GACpB,mBAAmB,GACnB,oBAAoB,GACpB,uBAAuB,CAAC;AAE5B,KAAK,iBAAiB,GAClB;IACE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,GACD;IACE,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACvC,CAAC;AAGN,KAAK,gBAAgB,GACjB;IACE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GACD;IACE,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEN,MAAM,MAAM,MAAM,GAAG,eAAe,GAClC,mBAAmB,GACnB,iBAAiB,GACjB,gBAAgB,CAAC;AAMnB,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,eAAe,CAAC,OAAO,CAAC,CAGnE,CAAC;AAUF,eAAO,MAAM,MAAM,iJAchB,MAAM,sBA8HR,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../src/components/banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EAGrB,IAAI,EAEL,MAAM,cAAc,CAAC;AAmBtB,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAGL,iBAAiB,EAClB,MAAM,eAAe,CAAC;AA8CvB,KAAK,eAAe,GAAG,UAAU,CAAC;IAChC,IAAI,EAAE,KAAK,GAAG,OAAO,CAAC;IACtB,KAAK,EAAE,SAAS,GAAG,WAAW,CAAC;IAC/B,aAAa,EAAE,iBAAiB,CAAC;IACjC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAE/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC,CAAC;AAGH,KAAK,mBAAmB,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9D,KAAK,oBAAoB,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,KAAK,CAAA;CAAE,CAAC;AAE/D,KAAK,uBAAuB,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpE,KAAK,mBAAmB,GACpB,mBAAmB,GACnB,oBAAoB,GACpB,uBAAuB,CAAC;AAE5B,KAAK,iBAAiB,GAClB;IACE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD,iBAAiB,CAAC,EAAE,KAAK,CAAC;CAC3B,GACD;IACE,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACvC,CAAC;AAGN,KAAK,gBAAgB,GACjB;IACE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GACD;IACE,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEN,MAAM,MAAM,MAAM,GAAG,eAAe,GAClC,mBAAmB,GACnB,iBAAiB,GACjB,gBAAgB,CAAC;AAMnB,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,eAAe,CAAC,OAAO,CAAC,CAGnE,CAAC;AAUF,eAAO,MAAM,MAAM,iJAchB,MAAM,sBAiIR,CAAC"}

package/lib/typescript/components/listitems/ListItemNav.d.ts

@@ -2,13 +2,24 @@ import React from "react";
 import { GestureResponderEvent } from "react-native";
 import { WithTestID } from "../../utils/types";
 import { IOIcons } from "../icons";
-export type ListItemNav = WithTestID<{
+import { IOLogoPaymentType } from "../logos";
+type ListItemNavPartialProps = WithTestID<{
     value: string | React.ReactNode;
     description?: string | React.ReactNode;
     onPress: (event: GestureResponderEvent) => void;
-    icon?: IOIcons;
     accessibilityLabel: string;
 }>;
-export declare const ListItemNav: ({ value, description, onPress, icon, accessibilityLabel, testID }: ListItemNav) => React.JSX.Element;
+export type ListItemNavGraphicProps = {
+    icon?: never;
+    paymentLogo: IOLogoPaymentType;
+} | {
+    icon: IOIcons;
+    paymentLogo?: never;
+} | {
+    icon?: never;
+    paymentLogo?: never;
+};
+export type ListItemNav = ListItemNavPartialProps & ListItemNavGraphicProps;
+export declare const ListItemNav: ({ value, description, onPress, icon, paymentLogo, accessibilityLabel, testID }: ListItemNav) => React.JSX.Element;
 export default ListItemNav;
 //# sourceMappingURL=ListItemNav.d.ts.map

package/lib/typescript/components/listitems/ListItemNav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemNav.d.ts","sourceRoot":"","sources":["../../../../src/components/listitems/ListItemNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EACL,qBAAqB,EAKtB,MAAM,cAAc,CAAC;AAsBtB,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAQ,MAAM,UAAU,CAAC;AAazC,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC;IACnC,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,kBAAkB,EAAE,MAAM,CAAC;CAC5B,CAAC,CAAC;AAEH,eAAO,MAAM,WAAW,sEAOrB,WAAW,sBA8Hb,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ListItemNav.d.ts","sourceRoot":"","sources":["../../../../src/components/listitems/ListItemNav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EACL,qBAAqB,EAKtB,MAAM,cAAc,CAAC;AAsBtB,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAQ,MAAM,UAAU,CAAC;AAEzC,OAAO,EAAE,iBAAiB,EAAe,MAAM,UAAU,CAAC;AAY1D,KAAK,uBAAuB,GAAG,UAAU,CAAC;IACxC,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAEhD,kBAAkB,EAAE,MAAM,CAAC;CAC5B,CAAC,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAC/B;IAAE,IAAI,CAAC,EAAE,KAAK,CAAC;IAAC,WAAW,EAAE,iBAAiB,CAAA;CAAE,GAChD;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,GACtC;IAAE,IAAI,CAAC,EAAE,KAAK,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAE1C,MAAM,MAAM,WAAW,GAAG,uBAAuB,GAAG,uBAAuB,CAAC;AAE5E,eAAO,MAAM,WAAW,mFAQrB,WAAW,sBAoIb,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/typescript/components/listitems/ListItemSwitch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemSwitch.d.ts","sourceRoot":"","sources":["../../../../src/components/listitems/ListItemSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,qBAAqB,EACrB,MAAM,EAEP,MAAM,cAAc,CAAC;AAMtB,OAAO,EAAE,OAAO,EAAQ,MAAM,UAAU,CAAC;AAIzC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAe,MAAM,UAAU,CAAC;AAE1D,KAAK,YAAY,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAClC;IAAE,IAAI,CAAC,EAAE,KAAK,CAAC;IAAC,WAAW,EAAE,iBAAiB,CAAA;CAAE,GAChD;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,GACtC;IAAE,IAAI,CAAC,EAAE,KAAK,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAQ1C,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAC5C,0BAA0B,GAC1B,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAElE,eAAO,MAAM,cAAc,wIAYtB,mBAAmB,uBAoGvB,CAAC"}
+{"version":3,"file":"ListItemSwitch.d.ts","sourceRoot":"","sources":["../../../../src/components/listitems/ListItemSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,EAAQ,MAAM,cAAc,CAAC;AAQnE,OAAO,EAAE,OAAO,EAAQ,MAAM,UAAU,CAAC;AAIzC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAe,MAAM,UAAU,CAAC;AAG1D,KAAK,YAAY,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAClC;IAAE,IAAI,CAAC,EAAE,KAAK,CAAC;IAAC,WAAW,EAAE,iBAAiB,CAAA;CAAE,GAChD;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,GACtC;IAAE,IAAI,CAAC,EAAE,KAAK,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAQ1C,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAC5C,0BAA0B,GAC1B,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAElE,eAAO,MAAM,cAAc,wIAYtB,mBAAmB,uBA+HvB,CAAC"}

package/lib/typescript/components/modules/ModuleIDP.d.ts

@@ -1,13 +1,11 @@
 import * as React from "react";
-import { GestureResponderEvent, ImageSourcePropType } from "react-native";
-import { WithTestID } from "../../utils/types";
-type ModuleIDP = WithTestID<{
+import { ImageSourcePropType } from "react-native";
+import { PressableModuleBaseProps } from "./PressableModuleBase";
+interface ModuleIDP extends PressableModuleBaseProps {
     name: string;
     localLogo: ImageSourcePropType;
     logo: ImageSourcePropType;
-    saved?: boolean;
-    onPress: (event: GestureResponderEvent) => void;
-}>;
-export declare const ModuleIDP: ({ name, localLogo, logo, saved, onPress, testID }: ModuleIDP) => React.JSX.Element;
+}
+export declare const ModuleIDP: ({ name, localLogo, logo, withLooseSpacing, onPress, testID }: ModuleIDP) => React.JSX.Element;
 export default ModuleIDP;
 //# sourceMappingURL=ModuleIDP.d.ts.map

package/lib/typescript/components/modules/ModuleIDP.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModuleIDP.d.ts","sourceRoot":"","sources":["../../../../src/components/modules/ModuleIDP.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,qBAAqB,EAErB,mBAAmB,EAKpB,MAAM,cAAc,CAAC;AAsBtB,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,KAAK,SAAS,GAAG,UAAU,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,mBAAmB,CAAC;IAC/B,IAAI,EAAE,mBAAmB,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACjD,CAAC,CAAC;AA0CH,eAAO,MAAM,SAAS,sDAOnB,SAAS,sBAqEX,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ModuleIDP.d.ts","sourceRoot":"","sources":["../../../../src/components/modules/ModuleIDP.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,mBAAmB,EAIpB,MAAM,cAAc,CAAC;AAQtB,OAAO,EAEL,wBAAwB,EACzB,MAAM,uBAAuB,CAAC;AAE/B,UAAU,SAAU,SAAQ,wBAAwB;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,mBAAmB,CAAC;IAC/B,IAAI,EAAE,mBAAmB,CAAC;CAC3B;AA+BD,eAAO,MAAM,SAAS,iEAOnB,SAAS,sBA0BX,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/typescript/components/modules/ModulePaymentNotice.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { GestureResponderEvent } from "react-native";
 import { WithTestID } from "../../utils/types";
-export type PaymentNoticeStatus = "default" | "paid" | "error" | "expired" | "revoked" | "canceled";
+export type PaymentNoticeStatus = "default" | "paid" | "error" | "expired" | "revoked" | "canceled" | "in-progress";
 export type ModulePaymentNoticeProps = WithTestID<{
     isLoading?: boolean;
     accessibilityLabel?: string;

package/lib/typescript/components/modules/ModulePaymentNotice.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModulePaymentNotice.d.ts","sourceRoot":"","sources":["../../../../src/components/modules/ModulePaymentNotice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,qBAAqB,EAItB,MAAM,cAAc,CAAC;AAUtB,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAe/C,MAAM,MAAM,mBAAmB,GAC3B,SAAS,GACT,MAAM,GACN,OAAO,GACP,SAAS,GACT,SAAS,GACT,UAAU,CAAC;AAEf,MAAM,MAAM,wBAAwB,GAAG,UAAU,CAC/C;IACE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACjD,GAAG,CACA;IACE,mBAAmB,EAAE,OAAO,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;IAC7D,mBAAmB,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC;CACnB,GACD;IACE,mBAAmB,EAAE,OAAO,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;IAC7D,mBAAmB,CAAC,EAAE,KAAK,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;CACnB,CACJ,CACF,CAAC;AAqFF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,gEAM7B,wBAAwB,sBAqD1B,CAAC"}
+{"version":3,"file":"ModulePaymentNotice.d.ts","sourceRoot":"","sources":["../../../../src/components/modules/ModulePaymentNotice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAoB,MAAM,cAAc,CAAC;AAEvE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAc/C,MAAM,MAAM,mBAAmB,GAC3B,SAAS,GACT,MAAM,GACN,OAAO,GACP,SAAS,GACT,SAAS,GACT,UAAU,GACV,aAAa,CAAC;AAElB,MAAM,MAAM,wBAAwB,GAAG,UAAU,CAC/C;IACE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACjD,GAAG,CACA;IACE,mBAAmB,EAAE,OAAO,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;IAC7D,mBAAmB,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC;CACnB,GACD;IACE,mBAAmB,EAAE,OAAO,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;IAC7D,mBAAmB,CAAC,EAAE,KAAK,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;CACnB,CACJ,CACF,CAAC;AA2EF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,gEAM7B,wBAAwB,sBAc1B,CAAC"}

package/lib/typescript/components/modules/PressableModuleBase.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { GestureResponderEvent } from "react-native";
+import { WithTestID } from "../../utils/types";
+export type PressableModuleBaseProps = WithTestID<{
+    accessibilityLabel?: string;
+    onPress?: (event: GestureResponderEvent) => void;
+    withLooseSpacing?: boolean;
+}>;
+export declare const PressableModuleBase: ({ onPress, testID, accessibilityLabel, withLooseSpacing, children }: React.PropsWithChildren<PressableModuleBaseProps>) => React.JSX.Element;
+//# sourceMappingURL=PressableModuleBase.d.ts.map

package/lib/typescript/components/modules/PressableModuleBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PressableModuleBase.d.ts","sourceRoot":"","sources":["../../../../src/components/modules/PressableModuleBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,qBAAqB,EAAa,MAAM,cAAc,CAAC;AAGhE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAG/C,MAAM,MAAM,wBAAwB,GAAG,UAAU,CAAC;IAChD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC,CAAC;AAEH,eAAO,MAAM,mBAAmB,wEAM7B,MAAM,iBAAiB,CAAC,wBAAwB,CAAC,sBAyBnD,CAAC"}

package/lib/typescript/components/modules/hooks/useModuleSpringAnimation.d.ts

@@ -0,0 +1,10 @@
+export declare const useModuleSpringAnimation: () => {
+    animatedStyle: {
+        transform: {
+            scale: number;
+        }[];
+    };
+    handlePressIn: () => void;
+    handlePressOut: () => void;
+};
+//# sourceMappingURL=useModuleSpringAnimation.d.ts.map

package/lib/typescript/components/modules/hooks/useModuleSpringAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModuleSpringAnimation.d.ts","sourceRoot":"","sources":["../../../../../src/components/modules/hooks/useModuleSpringAnimation.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,wBAAwB;;;;;;;;CAqCpC,CAAC"}

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

@@ -1,3 +1,4 @@
 export * from "./ModuleIDP";
 export * from "./ModulePaymentNotice";
+export * from "./PressableModuleBase";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/modules/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/modules/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC"}

package/lib/typescript/components/switch/NativeSwitch.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { SwitchProps } from "react-native";
-type OwnProps = Pick<SwitchProps, "onValueChange" | "value">;
-export declare const NativeSwitch: ({ onValueChange, value }: OwnProps) => React.JSX.Element;
+type OwnProps = Pick<SwitchProps, "onValueChange" | "value" | "accessible" | "accessibilityLabel">;
+export declare const NativeSwitch: ({ onValueChange, value, ...accessibility }: OwnProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=NativeSwitch.d.ts.map

package/lib/typescript/components/switch/NativeSwitch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NativeSwitch.d.ts","sourceRoot":"","sources":["../../../../src/components/switch/NativeSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,WAAW,EAAE,MAAM,cAAc,CAAC;AAK7D,KAAK,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,eAAe,GAAG,OAAO,CAAC,CAAC;AAM7D,eAAO,MAAM,YAAY,6BAA8B,QAAQ,sBA4B9D,CAAC"}
+{"version":3,"file":"NativeSwitch.d.ts","sourceRoot":"","sources":["../../../../src/components/switch/NativeSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,WAAW,EAAE,MAAM,cAAc,CAAC;AAK7D,KAAK,QAAQ,GAAG,IAAI,CAClB,WAAW,EACX,eAAe,GAAG,OAAO,GAAG,YAAY,GAAG,oBAAoB,CAChE,CAAC;AAMF,eAAO,MAAM,YAAY,+CAItB,QAAQ,sBA6BV,CAAC"}

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

@@ -1,17 +1,17 @@
-import { TextInput } from "react-native";
 import React from "react";
+import { TextInput } from "react-native";
 import { IOColors } from "../../core";
-import { IOIcons } from "../icons";
 import { InputType } from "../../utils/types";
+import { IOIcons } from "../icons";
 type InputStatus = "initial" | "focused" | "disabled" | "error";
-type RNTextInputProps = Pick<React.ComponentProps<typeof TextInput>, "keyboardType" | "inputMode" | "textContentType" | "autoComplete">;
+type RNTextInputProps = Pick<React.ComponentProps<typeof TextInput>, "keyboardType" | "inputMode" | "textContentType" | "autoComplete" | "returnKeyType" | "autoCapitalize" | "autoCorrect">;
 type InputTextProps = {
     placeholder: string;
     value: string;
     onChangeText: (value: string) => void;
     accessibilityLabel?: string;
     textInputProps?: RNTextInputProps;
-    inputTyoe?: InputType;
+    inputType?: InputType;
     status?: InputStatus;
     icon?: IOIcons;
     rightElement?: React.ReactNode;
@@ -23,6 +23,6 @@ type InputTextProps = {
     onBlur?: () => void;
     onFocus?: () => void;
 };
-export declare const TextInputBase: ({ disabled, placeholder, value, onChangeText, accessibilityLabel, textInputProps, inputTyoe, status, icon, rightElement, counterLimit, bottomMessage, bottomMessageColor, onBlur, onFocus, isPassword }: InputTextProps) => React.JSX.Element;
+export declare const TextInputBase: ({ disabled, placeholder, value, onChangeText, accessibilityLabel, textInputProps, inputType, status, icon, rightElement, counterLimit, bottomMessage, bottomMessageColor, onBlur, onFocus, isPassword }: InputTextProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=TextInputBase.d.ts.map

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;AA+FF,eAAO,MAAM,aAAa,4MAiBvB,cAAc,sBAqLhB,CAAC"}
+{"version":3,"file":"TextInputBase.d.ts","sourceRoot":"","sources":["../../../../src/components/textInput/TextInputBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,EAGL,SAAS,EAGV,MAAM,cAAc,CAAC;AAOtB,OAAO,EACL,QAAQ,EAIT,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAQ,MAAM,UAAU,CAAC;AAIzC,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAEhE,KAAK,gBAAgB,GAAG,IAAI,CAC1B,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EACpC,cAAc,GACd,WAAW,GACX,iBAAiB,GACjB,cAAc,GACd,eAAe,GACf,gBAAgB,GAChB,aAAa,CAChB,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,sBAsLhB,CAAC"}

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

@@ -202,6 +202,7 @@ export type IOTheme = {
     "textBody-tertiary": IOColors;
     "cardBorder-default": IOColors;
     "icon-default": IOColors;
+    "icon-decorative": IOColors;
     "divider-default": IOColors;
     errorIcon: IOColors;
     errorText: 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":"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"}
+{"version":3,"file":"IOColors.d.ts","sourceRoot":"","sources":["../../../src/core/IOColors.ts"],"names":[],"mappings":"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"}

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

@@ -173,6 +173,19 @@ export declare const IOListItemStyles: {
         justifyContent: "space-between";
     };
 };
+export declare const IOModuleStyles: {
+    button: {
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: 16 | 6 | 24 | 8;
+        backgroundColor: string;
+        flexDirection: "row";
+        justifyContent: "space-between";
+        alignItems: "center";
+        paddingVertical: import("./IOSpacing").IOModuleIDPSpacing;
+        paddingHorizontal: import("./IOSpacing").IOModuleIDPSpacing;
+    };
+};
 /**
  * SELECTION ITEM STYLES
  */

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;IACzB,wBAAwB,EAAE,MAAM,CAAC;CAClC;AAED,eAAO,MAAM,gBAAgB,EAAE,gBAM9B,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDnB,CAAC;AAeH,eAAO,MAAM,iBAAiB,EAAE,MAAuB,CAAC;AAGxD,eAAO,MAAM,gBAAgB,EAAE,MAAW,CAAC;AAE3C,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;CAsC/B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDzB,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,EACL,WAAW,EAGX,QAAQ,EACR,cAAc,EACf,MAAM,aAAa,CAAC;AAGrB;;GAEG;AAEH,UAAU,gBAAgB;IACxB,gBAAgB,EAAE,WAAW,CAAC;IAE9B,YAAY,EAAE,MAAM,CAAC;IAErB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,wBAAwB,EAAE,MAAM,CAAC;CAClC;AAED,eAAO,MAAM,gBAAgB,EAAE,gBAM9B,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDnB,CAAC;AAeH,eAAO,MAAM,iBAAiB,EAAE,MAAuB,CAAC;AAGxD,eAAO,MAAM,gBAAgB,EAAE,MAAW,CAAC;AAE3C,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;CAsC/B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDzB,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,eAAO,MAAM,cAAc;;;;;;;;;;;;CAYzB,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/lib/typescript/stories/ModuleIDP.stories.d.ts

@@ -0,0 +1,24 @@
+import type { StoryObj } from "@storybook/react";
+import React from "react";
+import { ImageSourcePropType } from "react-native";
+declare const meta: {
+    title: string;
+    component: ({ name, localLogo, logo, withLooseSpacing, onPress, testID }: import("../components/modules/ModuleIDP").default) => React.JSX.Element;
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-0a347bb9").R, {
+        name: string;
+        localLogo: ImageSourcePropType;
+        logo: ImageSourcePropType;
+        accessibilityLabel?: string | undefined;
+        onPress?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        withLooseSpacing?: boolean | undefined;
+        testID?: string | undefined;
+    }>) => React.JSX.Element)[];
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+//# sourceMappingURL=ModuleIDP.stories.d.ts.map

package/lib/typescript/stories/ModuleIDP.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModuleIDP.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ModuleIDP.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAKnD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;CAkBwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC"}

package/lib/typescript/utils/textInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/textInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,UAAU,GAAG,IAAI,CACpB,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAC1C,gBAAgB,CACjB,GAAG;IACF,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,mBAAmB,SACxB,SAAS,KACd,UAAU,GAAG,SAef,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/textInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,UAAU,GAAG,IAAI,CACpB,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAC1C,gBAAgB,CACjB,GAAG;IACF,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,mBAAmB,SACxB,SAAS,KACd,UAAU,GAAG,SAgBf,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.13.1",
+  "version": "1.15.0",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -69,7 +69,7 @@
     "@types/jest": "^28.1.2",
     "@types/lodash": "^4.14.157",
     "@types/react": "~17.0.38",
-    "@types/react-native": "0.70.0",
+    "@types/react-native": "0.71.3",
     "babel-loader": "^9.1.3",
     "babel-plugin-react-native-web": "^0.19.8",
     "commitlint": "^17.0.2",

package/src/components/avatar/Avatar.tsx

@@ -1,29 +1,40 @@
 // A component to provide organization logo
 import * as React from "react";
-import { StyleSheet, View } from "react-native";
-import { IOVisualCostants, IOColors, hexToRgba } from "../../core";
-import { MultiImage } from "./MultiImage";
+import { Image, ImageURISource, StyleSheet, View } from "react-native";
+import { Icon } from "../../components/icons";
+import {
+  IOColors,
+  IOSpacingScale,
+  IOThemeContext,
+  IOVisualCostants,
+  hexToRgba
+} from "../../core";
+import { addCacheTimestampToUri } from "../../utils/image";
 
 type Avatar = {
   shape: "circle" | "square";
   size: "small" | "medium";
-  logoUri: React.ComponentProps<typeof MultiImage>["source"];
+  logoUri?: ImageURISource;
 };
 
 const avatarBorderLightMode = hexToRgba(IOColors.black, 0.1);
 const internalSpaceDefaultSize: number = 6;
 const internalSpaceLargeSize: number = 9;
 const radiusDefaultSize: number = 8;
+const internalSpacePlaceholderDefaultSize: IOSpacingScale = 12;
+const internalSpacePlaceholderLargeSize: IOSpacingScale = 16;
 
 const dimensionsMap = {
   small: {
     size: IOVisualCostants.avatarSizeSmall,
     internalSpace: internalSpaceDefaultSize,
+    internalSpacePlaceholder: internalSpacePlaceholderDefaultSize,
     radius: radiusDefaultSize
   },
   medium: {
     size: IOVisualCostants.avatarSizeMedium,
     internalSpace: internalSpaceLargeSize,
+    internalSpacePlaceholder: internalSpacePlaceholderLargeSize,
     radius: radiusDefaultSize
   }
 };
@@ -36,8 +47,7 @@ const styles = StyleSheet.create({
     overflow: "hidden",
     resizeMode: "contain",
     borderColor: avatarBorderLightMode,
-    borderWidth: 1,
-    backgroundColor: IOColors.white
+    borderWidth: 1
   },
   avatarImage: {
     height: "100%",
@@ -45,21 +55,50 @@ const styles = StyleSheet.create({
   }
 });
 
-export const Avatar = ({ logoUri, shape, size }: Avatar) => (
-  <View
-    style={[
-      styles.avatarWrapper,
-      {
-        height: dimensionsMap[size].size,
-        width: dimensionsMap[size].size,
-        borderRadius:
-          shape === "circle"
-            ? getAvatarCircleShape(size)
-            : dimensionsMap[size].radius,
-        padding: dimensionsMap[size].internalSpace
-      }
-    ]}
-  >
-    <MultiImage style={styles.avatarImage} source={logoUri} />
-  </View>
-);
+export const Avatar = ({ logoUri, shape, size }: Avatar) => {
+  const theme = React.useContext(IOThemeContext);
+
+  const [imageSource, setImageSource] = React.useState(
+    !logoUri ? undefined : addCacheTimestampToUri(logoUri)
+  );
+
+  const isPlaceholder = !imageSource;
+
+  const onError = () => {
+    setImageSource(undefined);
+  };
+
+  return (
+    <View
+      style={[
+        styles.avatarWrapper,
+        {
+          height: dimensionsMap[size].size,
+          width: dimensionsMap[size].size,
+          borderRadius:
+            shape === "circle"
+              ? getAvatarCircleShape(size)
+              : dimensionsMap[size].radius,
+          backgroundColor: isPlaceholder ? IOColors["grey-50"] : IOColors.white,
+          padding: isPlaceholder
+            ? dimensionsMap[size].internalSpacePlaceholder
+            : dimensionsMap[size].internalSpace
+        }
+      ]}
+    >
+      {isPlaceholder ? (
+        <Icon
+          name="institution"
+          color={theme["icon-decorative"]}
+          size={"100%"}
+        />
+      ) : (
+        <Image
+          source={imageSource}
+          style={styles.avatarImage}
+          onError={onError}
+        />
+      )}
+    </View>
+  );
+};

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

@@ -5,13 +5,13 @@ exports[`Test Avatar Components Avatar Snapshot 1`] = `
   style={
     [
       {
-        "backgroundColor": "#FFFFFF",
         "borderColor": "rgba(14,15,19,0.1)",
         "borderWidth": 1,
         "overflow": "hidden",
         "resizeMode": "contain",
       },
       {
+        "backgroundColor": "#FFFFFF",
         "borderRadius": 22,
         "height": 44,
         "padding": 6,
@@ -19,7 +19,20 @@ exports[`Test Avatar Components Avatar Snapshot 1`] = `
       },
     ]
   }
-/>
+>
+  <Image
+    onError={[Function]}
+    source={
+      {
+        "uri": "",
+      }
+    }
+    style={
+      {
+        "height": "100%",
+        "width": "100%",
+      }
+    }
+  />
+</View>
 `;
-
-exports[`Test Avatar Components MultiImage Snapshot 1`] = `null`;

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

@@ -1,19 +1,12 @@
 import React from "react";
 import * as TestRenderer from "react-test-renderer";
 import { Avatar } from "../Avatar";
-import { MultiImage } from "../MultiImage";
 
 describe("Test Avatar Components", () => {
   it("Avatar Snapshot", () => {
     const avatar = TestRenderer.create(
-      <Avatar shape={"circle"} size={"small"} logoUri={[]}></Avatar>
+      <Avatar shape={"circle"} size={"small"} logoUri={{ uri: "" }}></Avatar>
     ).toJSON();
     expect(avatar).toMatchSnapshot();
   });
-  it("MultiImage Snapshot", () => {
-    const multiImage = TestRenderer.create(
-      <MultiImage source={[]}></MultiImage>
-    ).toJSON();
-    expect(multiImage).toMatchSnapshot();
-  });
 });

package/src/components/avatar/index.tsx

@@ -1,2 +1 @@
 export * from "./Avatar";
-export * from "./MultiImage";

package/src/components/badge/Badge.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Platform, StyleSheet, Text, View } from "react-native";
 import {
   IOBadgeHSpacing,
@@ -11,6 +11,7 @@ import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 
 export type Badge = WithTestID<{
+  outline?: boolean;
   text: string;
   variant:
     | "default"
@@ -25,12 +26,12 @@ export type Badge = WithTestID<{
     | "contrast";
 }>;
 
-type VariantProps = {
-  foreground: IOColors;
+type SolidVariantProps = {
   background: IOColors;
+  foreground: IOColors;
 };
 
-const mapVariants: Record<NonNullable<Badge["variant"]>, VariantProps> = {
+const mapVariants: Record<NonNullable<Badge["variant"]>, SolidVariantProps> = {
   default: {
     foreground: "grey-700",
     background: "grey-50"
@@ -73,6 +74,47 @@ const mapVariants: Record<NonNullable<Badge["variant"]>, VariantProps> = {
   }
 };
 
+type OutlinedVariantProps = {
+  foreground: IOColors;
+  background?: never;
+};
+
+const mapOutlineVariants: Record<
+  NonNullable<Badge["variant"]>,
+  OutlinedVariantProps
+> = {
+  default: {
+    foreground: "grey-700"
+  },
+  info: {
+    foreground: "info-850"
+  },
+  warning: {
+    foreground: "warning-850"
+  },
+  success: {
+    foreground: "success-850"
+  },
+  error: {
+    foreground: "error-850"
+  },
+  purple: {
+    foreground: "hanPurple-850"
+  },
+  lightBlue: {
+    foreground: "blueIO-850"
+  },
+  blue: {
+    foreground: "blueIO-500"
+  },
+  turquoise: {
+    foreground: "turquoise-850"
+  },
+  contrast: {
+    foreground: "grey-850"
+  }
+};
+
 const styles = StyleSheet.create({
   badge: {
     flexDirection: "row",
@@ -106,14 +148,26 @@ const styles = StyleSheet.create({
 /**
  * Official badge component
  */
-export const Badge = ({ text, variant, testID }: Badge) => {
+export const Badge = ({ text, outline = false, variant, testID }: Badge) => {
   const { isExperimental } = useIOExperimentalDesign();
+  const { background, foreground } = useMemo(
+    () => (outline ? mapOutlineVariants : mapVariants)[variant],
+    [outline, variant]
+  );
+
   return (
     <View
       testID={testID}
       style={[
         styles.badge,
-        { backgroundColor: IOColors[mapVariants[variant].background] }
+        outline
+          ? {
+              borderWidth: 1,
+              borderColor: IOColors[foreground]
+            }
+          : {
+              backgroundColor: background ? IOColors[background] : undefined
+            }
       ]}
     >
       <Text
@@ -122,7 +176,9 @@ export const Badge = ({ text, variant, testID }: Badge) => {
         style={[
           styles.label,
           isExperimental ? styles.labelFont : styles.legacyLabelFont,
-          { color: IOColors[mapVariants[variant].foreground] }
+          {
+            color: IOColors[foreground]
+          }
         ]}
       >
         {text}