diff --git a/packages/html-elements/README.md b/packages/html-elements/README.md
index 107ead6a38e58..17eedd85be1a2 100644
--- a/packages/html-elements/README.md
+++ b/packages/html-elements/README.md
@@ -50,6 +50,7 @@ Here is a list of all the currently supported elements and the web feature they
 | ----------------------------------- | :-----------------------------: |
 | [`<a />`][html-a]                   |          [`<A />`](#a)          |
 | [`<article />`][html-article]       |    [`<Article />`](#article)    |
+| [`<aside />`][html-aside]           |      [`<Aside />`](#aside)      |
 | [`<b />`][html-b]                   |          [`<B />`](#b)          |
 | [`<blockquote />`][html-blockquote] | [`<BlockQuote />`](#blockquote) |
 | [`<br />`][html-br]                 |         [`<BR />`](#br)         |
@@ -95,6 +96,8 @@ Here is a list of all the currently supported elements and the web feature they
 | [`<picture />`][html-picture]       |            ⏱ Pending            |
 | [`<figure />`][html-figure]         |            ⏱ Pending            |
 | [`<figcaption />`][html-figcaption] |            ⏱ Pending            |
+| [`<form />`][html-form]             |            ⏱ Pending            |
+| [`<label />`][html-label]           |            ⏱ Pending            |
 
 ## External
 
@@ -331,10 +334,23 @@ import { Article } from '@expo/html-elements';
 export default () => <Article />;
 ```
 
-| Platform | Output                                            |
-| -------- | ------------------------------------------------- |
-| Web      | `<article role="article" style="display:flex" />` |
-| Native   | `<View />`                                        |
+| Platform | Output                       |
+| -------- | ---------------------------- |
+| Web      | `<article role="article" />` |
+| Native   | `<View />`                   |
+
+### `<Aside/>`
+
+```tsx
+import { Aside } from '@expo/html-elements';
+
+export default () => <Aside />;
+```
+
+| Platform | Output                           |
+| -------- | -------------------------------- |
+| Web      | `<aside role="complementary" />` |
+| Native   | `<View />`                       |
 
 ### `<Footer/>`
 
@@ -346,16 +362,16 @@ import { Footer } from '@expo/html-elements';
 export default () => <Footer />;
 ```
 
-| Platform | Output                            |
-| -------- | --------------------------------- |
-| Web      | `<footer style="display:flex" />` |
-| Native   | `<View />`                        |
+| Platform | Output                          |
+| -------- | ------------------------------- |
+| Web      | `<footer role="contentinfo" />` |
+| Native   | `<View />`                      |
 
 ## Text
 
-Wraps the primitive `Text` element on native and renders the expected HTML on web.
+Text elements currently use `Text` universally rendering either a `div` or `span` to emulate Yoga style properly.
 
-- Style is slightly modified to match web.
+- Style is modified to match web.
 - All font styles are reset.
 - All elements accept styles from `StyleSheet` API.
 
@@ -380,73 +396,65 @@ export default () => (
 
 Standard paragraph element.
 
-| Platform | Output                                                        |
-| -------- | ------------------------------------------------------------- |
-| Web      | `<p style={{ fontFamily: 'System' }} />`                      |
-| Native   | `<Text style={{ fontSize: '1em', marginVertical: '1em' }} />` |
+| Platform  | Output                                                        |
+| --------- | ------------------------------------------------------------- |
+| Universal | `<Text style={{ fontSize: '1em', marginVertical: '1em' }} />` |
 
 ### `<B/>`
 
 Bold text text.
 
-| Platform | Output                                    |
-| -------- | ----------------------------------------- |
-| Web      | `<b style={{ fontFamily: 'System' }} />`  |
-| Native   | `<Text style={{ fontWeight: 'bold' }} />` |
+| Platform  | Output                                    |
+| --------- | ----------------------------------------- |
+| Universal | `<Text style={{ fontWeight: 'bold' }} />` |
 
 ### `<Strong/>`
 
 Alternate bold text.
 
-| Platform | Output                                        |
-| -------- | --------------------------------------------- |
-| Web      | `<strong style={{ fontFamily: 'System' }} />` |
-| Native   | `<Text style={{ fontWeight: 'bold' }} />`     |
+| Platform  | Output                                    |
+| --------- | ----------------------------------------- |
+| Universal | `<Text style={{ fontWeight: 'bold' }} />` |
 
 ### `<S/>`
 
 Strike through text.
 
-| Platform | Output                                                    |
-| -------- | --------------------------------------------------------- |
-| Web      | `<s style={{ fontFamily: 'System' }} />`                  |
-| Native   | `<Text style={{ textDecorationLine: 'line-through' }} />` |
+| Platform  | Output                                                    |
+| --------- | --------------------------------------------------------- |
+| Universal | `<Text style={{ textDecorationLine: 'line-through' }} />` |
 
 ### `<Del/>`
 
 Alternate strike through text.
 
-| Platform | Output                                                    |
-| -------- | --------------------------------------------------------- |
-| Web      | `<del style={{ fontFamily: 'System' }} />`                |
-| Native   | `<Text style={{ textDecorationLine: 'line-through' }} />` |
+| Platform  | Output                                                    |
+| --------- | --------------------------------------------------------- |
+| Universal | `<Text style={{ textDecorationLine: 'line-through' }} />` |
 
 ### `<I/>`
 
 Italic text.
 
-| Platform | Output                                     |
-| -------- | ------------------------------------------ |
-| Web      | `<i style={{ fontFamily: 'System' }} />`   |
-| Native   | `<Text style={{ fontStyle: 'italic' }} />` |
+| Platform  | Output                                     |
+| --------- | ------------------------------------------ |
+| Universal | `<Text style={{ fontStyle: 'italic' }} />` |
 
 ### `<EM/>`
 
 Alternate italic text.
 
-| Platform | Output                                     |
-| -------- | ------------------------------------------ |
-| Web      | `<em style={{ fontFamily: 'System' }} />`  |
-| Native   | `<Text style={{ fontStyle: 'italic' }} />` |
+| Platform  | Output                                     |
+| --------- | ------------------------------------------ |
+| Universal | `<Text style={{ fontStyle: 'italic' }} />` |
 
 ### `<Small/>`
 
 Smaller than default text.
 
-| Platform | Output                                       |
-| -------- | -------------------------------------------- |
-| Web      | `<small style={{ fontFamily: 'System' }} />` |
-| Native   | `<Text style={{ fontSize: 10 }} />`          |
+| Platform  | Output                              |
+| --------- | ----------------------------------- |
+| Universal | `<Text style={{ fontSize: 10 }} />` |
 
 ### `<Code/>`
 
@@ -454,10 +462,9 @@ Inline code block.
 
 - [ ] Support lazy loading mono font on mobile.
 
-| Platform | Output                      |
-| -------- | --------------------------- |
-| Web      | `<code />`                  |
-| Native   | `<Text style={[Custom]} />` |
+| Platform  | Output                      |
+| --------- | --------------------------- |
+| Universal | `<Text style={[Custom]} />` |
 
 ### `<Pre/>`
 
@@ -479,48 +486,39 @@ body {
 
 - [ ] Support lazy loading mono font on mobile.
 
-| Platform | Output                                    |
-| -------- | ----------------------------------------- |
-| Web      | `<pre />`                                 |
-| Native   | `<Text style={[Custom]} />` \| `<View />` |
+| Platform  | Output                                    |
+| --------- | ----------------------------------------- |
+| Universal | `<Text style={[Custom]} />` \| `<View />` |
 
 ### `<Mark/>`
 
 Highlight text.
 
-| Platform | Output                                                           |
-| -------- | ---------------------------------------------------------------- |
-| Web      | `<mark />`                                                       |
-| Native   | `<Text style={{ backgroundColor: 'yellow', color: 'black' }} />` |
+| Platform  | Output                                                           |
+| --------- | ---------------------------------------------------------------- |
+| Universal | `<Text style={{ backgroundColor: 'yellow', color: 'black' }} />` |
 
 ### `<Q/>`
 
 Quoted text.
 
-| Platform | Output                                             |
-| -------- | -------------------------------------------------- |
-| Web      | `<q />`                                            |
-| Native   | `<Text style={[Custom]}>"{props.children}"</Text>` |
+| Platform  | Output                                             |
+| --------- | -------------------------------------------------- |
+| Universal | `<Text style={[Custom]}>"{props.children}"</Text>` |
 
 ### `<BlockQuote/>`
 
-Render a [`<blockquote />`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote) on web, and a `<View />` on native. This element doesn't accept text directly.
-
-| Platform | Output                      |
-| -------- | --------------------------- |
-| Web      | `<blockquote />`            |
-| Native   | `<View style={[Custom]} />` |
+| Platform  | Output                      |
+| --------- | --------------------------- |
+| Universal | `<View style={[Custom]} />` |
 
 ### `<Time/>`
 
-Renders a `<time />` element with reset styles on web, and a regular `<Text />` on native.
-
 - `dateTime` prop is supported on web and stripped on native.
 
-| Platform | Output                      |
-| -------- | --------------------------- |
-| Web      | `<time />`                  |
-| Native   | `<Text style={[Custom]} />` |
+| Platform  | Output                      |
+| --------- | --------------------------- |
+| Universal | `<Text style={[Custom]} />` |
 
 ## Lists
 
@@ -773,6 +771,7 @@ Contributions are very welcome! Please refer to guidelines described in the [con
 
 [html-a]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
 [html-article]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
+[html-aside]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside
 [html-b]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b
 [html-blockquote]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
 [html-br]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br
@@ -781,6 +780,7 @@ Contributions are very welcome! Please refer to guidelines described in the [con
 [html-del]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del
 [html-em]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em
 [html-footer]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer
+[html-form]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
 [html-h1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h1
 [html-h2]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h2
 [html-h3]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/h3
@@ -811,6 +811,7 @@ Contributions are very welcome! Please refer to guidelines described in the [con
 [html-tr]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
 [html-ul]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
 [html-li]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li
+[html-label]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
 [html-details]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
 [html-summary]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary
 [html-progress]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
diff --git a/packages/html-elements/build/Elements.d.ts b/packages/html-elements/build/Elements.d.ts
index b023b008cf145..8d181fbb06b3d 100644
--- a/packages/html-elements/build/Elements.d.ts
+++ b/packages/html-elements/build/Elements.d.ts
@@ -1,9 +1,5 @@
 export * from './elements/Headings';
 export * from './elements/Anchor';
-export * from './elements/Article';
-export * from './elements/Header';
-export * from './elements/Main';
-export * from './elements/Section';
 export * from './elements/Layout';
 export * from './elements/Text';
 export * from './elements/Rules';
diff --git a/packages/html-elements/build/Elements.js b/packages/html-elements/build/Elements.js
index cce16a2538d20..68a4a9a67a6e1 100644
--- a/packages/html-elements/build/Elements.js
+++ b/packages/html-elements/build/Elements.js
@@ -1,9 +1,5 @@
 export * from './elements/Headings';
 export * from './elements/Anchor';
-export * from './elements/Article';
-export * from './elements/Header';
-export * from './elements/Main';
-export * from './elements/Section';
 export * from './elements/Layout';
 export * from './elements/Text';
 export * from './elements/Rules';
diff --git a/packages/html-elements/build/Elements.js.map b/packages/html-elements/build/Elements.js.map
index c8395381fb3f2..7dc151b40df68 100644
--- a/packages/html-elements/build/Elements.js.map
+++ b/packages/html-elements/build/Elements.js.map
@@ -1 +1 @@
-{"version":3,"file":"Elements.js","sourceRoot":"","sources":["../src/Elements.tsx"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './elements/Headings';\nexport * from './elements/Anchor';\nexport * from './elements/Article';\nexport * from './elements/Header';\nexport * from './elements/Main';\nexport * from './elements/Section';\nexport * from './elements/Layout';\nexport * from './elements/Text';\nexport * from './elements/Rules';\nexport * from './elements/Table';\nexport * from './elements/Lists';\n"]}
\ No newline at end of file
+{"version":3,"file":"Elements.js","sourceRoot":"","sources":["../src/Elements.tsx"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './elements/Headings';\nexport * from './elements/Anchor';\nexport * from './elements/Layout';\nexport * from './elements/Text';\nexport * from './elements/Rules';\nexport * from './elements/Table';\nexport * from './elements/Lists';\n"]}
\ No newline at end of file
diff --git a/packages/html-elements/build/elements/Anchor.js b/packages/html-elements/build/elements/Anchor.js
index efbebde5d08c8..fb74683401cce 100644
--- a/packages/html-elements/build/elements/Anchor.js
+++ b/packages/html-elements/build/elements/Anchor.js
@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react';
-import { Linking, Platform } from 'react-native';
+import { StyleSheet, Linking, Platform } from 'react-native';
 import Text from '../primitives/Text';
+import { em } from '../css/units';
 export const A = forwardRef(({ href, target, ...props }, ref) => {
     const nativeProps = Platform.select({
         web: {
@@ -16,6 +17,12 @@ export const A = forwardRef(({ href, target, ...props }, ref) => {
             },
         },
     });
-    return <Text accessibilityRole="link" {...props} {...nativeProps} ref={ref}/>;
+    return (<Text accessibilityRole="link" {...props} style={[styles.a, props.style]} {...nativeProps} ref={ref}/>);
+});
+const styles = StyleSheet.create({
+    // @ts-ignore: string isn't supported
+    a: {
+        fontSize: em(1),
+    },
 });
 //# sourceMappingURL=Anchor.js.map
\ No newline at end of file
diff --git a/packages/html-elements/build/elements/Anchor.js.map b/packages/html-elements/build/elements/Anchor.js.map
index 6368a79c439e0..ef996960fd7c4 100644
--- a/packages/html-elements/build/elements/Anchor.js.map
+++ b/packages/html-elements/build/elements/Anchor.js.map
@@ -1 +1 @@
-{"version":3,"file":"Anchor.js","sourceRoot":"","sources":["../../src/elements/Anchor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEjD,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAGtC,MAAM,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,KAAK,EAAa,EAAE,GAAG,EAAE,EAAE;IACzE,MAAM,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAY;QAC7C,GAAG,EAAE;YACH,IAAI;YACJ,MAAM;SACP;QACD,OAAO,EAAE;YACP,OAAO,EAAE,KAAK,CAAC,EAAE;gBACf,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;gBACtC,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,IAAI,KAAK,SAAS,EAAE;oBAC/C,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;iBACvB;YACH,CAAC;SACF;KACF,CAAC,CAAC;IACH,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAG,CAAC;AACjF,CAAC,CAA6B,CAAC","sourcesContent":["import React, { ComponentType, forwardRef } from 'react';\nimport { Linking, Platform } from 'react-native';\n\nimport Text from '../primitives/Text';\nimport { LinkProps } from './Text.types';\n\nexport const A = forwardRef(({ href, target, ...props }: LinkProps, ref) => {\n  const nativeProps = Platform.select<LinkProps>({\n    web: {\n      href,\n      target,\n    },\n    default: {\n      onPress: event => {\n        props.onPress && props.onPress(event);\n        if (Platform.OS !== 'web' && href !== undefined) {\n          Linking.openURL(href);\n        }\n      },\n    },\n  });\n  return <Text accessibilityRole=\"link\" {...props} {...nativeProps} ref={ref} />;\n}) as ComponentType<LinkProps>;\n"]}
\ No newline at end of file
+{"version":3,"file":"Anchor.js","sourceRoot":"","sources":["../../src/elements/Anchor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAEtC,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC,MAAM,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,KAAK,EAAa,EAAE,GAAG,EAAE,EAAE;IACzE,MAAM,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAY;QAC7C,GAAG,EAAE;YACH,IAAI;YACJ,MAAM;SACP;QACD,OAAO,EAAE;YACP,OAAO,EAAE,KAAK,CAAC,EAAE;gBACf,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;gBACtC,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,IAAI,KAAK,SAAS,EAAE;oBAC/C,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;iBACvB;YACH,CAAC;SACF;KACF,CAAC,CAAC;IACH,OAAO,CACL,CAAC,IAAI,CACH,iBAAiB,CAAC,MAAM,CACxB,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAC/B,IAAI,WAAW,CAAC,CAChB,GAAG,CAAC,CAAC,GAAG,CAAC,EACT,CACH,CAAC;AACJ,CAAC,CAA6B,CAAC;AAE/B,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,qCAAqC;IACrC,CAAC,EAAE;QACD,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC;KAChB;CACF,CAAC,CAAC","sourcesContent":["import React, { ComponentType, forwardRef } from 'react';\nimport { StyleSheet, Linking, Platform } from 'react-native';\n\nimport Text from '../primitives/Text';\nimport { LinkProps } from './Text.types';\nimport { em } from '../css/units';\n\nexport const A = forwardRef(({ href, target, ...props }: LinkProps, ref) => {\n  const nativeProps = Platform.select<LinkProps>({\n    web: {\n      href,\n      target,\n    },\n    default: {\n      onPress: event => {\n        props.onPress && props.onPress(event);\n        if (Platform.OS !== 'web' && href !== undefined) {\n          Linking.openURL(href);\n        }\n      },\n    },\n  });\n  return (\n    <Text\n      accessibilityRole=\"link\"\n      {...props}\n      style={[styles.a, props.style]}\n      {...nativeProps}\n      ref={ref}\n    />\n  );\n}) as ComponentType<LinkProps>;\n\nconst styles = StyleSheet.create({\n  // @ts-ignore: string isn't supported\n  a: {\n    fontSize: em(1),\n  },\n});\n"]}
\ No newline at end of file
diff --git a/packages/html-elements/build/elements/Article.d.ts b/packages/html-elements/build/elements/Article.d.ts
deleted file mode 100644
index 2c929a9a93024..0000000000000
--- a/packages/html-elements/build/elements/Article.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import React from 'react';
-import { ViewProps } from '../primitives/View';
-export declare const Article: React.ComponentType<ViewProps>;
diff --git a/packages/html-elements/build/elements/Article.js b/packages/html-elements/build/elements/Article.js
deleted file mode 100644
index 524c882c199ff..0000000000000
--- a/packages/html-elements/build/elements/Article.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Platform } from 'react-native';
-import View from '../primitives/View';
-const nativeProps = Platform.select({
-    web: {
-        accessibilityRole: 'article',
-    },
-    default: {},
-});
-export const Article = forwardRef((props, ref) => {
-    return <View {...props} {...nativeProps} ref={ref}/>;
-});
-//# sourceMappingURL=Article.js.map
\ No newline at end of file
diff --git a/packages/html-elements/build/elements/Article.js.map b/packages/html-elements/build/elements/Article.js.map
deleted file mode 100644
index 20321530f1275..0000000000000
--- a/packages/html-elements/build/elements/Article.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"Article.js","sourceRoot":"","sources":["../../src/elements/Article.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,IAAmB,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,GAAc,QAAQ,CAAC,MAAM,CAAC;IAC7C,GAAG,EAAE;QACH,iBAAiB,EAAE,SAAS;KAC7B;IACD,OAAO,EAAE,EAAE;CACZ,CAAC,CAAC;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAAC,CAAC,KAAgB,EAAE,GAAG,EAAE,EAAE;IAC1D,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAG,CAAC;AACxD,CAAC,CAA6B,CAAC","sourcesContent":["import React, { ComponentType, forwardRef } from 'react';\nimport { Platform } from 'react-native';\nimport View, { ViewProps } from '../primitives/View';\n\nconst nativeProps: ViewProps = Platform.select({\n  web: {\n    accessibilityRole: 'article',\n  },\n  default: {},\n});\nexport const Article = forwardRef((props: ViewProps, ref) => {\n  return <View {...props} {...nativeProps} ref={ref} />;\n}) as ComponentType<ViewProps>;\n"]}
\ No newline at end of file
diff --git a/packages/html-elements/build/elements/Header.d.ts b/packages/html-elements/build/elements/Header.d.ts
deleted file mode 100644
index 8b12be73b1301..0000000000000
--- a/packages/html-elements/build/elements/Header.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import React from 'react';
-import { ViewProps } from '../primitives/View';
-export declare const Header: React.ComponentType<ViewProps>;
diff --git a/packages/html-elements/build/elements/Header.js b/packages/html-elements/build/elements/Header.js
deleted file mode 100644
index 38541043edd95..0000000000000
--- a/packages/html-elements/build/elements/Header.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Platform } from 'react-native';
-import View from '../primitives/View';
-const nativeProps = Platform.select({
-    web: {
-        accessibilityRole: 'banner',
-    },
-    default: {
-        accessibilityRole: 'header',
-    },
-});
-export const Header = forwardRef((props, ref) => {
-    return <View {...nativeProps} {...props} ref={ref}/>;
-});
-//# sourceMappingURL=Header.js.map
\ No newline at end of file
diff --git a/packages/html-elements/build/elements/Header.js.map b/packages/html-elements/build/elements/Header.js.map
deleted file mode 100644
index 6ee4648b7f902..0000000000000
--- a/packages/html-elements/build/elements/Header.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/elements/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,IAAmB,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,GAAc,QAAQ,CAAC,MAAM,CAAC;IAC7C,GAAG,EAAE;QACH,iBAAiB,EAAE,QAAQ;KAC5B;IACD,OAAO,EAAE;QACP,iBAAiB,EAAE,QAAQ;KAC5B;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAC,CAAC,KAAgB,EAAE,GAAG,EAAE,EAAE;IACzD,OAAO,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAG,CAAC;AACxD,CAAC,CAA6B,CAAC","sourcesContent":["import React, { ComponentType, forwardRef } from 'react';\nimport { Platform } from 'react-native';\nimport View, { ViewProps } from '../primitives/View';\n\nconst nativeProps: ViewProps = Platform.select({\n  web: {\n    accessibilityRole: 'banner',\n  },\n  default: {\n    accessibilityRole: 'header',\n  },\n});\n\nexport const Header = forwardRef((props: ViewProps, ref) => {\n  return <View {...nativeProps} {...props} ref={ref} />;\n}) as ComponentType<ViewProps>;\n"]}
\ No newline at end of file
diff --git a/packages/html-elements/build/elements/Layout.d.ts b/packages/html-elements/build/elements/Layout.d.ts
index e2772a0ffaed4..661c4310b309f 100644
--- a/packages/html-elements/build/elements/Layout.d.ts
+++ b/packages/html-elements/build/elements/Layout.d.ts
@@ -1,2 +1,9 @@
-export { default as Footer } from '../primitives/View';
-export { default as Nav } from '../primitives/View';
+import React from 'react';
+import { ViewProps } from '../primitives/View';
+export declare const Nav: React.ComponentType<ViewProps>;
+export declare const Footer: React.ComponentType<ViewProps>;
+export declare const Aside: React.ComponentType<ViewProps>;
+export declare const Header: React.ComponentType<ViewProps>;
+export declare const Main: React.ComponentType<ViewProps>;
+export declare const Article: React.ComponentType<ViewProps>;
+export declare const Section: React.ComponentType<ViewProps>;
diff --git a/packages/html-elements/build/elements/Layout.js b/packages/html-elements/build/elements/Layout.js
index 0992b3007c0ba..dd2593fd5b2d8 100644
--- a/packages/html-elements/build/elements/Layout.js
+++ b/packages/html-elements/build/elements/Layout.js
@@ -1,3 +1,45 @@
-export { default as Footer } from '../primitives/View';
-export { default as Nav } from '../primitives/View';
+import React, { forwardRef } from 'react';
+import { Platform } from 'react-native';
+import View from '../primitives/View';
+function createView(nativeProps = {}) {
+    return forwardRef((props, ref) => {
+        return <View {...nativeProps} {...props} ref={ref}/>;
+    });
+}
+export const Nav = createView(Platform.select({
+    web: {
+        accessibilityRole: 'navigation',
+    },
+}));
+export const Footer = createView(Platform.select({
+    web: {
+        accessibilityRole: 'contentinfo',
+    },
+}));
+export const Aside = createView(Platform.select({
+    web: {
+        accessibilityRole: 'complementary',
+    },
+}));
+export const Header = createView(Platform.select({
+    web: {
+        accessibilityRole: 'banner',
+    },
+    default: {
+        accessibilityRole: 'header',
+    },
+}));
+export const Main = createView(Platform.select({
+    web: {
+        accessibilityRole: 'main',
+    },
+}));
+export const Article = createView(Platform.select({
+    web: {
+        accessibilityRole: 'article',
+    },
+}));
+export const Section = createView({
+    accessibilityRole: 'summary',
+});
 //# sourceMappingURL=Layout.js.map
\ No newline at end of file
diff --git a/packages/html-elements/build/elements/Layout.js.map b/packages/html-elements/build/elements/Layout.js.map
index 38dad0190e16e..ad9ce0587cda8 100644
--- a/packages/html-elements/build/elements/Layout.js.map
+++ b/packages/html-elements/build/elements/Layout.js.map
@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../src/elements/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { default as Footer } from '../primitives/View';\nexport { default as Nav } from '../primitives/View';\n"]}
\ No newline at end of file
+{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../src/elements/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,IAAmB,MAAM,oBAAoB,CAAC;AAErD,SAAS,UAAU,CAAC,cAAyB,EAAE;IAC7C,OAAO,UAAU,CAAC,CAAC,KAAgB,EAAE,GAAG,EAAE,EAAE;QAC1C,OAAO,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAG,CAAC;IACxD,CAAC,CAA6B,CAAC;AACjC,CAAC;AAED,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAC3B,QAAQ,CAAC,MAAM,CAAC;IACd,GAAG,EAAE;QACH,iBAAiB,EAAE,YAAY;KAChC;CACF,CAAC,CACH,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,QAAQ,CAAC,MAAM,CAAC;IACd,GAAG,EAAE;QACH,iBAAiB,EAAE,aAAa;KACjC;CACF,CAAC,CACH,CAAC;AACF,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,QAAQ,CAAC,MAAM,CAAC;IACd,GAAG,EAAE;QACH,iBAAiB,EAAE,eAAe;KACnC;CACF,CAAC,CACH,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,QAAQ,CAAC,MAAM,CAAC;IACd,GAAG,EAAE;QACH,iBAAiB,EAAE,QAAQ;KAC5B;IACD,OAAO,EAAE;QACP,iBAAiB,EAAE,QAAQ;KAC5B;CACF,CAAC,CACH,CAAC;AACF,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,QAAQ,CAAC,MAAM,CAAC;IACd,GAAG,EAAE;QACH,iBAAiB,EAAE,MAAM;KAC1B;CACF,CAAC,CACH,CAAC;AACF,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAC/B,QAAQ,CAAC,MAAM,CAAC;IACd,GAAG,EAAE;QACH,iBAAiB,EAAE,SAAS;KAC7B;CACF,CAAC,CACH,CAAC;AACF,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAAC;IAChC,iBAAiB,EAAE,SAAS;CAC7B,CAAC,CAAC","sourcesContent":["import React, { ComponentType, forwardRef } from 'react';\nimport { Platform } from 'react-native';\n\nimport View, { ViewProps } from '../primitives/View';\n\nfunction createView(nativeProps: ViewProps = {}): ComponentType<ViewProps> {\n  return forwardRef((props: ViewProps, ref) => {\n    return <View {...nativeProps} {...props} ref={ref} />;\n  }) as ComponentType<ViewProps>;\n}\n\nexport const Nav = createView(\n  Platform.select({\n    web: {\n      accessibilityRole: 'navigation',\n    },\n  })\n);\nexport const Footer = createView(\n  Platform.select({\n    web: {\n      accessibilityRole: 'contentinfo',\n    },\n  })\n);\nexport const Aside = createView(\n  Platform.select({\n    web: {\n      accessibilityRole: 'complementary',\n    },\n  })\n);\nexport const Header = createView(\n  Platform.select({\n    web: {\n      accessibilityRole: 'banner',\n    },\n    default: {\n      accessibilityRole: 'header',\n    },\n  })\n);\nexport const Main = createView(\n  Platform.select({\n    web: {\n      accessibilityRole: 'main',\n    },\n  })\n);\nexport const Article = createView(\n  Platform.select({\n    web: {\n      accessibilityRole: 'article',\n    },\n  })\n);\nexport const Section = createView({\n  accessibilityRole: 'summary', // region?\n});\n"]}
\ No newline at end of file
diff --git a/packages/html-elements/build/elements/Layout.web.d.ts b/packages/html-elements/build/elements/Layout.web.d.ts
deleted file mode 100644
index 8d053c9ec79c8..0000000000000
--- a/packages/html-elements/build/elements/Layout.web.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { ComponentType } from 'react';
-import { ViewProps } from '../primitives/View';
-export declare const Footer: ComponentType<ViewProps>;
-export declare const Nav: ComponentType<ViewProps>;
diff --git a/packages/html-elements/build/elements/Layout.web.js b/packages/html-elements/build/elements/Layout.web.js
deleted file mode 100644
index 9909dc90e2059..0000000000000
--- a/packages/html-elements/build/elements/Layout.web.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { forwardRef } from 'react';
-import { createElement, StyleSheet } from 'react-native';
-export const Footer = forwardRef((props, ref) => {
-    return createElement('footer', { ...props, style: [styles.footer, props.style], ref });
-});
-export const Nav = forwardRef((props, ref) => {
-    return createElement('nav', { ...props, style: [styles.nav, props.style], ref });
-});
-const styles = StyleSheet.create({
-    footer: {
-        display: 'flex',
-        flexDirection: 'column',
-    },
-    nav: {
-        display: 'flex',
-        flexDirection: 'column',
-    },
-});
-//# sourceMappingURL=Layout.web.js.map
\ No newline at end of file
diff --git a/packages/html-elements/build/elements/Layout.web.js.map b/packages/html-elements/build/elements/Layout.web.js.map
deleted file mode 100644
index 44451e7ec4ea6..0000000000000
--- a/packages/html-elements/build/elements/Layout.web.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"Layout.web.js","sourceRoot":"","sources":["../../src/elements/Layout.web.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,UAAU,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAGzD,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAC,CAAC,KAAgB,EAAE,GAAG,EAAE,EAAE;IACzD,OAAO,aAAa,CAAC,QAAQ,EAAE,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;AACzF,CAAC,CAA6B,CAAC;AAE/B,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAAC,CAAC,KAAgB,EAAE,GAAG,EAAE,EAAE;IACtD,OAAO,aAAa,CAAC,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;AACnF,CAAC,CAA6B,CAAC;AAE/B,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,MAAM,EAAE;QACN,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;KACxB;IACD,GAAG,EAAE;QACH,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;KACxB;CACF,CAAC,CAAC","sourcesContent":["import { ComponentType, forwardRef } from 'react';\nimport { createElement, StyleSheet } from 'react-native';\nimport { ViewProps } from '../primitives/View';\n\nexport const Footer = forwardRef((props: ViewProps, ref) => {\n  return createElement('footer', { ...props, style: [styles.footer, props.style], ref });\n}) as ComponentType<ViewProps>;\n\nexport const Nav = forwardRef((props: ViewProps, ref) => {\n  return createElement('nav', { ...props, style: [styles.nav, props.style], ref });\n}) as ComponentType<ViewProps>;\n\nconst styles = StyleSheet.create({\n  footer: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  nav: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n});\n"]}
\ No newline at end of file
diff --git a/packages/html-elements/build/elements/Main.d.ts b/packages/html-elements/build/elements/Main.d.ts
deleted file mode 100644
index 382b8404c6898..0000000000000
--- a/packages/html-elements/build/elements/Main.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import React from 'react';
-import { ViewProps } from '../primitives/View';
-export declare const Main: React.ComponentType<ViewProps>;
diff --git a/packages/html-elements/build/elements/Main.js b/packages/html-elements/build/elements/Main.js
deleted file mode 100644
index f028fc92601d0..0000000000000
--- a/packages/html-elements/build/elements/Main.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Platform } from 'react-native';
-import View from '../primitives/View';
-const nativeProps = Platform.select({
-    web: {
-        accessibilityRole: 'main',
-    },
-    default: {},
-});
-export const Main = forwardRef((props, ref) => {
-    return <View {...nativeProps} {...props} ref={ref}/>;
-});
-//# sourceMappingURL=Main.js.map
\ No newline at end of file
diff --git a/packages/html-elements/build/elements/Main.js.map b/packages/html-elements/build/elements/Main.js.map
deleted file mode 100644
index 0255c3e64af44..0000000000000
--- a/packages/html-elements/build/elements/Main.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"Main.js","sourceRoot":"","sources":["../../src/elements/Main.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,IAAmB,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,GAAc,QAAQ,CAAC,MAAM,CAAC;IAC7C,GAAG,EAAE;QACH,iBAAiB,EAAE,MAAM;KAC1B;IACD,OAAO,EAAE,EAAE;CACZ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAAC,CAAC,KAAgB,EAAE,GAAG,EAAE,EAAE;IACvD,OAAO,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAG,CAAC;AACxD,CAAC,CAA6B,CAAC","sourcesContent":["import React, { ComponentType, forwardRef } from 'react';\nimport { Platform } from 'react-native';\nimport View, { ViewProps } from '../primitives/View';\n\nconst nativeProps: ViewProps = Platform.select({\n  web: {\n    accessibilityRole: 'main',\n  },\n  default: {},\n});\n\nexport const Main = forwardRef((props: ViewProps, ref) => {\n  return <View {...nativeProps} {...props} ref={ref} />;\n}) as ComponentType<ViewProps>;\n"]}
\ No newline at end of file
diff --git a/packages/html-elements/build/elements/Section.d.ts b/packages/html-elements/build/elements/Section.d.ts
deleted file mode 100644
index 1eeead6a80881..0000000000000
--- a/packages/html-elements/build/elements/Section.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import React from 'react';
-import { ViewProps } from '../primitives/View';
-export declare const Section: React.ComponentType<ViewProps>;
diff --git a/packages/html-elements/build/elements/Section.js b/packages/html-elements/build/elements/Section.js
deleted file mode 100644
index 8b012654ba4bb..0000000000000
--- a/packages/html-elements/build/elements/Section.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import React, { forwardRef } from 'react';
-import View from '../primitives/View';
-export const Section = forwardRef((props, ref) => {
-    return <View accessibilityRole="summary" {...props} ref={ref}/>;
-});
-//# sourceMappingURL=Section.js.map
\ No newline at end of file
diff --git a/packages/html-elements/build/elements/Section.js.map b/packages/html-elements/build/elements/Section.js.map
deleted file mode 100644
index b86f101c1a06e..0000000000000
--- a/packages/html-elements/build/elements/Section.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"Section.js","sourceRoot":"","sources":["../../src/elements/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,UAAU,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,IAAmB,MAAM,oBAAoB,CAAC;AAErD,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAAC,CAAC,KAAgB,EAAE,GAAG,EAAE,EAAE;IAC1D,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,IAAI,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAG,CAAC;AACnE,CAAC,CAA6B,CAAC","sourcesContent":["import React, { ComponentType, forwardRef } from 'react';\n\nimport View, { ViewProps } from '../primitives/View';\n\nexport const Section = forwardRef((props: ViewProps, ref) => {\n  return <View accessibilityRole=\"summary\" {...props} ref={ref} />;\n}) as ComponentType<ViewProps>;\n"]}
\ No newline at end of file
diff --git a/packages/html-elements/build/elements/Text.js b/packages/html-elements/build/elements/Text.js
index b88c6c148b79f..b84483a141486 100644
--- a/packages/html-elements/build/elements/Text.js
+++ b/packages/html-elements/build/elements/Text.js
@@ -75,7 +75,7 @@ const styles = StyleSheet.create({
         height: 8,
     },
     small: {
-        fontSize: 10,
+        fontSize: 12,
     },
     s: {
         textDecorationLine: 'line-through',
diff --git a/packages/html-elements/build/elements/Text.js.map b/packages/html-elements/build/elements/Text.js.map
index 13895a6ad624f..652d0032b351f 100644
--- a/packages/html-elements/build/elements/Text.js.map
+++ b/packages/html-elements/build/elements/Text.js.map
@@ -1 +1 @@
-{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/elements/Text.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ComponentType, forwardRef } from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport { em } from '../css/units';\nimport Text, { TextProps } from '../primitives/Text';\nimport View, { ViewProps } from '../primitives/View';\nimport { BlockQuoteProps, QuoteProps, TimeProps } from './Text.types';\n\nexport const P = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <Text {...props} style={[styles.p, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nexport const B = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <P {...props} style={[styles.b, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nexport const S = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <P {...props} style={[styles.s, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nexport const I = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <P {...props} style={[styles.i, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nexport const Q = forwardRef(({ children, cite, style, ...props }: QuoteProps, ref) => {\n  return (\n    <P {...props} style={[styles.q, style]} ref={ref}>\n      \"{children}\"\n    </P>\n  );\n}) as ComponentType<QuoteProps>;\n\nexport const BlockQuote = forwardRef(({ style, cite, ...props }: BlockQuoteProps, ref) => {\n  return <View {...props} style={[styles.blockQuote, style]} ref={ref} />;\n}) as ComponentType<BlockQuoteProps>;\n\nexport const BR = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <Text {...props} style={[styles.br, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nexport const Small = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <Text {...props} style={[styles.small, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nexport const Mark = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <Text {...props} style={[styles.mark, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\n// TODO: Lazy load mono font on native\nexport const Code = forwardRef((props: TextProps, ref) => {\n  return <Text {...props} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nfunction isTextProps(props: any): props is TextProps {\n  return typeof props.children === 'string';\n}\n\ntype PreProps = TextProps | ViewProps;\n\n// TODO: Lazy load mono font on native\nexport const Pre = forwardRef((props: PreProps, ref: any) => {\n  if (isTextProps(props)) {\n    return <Text {...props} style={[styles.pre, props.style]} ref={ref} />;\n  }\n  return <View {...props} style={[styles.pre, props.style]} ref={ref} />;\n}) as ComponentType<PreProps>;\n\n// Extract dateTime to prevent passing it to the native Text element\nexport const Time = forwardRef(({ dateTime, ...props }: TimeProps, ref) => {\n  return <Text {...props} ref={ref} />;\n}) as ComponentType<TimeProps>;\n\nexport const Strong = B;\nexport const Del = S;\nexport const EM = I;\n\nconst styles = StyleSheet.create({\n  p: {\n    marginVertical: em(1),\n    fontSize: em(1),\n  },\n  b: {\n    fontWeight: 'bold',\n  },\n  q: {\n    fontStyle: 'italic',\n  },\n  pre: {\n    marginVertical: em(1),\n  },\n  blockQuote: {\n    marginVertical: em(1),\n  },\n  br: {\n    width: 0,\n    height: 8,\n  },\n  small: {\n    fontSize: 10,\n  },\n  s: {\n    textDecorationLine: 'line-through',\n    textDecorationStyle: 'solid',\n  },\n  mark: {\n    backgroundColor: 'yellow',\n    color: 'black',\n  },\n  i: {\n    fontStyle: 'italic',\n  },\n});\n"]}
\ No newline at end of file
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/elements/Text.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ComponentType, forwardRef } from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport { em } from '../css/units';\nimport Text, { TextProps } from '../primitives/Text';\nimport View, { ViewProps } from '../primitives/View';\nimport { BlockQuoteProps, QuoteProps, TimeProps } from './Text.types';\n\nexport const P = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <Text {...props} style={[styles.p, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nexport const B = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <P {...props} style={[styles.b, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nexport const S = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <P {...props} style={[styles.s, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nexport const I = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <P {...props} style={[styles.i, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nexport const Q = forwardRef(({ children, cite, style, ...props }: QuoteProps, ref) => {\n  return (\n    <P {...props} style={[styles.q, style]} ref={ref}>\n      \"{children}\"\n    </P>\n  );\n}) as ComponentType<QuoteProps>;\n\nexport const BlockQuote = forwardRef(({ style, cite, ...props }: BlockQuoteProps, ref) => {\n  return <View {...props} style={[styles.blockQuote, style]} ref={ref} />;\n}) as ComponentType<BlockQuoteProps>;\n\nexport const BR = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <Text {...props} style={[styles.br, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nexport const Small = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <Text {...props} style={[styles.small, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nexport const Mark = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return <Text {...props} style={[styles.mark, style]} ref={ref} />;\n}) as ComponentType<TextProps>;\n\n// TODO: Lazy load mono font on native\nexport const Code = forwardRef((props: TextProps, ref) => {\n  return <Text {...props} ref={ref} />;\n}) as ComponentType<TextProps>;\n\nfunction isTextProps(props: any): props is TextProps {\n  return typeof props.children === 'string';\n}\n\ntype PreProps = TextProps | ViewProps;\n\n// TODO: Lazy load mono font on native\nexport const Pre = forwardRef((props: PreProps, ref: any) => {\n  if (isTextProps(props)) {\n    return <Text {...props} style={[styles.pre, props.style]} ref={ref} />;\n  }\n  return <View {...props} style={[styles.pre, props.style]} ref={ref} />;\n}) as ComponentType<PreProps>;\n\n// Extract dateTime to prevent passing it to the native Text element\nexport const Time = forwardRef(({ dateTime, ...props }: TimeProps, ref) => {\n  return <Text {...props} ref={ref} />;\n}) as ComponentType<TimeProps>;\n\nexport const Strong = B;\nexport const Del = S;\nexport const EM = I;\n\nconst styles = StyleSheet.create({\n  p: {\n    marginVertical: em(1),\n    fontSize: em(1),\n  },\n  b: {\n    fontWeight: 'bold',\n  },\n  q: {\n    fontStyle: 'italic',\n  },\n  pre: {\n    marginVertical: em(1),\n  },\n  blockQuote: {\n    marginVertical: em(1),\n  },\n  br: {\n    width: 0,\n    height: 8,\n  },\n  small: {\n    fontSize: 12,\n  },\n  s: {\n    textDecorationLine: 'line-through',\n    textDecorationStyle: 'solid',\n  },\n  mark: {\n    backgroundColor: 'yellow',\n    color: 'black',\n  },\n  i: {\n    fontStyle: 'italic',\n  },\n});\n"]}
\ No newline at end of file
diff --git a/packages/html-elements/build/elements/Text.web.js.map b/packages/html-elements/build/elements/Text.web.js.map
deleted file mode 100644
index a836a5627b21f..0000000000000
--- a/packages/html-elements/build/elements/Text.web.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"Text.web.js","sourceRoot":"","sources":["../../src/elements/Text.web.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ComponentType, forwardRef } from 'react';\nimport { createElement, StyleSheet } from 'react-native';\n\nimport { TextProps } from '../primitives/Text';\nimport { BlockQuoteProps, QuoteProps, TimeProps } from './Text.types';\n\nexport const P = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return createElement('p', { ...props, style: [styles.reset, style], ref });\n}) as ComponentType<TextProps>;\n\nexport const B = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return createElement('b', { ...props, style: [styles.reset, style], ref });\n}) as ComponentType<TextProps>;\n\nexport const S = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return createElement('s', { ...props, style: [styles.reset, style], ref });\n}) as ComponentType<TextProps>;\n\nexport const Del = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return createElement('del', { ...props, style: [styles.reset, style], ref });\n}) as ComponentType<TextProps>;\n\nexport const Strong = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return createElement('strong', { ...props, style: [styles.reset, style], ref });\n}) as ComponentType<TextProps>;\n\nexport const I = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return createElement('i', { ...props, style: [styles.reset, style], ref });\n}) as ComponentType<TextProps>;\n\nexport const Q = forwardRef(({ style, ...props }: QuoteProps, ref) => {\n  return createElement('q', { ...props, style: [styles.reset, style], ref });\n}) as ComponentType<QuoteProps>;\n\nexport const BlockQuote = forwardRef(({ style, ...props }: BlockQuoteProps, ref) => {\n  return createElement('blockquote', { ...props, style: [styles.reset, style], ref });\n}) as ComponentType<BlockQuoteProps>;\n\nexport const EM = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return createElement('em', { ...props, style: [styles.reset, style], ref });\n}) as ComponentType<TextProps>;\n\nexport const BR = forwardRef((props: TextProps, ref) => {\n  return createElement('br', { ...props, ref });\n}) as ComponentType<TextProps>;\n\nexport const Small = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return createElement('small', { ...props, style: [styles.reset, style], ref });\n}) as ComponentType<TextProps>;\n\nexport const Mark = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return createElement('mark', { ...props, style: [styles.reset, style], ref });\n}) as ComponentType<TextProps>;\n\nexport const Code = forwardRef((props: TextProps, ref) => {\n  return createElement('code', { ...props, ref });\n}) as ComponentType<TextProps>;\n\nexport const Time = forwardRef(({ style, ...props }: TimeProps, ref) => {\n  return createElement('time', { ...props, style: [styles.reset, style], ref });\n}) as ComponentType<TimeProps>;\n\nexport const Pre = forwardRef((props: TextProps, ref) => {\n  return createElement('pre', { ...props, ref });\n}) as ComponentType<TextProps>;\n\nconst styles = StyleSheet.create({\n  reset: {\n    fontFamily: 'System',\n    color: '#000',\n  },\n});\n"]}
\ No newline at end of file
diff --git a/packages/html-elements/build/elements/Text.web.d.ts b/packages/html-elements/build/elements/_Text.web.d.ts
similarity index 100%
rename from packages/html-elements/build/elements/Text.web.d.ts
rename to packages/html-elements/build/elements/_Text.web.d.ts
diff --git a/packages/html-elements/build/elements/Text.web.js b/packages/html-elements/build/elements/_Text.web.js
similarity index 83%
rename from packages/html-elements/build/elements/Text.web.js
rename to packages/html-elements/build/elements/_Text.web.js
index b77c848349fa8..b9889d3b6f2cb 100644
--- a/packages/html-elements/build/elements/Text.web.js
+++ b/packages/html-elements/build/elements/_Text.web.js
@@ -42,13 +42,21 @@ export const Code = forwardRef((props, ref) => {
 export const Time = forwardRef(({ style, ...props }, ref) => {
     return createElement('time', { ...props, style: [styles.reset, style], ref });
 });
-export const Pre = forwardRef((props, ref) => {
-    return createElement('pre', { ...props, ref });
+export const Pre = forwardRef(({ style, ...props }, ref) => {
+    return createElement('pre', { ...props, style: [styles.resetStyle, style], ref });
 });
 const styles = StyleSheet.create({
     reset: {
         fontFamily: 'System',
         color: '#000',
+        border: '0 solid black',
+        boxSizing: 'border-box',
+        // @ts-ignore: inline is not supported
+        display: 'inline',
+        margin: 0,
+        padding: 0,
+        whiteSpace: 'pre-wrap',
+        wordWrap: 'break-word',
     },
 });
-//# sourceMappingURL=Text.web.js.map
\ No newline at end of file
+//# sourceMappingURL=_Text.web.js.map
\ No newline at end of file
diff --git a/packages/html-elements/build/elements/_Text.web.js.map b/packages/html-elements/build/elements/_Text.web.js.map
new file mode 100644
index 0000000000000..c71fda84251dc
--- /dev/null
+++ b/packages/html-elements/build/elements/_Text.web.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"_Text.web.js","sourceRoot":"","sources":["../../src/elements/_Text.web.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ComponentType, forwardRef } from 'react';\nimport { createElement, StyleSheet } from 'react-native';\n\nimport { TextProps } from '../primitives/Text';\nimport { BlockQuoteProps, QuoteProps, TimeProps } from './Text.types';\n\nexport const P = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return createElement('p', { ...props, style: [styles.reset, style], ref });\n}) as ComponentType<TextProps>;\n\nexport const B = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return createElement('b', { ...props, style: [styles.reset, style], ref });\n}) as ComponentType<TextProps>;\n\nexport const S = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return createElement('s', { ...props, style: [styles.reset, style], ref });\n}) as ComponentType<TextProps>;\n\nexport const Del = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return createElement('del', { ...props, style: [styles.reset, style], ref });\n}) as ComponentType<TextProps>;\n\nexport const Strong = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return createElement('strong', { ...props, style: [styles.reset, style], ref });\n}) as ComponentType<TextProps>;\n\nexport const I = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return createElement('i', { ...props, style: [styles.reset, style], ref });\n}) as ComponentType<TextProps>;\n\nexport const Q = forwardRef(({ style, ...props }: QuoteProps, ref) => {\n  return createElement('q', { ...props, style: [styles.reset, style], ref });\n}) as ComponentType<QuoteProps>;\n\nexport const BlockQuote = forwardRef(({ style, ...props }: BlockQuoteProps, ref) => {\n  return createElement('blockquote', { ...props, style: [styles.reset, style], ref });\n}) as ComponentType<BlockQuoteProps>;\n\nexport const EM = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return createElement('em', { ...props, style: [styles.reset, style], ref });\n}) as ComponentType<TextProps>;\n\nexport const BR = forwardRef((props: TextProps, ref) => {\n  return createElement('br', { ...props, ref });\n}) as ComponentType<TextProps>;\n\nexport const Small = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return createElement('small', { ...props, style: [styles.reset, style], ref });\n}) as ComponentType<TextProps>;\n\nexport const Mark = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return createElement('mark', { ...props, style: [styles.reset, style], ref });\n}) as ComponentType<TextProps>;\n\nexport const Code = forwardRef((props: TextProps, ref) => {\n  return createElement('code', { ...props, ref });\n}) as ComponentType<TextProps>;\n\nexport const Time = forwardRef(({ style, ...props }: TimeProps, ref) => {\n  return createElement('time', { ...props, style: [styles.reset, style], ref });\n}) as ComponentType<TimeProps>;\n\nexport const Pre = forwardRef(({ style, ...props }: TextProps, ref) => {\n  return createElement('pre', { ...props, style: [styles.resetStyle, style], ref });\n}) as ComponentType<TextProps>;\n\nconst styles = StyleSheet.create({\n  reset: {\n    fontFamily: 'System',\n    color: '#000',\n    border: '0 solid black',\n    boxSizing: 'border-box',\n    // @ts-ignore: inline is not supported\n    display: 'inline',\n    margin: 0,\n    padding: 0,\n    whiteSpace: 'pre-wrap',\n    wordWrap: 'break-word',\n  },\n});\n"]}
\ No newline at end of file
diff --git a/packages/html-elements/build/primitives/View.d.ts b/packages/html-elements/build/primitives/View.d.ts
index 84d848c9029c8..e00f11ef6745d 100644
--- a/packages/html-elements/build/primitives/View.d.ts
+++ b/packages/html-elements/build/primitives/View.d.ts
@@ -1,5 +1,5 @@
 import { ClassAttributes, ComponentProps, ComponentType } from 'react';
-import { StyleProp, View as NativeView, ViewStyle as NativeViewStyle } from 'react-native';
+import { StyleProp, View as NativeView, AccessibilityRole, ViewStyle as NativeViewStyle } from 'react-native';
 declare type NativeViewProps = ComponentProps<typeof NativeView> & ClassAttributes<typeof NativeView>;
 /**
  * https://baconbrix.gitbook.io/react-native-web/primitives/view
@@ -113,7 +113,7 @@ export interface WebViewStyle {
 export declare type ViewStyle = NativeViewStyle & WebViewStyle;
 export declare type WebViewProps = {
     style?: StyleProp<ViewStyle>;
-    accessibilityRole?: 'main' | 'article' | 'banner' | NativeViewProps['accessibilityRole'];
+    accessibilityRole?: 'complementary' | 'contentinfo' | 'region' | 'navigation' | 'main' | 'article' | 'banner' | AccessibilityRole;
 };
 export declare type ViewProps = WebViewProps & Omit<NativeViewProps, 'style' | 'accessibilityRole'>;
 declare const View: ComponentType<ViewProps>;
diff --git a/packages/html-elements/build/primitives/View.js b/packages/html-elements/build/primitives/View.js
index 9fb15272b389e..0084e6d102ba1 100644
--- a/packages/html-elements/build/primitives/View.js
+++ b/packages/html-elements/build/primitives/View.js
@@ -1,4 +1,4 @@
-import { View as NativeView } from 'react-native';
+import { View as NativeView, } from 'react-native';
 const View = NativeView;
 export default View;
 //# sourceMappingURL=View.js.map
\ No newline at end of file
diff --git a/packages/html-elements/build/primitives/View.js.map b/packages/html-elements/build/primitives/View.js.map
index f0c5bb161c917..d5ae40fe75166 100644
--- a/packages/html-elements/build/primitives/View.js.map
+++ b/packages/html-elements/build/primitives/View.js.map
@@ -1 +1 @@
-{"version":3,"file":"View.js","sourceRoot":"","sources":["../../src/primitives/View.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,IAAI,IAAI,UAAU,EAAgC,MAAM,cAAc,CAAC;AA8H3F,MAAM,IAAI,GAAG,UAAsC,CAAC;AAEpD,eAAe,IAAI,CAAC","sourcesContent":["import { ClassAttributes, ComponentProps, ComponentType } from 'react';\nimport { StyleProp, View as NativeView, ViewStyle as NativeViewStyle } from 'react-native';\n\n// https://github.com/necolas/react-native-web/issues/832\n\ntype NativeViewProps = ComponentProps<typeof NativeView> & ClassAttributes<typeof NativeView>;\n\n/**\n * https://baconbrix.gitbook.io/react-native-web/primitives/view\n */\nexport interface WebViewStyle {\n  /** @platform web */\n  backdropFilter?: string;\n  /** @platform web */\n  animationDelay?: string;\n  /** @platform web */\n  animationDirection?: string;\n  /** @platform web */\n  animationDuration?: string;\n  /** @platform web */\n  animationFillMode?: string;\n  /** @platform web */\n  animationName?: string | any[];\n  /** @platform web */\n  animationIterationCount?: number | 'infinite';\n  /** @platform web */\n  animationPlayState?: string;\n  /** @platform web */\n  animationTimingFunction?: string;\n  /** @platform web */\n  backgroundAttachment?: string;\n  /** @platform web */\n  backgroundBlendMode?: string;\n  /** @platform web */\n  backgroundClip?: string;\n  /** @platform web */\n  backgroundImage?: string;\n  /** @platform web */\n  backgroundOrigin?: 'border-box' | 'content-box' | 'padding-box';\n  /** @platform web */\n  backgroundPosition?: string;\n  /** @platform web */\n  backgroundRepeat?: string;\n  /** @platform web */\n  backgroundSize?: string;\n  /** @platform web */\n  boxShadow?: string;\n  /** @platform web */\n  boxSizing?: string;\n  /** @platform web */\n  clip?: string;\n  /** @platform web */\n  cursor?: string;\n  /** @platform web */\n  filter?: string;\n  /** @platform web */\n  gridAutoColumns?: string;\n  /** @platform web */\n  gridAutoFlow?: string;\n  /** @platform web */\n  gridAutoRows?: string;\n  /** @platform web */\n  gridColumnEnd?: string;\n  /** @platform web */\n  gridColumnGap?: string;\n  /** @platform web */\n  gridColumnStart?: string;\n  /** @platform web */\n  gridRowEnd?: string;\n  /** @platform web */\n  gridRowGap?: string;\n  /** @platform web */\n  gridRowStart?: string;\n  /** @platform web */\n  gridTemplateColumns?: string;\n  /** @platform web */\n  gridTemplateRows?: string;\n  /** @platform web */\n  gridTemplateAreas?: string;\n  /** @platform web */\n  outline?: string;\n  /** @platform web */\n  outlineColor?: string;\n  /** @platform web */\n  overflowX?: string;\n  /** @platform web */\n  overflowY?: string;\n  /** @platform web */\n  overscrollBehavior?: 'auto' | 'contain' | 'none';\n  /** @platform web */\n  overscrollBehaviorX?: 'auto' | 'contain' | 'none';\n  /** @platform web */\n  overscrollBehaviorY?: 'auto' | 'contain' | 'none';\n  /** @platform web */\n  perspective?: string;\n  /** @platform web */\n  perspectiveOrigin?: string;\n  /** @platform web */\n  touchAction?: string;\n  /** @platform web */\n  transformOrigin?: string;\n  /** @platform web */\n  transitionDelay?: string;\n  /** @platform web */\n  transitionDuration?: string;\n  /** @platform web */\n  transitionProperty?: string;\n  /** @platform web */\n  transitionTimingFunction?: string;\n  /** @platform web */\n  userSelect?: string;\n  /** @platform web */\n  visibility?: string;\n  /** @platform web */\n  willChange?: string;\n}\n\nexport type ViewStyle = NativeViewStyle & WebViewStyle;\n\nexport type WebViewProps = {\n  style?: StyleProp<ViewStyle>;\n\n  accessibilityRole?: 'main' | 'article' | 'banner' | NativeViewProps['accessibilityRole'];\n};\n\nexport type ViewProps = WebViewProps & Omit<NativeViewProps, 'style' | 'accessibilityRole'>;\n\nconst View = NativeView as ComponentType<ViewProps>;\n\nexport default View;\n"]}
\ No newline at end of file
+{"version":3,"file":"View.js","sourceRoot":"","sources":["../../src/primitives/View.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,IAAI,IAAI,UAAU,GAGnB,MAAM,cAAc,CAAC;AAsItB,MAAM,IAAI,GAAG,UAAsC,CAAC;AAEpD,eAAe,IAAI,CAAC","sourcesContent":["import { ClassAttributes, ComponentProps, ComponentType } from 'react';\nimport {\n  StyleProp,\n  View as NativeView,\n  AccessibilityRole,\n  ViewStyle as NativeViewStyle,\n} from 'react-native';\n\n// https://github.com/necolas/react-native-web/issues/832\n\ntype NativeViewProps = ComponentProps<typeof NativeView> & ClassAttributes<typeof NativeView>;\n\n/**\n * https://baconbrix.gitbook.io/react-native-web/primitives/view\n */\nexport interface WebViewStyle {\n  /** @platform web */\n  backdropFilter?: string;\n  /** @platform web */\n  animationDelay?: string;\n  /** @platform web */\n  animationDirection?: string;\n  /** @platform web */\n  animationDuration?: string;\n  /** @platform web */\n  animationFillMode?: string;\n  /** @platform web */\n  animationName?: string | any[];\n  /** @platform web */\n  animationIterationCount?: number | 'infinite';\n  /** @platform web */\n  animationPlayState?: string;\n  /** @platform web */\n  animationTimingFunction?: string;\n  /** @platform web */\n  backgroundAttachment?: string;\n  /** @platform web */\n  backgroundBlendMode?: string;\n  /** @platform web */\n  backgroundClip?: string;\n  /** @platform web */\n  backgroundImage?: string;\n  /** @platform web */\n  backgroundOrigin?: 'border-box' | 'content-box' | 'padding-box';\n  /** @platform web */\n  backgroundPosition?: string;\n  /** @platform web */\n  backgroundRepeat?: string;\n  /** @platform web */\n  backgroundSize?: string;\n  /** @platform web */\n  boxShadow?: string;\n  /** @platform web */\n  boxSizing?: string;\n  /** @platform web */\n  clip?: string;\n  /** @platform web */\n  cursor?: string;\n  /** @platform web */\n  filter?: string;\n  /** @platform web */\n  gridAutoColumns?: string;\n  /** @platform web */\n  gridAutoFlow?: string;\n  /** @platform web */\n  gridAutoRows?: string;\n  /** @platform web */\n  gridColumnEnd?: string;\n  /** @platform web */\n  gridColumnGap?: string;\n  /** @platform web */\n  gridColumnStart?: string;\n  /** @platform web */\n  gridRowEnd?: string;\n  /** @platform web */\n  gridRowGap?: string;\n  /** @platform web */\n  gridRowStart?: string;\n  /** @platform web */\n  gridTemplateColumns?: string;\n  /** @platform web */\n  gridTemplateRows?: string;\n  /** @platform web */\n  gridTemplateAreas?: string;\n  /** @platform web */\n  outline?: string;\n  /** @platform web */\n  outlineColor?: string;\n  /** @platform web */\n  overflowX?: string;\n  /** @platform web */\n  overflowY?: string;\n  /** @platform web */\n  overscrollBehavior?: 'auto' | 'contain' | 'none';\n  /** @platform web */\n  overscrollBehaviorX?: 'auto' | 'contain' | 'none';\n  /** @platform web */\n  overscrollBehaviorY?: 'auto' | 'contain' | 'none';\n  /** @platform web */\n  perspective?: string;\n  /** @platform web */\n  perspectiveOrigin?: string;\n  /** @platform web */\n  touchAction?: string;\n  /** @platform web */\n  transformOrigin?: string;\n  /** @platform web */\n  transitionDelay?: string;\n  /** @platform web */\n  transitionDuration?: string;\n  /** @platform web */\n  transitionProperty?: string;\n  /** @platform web */\n  transitionTimingFunction?: string;\n  /** @platform web */\n  userSelect?: string;\n  /** @platform web */\n  visibility?: string;\n  /** @platform web */\n  willChange?: string;\n}\n\nexport type ViewStyle = NativeViewStyle & WebViewStyle;\n\nexport type WebViewProps = {\n  style?: StyleProp<ViewStyle>;\n\n  accessibilityRole?:\n    | 'complementary'\n    | 'contentinfo'\n    | 'region'\n    | 'navigation'\n    | 'main'\n    | 'article'\n    | 'banner'\n    | AccessibilityRole;\n};\n\nexport type ViewProps = WebViewProps & Omit<NativeViewProps, 'style' | 'accessibilityRole'>;\n\nconst View = NativeView as ComponentType<ViewProps>;\n\nexport default View;\n"]}
\ No newline at end of file
diff --git a/packages/html-elements/src/Elements.tsx b/packages/html-elements/src/Elements.tsx
index b023b008cf145..8d181fbb06b3d 100644
--- a/packages/html-elements/src/Elements.tsx
+++ b/packages/html-elements/src/Elements.tsx
@@ -1,9 +1,5 @@
 export * from './elements/Headings';
 export * from './elements/Anchor';
-export * from './elements/Article';
-export * from './elements/Header';
-export * from './elements/Main';
-export * from './elements/Section';
 export * from './elements/Layout';
 export * from './elements/Text';
 export * from './elements/Rules';
diff --git a/packages/html-elements/src/elements/Anchor.tsx b/packages/html-elements/src/elements/Anchor.tsx
index 34356c9645355..6c9786b30be86 100644
--- a/packages/html-elements/src/elements/Anchor.tsx
+++ b/packages/html-elements/src/elements/Anchor.tsx
@@ -1,8 +1,9 @@
 import React, { ComponentType, forwardRef } from 'react';
-import { Linking, Platform } from 'react-native';
+import { StyleSheet, Linking, Platform } from 'react-native';
 
 import Text from '../primitives/Text';
 import { LinkProps } from './Text.types';
+import { em } from '../css/units';
 
 export const A = forwardRef(({ href, target, ...props }: LinkProps, ref) => {
   const nativeProps = Platform.select<LinkProps>({
@@ -19,5 +20,20 @@ export const A = forwardRef(({ href, target, ...props }: LinkProps, ref) => {
       },
     },
   });
-  return <Text accessibilityRole="link" {...props} {...nativeProps} ref={ref} />;
+  return (
+    <Text
+      accessibilityRole="link"
+      {...props}
+      style={[styles.a, props.style]}
+      {...nativeProps}
+      ref={ref}
+    />
+  );
 }) as ComponentType<LinkProps>;
+
+const styles = StyleSheet.create({
+  // @ts-ignore: string isn't supported
+  a: {
+    fontSize: em(1),
+  },
+});
diff --git a/packages/html-elements/src/elements/Article.tsx b/packages/html-elements/src/elements/Article.tsx
deleted file mode 100644
index 1e12ed9b57a34..0000000000000
--- a/packages/html-elements/src/elements/Article.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { ComponentType, forwardRef } from 'react';
-import { Platform } from 'react-native';
-import View, { ViewProps } from '../primitives/View';
-
-const nativeProps: ViewProps = Platform.select({
-  web: {
-    accessibilityRole: 'article',
-  },
-  default: {},
-});
-export const Article = forwardRef((props: ViewProps, ref) => {
-  return <View {...props} {...nativeProps} ref={ref} />;
-}) as ComponentType<ViewProps>;
diff --git a/packages/html-elements/src/elements/Header.tsx b/packages/html-elements/src/elements/Header.tsx
deleted file mode 100644
index 1f1459264bba6..0000000000000
--- a/packages/html-elements/src/elements/Header.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, { ComponentType, forwardRef } from 'react';
-import { Platform } from 'react-native';
-import View, { ViewProps } from '../primitives/View';
-
-const nativeProps: ViewProps = Platform.select({
-  web: {
-    accessibilityRole: 'banner',
-  },
-  default: {
-    accessibilityRole: 'header',
-  },
-});
-
-export const Header = forwardRef((props: ViewProps, ref) => {
-  return <View {...nativeProps} {...props} ref={ref} />;
-}) as ComponentType<ViewProps>;
diff --git a/packages/html-elements/src/elements/Layout.tsx b/packages/html-elements/src/elements/Layout.tsx
index e2772a0ffaed4..e34b56c799cb8 100644
--- a/packages/html-elements/src/elements/Layout.tsx
+++ b/packages/html-elements/src/elements/Layout.tsx
@@ -1,2 +1,59 @@
-export { default as Footer } from '../primitives/View';
-export { default as Nav } from '../primitives/View';
+import React, { ComponentType, forwardRef } from 'react';
+import { Platform } from 'react-native';
+
+import View, { ViewProps } from '../primitives/View';
+
+function createView(nativeProps: ViewProps = {}): ComponentType<ViewProps> {
+  return forwardRef((props: ViewProps, ref) => {
+    return <View {...nativeProps} {...props} ref={ref} />;
+  }) as ComponentType<ViewProps>;
+}
+
+export const Nav = createView(
+  Platform.select({
+    web: {
+      accessibilityRole: 'navigation',
+    },
+  })
+);
+export const Footer = createView(
+  Platform.select({
+    web: {
+      accessibilityRole: 'contentinfo',
+    },
+  })
+);
+export const Aside = createView(
+  Platform.select({
+    web: {
+      accessibilityRole: 'complementary',
+    },
+  })
+);
+export const Header = createView(
+  Platform.select({
+    web: {
+      accessibilityRole: 'banner',
+    },
+    default: {
+      accessibilityRole: 'header',
+    },
+  })
+);
+export const Main = createView(
+  Platform.select({
+    web: {
+      accessibilityRole: 'main',
+    },
+  })
+);
+export const Article = createView(
+  Platform.select({
+    web: {
+      accessibilityRole: 'article',
+    },
+  })
+);
+export const Section = createView({
+  accessibilityRole: 'summary', // region?
+});
diff --git a/packages/html-elements/src/elements/Layout.web.tsx b/packages/html-elements/src/elements/Layout.web.tsx
deleted file mode 100644
index 8ad947c72b6fe..0000000000000
--- a/packages/html-elements/src/elements/Layout.web.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ComponentType, forwardRef } from 'react';
-import { createElement, StyleSheet } from 'react-native';
-import { ViewProps } from '../primitives/View';
-
-export const Footer = forwardRef((props: ViewProps, ref) => {
-  return createElement('footer', { ...props, style: [styles.footer, props.style], ref });
-}) as ComponentType<ViewProps>;
-
-export const Nav = forwardRef((props: ViewProps, ref) => {
-  return createElement('nav', { ...props, style: [styles.nav, props.style], ref });
-}) as ComponentType<ViewProps>;
-
-const styles = StyleSheet.create({
-  footer: {
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  nav: {
-    display: 'flex',
-    flexDirection: 'column',
-  },
-});
diff --git a/packages/html-elements/src/elements/Main.tsx b/packages/html-elements/src/elements/Main.tsx
deleted file mode 100644
index 83e1a2c076d6c..0000000000000
--- a/packages/html-elements/src/elements/Main.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { ComponentType, forwardRef } from 'react';
-import { Platform } from 'react-native';
-import View, { ViewProps } from '../primitives/View';
-
-const nativeProps: ViewProps = Platform.select({
-  web: {
-    accessibilityRole: 'main',
-  },
-  default: {},
-});
-
-export const Main = forwardRef((props: ViewProps, ref) => {
-  return <View {...nativeProps} {...props} ref={ref} />;
-}) as ComponentType<ViewProps>;
diff --git a/packages/html-elements/src/elements/Section.tsx b/packages/html-elements/src/elements/Section.tsx
deleted file mode 100644
index 68f2d3fc4ee76..0000000000000
--- a/packages/html-elements/src/elements/Section.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React, { ComponentType, forwardRef } from 'react';
-
-import View, { ViewProps } from '../primitives/View';
-
-export const Section = forwardRef((props: ViewProps, ref) => {
-  return <View accessibilityRole="summary" {...props} ref={ref} />;
-}) as ComponentType<ViewProps>;
diff --git a/packages/html-elements/src/elements/Text.tsx b/packages/html-elements/src/elements/Text.tsx
index 747b2fbb35401..c8622b6c59aab 100644
--- a/packages/html-elements/src/elements/Text.tsx
+++ b/packages/html-elements/src/elements/Text.tsx
@@ -96,7 +96,7 @@ const styles = StyleSheet.create({
     height: 8,
   },
   small: {
-    fontSize: 10,
+    fontSize: 12,
   },
   s: {
     textDecorationLine: 'line-through',
diff --git a/packages/html-elements/src/elements/Text.web.tsx b/packages/html-elements/src/elements/_Text.web.tsx
similarity index 88%
rename from packages/html-elements/src/elements/Text.web.tsx
rename to packages/html-elements/src/elements/_Text.web.tsx
index 5b5ca9e376aba..4faab99be25d6 100644
--- a/packages/html-elements/src/elements/Text.web.tsx
+++ b/packages/html-elements/src/elements/_Text.web.tsx
@@ -60,13 +60,21 @@ export const Time = forwardRef(({ style, ...props }: TimeProps, ref) => {
   return createElement('time', { ...props, style: [styles.reset, style], ref });
 }) as ComponentType<TimeProps>;
 
-export const Pre = forwardRef((props: TextProps, ref) => {
-  return createElement('pre', { ...props, ref });
+export const Pre = forwardRef(({ style, ...props }: TextProps, ref) => {
+  return createElement('pre', { ...props, style: [styles.resetStyle, style], ref });
 }) as ComponentType<TextProps>;
 
 const styles = StyleSheet.create({
   reset: {
     fontFamily: 'System',
     color: '#000',
+    border: '0 solid black',
+    boxSizing: 'border-box',
+    // @ts-ignore: inline is not supported
+    display: 'inline',
+    margin: 0,
+    padding: 0,
+    whiteSpace: 'pre-wrap',
+    wordWrap: 'break-word',
   },
 });
diff --git a/packages/html-elements/src/elements/__tests__/Article-test.tsx b/packages/html-elements/src/elements/__tests__/Article-test.tsx
deleted file mode 100644
index 2a43ae37e26b5..0000000000000
--- a/packages/html-elements/src/elements/__tests__/Article-test.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import 'react-native';
-
-import React from 'react';
-import renderer from 'react-test-renderer';
-
-import { Article } from '../Article';
-
-it(`renders Article`, () => {
-  const tree = renderer.create(<Article />);
-  expect(tree).toMatchSnapshot();
-});
diff --git a/packages/html-elements/src/elements/__tests__/Header-test.tsx b/packages/html-elements/src/elements/__tests__/Header-test.tsx
deleted file mode 100644
index eefb09e363ddc..0000000000000
--- a/packages/html-elements/src/elements/__tests__/Header-test.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import 'react-native';
-
-import React from 'react';
-import renderer from 'react-test-renderer';
-
-import { Header } from '../Header';
-
-it(`renders Header`, () => {
-  const tree = renderer.create(<Header />);
-  expect(tree).toMatchSnapshot();
-});
diff --git a/packages/html-elements/src/elements/__tests__/Layout-test.tsx b/packages/html-elements/src/elements/__tests__/Layout-test.tsx
index 6a37777e9b654..fdeed71e89726 100644
--- a/packages/html-elements/src/elements/__tests__/Layout-test.tsx
+++ b/packages/html-elements/src/elements/__tests__/Layout-test.tsx
@@ -3,7 +3,7 @@ import 'react-native';
 import React from 'react';
 import renderer from 'react-test-renderer';
 
-import { Nav, Footer } from '../Layout';
+import { Article, Aside, Footer, Header, Main, Nav, Section } from '../Layout';
 
 it(`renders Footer`, () => {
   const tree = renderer.create(<Footer />);
@@ -14,3 +14,28 @@ it(`renders Nav`, () => {
   const tree = renderer.create(<Nav />);
   expect(tree).toMatchSnapshot();
 });
+
+it(`renders Aside`, () => {
+  const tree = renderer.create(<Aside />);
+  expect(tree).toMatchSnapshot();
+});
+
+it(`renders Header`, () => {
+  const tree = renderer.create(<Header />);
+  expect(tree).toMatchSnapshot();
+});
+
+it(`renders Main`, () => {
+  const tree = renderer.create(<Main />);
+  expect(tree).toMatchSnapshot();
+});
+
+it(`renders Section`, () => {
+  const tree = renderer.create(<Section />);
+  expect(tree).toMatchSnapshot();
+});
+
+it(`renders Article`, () => {
+  const tree = renderer.create(<Article />);
+  expect(tree).toMatchSnapshot();
+});
diff --git a/packages/html-elements/src/elements/__tests__/Main-test.tsx b/packages/html-elements/src/elements/__tests__/Main-test.tsx
deleted file mode 100644
index c583eadcf2b75..0000000000000
--- a/packages/html-elements/src/elements/__tests__/Main-test.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import 'react-native';
-
-import React from 'react';
-import renderer from 'react-test-renderer';
-
-import { Main } from '../Main';
-
-it(`renders Main`, () => {
-  const tree = renderer.create(<Main />);
-  expect(tree).toMatchSnapshot();
-});
diff --git a/packages/html-elements/src/elements/__tests__/Section-test.tsx b/packages/html-elements/src/elements/__tests__/Section-test.tsx
deleted file mode 100644
index e24ad8df09ef2..0000000000000
--- a/packages/html-elements/src/elements/__tests__/Section-test.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import 'react-native';
-
-import React from 'react';
-import renderer from 'react-test-renderer';
-
-import { Section } from '../Section';
-
-it(`renders Section`, () => {
-  const tree = renderer.create(<Section />);
-  expect(tree).toMatchSnapshot();
-});
diff --git a/packages/html-elements/src/elements/__tests__/__snapshots__/Anchor-test.tsx.snap.android b/packages/html-elements/src/elements/__tests__/__snapshots__/Anchor-test.tsx.snap.android
index b4a9a4a7d3754..98ef981217dec 100644
--- a/packages/html-elements/src/elements/__tests__/__snapshots__/Anchor-test.tsx.snap.android
+++ b/packages/html-elements/src/elements/__tests__/__snapshots__/Anchor-test.tsx.snap.android
@@ -4,5 +4,10 @@ exports[`renders A 1`] = `
 <Text
   accessibilityRole="link"
   onPress={[Function]}
+  style={
+    Object {
+      "fontSize": 32,
+    }
+  }
 />
 `;
diff --git a/packages/html-elements/src/elements/__tests__/__snapshots__/Anchor-test.tsx.snap.ios b/packages/html-elements/src/elements/__tests__/__snapshots__/Anchor-test.tsx.snap.ios
index b4a9a4a7d3754..98ef981217dec 100644
--- a/packages/html-elements/src/elements/__tests__/__snapshots__/Anchor-test.tsx.snap.ios
+++ b/packages/html-elements/src/elements/__tests__/__snapshots__/Anchor-test.tsx.snap.ios
@@ -4,5 +4,10 @@ exports[`renders A 1`] = `
 <Text
   accessibilityRole="link"
   onPress={[Function]}
+  style={
+    Object {
+      "fontSize": 32,
+    }
+  }
 />
 `;
diff --git a/packages/html-elements/src/elements/__tests__/__snapshots__/Anchor-test.tsx.snap.web b/packages/html-elements/src/elements/__tests__/__snapshots__/Anchor-test.tsx.snap.web
index 9d56a0d98b662..4daa0a6079169 100644
--- a/packages/html-elements/src/elements/__tests__/__snapshots__/Anchor-test.tsx.snap.web
+++ b/packages/html-elements/src/elements/__tests__/__snapshots__/Anchor-test.tsx.snap.web
@@ -7,6 +7,11 @@ exports[`renders A 1`] = `
   dir="auto"
   href="#"
   role="link"
+  style={
+    Object {
+      "fontSize": "1em",
+    }
+  }
   target="_parent"
 />
 `;
diff --git a/packages/html-elements/src/elements/__tests__/__snapshots__/Article-test.tsx.snap.android b/packages/html-elements/src/elements/__tests__/__snapshots__/Article-test.tsx.snap.android
deleted file mode 100644
index effc6d54166f1..0000000000000
--- a/packages/html-elements/src/elements/__tests__/__snapshots__/Article-test.tsx.snap.android
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders Article 1`] = `<View />`;
diff --git a/packages/html-elements/src/elements/__tests__/__snapshots__/Article-test.tsx.snap.ios b/packages/html-elements/src/elements/__tests__/__snapshots__/Article-test.tsx.snap.ios
deleted file mode 100644
index effc6d54166f1..0000000000000
--- a/packages/html-elements/src/elements/__tests__/__snapshots__/Article-test.tsx.snap.ios
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders Article 1`] = `<View />`;
diff --git a/packages/html-elements/src/elements/__tests__/__snapshots__/Article-test.tsx.snap.web b/packages/html-elements/src/elements/__tests__/__snapshots__/Article-test.tsx.snap.web
deleted file mode 100644
index 738a5f3a76f8e..0000000000000
--- a/packages/html-elements/src/elements/__tests__/__snapshots__/Article-test.tsx.snap.web
+++ /dev/null
@@ -1,8 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders Article 1`] = `
-<article
-  className="css-view-1dbjc4n"
-  role="article"
-/>
-`;
diff --git a/packages/html-elements/src/elements/__tests__/__snapshots__/Header-test.tsx.snap.android b/packages/html-elements/src/elements/__tests__/__snapshots__/Header-test.tsx.snap.android
deleted file mode 100644
index 2bacbb4337c26..0000000000000
--- a/packages/html-elements/src/elements/__tests__/__snapshots__/Header-test.tsx.snap.android
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders Header 1`] = `
-<View
-  accessibilityRole="header"
-/>
-`;
diff --git a/packages/html-elements/src/elements/__tests__/__snapshots__/Header-test.tsx.snap.ios b/packages/html-elements/src/elements/__tests__/__snapshots__/Header-test.tsx.snap.ios
deleted file mode 100644
index 2bacbb4337c26..0000000000000
--- a/packages/html-elements/src/elements/__tests__/__snapshots__/Header-test.tsx.snap.ios
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders Header 1`] = `
-<View
-  accessibilityRole="header"
-/>
-`;
diff --git a/packages/html-elements/src/elements/__tests__/__snapshots__/Header-test.tsx.snap.web b/packages/html-elements/src/elements/__tests__/__snapshots__/Header-test.tsx.snap.web
deleted file mode 100644
index 9443eead63ced..0000000000000
--- a/packages/html-elements/src/elements/__tests__/__snapshots__/Header-test.tsx.snap.web
+++ /dev/null
@@ -1,8 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders Header 1`] = `
-<header
-  className="css-view-1dbjc4n"
-  role="banner"
-/>
-`;
diff --git a/packages/html-elements/src/elements/__tests__/__snapshots__/Layout-test.tsx.snap.android b/packages/html-elements/src/elements/__tests__/__snapshots__/Layout-test.tsx.snap.android
index f8b4842eb75b3..412cb9929702c 100644
--- a/packages/html-elements/src/elements/__tests__/__snapshots__/Layout-test.tsx.snap.android
+++ b/packages/html-elements/src/elements/__tests__/__snapshots__/Layout-test.tsx.snap.android
@@ -1,5 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders Article 1`] = `<View />`;
+
+exports[`renders Aside 1`] = `<View />`;
+
 exports[`renders Footer 1`] = `<View />`;
 
+exports[`renders Header 1`] = `
+<View
+  accessibilityRole="header"
+/>
+`;
+
+exports[`renders Main 1`] = `<View />`;
+
 exports[`renders Nav 1`] = `<View />`;
+
+exports[`renders Section 1`] = `
+<View
+  accessibilityRole="summary"
+/>
+`;
diff --git a/packages/html-elements/src/elements/__tests__/__snapshots__/Layout-test.tsx.snap.ios b/packages/html-elements/src/elements/__tests__/__snapshots__/Layout-test.tsx.snap.ios
index f8b4842eb75b3..412cb9929702c 100644
--- a/packages/html-elements/src/elements/__tests__/__snapshots__/Layout-test.tsx.snap.ios
+++ b/packages/html-elements/src/elements/__tests__/__snapshots__/Layout-test.tsx.snap.ios
@@ -1,5 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders Article 1`] = `<View />`;
+
+exports[`renders Aside 1`] = `<View />`;
+
 exports[`renders Footer 1`] = `<View />`;
 
+exports[`renders Header 1`] = `
+<View
+  accessibilityRole="header"
+/>
+`;
+
+exports[`renders Main 1`] = `<View />`;
+
 exports[`renders Nav 1`] = `<View />`;
+
+exports[`renders Section 1`] = `
+<View
+  accessibilityRole="summary"
+/>
+`;
diff --git a/packages/html-elements/src/elements/__tests__/__snapshots__/Layout-test.tsx.snap.web b/packages/html-elements/src/elements/__tests__/__snapshots__/Layout-test.tsx.snap.web
index 5909661bc9821..a8fbaca6ce6c8 100644
--- a/packages/html-elements/src/elements/__tests__/__snapshots__/Layout-test.tsx.snap.web
+++ b/packages/html-elements/src/elements/__tests__/__snapshots__/Layout-test.tsx.snap.web
@@ -1,31 +1,50 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders Article 1`] = `
+<article
+  className="css-view-1dbjc4n"
+  role="article"
+/>
+`;
+
+exports[`renders Aside 1`] = `
+<aside
+  className="css-view-1dbjc4n"
+  role="complementary"
+/>
+`;
+
 exports[`renders Footer 1`] = `
 <footer
-  style={
-    Object {
-      "WebkitBoxDirection": "normal",
-      "WebkitBoxOrient": "vertical",
-      "WebkitFlexDirection": "column",
-      "display": "flex",
-      "flexDirection": "column",
-      "msFlexDirection": "column",
-    }
-  }
+  className="css-view-1dbjc4n"
+  role="contentinfo"
+/>
+`;
+
+exports[`renders Header 1`] = `
+<header
+  className="css-view-1dbjc4n"
+  role="banner"
+/>
+`;
+
+exports[`renders Main 1`] = `
+<main
+  className="css-view-1dbjc4n"
+  role="main"
 />
 `;
 
 exports[`renders Nav 1`] = `
 <nav
-  style={
-    Object {
-      "WebkitBoxDirection": "normal",
-      "WebkitBoxOrient": "vertical",
-      "WebkitFlexDirection": "column",
-      "display": "flex",
-      "flexDirection": "column",
-      "msFlexDirection": "column",
-    }
-  }
+  className="css-view-1dbjc4n"
+  role="navigation"
+/>
+`;
+
+exports[`renders Section 1`] = `
+<section
+  className="css-view-1dbjc4n"
+  role="region"
 />
 `;
diff --git a/packages/html-elements/src/elements/__tests__/__snapshots__/Main-test.tsx.snap.android b/packages/html-elements/src/elements/__tests__/__snapshots__/Main-test.tsx.snap.android
deleted file mode 100644
index c4d793a506e2f..0000000000000
--- a/packages/html-elements/src/elements/__tests__/__snapshots__/Main-test.tsx.snap.android
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders Main 1`] = `<View />`;
diff --git a/packages/html-elements/src/elements/__tests__/__snapshots__/Main-test.tsx.snap.ios b/packages/html-elements/src/elements/__tests__/__snapshots__/Main-test.tsx.snap.ios
deleted file mode 100644
index c4d793a506e2f..0000000000000
--- a/packages/html-elements/src/elements/__tests__/__snapshots__/Main-test.tsx.snap.ios
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders Main 1`] = `<View />`;
diff --git a/packages/html-elements/src/elements/__tests__/__snapshots__/Main-test.tsx.snap.web b/packages/html-elements/src/elements/__tests__/__snapshots__/Main-test.tsx.snap.web
deleted file mode 100644
index cadd014973337..0000000000000
--- a/packages/html-elements/src/elements/__tests__/__snapshots__/Main-test.tsx.snap.web
+++ /dev/null
@@ -1,8 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders Main 1`] = `
-<main
-  className="css-view-1dbjc4n"
-  role="main"
-/>
-`;
diff --git a/packages/html-elements/src/elements/__tests__/__snapshots__/Section-test.tsx.snap.android b/packages/html-elements/src/elements/__tests__/__snapshots__/Section-test.tsx.snap.android
deleted file mode 100644
index 0f1fe67cc6402..0000000000000
--- a/packages/html-elements/src/elements/__tests__/__snapshots__/Section-test.tsx.snap.android
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders Section 1`] = `
-<View
-  accessibilityRole="summary"
-/>
-`;
diff --git a/packages/html-elements/src/elements/__tests__/__snapshots__/Section-test.tsx.snap.ios b/packages/html-elements/src/elements/__tests__/__snapshots__/Section-test.tsx.snap.ios
deleted file mode 100644
index 0f1fe67cc6402..0000000000000
--- a/packages/html-elements/src/elements/__tests__/__snapshots__/Section-test.tsx.snap.ios
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders Section 1`] = `
-<View
-  accessibilityRole="summary"
-/>
-`;
diff --git a/packages/html-elements/src/elements/__tests__/__snapshots__/Section-test.tsx.snap.web b/packages/html-elements/src/elements/__tests__/__snapshots__/Section-test.tsx.snap.web
deleted file mode 100644
index 8447142923e85..0000000000000
--- a/packages/html-elements/src/elements/__tests__/__snapshots__/Section-test.tsx.snap.web
+++ /dev/null
@@ -1,8 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders Section 1`] = `
-<section
-  className="css-view-1dbjc4n"
-  role="region"
-/>
-`;
diff --git a/packages/html-elements/src/elements/__tests__/__snapshots__/Text-test.tsx.snap.android b/packages/html-elements/src/elements/__tests__/__snapshots__/Text-test.tsx.snap.android
index d15a82e10a1fe..79ec18064917d 100644
--- a/packages/html-elements/src/elements/__tests__/__snapshots__/Text-test.tsx.snap.android
+++ b/packages/html-elements/src/elements/__tests__/__snapshots__/Text-test.tsx.snap.android
@@ -155,7 +155,7 @@ exports[`renders Small 1`] = `
 <Text
   style={
     Object {
-      "fontSize": 10,
+      "fontSize": 12,
     }
   }
 />
diff --git a/packages/html-elements/src/elements/__tests__/__snapshots__/Text-test.tsx.snap.ios b/packages/html-elements/src/elements/__tests__/__snapshots__/Text-test.tsx.snap.ios
index d15a82e10a1fe..79ec18064917d 100644
--- a/packages/html-elements/src/elements/__tests__/__snapshots__/Text-test.tsx.snap.ios
+++ b/packages/html-elements/src/elements/__tests__/__snapshots__/Text-test.tsx.snap.ios
@@ -155,7 +155,7 @@ exports[`renders Small 1`] = `
 <Text
   style={
     Object {
-      "fontSize": 10,
+      "fontSize": 12,
     }
   }
 />
diff --git a/packages/html-elements/src/elements/__tests__/__snapshots__/Text-test.tsx.snap.web b/packages/html-elements/src/elements/__tests__/__snapshots__/Text-test.tsx.snap.web
index daecb580b5a76..94c1edc5c5c39 100644
--- a/packages/html-elements/src/elements/__tests__/__snapshots__/Text-test.tsx.snap.web
+++ b/packages/html-elements/src/elements/__tests__/__snapshots__/Text-test.tsx.snap.web
@@ -1,166 +1,227 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders B 1`] = `
-<b
+<div
+  className="css-text-901oao"
+  dir="auto"
   style={
     Object {
-      "color": "rgba(0,0,0,1.00)",
-      "fontFamily": "system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif",
+      "fontSize": "1em",
+      "fontWeight": "bold",
+      "marginBottom": "1em",
+      "marginTop": "1em",
     }
   }
 >
   demo
-</b>
+</div>
 `;
 
-exports[`renders BR 1`] = `<br />`;
+exports[`renders BR 1`] = `
+<div
+  className="css-text-901oao"
+  dir="auto"
+  style={
+    Object {
+      "height": "8px",
+      "width": "0px",
+    }
+  }
+/>
+`;
 
 exports[`renders BlockQuote 1`] = `
-<blockquote
+<div
+  className="css-view-1dbjc4n"
   style={
     Object {
-      "color": "rgba(0,0,0,1.00)",
-      "fontFamily": "system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif",
+      "marginBottom": "1em",
+      "marginTop": "1em",
     }
   }
 />
 `;
 
-exports[`renders Code 1`] = `<code />`;
+exports[`renders Code 1`] = `
+<div
+  className="css-text-901oao"
+  dir="auto"
+/>
+`;
 
 exports[`renders Del 1`] = `
-<del
+<div
+  className="css-text-901oao"
+  dir="auto"
   style={
     Object {
-      "color": "rgba(0,0,0,1.00)",
-      "fontFamily": "system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif",
+      "WebkitTextDecorationStyle": "solid",
+      "fontSize": "1em",
+      "marginBottom": "1em",
+      "marginTop": "1em",
+      "textDecoration": "line-through",
+      "textDecorationStyle": "solid",
     }
   }
 >
   demo
-</del>
+</div>
 `;
 
 exports[`renders EM 1`] = `
-<em
+<div
+  className="css-text-901oao"
+  dir="auto"
   style={
     Object {
-      "color": "rgba(0,0,0,1.00)",
-      "fontFamily": "system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif",
+      "fontSize": "1em",
+      "fontStyle": "italic",
+      "marginBottom": "1em",
+      "marginTop": "1em",
     }
   }
 >
   demo
-</em>
+</div>
 `;
 
 exports[`renders I 1`] = `
-<i
+<div
+  className="css-text-901oao"
+  dir="auto"
   style={
     Object {
-      "color": "rgba(0,0,0,1.00)",
-      "fontFamily": "system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif",
+      "fontSize": "1em",
+      "fontStyle": "italic",
+      "marginBottom": "1em",
+      "marginTop": "1em",
     }
   }
 >
   demo
-</i>
+</div>
 `;
 
 exports[`renders Mark 1`] = `
-<mark
+<div
+  className="css-text-901oao"
+  dir="auto"
   style={
     Object {
+      "backgroundColor": "rgba(255,255,0,1.00)",
       "color": "rgba(0,0,0,1.00)",
-      "fontFamily": "system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif",
     }
   }
 />
 `;
 
 exports[`renders P 1`] = `
-<p
+<div
+  className="css-text-901oao"
+  dir="auto"
   style={
     Object {
-      "color": "rgba(0,0,0,1.00)",
-      "fontFamily": "system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif",
+      "fontSize": "1em",
+      "marginBottom": "1em",
+      "marginTop": "1em",
     }
   }
 >
   demo
-</p>
+</div>
 `;
 
 exports[`renders Pre 1`] = `
-<pre>
+<div
+  className="css-text-901oao"
+  dir="auto"
+  style={
+    Object {
+      "marginBottom": "1em",
+      "marginTop": "1em",
+    }
+  }
+>
   
     body {
       color: red;
     }
   
-</pre>
+</div>
 `;
 
 exports[`renders Q 1`] = `
-<q
+<div
+  className="css-text-901oao"
+  dir="auto"
   style={
     Object {
-      "color": "rgba(0,0,0,1.00)",
-      "fontFamily": "system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif",
+      "fontSize": "1em",
+      "fontStyle": "italic",
+      "marginBottom": "1em",
+      "marginTop": "1em",
     }
   }
 >
+  "
   demo
-</q>
+  "
+</div>
 `;
 
 exports[`renders S 1`] = `
-<s
+<div
+  className="css-text-901oao"
+  dir="auto"
   style={
     Object {
-      "color": "rgba(0,0,0,1.00)",
-      "fontFamily": "system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif",
+      "WebkitTextDecorationStyle": "solid",
+      "fontSize": "1em",
+      "marginBottom": "1em",
+      "marginTop": "1em",
+      "textDecoration": "line-through",
+      "textDecorationStyle": "solid",
     }
   }
 >
   demo
-</s>
+</div>
 `;
 
 exports[`renders Small 1`] = `
-<small
+<div
+  className="css-text-901oao"
+  dir="auto"
   style={
     Object {
-      "color": "rgba(0,0,0,1.00)",
-      "fontFamily": "system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif",
+      "fontSize": "12px",
     }
   }
 />
 `;
 
 exports[`renders Strong 1`] = `
-<strong
+<div
+  className="css-text-901oao"
+  dir="auto"
   style={
     Object {
-      "color": "rgba(0,0,0,1.00)",
-      "fontFamily": "system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif",
+      "fontSize": "1em",
+      "fontWeight": "bold",
+      "marginBottom": "1em",
+      "marginTop": "1em",
     }
   }
 >
   demo
-</strong>
+</div>
 `;
 
 exports[`renders Time 1`] = `
-<time
-  dateTime="2001-05-15T19:00"
-  style={
-    Object {
-      "color": "rgba(0,0,0,1.00)",
-      "fontFamily": "system-ui,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Ubuntu,\\"Helvetica Neue\\",sans-serif",
-    }
-  }
+<div
+  className="css-text-901oao"
+  dir="auto"
 >
   May 15
-</time>
+</div>
 `;
diff --git a/packages/html-elements/src/primitives/View.tsx b/packages/html-elements/src/primitives/View.tsx
index 540a01893a933..260227ae61ee3 100644
--- a/packages/html-elements/src/primitives/View.tsx
+++ b/packages/html-elements/src/primitives/View.tsx
@@ -1,5 +1,10 @@
 import { ClassAttributes, ComponentProps, ComponentType } from 'react';
-import { StyleProp, View as NativeView, ViewStyle as NativeViewStyle } from 'react-native';
+import {
+  StyleProp,
+  View as NativeView,
+  AccessibilityRole,
+  ViewStyle as NativeViewStyle,
+} from 'react-native';
 
 // https://github.com/necolas/react-native-web/issues/832
 
@@ -120,7 +125,15 @@ export type ViewStyle = NativeViewStyle & WebViewStyle;
 export type WebViewProps = {
   style?: StyleProp<ViewStyle>;
 
-  accessibilityRole?: 'main' | 'article' | 'banner' | NativeViewProps['accessibilityRole'];
+  accessibilityRole?:
+    | 'complementary'
+    | 'contentinfo'
+    | 'region'
+    | 'navigation'
+    | 'main'
+    | 'article'
+    | 'banner'
+    | AccessibilityRole;
 };
 
 export type ViewProps = WebViewProps & Omit<NativeViewProps, 'style' | 'accessibilityRole'>;