@pagopa/io-app-design-system 1.16.1 → 1.17.1

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { IOColors, IOTheme } from "../../core/IOColors";
+import { IOFontWeight } from "../../utils/fonts";
+import { ExternalTypographyProps, TypographyProps } from "./common";
+type PartialAllowedColors = Extract<IOColors, "blue" | "bluegrey" | "red" | "white" | "bluegreyDark" | "grey-700" | "grey-200">;
+type AllowedColors = PartialAllowedColors | IOTheme["textBody-tertiary"];
+type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular" | "SemiBold">;
+type LabelSmallAltProps = ExternalTypographyProps<TypographyProps<AllowedWeight, AllowedColors>>;
+/**
+ * `LabelSmallAlt` typographic style. It's referenced as `LabelSmallReadex` in the design projects.
+ */
+export declare const LabelSmallAlt: (props: LabelSmallAltProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=LabelSmallAlt.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LabelSmallAlt.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/LabelSmallAlt.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAc,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEpE,KAAK,oBAAoB,GAAG,OAAO,CACjC,QAAQ,EACN,MAAM,GACN,UAAU,GACV,KAAK,GACL,OAAO,GACP,cAAc,GACd,UAAU,GACV,UAAU,CACb,CAAC;AACF,KAAK,aAAa,GAAG,oBAAoB,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;AACzE,KAAK,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;AAE5E,KAAK,kBAAkB,GAAG,uBAAuB,CAC/C,eAAe,CAAC,aAAa,EAAE,aAAa,CAAC,CAC9C,CAAC;AAaF;;GAEG;AACH,eAAO,MAAM,aAAa,UAAW,kBAAkB,gCAatD,CAAC"}

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

@@ -13,6 +13,7 @@ export * from "./H6";
 export * from "./Hero";
 export * from "./Label";
 export * from "./LabelSmall";
+export * from "./LabelSmallAlt";
 export * from "./LabelLink";
 export * from "./BodyMonospace";
 export * from "./common";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/index.tsx"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/typography/index.tsx"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,MAAM,CAAC;AACrB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC"}

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

@@ -1,7 +1,7 @@
 export type IOSpacingScale = 4 | 6 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 40 | 48 | 56 | 64 | 72 | 80;
 export type IOSpacer = Extract<IOSpacingScale, 4 | 8 | 16 | 24 | 32 | 40 | 48>;
 export declare const IOSpacer: ReadonlyArray<IOSpacer>;
-export type IOAppMargin = Extract<IOSpacingScale, 8 | 16 | 24 | 32>;
+export type IOAppMargin = Extract<IOSpacingScale, 8 | 16 | 24 | 32 | 48>;
 export declare const IOAppMargin: ReadonlyArray<IOAppMargin>;
 export type IOAlertSpacing = Extract<IOSpacingScale, 16 | 24>;
 export declare const IOAlertSpacing: ReadonlyArray<IOAlertSpacing>;

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

@@ -1 +1 @@
-{"version":3,"file":"IOSpacing.d.ts","sourceRoot":"","sources":["../../../src/core/IOSpacing.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,cAAc,GACtB,CAAC,GACD,CAAC,GACD,CAAC,GACD,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,CAAC;AAGP,MAAM,MAAM,QAAQ,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AAC/E,eAAO,MAAM,QAAQ,EAAE,aAAa,CAAC,QAAQ,CAEnC,CAAC;AAGX,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACpE,eAAO,MAAM,WAAW,EAAE,aAAa,CAAC,WAAW,CAA4B,CAAC;AAGhF,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC;AAC9D,eAAO,MAAM,cAAc,EAAE,aAAa,CAAC,cAAc,CAAqB,CAAC;AAG/E,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC;AAC/D,eAAO,MAAM,kBAAkB,EAAE,eAA6B,CAAC;AAC/D,eAAO,MAAM,qBAAqB,EAAE,eAA6B,CAAC;AAClE,eAAO,MAAM,qBAAqB,EAAE,eAA6B,CAAC;AAGlE,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AAC1D,eAAO,MAAM,aAAa,EAAE,YAAyB,CAAC;AACtD,eAAO,MAAM,aAAa,EAAE,YAAyB,CAAC;AAGtD,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AAC5D,eAAO,MAAM,eAAe,EAAE,cAA2B,CAAC;AAC1D,eAAO,MAAM,eAAe,EAAE,cAA2B,CAAC;AAG1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACtE,eAAO,MAAM,mBAAmB,EAAE,kBAAgC,CAAC;AACnE,eAAO,MAAM,mBAAmB,EAAE,kBAAgC,CAAC;AACnE,eAAO,MAAM,wBAAwB,EAAE,kBAAgC,CAAC;AACxE,eAAO,MAAM,oBAAoB,EAAE,kBAA+B,CAAC"}
+{"version":3,"file":"IOSpacing.d.ts","sourceRoot":"","sources":["../../../src/core/IOSpacing.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,cAAc,GACtB,CAAC,GACD,CAAC,GACD,CAAC,GACD,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,CAAC;AAGP,MAAM,MAAM,QAAQ,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AAC/E,eAAO,MAAM,QAAQ,EAAE,aAAa,CAAC,QAAQ,CAEnC,CAAC;AAGX,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACzE,eAAO,MAAM,WAAW,EAAE,aAAa,CAAC,WAAW,CAEzC,CAAC;AAGX,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC;AAC9D,eAAO,MAAM,cAAc,EAAE,aAAa,CAAC,cAAc,CAAqB,CAAC;AAG/E,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,cAAc,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC;AAC/D,eAAO,MAAM,kBAAkB,EAAE,eAA6B,CAAC;AAC/D,eAAO,MAAM,qBAAqB,EAAE,eAA6B,CAAC;AAClE,eAAO,MAAM,qBAAqB,EAAE,eAA6B,CAAC;AAGlE,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AAC1D,eAAO,MAAM,aAAa,EAAE,YAAyB,CAAC;AACtD,eAAO,MAAM,aAAa,EAAE,YAAyB,CAAC;AAGtD,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AAC5D,eAAO,MAAM,eAAe,EAAE,cAA2B,CAAC;AAC1D,eAAO,MAAM,eAAe,EAAE,cAA2B,CAAC;AAG1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACtE,eAAO,MAAM,mBAAmB,EAAE,kBAAgC,CAAC;AACnE,eAAO,MAAM,mBAAmB,EAAE,kBAAgC,CAAC;AACnE,eAAO,MAAM,wBAAwB,EAAE,kBAAgC,CAAC;AACxE,eAAO,MAAM,oBAAoB,EAAE,kBAA+B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.16.1",
+  "version": "1.17.1",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -36,7 +36,10 @@
     "example": "yarn --cwd example",
     "bootstrap": "yarn example && yarn install",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "generate:icons": "node scripts/generateNewIcons.js",
+    "generate:pictograms": "node scripts/generateNewPictograms.js",
+    "generate": "npm-run-all generate:*"
   },
   "keywords": [
     "react-native",
@@ -98,6 +101,7 @@
     "react-test-renderer": "^18.2.0",
     "release-it": "^15.0.0",
     "storybook": "^7.4.0",
+    "storybook-react-context": "^0.6.0",
     "svgo": "^3.0.2",
     "typescript": "^4.9.5"
   },
@@ -163,6 +167,9 @@
   "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
+    "exclude": [
+      "example"
+    ],
     "targets": [
       "commonjs",
       "module",

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

@@ -78,15 +78,15 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
         font="TitilliumWeb"
         fontStyle={
           {
-            "fontSize": 16,
-            "lineHeight": 24,
+            "fontSize": 18,
+            "lineHeight": 25,
           }
         }
         style={
           [
             {
-              "fontSize": 16,
-              "lineHeight": 24,
+              "fontSize": 18,
+              "lineHeight": 25,
             },
             {
               "color": "#031344",

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

@@ -74,15 +74,15 @@ exports[`Test Buttons Components ButtonExtendedOutline Snapshot 1`] = `
         font="TitilliumWeb"
         fontStyle={
           {
-            "fontSize": 16,
-            "lineHeight": 24,
+            "fontSize": 18,
+            "lineHeight": 25,
           }
         }
         style={
           [
             {
-              "fontSize": 16,
-              "lineHeight": 24,
+              "fontSize": 18,
+              "lineHeight": 25,
             },
             {
               "color": "#0E0F13",

package/src/components/checkbox/AnimatedCheckbox.tsx

@@ -126,10 +126,12 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => {
         ]}
       />
       {isChecked && (
-        <AnimatedTick
-          progress={tickAnimationProgress}
-          stroke={IOColors[IOSelectionTickVisualParams.tickColor]}
-        />
+        <View style={{ zIndex: 1 }}>
+          <AnimatedTick
+            progress={tickAnimationProgress}
+            stroke={IOColors[IOSelectionTickVisualParams.tickColor]}
+          />
+        </View>
       )}
     </Pressable>
   );

package/src/components/codeInput/CodeInput.tsx

@@ -0,0 +1,134 @@
+import React, { useEffect, useMemo } from "react";
+import { StyleSheet, View } from "react-native";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withSequence,
+  withTiming
+} from "react-native-reanimated";
+import { IOColors, IOStyles } from "../../core";
+import { triggerHaptic } from "../../functions";
+import { HSpacer } from "../spacer";
+
+type CodeInputProps = {
+  value: string;
+  onValueChange: (value: string) => void;
+  length: number;
+  onValidate: (value: string) => boolean;
+  variant?: "light" | "dark";
+};
+
+const DOT_SIZE = 16;
+
+const styles = StyleSheet.create({
+  dotShape: {
+    width: DOT_SIZE,
+    height: DOT_SIZE,
+    borderRadius: 8,
+    borderWidth: 2
+  },
+  dotEmpty: {
+    borderColor: IOColors["grey-200"]
+  },
+  wrapper: {
+    justifyContent: "center"
+  }
+});
+
+const EmptyDot = () => <View style={[styles.dotShape, styles.dotEmpty]} />;
+
+const FilletDot = ({ color }: { color: IOColors }) => (
+  <View
+    style={[
+      styles.dotShape,
+      { backgroundColor: IOColors[color], borderColor: IOColors[color] }
+    ]}
+  />
+);
+
+export const CodeInput = ({
+  length,
+  value,
+  onValueChange,
+  variant = "light",
+  onValidate
+}: CodeInputProps) => {
+  const [status, setStatus] = React.useState<"default" | "error">("default");
+
+  const translate = useSharedValue(0);
+  const shakeOffset: number = 8;
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: translate.value }]
+  }));
+
+  const fillColor = useMemo(
+    () =>
+      status === "error"
+        ? "error-600"
+        : variant === "light"
+        ? "white"
+        : "black",
+    [variant, status]
+  );
+
+  useEffect(() => {
+    if (onValidate && value.length === length) {
+      const isValid = onValidate(value);
+
+      if (!isValid) {
+        setStatus("error");
+        triggerHaptic("notificationError");
+
+        // eslint-disable-next-line functional/immutable-data
+        translate.value = withSequence(
+          withTiming(shakeOffset, {
+            duration: 75,
+            easing: Easing.inOut(Easing.cubic)
+          }),
+          withTiming(-shakeOffset, {
+            duration: 75,
+            easing: Easing.inOut(Easing.cubic)
+          }),
+          withTiming(shakeOffset / 2, {
+            duration: 75,
+            easing: Easing.inOut(Easing.cubic)
+          }),
+          withTiming(-shakeOffset / 2, {
+            duration: 75,
+            easing: Easing.inOut(Easing.cubic)
+          }),
+          withTiming(0, { duration: 75, easing: Easing.inOut(Easing.cubic) })
+        );
+
+        const timer = setTimeout(() => {
+          setStatus("default");
+          onValueChange("");
+        }, 500);
+        return () => clearTimeout(timer);
+      }
+    }
+    return;
+  }, [value, onValidate, length, onValueChange, translate]);
+
+  return (
+    <Animated.View style={[IOStyles.row, styles.wrapper, animatedStyle]}>
+      {[...Array(length)].map((_, i, arr) => (
+        <React.Fragment key={i}>
+          {value[i] ? (
+            <>
+              <FilletDot color={fillColor} />
+              {i !== arr.length - 1 && <HSpacer size={DOT_SIZE} />}
+            </>
+          ) : (
+            <>
+              <EmptyDot />
+              {i !== arr.length - 1 && <HSpacer size={DOT_SIZE} />}
+            </>
+          )}
+        </React.Fragment>
+      ))}
+    </Animated.View>
+  );
+};

package/src/components/codeInput/index.tsx

@@ -0,0 +1 @@
+export * from "./CodeInput";

package/src/components/icons/Icon.tsx

@@ -190,6 +190,7 @@ import IconRead from "./svg/IconRead";
 import IconReceiptOff from "./svg/IconReceiptOff";
 import IconSignal from "./svg/IconSignal";
 import IconTouch from "./svg/IconTouch";
+import IconSparkles from "./svg/IconSparkles";
 
 export const IOIcons = {
   spid: IconSpid,
@@ -289,6 +290,7 @@ export const IOIcons = {
   familySharing: IconFamilySharing,
   lightbulb: IconLightbulb,
   magicWand: IconMagicWand,
+  sparkles: IconSparkles,
   starFilled: IconStarFilled,
   starEmpty: IconStarEmpty,
   hearthEmpty: IconHearthEmpty,

package/src/components/icons/README.md

@@ -4,33 +4,91 @@ There are different sets:
 * **Navigation**: Icons used in the main Tab bar
 * **Biometric**: Icons used for the biometric identification
 * **Categories**: Icons used for the different sectors available in the Carta Giovani Nazionale
-* **Product**: PagoPA products' icons 
-
-## Prefixes
-- **General**: `Icon…`
-- **Navigation**: `IconNav…`
-- **Biometric**: `IconBiometric…`
-- **Categories**: `IconCateg…`
-- **Product**: `IconProduct…`
+* **Product**: PagoPA products' icons
+* **System**: OS-specific icons (iOS/Android)
 
 ## Add a new icon
-First of all, follow the instructions stated in the main README (`Vector graphics` section).
 
-If you want to add a new icon in the `General` set, open the `Icon.tsx` file and import the React component:
-```jsx
-[…]
-import IconSpid from "./svg/IconSpid";
-[…]
-```
+### Prerequisites
+
+In your user interface design app (Figma/Sketch) export your SVG with `1×` preset. The name usually consists of a specific prefix followed by the associated key:
+  - **General**: `Icon…`
+  - **Navigation**: `IconNav…`
+  - **Biometric**: `IconBiometric…`
+  - **Categories**: `IconCateg…`
+  - **Product**: `IconProduct…`
+  - **System**: `IconSystem…`
+
+> [!important]
+> The icon must be contained within a `24×24` frame.
+
+> [!tip]
+> If you want to add a new `Wallet` icon to be used in the main tab bar, your icon will have a `IconNavWallet` filename. If it doesn't belong to a specific set, you just put the name after the prefix `Icon…`, so `IconWallet`
+
+> [!caution]
+> This filename will be the same as the React component, so make sure you don't already have a component with that filename
+
+### Create the corresponding React component
+
+#### Using `scripts/generateNewIcons.js`
+1. Move the exported file to the `icons/svg/originals` folder
+2. In your terminal, in the same folder, run the command: `yarn generate:icons`
+3. The script will process `scripts/icons_timestamp.txt`, generate the new React components (with `*.tsx` extension) following exactly the steps listed in the manual process (see below), and process **only the files added after this timestamp value**
+4. If the `generateNewIcons` script accidentally overwrites older React components, remember to discard the changes before committing
+
+> [!caution] 
+> If your icon **is not** monochromatic, you should use the manual process because the script doesn't support this specific case yet
+
+#### Manual process (alternative)
+
+1. Move the exported file to the `icons/svg/originals` folder
+2. In your original SVG file, delete `width` and `height` attributes and leave the original `viewBox` attribute. You could easily process the image using online editors like [SVGOmg](https://jakearchibald.github.io/svgomg/) (enable `Prefer viewBox to width/height`)
+3. In the `icons/svg` folder, create a new React component (with a `.tsx` extension) of the same name
+4. Copy all the `<path>` elements into the new React component and replace the original `<path>` with the element `<Path>` (capital P) from the `react-native-svg` package. Replace all the harcoded fill values with the generic `currentColor` value, so that the icon inherits the color from the parent `Svg` container
+
+5. Add the dynamic size and colour (if required), replacing the hardcoded values with the corresponding props. The final result should be similar to the following:
+    ```tsx
+    import { Svg, Path } from "react-native-svg";
+    // [...]
+
+    const IconSpid = ({ size, style }: SVGIconProps) => (
+      <Svg width={size} height={size} viewBox="0 0 24 24" style={style}>
+        <Path
+          d="M13.615 …"
+          fill="currentColor"
+        />
+      </Svg>
+    );
+    ```
+6. Repeat the previous steps for each icon
+7. Once you have finished processing all the new icons, run `node generateNewTimestamp` to avoid overwriting these files with the `generateNewIcons` process.
+
+> [!caution] 
+> The `currentColor` value should only be added for monochromatic icons. For example, if you export an `IconSystem...` with specific color values, don't add it at all.
+
+#### Wrong icon rendering?
+Before exporting the SVG file:
+1. Detach the symbol instance to avoid destructive actions to the original source component. Use a draft or disposable project document. **Don't detach it** if you are in the original Design System project file
+2. Outline all the present strokes (unless required for dynamic stroke width, but we don't manage this case at the moment)
+3. Select all the different paths and flatten into one. Now you should have a single vector layer.
+4. Make sure your vector path is centered (both vertically and horizontally) in a square
+
+### Add the corresponding key to the `Icon` component
+
 Add the desired key to the `IOIcons` object with the corresponding component reference:
-```jsx
+```tsx
 export const IOIcons = {
   spid: IconSpid,
   …
 }
 ```
-Add the key to the relative icon set:
-```ts
+There's no need to add the new icon in the specific Design System page because it happens automatically.
+
+> [!important]
+> To keep the icons grouped by sets, remember to put the key above the icons with a specific prefix
+
+If the icon belongs to a specific set, add the key to the relative icon set as well:
+```tsx
 export const IONavIcons = {
   navMessages,
   navWallet,
@@ -42,6 +100,8 @@ export const IONavIcons = {
 } as const;
 ```
 
+### Use the new icon in a different component
+
 You can add the recently added icon with the following declaration:
 ```jsx
 // Default size: 24×24px
@@ -51,5 +111,5 @@ You can add the recently added icon with the following declaration:
 
 ## View all the available icons
 There are two ways:
-- In the app, go to the `Profile → Design System → Icons` (you must enable `Debug Mode`)
+- In the main app, go to the `Profile → Design System → Icons` (you must enable `Debug Mode`)
 - In the repository, go to the `svg/originals` subfolder

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { Path, Svg } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconSparkles = ({ size, style, ...props }: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 16 17" style={style} {...props}>
+    <Path
+      fill="currentColor"
+      d="M5.64418.97979c.23675-.63972 1.14156-.63972 1.37831 0l1.27772 3.45256a.73476.73476 0 0 0 .43411.43411l3.45258 1.27772c.6397.23675.6397 1.14156 0 1.37831L8.73432 8.80021a.73476.73476 0 0 0-.43411.43411L7.02249 12.6869c-.23675.6397-1.14156.6397-1.37831 0L4.36646 9.23432a.73476.73476 0 0 0-.43411-.43411L.47979 7.52249c-.63972-.23675-.63972-1.14156 0-1.37831l3.45256-1.27772a.73476.73476 0 0 0 .43411-.43411L5.64418.97979Zm6.65942 9.10601c.1246-.33665.6008-.33665.7255 0l.6724 1.8172a.38723.38723 0 0 0 .2285.2285l1.8172.6725c.3366.1246.3366.6008 0 .7254l-1.8172.6725a.3868.3868 0 0 0-.2285.2284l-.6724 1.8172c-.1247.3367-.6009.3367-.7255 0l-.6725-1.8172a.38638.38638 0 0 0-.2284-.2284l-1.81717-.6725c-.3367-.1246-.3367-.6008 0-.7254l1.81717-.6725a.3868.3868 0 0 0 .2284-.2285l.6725-1.8172Z"
+    />
+  </Svg>
+);
+
+export default IconSparkles;

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

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 17">
+  <path fill="#5517E3" d="M5.64418.97979c.23675-.63972 1.14156-.63972 1.37831 0l1.27772 3.45256a.73476.73476 0 0 0 .43411.43411l3.45258 1.27772c.6397.23675.6397 1.14156 0 1.37831L8.73432 8.80021a.73476.73476 0 0 0-.43411.43411L7.02249 12.6869c-.23675.6397-1.14156.6397-1.37831 0L4.36646 9.23432a.73476.73476 0 0 0-.43411-.43411L.47979 7.52249c-.63972-.23675-.63972-1.14156 0-1.37831l3.45256-1.27772a.73476.73476 0 0 0 .43411-.43411L5.64418.97979Zm6.65942 9.10601c.1246-.33665.6008-.33665.7255 0l.6724 1.8172a.38723.38723 0 0 0 .2285.2285l1.8172.6725c.3366.1246.3366.6008 0 .7254l-1.8172.6725a.3868.3868 0 0 0-.2285.2284l-.6724 1.8172c-.1247.3367-.6009.3367-.7255 0l-.6725-1.8172a.38638.38638 0 0 0-.2284-.2284l-1.81717-.6725c-.3367-.1246-.3367-.6008 0-.7254l1.81717-.6725a.3868.3868 0 0 0 .2284-.2285l.6725-1.8172Z"/>
+</svg>

package/src/components/index.tsx

@@ -2,25 +2,27 @@ export * from "./accordion";
 export * from "./alert";
 export * from "./avatar";
 export * from "./badge";
+export * from "./banner";
 export * from "./buttons";
 export * from "./checkbox";
 export * from "./contentWrapper";
+export * from "./codeInput";
 export * from "./divider";
 export * from "./featureInfo";
 export * from "./icons";
+export * from "./layout";
 export * from "./listitems";
 export * from "./logos";
 export * from "./loadingSpinner";
 export * from "./modules";
-export * from "./banner";
+export * from "./numberpad";
 export * from "./pictograms";
 export * from "./radio";
 export * from "./spacer";
+export * from "./stepper";
 export * from "./switch";
 export * from "./tag";
 export * from "./tabs";
 export * from "./toast";
 export * from "./typography";
 export * from "./textInput";
-export * from "./layout";
-export * from "./numberpad";

package/src/components/layout/HeaderSecondLevel.tsx

@@ -74,7 +74,6 @@ const styles = StyleSheet.create({
   headerInner: {
     paddingHorizontal: IOVisualCostants.appMarginDefault,
     height: IOVisualCostants.headerHeight,
-    borderBottomWidth: 1,
     flexGrow: 1,
     flexDirection: "row",
     alignItems: "center",
@@ -146,19 +145,17 @@ export const HeaderSecondLevel = ({
   return (
     <Animated.View
       accessibilityRole="header"
-      style={
+      style={[
         transparent
           ? { borderBottomWidth: 0 }
-          : { backgroundColor: IOColors[HEADER_BG_COLOR] }
-      }
+          : { backgroundColor: IOColors[HEADER_BG_COLOR] },
+        { borderBottomWidth: 1 },
+        headerWrapperAnimatedStyle
+      ]}
     >
       <Animated.View
         testID={testID}
-        style={[
-          { marginTop: insets.top },
-          styles.headerInner,
-          headerWrapperAnimatedStyle
-        ]}
+        style={[{ marginTop: insets.top }, styles.headerInner]}
       >
         <IconButton
           icon={Platform.OS === "ios" ? "backiOS" : "backAndroid"}

package/src/components/listitems/ListItemAction.tsx

@@ -29,6 +29,7 @@ import {
 import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { AnimatedIcon, IOIcons, Icon } from "../icons";
+import { buttonTextFontSize } from "../typography/ButtonText";
 
 export type ListItemAction = WithTestID<{
   label: string;
@@ -41,7 +42,7 @@ export type ListItemAction = WithTestID<{
 
 const styles = StyleSheet.create({
   label: {
-    fontSize: 16,
+    fontSize: buttonTextFontSize,
     lineHeight: 20,
     ...makeFontStyleObject("Regular", false, "ReadexPro")
   }
@@ -50,8 +51,8 @@ const styles = StyleSheet.create({
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyStyles = StyleSheet.create({
   labelLegacy: {
-    fontSize: 18,
-    lineHeight: 24,
+    fontSize: buttonTextFontSize,
+    lineHeight: 20,
     ...makeFontStyleObject("SemiBold", false, "TitilliumWeb")
   }
 });