@pagopa/io-app-design-system 4.2.1 → 4.4.0

package/lib/commonjs/components/listitems/ListItemNav.js

@@ -4,25 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ListItemNav = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
-var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
 var _core = require("../../core");
+var _hooks = require("../../hooks");
+var _accessibility = require("../../utils/accessibility");
 var _avatar = require("../avatar");
 var _badge = require("../badge");
 var _icons = require("../icons");
 var _loadingSpinner = require("../loadingSpinner");
 var _spacer = require("../spacer");
 var _typography = require("../typography");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const styles = _reactNative.StyleSheet.create({
-  paymentLogoSize: {
-    width: _core.IOSelectionListItemVisualParams.iconSize,
-    height: _core.IOSelectionListItemVisualParams.iconSize
-  }
-});
 const ListItemNav = ({
   value,
   description,
@@ -39,17 +34,18 @@ const ListItemNav = ({
   loading,
   numberOfLines
 }) => {
-  var _IOScaleValues$basicB;
-  const isPressed = (0, _reactNativeReanimated.useSharedValue)(0);
   const {
-    isExperimental
-  } = (0, _core.useIOExperimentalDesign)();
+    onPressIn,
+    onPressOut,
+    scaleAnimatedStyle,
+    backgroundAnimatedStyle
+  } = (0, _hooks.useListItemAnimation)();
   const theme = (0, _core.useIOTheme)();
-  const withMargin = GraphicalAsset => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      marginRight: _core.IOListItemVisualParams.iconMargin
-    }
-  }, GraphicalAsset);
+  const {
+    dynamicFontScale,
+    spacingScaleMultiplier,
+    hugeFontEnabled
+  } = (0, _accessibility.useIOFontDynamicScale)();
   const listItemNavContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, topElement && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, topElement.badgeProps && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: {
       alignSelf: "flex-start"
@@ -62,6 +58,7 @@ const ListItemNav = ({
       flexDirection: "row"
     }
   }, /*#__PURE__*/_react.default.createElement(_icons.Icon, {
+    allowFontScaling: true,
     name: "calendar",
     size: 16,
     color: "grey-300"
@@ -78,49 +75,17 @@ const ListItemNav = ({
     weight: "Regular",
     color: theme["textBody-tertiary"]
   }, description) : description));
-  const mapBackgroundStates = {
-    default: (0, _core.hexToRgba)(_core.IOColors[theme["listItem-pressed"]], 0),
-    pressed: _core.IOColors[theme["listItem-pressed"]]
-  };
-  const navIconColor = isExperimental ? theme["interactiveElem-default"] : "blue";
-
-  // Scaling transformation applied when the button is pressed
-  const animationScaleValue = _core.IOScaleValues === null || _core.IOScaleValues === void 0 || (_IOScaleValues$basicB = _core.IOScaleValues.basicButton) === null || _IOScaleValues$basicB === void 0 ? void 0 : _IOScaleValues$basicB.pressedState;
-  const progressPressed = (0, _reactNativeReanimated.useDerivedValue)(() => (0, _reactNativeReanimated.withSpring)(isPressed.value, _core.IOSpringValues.button));
-
-  // Interpolate animation values from `isPressed` values
-  const animatedScaleStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    const scale = (0, _reactNativeReanimated.interpolate)(progressPressed.value, [0, 1], [1, animationScaleValue], _reactNativeReanimated.Extrapolate.CLAMP);
-    return {
-      transform: [{
-        scale
-      }]
-    };
-  });
-  const animatedBackgroundStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    const backgroundColor = (0, _reactNativeReanimated.interpolateColor)(progressPressed.value, [0, 1], [mapBackgroundStates.default, mapBackgroundStates.pressed]);
-    return {
-      backgroundColor
-    };
-  });
-  const handlePressIn = (0, _react.useCallback)(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 1;
-  }, [isPressed]);
-  const handlePressOut = (0, _react.useCallback)(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 0;
-  }, [isPressed]);
+  const interactiveColor = theme["interactiveElem-default"];
   const handleOnPress = event => {
     if (!loading) {
       onPress(event);
     }
   };
-  const primaryColor = isExperimental ? "blueIO-500" : "blue";
   return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
     onPress: handleOnPress,
-    onPressIn: handlePressIn,
-    onPressOut: handlePressOut,
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
+    onTouchEnd: onPressOut,
     accessible: true,
     accessibilityState: {
       busy: loading
@@ -130,28 +95,35 @@ const ListItemNav = ({
     accessibilityRole: "button",
     testID: testID
   }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
-    style: [_core.IOListItemStyles.listItem, animatedBackgroundStyle]
+    style: [_core.IOListItemStyles.listItem, backgroundAnimatedStyle]
   }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
-    style: [_core.IOListItemStyles.listItemInner, animatedScaleStyle]
-  }, icon && withMargin( /*#__PURE__*/_react.default.createElement(_icons.Icon, {
+    style: [_core.IOListItemStyles.listItemInner, {
+      columnGap: _core.IOListItemVisualParams.iconMargin * dynamicFontScale * spacingScaleMultiplier
+    }, scaleAnimatedStyle]
+  }, icon && !hugeFontEnabled && /*#__PURE__*/_react.default.createElement(_icons.Icon, {
+    allowFontScaling: true,
     name: icon,
     color: iconColor,
     size: _core.IOListItemVisualParams.iconSize
-  })), paymentLogoUri && withMargin( /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
+  }), paymentLogoUri && /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
     accessibilityIgnoresInvertColors: true,
     source: {
       uri: paymentLogoUri
     },
-    style: styles.paymentLogoSize
-  })), avatar && withMargin( /*#__PURE__*/_react.default.createElement(_avatar.Avatar, _extends({
+    style: {
+      width: _core.IOSelectionListItemVisualParams.iconSize * dynamicFontScale,
+      height: _core.IOSelectionListItemVisualParams.iconSize * dynamicFontScale
+    }
+  }), avatar && /*#__PURE__*/_react.default.createElement(_avatar.Avatar, _extends({
     size: "small"
-  }, avatar))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, avatar)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: _core.IOStyles.flex
   }, listItemNavContent), loading && /*#__PURE__*/_react.default.createElement(_loadingSpinner.LoadingSpinner, {
-    color: primaryColor
+    color: interactiveColor
   }), !loading && !hideChevron && /*#__PURE__*/_react.default.createElement(_icons.Icon, {
+    allowFontScaling: true,
     name: "chevronRightListItem",
-    color: navIconColor,
+    color: interactiveColor,
     size: _core.IOListItemVisualParams.chevronSize
   }))));
 };

package/lib/commonjs/components/listitems/ListItemNav.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_core","_avatar","_badge","_icons","_loadingSpinner","_spacer","_typography","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","styles","StyleSheet","create","paymentLogoSize","width","IOSelectionListItemVisualParams","iconSize","height","ListItemNav","value","description","onPress","icon","iconColor","avatarProps","avatar","paymentLogoUri","accessibilityLabel","accessibilityHint","testID","hideChevron","topElement","loading","numberOfLines","_IOScaleValues$basicB","isPressed","useSharedValue","isExperimental","useIOExperimentalDesign","theme","useIOTheme","withMargin","GraphicalAsset","createElement","View","style","marginRight","IOListItemVisualParams","iconMargin","listItemNavContent","Fragment","badgeProps","alignSelf","Badge","VSpacer","size","dateValue","flexDirection","Icon","name","color","HSpacer","Caption","H6","BodySmall","weight","mapBackgroundStates","hexToRgba","IOColors","pressed","navIconColor","animationScaleValue","IOScaleValues","basicButton","pressedState","progressPressed","useDerivedValue","withSpring","IOSpringValues","button","animatedScaleStyle","useAnimatedStyle","scale","interpolate","Extrapolate","CLAMP","transform","animatedBackgroundStyle","backgroundColor","interpolateColor","handlePressIn","useCallback","handlePressOut","handleOnPress","event","primaryColor","Pressable","onPressIn","onPressOut","accessible","accessibilityState","busy","accessibilityRole","IOListItemStyles","listItem","listItemInner","Image","accessibilityIgnoresInvertColors","uri","Avatar","IOStyles","flex","LoadingSpinner","chevronSize","exports","_default"],"sourceRoot":"../../../../src","sources":["components/listitems/ListItemNav.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAOA,IAAAE,sBAAA,GAAAH,uBAAA,CAAAC,OAAA;AASA,IAAAG,KAAA,GAAAH,OAAA;AAaA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AACA,IAAAO,eAAA,GAAAP,OAAA;AACA,IAAAQ,OAAA,GAAAR,OAAA;AACA,IAAAS,WAAA,GAAAT,OAAA;AAAuD,SAAAU,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAZ,wBAAAgB,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAAA,SAAAW,SAAA,IAAAA,QAAA,GAAAT,MAAA,CAAAU,MAAA,GAAAV,MAAA,CAAAU,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAV,GAAA,IAAAa,MAAA,QAAAhB,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAU,MAAA,EAAAb,GAAA,KAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,gBAAAS,MAAA,YAAAH,QAAA,CAAAQ,KAAA,OAAAH,SAAA;AA0DvD,MAAMI,MAAM,GAAGC,uBAAU,CAACC,MAAM,CAAC;EAC/BC,eAAe,EAAE;IACfC,KAAK,EAAEC,qCAA+B,CAACC,QAAQ;IAC/CC,MAAM,EAAEF,qCAA+B,CAACC;EAC1C;AACF,CAAC,CAAC;AAEK,MAAME,WAAW,GAAGA,CAAC;EAC1BC,KAAK;EACLC,WAAW;EACXC,OAAO;EACPC,IAAI;EACJC,SAAS,GAAG,UAAU;EACtBC,WAAW,EAAEC,MAAM;EACnBC,cAAc;EACdC,kBAAkB;EAClBC,iBAAiB;EACjBC,MAAM;EACNC,WAAW,GAAG,KAAK;EACnBC,UAAU;EACVC,OAAO;EACPC;AACW,CAAC,KAAK;EAAA,IAAAC,qBAAA;EACjB,MAAMC,SAAS,GAAG,IAAAC,qCAAc,EAAC,CAAC,CAAC;EACnC,MAAM;IAAEC;EAAe,CAAC,GAAG,IAAAC,6BAAuB,EAAC,CAAC;EACpD,MAAMC,KAAK,GAAG,IAAAC,gBAAU,EAAC,CAAC;EAE1B,MAAMC,UAAU,GAAIC,cAAyB,iBAC3C3E,MAAA,CAAAmB,OAAA,CAAAyD,aAAA,CAACzE,YAAA,CAAA0E,IAAI;IAACC,KAAK,EAAE;MAAEC,WAAW,EAAEC,4BAAsB,CAACC;IAAW;EAAE,GAC7DN,cACG,CACP;EAED,MAAMO,kBAAkB,gBACtBlF,MAAA,CAAAmB,OAAA,CAAAyD,aAAA,CAAA5E,MAAA,CAAAmB,OAAA,CAAAgE,QAAA,QACGnB,UAAU,iBACThE,MAAA,CAAAmB,OAAA,CAAAyD,aAAA,CAAA5E,MAAA,CAAAmB,OAAA,CAAAgE,QAAA,QACGnB,UAAU,CAACoB,UAAU,iBACpBpF,MAAA,CAAAmB,OAAA,CAAAyD,aAAA,CAAA5E,MAAA,CAAAmB,OAAA,CAAAgE,QAAA,qBACEnF,MAAA,CAAAmB,OAAA,CAAAyD,aAAA,CAACzE,YAAA,CAAA0E,IAAI;IAACC,KAAK,EAAE;MAAEO,SAAS,EAAE;IAAa;EAAE,gBACvCrF,MAAA,CAAAmB,OAAA,CAAAyD,aAAA,CAACrE,MAAA,CAAA+E,KAAK,EAAKtB,UAAU,CAACoB,UAAa,CAC/B,CAAC,eACPpF,MAAA,CAAAmB,OAAA,CAAAyD,aAAA,CAAClE,OAAA,CAAA6E,OAAO;IAACC,IAAI,EAAE;EAAE,CAAE,CACnB,CACH,EACAxB,UAAU,CAACyB,SAAS,iBACnBzF,MAAA,CAAAmB,OAAA,CAAAyD,aAAA,CAAA5E,MAAA,CAAAmB,OAAA,CAAAgE,QAAA,qBACEnF,MAAA,CAAAmB,OAAA,CAAAyD,aAAA,CAACzE,YAAA,CAAA0E,IAAI;IAACC,KAAK,EAAE;MAAEO,SAAS,EAAE,YAAY;MAAEK,aAAa,EAAE;IAAM;EAAE,gBAC7D1F,MAAA,CAAAmB,OAAA,CAAAyD,aAAA,CAACpE,MAAA,CAAAmF,IAAI;IAACC,IAAI,EAAC,UAAU;IAACJ,IAAI,EAAE,EAAG;IAACK,KAAK,EAAC;EAAU,CAAE,CAAC,eACnD7F,MAAA,CAAAmB,OAAA,CAAAyD,aAAA,CAAClE,OAAA,CAAAoF,OAAO;IAACN,IAAI,EAAE;EAAE,CAAE,CAAC,eACpBxF,MAAA,CAAAmB,OAAA,CAAAyD,aAAA,CAACjE,WAAA,CAAAoF,OAAO;IAACF,KAAK,EAAErB,KAAK,CAAC,mBAAmB;EAAE,GACxCR,UAAU,CAACyB,SACL,CACL,CAAC,eACPzF,MAAA,CAAAmB,OAAA,CAAAyD,aAAA,CAAClE,OAAA,CAAA6E,OAAO;IAACC,IAAI,EAAE;EAAE,CAAE,CACnB,CAEJ,CACH,EAEA,OAAOpC,KAAK,KAAK,QAAQ,gBACxBpD,MAAA,CAAAmB,OAAA,CAAAyD,aAAA,CAACjE,WAAA,CAAAqF,EAAE;IAACH,KAAK,EAAErB,KAAK,CAAC,kBAAkB,CAAE;IAACN,aAAa,EAAEA;EAAc,GAChEd,KACC,CAAC,GAELA,KACD,EACAC,WAAW,iBACVrD,MAAA,CAAAmB,OAAA,CAAAyD,aAAA,CAAA5E,MAAA,CAAAmB,OAAA,CAAAgE,QAAA,QACG,OAAO9B,WAAW,KAAK,QAAQ,gBAC9BrD,MAAA,CAAAmB,OAAA,CAAAyD,aAAA,CAACjE,WAAA,CAAAsF,SAAS;IAACC,MAAM,EAAC,SAAS;IAACL,KAAK,EAAErB,KAAK,CAAC,mBAAmB;EAAE,GAC3DnB,WACQ,CAAC,GAEZA,WAEF,CAEJ,CACH;EAED,MAAM8C,mBAA2C,GAAG;IAClDhF,OAAO,EAAE,IAAAiF,eAAS,EAACC,cAAQ,CAAC7B,KAAK,CAAC,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC;IAC1D8B,OAAO,EAAED,cAAQ,CAAC7B,KAAK,CAAC,kBAAkB,CAAC;EAC7C,CAAC;EAED,MAAM+B,YAAY,GAAGjC,cAAc,GAC/BE,KAAK,CAAC,yBAAyB,CAAC,GAChC,MAAM;;EAEV;EACA,MAAMgC,mBAAmB,GAAGC,mBAAa,aAAbA,mBAAa,gBAAAtC,qBAAA,GAAbsC,mBAAa,CAAEC,WAAW,cAAAvC,qBAAA,uBAA1BA,qBAAA,CAA4BwC,YAAY;EAEpE,MAAMC,eAAe,GAAG,IAAAC,sCAAe,EAAC,MACtC,IAAAC,iCAAU,EAAC1C,SAAS,CAAChB,KAAK,EAAE2D,oBAAc,CAACC,MAAM,CACnD,CAAC;;EAED;EACA,MAAMC,kBAAkB,GAAG,IAAAC,uCAAgB,EAAC,MAAM;IAChD,MAAMC,KAAK,GAAG,IAAAC,kCAAW,EACvBR,eAAe,CAACxD,KAAK,EACrB,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAAC,CAAC,EAAEoD,mBAAmB,CAAC,EACxBa,kCAAW,CAACC,KACd,CAAC;IAED,OAAO;MACLC,SAAS,EAAE,CAAC;QAAEJ;MAAM,CAAC;IACvB,CAAC;EACH,CAAC,CAAC;EAEF,MAAMK,uBAAuB,GAAG,IAAAN,uCAAgB,EAAC,MAAM;IACrD,MAAMO,eAAe,GAAG,IAAAC,uCAAgB,EACtCd,eAAe,CAACxD,KAAK,EACrB,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAAC+C,mBAAmB,CAAChF,OAAO,EAAEgF,mBAAmB,CAACG,OAAO,CAC3D,CAAC;IAED,OAAO;MACLmB;IACF,CAAC;EACH,CAAC,CAAC;EAEF,MAAME,aAAa,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACtC;IACAxD,SAAS,CAAChB,KAAK,GAAG,CAAC;EACrB,CAAC,EAAE,CAACgB,SAAS,CAAC,CAAC;EACf,MAAMyD,cAAc,GAAG,IAAAD,kBAAW,EAAC,MAAM;IACvC;IACAxD,SAAS,CAAChB,KAAK,GAAG,CAAC;EACrB,CAAC,EAAE,CAACgB,SAAS,CAAC,CAAC;EAEf,MAAM0D,aAAa,GAAIC,KAA4B,IAAK;IACtD,IAAI,CAAC9D,OAAO,EAAE;MACZX,OAAO,CAACyE,KAAK,CAAC;IAChB;EACF,CAAC;EAED,MAAMC,YAAsB,GAAG1D,cAAc,GAAG,YAAY,GAAG,MAAM;EAErE,oBACEtE,MAAA,CAAAmB,OAAA,CAAAyD,aAAA,CAACzE,YAAA,CAAA8H,SAAS;IACR3E,OAAO,EAAEwE,aAAc;IACvBI,SAAS,EAAEP,aAAc;IACzBQ,UAAU,EAAEN,cAAe;IAC3BO,UAAU,EAAE,IAAK;IACjBC,kBAAkB,EAAE;MAAEC,IAAI,EAAErE;IAAQ,CAAE;IACtCL,kBAAkB,EAAEA,kBAAmB;IACvCC,iBAAiB,EAAEA,iBAAkB;IACrC0E,iBAAiB,EAAC,QAAQ;IAC1BzE,MAAM,EAAEA;EAAO,gBAEf9D,MAAA,CAAAmB,OAAA,CAAAyD,aAAA,CAACxE,sBAAA,CAAAe,OAAQ,CAAC0D,IAAI;IACZC,KAAK,EAAE,CAAC0D,sBAAgB,CAACC,QAAQ,EAAEjB,uBAAuB;EAAE,gBAE5DxH,MAAA,CAAAmB,OAAA,CAAAyD,aAAA,CAACxE,sBAAA,CAAAe,OAAQ,CAAC0D,IAAI;IACZC,KAAK,EAAE,CAAC0D,sBAAgB,CAACE,aAAa,EAAEzB,kBAAkB;EAAE,GAO3D1D,IAAI,IACHmB,UAAU,eACR1E,MAAA,CAAAmB,OAAA,CAAAyD,aAAA,CAACpE,MAAA,CAAAmF,IAAI;IACHC,IAAI,EAAErC,IAAK;IACXsC,KAAK,EAAErC,SAAU;IACjBgC,IAAI,EAAER,4BAAsB,CAAC/B;EAAS,CACvC,CACH,CAAC,EACFU,cAAc,IACbe,UAAU,eACR1E,MAAA,CAAAmB,OAAA,CAAAyD,aAAA,CAACzE,YAAA,CAAAwI,KAAK;IACJC,gCAAgC;IAChCnG,MAAM,EAAE;MAAEoG,GAAG,EAAElF;IAAe,CAAE;IAChCmB,KAAK,EAAEnC,MAAM,CAACG;EAAgB,CAC/B,CACH,CAAC,EACFY,MAAM,IAAIgB,UAAU,eAAC1E,MAAA,CAAAmB,OAAA,CAAAyD,aAAA,CAACtE,OAAA,CAAAwI,MAAM,EAAA5G,QAAA;IAACsD,IAAI,EAAC;EAAO,GAAK9B,MAAM,CAAG,CAAC,CAAC,eAE1D1D,MAAA,CAAAmB,OAAA,CAAAyD,aAAA,CAACzE,YAAA,CAAA0E,IAAI;IAACC,KAAK,EAAEiE,cAAQ,CAACC;EAAK,GAAE9D,kBAAyB,CAAC,EACtDjB,OAAO,iBAAIjE,MAAA,CAAAmB,OAAA,CAAAyD,aAAA,CAACnE,eAAA,CAAAwI,cAAc;IAACpD,KAAK,EAAEmC;EAAa,CAAE,CAAC,EAClD,CAAC/D,OAAO,IAAI,CAACF,WAAW,iBACvB/D,MAAA,CAAAmB,OAAA,CAAAyD,aAAA,CAACpE,MAAA,CAAAmF,IAAI;IACHC,IAAI,EAAC,sBAAsB;IAC3BC,KAAK,EAAEU,YAAa;IACpBf,IAAI,EAAER,4BAAsB,CAACkE;EAAY,CAC1C,CAEU,CACF,CACN,CAAC;AAEhB,CAAC;AAACC,OAAA,CAAAhG,WAAA,GAAAA,WAAA;AAAA,IAAAiG,QAAA,GAEajG,WAAW;AAAAgG,OAAA,CAAAhI,OAAA,GAAAiI,QAAA"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeReanimated","_core","_hooks","_accessibility","_avatar","_badge","_icons","_loadingSpinner","_spacer","_typography","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ListItemNav","value","description","onPress","icon","iconColor","avatarProps","avatar","paymentLogoUri","accessibilityLabel","accessibilityHint","testID","hideChevron","topElement","loading","numberOfLines","onPressIn","onPressOut","scaleAnimatedStyle","backgroundAnimatedStyle","useListItemAnimation","theme","useIOTheme","dynamicFontScale","spacingScaleMultiplier","hugeFontEnabled","useIOFontDynamicScale","listItemNavContent","createElement","Fragment","badgeProps","View","style","alignSelf","Badge","VSpacer","size","dateValue","flexDirection","Icon","allowFontScaling","name","color","HSpacer","Caption","H6","BodySmall","weight","interactiveColor","handleOnPress","event","Pressable","onTouchEnd","accessible","accessibilityState","busy","accessibilityRole","IOListItemStyles","listItem","listItemInner","columnGap","IOListItemVisualParams","iconMargin","iconSize","Image","accessibilityIgnoresInvertColors","uri","width","IOSelectionListItemVisualParams","height","Avatar","IOStyles","flex","LoadingSpinner","chevronSize","exports","_default"],"sourceRoot":"../../../../src","sources":["components/listitems/ListItemNav.tsx"],"mappings":"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"}

package/lib/commonjs/components/listitems/ListItemNavAlert.js

@@ -4,14 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ListItemNavAlert = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
-var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
 var _core = require("../../core");
+var _hooks = require("../../hooks");
+var _accessibility = require("../../utils/accessibility");
 var _icons = require("../icons");
 var _typography = require("../typography");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ListItemNavAlert = ({
   value,
   description,
@@ -21,15 +22,23 @@ const ListItemNavAlert = ({
   accessibilityHint,
   testID
 }) => {
-  var _IOScaleValues$basicB;
-  const isPressed = (0, _reactNativeReanimated.useSharedValue)(0);
+  const theme = (0, _core.useIOTheme)();
+  const {
+    onPressIn,
+    onPressOut,
+    scaleAnimatedStyle,
+    backgroundAnimatedStyle
+  } = (0, _hooks.useListItemAnimation)();
+  const {
+    dynamicFontScale,
+    spacingScaleMultiplier
+  } = (0, _accessibility.useIOFontDynamicScale)();
   const {
     isExperimental
   } = (0, _core.useIOExperimentalDesign)();
-  const componentValueToAccessibility = (0, _react.useMemo)(() => typeof value === "string" ? value : "", [value]);
-  const componentDescriptionToAccessibility = (0, _react.useMemo)(() => typeof description === "string" ? description : "", [description]);
-  const listItemAccessibilityLabel = (0, _react.useMemo)(() => accessibilityLabel ? accessibilityLabel : `${componentValueToAccessibility}; ${componentDescriptionToAccessibility}`, [componentDescriptionToAccessibility, componentValueToAccessibility, accessibilityLabel]);
-  const theme = (0, _core.useIOTheme)();
+  const componentValueToAccessibility = typeof value === "string" ? value : "";
+  const componentDescriptionToAccessibility = typeof description === "string" ? description : "";
+  const listItemAccessibilityLabel = accessibilityLabel ?? `${componentValueToAccessibility}; ${componentDescriptionToAccessibility}`;
 
   // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
   const listItemNavAlertContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof value === "string" ? /*#__PURE__*/_react.default.createElement(_typography.H6, {
@@ -39,72 +48,37 @@ const ListItemNavAlert = ({
     color: theme.errorText
   }, description) : description));
   const iconColor = isExperimental ? theme["interactiveElem-default"] : "blue";
-  const mapBackgroundStates = {
-    default: (0, _core.hexToRgba)(_core.IOColors[theme["listItem-pressed"]], 0),
-    pressed: _core.IOColors[theme["listItem-pressed"]]
-  };
-
-  // Scaling transformation applied when the button is pressed
-  const animationScaleValue = _core.IOScaleValues === null || _core.IOScaleValues === void 0 || (_IOScaleValues$basicB = _core.IOScaleValues.basicButton) === null || _IOScaleValues$basicB === void 0 ? void 0 : _IOScaleValues$basicB.pressedState;
-  const progressPressed = (0, _reactNativeReanimated.useDerivedValue)(() => (0, _reactNativeReanimated.withSpring)(isPressed.value, _core.IOSpringValues.button));
-
-  // Interpolate animation values from `isPressed` values
-  const animatedScaleStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    const scale = (0, _reactNativeReanimated.interpolate)(progressPressed.value, [0, 1], [1, animationScaleValue], _reactNativeReanimated.Extrapolate.CLAMP);
-    return {
-      transform: [{
-        scale
-      }]
-    };
-  });
-  const animatedBackgroundStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    const backgroundColor = (0, _reactNativeReanimated.interpolateColor)(progressPressed.value, [0, 1], [mapBackgroundStates.default, mapBackgroundStates.pressed]);
-    return {
-      backgroundColor
-    };
-  });
-  const handlePressIn = (0, _react.useCallback)(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 1;
-  }, [isPressed]);
-  const handlePressOut = (0, _react.useCallback)(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 0;
-  }, [isPressed]);
   return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
     onPress: onPress,
-    onPressIn: handlePressIn,
-    onPressOut: handlePressOut,
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
+    onTouchEnd: onPressOut,
     accessible: true,
     accessibilityLabel: listItemAccessibilityLabel,
     accessibilityHint: accessibilityHint,
     accessibilityRole: "button",
     testID: testID
   }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
-    style: [_core.IOListItemStyles.listItem, animatedBackgroundStyle],
+    style: [_core.IOListItemStyles.listItem, backgroundAnimatedStyle],
     importantForAccessibility: "no-hide-descendants",
     accessibilityElementsHidden: true
   }, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
-    style: [_core.IOListItemStyles.listItemInner, animatedScaleStyle]
-  }, !withoutIcon && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      marginRight: _core.IOListItemVisualParams.iconMargin
-    }
-  }, /*#__PURE__*/_react.default.createElement(_icons.Icon, {
+    style: [_core.IOListItemStyles.listItemInner, {
+      columnGap: _core.IOListItemVisualParams.iconMargin * dynamicFontScale * spacingScaleMultiplier
+    }, scaleAnimatedStyle]
+  }, !withoutIcon && /*#__PURE__*/_react.default.createElement(_icons.Icon, {
+    allowFontScaling: true,
     name: "errorFilled",
     color: theme.errorIcon,
     size: _core.IOListItemVisualParams.iconSize
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: _core.IOStyles.flex
-  }, listItemNavAlertContent), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: {
-      marginLeft: _core.IOListItemVisualParams.iconMargin
-    }
-  }, /*#__PURE__*/_react.default.createElement(_icons.Icon, {
+  }, listItemNavAlertContent), /*#__PURE__*/_react.default.createElement(_icons.Icon, {
+    allowFontScaling: true,
     name: "chevronRightListItem",
     color: iconColor,
     size: _core.IOListItemVisualParams.chevronSize
-  })))));
+  }))));
 };
 exports.ListItemNavAlert = ListItemNavAlert;
 var _default = ListItemNavAlert;

package/lib/commonjs/components/listitems/ListItemNavAlert.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_core","_icons","_typography","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ListItemNavAlert","value","description","withoutIcon","onPress","accessibilityLabel","accessibilityHint","testID","_IOScaleValues$basicB","isPressed","useSharedValue","isExperimental","useIOExperimentalDesign","componentValueToAccessibility","useMemo","componentDescriptionToAccessibility","listItemAccessibilityLabel","theme","useIOTheme","listItemNavAlertContent","createElement","Fragment","H6","color","BodySmall","weight","errorText","iconColor","mapBackgroundStates","hexToRgba","IOColors","pressed","animationScaleValue","IOScaleValues","basicButton","pressedState","progressPressed","useDerivedValue","withSpring","IOSpringValues","button","animatedScaleStyle","useAnimatedStyle","scale","interpolate","Extrapolate","CLAMP","transform","animatedBackgroundStyle","backgroundColor","interpolateColor","handlePressIn","useCallback","handlePressOut","Pressable","onPressIn","onPressOut","accessible","accessibilityRole","View","style","IOListItemStyles","listItem","importantForAccessibility","accessibilityElementsHidden","listItemInner","marginRight","IOListItemVisualParams","iconMargin","Icon","name","errorIcon","size","iconSize","IOStyles","flex","marginLeft","chevronSize","exports","_default"],"sourceRoot":"../../../../src","sources":["components/listitems/ListItemNavAlert.tsx"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_reactNativeReanimated","_core","_hooks","_accessibility","_icons","_typography","obj","__esModule","default","ListItemNavAlert","value","description","withoutIcon","onPress","accessibilityLabel","accessibilityHint","testID","theme","useIOTheme","onPressIn","onPressOut","scaleAnimatedStyle","backgroundAnimatedStyle","useListItemAnimation","dynamicFontScale","spacingScaleMultiplier","useIOFontDynamicScale","isExperimental","useIOExperimentalDesign","componentValueToAccessibility","componentDescriptionToAccessibility","listItemAccessibilityLabel","listItemNavAlertContent","createElement","Fragment","H6","color","BodySmall","weight","errorText","iconColor","Pressable","onTouchEnd","accessible","accessibilityRole","View","style","IOListItemStyles","listItem","importantForAccessibility","accessibilityElementsHidden","listItemInner","columnGap","IOListItemVisualParams","iconMargin","Icon","allowFontScaling","name","errorIcon","size","iconSize","IOStyles","flex","chevronSize","exports","_default"],"sourceRoot":"../../../../src","sources":["components/listitems/ListItemNavAlert.tsx"],"mappings":"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"}

package/lib/commonjs/components/listitems/ListItemRadio.js

@@ -7,13 +7,16 @@ exports.ListItemRadio = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeHapticFeedback = _interopRequireDefault(require("react-native-haptic-feedback"));
-var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
 var _rnPlaceholder = _interopRequireDefault(require("rn-placeholder"));
 var _core = require("../../core");
+var _hooks = require("../../hooks");
+var _accessibility = require("../../utils/accessibility");
 var _icons = require("../icons");
 var _logos = require("../logos");
 var _AnimatedRadio = require("../radio/AnimatedRadio");
 var _spacer = require("../spacer");
+var _stack = require("../stack");
 var _typography = require("../typography");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -46,44 +49,19 @@ const ListItemRadio = ({
   loadingProps,
   testID
 }) => {
-  var _IOScaleValues$basicB;
   const [toggleValue, setToggleValue] = (0, React.useState)(selected ?? false);
-  // Animations
-  const isPressed = (0, _reactNativeReanimated.useSharedValue)(0);
-  // Scaling transformation applied when the button is pressed
-  const animationScaleValue = _core.IOScaleValues === null || _core.IOScaleValues === void 0 || (_IOScaleValues$basicB = _core.IOScaleValues.basicButton) === null || _IOScaleValues$basicB === void 0 ? void 0 : _IOScaleValues$basicB.pressedState;
-  const progressPressed = (0, _reactNativeReanimated.useDerivedValue)(() => (0, _reactNativeReanimated.withSpring)(isPressed.value, _core.IOSpringValues.button));
-
-  // Theme
+  const {
+    dynamicFontScale,
+    spacingScaleMultiplier,
+    hugeFontEnabled
+  } = (0, _accessibility.useIOFontDynamicScale)();
+  const {
+    onPressIn,
+    onPressOut,
+    scaleAnimatedStyle,
+    backgroundAnimatedStyle
+  } = (0, _hooks.useListItemAnimation)();
   const theme = (0, _core.useIOTheme)();
-  const mapBackgroundStates = {
-    default: (0, _core.hexToRgba)(_core.IOColors[theme["listItem-pressed"]], 0),
-    pressed: _core.IOColors[theme["listItem-pressed"]]
-  };
-
-  // Interpolate animation values from `isPressed` values
-  const animatedScaleStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    const scale = (0, _reactNativeReanimated.interpolate)(progressPressed.value, [0, 1], [1, animationScaleValue], _reactNativeReanimated.Extrapolate.CLAMP);
-    return {
-      transform: [{
-        scale
-      }]
-    };
-  });
-  const handlePressIn = (0, React.useCallback)(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 1;
-  }, [isPressed]);
-  const handlePressOut = (0, React.useCallback)(() => {
-    // eslint-disable-next-line functional/immutable-data
-    isPressed.value = 0;
-  }, [isPressed]);
-  const animatedBackgroundStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    const backgroundColor = (0, _reactNativeReanimated.interpolateColor)(progressPressed.value, [0, 1], [mapBackgroundStates.default, mapBackgroundStates.pressed]);
-    return {
-      backgroundColor
-    };
-  });
   const toggleRadioItem = () => {
     _reactNativeHapticFeedback.default.trigger("impactLight");
     setToggleValue(!toggleValue);
@@ -94,22 +72,18 @@ const ListItemRadio = ({
   const disabledStyle = {
     opacity: disabled ? DISABLED_OPACITY : 1
   };
-  const SkeletonDescriptionLines = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_spacer.VSpacer, {
-    size: 8
-  }), /*#__PURE__*/React.createElement(_rnPlaceholder.default.Box, {
+  const SkeletonDescriptionLines = () => /*#__PURE__*/React.createElement(_stack.VStack, {
+    space: 8
+  }, /*#__PURE__*/React.createElement(_rnPlaceholder.default.Box, {
     animate: "fade",
     radius: 8,
     width: "100%",
     height: 8
-  }), /*#__PURE__*/React.createElement(_spacer.VSpacer, {
-    size: 8
   }), /*#__PURE__*/React.createElement(_rnPlaceholder.default.Box, {
     animate: "fade",
     radius: 8,
     width: "100%",
     height: 8
-  }), /*#__PURE__*/React.createElement(_spacer.VSpacer, {
-    size: 8
   }), /*#__PURE__*/React.createElement(_rnPlaceholder.default.Box, {
     animate: "fade",
     radius: 8,
@@ -127,7 +101,9 @@ const ListItemRadio = ({
     height: _core.IOSelectionListItemVisualParams.iconSize
   }));
   const SkeletonComponent = () => /*#__PURE__*/React.createElement(_reactNative.View, {
-    style: _core.IOSelectionListItemStyles.listItem
+    style: [_core.IOSelectionListItemStyles.listItem, {
+      rowGap: 8
+    }]
   }, /*#__PURE__*/React.createElement(_reactNative.View, {
     style: _core.IOSelectionListItemStyles.listItemInner
   }, /*#__PURE__*/React.createElement(_reactNative.View, {
@@ -145,6 +121,7 @@ const ListItemRadio = ({
     pointerEvents: "none",
     style: disabledStyle
   }, /*#__PURE__*/React.createElement(_AnimatedRadio.AnimatedRadio, {
+    size: _core.IOSelectionTickVisualParams.size * dynamicFontScale,
     checked: toggleValue
   })))), (loadingProps === null || loadingProps === void 0 ? void 0 : loadingProps.skeletonDescription) && /*#__PURE__*/React.createElement(SkeletonDescriptionLines, null));
   return loadingProps !== null && loadingProps !== void 0 && loadingProps.state ? /*#__PURE__*/React.createElement(SkeletonComponent, null) : /*#__PURE__*/React.createElement(_reactNative.Pressable, {
@@ -156,38 +133,45 @@ const ListItemRadio = ({
     accessibilityLabel: accessibilityLabel,
     accessibilityHint: accessibilityHint,
     onPress: toggleRadioItem,
-    onPressIn: handlePressIn,
-    onPressOut: handlePressOut,
-    onTouchEnd: handlePressOut,
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
+    onTouchEnd: onPressOut,
     testID: testID,
     disabled: disabled
   }, /*#__PURE__*/React.createElement(_reactNativeReanimated.default.View, {
-    style: [_core.IOSelectionListItemStyles.listItem, animatedBackgroundStyle, disabledStyle]
+    style: [_core.IOSelectionListItemStyles.listItem, backgroundAnimatedStyle, disabledStyle]
     // This is required to avoid opacity
     // inheritance on Android
     ,
     needsOffscreenAlphaCompositing: true
   }, /*#__PURE__*/React.createElement(_reactNativeReanimated.default.View, {
-    style: animatedScaleStyle
+    style: scaleAnimatedStyle
   }, /*#__PURE__*/React.createElement(_reactNative.View, {
     style: _core.IOSelectionListItemStyles.listItemInner
   }, /*#__PURE__*/React.createElement(_reactNative.View, {
-    style: [_core.IOStyles.row, {
-      flexShrink: 1
-    }]
-  }, startImage && /*#__PURE__*/React.createElement(_reactNative.View, {
     style: {
-      marginRight: _core.IOSelectionListItemVisualParams.iconMargin
+      flexDirection: "row",
+      flexShrink: 1,
+      columnGap: _core.IOSelectionListItemVisualParams.iconMargin * dynamicFontScale * spacingScaleMultiplier
     }
-  }, startImage.icon && /*#__PURE__*/React.createElement(_icons.Icon, {
+  }, (startImage === null || startImage === void 0 ? void 0 : startImage.icon) && !hugeFontEnabled && /*#__PURE__*/React.createElement(_icons.Icon, {
+    allowFontScaling: true,
     name: startImage.icon,
     color: "grey-300",
     size: _core.IOSelectionListItemVisualParams.iconSize
-  }), startImage.uri && /*#__PURE__*/React.createElement(_reactNative.Image, {
+  }), (startImage === null || startImage === void 0 ? void 0 : startImage.uri) && /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: {
+      alignSelf: "center"
+    }
+  }, /*#__PURE__*/React.createElement(_reactNative.Image, {
     accessibilityIgnoresInvertColors: true,
     source: startImage,
     style: styles.imageSize
-  }), startImage.paymentLogo && /*#__PURE__*/React.createElement(_logos.LogoPayment, {
+  })), (startImage === null || startImage === void 0 ? void 0 : startImage.paymentLogo) && /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: {
+      alignSelf: "center"
+    }
+  }, /*#__PURE__*/React.createElement(_logos.LogoPayment, {
     name: startImage.paymentLogo,
     size: _core.IOSelectionListItemVisualParams.iconSize
   })), /*#__PURE__*/React.createElement(_typography.H6, {
@@ -202,6 +186,7 @@ const ListItemRadio = ({
     accessibilityElementsHidden: true,
     importantForAccessibility: "no-hide-descendants"
   }, /*#__PURE__*/React.createElement(_AnimatedRadio.AnimatedRadio, {
+    size: _core.IOSelectionTickVisualParams.size * dynamicFontScale,
     checked: selected ?? toggleValue
   }))), description && /*#__PURE__*/React.createElement(_reactNative.View, null, /*#__PURE__*/React.createElement(_spacer.VSpacer, {
     size: _core.IOSelectionListItemVisualParams.descriptionMargin