@pagopa/io-app-design-system 1.17.2 → 1.18.0

package/lib/typescript/components/radio/RadioButtonLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonLabel.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/RadioButtonLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAQ,MAAM,cAAc,CAAC;AAK/C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IAEd,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7C,CAAC;AAMF,KAAK,QAAQ,GAAG,KAAK,GACnB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC,GACxE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EAAE,SAAS,CAAC,CAAC;AAE1D;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,gDAK1B,QAAQ,sBAqCV,CAAC"}

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

@@ -1,3 +1,4 @@
 export * from "./AnimatedRadio";
+export * from "./RadioButtonLabel";
 export * from "./RadioGroup";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/radio/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC"}

package/lib/typescript/utils/hooks/useErrorShakeAnimation.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react-native-reanimated" />
+export declare const useErrorShakeAnimation: () => {
+    translate: import("react-native-reanimated").SharedValue<number>;
+    animatedStyle: {
+        transform: {
+            translateX: number;
+        }[];
+    };
+    shakeAnimation: () => number;
+};
+//# sourceMappingURL=useErrorShakeAnimation.d.ts.map

package/lib/typescript/utils/hooks/useErrorShakeAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useErrorShakeAnimation.d.ts","sourceRoot":"","sources":["../../../../src/utils/hooks/useErrorShakeAnimation.ts"],"names":[],"mappings":";AAYA,eAAO,MAAM,sBAAsB;;;;;;;;CA8BlC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.17.2",
+  "version": "1.18.0",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -37,6 +37,8 @@
     "bootstrap": "yarn example && yarn install",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
+    "predeploy": "yarn build-storybook",
+    "deploy-storybook": "gh-pages -d storybook-static",
     "generate:icons": "node scripts/generateNewIcons.js",
     "generate:pictograms": "node scripts/generateNewPictograms.js",
     "generate": "npm-run-all generate:*"
@@ -52,7 +54,7 @@
   "bugs": {
     "url": "https://github.com/pagopa/io-app-design-system/issues"
   },
-  "homepage": "https://github.com/pagopa/io-app-design-system#readme",
+  "homepage": "https://pagopa.github.io/io-app-design-system",
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",

package/src/components/checkbox/CheckboxLabel.tsx

@@ -1,10 +1,8 @@
 import * as React from "react";
 import { useState } from "react";
-import { Pressable, StyleSheet, Text, View } from "react-native";
-import { IOColors, useIOExperimentalDesign } from "../../core";
+import { Pressable, View } from "react-native";
 import { IOStyles } from "../../core/IOStyles";
 import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { HSpacer } from "../spacer/Spacer";
 import { H6 } from "../typography/H6";
 import { AnimatedCheckbox } from "./AnimatedCheckbox";
@@ -23,17 +21,6 @@ type OwnProps = Props &
   Pick<React.ComponentProps<typeof AnimatedCheckbox>, "disabled" | "checked"> &
   Pick<React.ComponentProps<typeof Pressable>, "onPress">;
 
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const styles = StyleSheet.create({
-  legacyTextValue: {
-    fontSize: 16,
-    lineHeight: 24,
-    color: IOColors.bluegreyDark,
-    flexShrink: 1,
-    ...makeFontStyleObject("SemiBold", undefined, "TitilliumWeb")
-  }
-});
-
 /**
  * A checkbox with the automatic state management that uses a {@link AnimatedCheckBox}
  * The toggleValue change when a `onPress` event is received and dispatch the `onValueChange`.
@@ -49,22 +36,6 @@ export const CheckboxLabel = ({
 }: OwnProps) => {
   const [toggleValue, setToggleValue] = useState(checked ?? false);
 
-  const { isExperimental } = useIOExperimentalDesign();
-  const checkboxLabelText = (
-    <H6 style={{ flexShrink: 1 }} color={"black"}>
-      {label}
-    </H6>
-  );
-
-  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-  const legacyCheckboxlabelText = (
-    <Text style={styles.legacyTextValue}>{label}</Text>
-  );
-
-  const checkboxLabelTextComponent = isExperimental
-    ? checkboxLabelText
-    : legacyCheckboxlabelText;
-
   const toggleCheckbox = () => {
     triggerHaptic("impactLight");
     setToggleValue(!toggleValue);
@@ -96,7 +67,9 @@ export const CheckboxLabel = ({
           <AnimatedCheckbox checked={checked ?? toggleValue} />
         </View>
         <HSpacer size={8} />
-        {checkboxLabelTextComponent}
+        <H6 style={{ flexShrink: 1 }} color={"black"}>
+          {label}
+        </H6>
       </View>
     </Pressable>
   );

package/src/components/codeInput/CodeInput.tsx

@@ -1,15 +1,10 @@
 import React, { useEffect, useMemo } from "react";
 import { StyleSheet, View } from "react-native";
-import Animated, {
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withSequence,
-  withTiming
-} from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 import { IOColors, IOStyles } from "../../core";
 import { triggerHaptic } from "../../functions";
 import { HSpacer } from "../spacer";
+import { useErrorShakeAnimation } from "../../utils/hooks/useErrorShakeAnimation";
 
 type CodeInputProps = {
   value: string;
@@ -56,12 +51,7 @@ export const CodeInput = ({
 }: 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 { translate, animatedStyle, shakeAnimation } = useErrorShakeAnimation();
 
   const fillColor = useMemo(
     () =>
@@ -82,25 +72,7 @@ export const CodeInput = ({
         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) })
-        );
+        translate.value = shakeAnimation();
 
         const timer = setTimeout(() => {
           setStatus("default");
@@ -110,7 +82,7 @@ export const CodeInput = ({
       }
     }
     return;
-  }, [value, onValidate, length, onValueChange, translate]);
+  }, [value, onValidate, length, onValueChange, translate, shakeAnimation]);
 
   return (
     <Animated.View style={[IOStyles.row, styles.wrapper, animatedStyle]}>

package/src/components/icons/Icon.tsx

@@ -5,10 +5,12 @@ import { IOColors } from "../../core/IOColors";
 /* Icons */
 import IconAbacus from "./svg/IconAbacus";
 import IconAdd from "./svg/IconAdd";
+import IconAddSmall from "./svg/IconAddSmall";
 import IconAgreement from "./svg/IconAgreement";
 import IconAmount from "./svg/IconAmount";
 import IconAnalytics from "./svg/IconAnalytics";
 import IconArchive from "./svg/IconArchive";
+import IconArchiveFilled from "./svg/IconArchiveFilled";
 import IconArrowBottom from "./svg/IconArrowBottom";
 import IconArrowLeft from "./svg/IconArrowLeft";
 import IconArrowRight from "./svg/IconArrowRight";
@@ -37,6 +39,7 @@ import IconCategSustainability from "./svg/IconCategSustainability";
 import IconCategTelco from "./svg/IconCategTelco";
 import IconCategTravel from "./svg/IconCategTravel";
 import IconCategWellness from "./svg/IconCategWellness";
+import IconChange from "./svg/IconChange";
 import IconChat from "./svg/IconChat";
 import IconCheckTick from "./svg/IconCheckTick";
 import IconCheckTickBig from "./svg/IconCheckTickBig";
@@ -49,35 +52,63 @@ import IconCie from "./svg/IconCie";
 import IconCloseLarge from "./svg/IconCloseLarge";
 import IconCloseMedium from "./svg/IconCloseMedium";
 import IconCloseSmall from "./svg/IconCloseSmall";
+import IconCode from "./svg/IconCode";
 import IconCoggle from "./svg/IconCoggle";
+import IconCompare from "./svg/IconCompare";
+import IconContactless from "./svg/IconContactless";
 import IconCopy from "./svg/IconCopy";
 import IconCreditCard from "./svg/IconCreditCard";
+import IconCreditCardOff from "./svg/IconCreditCardOff";
 import IconDevice from "./svg/IconDevice";
+import IconDeviceVibration from "./svg/IconDeviceVibration";
+import IconDisabilityCard from "./svg/IconDisabilityCard";
+import IconDocGiacenza from "./svg/IconDocGiacenza";
+import IconDocPaymentCode from "./svg/IconDocPaymentCode";
+import IconDocPaymentTitle from "./svg/IconDocPaymentTitle";
 import IconDocument from "./svg/IconDocument";
 import IconDocumentAttachment from "./svg/IconDocumentAttachment";
 import IconDocumentAttachmentPDF from "./svg/IconDocumentAttachmentPDF";
 import IconDocumentSign from "./svg/IconDocumentSign";
 import IconDotMenu from "./svg/IconDotMenu";
+import IconDriverLicense from "./svg/IconDriverLicense";
 import IconEdit from "./svg/IconEdit";
 import IconEmail from "./svg/IconEmail";
 import IconEmailFill from "./svg/IconEmailFill";
 import IconEmojiHappy from "./svg/IconEmojiHappy";
 import IconEmojiSad from "./svg/IconEmojiSad";
+import IconEntityCode from "./svg/IconEntityCode";
 import IconErrorFilled from "./svg/IconErrorFilled";
 import IconExternalLink from "./svg/IconExternalLink";
+import IconExternalLinkSmall from "./svg/IconExternalLinkSmall";
 import IconEyeHide from "./svg/IconEyeHide";
 import IconEyeShow from "./svg/IconEyeShow";
+import IconFamilySharing from "./svg/IconFamilySharing";
+import IconFilterAndroid from "./svg/IconFilterAndroid";
+import IconFilterOffiOS from "./svg/IconFilterOffiOS";
+import IconFilterOniOS from "./svg/IconFilterOniOS";
+import IconFingerprint from "./svg/IconFingerprint";
 import IconFiscalCodeIndividual from "./svg/IconFiscalCodeIndividual";
+import IconFolder from "./svg/IconFolder";
 import IconFornitori from "./svg/IconFornitori";
+import IconForward from "./svg/IconForward";
 import IconGallery from "./svg/IconGallery";
+import IconHealthCard from "./svg/IconHealthCard";
+import IconHearthEmpty from "./svg/IconHearthEmpty";
+import IconHearthFilled from "./svg/IconHearthFilled";
 import IconHistory from "./svg/IconHistory";
 import IconHome from "./svg/IconHome";
 import IconHomeFill from "./svg/IconHomeFill";
 import IconHourglass from "./svg/IconHourglass";
+import IconInboxEmpty from "./svg/IconInboxEmpty";
+import IconInboxFilled from "./svg/IconInboxFilled";
 import IconInfo from "./svg/IconInfo";
 import IconInfoFilled from "./svg/IconInfoFilled";
 import IconInitiatives from "./svg/IconInitiatives";
 import IconInstitution from "./svg/IconInstitution";
+import IconInstruction from "./svg/IconInstruction";
+import IconKey from "./svg/IconKey";
+import IconKeyboard from "./svg/IconKeyboard";
+import IconKeyboardDown from "./svg/IconKeyboardDown";
 import IconLadybug from "./svg/IconLadybug";
 import IconLegalValue from "./svg/IconLegalValue";
 import IconLight from "./svg/IconLight";
@@ -91,6 +122,7 @@ import IconLockOn from "./svg/IconLockOn";
 import IconLogin from "./svg/IconLogin";
 import IconLogout from "./svg/IconLogout";
 import IconMagicWand from "./svg/IconMagicWand";
+import IconMapPin from "./svg/IconMapPin";
 import IconMerchant from "./svg/IconMerchant";
 import IconMessage from "./svg/IconMessage";
 import IconMessageLegal from "./svg/IconMessageLegal";
@@ -103,14 +135,19 @@ import IconNavServices from "./svg/IconNavServices";
 import IconNavServicesFocused from "./svg/IconNavServicesFocused";
 import IconNavWallet from "./svg/IconNavWallet";
 import IconNavWalletFocused from "./svg/IconNavWalletFocused";
+import IconNotes from "./svg/IconNotes";
 import IconNotice from "./svg/IconNotice";
 import IconNoticeFilled from "./svg/IconNoticeFilled";
+import IconNoticePlain from "./svg/IconNoticePlain";
+import IconNotification from "./svg/IconNotification";
 import IconOk from "./svg/IconOk";
+import IconOption from "./svg/IconOption";
 import IconPEC from "./svg/IconPEC";
 import IconPSP from "./svg/IconPSP";
 import IconPhone from "./svg/IconPhone";
 import IconPinOff from "./svg/IconPinOff";
 import IconPinOn from "./svg/IconPinOn";
+import IconPrint from "./svg/IconPrint";
 import IconProductIOApp from "./svg/IconProductIOApp";
 import IconProductIOAppBlueBg from "./svg/IconProductIOAppBlueBg";
 import IconProductPagoPA from "./svg/IconProductPagoPA";
@@ -119,6 +156,9 @@ import IconProfileAlt from "./svg/IconProfileAlt";
 import IconProfileFilled from "./svg/IconProfileFilled";
 import IconQrCode from "./svg/IconQrCode";
 import IconQuestion from "./svg/IconQuestion";
+import IconRead from "./svg/IconRead";
+import IconReceiptOff from "./svg/IconReceiptOff";
+import IconReceiptOn from "./svg/IconReceiptOn";
 import IconRefund from "./svg/IconRefund";
 import IconReload from "./svg/IconReload";
 import IconSave from "./svg/IconSave";
@@ -127,6 +167,8 @@ import IconSecurity from "./svg/IconSecurity";
 import IconSelfCertification from "./svg/IconSelfCertification";
 import IconShareAndroid from "./svg/IconShareAndroid";
 import IconShareiOs from "./svg/IconShareiOs";
+import IconSignal from "./svg/IconSignal";
+import IconSparkles from "./svg/IconSparkles";
 import IconSpid from "./svg/IconSpid";
 import IconStarEmpty from "./svg/IconStarEmpty";
 import IconStarFilled from "./svg/IconStarFilled";
@@ -134,63 +176,22 @@ import IconSuccess from "./svg/IconSuccess";
 import IconSwitchOff from "./svg/IconSwitchOff";
 import IconSystemAppsAndroid from "./svg/IconSystemAppsAndroid";
 import IconSystemNotificationsInstructions from "./svg/IconSystemNotificationsInstructions";
+import IconSystemPermissionsAndroid from "./svg/IconSystemPermissionsAndroid";
 import IconSystemSettingsAndroid from "./svg/IconSystemSettingsAndroid";
 import IconSystemSettingsiOS from "./svg/IconSystemSettingsiOS";
 import IconSystemToggleInstructions from "./svg/IconSystemToggleInstructions";
 import IconTag from "./svg/IconTag";
-import IconTransactionsBoxed from "./svg/IconTransactionsBoxed";
+import IconTerms from "./svg/IconTerms";
+import IconTouch from "./svg/IconTouch";
 import IconTransactions from "./svg/IconTransactions";
+import IconTransactionsBoxed from "./svg/IconTransactionsBoxed";
 import IconTrashcan from "./svg/IconTrashcan";
 import IconWarningFilled from "./svg/IconWarningFilled";
 import IconWebsite from "./svg/IconWebsite";
-import IconOption from "./svg/IconOption";
-import IconKey from "./svg/IconKey";
-import IconNotification from "./svg/IconNotification";
-import IconChange from "./svg/IconChange";
 import LegIconCheckOff from "./svg/LegIconCheckOff";
 import LegIconCheckOn from "./svg/LegIconCheckOn";
 import LegIconRadioOff from "./svg/LegIconRadioOff";
 import LegIconRadioOn from "./svg/LegIconRadioOn";
-import IconKeyboard from "./svg/IconKeyboard";
-import IconContactless from "./svg/IconContactless";
-import IconDisabilityCard from "./svg/IconDisabilityCard";
-import IconDriverLicense from "./svg/IconDriverLicense";
-import IconHealthCard from "./svg/IconHealthCard";
-import IconDocPaymentCode from "./svg/IconDocPaymentCode";
-import IconNotes from "./svg/IconNotes";
-import IconEntityCode from "./svg/IconEntityCode";
-import IconFolder from "./svg/IconFolder";
-import IconReceiptOn from "./svg/IconReceiptOn";
-import IconFingerprint from "./svg/IconFingerprint";
-import IconAddSmall from "./svg/IconAddSmall";
-import IconArchiveFilled from "./svg/IconArchiveFilled";
-import IconCode from "./svg/IconCode";
-import IconCompare from "./svg/IconCompare";
-import IconCreditCardOff from "./svg/IconCreditCardOff";
-import IconDeviceVibration from "./svg/IconDeviceVibration";
-import IconDocPaymentTitle from "./svg/IconDocPaymentTitle";
-import IconDocGiacenza from "./svg/IconDocGiacenza";
-import IconExternalLinkSmall from "./svg/IconExternalLinkSmall";
-import IconFamilySharing from "./svg/IconFamilySharing";
-import IconFilterOniOS from "./svg/IconFilterOniOS";
-import IconFilterOffiOS from "./svg/IconFilterOffiOS";
-import IconFilterAndroid from "./svg/IconFilterAndroid";
-import IconForward from "./svg/IconForward";
-import IconHearthEmpty from "./svg/IconHearthEmpty";
-import IconHearthFilled from "./svg/IconHearthFilled";
-import IconInboxEmpty from "./svg/IconInboxEmpty";
-import IconInboxFilled from "./svg/IconInboxFilled";
-import IconInstruction from "./svg/IconInstruction";
-import IconTerms from "./svg/IconTerms";
-import IconKeyboardDown from "./svg/IconKeyboardDown";
-import IconMapPin from "./svg/IconMapPin";
-import IconNoticePlain from "./svg/IconNoticePlain";
-import IconPrint from "./svg/IconPrint";
-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,
@@ -381,7 +382,8 @@ export const IOIcons = {
   systemSettingsiOS: IconSystemSettingsiOS,
   systemToggleInstructions: IconSystemToggleInstructions,
   systemAppsAndroid: IconSystemAppsAndroid,
-  systemNotificationsInstructions: IconSystemNotificationsInstructions
+  systemNotificationsInstructions: IconSystemNotificationsInstructions,
+  systemPermissionsAndroid: IconSystemPermissionsAndroid
 } as const;
 
 export type IOIcons = keyof typeof IOIcons;
@@ -649,7 +651,8 @@ const {
   systemSettingsiOS,
   systemToggleInstructions,
   systemAppsAndroid,
-  systemNotificationsInstructions
+  systemNotificationsInstructions,
+  systemPermissionsAndroid
 } = IOIcons;
 
 export const IOSystemIcons = {
@@ -657,7 +660,8 @@ export const IOSystemIcons = {
   systemSettingsiOS,
   systemToggleInstructions,
   systemAppsAndroid,
-  systemNotificationsInstructions
+  systemNotificationsInstructions,
+  systemPermissionsAndroid
 } as const;
 
 export type IOSystemIcons = keyof typeof IOSystemIcons;

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { Path, Rect, Svg } from "react-native-svg";
+import { SVGIconProps } from "../Icon";
+
+const IconSystemPermissionsAndroid = ({
+  size,
+  style,
+  ...props
+}: SVGIconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
+    <Rect width={size} height={size} fill="#636B82" rx="8" />
+    <Path
+      d="M12 15.75C12.825 15.75 13.5 15.075 13.5 14.25C13.5 13.425 12.825 12.75 12 12.75C11.175 12.75 10.5 13.425 10.5 14.25C10.5 15.075 11.175 15.75 12 15.75ZM16.5 9H15.75V7.5C15.75 5.43 14.07 3.75 12 3.75C9.93 3.75 8.25 5.43 8.25 7.5H9.675C9.675 6.2175 10.7175 5.175 12 5.175C13.2825 5.175 14.325 6.2175 14.325 7.5V9H7.5C6.675 9 6 9.675 6 10.5V18C6 18.825 6.675 19.5 7.5 19.5H16.5C17.325 19.5 18 18.825 18 18V10.5C18 9.675 17.325 9 16.5 9ZM16.5 18H7.5V10.5H16.5V18Z"
+      fill="#FFFFFF"
+    />
+  </Svg>
+);
+
+export default IconSystemPermissionsAndroid;

package/src/components/index.tsx

@@ -16,6 +16,7 @@ export * from "./logos";
 export * from "./loadingSpinner";
 export * from "./modules";
 export * from "./numberpad";
+export * from "./otpInput";
 export * from "./pictograms";
 export * from "./radio";
 export * from "./spacer";

package/src/components/listitems/ListItemTransaction.tsx

@@ -65,6 +65,11 @@ export type ListItemTransaction = WithTestID<
     paymentLogoIcon?: ListItemTransactionLogo;
     subtitle: string;
     title: string;
+    /**
+     * The maximum number of lines to display for the title.
+     * @default 2
+     */
+    numberOfLines?: number;
     accessible?: boolean;
   } & (
       | {
@@ -117,6 +122,7 @@ export const ListItemTransaction = ({
   transactionAmount,
   badgeText,
   transactionStatus = "success",
+  numberOfLines = 2,
   accessible
 }: ListItemTransaction) => {
   const { isExperimental } = useIOExperimentalDesign();
@@ -144,6 +150,7 @@ export const ListItemTransaction = ({
             <H6
               accessibilityLabel={getAccessibleAmountText(transactionAmount)}
               color={hasChevronRight ? interactiveColor : "black"}
+              numberOfLines={numberOfLines}
             >
               {transactionAmount || ""}
             </H6>
@@ -153,6 +160,7 @@ export const ListItemTransaction = ({
             <H6
               accessibilityLabel={getAccessibleAmountText(transactionAmount)}
               color={hasChevronRight ? interactiveColor : "success-700"}
+              numberOfLines={numberOfLines}
             >
               {transactionAmount || ""}
             </H6>
@@ -181,7 +189,10 @@ export const ListItemTransaction = ({
           </View>
         )}
         <View style={IOStyles.flex}>
-          <LabelSmallAlt numberOfLines={2} color={theme["textBody-default"]}>
+          <LabelSmallAlt
+            numberOfLines={numberOfLines}
+            color={theme["textBody-default"]}
+          >
             {title}
           </LabelSmallAlt>
           <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>

package/src/components/otpInput/BoxedInput.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { useMemo } from "react";
+import { View, StyleSheet } from "react-native";
+import { IOColors } from "../../core";
+import { BaseTypography, H6 } from "../typography";
+
+type Props = {
+  status: "default" | "focus" | "error";
+  secret?: boolean;
+  value?: string;
+};
+
+const styles = StyleSheet.create({
+  baseBox: {
+    alignItems: "center",
+    justifyContent: "center",
+    width: 35,
+    height: 60,
+    borderRadius: 8
+  },
+  defaultBox: {
+    borderWidth: 1,
+    borderColor: IOColors["grey-200"]
+  },
+  focusedBox: {
+    borderWidth: 2,
+    borderColor: IOColors["blueIO-500"]
+  },
+  errorBox: {
+    borderWidth: 1,
+    borderColor: IOColors["error-850"],
+    backgroundColor: IOColors["error-100"]
+  }
+});
+
+// FIXME Replace this component with H3 once the legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const SecretValue = () => (
+  <BaseTypography
+    font="DMMono"
+    weight="SemiBold"
+    color="bluegreyDark"
+    fontStyle={{ fontSize: 22, lineHeight: 33 }}
+    accessible={false}
+  >
+    {"•"}
+  </BaseTypography>
+);
+
+export const BoxedInput = ({ status, value, secret }: Props) => {
+  const derivedStyle = useMemo(() => {
+    switch (status) {
+      case "error":
+        return styles.errorBox;
+      case "focus":
+        return styles.focusedBox;
+      case "default":
+      default:
+        return styles.defaultBox;
+    }
+  }, [status]);
+  return (
+    <View style={[styles.baseBox, derivedStyle]} accessible={false}>
+      {value &&
+        (secret ? <SecretValue /> : <H6 accessible={false}>{value}</H6>)}
+    </View>
+  );
+};