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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"_PictogramTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/components/pictograms/svg/_PictogramTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAMjD,QAAA,MAAM,iBAAiB,oCAIpB,iBAAiB,sBAInB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -16,6 +16,7 @@ export declare const IOColors: {
     "blueIO-850": string;
     "blueIO-600": string;
     "blueIO-500": string;
+    "blueIO-400": string;
     "blueIO-450": string;
     "blueIO-200": string;
     "blueIO-150": string;

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

@@ -62,6 +62,7 @@ export declare const IOStyles: {
 };
 export declare const buttonSolidHeight: number;
 export declare const iconBtnSizeSmall: number;
+export declare const numberPadBtnSize: number;
 export declare const IOButtonLegacyStyles: {
     button: {
         flexDirection: "row";
@@ -149,6 +150,19 @@ export declare const IOIconButtonStyles: {
         borderRadius: number;
     };
 };
+export declare const IONumberPadButtonStyles: {
+    button: {
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    circularShape: {
+        borderRadius: number;
+    };
+    buttonSize: {
+        width: number;
+        height: number;
+    };
+};
 /**
  * LIST 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,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"}
+{"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,gBAAgB,EAAE,MAAW,CAAC;AAE3C,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;CAsC/B,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDzB,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;CAsB7B,CAAC;AAEH,eAAO,MAAM,uBAAuB;;;;;;;;;;;;CAclC,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/H1.stories.d.ts

@@ -2,7 +2,7 @@
 import type { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: (props: Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"Regular" | "Bold", "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "bluegrey" | "bluegreyDark" | "noCieButton" | "blue" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "red" | "green" | "greenLight"> & {
+    component: (props: Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"Regular" | "Bold", "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-400" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "bluegrey" | "bluegreyDark" | "noCieButton" | "blue" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "red" | "green" | "greenLight"> & {
         style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
     }) => import("react").JSX.Element;
     parameters: {

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

@@ -2,7 +2,7 @@
 import type { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: (props: Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"Regular" | "SemiBold" | "Bold", "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "bluegrey" | "bluegreyDark" | "noCieButton" | "blue" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "red" | "green" | "greenLight"> & {
+    component: (props: Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"Regular" | "SemiBold" | "Bold", "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-400" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "bluegrey" | "bluegreyDark" | "noCieButton" | "blue" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "red" | "green" | "greenLight"> & {
         style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
     }) => import("react").JSX.Element;
     parameters: {

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

@@ -2,7 +2,7 @@
 import type { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: (props: Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"Regular" | "SemiBold" | "Bold", "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "bluegrey" | "bluegreyDark" | "noCieButton" | "blue" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "red" | "green" | "greenLight"> & {
+    component: (props: Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"Regular" | "SemiBold" | "Bold", "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-400" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "bluegrey" | "bluegreyDark" | "noCieButton" | "blue" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "red" | "green" | "greenLight"> & {
         style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
     }) => import("react").JSX.Element;
     parameters: {

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

@@ -2,7 +2,7 @@
 import type { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: (props: Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"Regular" | "SemiBold", "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "bluegrey" | "bluegreyDark" | "noCieButton" | "blue" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "red" | "green" | "greenLight"> & {
+    component: (props: Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"Regular" | "SemiBold", "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-400" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "bluegrey" | "bluegreyDark" | "noCieButton" | "blue" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "red" | "green" | "greenLight"> & {
         style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
     }) => import("react").JSX.Element;
     parameters: {

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

@@ -2,7 +2,7 @@
 import type { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: (props: Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"SemiBold", "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "bluegrey" | "bluegreyDark" | "noCieButton" | "blue" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "red" | "green" | "greenLight"> & {
+    component: (props: Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"SemiBold", "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-400" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "bluegrey" | "bluegreyDark" | "noCieButton" | "blue" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "red" | "green" | "greenLight"> & {
         style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
     }) => import("react").JSX.Element;
     parameters: {

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

@@ -2,7 +2,7 @@
 import type { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: (props: Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"Regular" | "SemiBold", "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "bluegrey" | "bluegreyDark" | "noCieButton" | "blue" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "red" | "green" | "greenLight"> & {
+    component: (props: Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"Regular" | "SemiBold", "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-400" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "bluegrey" | "bluegreyDark" | "noCieButton" | "blue" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "red" | "green" | "greenLight"> & {
         style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
     }) => import("react").JSX.Element;
     parameters: {

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

@@ -2,7 +2,7 @@
 import type { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: (props: Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"Regular" | "SemiBold" | "Bold", "grey-50" | "grey-100" | "grey-300" | "grey-450" | "grey-650" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "noCieButton" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "green" | "greenLight" | ("white" | "grey-200" | "grey-700" | "bluegrey" | "bluegreyDark" | "blue" | "red")> & {
+    component: (props: Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"Regular" | "SemiBold" | "Bold", "grey-50" | "grey-100" | "grey-300" | "grey-450" | "grey-650" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-400" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "noCieButton" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "green" | "greenLight" | ("white" | "grey-200" | "grey-700" | "bluegrey" | "bluegreyDark" | "blue" | "red")> & {
         style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
     } & {
         fontSize?: ("small" | "regular") | undefined;

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

@@ -2,7 +2,7 @@
 import type { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: (props: Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"SemiBold", "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "bluegrey" | "bluegreyDark" | "noCieButton" | "blue" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "red" | "green" | "greenLight"> & {
+    component: (props: Omit<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, "style"> & import("../components").TypographyProps<"SemiBold", "white" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-450" | "grey-650" | "grey-700" | "grey-850" | "black" | "blueIO-850" | "blueIO-600" | "blueIO-500" | "blueIO-400" | "blueIO-450" | "blueIO-200" | "blueIO-150" | "blueIO-100" | "blueIO-50" | "hanPurple-850" | "hanPurple-500" | "hanPurple-250" | "hanPurple-100" | "hanPurple-50" | "turquoise-850" | "turquoise-500" | "turquoise-450" | "turquoise-150" | "turquoise-100" | "turquoise-50" | "error-850" | "error-600" | "error-500" | "error-400" | "error-100" | "warning-850" | "warning-700" | "warning-500" | "warning-400" | "warning-100" | "success-850" | "success-700" | "success-500" | "success-400" | "success-100" | "info-850" | "info-700" | "info-500" | "info-400" | "info-100" | "cobalt" | "blueItalia-850" | "blueItalia-600" | "blueItalia-500" | "blueItalia-100" | "blueItalia-50" | "blue-600" | "blue-50" | "greyUltraLight" | "greyLight" | "bluegreyLight" | "grey" | "milderGray" | "bluegrey" | "bluegreyDark" | "noCieButton" | "blue" | "blueUltraLight" | "aqua" | "aquaUltraLight" | "antiqueFuchsia" | "yellow" | "orange" | "red" | "green" | "greenLight"> & {
         style?: import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">> | import("react-native").RecursiveArray<import("react-native").Falsy | Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily"> | import("react-native").RegisteredStyle<Omit<import("react-native").TextStyle, "color" | "fontStyle" | "fontWeight" | "fontSize" | "fontFamily">>>;
     } & {
         fontSize?: import("../components").FontSize | undefined;

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

@@ -26,5 +26,6 @@ type Without<T, U> = {
  */
 export type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
 export type InputType = "credit-card" | "default";
+export type BiometricsValidType = "BIOMETRICS" | "FACE_ID" | "TOUCH_ID";
 export {};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3D;;GAEG;AACH,MAAM,MAAM,MAAM,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzC,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC;AAGvC,MAAM,MAAM,KAAK,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,GAAG,KAAK,CAAC;CACzC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,CAAC;AAExD;;GAEG;AACH,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,IAAI;KAAG,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK;CAAE,CAAC;AAElE;;GAEG;AACH,MAAM,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,MAAM,GACxC,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GACzC,CAAC,GAAG,CAAC,CAAC;AAEV,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,SAAS,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utils/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3D;;GAEG;AACH,MAAM,MAAM,MAAM,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzC,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC;AAGvC,MAAM,MAAM,KAAK,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB,GAAG,KAAK,CAAC;CACzC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,CAAC;AAExD;;GAEG;AACH,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,IAAI;KAAG,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK;CAAE,CAAC;AAElE;;GAEG;AACH,MAAM,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,MAAM,GACxC,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GACzC,CAAC,GAAG,CAAC,CAAC;AAEV,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,SAAS,CAAC;AAIlD,MAAM,MAAM,mBAAmB,GAAG,YAAY,GAAG,SAAS,GAAG,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -66,6 +66,9 @@
     "@storybook/react": "^7.4.0",
     "@storybook/react-webpack5": "^7.4.0",
     "@storybook/testing-library": "^0.2.0",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0",
+    "@svgr/plugin-svgo": "^8.1.0",
     "@types/jest": "^28.1.2",
     "@types/lodash": "^4.14.157",
     "@types/react": "~17.0.38",
@@ -80,6 +83,7 @@
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-storybook": "^0.6.13",
+    "fs-extra": "^11.1.1",
     "jest": "^29.5.0",
     "metro-react-native-babel-preset": "^0.77.0",
     "pod-install": "^0.1.0",
@@ -94,6 +98,7 @@
     "react-test-renderer": "^18.2.0",
     "release-it": "^15.0.0",
     "storybook": "^7.4.0",
+    "svgo": "^3.0.2",
     "typescript": "^4.9.5"
   },
   "resolutions": {
@@ -112,7 +117,6 @@
   "engines": {
     "node": ">= 16.0.0"
   },
-  "packageManager": "^yarn@1.22.15",
   "jest": {
     "preset": "react-native",
     "modulePathIgnorePatterns": [
@@ -171,7 +175,6 @@
     ]
   },
   "dependencies": {
-    "lodash": "^4.17.21",
     "@expo/vector-icons": "^13.0.0",
     "@pagopa/ts-commons": "^12.0.0",
     "@testing-library/jest-native": "^5.4.2",
@@ -181,6 +184,7 @@
     "expo-asset": "^8.10.1",
     "expo-font": "^11.4.0",
     "expo-modules-core": "^1.5.6",
+    "lodash": "^4.17.21",
     "react-native-gesture-handler": "^2.12.0",
     "react-native-haptic-feedback": "^2.0.2",
     "react-native-linear-gradient": "^2.5.6",

package/src/components/buttons/ButtonLink.tsx

@@ -28,8 +28,8 @@ import {
 import { HSpacer } from "../spacer/Spacer";
 import { buttonTextFontSize } from "../typography";
 
-type ColorButtonLink = "primary";
-export type ButtonLink = WithTestID<{
+export type ColorButtonLink = "primary";
+export type ButtonLinkProps = WithTestID<{
   color?: ColorButtonLink;
   label: string;
   disabled?: boolean;
@@ -51,7 +51,10 @@ type ColorStates = {
   };
 };
 
-const mapColorStates: Record<NonNullable<ButtonLink["color"]>, ColorStates> = {
+const mapColorStates: Record<
+  NonNullable<ButtonLinkProps["color"]>,
+  ColorStates
+> = {
   // Primary button
   primary: {
     label: {
@@ -64,7 +67,7 @@ const mapColorStates: Record<NonNullable<ButtonLink["color"]>, ColorStates> = {
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const mapLegacyColorStates: Record<
-  NonNullable<ButtonLink["color"]>,
+  NonNullable<ButtonLinkProps["color"]>,
   ColorStates
 > = {
   // Primary button
@@ -104,7 +107,7 @@ export const ButtonLink = React.memo(
     accessibilityLabel,
     accessibilityHint,
     testID
-  }: ButtonLink) => {
+  }: ButtonLinkProps) => {
     const isPressed = useSharedValue(0);
     const { isExperimental } = useIOExperimentalDesign();
 

package/src/components/buttons/ButtonSolid.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback } from "react";
 import { GestureResponderEvent, Pressable, StyleSheet } from "react-native";
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import Animated, {
   Extrapolate,
   interpolate,
@@ -9,11 +10,6 @@ import Animated, {
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
-import ReactNativeHapticFeedback from "react-native-haptic-feedback";
-import { IOIconSizeScale, IOIcons, Icon } from "../icons";
-import { WithTestID } from "../../utils/types";
-import { HSpacer } from "../spacer/Spacer";
-import { ButtonText } from "../typography/ButtonText";
 import {
   IOButtonLegacyStyles,
   IOButtonStyles,
@@ -25,9 +21,13 @@ import {
   exitTransitionInnerContent,
   useIOExperimentalDesign
 } from "../../core";
+import { WithTestID } from "../../utils/types";
+import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
+import { HSpacer } from "../spacer/Spacer";
+import { ButtonText } from "../typography/ButtonText";
 
-type ButtonSolidColor = "primary" | "danger" | "contrast";
+export type ButtonSolidColor = "primary" | "danger" | "contrast";
 
 type ColorStates = {
   default: string;

package/src/components/buttons/IconButton.tsx

@@ -15,15 +15,22 @@ import {
   IOIconButtonStyles,
   IOScaleValues,
   IOSpringValues,
+  IOStyles,
   hexToRgba,
   useIOExperimentalDesign
 } from "../../core";
 import { WithTestID } from "../../utils/types";
-import { AnimatedIcon, IOIcons, IconClassComponent } from "../icons";
+import {
+  AnimatedIcon,
+  IOIconSizeScale,
+  IOIcons,
+  IconClassComponent
+} from "../icons";
 
 export type IconButton = WithTestID<{
   color?: "primary" | "neutral" | "contrast";
   icon: IOIcons;
+  iconSize?: IOIconSizeScale;
   disabled?: boolean;
   accessibilityLabel: string;
   accessibilityHint?: string;
@@ -102,6 +109,7 @@ const AnimatedIconClassComponent =
 export const IconButton = ({
   color = "primary",
   icon,
+  iconSize = 24,
   disabled = false,
   onPress,
   accessibilityLabel,
@@ -181,17 +189,24 @@ export const IconButton = ({
       <Animated.View
         style={[
           IOIconButtonStyles.buttonSizeSmall,
+          IOStyles.alignCenter,
+          IOStyles.centerJustified,
           !disabled && pressedAnimationStyle
         ]}
       >
         {!disabled ? (
           <AnimatedIconClassComponent
             name={icon}
+            size={iconSize}
             animatedProps={animatedColor}
             color={colorMap[color]?.icon?.default}
           />
         ) : (
-          <AnimatedIcon name={icon} color={colorMap[color]?.icon?.disabled} />
+          <AnimatedIcon
+            name={icon}
+            size={iconSize}
+            color={colorMap[color]?.icon?.disabled}
+          />
         )}
       </Animated.View>
     </Pressable>

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

@@ -532,6 +532,12 @@ exports[`Test Buttons Components IconButton Snapshot 1`] = `
           "height": 24,
           "width": 24,
         },
+        {
+          "alignItems": "center",
+        },
+        {
+          "justifyContent": "center",
+        },
         {
           "transform": [
             {