@aws-amplify/ui-react-native 1.2.21 → 1.2.22

package/src/Authenticator/Defaults/VerifyUser/__tests__/__snapshots__/VerifyUser.spec.tsx.snap

@@ -11,7 +11,7 @@ Array [
         },
         Object {
           "fontSize": 24,
-          "fontWeight": "300",
+          "fontWeight": "500",
           "lineHeight": 36,
         },
         Object {
@@ -28,9 +28,9 @@ Array [
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -118,9 +118,9 @@ Array [
           style={
             Array [
               Object {
-                "fontSize": 14,
+                "fontSize": 16,
                 "fontWeight": "400",
-                "lineHeight": 21,
+                "lineHeight": 24,
               },
               Object {
                 "color": "hsl(210, 50%, 10%)",
@@ -185,9 +185,9 @@ Array [
           style={
             Array [
               Object {
-                "fontSize": 14,
+                "fontSize": 16,
                 "fontWeight": "400",
-                "lineHeight": 21,
+                "lineHeight": 24,
               },
               Object {
                 "color": "hsl(210, 50%, 10%)",
@@ -233,8 +233,7 @@ Array [
         },
         undefined,
         Object {
-          "marginHorizontal": 16,
-          "marginVertical": 12,
+          "margin": 12,
         },
       ]
     }
@@ -328,7 +327,7 @@ Array [
         },
         Object {
           "fontSize": 24,
-          "fontWeight": "300",
+          "fontWeight": "500",
           "lineHeight": 36,
         },
         Object {
@@ -345,9 +344,9 @@ Array [
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -435,9 +434,9 @@ Array [
           style={
             Array [
               Object {
-                "fontSize": 14,
+                "fontSize": 16,
                 "fontWeight": "400",
-                "lineHeight": 21,
+                "lineHeight": 24,
               },
               Object {
                 "color": "hsl(210, 50%, 10%)",
@@ -502,9 +501,9 @@ Array [
           style={
             Array [
               Object {
-                "fontSize": 14,
+                "fontSize": 16,
                 "fontWeight": "400",
-                "lineHeight": 21,
+                "lineHeight": 24,
               },
               Object {
                 "color": "hsl(210, 50%, 10%)",
@@ -609,8 +608,7 @@ Array [
         },
         undefined,
         Object {
-          "marginHorizontal": 16,
-          "marginVertical": 12,
+          "margin": 12,
         },
       ]
     }

package/src/Authenticator/common/DefaultContent/styles.ts

@@ -12,8 +12,7 @@ export const getDefaultStyle = ({
       paddingHorizontal: space.small,
     },
     buttonPrimary: {
-      marginHorizontal: space.medium,
-      marginVertical: space.small,
+      margin: space.small,
     },
     buttonPrimaryLabel: {}, // themed value only
     buttonSecondary: {

package/src/Authenticator/common/DefaultHeader/__tests__/__snapshots__/DefaultHeader.spec.tsx.snap

@@ -10,7 +10,7 @@ exports[`DefaultHeader renders as expected with children 1`] = `
       },
       Object {
         "fontSize": 24,
-        "fontWeight": "300",
+        "fontWeight": "500",
         "lineHeight": 36,
       },
       undefined,

package/src/Authenticator/common/FederatedProviderButton/__tests__/__snapshots__/FederatedProviderButton.spec.tsx.snap

@@ -72,9 +72,9 @@ exports[`FederatedProviderButton applies style props 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -163,9 +163,9 @@ exports[`FederatedProviderButton renders default button as expected 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",

package/src/Authenticator/common/FederatedProviderButtons/__tests__/__snapshots__/FederatedProviderButtons.spec.tsx.snap

@@ -79,9 +79,9 @@ exports[`FederatedProviderButtons renders as expected 1`] = `
       style={
         Array [
           Object {
-            "fontSize": 14,
+            "fontSize": 16,
             "fontWeight": "400",
-            "lineHeight": 21,
+            "lineHeight": 24,
           },
           Object {
             "color": "hsl(210, 50%, 10%)",
@@ -127,9 +127,9 @@ exports[`FederatedProviderButtons renders as expected 1`] = `
       style={
         Array [
           Object {
-            "fontSize": 14,
+            "fontSize": 16,
             "fontWeight": "400",
-            "lineHeight": 21,
+            "lineHeight": 24,
           },
           Object {
             "color": "hsl(210, 50%, 10%)",

package/src/primitives/Checkbox/__tests__/__snapshots__/Checkbox.spec.tsx.snap

@@ -51,9 +51,9 @@ exports[`Checkbox applies label position prop 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -120,9 +120,9 @@ exports[`Checkbox applies theme and style props 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -193,9 +193,9 @@ exports[`Checkbox renders as expected when disabled 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -260,9 +260,9 @@ exports[`Checkbox renders as expected when passing a number to the size prop 1`]
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -327,9 +327,9 @@ exports[`Checkbox renders as expected when selected is false 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -394,9 +394,9 @@ exports[`Checkbox renders as expected when selected is true 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -461,9 +461,9 @@ exports[`Checkbox renders as expected with custom accessibilityRole 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",

package/src/primitives/Divider/__tests__/__snapshots__/Divider.spec.tsx.snap

@@ -32,9 +32,9 @@ exports[`Divider applies theme and style props 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -101,9 +101,9 @@ exports[`Divider renders as expected with label 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",

package/src/primitives/Heading/__tests__/__snapshots__/Heading.spec.tsx.snap

@@ -10,7 +10,7 @@ exports[`Heading applies theme and style props 1`] = `
       },
       Object {
         "fontSize": 14,
-        "fontWeight": "900",
+        "fontWeight": "700",
         "lineHeight": 21,
       },
       Object {
@@ -33,7 +33,7 @@ exports[`Heading renders a level 1 Heading as expected 1`] = `
       },
       Object {
         "fontSize": 40,
-        "fontWeight": "100",
+        "fontWeight": "300",
         "lineHeight": 60,
       },
       undefined,
@@ -54,7 +54,7 @@ exports[`Heading renders a level 2 Heading as expected 1`] = `
       },
       Object {
         "fontSize": 32,
-        "fontWeight": "200",
+        "fontWeight": "400",
         "lineHeight": 48,
       },
       undefined,
@@ -75,7 +75,7 @@ exports[`Heading renders a level 3 Heading as expected 1`] = `
       },
       Object {
         "fontSize": 24,
-        "fontWeight": "300",
+        "fontWeight": "500",
         "lineHeight": 36,
       },
       undefined,
@@ -117,7 +117,7 @@ exports[`Heading renders a level 5 Heading as expected 1`] = `
       },
       Object {
         "fontSize": 16,
-        "fontWeight": "700",
+        "fontWeight": "600",
         "lineHeight": 24,
       },
       undefined,
@@ -138,7 +138,7 @@ exports[`Heading renders a level 6 Heading as expected 1`] = `
       },
       Object {
         "fontSize": 14,
-        "fontWeight": "900",
+        "fontWeight": "700",
         "lineHeight": 21,
       },
       undefined,
@@ -159,7 +159,7 @@ exports[`Heading renders a level 6 Heading by default 1`] = `
       },
       Object {
         "fontSize": 14,
-        "fontWeight": "900",
+        "fontWeight": "700",
         "lineHeight": 21,
       },
       undefined,

package/src/primitives/Heading/styles.ts

@@ -17,19 +17,19 @@ export const getThemedStyles = (theme: StrictTheme): HeadingStyles => {
     },
     1: {
       fontSize: fontSizes.xxxl,
-      fontWeight: fontWeights.hairline,
+      fontWeight: fontWeights.light,
       lineHeight: getLineHeight(fontSizes.xxxl),
       ...components?.heading?.[1],
     },
     2: {
       fontSize: fontSizes.xxl,
-      fontWeight: fontWeights.thin,
+      fontWeight: fontWeights.normal,
       lineHeight: getLineHeight(fontSizes.xxl),
       ...components?.heading?.[2],
     },
     3: {
       fontSize: fontSizes.xl,
-      fontWeight: fontWeights.light,
+      fontWeight: fontWeights.medium,
       lineHeight: getLineHeight(fontSizes.xl),
       ...components?.heading?.[3],
     },
@@ -41,13 +41,13 @@ export const getThemedStyles = (theme: StrictTheme): HeadingStyles => {
     },
     5: {
       fontSize: fontSizes.medium,
-      fontWeight: fontWeights.bold,
+      fontWeight: fontWeights.semibold,
       lineHeight: getLineHeight(fontSizes.medium),
       ...components?.heading?.[5],
     },
     6: {
       fontSize: fontSizes.small,
-      fontWeight: fontWeights.black,
+      fontWeight: fontWeights.bold,
       lineHeight: getLineHeight(fontSizes.small),
       ...components?.heading?.[6],
     },

package/src/primitives/Label/__tests__/__snapshots__/Label.spec.tsx.snap

@@ -6,9 +6,9 @@ exports[`Label applies accessibility role 1`] = `
   style={
     Array [
       Object {
-        "fontSize": 14,
+        "fontSize": 16,
         "fontWeight": "400",
-        "lineHeight": 21,
+        "lineHeight": 24,
       },
       Object {
         "color": "hsl(210, 50%, 10%)",
@@ -28,9 +28,9 @@ exports[`Label renders a default Label 1`] = `
   style={
     Array [
       Object {
-        "fontSize": 14,
+        "fontSize": 16,
         "fontWeight": "400",
-        "lineHeight": 21,
+        "lineHeight": 24,
       },
       Object {
         "color": "hsl(210, 50%, 10%)",
@@ -50,9 +50,9 @@ exports[`Label should apply theme and style props 1`] = `
   style={
     Array [
       Object {
-        "fontSize": 14,
+        "fontSize": 16,
         "fontWeight": "400",
-        "lineHeight": 21,
+        "lineHeight": 24,
       },
       Object {
         "color": "hsl(210, 50%, 10%)",
@@ -74,9 +74,9 @@ exports[`Label should apply variant styles 1`] = `
   style={
     Array [
       Object {
-        "fontSize": 14,
+        "fontSize": 16,
         "fontWeight": "400",
-        "lineHeight": 21,
+        "lineHeight": 24,
       },
       Object {
         "color": "hsl(130, 27%, 29%)",

package/src/primitives/Label/styles.ts

@@ -12,9 +12,9 @@ export const getThemedStyles = (theme: StrictTheme): LabelStyles => {
 
   return StyleSheet.create({
     text: {
-      fontSize: fontSizes.small,
+      fontSize: fontSizes.medium,
       fontWeight: fontWeights.normal,
-      lineHeight: getLineHeight(fontSizes.small),
+      lineHeight: getLineHeight(fontSizes.medium),
       ...components?.label?.text,
     },
     primary: {

package/src/primitives/PasswordField/__tests__/__snapshots__/PasswordField.spec.tsx.snap

@@ -6,6 +6,7 @@ exports[`PasswordField applies theme and style props 1`] = `
     Array [
       Object {
         "alignItems": "flex-start",
+        "marginBottom": 8,
       },
       Array [
         Object {},
@@ -23,9 +24,9 @@ exports[`PasswordField applies theme and style props 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -33,8 +34,7 @@ exports[`PasswordField applies theme and style props 1`] = `
         Array [
           Object {
             "color": "hsl(210, 25%, 25%)",
-            "lineHeight": 21,
-            "padding": 4,
+            "paddingVertical": 8,
           },
           undefined,
         ],
@@ -74,6 +74,7 @@ exports[`PasswordField applies theme and style props 1`] = `
             "color": "hsl(210, 50%, 10%)",
             "flexGrow": 1,
             "fontSize": 16,
+            "paddingHorizontal": 4,
             "paddingVertical": 12,
           },
           undefined,
@@ -141,6 +142,7 @@ exports[`PasswordField renders as expected 1`] = `
     Array [
       Object {
         "alignItems": "flex-start",
+        "marginBottom": 8,
       },
       Array [
         Object {},
@@ -156,9 +158,9 @@ exports[`PasswordField renders as expected 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -166,8 +168,7 @@ exports[`PasswordField renders as expected 1`] = `
         Array [
           Object {
             "color": "hsl(210, 25%, 25%)",
-            "lineHeight": 21,
-            "padding": 4,
+            "paddingVertical": 8,
           },
           undefined,
         ],
@@ -207,6 +208,7 @@ exports[`PasswordField renders as expected 1`] = `
             "color": "hsl(210, 50%, 10%)",
             "flexGrow": 1,
             "fontSize": 16,
+            "paddingHorizontal": 4,
             "paddingVertical": 12,
           },
           undefined,
@@ -272,6 +274,7 @@ exports[`PasswordField renders as expected when disabled 1`] = `
     Array [
       Object {
         "alignItems": "flex-start",
+        "marginBottom": 8,
       },
       Array [
         Object {},
@@ -287,9 +290,9 @@ exports[`PasswordField renders as expected when disabled 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -297,8 +300,7 @@ exports[`PasswordField renders as expected when disabled 1`] = `
         Array [
           Object {
             "color": "hsl(210, 25%, 25%)",
-            "lineHeight": 21,
-            "padding": 4,
+            "paddingVertical": 8,
           },
           undefined,
         ],
@@ -339,6 +341,7 @@ exports[`PasswordField renders as expected when disabled 1`] = `
             "color": "hsl(210, 50%, 10%)",
             "flexGrow": 1,
             "fontSize": 16,
+            "paddingHorizontal": 4,
             "paddingVertical": 12,
           },
           undefined,
@@ -411,6 +414,7 @@ exports[`PasswordField should be able to hide show password icon 1`] = `
     Array [
       Object {
         "alignItems": "flex-start",
+        "marginBottom": 8,
       },
       Array [
         Object {},
@@ -426,9 +430,9 @@ exports[`PasswordField should be able to hide show password icon 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -436,8 +440,7 @@ exports[`PasswordField should be able to hide show password icon 1`] = `
         Array [
           Object {
             "color": "hsl(210, 25%, 25%)",
-            "lineHeight": 21,
-            "padding": 4,
+            "paddingVertical": 8,
           },
           undefined,
         ],
@@ -477,6 +480,7 @@ exports[`PasswordField should be able to hide show password icon 1`] = `
             "color": "hsl(210, 50%, 10%)",
             "flexGrow": 1,
             "fontSize": 16,
+            "paddingHorizontal": 4,
             "paddingVertical": 12,
           },
           undefined,
@@ -494,6 +498,7 @@ exports[`PasswordField should be able to obscure text programmatically 1`] = `
     Array [
       Object {
         "alignItems": "flex-start",
+        "marginBottom": 8,
       },
       Array [
         Object {},
@@ -509,9 +514,9 @@ exports[`PasswordField should be able to obscure text programmatically 1`] = `
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -519,8 +524,7 @@ exports[`PasswordField should be able to obscure text programmatically 1`] = `
         Array [
           Object {
             "color": "hsl(210, 25%, 25%)",
-            "lineHeight": 21,
-            "padding": 4,
+            "paddingVertical": 8,
           },
           undefined,
         ],
@@ -560,6 +564,7 @@ exports[`PasswordField should be able to obscure text programmatically 1`] = `
             "color": "hsl(210, 50%, 10%)",
             "flexGrow": 1,
             "fontSize": 16,
+            "paddingHorizontal": 4,
             "paddingVertical": 12,
           },
           undefined,

package/src/primitives/PhoneNumberField/__tests__/__snapshots__/PhoneNumberField.spec.tsx.snap

@@ -6,6 +6,7 @@ exports[`PhoneNumberField applies theming 1`] = `
     Array [
       Object {
         "alignItems": "flex-start",
+        "marginBottom": 8,
       },
       Array [
         Object {},
@@ -46,6 +47,7 @@ exports[`PhoneNumberField applies theming 1`] = `
             "color": "hsl(210, 50%, 10%)",
             "flexGrow": 1,
             "fontSize": 16,
+            "paddingHorizontal": 4,
             "paddingVertical": 12,
           },
           Array [
@@ -66,6 +68,7 @@ exports[`PhoneNumberField renders as expected 1`] = `
     Array [
       Object {
         "alignItems": "flex-start",
+        "marginBottom": 8,
       },
       Array [
         Object {},
@@ -106,6 +109,7 @@ exports[`PhoneNumberField renders as expected 1`] = `
             "color": "hsl(210, 50%, 10%)",
             "flexGrow": 1,
             "fontSize": 16,
+            "paddingHorizontal": 4,
             "paddingVertical": 12,
           },
           Array [
@@ -126,6 +130,7 @@ exports[`PhoneNumberField renders as expected when disabled 1`] = `
     Array [
       Object {
         "alignItems": "flex-start",
+        "marginBottom": 8,
       },
       Array [
         Object {},
@@ -167,6 +172,7 @@ exports[`PhoneNumberField renders as expected when disabled 1`] = `
             "color": "hsl(210, 50%, 10%)",
             "flexGrow": 1,
             "fontSize": 16,
+            "paddingHorizontal": 4,
             "paddingVertical": 12,
           },
           Array [