npm - @pagopa/io-app-design-system - Versions diffs - 4.3.0 → 4.4.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (308) hide show

package/lib/module/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap CHANGED Viewed

@@ -59,6 +59,9 @@ exports[`Test List Item Components - Experimental Enabled  ListItemAction Snapsh
             "flexDirection": "row",
             "justifyContent": "space-between",
           },
+          {
+            "columnGap": 12,
+          },
           {
             "transform": [
               {
@@ -79,7 +82,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemAction Snapsh
       >
         <Text
           allowFontScaling={true}
-          maxFontSizeMultiplier={1.25}
+          maxFontSizeMultiplier={1.5}
           style={
             [
               {},
@@ -166,7 +169,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemIDP Snapshot
   >
     <Text
       allowFontScaling={true}
-      maxFontSizeMultiplier={1.25}
+      maxFontSizeMultiplier={1.5}
       style={
         [
           {
@@ -215,11 +218,16 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfo Snapshot
 >
   <View
     style={
-      {
-        "alignItems": "center",
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-      }
+      [
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+        },
+        {
+          "columnGap": 12,
+        },
+      ]
     }
   >
     <View
@@ -235,7 +243,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfo Snapshot
         <Text
           allowFontScaling={true}
           dynamicTypeRamp="footnote"
-          maxFontSizeMultiplier={1.25}
+          maxFontSizeMultiplier={1.5}
           style={
             [
               {},
@@ -255,7 +263,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfo Snapshot
         <Text
           allowFontScaling={true}
           dynamicTypeRamp="headline"
-          maxFontSizeMultiplier={1.25}
+          maxFontSizeMultiplier={1.5}
           numberOfLines={2}
           style={
             [
@@ -338,6 +346,9 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
             "flexDirection": "row",
             "justifyContent": "space-between",
           },
+          {
+            "columnGap": 12,
+          },
           {
             "transform": [
               {
@@ -358,7 +369,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
         <Text
           allowFontScaling={true}
           dynamicTypeRamp="footnote"
-          maxFontSizeMultiplier={1.25}
+          maxFontSizeMultiplier={1.5}
           style={
             [
               {},
@@ -378,7 +389,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
         <Text
           allowFontScaling={true}
           dynamicTypeRamp="headline"
-          maxFontSizeMultiplier={1.25}
+          maxFontSizeMultiplier={1.5}
           numberOfLines={2}
           style={
             [
@@ -397,74 +408,66 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
           testValue
         </Text>
       </View>
-      <View
+      <RNSVGSvgView
+        accessibilityElementsHidden={true}
+        accessibilityLabel=""
+        accessible={false}
+        align="xMidYMid"
+        bbHeight={24}
+        bbWidth={24}
+        focusable={false}
+        height={24}
+        importantForAccessibility="no-hide-descendants"
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
         style={
-          {
-            "marginLeft": 12,
-          }
+          [
+            {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            {
+              "color": "#0B3EE3",
+            },
+            {
+              "flex": 0,
+              "height": 24,
+              "width": 24,
+            },
+          ]
         }
+        tintColor="#0B3EE3"
+        vbHeight={24}
+        vbWidth={24}
+        width={24}
       >
-        <RNSVGSvgView
-          accessibilityElementsHidden={true}
-          accessibilityLabel=""
-          accessible={false}
-          align="xMidYMid"
-          bbHeight={24}
-          bbWidth={24}
-          focusable={false}
-          height={24}
-          importantForAccessibility="no-hide-descendants"
-          meetOrSlice={0}
-          minX={0}
-          minY={0}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "borderWidth": 0,
-              },
-              {
-                "color": "#0B3EE3",
-              },
-              {
-                "flex": 0,
-                "height": 24,
-                "width": 24,
-              },
-            ]
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
           }
-          tintColor="#0B3EE3"
-          vbHeight={24}
-          vbWidth={24}
-          width={24}
         >
-          <RNSVGGroup
+          <RNSVGPath
+            clipRule={0}
+            d="M12 18h8a2 2 0 0 0 2-2V9h-4a3 3 0 0 1-3-3V2h-3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Zm9.332-11.987a2 2 0 0 1 .603.987H18a1 1 0 0 1-1-1V2.227a2 2 0 0 1 .406.281l3.926 3.505ZM14 20h-2a4 4 0 0 1-4-4V6H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2Zm2 0h4a4 4 0 0 0 4-4V7.505a4 4 0 0 0-1.336-2.984l-3.926-3.505A4 4 0 0 0 16.074 0H12a4 4 0 0 0-4 4H4a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4Z"
             fill={
               {
-                "payload": 4278190080,
-                "type": 0,
+                "type": 2,
               }
             }
-          >
-            <RNSVGPath
-              clipRule={0}
-              d="M12 18h8a2 2 0 0 0 2-2V9h-4a3 3 0 0 1-3-3V2h-3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Zm9.332-11.987a2 2 0 0 1 .603.987H18a1 1 0 0 1-1-1V2.227a2 2 0 0 1 .406.281l3.926 3.505ZM14 20h-2a4 4 0 0 1-4-4V6H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2Zm2 0h4a4 4 0 0 0 4-4V7.505a4 4 0 0 0-1.336-2.984l-3.926-3.505A4 4 0 0 0 16.074 0H12a4 4 0 0 0-4 4H4a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4Z"
-              fill={
-                {
-                  "type": 2,
-                }
-              }
-              fillRule={0}
-              propList={
-                [
-                  "fill",
-                  "fillRule",
-                ]
-              }
-            />
-          </RNSVGGroup>
-        </RNSVGSvgView>
-      </View>
+            fillRule={0}
+            propList={
+              [
+                "fill",
+                "fillRule",
+              ]
+            }
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
     </View>
   </View>
 </View>
@@ -527,6 +530,9 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNav Snapshot
             "flexDirection": "row",
             "justifyContent": "space-between",
           },
+          {
+            "columnGap": 12,
+          },
           {
             "transform": [
               {
@@ -547,7 +553,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNav Snapshot
         <Text
           allowFontScaling={true}
           dynamicTypeRamp="headline"
-          maxFontSizeMultiplier={1.25}
+          maxFontSizeMultiplier={1.5}
           style={
             [
               {},
@@ -689,6 +695,9 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
             "flexDirection": "row",
             "justifyContent": "space-between",
           },
+          {
+            "columnGap": 12,
+          },
           {
             "transform": [
               {
@@ -699,74 +708,66 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
         ]
       }
     >
-      <View
+      <RNSVGSvgView
+        accessibilityElementsHidden={true}
+        accessibilityLabel=""
+        accessible={false}
+        align="xMidYMid"
+        bbHeight={24}
+        bbWidth={24}
+        focusable={false}
+        height={24}
+        importantForAccessibility="no-hide-descendants"
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
         style={
-          {
-            "marginRight": 12,
-          }
+          [
+            {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            {
+              "color": "#D13333",
+            },
+            {
+              "flex": 0,
+              "height": 24,
+              "width": 24,
+            },
+          ]
         }
+        tintColor="#D13333"
+        vbHeight={24}
+        vbWidth={24}
+        width={24}
       >
-        <RNSVGSvgView
-          accessibilityElementsHidden={true}
-          accessibilityLabel=""
-          accessible={false}
-          align="xMidYMid"
-          bbHeight={24}
-          bbWidth={24}
-          focusable={false}
-          height={24}
-          importantForAccessibility="no-hide-descendants"
-          meetOrSlice={0}
-          minX={0}
-          minY={0}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "borderWidth": 0,
-              },
-              {
-                "color": "#D13333",
-              },
-              {
-                "flex": 0,
-                "height": 24,
-                "width": 24,
-              },
-            ]
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
           }
-          tintColor="#D13333"
-          vbHeight={24}
-          vbWidth={24}
-          width={24}
         >
-          <RNSVGGroup
+          <RNSVGPath
+            clipRule={0}
+            d="M7.00702 1c-.73494 0-1.41405.39209-1.78152 1.02856L.2756 11.0274c-.36747.6365-.36747 1.4206 0 2.0571l4.9499 8.8783c.36747.6365 1.04658 1.0286 1.78152 1.0286h9.94288c.7349 0 1.414-.3921 1.7815-1.0286l4.993-8.8783c.3675-.6365.3675-1.4206 0-2.0571l-4.993-8.99884C18.3639 1.39209 17.6848 1 16.9499 1H7.00702Zm5.02608 13.5549c.5676 0 1.0283-.4601 1.0283-1.0277V5.52583c0-.56758-.4601-1.02769-1.0277-1.02769-.5676 0-1.0282.46011-1.0282 1.02769v8.00137c0 .5676.4601 1.0277 1.0276 1.0277Zm0 1.9431c.8436 0 1.5275.6839 1.5275 1.5275 0 .8436-.6839 1.5275-1.5275 1.5275-.8436 0-1.5274-.6839-1.5274-1.5275 0-.8436.6838-1.5275 1.5274-1.5275Z"
             fill={
               {
-                "payload": 4278190080,
-                "type": 0,
+                "type": 2,
               }
             }
-          >
-            <RNSVGPath
-              clipRule={0}
-              d="M7.00702 1c-.73494 0-1.41405.39209-1.78152 1.02856L.2756 11.0274c-.36747.6365-.36747 1.4206 0 2.0571l4.9499 8.8783c.36747.6365 1.04658 1.0286 1.78152 1.0286h9.94288c.7349 0 1.414-.3921 1.7815-1.0286l4.993-8.8783c.3675-.6365.3675-1.4206 0-2.0571l-4.993-8.99884C18.3639 1.39209 17.6848 1 16.9499 1H7.00702Zm5.02608 13.5549c.5676 0 1.0283-.4601 1.0283-1.0277V5.52583c0-.56758-.4601-1.02769-1.0277-1.02769-.5676 0-1.0282.46011-1.0282 1.02769v8.00137c0 .5676.4601 1.0277 1.0276 1.0277Zm0 1.9431c.8436 0 1.5275.6839 1.5275 1.5275 0 .8436-.6839 1.5275-1.5275 1.5275-.8436 0-1.5274-.6839-1.5274-1.5275 0-.8436.6838-1.5275 1.5274-1.5275Z"
-              fill={
-                {
-                  "type": 2,
-                }
-              }
-              fillRule={0}
-              propList={
-                [
-                  "fill",
-                  "fillRule",
-                ]
-              }
-            />
-          </RNSVGGroup>
-        </RNSVGSvgView>
-      </View>
+            fillRule={0}
+            propList={
+              [
+                "fill",
+                "fillRule",
+              ]
+            }
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
       <View
         style={
           {
@@ -777,7 +778,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
         <Text
           allowFontScaling={true}
           dynamicTypeRamp="headline"
-          maxFontSizeMultiplier={1.25}
+          maxFontSizeMultiplier={1.5}
           style={
             [
               {},
@@ -795,74 +796,66 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
           testValue
         </Text>
       </View>
-      <View
+      <RNSVGSvgView
+        accessibilityElementsHidden={true}
+        accessibilityLabel=""
+        accessible={false}
+        align="xMidYMid"
+        bbHeight={24}
+        bbWidth={24}
+        focusable={false}
+        height={24}
+        importantForAccessibility="no-hide-descendants"
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
         style={
-          {
-            "marginLeft": 12,
-          }
+          [
+            {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            {
+              "color": "#0B3EE3",
+            },
+            {
+              "flex": 0,
+              "height": 24,
+              "width": 24,
+            },
+          ]
         }
+        tintColor="#0B3EE3"
+        vbHeight={24}
+        vbWidth={24}
+        width={24}
       >
-        <RNSVGSvgView
-          accessibilityElementsHidden={true}
-          accessibilityLabel=""
-          accessible={false}
-          align="xMidYMid"
-          bbHeight={24}
-          bbWidth={24}
-          focusable={false}
-          height={24}
-          importantForAccessibility="no-hide-descendants"
-          meetOrSlice={0}
-          minX={0}
-          minY={0}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "borderWidth": 0,
-              },
-              {
-                "color": "#0B3EE3",
-              },
-              {
-                "flex": 0,
-                "height": 24,
-                "width": 24,
-              },
-            ]
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
           }
-          tintColor="#0B3EE3"
-          vbHeight={24}
-          vbWidth={24}
-          width={24}
         >
-          <RNSVGGroup
+          <RNSVGPath
+            clipRule={0}
+            d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
             fill={
               {
-                "payload": 4278190080,
-                "type": 0,
+                "type": 2,
               }
             }
-          >
-            <RNSVGPath
-              clipRule={0}
-              d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
-              fill={
-                {
-                  "type": 2,
-                }
-              }
-              fillRule={0}
-              propList={
-                [
-                  "fill",
-                  "fillRule",
-                ]
-              }
-            />
-          </RNSVGGroup>
-        </RNSVGSvgView>
-      </View>
+            fillRule={0}
+            propList={
+              [
+                "fill",
+                "fillRule",
+              ]
+            }
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
     </View>
   </View>
 </View>
@@ -947,7 +940,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
         <Text
           allowFontScaling={true}
           dynamicTypeRamp="headline"
-          maxFontSizeMultiplier={1.25}
+          maxFontSizeMultiplier={1.5}
           numberOfLines={1}
           style={
             [
@@ -1035,7 +1028,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
           <Text
             allowFontScaling={true}
             dynamicTypeRamp="footnote"
-            maxFontSizeMultiplier={1.25}
+            maxFontSizeMultiplier={1.5}
             style={
               [
                 {},
@@ -1069,7 +1062,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
         <Text
           allowFontScaling={true}
           dynamicTypeRamp="headline"
-          maxFontSizeMultiplier={1.25}
+          maxFontSizeMultiplier={1.5}
           style={
             [
               {},
@@ -1128,12 +1121,14 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
             style={
               [
                 {
-                  "borderRadius": 12,
                   "borderWidth": 2,
-                  "height": 24,
                   "left": 0,
                   "position": "absolute",
                   "top": 0,
+                },
+                {
+                  "borderRadius": 12,
+                  "height": 24,
                   "width": 24,
                 },
                 {
@@ -1146,15 +1141,17 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
             style={
               [
                 {
-                  "borderRadius": 12,
-                  "height": 24,
                   "left": 0,
                   "position": "absolute",
                   "top": 0,
-                  "width": 24,
                 },
                 {
-                  "backgroundColor": "#0B3EE3",
+                  "borderRadius": 12,
+                  "height": 24,
+                  "width": 24,
+                },
+                {
+                  "backgroundColor": "#0B3EE3",
                 },
                 {
                   "opacity": 1,
@@ -1170,9 +1167,10 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
           <View>
             <RNSVGSvgView
               align="xMidYMid"
-              bbHeight="100%"
-              bbWidth="100%"
+              bbHeight={24}
+              bbWidth={24}
               focusable={false}
+              height={24}
               meetOrSlice={0}
               minX={0}
               minY={0}
@@ -1184,13 +1182,14 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
                   },
                   {
                     "flex": 0,
-                    "height": "100%",
-                    "width": "100%",
+                    "height": 24,
+                    "width": 24,
                   },
                 ]
               }
               vbHeight={24}
               vbWidth={24}
+              width={24}
             >
               <RNSVGGroup
                 fill={
@@ -1314,7 +1313,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
         <Text
           allowFontScaling={true}
           dynamicTypeRamp="headline"
-          maxFontSizeMultiplier={1.25}
+          maxFontSizeMultiplier={1.5}
           numberOfLines={1}
           style={
             [
@@ -1348,7 +1347,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
         <Text
           allowFontScaling={true}
           dynamicTypeRamp="headline"
-          maxFontSizeMultiplier={1.25}
+          maxFontSizeMultiplier={1.5}
           style={
             [
               {},
@@ -1407,12 +1406,14 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
             style={
               [
                 {
-                  "borderRadius": 12,
                   "borderWidth": 2,
-                  "height": 24,
                   "left": 0,
                   "position": "absolute",
                   "top": 0,
+                },
+                {
+                  "borderRadius": 12,
+                  "height": 24,
                   "width": 24,
                 },
                 {
@@ -1425,11 +1426,13 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
             style={
               [
                 {
-                  "borderRadius": 12,
-                  "height": 24,
                   "left": 0,
                   "position": "absolute",
                   "top": 0,
+                },
+                {
+                  "borderRadius": 12,
+                  "height": 24,
                   "width": 24,
                 },
                 {
@@ -1728,6 +1731,9 @@ exports[`Test List Item Components ListItemAction Snapshot 1`] = `
             "flexDirection": "row",
             "justifyContent": "space-between",
           },
+          {
+            "columnGap": 12,
+          },
           {
             "transform": [
               {
@@ -1747,8 +1753,8 @@ exports[`Test List Item Components ListItemAction Snapshot 1`] = `
         }
       >
         <Text
-          allowFontScaling={false}
-          maxFontSizeMultiplier={1.25}
+          allowFontScaling={true}
+          maxFontSizeMultiplier={1.5}
           style={
             [
               {},
@@ -1834,8 +1840,8 @@ exports[`Test List Item Components ListItemIDP Snapshot 1`] = `
     }
   >
     <Text
-      allowFontScaling={false}
-      maxFontSizeMultiplier={1.25}
+      allowFontScaling={true}
+      maxFontSizeMultiplier={1.5}
       style={
         [
           {
@@ -1884,11 +1890,16 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
 >
   <View
     style={
-      {
-        "alignItems": "center",
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-      }
+      [
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+        },
+        {
+          "columnGap": 12,
+        },
+      ]
     }
   >
     <View
@@ -1902,9 +1913,9 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
         accessible={true}
       >
         <Text
-          allowFontScaling={false}
+          allowFontScaling={true}
           dynamicTypeRamp="footnote"
-          maxFontSizeMultiplier={1.25}
+          maxFontSizeMultiplier={1.5}
           style={
             [
               {},
@@ -1922,9 +1933,9 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
           label
         </Text>
         <Text
-          allowFontScaling={false}
+          allowFontScaling={true}
           dynamicTypeRamp="headline"
-          maxFontSizeMultiplier={1.25}
+          maxFontSizeMultiplier={1.5}
           numberOfLines={2}
           style={
             [
@@ -2007,6 +2018,9 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
             "flexDirection": "row",
             "justifyContent": "space-between",
           },
+          {
+            "columnGap": 12,
+          },
           {
             "transform": [
               {
@@ -2025,9 +2039,9 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
         }
       >
         <Text
-          allowFontScaling={false}
+          allowFontScaling={true}
           dynamicTypeRamp="footnote"
-          maxFontSizeMultiplier={1.25}
+          maxFontSizeMultiplier={1.5}
           style={
             [
               {},
@@ -2045,9 +2059,9 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
           label
         </Text>
         <Text
-          allowFontScaling={false}
+          allowFontScaling={true}
           dynamicTypeRamp="headline"
-          maxFontSizeMultiplier={1.25}
+          maxFontSizeMultiplier={1.5}
           numberOfLines={2}
           style={
             [
@@ -2066,74 +2080,66 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
           testValue
         </Text>
       </View>
-      <View
+      <RNSVGSvgView
+        accessibilityElementsHidden={true}
+        accessibilityLabel=""
+        accessible={false}
+        align="xMidYMid"
+        bbHeight={24}
+        bbWidth={24}
+        focusable={false}
+        height={24}
+        importantForAccessibility="no-hide-descendants"
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
         style={
-          {
-            "marginLeft": 12,
-          }
+          [
+            {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            {
+              "color": "#0B3EE3",
+            },
+            {
+              "flex": 0,
+              "height": 24,
+              "width": 24,
+            },
+          ]
         }
+        tintColor="#0B3EE3"
+        vbHeight={24}
+        vbWidth={24}
+        width={24}
       >
-        <RNSVGSvgView
-          accessibilityElementsHidden={true}
-          accessibilityLabel=""
-          accessible={false}
-          align="xMidYMid"
-          bbHeight={24}
-          bbWidth={24}
-          focusable={false}
-          height={24}
-          importantForAccessibility="no-hide-descendants"
-          meetOrSlice={0}
-          minX={0}
-          minY={0}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "borderWidth": 0,
-              },
-              {
-                "color": "#0B3EE3",
-              },
-              {
-                "flex": 0,
-                "height": 24,
-                "width": 24,
-              },
-            ]
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
           }
-          tintColor="#0B3EE3"
-          vbHeight={24}
-          vbWidth={24}
-          width={24}
         >
-          <RNSVGGroup
+          <RNSVGPath
+            clipRule={0}
+            d="M12 18h8a2 2 0 0 0 2-2V9h-4a3 3 0 0 1-3-3V2h-3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Zm9.332-11.987a2 2 0 0 1 .603.987H18a1 1 0 0 1-1-1V2.227a2 2 0 0 1 .406.281l3.926 3.505ZM14 20h-2a4 4 0 0 1-4-4V6H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2Zm2 0h4a4 4 0 0 0 4-4V7.505a4 4 0 0 0-1.336-2.984l-3.926-3.505A4 4 0 0 0 16.074 0H12a4 4 0 0 0-4 4H4a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4Z"
             fill={
               {
-                "payload": 4278190080,
-                "type": 0,
+                "type": 2,
               }
             }
-          >
-            <RNSVGPath
-              clipRule={0}
-              d="M12 18h8a2 2 0 0 0 2-2V9h-4a3 3 0 0 1-3-3V2h-3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Zm9.332-11.987a2 2 0 0 1 .603.987H18a1 1 0 0 1-1-1V2.227a2 2 0 0 1 .406.281l3.926 3.505ZM14 20h-2a4 4 0 0 1-4-4V6H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2Zm2 0h4a4 4 0 0 0 4-4V7.505a4 4 0 0 0-1.336-2.984l-3.926-3.505A4 4 0 0 0 16.074 0H12a4 4 0 0 0-4 4H4a4 4 0 0 0-4 4v12a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4Z"
-              fill={
-                {
-                  "type": 2,
-                }
-              }
-              fillRule={0}
-              propList={
-                [
-                  "fill",
-                  "fillRule",
-                ]
-              }
-            />
-          </RNSVGGroup>
-        </RNSVGSvgView>
-      </View>
+            fillRule={0}
+            propList={
+              [
+                "fill",
+                "fillRule",
+              ]
+            }
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
     </View>
   </View>
 </View>
@@ -2196,6 +2202,9 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
             "flexDirection": "row",
             "justifyContent": "space-between",
           },
+          {
+            "columnGap": 12,
+          },
           {
             "transform": [
               {
@@ -2214,9 +2223,9 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
         }
       >
         <Text
-          allowFontScaling={false}
+          allowFontScaling={true}
           dynamicTypeRamp="headline"
-          maxFontSizeMultiplier={1.25}
+          maxFontSizeMultiplier={1.5}
           style={
             [
               {},
@@ -2358,6 +2367,9 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
             "flexDirection": "row",
             "justifyContent": "space-between",
           },
+          {
+            "columnGap": 12,
+          },
           {
             "transform": [
               {
@@ -2368,74 +2380,66 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
         ]
       }
     >
-      <View
+      <RNSVGSvgView
+        accessibilityElementsHidden={true}
+        accessibilityLabel=""
+        accessible={false}
+        align="xMidYMid"
+        bbHeight={24}
+        bbWidth={24}
+        focusable={false}
+        height={24}
+        importantForAccessibility="no-hide-descendants"
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
         style={
-          {
-            "marginRight": 12,
-          }
+          [
+            {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            {
+              "color": "#D13333",
+            },
+            {
+              "flex": 0,
+              "height": 24,
+              "width": 24,
+            },
+          ]
         }
+        tintColor="#D13333"
+        vbHeight={24}
+        vbWidth={24}
+        width={24}
       >
-        <RNSVGSvgView
-          accessibilityElementsHidden={true}
-          accessibilityLabel=""
-          accessible={false}
-          align="xMidYMid"
-          bbHeight={24}
-          bbWidth={24}
-          focusable={false}
-          height={24}
-          importantForAccessibility="no-hide-descendants"
-          meetOrSlice={0}
-          minX={0}
-          minY={0}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "borderWidth": 0,
-              },
-              {
-                "color": "#D13333",
-              },
-              {
-                "flex": 0,
-                "height": 24,
-                "width": 24,
-              },
-            ]
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
           }
-          tintColor="#D13333"
-          vbHeight={24}
-          vbWidth={24}
-          width={24}
         >
-          <RNSVGGroup
+          <RNSVGPath
+            clipRule={0}
+            d="M7.00702 1c-.73494 0-1.41405.39209-1.78152 1.02856L.2756 11.0274c-.36747.6365-.36747 1.4206 0 2.0571l4.9499 8.8783c.36747.6365 1.04658 1.0286 1.78152 1.0286h9.94288c.7349 0 1.414-.3921 1.7815-1.0286l4.993-8.8783c.3675-.6365.3675-1.4206 0-2.0571l-4.993-8.99884C18.3639 1.39209 17.6848 1 16.9499 1H7.00702Zm5.02608 13.5549c.5676 0 1.0283-.4601 1.0283-1.0277V5.52583c0-.56758-.4601-1.02769-1.0277-1.02769-.5676 0-1.0282.46011-1.0282 1.02769v8.00137c0 .5676.4601 1.0277 1.0276 1.0277Zm0 1.9431c.8436 0 1.5275.6839 1.5275 1.5275 0 .8436-.6839 1.5275-1.5275 1.5275-.8436 0-1.5274-.6839-1.5274-1.5275 0-.8436.6838-1.5275 1.5274-1.5275Z"
             fill={
               {
-                "payload": 4278190080,
-                "type": 0,
+                "type": 2,
               }
             }
-          >
-            <RNSVGPath
-              clipRule={0}
-              d="M7.00702 1c-.73494 0-1.41405.39209-1.78152 1.02856L.2756 11.0274c-.36747.6365-.36747 1.4206 0 2.0571l4.9499 8.8783c.36747.6365 1.04658 1.0286 1.78152 1.0286h9.94288c.7349 0 1.414-.3921 1.7815-1.0286l4.993-8.8783c.3675-.6365.3675-1.4206 0-2.0571l-4.993-8.99884C18.3639 1.39209 17.6848 1 16.9499 1H7.00702Zm5.02608 13.5549c.5676 0 1.0283-.4601 1.0283-1.0277V5.52583c0-.56758-.4601-1.02769-1.0277-1.02769-.5676 0-1.0282.46011-1.0282 1.02769v8.00137c0 .5676.4601 1.0277 1.0276 1.0277Zm0 1.9431c.8436 0 1.5275.6839 1.5275 1.5275 0 .8436-.6839 1.5275-1.5275 1.5275-.8436 0-1.5274-.6839-1.5274-1.5275 0-.8436.6838-1.5275 1.5274-1.5275Z"
-              fill={
-                {
-                  "type": 2,
-                }
-              }
-              fillRule={0}
-              propList={
-                [
-                  "fill",
-                  "fillRule",
-                ]
-              }
-            />
-          </RNSVGGroup>
-        </RNSVGSvgView>
-      </View>
+            fillRule={0}
+            propList={
+              [
+                "fill",
+                "fillRule",
+              ]
+            }
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
       <View
         style={
           {
@@ -2444,9 +2448,9 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
         }
       >
         <Text
-          allowFontScaling={false}
+          allowFontScaling={true}
           dynamicTypeRamp="headline"
-          maxFontSizeMultiplier={1.25}
+          maxFontSizeMultiplier={1.5}
           style={
             [
               {},
@@ -2464,74 +2468,66 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
           testValue
         </Text>
       </View>
-      <View
+      <RNSVGSvgView
+        accessibilityElementsHidden={true}
+        accessibilityLabel=""
+        accessible={false}
+        align="xMidYMid"
+        bbHeight={24}
+        bbWidth={24}
+        focusable={false}
+        height={24}
+        importantForAccessibility="no-hide-descendants"
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
         style={
-          {
-            "marginLeft": 12,
-          }
+          [
+            {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            {
+              "color": "#0073E6",
+            },
+            {
+              "flex": 0,
+              "height": 24,
+              "width": 24,
+            },
+          ]
         }
+        tintColor="#0073E6"
+        vbHeight={24}
+        vbWidth={24}
+        width={24}
       >
-        <RNSVGSvgView
-          accessibilityElementsHidden={true}
-          accessibilityLabel=""
-          accessible={false}
-          align="xMidYMid"
-          bbHeight={24}
-          bbWidth={24}
-          focusable={false}
-          height={24}
-          importantForAccessibility="no-hide-descendants"
-          meetOrSlice={0}
-          minX={0}
-          minY={0}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "borderWidth": 0,
-              },
-              {
-                "color": "#0B3EE3",
-              },
-              {
-                "flex": 0,
-                "height": 24,
-                "width": 24,
-              },
-            ]
+        <RNSVGGroup
+          fill={
+            {
+              "payload": 4278190080,
+              "type": 0,
+            }
           }
-          tintColor="#0B3EE3"
-          vbHeight={24}
-          vbWidth={24}
-          width={24}
         >
-          <RNSVGGroup
+          <RNSVGPath
+            clipRule={0}
+            d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
             fill={
               {
-                "payload": 4278190080,
-                "type": 0,
+                "type": 2,
               }
             }
-          >
-            <RNSVGPath
-              clipRule={0}
-              d="M16.2929 5.29289c.3905-.39052 1.0237-.39052 1.4142 0l6 6.00001c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.0237.3905-1.4142 0-.3905-.3905-.3905-1.0237 0-1.4142L21.5858 12l-5.2929-5.29289c-.3905-.39053-.3905-1.02369 0-1.41422Z"
-              fill={
-                {
-                  "type": 2,
-                }
-              }
-              fillRule={0}
-              propList={
-                [
-                  "fill",
-                  "fillRule",
-                ]
-              }
-            />
-          </RNSVGGroup>
-        </RNSVGSvgView>
-      </View>
+            fillRule={0}
+            propList={
+              [
+                "fill",
+                "fillRule",
+              ]
+            }
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
     </View>
   </View>
 </View>
@@ -2614,9 +2610,9 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
         }
       >
         <Text
-          allowFontScaling={false}
+          allowFontScaling={true}
           dynamicTypeRamp="headline"
-          maxFontSizeMultiplier={1.25}
+          maxFontSizeMultiplier={1.5}
           numberOfLines={1}
           style={
             [
@@ -2702,9 +2698,9 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
             </RNSVGGroup>
           </RNSVGSvgView>
           <Text
-            allowFontScaling={false}
+            allowFontScaling={true}
             dynamicTypeRamp="footnote"
-            maxFontSizeMultiplier={1.25}
+            maxFontSizeMultiplier={1.5}
             style={
               [
                 {},
@@ -2736,9 +2732,9 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
         }
       >
         <Text
-          allowFontScaling={false}
+          allowFontScaling={true}
           dynamicTypeRamp="headline"
-          maxFontSizeMultiplier={1.25}
+          maxFontSizeMultiplier={1.5}
           style={
             [
               {},
@@ -2797,12 +2793,14 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
             style={
               [
                 {
-                  "borderRadius": 12,
                   "borderWidth": 2,
-                  "height": 24,
                   "left": 0,
                   "position": "absolute",
                   "top": 0,
+                },
+                {
+                  "borderRadius": 12,
+                  "height": 24,
                   "width": 24,
                 },
                 {
@@ -2815,11 +2813,13 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
             style={
               [
                 {
-                  "borderRadius": 12,
-                  "height": 24,
                   "left": 0,
                   "position": "absolute",
                   "top": 0,
+                },
+                {
+                  "borderRadius": 12,
+                  "height": 24,
                   "width": 24,
                 },
                 {
@@ -2839,9 +2839,10 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
           <View>
             <RNSVGSvgView
               align="xMidYMid"
-              bbHeight="100%"
-              bbWidth="100%"
+              bbHeight={24}
+              bbWidth={24}
               focusable={false}
+              height={24}
               meetOrSlice={0}
               minX={0}
               minY={0}
@@ -2853,13 +2854,14 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
                   },
                   {
                     "flex": 0,
-                    "height": "100%",
-                    "width": "100%",
+                    "height": 24,
+                    "width": 24,
                   },
                 ]
               }
               vbHeight={24}
               vbWidth={24}
+              width={24}
             >
               <RNSVGGroup
                 fill={
@@ -2981,9 +2983,9 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
         }
       >
         <Text
-          allowFontScaling={false}
+          allowFontScaling={true}
           dynamicTypeRamp="headline"
-          maxFontSizeMultiplier={1.25}
+          maxFontSizeMultiplier={1.5}
           numberOfLines={1}
           style={
             [
@@ -3015,9 +3017,9 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
         }
       >
         <Text
-          allowFontScaling={false}
+          allowFontScaling={true}
           dynamicTypeRamp="headline"
-          maxFontSizeMultiplier={1.25}
+          maxFontSizeMultiplier={1.5}
           style={
             [
               {},
@@ -3076,12 +3078,14 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
             style={
               [
                 {
-                  "borderRadius": 12,
                   "borderWidth": 2,
-                  "height": 24,
                   "left": 0,
                   "position": "absolute",
                   "top": 0,
+                },
+                {
+                  "borderRadius": 12,
+                  "height": 24,
                   "width": 24,
                 },
                 {
@@ -3094,11 +3098,13 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
             style={
               [
                 {
-                  "borderRadius": 12,
-                  "height": 24,
                   "left": 0,
                   "position": "absolute",
                   "top": 0,
+                },
+                {
+                  "borderRadius": 12,
+                  "height": 24,
                   "width": 24,
                 },
                 {