@expo/html-elements 0.0.0 → 0.0.1-canary-20231125-d600e44

package/babel.js

@@ -7,6 +7,7 @@ const elementToComponent = {
   br: 'BR',
   caption: 'Caption',
   code: 'Code',
+  div: 'Div',
   footer: 'Footer',
   h1: 'H1',
   h2: 'H2',
@@ -36,14 +37,39 @@ const elementToComponent = {
   tr: 'TR',
   ul: 'UL',
   strong: 'Strong',
+  span: 'Span',
   aside: 'Aside',
   tfoot: 'TFoot',
+  blockquote: 'BlockQuote',
+  q: 'Q',
+
+  html: 'Div',
+  body: 'Div',
+
+  // TODO: img
+  // NOTE: head, meta, link should use some special component in the future.
 };
 
-module.exports = ({ types: t }, { expo }) => {
+function getPlatform(caller) {
+  return caller && caller.platform;
+}
+
+module.exports = ({ types: t, ...api }, { expo }) => {
+  const platform = api.caller(getPlatform);
+
   function replaceElement(path, state) {
+    // Not supported in node modules
+    if (/\/node_modules\//.test(state.filename)) {
+      return;
+    }
+
     const { name } = path.node.openingElement.name;
 
+    if (platform === 'web') {
+      if (['html', 'body'].includes(name)) {
+        return;
+      }
+    }
     // Replace element with @expo/html-elements
     const component = elementToComponent[name];
 
@@ -76,11 +102,11 @@ module.exports = ({ types: t }, { expo }) => {
   const importDeclarationVisitor = {
     ImportDeclaration(path, state) {
       if (path.get('source').isStringLiteral({ value: '@expo/html-elements' })) {
-        state.replacedComponents.forEach(component => {
+        state.replacedComponents.forEach((component) => {
           if (
             path
               .get('specifiers')
-              .some(specifier => specifier.get('local').isIdentifier({ name: component }))
+              .some((specifier) => specifier.get('local').isIdentifier({ name: component }))
           ) {
             return;
           }
@@ -93,6 +119,7 @@ module.exports = ({ types: t }, { expo }) => {
     },
   };
 
+  const source = '@expo/html-elements';
   return {
     name: 'Rewrite React DOM to universal Expo elements',
     visitor: {
@@ -101,6 +128,13 @@ module.exports = ({ types: t }, { expo }) => {
         state.unsupportedComponents = new Set();
 
         path.traverse(htmlElementVisitor, state);
+
+        // If state.replacedComponents is not empty, then ensure `import { ... } from '@expo/html-elements'` is present
+        if (state.replacedComponents.size > 0) {
+          const importDeclaration = t.importDeclaration([], t.stringLiteral(source));
+          path.unshiftContainer('body', importDeclaration);
+        }
+
         path.traverse(importDeclarationVisitor, state);
       },
     },

package/build/Elements.d.ts

@@ -5,3 +5,4 @@ export * from './elements/Text';
 export * from './elements/Rules';
 export * from './elements/Table';
 export * from './elements/Lists';
+//# sourceMappingURL=Elements.d.ts.map

package/build/Elements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Elements.d.ts","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"}

package/build/css/createSafeStyledView.d.ts

@@ -0,0 +1,2 @@
+export declare function createSafeStyledView<TView>(View: TView): TView;
+//# sourceMappingURL=createSafeStyledView.d.ts.map

package/build/css/createSafeStyledView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createSafeStyledView.d.ts","sourceRoot":"","sources":["../../src/css/createSafeStyledView.tsx"],"names":[],"mappings":"AAAA,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,SAGtD"}

package/build/css/createSafeStyledView.js

@@ -0,0 +1,5 @@
+export function createSafeStyledView(View) {
+    // Do nothing by default
+    return View;
+}
+//# sourceMappingURL=createSafeStyledView.js.map

package/build/css/createSafeStyledView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createSafeStyledView.js","sourceRoot":"","sources":["../../src/css/createSafeStyledView.tsx"],"names":[],"mappings":"AAAA,MAAM,UAAU,oBAAoB,CAAQ,IAAW;IACrD,wBAAwB;IACxB,OAAO,IAAI,CAAC;AACd,CAAC","sourcesContent":["export function createSafeStyledView<TView>(View: TView) {\n  // Do nothing by default\n  return View;\n}\n"]}

package/build/css/createSafeStyledView.native.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare function createSafeStyledView<TView extends React.ComponentType<any>>(View: TView): React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<TView>>;
+//# sourceMappingURL=createSafeStyledView.native.d.ts.map

package/build/css/createSafeStyledView.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createSafeStyledView.native.d.ts","sourceRoot":"","sources":["../../src/css/createSafeStyledView.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,wBAAgB,oBAAoB,CAAC,KAAK,SAAS,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,qGAOvF"}

package/build/css/createSafeStyledView.native.js

@@ -0,0 +1,10 @@
+import React, { useMemo } from 'react';
+import { filterStyles } from './filterStyles';
+export function createSafeStyledView(View) {
+    return React.forwardRef(({ style, ...props }, forwardedRef) => {
+        // Filter and apply `center` prop.
+        const finalStyle = useMemo(() => filterStyles(style), [style]);
+        return <View ref={forwardedRef} style={finalStyle} {...props}/>;
+    });
+}
+//# sourceMappingURL=createSafeStyledView.native.js.map

package/build/css/createSafeStyledView.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createSafeStyledView.native.js","sourceRoot":"","sources":["../../src/css/createSafeStyledView.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,UAAU,oBAAoB,CAAyC,IAAW;IACtF,OAAO,KAAK,CAAC,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAO,EAAE,YAA8B,EAAE,EAAE;QACnF,kCAAkC;QAClC,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;QAE/D,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;IACnE,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["import React, { useMemo } from 'react';\n\nimport { filterStyles } from './filterStyles';\n\nexport function createSafeStyledView<TView extends React.ComponentType<any>>(View: TView) {\n  return React.forwardRef(({ style, ...props }: any, forwardedRef: React.Ref<TView>) => {\n    // Filter and apply `center` prop.\n    const finalStyle = useMemo(() => filterStyles(style), [style]);\n\n    return <View ref={forwardedRef} style={finalStyle} {...props} />;\n  });\n}\n"]}

package/build/css/filterStyles.d.ts

@@ -0,0 +1,2 @@
+export declare function filterStyles(styleProp: any): any;
+//# sourceMappingURL=filterStyles.d.ts.map

package/build/css/filterStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterStyles.d.ts","sourceRoot":"","sources":["../../src/css/filterStyles.ts"],"names":[],"mappings":"AA0DA,wBAAgB,YAAY,CAAC,SAAS,KAAA,OAWrC"}

package/build/css/filterStyles.js

@@ -0,0 +1,83 @@
+import { StyleSheet } from 'react-native';
+// Remove the unsupported web styles from the style object
+// to prevent crashing.
+const WEB_STYLES = [
+    'backdropFilter',
+    'animationDelay',
+    'animationDirection',
+    'animationDuration',
+    'animationFillMode',
+    'animationName',
+    'animationIterationCount',
+    'animationPlayState',
+    'animationTimingFunction',
+    'backgroundAttachment',
+    'backgroundBlendMode',
+    'backgroundClip',
+    'backgroundImage',
+    'backgroundOrigin',
+    'backgroundPosition',
+    'backgroundRepeat',
+    'backgroundSize',
+    'boxShadow',
+    'boxSizing',
+    'clip',
+    'cursor',
+    'filter',
+    'gridAutoColumns',
+    'gridAutoFlow',
+    'gridAutoRows',
+    'gridColumnEnd',
+    'gridColumnGap',
+    'gridColumnStart',
+    'gridRowEnd',
+    'gridRowGap',
+    'gridRowStart',
+    'gridTemplateColumns',
+    'gridTemplateRows',
+    'gridTemplateAreas',
+    'outline',
+    'outlineColor',
+    'overflowX',
+    'overflowY',
+    'overscrollBehavior',
+    'overscrollBehaviorX',
+    'overscrollBehaviorY',
+    'perspective',
+    'perspectiveOrigin',
+    'touchAction',
+    'transformOrigin',
+    'transitionDelay',
+    'transitionDuration',
+    'transitionProperty',
+    'transitionTimingFunction',
+    'userSelect',
+    'willChange',
+];
+export function filterStyles(styleProp) {
+    if (!styleProp) {
+        return styleProp;
+    }
+    const style = StyleSheet.flatten(styleProp);
+    const filteredStyle = Object.fromEntries(Object.entries(style).filter(([k]) => !WEB_STYLES.includes(k)));
+    return processNativeStyles(filteredStyle);
+}
+function processNativeStyles(style) {
+    if (!style)
+        return style;
+    if (style.visibility) {
+        if (style.visibility === 'hidden') {
+            // style.display = "none";
+            style.opacity = 0;
+        }
+        delete style.visibility;
+    }
+    if (style.position) {
+        if (!['absolute', 'relative'].includes(style.position)) {
+            console.warn(`Unsupported position: '${style.position}'`);
+            style.position = 'relative';
+        }
+    }
+    return style;
+}
+//# sourceMappingURL=filterStyles.js.map

package/build/css/filterStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterStyles.js","sourceRoot":"","sources":["../../src/css/filterStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,0DAA0D;AAC1D,uBAAuB;AACvB,MAAM,UAAU,GAAG;IACjB,gBAAgB;IAChB,gBAAgB;IAChB,oBAAoB;IACpB,mBAAmB;IACnB,mBAAmB;IACnB,eAAe;IACf,yBAAyB;IACzB,oBAAoB;IACpB,yBAAyB;IACzB,sBAAsB;IACtB,qBAAqB;IACrB,gBAAgB;IAChB,iBAAiB;IACjB,kBAAkB;IAClB,oBAAoB;IACpB,kBAAkB;IAClB,gBAAgB;IAChB,WAAW;IACX,WAAW;IACX,MAAM;IACN,QAAQ;IACR,QAAQ;IACR,iBAAiB;IACjB,cAAc;IACd,cAAc;IACd,eAAe;IACf,eAAe;IACf,iBAAiB;IACjB,YAAY;IACZ,YAAY;IACZ,cAAc;IACd,qBAAqB;IACrB,kBAAkB;IAClB,mBAAmB;IACnB,SAAS;IACT,cAAc;IACd,WAAW;IACX,WAAW;IACX,oBAAoB;IACpB,qBAAqB;IACrB,qBAAqB;IACrB,aAAa;IACb,mBAAmB;IACnB,aAAa;IACb,iBAAiB;IACjB,iBAAiB;IACjB,oBAAoB;IACpB,oBAAoB;IACpB,0BAA0B;IAC1B,YAAY;IACZ,YAAY;CACb,CAAC;AAEF,MAAM,UAAU,YAAY,CAAC,SAAS;IACpC,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,SAAS,CAAC;KAClB;IACD,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAE5C,MAAM,aAAa,GAAG,MAAM,CAAC,WAAW,CACtC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAC/D,CAAC;IAEF,OAAO,mBAAmB,CAAC,aAAa,CAAC,CAAC;AAC5C,CAAC;AAED,SAAS,mBAAmB,CAAC,KAAK;IAChC,IAAI,CAAC,KAAK;QAAE,OAAO,KAAK,CAAC;IAEzB,IAAI,KAAK,CAAC,UAAU,EAAE;QACpB,IAAI,KAAK,CAAC,UAAU,KAAK,QAAQ,EAAE;YACjC,0BAA0B;YAC1B,KAAK,CAAC,OAAO,GAAG,CAAC,CAAC;SACnB;QACD,OAAO,KAAK,CAAC,UAAU,CAAC;KACzB;IAED,IAAI,KAAK,CAAC,QAAQ,EAAE;QAClB,IAAI,CAAC,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE;YACtD,OAAO,CAAC,IAAI,CAAC,0BAA0B,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC;YAC1D,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;SAC7B;KACF;IAED,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["import { StyleSheet } from 'react-native';\n\n// Remove the unsupported web styles from the style object\n// to prevent crashing.\nconst WEB_STYLES = [\n  'backdropFilter',\n  'animationDelay',\n  'animationDirection',\n  'animationDuration',\n  'animationFillMode',\n  'animationName',\n  'animationIterationCount',\n  'animationPlayState',\n  'animationTimingFunction',\n  'backgroundAttachment',\n  'backgroundBlendMode',\n  'backgroundClip',\n  'backgroundImage',\n  'backgroundOrigin',\n  'backgroundPosition',\n  'backgroundRepeat',\n  'backgroundSize',\n  'boxShadow',\n  'boxSizing',\n  'clip',\n  'cursor',\n  'filter',\n  'gridAutoColumns',\n  'gridAutoFlow',\n  'gridAutoRows',\n  'gridColumnEnd',\n  'gridColumnGap',\n  'gridColumnStart',\n  'gridRowEnd',\n  'gridRowGap',\n  'gridRowStart',\n  'gridTemplateColumns',\n  'gridTemplateRows',\n  'gridTemplateAreas',\n  'outline',\n  'outlineColor',\n  'overflowX',\n  'overflowY',\n  'overscrollBehavior',\n  'overscrollBehaviorX',\n  'overscrollBehaviorY',\n  'perspective',\n  'perspectiveOrigin',\n  'touchAction',\n  'transformOrigin',\n  'transitionDelay',\n  'transitionDuration',\n  'transitionProperty',\n  'transitionTimingFunction',\n  'userSelect',\n  'willChange',\n];\n\nexport function filterStyles(styleProp) {\n  if (!styleProp) {\n    return styleProp;\n  }\n  const style = StyleSheet.flatten(styleProp);\n\n  const filteredStyle = Object.fromEntries(\n    Object.entries(style).filter(([k]) => !WEB_STYLES.includes(k))\n  );\n\n  return processNativeStyles(filteredStyle);\n}\n\nfunction processNativeStyles(style) {\n  if (!style) return style;\n\n  if (style.visibility) {\n    if (style.visibility === 'hidden') {\n      // style.display = \"none\";\n      style.opacity = 0;\n    }\n    delete style.visibility;\n  }\n\n  if (style.position) {\n    if (!['absolute', 'relative'].includes(style.position)) {\n      console.warn(`Unsupported position: '${style.position}'`);\n      style.position = 'relative';\n    }\n  }\n\n  return style;\n}\n"]}

package/build/css/units.d.ts

@@ -1,2 +1,3 @@
 export declare function rem(value: number): number | string;
 export declare function em(value: number): number | string;
+//# sourceMappingURL=units.d.ts.map

package/build/css/units.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"units.d.ts","sourceRoot":"","sources":["../../src/css/units.ts"],"names":[],"mappings":"AAEA,wBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAGlD;AAED,wBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAGjD"}

package/build/elements/Anchor.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-export declare const A: React.ComponentType<React.PropsWithChildren<Pick<import("react-native").TextProps & React.ClassAttributes<typeof import("react-native").Text>, "allowFontScaling" | "ellipsizeMode" | "lineBreakMode" | "numberOfLines" | "onLayout" | "onPress" | "onLongPress" | "testID" | "nativeID" | "maxFontSizeMultiplier" | "adjustsFontSizeToFit" | "minimumFontScale" | "suppressHighlighting" | "selectable" | "selectionColor" | "textBreakStrategy" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "key" | "ref"> & import("../primitives/Text").WebTextProps & {
-    href?: string | undefined;
-    target?: string | undefined;
-}>>;
+import { LinkProps } from './Text.types';
+export declare const A: React.ComponentType<LinkProps>;
+//# sourceMappingURL=Anchor.d.ts.map

package/build/elements/Anchor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Anchor.d.ts","sourceRoot":"","sources":["../../src/elements/Anchor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAGzD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,eAAO,MAAM,CAAC,gCAoBgB,CAAC"}

package/build/elements/Anchor.js

@@ -1,14 +1,18 @@
 import React, { forwardRef } from 'react';
 import { Linking, Platform } from 'react-native';
 import Text from '../primitives/Text';
-export const A = forwardRef(({ href, target, ...props }, ref) => {
+export const A = forwardRef(({ href, target, download, rel, ...props }, ref) => {
     const nativeProps = Platform.select({
         web: {
             href,
-            target,
+            hrefAttrs: {
+                target,
+                download,
+                rel,
+            },
         },
         default: {
-            onPress: event => {
+            onPress: (event) => {
                 props.onPress && props.onPress(event);
                 if (Platform.OS !== 'web' && href !== undefined) {
                     Linking.openURL(href);
@@ -16,6 +20,6 @@ export const A = forwardRef(({ href, target, ...props }, ref) => {
             },
         },
     });
-    return React.createElement(Text, Object.assign({ accessibilityRole: "link" }, props, nativeProps, { ref: ref }));
+    return <Text role="link" {...props} {...nativeProps} ref={ref}/>;
 });
 //# sourceMappingURL=Anchor.js.map

package/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,oBAAC,IAAI,kBAAC,iBAAiB,EAAC,MAAM,IAAK,KAAK,EAAM,WAAW,IAAE,GAAG,EAAE,GAAG,IAAI,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"]}
+{"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;AAGjD,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAEtC,MAAM,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAa,EAAE,GAAG,EAAE,EAAE;IACxF,MAAM,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAY;QAC7C,GAAG,EAAE;YACH,IAAI;YACJ,SAAS,EAAE;gBACT,MAAM;gBACN,QAAQ;gBACR,GAAG;aACJ;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;gBACjB,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,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAG,CAAC;AACpE,CAAC,CAA6B,CAAC","sourcesContent":["import React, { ComponentType, forwardRef } from 'react';\nimport { Linking, Platform } from 'react-native';\n\nimport { LinkProps } from './Text.types';\nimport Text from '../primitives/Text';\n\nexport const A = forwardRef(({ href, target, download, rel, ...props }: LinkProps, ref) => {\n  const nativeProps = Platform.select<LinkProps>({\n    web: {\n      href,\n      hrefAttrs: {\n        target,\n        download,\n        rel,\n      },\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 role=\"link\" {...props} {...nativeProps} ref={ref} />;\n}) as ComponentType<LinkProps>;\n"]}

package/build/elements/Headings.d.ts

@@ -6,3 +6,4 @@ export declare const H3: React.ComponentType<TextProps>;
 export declare const H4: React.ComponentType<TextProps>;
 export declare const H5: React.ComponentType<TextProps>;
 export declare const H6: React.ComponentType<TextProps>;
+//# sourceMappingURL=Headings.d.ts.map

package/build/elements/Headings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Headings.d.ts","sourceRoot":"","sources":["../../src/elements/Headings.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAIzD,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAmBrD,eAAO,MAAM,EAAE,gCAA4B,CAAC;AAC5C,eAAO,MAAM,EAAE,gCAA4B,CAAC;AAC5C,eAAO,MAAM,EAAE,gCAA4B,CAAC;AAC5C,eAAO,MAAM,EAAE,gCAA4B,CAAC;AAC5C,eAAO,MAAM,EAAE,gCAA4B,CAAC;AAC5C,eAAO,MAAM,EAAE,gCAA4B,CAAC"}

package/build/elements/Headings.js

@@ -5,12 +5,15 @@ import Text from '../primitives/Text';
 function createHeadingComponent(level) {
     const nativeProps = Platform.select({
         web: {
-            'aria-level': `${level}`,
+            'aria-level': level,
+            role: 'header',
+        },
+        default: {
+            accessibilityRole: 'header',
         },
-        default: {},
     });
     return forwardRef((props, ref) => {
-        return (React.createElement(Text, Object.assign({}, nativeProps, { accessibilityRole: "header" }, props, { style: [styles[`h${level}`], props.style], ref: ref })));
+        return (<Text {...nativeProps} {...props} style={[styles[`h${level}`], props.style]} ref={ref}/>);
     });
 }
 export const H1 = createHeadingComponent(1);
@@ -19,35 +22,55 @@ export const H3 = createHeadingComponent(3);
 export const H4 = createHeadingComponent(4);
 export const H5 = createHeadingComponent(5);
 export const H6 = createHeadingComponent(6);
+if (__DEV__) {
+    H1.displayName = 'H1';
+    H2.displayName = 'H2';
+    H3.displayName = 'H3';
+    H4.displayName = 'H4';
+    H5.displayName = 'H5';
+    H6.displayName = 'H6';
+}
 // Default web styles: http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
 const styles = StyleSheet.create({
     h1: {
+        // @ts-ignore
         fontSize: em(2),
+        // @ts-ignore
         marginVertical: em(0.67),
         fontWeight: 'bold',
     },
     h2: {
+        // @ts-ignore
         fontSize: em(1.5),
+        // @ts-ignore
         marginVertical: em(0.83),
         fontWeight: 'bold',
     },
     h3: {
+        // @ts-ignore
         fontSize: em(1.17),
+        // @ts-ignore
         marginVertical: em(1),
         fontWeight: 'bold',
     },
     h4: {
+        // @ts-ignore
         fontSize: em(1),
+        // @ts-ignore
         marginVertical: em(1.33),
         fontWeight: 'bold',
     },
     h5: {
+        // @ts-ignore
         fontSize: em(0.83),
+        // @ts-ignore
         marginVertical: em(1.67),
         fontWeight: 'bold',
     },
     h6: {
+        // @ts-ignore
         fontSize: em(0.67),
+        // @ts-ignore
         marginVertical: em(2.33),
         fontWeight: 'bold',
     },

package/build/elements/Headings.js.map

@@ -1 +1 @@
-{"version":3,"file":"Headings.js","sourceRoot":"","sources":["../../src/elements/Headings.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,IAAmB,MAAM,oBAAoB,CAAC;AAErD,SAAS,sBAAsB,CAAC,KAAa;IAC3C,MAAM,WAAW,GAAQ,QAAQ,CAAC,MAAM,CAAC;QACvC,GAAG,EAAE;YACH,YAAY,EAAE,GAAG,KAAK,EAAE;SACzB;QACD,OAAO,EAAE,EAAE;KACZ,CAAC,CAAC;IACH,OAAO,UAAU,CAAC,CAAC,KAAgB,EAAE,GAAG,EAAE,EAAE;QAC1C,OAAO,CACL,oBAAC,IAAI,oBACC,WAAW,IACf,iBAAiB,EAAC,QAAQ,IACtB,KAAK,IACT,KAAK,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,EACzC,GAAG,EAAE,GAAG,IACR,CACH,CAAC;IACJ,CAAC,CAA6B,CAAC;AACjC,CAAC;AAED,MAAM,CAAC,MAAM,EAAE,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAAC;AAC5C,MAAM,CAAC,MAAM,EAAE,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAAC;AAC5C,MAAM,CAAC,MAAM,EAAE,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAAC;AAC5C,MAAM,CAAC,MAAM,EAAE,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAAC;AAC5C,MAAM,CAAC,MAAM,EAAE,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAAC;AAC5C,MAAM,CAAC,MAAM,EAAE,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAAC;AAE5C,uFAAuF;AACvF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,EAAE,EAAE;QACF,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC;QACf,cAAc,EAAE,EAAE,CAAC,IAAI,CAAC;QACxB,UAAU,EAAE,MAAM;KACnB;IACD,EAAE,EAAE;QACF,QAAQ,EAAE,EAAE,CAAC,GAAG,CAAC;QACjB,cAAc,EAAE,EAAE,CAAC,IAAI,CAAC;QACxB,UAAU,EAAE,MAAM;KACnB;IACD,EAAE,EAAE;QACF,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAC;QAClB,cAAc,EAAE,EAAE,CAAC,CAAC,CAAC;QACrB,UAAU,EAAE,MAAM;KACnB;IACD,EAAE,EAAE;QACF,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC;QACf,cAAc,EAAE,EAAE,CAAC,IAAI,CAAC;QACxB,UAAU,EAAE,MAAM;KACnB;IACD,EAAE,EAAE;QACF,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAC;QAClB,cAAc,EAAE,EAAE,CAAC,IAAI,CAAC;QACxB,UAAU,EAAE,MAAM;KACnB;IACD,EAAE,EAAE;QACF,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAC;QAClB,cAAc,EAAE,EAAE,CAAC,IAAI,CAAC;QACxB,UAAU,EAAE,MAAM;KACnB;CACF,CAAC,CAAC","sourcesContent":["import React, { ComponentType, forwardRef } from 'react';\nimport { Platform, StyleSheet } from 'react-native';\n\nimport { em } from '../css/units';\nimport Text, { TextProps } from '../primitives/Text';\n\nfunction createHeadingComponent(level: number): ComponentType<TextProps> {\n  const nativeProps: any = Platform.select({\n    web: {\n      'aria-level': `${level}`,\n    },\n    default: {},\n  });\n  return forwardRef((props: TextProps, ref) => {\n    return (\n      <Text\n        {...nativeProps}\n        accessibilityRole=\"header\"\n        {...props}\n        style={[styles[`h${level}`], props.style]}\n        ref={ref}\n      />\n    );\n  }) as ComponentType<TextProps>;\n}\n\nexport const H1 = createHeadingComponent(1);\nexport const H2 = createHeadingComponent(2);\nexport const H3 = createHeadingComponent(3);\nexport const H4 = createHeadingComponent(4);\nexport const H5 = createHeadingComponent(5);\nexport const H6 = createHeadingComponent(6);\n\n// Default web styles: http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css\nconst styles = StyleSheet.create({\n  h1: {\n    fontSize: em(2),\n    marginVertical: em(0.67),\n    fontWeight: 'bold',\n  },\n  h2: {\n    fontSize: em(1.5),\n    marginVertical: em(0.83),\n    fontWeight: 'bold',\n  },\n  h3: {\n    fontSize: em(1.17),\n    marginVertical: em(1),\n    fontWeight: 'bold',\n  },\n  h4: {\n    fontSize: em(1),\n    marginVertical: em(1.33),\n    fontWeight: 'bold',\n  },\n  h5: {\n    fontSize: em(0.83),\n    marginVertical: em(1.67),\n    fontWeight: 'bold',\n  },\n  h6: {\n    fontSize: em(0.67),\n    marginVertical: em(2.33),\n    fontWeight: 'bold',\n  },\n});\n"]}
+{"version":3,"file":"Headings.js","sourceRoot":"","sources":["../../src/elements/Headings.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,IAAmB,MAAM,oBAAoB,CAAC;AAErD,SAAS,sBAAsB,CAAC,KAAa;IAC3C,MAAM,WAAW,GAAQ,QAAQ,CAAC,MAAM,CAAC;QACvC,GAAG,EAAE;YACH,YAAY,EAAE,KAAK;YACnB,IAAI,EAAE,QAAQ;SACf;QACD,OAAO,EAAE;YACP,iBAAiB,EAAE,QAAQ;SAC5B;KACF,CAAC,CAAC;IACH,OAAO,UAAU,CAAC,CAAC,KAAgB,EAAE,GAAG,EAAE,EAAE;QAC1C,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAG,CAC1F,CAAC;IACJ,CAAC,CAA6B,CAAC;AACjC,CAAC;AAED,MAAM,CAAC,MAAM,EAAE,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAAC;AAC5C,MAAM,CAAC,MAAM,EAAE,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAAC;AAC5C,MAAM,CAAC,MAAM,EAAE,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAAC;AAC5C,MAAM,CAAC,MAAM,EAAE,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAAC;AAC5C,MAAM,CAAC,MAAM,EAAE,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAAC;AAC5C,MAAM,CAAC,MAAM,EAAE,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAAC;AAE5C,IAAI,OAAO,EAAE;IACX,EAAE,CAAC,WAAW,GAAG,IAAI,CAAC;IACtB,EAAE,CAAC,WAAW,GAAG,IAAI,CAAC;IACtB,EAAE,CAAC,WAAW,GAAG,IAAI,CAAC;IACtB,EAAE,CAAC,WAAW,GAAG,IAAI,CAAC;IACtB,EAAE,CAAC,WAAW,GAAG,IAAI,CAAC;IACtB,EAAE,CAAC,WAAW,GAAG,IAAI,CAAC;CACvB;AAED,uFAAuF;AACvF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,EAAE,EAAE;QACF,aAAa;QACb,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC;QACf,aAAa;QACb,cAAc,EAAE,EAAE,CAAC,IAAI,CAAC;QACxB,UAAU,EAAE,MAAM;KACnB;IACD,EAAE,EAAE;QACF,aAAa;QACb,QAAQ,EAAE,EAAE,CAAC,GAAG,CAAC;QACjB,aAAa;QACb,cAAc,EAAE,EAAE,CAAC,IAAI,CAAC;QACxB,UAAU,EAAE,MAAM;KACnB;IACD,EAAE,EAAE;QACF,aAAa;QACb,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAC;QAClB,aAAa;QACb,cAAc,EAAE,EAAE,CAAC,CAAC,CAAC;QACrB,UAAU,EAAE,MAAM;KACnB;IACD,EAAE,EAAE;QACF,aAAa;QACb,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC;QACf,aAAa;QACb,cAAc,EAAE,EAAE,CAAC,IAAI,CAAC;QACxB,UAAU,EAAE,MAAM;KACnB;IACD,EAAE,EAAE;QACF,aAAa;QACb,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAC;QAClB,aAAa;QACb,cAAc,EAAE,EAAE,CAAC,IAAI,CAAC;QACxB,UAAU,EAAE,MAAM;KACnB;IACD,EAAE,EAAE;QACF,aAAa;QACb,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAC;QAClB,aAAa;QACb,cAAc,EAAE,EAAE,CAAC,IAAI,CAAC;QACxB,UAAU,EAAE,MAAM;KACnB;CACF,CAAC,CAAC","sourcesContent":["import React, { ComponentType, forwardRef } from 'react';\nimport { Platform, StyleSheet } from 'react-native';\n\nimport { em } from '../css/units';\nimport Text, { TextProps } from '../primitives/Text';\n\nfunction createHeadingComponent(level: number): ComponentType<TextProps> {\n  const nativeProps: any = Platform.select({\n    web: {\n      'aria-level': level,\n      role: 'header',\n    },\n    default: {\n      accessibilityRole: 'header',\n    },\n  });\n  return forwardRef((props: TextProps, ref) => {\n    return (\n      <Text {...nativeProps} {...props} style={[styles[`h${level}`], props.style]} ref={ref} />\n    );\n  }) as ComponentType<TextProps>;\n}\n\nexport const H1 = createHeadingComponent(1);\nexport const H2 = createHeadingComponent(2);\nexport const H3 = createHeadingComponent(3);\nexport const H4 = createHeadingComponent(4);\nexport const H5 = createHeadingComponent(5);\nexport const H6 = createHeadingComponent(6);\n\nif (__DEV__) {\n  H1.displayName = 'H1';\n  H2.displayName = 'H2';\n  H3.displayName = 'H3';\n  H4.displayName = 'H4';\n  H5.displayName = 'H5';\n  H6.displayName = 'H6';\n}\n\n// Default web styles: http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css\nconst styles = StyleSheet.create({\n  h1: {\n    // @ts-ignore\n    fontSize: em(2),\n    // @ts-ignore\n    marginVertical: em(0.67),\n    fontWeight: 'bold',\n  },\n  h2: {\n    // @ts-ignore\n    fontSize: em(1.5),\n    // @ts-ignore\n    marginVertical: em(0.83),\n    fontWeight: 'bold',\n  },\n  h3: {\n    // @ts-ignore\n    fontSize: em(1.17),\n    // @ts-ignore\n    marginVertical: em(1),\n    fontWeight: 'bold',\n  },\n  h4: {\n    // @ts-ignore\n    fontSize: em(1),\n    // @ts-ignore\n    marginVertical: em(1.33),\n    fontWeight: 'bold',\n  },\n  h5: {\n    // @ts-ignore\n    fontSize: em(0.83),\n    // @ts-ignore\n    marginVertical: em(1.67),\n    fontWeight: 'bold',\n  },\n  h6: {\n    // @ts-ignore\n    fontSize: em(0.67),\n    // @ts-ignore\n    marginVertical: em(2.33),\n    fontWeight: 'bold',\n  },\n});\n"]}

package/build/elements/Layout.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ViewProps } from '../primitives/View';
+export declare const Div: React.ComponentType<ViewProps>;
 export declare const Nav: React.ComponentType<ViewProps>;
 export declare const Footer: React.ComponentType<ViewProps>;
 export declare const Aside: React.ComponentType<ViewProps>;
@@ -7,3 +8,4 @@ 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>;
+//# sourceMappingURL=Layout.d.ts.map

package/build/elements/Layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../src/elements/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAGzD,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAQrD,eAAO,MAAM,GAAG,gCAAe,CAAC;AAEhC,eAAO,MAAM,GAAG,gCAMf,CAAC;AACF,eAAO,MAAM,MAAM,gCAMlB,CAAC;AACF,eAAO,MAAM,KAAK,gCAMjB,CAAC;AACF,eAAO,MAAM,MAAM,gCASlB,CAAC;AACF,eAAO,MAAM,IAAI,gCAMhB,CAAC;AACF,eAAO,MAAM,OAAO,gCAMnB,CAAC;AACF,eAAO,MAAM,OAAO,gCAElB,CAAC"}

package/build/elements/Layout.js

@@ -3,27 +3,28 @@ import { Platform } from 'react-native';
 import View from '../primitives/View';
 function createView(nativeProps = {}) {
     return forwardRef((props, ref) => {
-        return React.createElement(View, Object.assign({}, nativeProps, props, { ref: ref }));
+        return <View {...nativeProps} {...props} ref={ref}/>;
     });
 }
+export const Div = createView();
 export const Nav = createView(Platform.select({
     web: {
-        accessibilityRole: 'navigation',
+        role: 'navigation',
     },
 }));
 export const Footer = createView(Platform.select({
     web: {
-        accessibilityRole: 'contentinfo',
+        role: 'contentinfo',
     },
 }));
 export const Aside = createView(Platform.select({
     web: {
-        accessibilityRole: 'complementary',
+        role: 'complementary',
     },
 }));
 export const Header = createView(Platform.select({
     web: {
-        accessibilityRole: 'banner',
+        role: 'banner',
     },
     default: {
         accessibilityRole: 'header',
@@ -31,15 +32,15 @@ export const Header = createView(Platform.select({
 }));
 export const Main = createView(Platform.select({
     web: {
-        accessibilityRole: 'main',
+        role: 'main',
     },
 }));
 export const Article = createView(Platform.select({
     web: {
-        accessibilityRole: 'article',
+        role: 'article',
     },
 }));
 export const Section = createView({
-    accessibilityRole: 'summary',
+    role: 'summary', // region?
 });
 //# sourceMappingURL=Layout.js.map

package/build/elements/Layout.js.map

@@ -1 +1 @@
-{"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,oBAAC,IAAI,oBAAK,WAAW,EAAM,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,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"]}
+{"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,EAAE,CAAC;AAEhC,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAC3B,QAAQ,CAAC,MAAM,CAAC;IACd,GAAG,EAAE;QACH,IAAI,EAAE,YAAY;KACnB;CACF,CAAC,CACH,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,QAAQ,CAAC,MAAM,CAAC;IACd,GAAG,EAAE;QACH,IAAI,EAAE,aAAa;KACpB;CACF,CAAC,CACH,CAAC;AACF,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,QAAQ,CAAC,MAAM,CAAC;IACd,GAAG,EAAE;QACH,IAAI,EAAE,eAAe;KACtB;CACF,CAAC,CACH,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,QAAQ,CAAC,MAAM,CAAC;IACd,GAAG,EAAE;QACH,IAAI,EAAE,QAAQ;KACf;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,IAAI,EAAE,MAAM;KACb;CACF,CAAC,CACH,CAAC;AACF,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAC/B,QAAQ,CAAC,MAAM,CAAC;IACd,GAAG,EAAE;QACH,IAAI,EAAE,SAAS;KAChB;CACF,CAAC,CACH,CAAC;AACF,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAAC;IAChC,IAAI,EAAE,SAAS,EAAE,UAAU;CAC5B,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 Div = createView();\n\nexport const Nav = createView(\n  Platform.select({\n    web: {\n      role: 'navigation',\n    },\n  })\n);\nexport const Footer = createView(\n  Platform.select({\n    web: {\n      role: 'contentinfo',\n    },\n  })\n);\nexport const Aside = createView(\n  Platform.select({\n    web: {\n      role: 'complementary',\n    },\n  })\n);\nexport const Header = createView(\n  Platform.select({\n    web: {\n      role: 'banner',\n    },\n    default: {\n      accessibilityRole: 'header',\n    },\n  })\n);\nexport const Main = createView(\n  Platform.select({\n    web: {\n      role: 'main',\n    },\n  })\n);\nexport const Article = createView(\n  Platform.select({\n    web: {\n      role: 'article',\n    },\n  })\n);\nexport const Section = createView({\n  role: 'summary', // region?\n});\n"]}

package/build/elements/Lists.d.ts

@@ -2,4 +2,7 @@ import React from 'react';
 import { TextProps } from '../primitives/Text';
 import { ViewProps } from '../primitives/View';
 export declare const UL: React.ComponentType<ViewProps>;
-export declare const LI: React.ComponentType<TextProps | ViewProps>;
+type LIProps = TextProps | ViewProps;
+export declare const LI: React.ComponentType<LIProps>;
+export {};
+//# sourceMappingURL=Lists.d.ts.map

package/build/elements/Lists.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lists.d.ts","sourceRoot":"","sources":["../../src/elements/Lists.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAG5E,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAQrD,eAAO,MAAM,EAAE,gCAMd,CAAC;AAOF,KAAK,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AAErC,eAAO,MAAM,EAAE,8BAaa,CAAC"}

package/build/elements/Lists.js

@@ -4,12 +4,12 @@ import Text from '../primitives/Text';
 import View from '../primitives/View';
 function createView(nativeProps = {}) {
     return forwardRef((props, ref) => {
-        return React.createElement(View, Object.assign({}, nativeProps, props, { ref: ref }));
+        return <View {...nativeProps} {...props} ref={ref}/>;
     });
 }
 export const UL = createView(Platform.select({
     web: {
-        accessibilityRole: 'list',
+        role: 'list',
     },
 }));
 function isTextProps(props) {
@@ -18,16 +18,16 @@ function isTextProps(props) {
 }
 export const LI = forwardRef((props, ref) => {
     if (isTextProps(props)) {
-        const accessibilityRole = Platform.select({
+        const role = Platform.select({
             web: 'listitem',
-            default: props.accessibilityRole,
+            default: props.role,
         });
-        return React.createElement(Text, Object.assign({}, props, { accessibilityRole: accessibilityRole, ref: ref }));
+        return <Text {...props} role={role} ref={ref}/>;
     }
-    const accessibilityRole = Platform.select({
+    const role = Platform.select({
         web: 'listitem',
-        default: props.accessibilityRole,
+        default: props.role,
     });
-    return React.createElement(View, Object.assign({}, props, { accessibilityRole: accessibilityRole, ref: ref }));
+    return <View {...props} role={role} ref={ref}/>;
 });
 //# sourceMappingURL=Lists.js.map

package/build/elements/Lists.js.map

@@ -1 +1 @@
-{"version":3,"file":"Lists.js","sourceRoot":"","sources":["../../src/elements/Lists.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,UAAU,EAAqB,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,IAAmB,MAAM,oBAAoB,CAAC;AACrD,OAAO,IAAmB,MAAM,oBAAoB,CAAC;AAErD,SAAS,UAAU,CAAC,cAAyB,EAAE;IAC7C,OAAO,UAAU,CAAC,CAAC,KAAgB,EAAE,GAAG,EAAE,EAAE;QAC1C,OAAO,oBAAC,IAAI,oBAAK,WAAW,EAAM,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IACxD,CAAC,CAA6B,CAAC;AACjC,CAAC;AAED,MAAM,CAAC,MAAM,EAAE,GAAG,UAAU,CAC1B,QAAQ,CAAC,MAAM,CAAC;IACd,GAAG,EAAE;QACH,iBAAiB,EAAE,MAAM;KAC1B;CACF,CAAC,CACH,CAAC;AAEF,SAAS,WAAW,CAAC,KAAU;IAC7B,qCAAqC;IACrC,OAAO,OAAO,KAAK,CAAC,QAAQ,KAAK,QAAQ,CAAC;AAC5C,CAAC;AAID,MAAM,CAAC,MAAM,EAAE,GAAG,UAAU,CAAC,CAAC,KAAiC,EAAE,GAAQ,EAAE,EAAE;IAC3E,IAAI,WAAW,CAAC,KAAK,CAAC,EAAE;QACtB,MAAM,iBAAiB,GAAiC,QAAQ,CAAC,MAAM,CAAC;YACtE,GAAG,EAAE,UAAU;YACf,OAAO,EAAE,KAAK,CAAC,iBAAiB;SACjC,CAAC,CAAC;QACH,OAAO,oBAAC,IAAI,oBAAK,KAAK,IAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;KAC5E;IACD,MAAM,iBAAiB,GAAiC,QAAQ,CAAC,MAAM,CAAC;QACtE,GAAG,EAAE,UAAU;QACf,OAAO,EAAE,KAAK,CAAC,iBAAiB;KACjC,CAAC,CAAC;IACH,OAAO,oBAAC,IAAI,oBAAK,KAAK,IAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AAC7E,CAAC,CAA2B,CAAC","sourcesContent":["import React, { ComponentType, forwardRef, PropsWithChildren } from 'react';\nimport { Platform } from 'react-native';\n\nimport Text, { TextProps } from '../primitives/Text';\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 UL = createView(\n  Platform.select({\n    web: {\n      accessibilityRole: 'list',\n    },\n  })\n);\n\nfunction isTextProps(props: any): props is TextProps {\n  // Treat <li></li> as a Text element.\n  return typeof props.children === 'string';\n}\n\ntype LIProps = TextProps | ViewProps;\n\nexport const LI = forwardRef((props: PropsWithChildren<LIProps>, ref: any) => {\n  if (isTextProps(props)) {\n    const accessibilityRole: LIProps['accessibilityRole'] = Platform.select({\n      web: 'listitem',\n      default: props.accessibilityRole,\n    });\n    return <Text {...props} accessibilityRole={accessibilityRole} ref={ref} />;\n  }\n  const accessibilityRole: LIProps['accessibilityRole'] = Platform.select({\n    web: 'listitem',\n    default: props.accessibilityRole,\n  });\n  return <View {...props} accessibilityRole={accessibilityRole} ref={ref} />;\n}) as ComponentType<LIProps>;\n"]}
+{"version":3,"file":"Lists.js","sourceRoot":"","sources":["../../src/elements/Lists.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,UAAU,EAAqB,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,IAAmB,MAAM,oBAAoB,CAAC;AACrD,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,EAAE,GAAG,UAAU,CAC1B,QAAQ,CAAC,MAAM,CAAC;IACd,GAAG,EAAE;QACH,IAAI,EAAE,MAAM;KACb;CACF,CAAC,CACH,CAAC;AAEF,SAAS,WAAW,CAAC,KAAU;IAC7B,qCAAqC;IACrC,OAAO,OAAO,KAAK,CAAC,QAAQ,KAAK,QAAQ,CAAC;AAC5C,CAAC;AAID,MAAM,CAAC,MAAM,EAAE,GAAG,UAAU,CAAC,CAAC,KAAiC,EAAE,GAAQ,EAAE,EAAE;IAC3E,IAAI,WAAW,CAAC,KAAK,CAAC,EAAE;QACtB,MAAM,IAAI,GAAoB,QAAQ,CAAC,MAAM,CAAC;YAC5C,GAAG,EAAE,UAAU;YACf,OAAO,EAAE,KAAK,CAAC,IAAI;SACpB,CAAC,CAAC;QACH,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAG,CAAC;KAClD;IACD,MAAM,IAAI,GAAoB,QAAQ,CAAC,MAAM,CAAC;QAC5C,GAAG,EAAE,UAAU;QACf,OAAO,EAAE,KAAK,CAAC,IAAI;KACpB,CAAC,CAAC;IACH,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAG,CAAC;AACnD,CAAC,CAA2B,CAAC","sourcesContent":["import React, { ComponentType, forwardRef, PropsWithChildren } from 'react';\nimport { Platform } from 'react-native';\n\nimport Text, { TextProps } from '../primitives/Text';\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 UL = createView(\n  Platform.select({\n    web: {\n      role: 'list',\n    },\n  })\n);\n\nfunction isTextProps(props: any): props is TextProps {\n  // Treat <li></li> as a Text element.\n  return typeof props.children === 'string';\n}\n\ntype LIProps = TextProps | ViewProps;\n\nexport const LI = forwardRef((props: PropsWithChildren<LIProps>, ref: any) => {\n  if (isTextProps(props)) {\n    const role: LIProps['role'] = Platform.select({\n      web: 'listitem',\n      default: props.role,\n    });\n    return <Text {...props} role={role} ref={ref} />;\n  }\n  const role: LIProps['role'] = Platform.select({\n    web: 'listitem',\n    default: props.role,\n  });\n  return <View {...props} role={role} ref={ref} />;\n}) as ComponentType<LIProps>;\n"]}

package/build/elements/Rules.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 import { ViewProps } from '../primitives/View';
 export declare const HR: React.ComponentType<ViewProps>;
+//# sourceMappingURL=Rules.d.ts.map

package/build/elements/Rules.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rules.d.ts","sourceRoot":"","sources":["../../src/elements/Rules.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAGzD,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAErD,eAAO,MAAM,EAAE,gCAEe,CAAC"}

package/build/elements/Rules.js

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 import { StyleSheet } from 'react-native';
 import View from '../primitives/View';
 export const HR = forwardRef((props, ref) => {
-    return React.createElement(View, Object.assign({}, props, { style: [styles.hr, props.style], ref: ref }));
+    return <View {...props} style={[styles.hr, props.style]} ref={ref}/>;
 });
 const styles = StyleSheet.create({
     hr: {

package/build/elements/Rules.js.map

@@ -1 +1 @@
-{"version":3,"file":"Rules.js","sourceRoot":"","sources":["../../src/elements/Rules.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,IAAmB,MAAM,oBAAoB,CAAC;AAErD,MAAM,CAAC,MAAM,EAAE,GAAG,UAAU,CAAC,CAAC,KAAgB,EAAE,GAAG,EAAE,EAAE;IACrD,OAAO,oBAAC,IAAI,oBAAK,KAAK,IAAE,KAAK,EAAE,CAAC,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AACxE,CAAC,CAA6B,CAAC;AAE/B,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,EAAE,EAAE;QACF,cAAc,EAAE,UAAU,CAAC,aAAa;QACxC,iBAAiB,EAAE,UAAU,CAAC,aAAa;QAC3C,cAAc,EAAE,SAAS;QACzB,iBAAiB,EAAE,SAAS;QAC5B,cAAc,EAAE,CAAC;KAClB;CACF,CAAC,CAAC","sourcesContent":["import React, { ComponentType, forwardRef } from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport View, { ViewProps } from '../primitives/View';\n\nexport const HR = forwardRef((props: ViewProps, ref) => {\n  return <View {...props} style={[styles.hr, props.style]} ref={ref} />;\n}) as ComponentType<ViewProps>;\n\nconst styles = StyleSheet.create({\n  hr: {\n    borderTopWidth: StyleSheet.hairlineWidth,\n    borderBottomWidth: StyleSheet.hairlineWidth,\n    borderTopColor: '#9A9A9A',\n    borderBottomColor: '#EEEEEE',\n    marginVertical: 8,\n  },\n});\n"]}
+{"version":3,"file":"Rules.js","sourceRoot":"","sources":["../../src/elements/Rules.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,IAAmB,MAAM,oBAAoB,CAAC;AAErD,MAAM,CAAC,MAAM,EAAE,GAAG,UAAU,CAAC,CAAC,KAAgB,EAAE,GAAG,EAAE,EAAE;IACrD,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAG,CAAC;AACxE,CAAC,CAA6B,CAAC;AAE/B,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,EAAE,EAAE;QACF,cAAc,EAAE,UAAU,CAAC,aAAa;QACxC,iBAAiB,EAAE,UAAU,CAAC,aAAa;QAC3C,cAAc,EAAE,SAAS;QACzB,iBAAiB,EAAE,SAAS;QAC5B,cAAc,EAAE,CAAC;KAClB;CACF,CAAC,CAAC","sourcesContent":["import React, { ComponentType, forwardRef } from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport View, { ViewProps } from '../primitives/View';\n\nexport const HR = forwardRef((props: ViewProps, ref) => {\n  return <View {...props} style={[styles.hr, props.style]} ref={ref} />;\n}) as ComponentType<ViewProps>;\n\nconst styles = StyleSheet.create({\n  hr: {\n    borderTopWidth: StyleSheet.hairlineWidth,\n    borderBottomWidth: StyleSheet.hairlineWidth,\n    borderTopColor: '#9A9A9A',\n    borderBottomColor: '#EEEEEE',\n    marginVertical: 8,\n  },\n});\n"]}

package/build/elements/Rules.web.d.ts

@@ -1,3 +1,4 @@
 import { ComponentType } from 'react';
 import { ViewProps } from '../primitives/View';
 export declare const HR: ComponentType<ViewProps>;
+//# sourceMappingURL=Rules.web.d.ts.map

package/build/elements/Rules.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rules.web.d.ts","sourceRoot":"","sources":["../../src/elements/Rules.web.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAc,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,eAAO,MAAM,EAAE,0BAEe,CAAC"}

package/build/elements/Table.d.ts

@@ -10,3 +10,4 @@ export declare const TH: React.ComponentType<TableTextProps>;
 export declare const TR: React.ComponentType<ViewProps>;
 export declare const TD: React.ComponentType<TableTextProps>;
 export declare const Caption: React.ComponentType<TextProps>;
+//# sourceMappingURL=Table.d.ts.map