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

package/lib/module/components/buttons/__test__/__snapshots__/button.test.tsx.snap

@@ -63,6 +63,9 @@ exports[`Test Buttons Components - Experimental Enabled ButtonLink Snapshot 1`]
           "columnGap": 8,
         },
         {},
+        {
+          "columnGap": 8,
+        },
         {
           "transform": [
             {
@@ -79,7 +82,7 @@ exports[`Test Buttons Components - Experimental Enabled ButtonLink Snapshot 1`]
       allowFontScaling={true}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
-      maxFontSizeMultiplier={1.25}
+      maxFontSizeMultiplier={1.5}
       numberOfLines={1}
       style={
         [
@@ -163,6 +166,9 @@ exports[`Test Buttons Components - Experimental Enabled ButtonOutline Snapshot 1
         {
           "height": 48,
         },
+        {
+          "columnGap": 8,
+        },
         false,
         {
           "backgroundColor": "rgba(231,236,252,0)",
@@ -188,7 +194,7 @@ exports[`Test Buttons Components - Experimental Enabled ButtonOutline Snapshot 1
       allowFontScaling={true}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
-      maxFontSizeMultiplier={1.25}
+      maxFontSizeMultiplier={1.5}
       numberOfLines={1}
       style={
         [
@@ -302,6 +308,9 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`]
             "flexDirection": "row",
             "justifyContent": "center",
           },
+          {
+            "columnGap": 8,
+          },
           false,
         ]
       }
@@ -312,7 +321,7 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`]
         allowFontScaling={true}
         ellipsizeMode="tail"
         importantForAccessibility="no-hide-descendants"
-        maxFontSizeMultiplier={1.25}
+        maxFontSizeMultiplier={1.5}
         numberOfLines={1}
         style={
           [
@@ -794,6 +803,9 @@ exports[`Test Buttons Components ButtonLink Snapshot 1`] = `
           "columnGap": 8,
         },
         {},
+        {
+          "columnGap": 8,
+        },
         {
           "transform": [
             {
@@ -807,10 +819,10 @@ exports[`Test Buttons Components ButtonLink Snapshot 1`] = `
     <Text
       accessibilityElementsHidden={true}
       accessible={false}
-      allowFontScaling={false}
+      allowFontScaling={true}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
-      maxFontSizeMultiplier={1.25}
+      maxFontSizeMultiplier={1.5}
       numberOfLines={1}
       style={
         [
@@ -893,6 +905,9 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
         {
           "height": 40,
         },
+        {
+          "columnGap": 8,
+        },
         false,
         {
           "backgroundColor": "rgba(0,115,230,0)",
@@ -915,10 +930,10 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
     <Text
       accessibilityElementsHidden={true}
       accessible={false}
-      allowFontScaling={false}
+      allowFontScaling={true}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
-      maxFontSizeMultiplier={1.25}
+      maxFontSizeMultiplier={1.5}
       numberOfLines={1}
       style={
         [
@@ -1031,6 +1046,9 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
             "flexDirection": "row",
             "justifyContent": "center",
           },
+          {
+            "columnGap": 8,
+          },
           false,
         ]
       }
@@ -1038,10 +1056,10 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
       <Text
         accessibilityElementsHidden={true}
         accessible={false}
-        allowFontScaling={false}
+        allowFontScaling={true}
         ellipsizeMode="tail"
         importantForAccessibility="no-hide-descendants"
-        maxFontSizeMultiplier={1.25}
+        maxFontSizeMultiplier={1.5}
         numberOfLines={1}
         style={
           [

package/lib/module/components/checkbox/AnimatedCheckbox.js

@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 import { Pressable, StyleSheet, View } from "react-native";
 import Animated, { Easing, interpolate, useAnimatedStyle, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 import { useIOExperimentalDesign } from "../../core";
 import { IOSpringValues } from "../../core/IOAnimations";
 import { IOColors } from "../../core/IOColors";
@@ -8,28 +9,18 @@ import { IOSelectionTickLegacyVisualParams, IOSelectionTickVisualParams } from "
 import { AnimatedTick } from "../common/AnimatedTick";
 const checkBoxRadius = 5;
 const styles = StyleSheet.create({
-  checkBoxWrapper: {
-    width: IOSelectionTickVisualParams.size,
-    height: IOSelectionTickVisualParams.size
-  },
   checkboxBorder: {
+    borderWidth: IOSelectionTickVisualParams.borderWidth,
+    borderCurve: "continuous",
     position: "absolute",
     left: 0,
-    top: 0,
-    width: IOSelectionTickVisualParams.size,
-    height: IOSelectionTickVisualParams.size,
-    borderWidth: IOSelectionTickVisualParams.borderWidth,
-    borderRadius: checkBoxRadius,
-    borderCurve: "continuous"
+    top: 0
   },
   checkBoxSquare: {
+    borderCurve: "continuous",
     position: "absolute",
     left: 0,
-    top: 0,
-    width: IOSelectionTickVisualParams.size,
-    height: IOSelectionTickVisualParams.size,
-    borderRadius: checkBoxRadius,
-    borderCurve: "continuous"
+    top: 0
   }
 });
 
@@ -38,10 +29,14 @@ const styles = StyleSheet.create({
  * standard {@link CheckBox} or other composite components.
  */
 export const AnimatedCheckbox = ({
+  size,
   checked,
   onPress,
   disabled
 }) => {
+  const {
+    dynamicFontScale
+  } = useIOFontDynamicScale();
   const isChecked = checked ?? false;
   const {
     isExperimental
@@ -56,6 +51,15 @@ export const AnimatedCheckbox = ({
   const backgroundColorProp = isExperimental ? backgroundColorOnState : legacyBackgroundColorOnState;
   const squareAnimationProgress = useSharedValue(checked ? 1 : 0);
   const tickAnimationProgress = useSharedValue(checked ? 1 : 0);
+  const checkboxSizeStyle = {
+    width: size,
+    height: size,
+    borderRadius: checkBoxRadius * dynamicFontScale
+  };
+  const checkboxWrapperSizeStyle = {
+    width: size,
+    height: size
+  };
   useEffect(() => {
     // eslint-disable-next-line functional/immutable-data
     squareAnimationProgress.value = withSpring(checked ? 1 : 0, IOSpringValues.selection);
@@ -79,14 +83,14 @@ export const AnimatedCheckbox = ({
     accessible: false,
     disabled: disabled,
     onPress: onPress,
-    style: styles.checkBoxWrapper,
+    style: checkboxWrapperSizeStyle,
     testID: "AnimatedCheckboxInput"
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles.checkboxBorder, {
+    style: [styles.checkboxBorder, checkboxSizeStyle, {
       borderColor: borderColorProp
     }]
   }), /*#__PURE__*/React.createElement(Animated.View, {
-    style: [styles.checkBoxSquare, {
+    style: [styles.checkBoxSquare, checkboxSizeStyle, {
       backgroundColor: backgroundColorProp
     }, animatedCheckboxSquare]
   }), isChecked && /*#__PURE__*/React.createElement(View, {
@@ -94,6 +98,7 @@ export const AnimatedCheckbox = ({
       zIndex: 1
     }
   }, /*#__PURE__*/React.createElement(AnimatedTick, {
+    size: size,
     progress: tickAnimationProgress,
     stroke: IOColors[IOSelectionTickVisualParams.tickColor]
   })));

package/lib/module/components/checkbox/AnimatedCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","Pressable","StyleSheet","View","Animated","Easing","interpolate","useAnimatedStyle","useSharedValue","withSpring","withTiming","useIOExperimentalDesign","IOSpringValues","IOColors","IOSelectionTickLegacyVisualParams","IOSelectionTickVisualParams","AnimatedTick","checkBoxRadius","styles","create","checkBoxWrapper","width","size","height","checkboxBorder","position","left","top","borderWidth","borderRadius","borderCurve","checkBoxSquare","AnimatedCheckbox","checked","onPress","disabled","isChecked","isExperimental","borderColorOffState","legacyBorderColorOffState","borderColorProp","backgroundColorOnState","bgColorOnState","legacyBackgroundColorOnState","backgroundColorProp","squareAnimationProgress","tickAnimationProgress","value","selection","duration","easing","elastic","animatedCheckboxSquare","scale","opacity","transform","createElement","accessible","style","testID","borderColor","backgroundColor","zIndex","progress","stroke","tickColor"],"sourceRoot":"../../../../src","sources":["components/checkbox/AnimatedCheckbox.tsx"],"mappings":"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"}
+{"version":3,"names":["React","useEffect","Pressable","StyleSheet","View","Animated","Easing","interpolate","useAnimatedStyle","useSharedValue","withSpring","withTiming","useIOFontDynamicScale","useIOExperimentalDesign","IOSpringValues","IOColors","IOSelectionTickLegacyVisualParams","IOSelectionTickVisualParams","AnimatedTick","checkBoxRadius","styles","create","checkboxBorder","borderWidth","borderCurve","position","left","top","checkBoxSquare","AnimatedCheckbox","size","checked","onPress","disabled","dynamicFontScale","isChecked","isExperimental","borderColorOffState","legacyBorderColorOffState","borderColorProp","backgroundColorOnState","bgColorOnState","legacyBackgroundColorOnState","backgroundColorProp","squareAnimationProgress","tickAnimationProgress","checkboxSizeStyle","width","height","borderRadius","checkboxWrapperSizeStyle","value","selection","duration","easing","elastic","animatedCheckboxSquare","scale","opacity","transform","createElement","accessible","style","testID","borderColor","backgroundColor","zIndex","progress","stroke","tickColor"],"sourceRoot":"../../../../src","sources":["components/checkbox/AnimatedCheckbox.tsx"],"mappings":"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"}

package/lib/module/components/checkbox/CheckboxLabel.js

@@ -1,13 +1,14 @@
 import * as React from "react";
 import { useState } from "react";
 import { Pressable, View } from "react-native";
-import { useIOTheme } from "../../core";
-import { IOStyles } from "../../core/IOStyles";
+import { IOSelectionTickVisualParams, useIOTheme } from "../../core";
 import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback";
-import { HSpacer } from "../spacer/Spacer";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
+import { HStack } from "../stack";
 import { H6 } from "../typography/H6";
 import { AnimatedCheckbox } from "./AnimatedCheckbox";
 const DISABLED_OPACITY = 0.5;
+const CHECKBOX_MARGIN = 8;
 
 // disabled: the component is no longer touchable
 // onPress:
@@ -25,6 +26,9 @@ export const CheckboxLabel = ({
   onValueChange
 }) => {
   const theme = useIOTheme();
+  const {
+    dynamicFontScale
+  } = useIOFontDynamicScale();
   const [toggleValue, setToggleValue] = useState(checked ?? false);
   const toggleCheckbox = () => {
     triggerHaptic("impactLight");
@@ -50,11 +54,13 @@ export const CheckboxLabel = ({
     // inheritance on Android
     ,
     needsOffscreenAlphaCompositing: true
-  }, /*#__PURE__*/React.createElement(View, {
-    style: [IOStyles.row, {
+  }, /*#__PURE__*/React.createElement(HStack, {
+    allowScaleSpacing: true,
+    style: {
       alignItems: "center",
       width: "100%"
-    }]
+    },
+    space: CHECKBOX_MARGIN
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none",
     accessibilityElementsHidden: true,
@@ -63,10 +69,9 @@ export const CheckboxLabel = ({
       alignSelf: "flex-start"
     }
   }, /*#__PURE__*/React.createElement(AnimatedCheckbox, {
+    size: IOSelectionTickVisualParams.size * dynamicFontScale,
     checked: checked ?? toggleValue
-  })), /*#__PURE__*/React.createElement(HSpacer, {
-    size: 8
-  }), /*#__PURE__*/React.createElement(H6, {
+  })), /*#__PURE__*/React.createElement(H6, {
     style: {
       flexShrink: 1
     },

package/lib/module/components/checkbox/CheckboxLabel.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","Pressable","View","useIOTheme","IOStyles","triggerHaptic","HSpacer","H6","AnimatedCheckbox","DISABLED_OPACITY","CheckboxLabel","label","checked","disabled","onValueChange","theme","toggleValue","setToggleValue","toggleCheckbox","undefined","createElement","onPress","testID","style","alignSelf","opacity","accessibilityRole","accessibilityState","needsOffscreenAlphaCompositing","row","alignItems","width","pointerEvents","accessibilityElementsHidden","importantForAccessibility","size","flexShrink","color"],"sourceRoot":"../../../../src","sources":["components/checkbox/CheckboxLabel.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,OAAO;AAChC,SAASC,SAAS,EAAEC,IAAI,QAAQ,cAAc;AAC9C,SAASC,UAAU,QAAQ,YAAY;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,aAAa,QAAQ,gDAAgD;AAC9E,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,EAAE,QAAQ,kBAAkB;AACrC,SAASC,gBAAgB,QAAQ,oBAAoB;AAQrD,MAAMC,gBAAgB,GAAG,GAAG;;AAE5B;AACA;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC;AACQ,CAAC,KAAK;EACd,MAAMC,KAAK,GAAGZ,UAAU,CAAC,CAAC;EAE1B,MAAM,CAACa,WAAW,EAAEC,cAAc,CAAC,GAAGjB,QAAQ,CAACY,OAAO,IAAI,KAAK,CAAC;EAEhE,MAAMM,cAAc,GAAGA,CAAA,KAAM;IAC3Bb,aAAa,CAAC,aAAa,CAAC;IAC5BY,cAAc,CAAC,CAACD,WAAW,CAAC;IAC5B,IAAIF,aAAa,KAAKK,SAAS,EAAE;MAC/BL,aAAa,CAAC,CAACE,WAAW,CAAC;IAC7B;EACF,CAAC;EAED,oBACEjB,KAAA,CAAAqB,aAAA,CAACnB,SAAS;IACRY,QAAQ,EAAEA,QAAS;IACnBQ,OAAO,EAAEH,cAAe;IACxBI,MAAM,EAAC,kBAAkB;IACzBC,KAAK,EAAE;MACLC,SAAS,EAAE,YAAY;MACvBC,OAAO,EAAEZ,QAAQ,GAAGJ,gBAAgB,GAAG;IACzC,CAAE;IACFiB,iBAAiB,EAAC,UAAU;IAC5BC,kBAAkB,EAAE;MAClBf,OAAO,EAAEA,OAAO,IAAII,WAAW;MAC/BH,QAAQ,EAAE,CAAC,CAACA;IACd;IACA;IACA;IAAA;IACAe,8BAA8B,EAAE;EAAK,gBAErC7B,KAAA,CAAAqB,aAAA,CAAClB,IAAI;IAACqB,KAAK,EAAE,CAACnB,QAAQ,CAACyB,GAAG,EAAE;MAAEC,UAAU,EAAE,QAAQ;MAAEC,KAAK,EAAE;IAAO,CAAC;EAAE,gBACnEhC,KAAA,CAAAqB,aAAA,CAAClB,IAAI;IACH8B,aAAa,EAAC,MAAM;IACpBC,2BAA2B;IAC3BC,yBAAyB,EAAC,qBAAqB;IAC/CX,KAAK,EAAE;MACLC,SAAS,EAAE;IACb;EAAE,gBAEFzB,KAAA,CAAAqB,aAAA,CAACZ,gBAAgB;IAACI,OAAO,EAAEA,OAAO,IAAII;EAAY,CAAE,CAChD,CAAC,eACPjB,KAAA,CAAAqB,aAAA,CAACd,OAAO;IAAC6B,IAAI,EAAE;EAAE,CAAE,CAAC,eACpBpC,KAAA,CAAAqB,aAAA,CAACb,EAAE;IAACgB,KAAK,EAAE;MAAEa,UAAU,EAAE;IAAE,CAAE;IAACC,KAAK,EAAEtB,KAAK,CAAC,kBAAkB;EAAE,GAC5DJ,KACC,CACA,CACG,CAAC;AAEhB,CAAC"}
+{"version":3,"names":["React","useState","Pressable","View","IOSelectionTickVisualParams","useIOTheme","triggerHaptic","useIOFontDynamicScale","HStack","H6","AnimatedCheckbox","DISABLED_OPACITY","CHECKBOX_MARGIN","CheckboxLabel","label","checked","disabled","onValueChange","theme","dynamicFontScale","toggleValue","setToggleValue","toggleCheckbox","undefined","createElement","onPress","testID","style","alignSelf","opacity","accessibilityRole","accessibilityState","needsOffscreenAlphaCompositing","allowScaleSpacing","alignItems","width","space","pointerEvents","accessibilityElementsHidden","importantForAccessibility","size","flexShrink","color"],"sourceRoot":"../../../../src","sources":["components/checkbox/CheckboxLabel.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAyBC,QAAQ,QAAQ,OAAO;AAChD,SAASC,SAAS,EAAEC,IAAI,QAAQ,cAAc;AAC9C,SACEC,2BAA2B,EAE3BC,UAAU,QACL,YAAY;AACnB,SAASC,aAAa,QAAQ,gDAAgD;AAC9E,SAASC,qBAAqB,QAAQ,2BAA2B;AACjE,SAASC,MAAM,QAAQ,UAAU;AACjC,SAASC,EAAE,QAAQ,kBAAkB;AACrC,SAASC,gBAAgB,QAAQ,oBAAoB;AAQrD,MAAMC,gBAAgB,GAAG,GAAG;AAC5B,MAAMC,eAA+B,GAAG,CAAC;;AAEzC;AACA;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC;AACQ,CAAC,KAAK;EACd,MAAMC,KAAK,GAAGb,UAAU,CAAC,CAAC;EAC1B,MAAM;IAAEc;EAAiB,CAAC,GAAGZ,qBAAqB,CAAC,CAAC;EAEpD,MAAM,CAACa,WAAW,EAAEC,cAAc,CAAC,GAAGpB,QAAQ,CAACc,OAAO,IAAI,KAAK,CAAC;EAEhE,MAAMO,cAAc,GAAGA,CAAA,KAAM;IAC3BhB,aAAa,CAAC,aAAa,CAAC;IAC5Be,cAAc,CAAC,CAACD,WAAW,CAAC;IAC5B,IAAIH,aAAa,KAAKM,SAAS,EAAE;MAC/BN,aAAa,CAAC,CAACG,WAAW,CAAC;IAC7B;EACF,CAAC;EAED,oBACEpB,KAAA,CAAAwB,aAAA,CAACtB,SAAS;IACRc,QAAQ,EAAEA,QAAS;IACnBS,OAAO,EAAEH,cAAe;IACxBI,MAAM,EAAC,kBAAkB;IACzBC,KAAK,EAAE;MACLC,SAAS,EAAE,YAAY;MACvBC,OAAO,EAAEb,QAAQ,GAAGL,gBAAgB,GAAG;IACzC,CAAE;IACFmB,iBAAiB,EAAC,UAAU;IAC5BC,kBAAkB,EAAE;MAClBhB,OAAO,EAAEA,OAAO,IAAIK,WAAW;MAC/BJ,QAAQ,EAAE,CAAC,CAACA;IACd;IACA;IACA;IAAA;IACAgB,8BAA8B,EAAE;EAAK,gBAErChC,KAAA,CAAAwB,aAAA,CAAChB,MAAM;IACLyB,iBAAiB;IACjBN,KAAK,EAAE;MAAEO,UAAU,EAAE,QAAQ;MAAEC,KAAK,EAAE;IAAO,CAAE;IAC/CC,KAAK,EAAExB;EAAgB,gBAEvBZ,KAAA,CAAAwB,aAAA,CAACrB,IAAI;IACHkC,aAAa,EAAC,MAAM;IACpBC,2BAA2B;IAC3BC,yBAAyB,EAAC,qBAAqB;IAC/CZ,KAAK,EAAE;MACLC,SAAS,EAAE;IACb;EAAE,gBAEF5B,KAAA,CAAAwB,aAAA,CAACd,gBAAgB;IACf8B,IAAI,EAAEpC,2BAA2B,CAACoC,IAAI,GAAGrB,gBAAiB;IAC1DJ,OAAO,EAAEA,OAAO,IAAIK;EAAY,CACjC,CACG,CAAC,eACPpB,KAAA,CAAAwB,aAAA,CAACf,EAAE;IAACkB,KAAK,EAAE;MAAEc,UAAU,EAAE;IAAE,CAAE;IAACC,KAAK,EAAExB,KAAK,CAAC,kBAAkB;EAAE,GAC5DJ,KACC,CACE,CACC,CAAC;AAEhB,CAAC"}

package/lib/module/components/common/AnimatedTick.js

@@ -12,6 +12,7 @@ const TickSVGPath = "m7 12 4 4 7-7";
  *
  */
 export const AnimatedTick = ({
+  size,
   progress,
   ...pathProps
 }) => {
@@ -29,9 +30,12 @@ export const AnimatedTick = ({
     const currentRef = ref.current;
     setLength(currentRef.getTotalLength());
   };
-  return /*#__PURE__*/React.createElement(Svg, {
-    viewBox: "0 0 24 24"
-  }, /*#__PURE__*/React.createElement(AnimatedPath, _extends({
+  return /*#__PURE__*/React.createElement(Svg, _extends({
+    viewBox: `0 0 24 24`
+  }, size ? {
+    width: size,
+    height: size
+  } : {}), /*#__PURE__*/React.createElement(AnimatedPath, _extends({
     ref: ref,
     onLayout: onLayout,
     d: TickSVGPath,

package/lib/module/components/common/AnimatedTick.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","Animated","useAnimatedProps","useAnimatedRef","Svg","Path","AnimatedPath","createAnimatedComponent","TickSVGPath","AnimatedTick","progress","pathProps","length","setLength","ref","animatedProps","strokeDashoffset","Math","max","value","onLayout","currentRef","current","getTotalLength","createElement","viewBox","_extends","d","strokeDasharray","strokeWidth","strokeLinecap","strokeLinejoin","fill"],"sourceRoot":"../../../../src","sources":["components/common/AnimatedTick.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,OAAOC,QAAQ,IACbC,gBAAgB,EAChBC,cAAc,QACT,yBAAyB;AAChC,OAAOC,GAAG,IAAIC,IAAI,QAAmB,kBAAkB;AAEvD,MAAMC,YAAY,GAAGL,QAAQ,CAACM,uBAAuB,CAACF,IAAI,CAAC;AAO3D;AACA,MAAMG,WAAW,GAAG,eAAe;;AAEnC;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,YAAY,GAAGA,CAAC;EAAEC,QAAQ;EAAE,GAAGC;AAA6B,CAAC,KAAK;EAC7E,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGb,QAAQ,CAAC,CAAC,CAAC;EACvC,MAAMc,GAAG,GAAGX,cAAc,CAAC,CAAC;;EAE5B;EACA;EACA,MAAMY,aAAa,GAAGb,gBAAgB,CAAC,OAAO;IAC5Cc,gBAAgB,EAAEC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEN,MAAM,GAAGA,MAAM,GAAGF,QAAQ,CAACS,KAAK,GAAG,GAAG;EACtE,CAAC,CAAC,CAAC;EAEH,MAAMC,QAAQ,GAAGA,CAAA,KAAM;IACrB;IACA;IACA,MAAMC,UAAU,GAAGP,GAAG,CAACQ,OAAc;IACrCT,SAAS,CAACQ,UAAU,CAACE,cAAc,CAAC,CAAC,CAAC;EACxC,CAAC;EAED,oBACExB,KAAA,CAAAyB,aAAA,CAACpB,GAAG;IAACqB,OAAO,EAAC;EAAW,gBACtB1B,KAAA,CAAAyB,aAAA,CAAClB,YAAY,EAAAoB,QAAA;IACXZ,GAAG,EAAEA,GAAI;IACTM,QAAQ,EAAEA,QAAS;IACnBO,CAAC,EAAEnB,WAAY;IACfO,aAAa,EAAEA,aAAc;IAC7Ba,eAAe,EAAEhB,MAAO;IACxBiB,WAAW,EAAE,CAAE;IACfC,aAAa,EAAC,OAAO;IACrBC,cAAc,EAAC,OAAO;IACtBC,IAAI,EAAC;EAAM,GACPrB,SAAS,CACd,CACE,CAAC;AAEV,CAAC"}
+{"version":3,"names":["React","useState","Animated","useAnimatedProps","useAnimatedRef","Svg","Path","AnimatedPath","createAnimatedComponent","TickSVGPath","AnimatedTick","size","progress","pathProps","length","setLength","ref","animatedProps","strokeDashoffset","Math","max","value","onLayout","currentRef","current","getTotalLength","createElement","_extends","viewBox","width","height","d","strokeDasharray","strokeWidth","strokeLinecap","strokeLinejoin","fill"],"sourceRoot":"../../../../src","sources":["components/common/AnimatedTick.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,OAAOC,QAAQ,IAEbC,gBAAgB,EAChBC,cAAc,QACT,yBAAyB;AAChC,OAAOC,GAAG,IAAIC,IAAI,QAAmB,kBAAkB;AAEvD,MAAMC,YAAY,GAAGL,QAAQ,CAACM,uBAAuB,CAACF,IAAI,CAAC;AAQ3D;AACA,MAAMG,WAAW,GAAG,eAAe;;AAEnC;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,YAAY,GAAGA,CAAC;EAC3BC,IAAI;EACJC,QAAQ;EACR,GAAGC;AACc,CAAC,KAAK;EACvB,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGd,QAAQ,CAAC,CAAC,CAAC;EACvC,MAAMe,GAAG,GAAGZ,cAAc,CAAC,CAAC;;EAE5B;EACA;EACA,MAAMa,aAAa,GAAGd,gBAAgB,CAAC,OAAO;IAC5Ce,gBAAgB,EAAEC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEN,MAAM,GAAGA,MAAM,GAAGF,QAAQ,CAACS,KAAK,GAAG,GAAG;EACtE,CAAC,CAAC,CAAC;EAEH,MAAMC,QAAQ,GAAGA,CAAA,KAAM;IACrB;IACA;IACA,MAAMC,UAAU,GAAGP,GAAG,CAACQ,OAAc;IACrCT,SAAS,CAACQ,UAAU,CAACE,cAAc,CAAC,CAAC,CAAC;EACxC,CAAC;EAED,oBACEzB,KAAA,CAAA0B,aAAA,CAACrB,GAAG,EAAAsB,QAAA;IAACC,OAAO,EAAG;EAAW,GAAMjB,IAAI,GAAG;IAAEkB,KAAK,EAAElB,IAAI;IAAEmB,MAAM,EAAEnB;EAAK,CAAC,GAAG,CAAC,CAAC,gBACvEX,KAAA,CAAA0B,aAAA,CAACnB,YAAY,EAAAoB,QAAA;IACXX,GAAG,EAAEA,GAAI;IACTM,QAAQ,EAAEA,QAAS;IACnBS,CAAC,EAAEtB,WAAY;IACfQ,aAAa,EAAEA,aAAc;IAC7Be,eAAe,EAAElB,MAAO;IACxBmB,WAAW,EAAE,CAAE;IACfC,aAAa,EAAC,OAAO;IACrBC,cAAc,EAAC,OAAO;IACtBC,IAAI,EAAC;EAAM,GACPvB,SAAS,CACd,CACE,CAAC;AAEV,CAAC"}

package/lib/module/components/common/LogoPaymentWithFallback.js

@@ -1,7 +1,8 @@
 import * as React from "react";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
+import { findFirstCaseInsensitive } from "../../utils/object";
 import { Icon } from "../icons";
 import { IOPaymentExtLogos, IOPaymentLogos, LogoPayment, LogoPaymentExt } from "../logos";
-import { findFirstCaseInsensitive } from "../../utils/object";
 /**
  * This component renders either
  * - a LogoPayment/LogoPaymentExt component
@@ -18,9 +19,13 @@ export const LogoPaymentWithFallback = ({
   isExtended = false,
   size = isExtended ? 48 : 24
 }) => {
+  const {
+    dynamicFontScale
+  } = useIOFontDynamicScale();
   const logos = isExtended ? IOPaymentExtLogos : IOPaymentLogos;
   if (!brand) {
     return /*#__PURE__*/React.createElement(Icon, {
+      allowFontScaling: true,
       name: "creditCard",
       size: size,
       color: fallbackIconColor
@@ -29,6 +34,7 @@ export const LogoPaymentWithFallback = ({
   const findCase = findFirstCaseInsensitive(logos, brand);
   if (!findCase) {
     return /*#__PURE__*/React.createElement(Icon, {
+      allowFontScaling: true,
       name: "creditCard",
       size: size,
       color: fallbackIconColor
@@ -36,10 +42,10 @@ export const LogoPaymentWithFallback = ({
   }
   return isExtended ? /*#__PURE__*/React.createElement(LogoPaymentExt, {
     name: findCase,
-    size: size
+    size: size * dynamicFontScale
   }) : /*#__PURE__*/React.createElement(LogoPayment, {
     name: findCase,
-    size: size
+    size: size * dynamicFontScale
   });
 };
 //# sourceMappingURL=LogoPaymentWithFallback.js.map

package/lib/module/components/common/LogoPaymentWithFallback.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Icon","IOPaymentExtLogos","IOPaymentLogos","LogoPayment","LogoPaymentExt","findFirstCaseInsensitive","LogoPaymentWithFallback","brand","fallbackIconColor","isExtended","size","logos","createElement","name","color","findCase"],"sourceRoot":"../../../../src","sources":["components/common/LogoPaymentWithFallback.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAA0BC,IAAI,QAAQ,UAAU;AAChD,SAGEC,iBAAiB,EACjBC,cAAc,EACdC,WAAW,EACXC,cAAc,QACT,UAAU;AACjB,SAASC,wBAAwB,QAAQ,oBAAoB;AAa7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,uBAAuB,GAAGA,CAAC;EACtCC,KAAK;EACLC,iBAAiB,GAAG,UAAU;EAC9BC,UAAU,GAAG,KAAK;EAClBC,IAAI,GAAGD,UAAU,GAAG,EAAE,GAAG;AACF,CAAC,KAAK;EAC7B,MAAME,KAAK,GAAGF,UAAU,GAAGR,iBAAiB,GAAGC,cAAc;EAE7D,IAAI,CAACK,KAAK,EAAE;IACV,oBAAOR,KAAA,CAAAa,aAAA,CAACZ,IAAI;MAACa,IAAI,EAAC,YAAY;MAACH,IAAI,EAAEA,IAAK;MAACI,KAAK,EAAEN;IAAkB,CAAE,CAAC;EACzE;EAEA,MAAMO,QAAQ,GAAGV,wBAAwB,CAACM,KAAK,EAAEJ,KAAK,CAAC;EAEvD,IAAI,CAACQ,QAAQ,EAAE;IACb,oBAAOhB,KAAA,CAAAa,aAAA,CAACZ,IAAI;MAACa,IAAI,EAAC,YAAY;MAACH,IAAI,EAAEA,IAAK;MAACI,KAAK,EAAEN;IAAkB,CAAE,CAAC;EACzE;EAEA,OAAOC,UAAU,gBACfV,KAAA,CAAAa,aAAA,CAACR,cAAc;IAACS,IAAI,EAAEE,QAAiC;IAACL,IAAI,EAAEA;EAAK,CAAE,CAAC,gBAEtEX,KAAA,CAAAa,aAAA,CAACT,WAAW;IAACU,IAAI,EAAEE,QAA8B;IAACL,IAAI,EAAEA;EAAK,CAAE,CAChE;AACH,CAAC"}
+{"version":3,"names":["React","useIOFontDynamicScale","findFirstCaseInsensitive","Icon","IOPaymentExtLogos","IOPaymentLogos","LogoPayment","LogoPaymentExt","LogoPaymentWithFallback","brand","fallbackIconColor","isExtended","size","dynamicFontScale","logos","createElement","allowFontScaling","name","color","findCase"],"sourceRoot":"../../../../src","sources":["components/common/LogoPaymentWithFallback.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,qBAAqB,QAAQ,2BAA2B;AACjE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAA0BC,IAAI,QAAQ,UAAU;AAChD,SAGEC,iBAAiB,EACjBC,cAAc,EACdC,WAAW,EACXC,cAAc,QACT,UAAU;AAajB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,uBAAuB,GAAGA,CAAC;EACtCC,KAAK;EACLC,iBAAiB,GAAG,UAAU;EAC9BC,UAAU,GAAG,KAAK;EAClBC,IAAI,GAAGD,UAAU,GAAG,EAAE,GAAG;AACF,CAAC,KAAK;EAC7B,MAAM;IAAEE;EAAiB,CAAC,GAAGZ,qBAAqB,CAAC,CAAC;EACpD,MAAMa,KAAK,GAAGH,UAAU,GAAGP,iBAAiB,GAAGC,cAAc;EAE7D,IAAI,CAACI,KAAK,EAAE;IACV,oBACET,KAAA,CAAAe,aAAA,CAACZ,IAAI;MACHa,gBAAgB;MAChBC,IAAI,EAAC,YAAY;MACjBL,IAAI,EAAEA,IAAK;MACXM,KAAK,EAAER;IAAkB,CAC1B,CAAC;EAEN;EAEA,MAAMS,QAAQ,GAAGjB,wBAAwB,CAACY,KAAK,EAAEL,KAAK,CAAC;EAEvD,IAAI,CAACU,QAAQ,EAAE;IACb,oBACEnB,KAAA,CAAAe,aAAA,CAACZ,IAAI;MACHa,gBAAgB;MAChBC,IAAI,EAAC,YAAY;MACjBL,IAAI,EAAEA,IAAK;MACXM,KAAK,EAAER;IAAkB,CAC1B,CAAC;EAEN;EAEA,OAAOC,UAAU,gBACfX,KAAA,CAAAe,aAAA,CAACR,cAAc;IACbU,IAAI,EAAEE,QAAiC;IACvCP,IAAI,EAAEA,IAAI,GAAGC;EAAiB,CAC/B,CAAC,gBAEFb,KAAA,CAAAe,aAAA,CAACT,WAAW;IACVW,IAAI,EAAEE,QAA8B;IACpCP,IAAI,EAAEA,IAAI,GAAGC;EAAiB,CAC/B,CACF;AACH,CAAC"}

package/lib/module/components/featureInfo/FeatureInfo.js

@@ -1,7 +1,6 @@
 import React from "react";
-import { View } from "react-native";
-import { BodySmall, HSpacer, Icon, Pictogram, VStack } from "../../components";
-import { IOStyles, useIOTheme } from "../../core";
+import { BodySmall, HStack, Icon, Pictogram, VStack } from "../../components";
+import { useIOTheme } from "../../core";
 const DEFAULT_ICON_SIZE = 24;
 const DEFAULT_PICTOGRAM_SIZE = 48;
 const renderNode = body => {
@@ -19,25 +18,29 @@ export const FeatureInfo = ({
   action
 }) => {
   const theme = useIOTheme();
-  return /*#__PURE__*/React.createElement(View, {
-    style: [IOStyles.flex, IOStyles.row, IOStyles.alignCenter]
+  return /*#__PURE__*/React.createElement(HStack, {
+    style: {
+      alignItems: "center"
+    },
+    space: 24
   }, iconName && /*#__PURE__*/React.createElement(Icon, {
+    allowFontScaling: true,
     name: iconName,
     size: DEFAULT_ICON_SIZE,
     color: theme["icon-decorative"]
   }), pictogramName && /*#__PURE__*/React.createElement(Pictogram, {
+    allowFontScaling: true,
     name: pictogramName,
     size: DEFAULT_PICTOGRAM_SIZE
-  }), /*#__PURE__*/React.createElement(HSpacer, {
-    size: 24
   }), /*#__PURE__*/React.createElement(VStack, {
+    allowScaleSpacing: true,
     space: 4,
     style: {
       flexShrink: 1
     }
   }, renderNode(body), action && /*#__PURE__*/React.createElement(BodySmall, {
-    weight: "Semibold",
     asLink: true,
+    weight: "Semibold",
     onPress: action.onPress,
     accessible: true,
     importantForAccessibility: "yes",

package/lib/module/components/featureInfo/FeatureInfo.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","BodySmall","HSpacer","Icon","Pictogram","VStack","IOStyles","useIOTheme","DEFAULT_ICON_SIZE","DEFAULT_PICTOGRAM_SIZE","renderNode","body","createElement","testID","FeatureInfo","iconName","pictogramName","action","theme","style","flex","row","alignCenter","name","size","color","space","flexShrink","weight","asLink","onPress","accessible","importantForAccessibility","accessibilityElementsHidden","label"],"sourceRoot":"../../../../src","sources":["components/featureInfo/FeatureInfo.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAqB,OAAO;AACxC,SAAgCC,IAAI,QAAQ,cAAc;AAC1D,SACEC,SAAS,EACTC,OAAO,EAKPC,IAAI,EACJC,SAAS,EACTC,MAAM,QACD,kBAAkB;AACzB,SAASC,QAAQ,EAAEC,UAAU,QAAQ,YAAY;AA0BjD,MAAMC,iBAAkC,GAAG,EAAE;AAC7C,MAAMC,sBAA4C,GAAG,EAAE;AAEvD,MAAMC,UAAU,GAAIC,IAA8B,IAAK;EACrD,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;IAC5B,oBAAOZ,KAAA,CAAAa,aAAA,CAACX,SAAS;MAACY,MAAM,EAAC;IAAgB,GAAEF,IAAgB,CAAC;EAC9D;EAEA,OAAOA,IAAI;AACb,CAAC;AAED,OAAO,MAAMG,WAAW,GAAGA,CAAC;EAC1BC,QAAQ;EACRC,aAAa;EACbL,IAAI;EACJM;AACgB,CAAC,KAAK;EACtB,MAAMC,KAAK,GAAGX,UAAU,CAAC,CAAC;EAE1B,oBACER,KAAA,CAAAa,aAAA,CAACZ,IAAI;IAACmB,KAAK,EAAE,CAACb,QAAQ,CAACc,IAAI,EAAEd,QAAQ,CAACe,GAAG,EAAEf,QAAQ,CAACgB,WAAW;EAAE,GAC9DP,QAAQ,iBACPhB,KAAA,CAAAa,aAAA,CAACT,IAAI;IACHoB,IAAI,EAAER,QAAS;IACfS,IAAI,EAAEhB,iBAAkB;IACxBiB,KAAK,EAAEP,KAAK,CAAC,iBAAiB;EAAE,CACjC,CACF,EACAF,aAAa,iBACZjB,KAAA,CAAAa,aAAA,CAACR,SAAS;IAACmB,IAAI,EAAEP,aAAc;IAACQ,IAAI,EAAEf;EAAuB,CAAE,CAChE,eACDV,KAAA,CAAAa,aAAA,CAACV,OAAO;IAACsB,IAAI,EAAE;EAAG,CAAE,CAAC,eACrBzB,KAAA,CAAAa,aAAA,CAACP,MAAM;IAACqB,KAAK,EAAE,CAAE;IAACP,KAAK,EAAE;MAAEQ,UAAU,EAAE;IAAE;EAAE,GACxCjB,UAAU,CAACC,IAAI,CAAC,EAChBM,MAAM,iBACLlB,KAAA,CAAAa,aAAA,CAACX,SAAS;IACR2B,MAAM,EAAC,UAAU;IACjBC,MAAM;IACNC,OAAO,EAAEb,MAAM,CAACa,OAAQ;IACxBC,UAAU;IACVC,yBAAyB,EAAE,KAAM;IACjCC,2BAA2B,EAAE;EAAM,GAElChB,MAAM,CAACiB,KACC,CAEP,CACJ,CAAC;AAEX,CAAC"}
+{"version":3,"names":["React","BodySmall","HStack","Icon","Pictogram","VStack","useIOTheme","DEFAULT_ICON_SIZE","DEFAULT_PICTOGRAM_SIZE","renderNode","body","createElement","testID","FeatureInfo","iconName","pictogramName","action","theme","style","alignItems","space","allowFontScaling","name","size","color","allowScaleSpacing","flexShrink","asLink","weight","onPress","accessible","importantForAccessibility","accessibilityElementsHidden","label"],"sourceRoot":"../../../../src","sources":["components/featureInfo/FeatureInfo.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAqB,OAAO;AAExC,SACEC,SAAS,EACTC,MAAM,EAKNC,IAAI,EACJC,SAAS,EACTC,MAAM,QACD,kBAAkB;AACzB,SAASC,UAAU,QAAQ,YAAY;AA0BvC,MAAMC,iBAAkC,GAAG,EAAE;AAC7C,MAAMC,sBAA4C,GAAG,EAAE;AAEvD,MAAMC,UAAU,GAAIC,IAA8B,IAAK;EACrD,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;IAC5B,oBAAOV,KAAA,CAAAW,aAAA,CAACV,SAAS;MAACW,MAAM,EAAC;IAAgB,GAAEF,IAAgB,CAAC;EAC9D;EAEA,OAAOA,IAAI;AACb,CAAC;AAED,OAAO,MAAMG,WAAW,GAAGA,CAAC;EAC1BC,QAAQ;EACRC,aAAa;EACbL,IAAI;EACJM;AACgB,CAAC,KAAK;EACtB,MAAMC,KAAK,GAAGX,UAAU,CAAC,CAAC;EAE1B,oBACEN,KAAA,CAAAW,aAAA,CAACT,MAAM;IAACgB,KAAK,EAAE;MAAEC,UAAU,EAAE;IAAS,CAAE;IAACC,KAAK,EAAE;EAAG,GAChDN,QAAQ,iBACPd,KAAA,CAAAW,aAAA,CAACR,IAAI;IACHkB,gBAAgB;IAChBC,IAAI,EAAER,QAAS;IACfS,IAAI,EAAEhB,iBAAkB;IACxBiB,KAAK,EAAEP,KAAK,CAAC,iBAAiB;EAAE,CACjC,CACF,EACAF,aAAa,iBACZf,KAAA,CAAAW,aAAA,CAACP,SAAS;IACRiB,gBAAgB;IAChBC,IAAI,EAAEP,aAAc;IACpBQ,IAAI,EAAEf;EAAuB,CAC9B,CACF,eACDR,KAAA,CAAAW,aAAA,CAACN,MAAM;IAACoB,iBAAiB;IAACL,KAAK,EAAE,CAAE;IAACF,KAAK,EAAE;MAAEQ,UAAU,EAAE;IAAE;EAAE,GAC1DjB,UAAU,CAACC,IAAI,CAAC,EAChBM,MAAM,iBACLhB,KAAA,CAAAW,aAAA,CAACV,SAAS;IACR0B,MAAM;IACNC,MAAM,EAAC,UAAU;IACjBC,OAAO,EAAEb,MAAM,CAACa,OAAQ;IACxBC,UAAU;IACVC,yBAAyB,EAAE,KAAM;IACjCC,2BAA2B,EAAE;EAAM,GAElChB,MAAM,CAACiB,KACC,CAEP,CACF,CAAC;AAEb,CAAC"}

package/lib/module/components/icons/Icon.js

@@ -1,6 +1,7 @@
 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); }
 import React from "react";
 import { IOColors } from "../../core/IOColors";
+import { useIOFontDynamicScale } from "../../utils/accessibility";
 
 /* Icons */
 import IconAbacus from "./svg/IconAbacus";
@@ -51,6 +52,7 @@ import IconChevronRight from "./svg/IconChevronRight";
 import IconChevronRightListItem from "./svg/IconChevronRightListItem";
 import IconChevronTop from "./svg/IconChevronTop";
 import IconCie from "./svg/IconCie";
+import IconCieLetter from "./svg/IconCieLetter";
 import IconCloseLarge from "./svg/IconCloseLarge";
 import IconCloseMedium from "./svg/IconCloseMedium";
 import IconCloseSmall from "./svg/IconCloseSmall";
@@ -200,7 +202,6 @@ import LegIconCheckOff from "./svg/LegIconCheckOff";
 import LegIconCheckOn from "./svg/LegIconCheckOn";
 import LegIconRadioOff from "./svg/LegIconRadioOff";
 import LegIconRadioOn from "./svg/LegIconRadioOn";
-import IconCieLetter from "./svg/IconCieLetter";
 export const IOIcons = {
   spid: IconSpid,
   cie: IconCie /* io-cie */,
@@ -403,10 +404,8 @@ export const IOIcons = {
   systemPasswordiOS: IconSystemPasswordiOS
 };
 
-/* The following values should be deleted: 12, 30 */
-/* 96 is too big for an icon, it should be replaced
-with a Pictogram instead */
 /* Sizes used exclusively for the Checkbox component */
+
 /*
 Static icon component. Use it when you need an ion that doesn't
 change its color values. It accepts `IOColors` values only.
@@ -417,15 +416,20 @@ export const Icon = ({
   size = 24,
   accessible = false,
   accessibilityLabel = "",
+  allowFontScaling = false,
   ...props
 }) => {
+  const {
+    dynamicFontScale
+  } = useIOFontDynamicScale();
   const IconElement = IOIcons[name];
   const isAccessible = accessible && accessibilityLabel.trim().length > 0;
+  const iconSize = allowFontScaling && typeof size === "number" ? size * dynamicFontScale : size;
   return /*#__PURE__*/React.createElement(IconElement, _extends({}, props, {
     style: {
       color: IOColors[color]
     },
-    size: size,
+    size: iconSize,
     accessible: isAccessible,
     accessibilityElementsHidden: !isAccessible,
     accessibilityLabel: accessibilityLabel,
@@ -443,14 +447,19 @@ export const AnimatedIcon = ({
   color = IOColors.bluegrey,
   size = 24,
   accessible = false,
+  allowFontScaling = false,
   ...props
 }) => {
+  const {
+    dynamicFontScale
+  } = useIOFontDynamicScale();
   const IconElement = IOIcons[name];
+  const iconSize = allowFontScaling && typeof size === "number" ? size * dynamicFontScale : size;
   return /*#__PURE__*/React.createElement(IconElement, _extends({}, props, {
     style: {
       color
     },
-    size: size,
+    size: iconSize,
     accessible: accessible,
     accessibilityElementsHidden: true,
     accessibilityLabel: "",