@hero-design/rn 9.0.0-0 → 9.0.0-alpha.0

package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap

@@ -1,954 +1,1152 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Label renders correctly with themeState default 1`] = `
-<Text
-  allowFontScaling={false}
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "color": "#001f23",
-          "fontSize": 12,
-          "lineHeight": 12,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeState="default"
-  themeTypeface="neutral"
->
-  Label
-</Text>
-`;
-
-exports[`Label renders correctly with themeState disabled 1`] = `
-<Text
-  allowFontScaling={false}
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "color": "#bfc1c5",
-          "fontSize": 12,
-          "lineHeight": 12,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeState="disabled"
-  themeTypeface="neutral"
->
-  Label
-</Text>
-`;
-
-exports[`Label renders correctly with themeState error 1`] = `
-<Text
-  allowFontScaling={false}
+exports[`LabelInsideTextInput renders correctly with themeState default 1`] = `
+<View
   style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "color": "#001f23",
-          "fontSize": 12,
-          "lineHeight": 12,
-        },
-        undefined,
-      ],
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeState="error"
-  themeTypeface="neutral"
 >
-  Label
-</Text>
-`;
-
-exports[`Label renders correctly with themeState filled 1`] = `
-<Text
-  allowFontScaling={false}
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
           "color": "#001f23",
-          "fontSize": 12,
-          "lineHeight": 12,
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 16,
+          "letterSpacing": 0.48,
+          "lineHeight": 24,
         },
-        undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeState="filled"
-  themeTypeface="neutral"
->
-  Label
-</Text>
-`;
-
-exports[`Label renders correctly with themeState readonly 1`] = `
-<Text
-  allowFontScaling={false}
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "color": "#808f91",
-          "fontSize": 12,
-          "lineHeight": 12,
+        [
+          {
+            "alignContent": "center",
+            "alignItems": "center",
+            "color": "#001f23",
+            "marginTop": -2,
+            "textAlignVertical": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="body"
+    themeState="default"
+    themeTypeface="neutral"
+    themeVariant="regular"
+  >
+    Label
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
         undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeState="readonly"
-  themeTypeface="neutral"
->
-  Label
-</Text>
+      ]
+    }
+  />
+</View>
 `;
 
-exports[`LabelContainer renders correctly 1`] = `
+exports[`LabelInsideTextInput renders correctly with themeState disabled 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "backgroundColor": "#ffffff",
-        "flexDirection": "row",
-        "left": 16,
-        "paddingHorizontal": 4,
-        "position": "absolute",
-        "top": -4,
-        "zIndex": 1,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-/>
-`;
-
-exports[`LabelInsideTextInput renders correctly with themeState default 1`] = `
-<Text
-  allowFontScaling={false}
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "alignContent": "center",
-          "alignItems": "center",
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
           "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 16,
-          "marginTop": -2,
-          "textAlignVertical": "center",
+          "letterSpacing": 0.48,
+          "lineHeight": 24,
         },
-        undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeState="default"
-  themeTypeface="neutral"
->
-  Label
-</Text>
-`;
-
-exports[`LabelInsideTextInput renders correctly with themeState disabled 1`] = `
-<Text
-  allowFontScaling={false}
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "alignContent": "center",
-          "alignItems": "center",
-          "color": "#bfc1c5",
-          "fontSize": 16,
-          "marginTop": -2,
-          "textAlignVertical": "center",
+        [
+          {
+            "alignContent": "center",
+            "alignItems": "center",
+            "color": "#bfc1c5",
+            "marginTop": -2,
+            "textAlignVertical": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="body"
+    themeState="disabled"
+    themeTypeface="neutral"
+    themeVariant="regular"
+  >
+    Label
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
         undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeState="disabled"
-  themeTypeface="neutral"
->
-  Label
-</Text>
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`LabelInsideTextInput renders correctly with themeState error 1`] = `
-<Text
-  allowFontScaling={false}
+<View
   style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "alignContent": "center",
-          "alignItems": "center",
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
           "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 16,
-          "marginTop": -2,
-          "textAlignVertical": "center",
+          "letterSpacing": 0.48,
+          "lineHeight": 24,
+        },
+        [
+          {
+            "alignContent": "center",
+            "alignItems": "center",
+            "color": "#001f23",
+            "marginTop": -2,
+            "textAlignVertical": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="body"
+    themeState="error"
+    themeTypeface="neutral"
+    themeVariant="regular"
+  >
+    Label
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
         undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeState="error"
-  themeTypeface="neutral"
->
-  Label
-</Text>
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`LabelInsideTextInput renders correctly with themeState filled 1`] = `
-<Text
-  allowFontScaling={false}
+<View
   style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "alignContent": "center",
-          "alignItems": "center",
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
           "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 16,
-          "marginTop": -2,
-          "textAlignVertical": "center",
+          "letterSpacing": 0.48,
+          "lineHeight": 24,
+        },
+        [
+          {
+            "alignContent": "center",
+            "alignItems": "center",
+            "color": "#001f23",
+            "marginTop": -2,
+            "textAlignVertical": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="body"
+    themeState="filled"
+    themeTypeface="neutral"
+    themeVariant="regular"
+  >
+    Label
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
         undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeState="filled"
-  themeTypeface="neutral"
->
-  Label
-</Text>
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`LabelInsideTextInput renders correctly with themeState readonly 1`] = `
-<Text
-  allowFontScaling={false}
+<View
   style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "alignContent": "center",
-          "alignItems": "center",
-          "color": "#808f91",
-          "fontSize": 16,
-          "marginTop": -2,
-          "textAlignVertical": "center",
-        },
-        undefined,
-      ],
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeState="readonly"
-  themeTypeface="neutral"
 >
-  Label
-</Text>
-`;
-
-exports[`StyledAsteriskLabel renders correctly with themeState default 1`] = `
-<Text
-  allowFontScaling={false}
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "color": "#de350b",
-          "fontSize": 12,
-          "lineHeight": 12,
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 16,
+          "letterSpacing": 0.48,
+          "lineHeight": 24,
         },
-        undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeState="default"
-  themeTypeface="neutral"
->
-  *
-</Text>
-`;
-
-exports[`StyledAsteriskLabel renders correctly with themeState disabled 1`] = `
-<Text
-  allowFontScaling={false}
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "color": "#bfc1c5",
-          "fontSize": 12,
-          "lineHeight": 12,
+        [
+          {
+            "alignContent": "center",
+            "alignItems": "center",
+            "color": "#808f91",
+            "marginTop": -2,
+            "textAlignVertical": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="body"
+    themeState="readonly"
+    themeTypeface="neutral"
+    themeVariant="regular"
+  >
+    Label
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
         undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeState="disabled"
-  themeTypeface="neutral"
->
-  *
-</Text>
+      ]
+    }
+  />
+</View>
 `;
 
-exports[`StyledAsteriskLabel renders correctly with themeState error 1`] = `
-<Text
-  allowFontScaling={false}
+exports[`StyledBorderBackDrop renders correctly when focused 1`] = `
+<View
   style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "color": "#de350b",
-          "fontSize": 12,
-          "lineHeight": 12,
-        },
-        undefined,
-      ],
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeState="error"
-  themeTypeface="neutral"
 >
-  *
-</Text>
-`;
-
-exports[`StyledAsteriskLabel renders correctly with themeState filled 1`] = `
-<Text
-  allowFontScaling={false}
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "color": "#de350b",
-          "fontSize": 12,
-          "lineHeight": 12,
+  <View
+    style={
+      [
+        {
+          "borderColor": "#cb300a",
+          "borderRadius": 8,
+          "borderWidth": 2,
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
         undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeState="filled"
-  themeTypeface="neutral"
->
-  *
-</Text>
-`;
-
-exports[`StyledAsteriskLabel renders correctly with themeState readonly 1`] = `
-<Text
-  allowFontScaling={false}
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "color": "#808f91",
-          "fontSize": 12,
-          "lineHeight": 12,
+      ]
+    }
+    themeFocused={true}
+    themeState="error"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
         undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeState="readonly"
-  themeTypeface="neutral"
->
-  *
-</Text>
-`;
-
-exports[`StyledBorderBackDrop renders correctly when focused 1`] = `
-<View
-  style={
-    Array [
-      Object {
-        "borderColor": "#de350b",
-        "borderRadius": 8,
-        "borderWidth": 2,
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      },
-      undefined,
-    ]
-  }
-  themeFocused={true}
-  themeState="error"
-/>
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledBorderBackDrop renders correctly with themeState default 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "borderColor": "#001f23",
-        "borderRadius": 8,
-        "borderWidth": 1,
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeFocused={false}
-  themeState="default"
-/>
+>
+  <View
+    style={
+      [
+        {
+          "borderColor": "#001f23",
+          "borderRadius": 8,
+          "borderWidth": 1,
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+    themeFocused={false}
+    themeState="default"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledBorderBackDrop renders correctly with themeState disabled 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "borderColor": "#bfc1c5",
-        "borderRadius": 8,
-        "borderWidth": 1,
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeFocused={false}
-  themeState="disabled"
-/>
+>
+  <View
+    style={
+      [
+        {
+          "borderColor": "#bfc1c5",
+          "borderRadius": 8,
+          "borderWidth": 1,
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+    themeFocused={false}
+    themeState="disabled"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledBorderBackDrop renders correctly with themeState error 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "borderColor": "#de350b",
-        "borderRadius": 8,
-        "borderWidth": 1,
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeFocused={false}
-  themeState="error"
-/>
+>
+  <View
+    style={
+      [
+        {
+          "borderColor": "#cb300a",
+          "borderRadius": 8,
+          "borderWidth": 1,
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+    themeFocused={false}
+    themeState="error"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledBorderBackDrop renders correctly with themeState filled 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "borderColor": "#001f23",
-        "borderRadius": 8,
-        "borderWidth": 1,
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeFocused={false}
-  themeState="filled"
-/>
+>
+  <View
+    style={
+      [
+        {
+          "borderColor": "#001f23",
+          "borderRadius": 8,
+          "borderWidth": 1,
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+    themeFocused={false}
+    themeState="filled"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledBorderBackDrop renders correctly with themeState readonly 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "borderColor": "#808f91",
-        "borderRadius": 8,
-        "borderWidth": 1,
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeFocused={false}
-  themeState="readonly"
-/>
+>
+  <View
+    style={
+      [
+        {
+          "borderColor": "#808f91",
+          "borderRadius": 8,
+          "borderWidth": 1,
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+    themeFocused={false}
+    themeState="readonly"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledErrorMessage renders correctly 1`] = `
-<Text
-  allowFontScaling={false}
+<View
   style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "color": "#de350b",
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 12,
-          "marginLeft": 4,
+          "letterSpacing": 0.36,
+          "lineHeight": 16,
+        },
+        [
+          {
+            "color": "#cb300a",
+            "marginLeft": 4,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    must not exceed character limit
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
         undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeTypeface="neutral"
->
-  must not exceed character limit
-</Text>
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledErrorMessageContainer renders correctly 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "flex": 1,
-        "flexDirection": "row",
-        "flexGrow": 4,
-        "marginRight": 4,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-/>
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "flexGrow": 4,
+          "marginRight": 4,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledHelperText renders correctly 1`] = `
-<Text
-  allowFontScaling={false}
+<View
   style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 24,
-          "lineHeight": 32,
-          "marginBottom": 24,
-          "marginRight": 24,
-          "textAlign": "right",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 12,
+          "letterSpacing": 0.36,
+          "lineHeight": 16,
         },
         undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeTypeface="neutral"
->
-  helper text
-</Text>
+      ]
+    }
+    themeFontWeight="regular"
+    themeIntent="body"
+  >
+    helper text
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledMaxLengthMessage renders correctly with themeState default 1`] = `
-<Text
-  allowFontScaling={false}
+<View
   style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "alignSelf": "flex-end",
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
           "color": "#001f23",
-          "flex": 1,
-          "flexGrow": 1,
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 12,
-          "marginRight": 4,
-          "textAlign": "right",
+          "letterSpacing": 0.36,
+          "lineHeight": 16,
+        },
+        [
+          {
+            "color": "#001f23",
+            "flex": 1,
+            "flexGrow": 1,
+            "textAlign": "right",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeState="default"
+  >
+    100/255
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
         undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeState="default"
-  themeTypeface="neutral"
->
-  100/255
-</Text>
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledMaxLengthMessage renders correctly with themeState disabled 1`] = `
-<Text
-  allowFontScaling={false}
+<View
   style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "alignSelf": "flex-end",
-          "color": "#bfc1c5",
-          "flex": 1,
-          "flexGrow": 1,
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 12,
-          "marginRight": 4,
-          "textAlign": "right",
+          "letterSpacing": 0.36,
+          "lineHeight": 16,
+        },
+        [
+          {
+            "color": "#bfc1c5",
+            "flex": 1,
+            "flexGrow": 1,
+            "textAlign": "right",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeState="disabled"
+  >
+    100/255
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
         undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeState="disabled"
-  themeTypeface="neutral"
->
-  100/255
-</Text>
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledMaxLengthMessage renders correctly with themeState error 1`] = `
-<Text
-  allowFontScaling={false}
+<View
   style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "alignSelf": "flex-end",
-          "color": "#de350b",
-          "flex": 1,
-          "flexGrow": 1,
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 12,
-          "marginRight": 4,
-          "textAlign": "right",
+          "letterSpacing": 0.36,
+          "lineHeight": 16,
+        },
+        [
+          {
+            "color": "#cb300a",
+            "flex": 1,
+            "flexGrow": 1,
+            "textAlign": "right",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeState="error"
+  >
+    100/255
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
         undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeState="error"
-  themeTypeface="neutral"
->
-  100/255
-</Text>
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledMaxLengthMessage renders correctly with themeState filled 1`] = `
-<Text
-  allowFontScaling={false}
+<View
   style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "alignSelf": "flex-end",
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
           "color": "#001f23",
-          "flex": 1,
-          "flexGrow": 1,
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 12,
-          "marginRight": 4,
-          "textAlign": "right",
+          "letterSpacing": 0.36,
+          "lineHeight": 16,
+        },
+        [
+          {
+            "color": "#001f23",
+            "flex": 1,
+            "flexGrow": 1,
+            "textAlign": "right",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeState="filled"
+  >
+    100/255
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
         undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeState="filled"
-  themeTypeface="neutral"
->
-  100/255
-</Text>
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledMaxLengthMessage renders correctly with themeState readonly 1`] = `
-<Text
-  allowFontScaling={false}
+<View
   style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "alignSelf": "flex-end",
-          "color": "#808f91",
-          "flex": 1,
-          "flexGrow": 1,
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 12,
-          "marginRight": 4,
-          "textAlign": "right",
+          "letterSpacing": 0.36,
+          "lineHeight": 16,
+        },
+        [
+          {
+            "color": "#808f91",
+            "flex": 1,
+            "flexGrow": 1,
+            "textAlign": "right",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeState="readonly"
+  >
+    100/255
+  </Text>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
         },
         undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeState="readonly"
-  themeTypeface="neutral"
->
-  100/255
-</Text>
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledTextInput renders correctly with $themeState state 1`] = `
-<TextInput
+<View
   style={
-    Array [
-      Object {
-        "alignSelf": "stretch",
-        "flexGrow": 2,
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 16,
-        "height": undefined,
-        "marginHorizontal": 8,
-        "maxHeight": 144,
-        "paddingVertical": 0,
-        "textAlignVertical": "center",
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeVariant="text"
-/>
+>
+  <TextInput
+    style={
+      [
+        {
+          "alignSelf": "stretch",
+          "flexGrow": 2,
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 16,
+          "height": undefined,
+          "marginHorizontal": 8,
+          "maxHeight": 144,
+          "paddingVertical": 0,
+          "textAlignVertical": "center",
+        },
+        undefined,
+      ]
+    }
+    themeVariant="text"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`StyledTextInput renders correctly with $themeState state 2`] = `
-<TextInput
+<View
   style={
-    Array [
-      Object {
-        "alignSelf": "stretch",
-        "flexGrow": 2,
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 16,
-        "height": 144,
-        "marginHorizontal": 8,
-        "maxHeight": 144,
-        "paddingVertical": 0,
-        "textAlignVertical": "top",
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeVariant="textarea"
-/>
+>
+  <TextInput
+    style={
+      [
+        {
+          "alignSelf": "stretch",
+          "flexGrow": 2,
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 16,
+          "height": 144,
+          "marginHorizontal": 8,
+          "maxHeight": 144,
+          "paddingVertical": 0,
+          "textAlignVertical": "top",
+        },
+        undefined,
+      ]
+    }
+    themeVariant="textarea"
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;