@expo/html-elements 0.12.2 → 0.12.4

package/CHANGELOG.md

@@ -10,6 +10,20 @@
 
 ### 💡 Others
 
+## 0.12.4 — 2025-04-25
+
+_This version does not introduce any user-facing changes._
+
+## 0.12.3 — 2025-04-22
+
+### 🛠 Breaking changes
+
+- Upgrade to React 19 and remove compiled build code. ([#36273](https://github.com/expo/expo/pull/36273) by [@EvanBacon](https://github.com/EvanBacon))
+
+### 💡 Others
+
+- Switch web testing to `@testing-library/react`. ([#36293](https://github.com/expo/expo/pull/36293) by [@EvanBacon](https://github.com/EvanBacon))
+
 ## 0.12.2 — 2025-04-14
 
 _This version does not introduce any user-facing changes._

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

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare function createSafeStyledView<TView extends React.ComponentType<any>>(View: TView): React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<TView>>;
+export declare function createSafeStyledView<TView extends React.ComponentType<any>>(View: TView): ({ style, ...props }: any) => React.JSX.Element;
 //# sourceMappingURL=createSafeStyledView.native.d.ts.map

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

@@ -1 +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,kFAOvF"}
+{"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,IACjE,qBAAqB,GAAG,uBAM9C"}

package/build/elements/Anchor.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType } from 'react';
+import React from 'react';
 import { LinkProps } from './Text.types';
-export declare const A: ComponentType<LinkProps>;
+export declare function A({ href, target, download, rel, ...props }: LinkProps): React.JSX.Element;
 //# sourceMappingURL=Anchor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Anchor.d.ts","sourceRoot":"","sources":["../../src/elements/Anchor.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAc,MAAM,OAAO,CAAC;AAGzD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,eAAO,MAAM,CAAC,EAoBR,aAAa,CAAC,SAAS,CAAC,CAAC"}
+{"version":3,"file":"Anchor.d.ts","sourceRoot":"","sources":["../../src/elements/Anchor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,wBAAgB,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBAoBrE"}

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

@@ -1 +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;AAqBrD,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"}
+{"version":3,"file":"Headings.d.ts","sourceRoot":"","sources":["../../src/elements/Headings.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAyBrD,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/Layout.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../src/elements/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAG7C,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/Lists.d.ts

@@ -1,8 +1,8 @@
-import React, { ComponentType } from 'react';
+import React, { PropsWithChildren } from 'react';
 import { TextProps } from '../primitives/Text';
 import { ViewProps } from '../primitives/View';
 export declare const UL: React.ComponentType<ViewProps>;
 type LIProps = TextProps | ViewProps;
-export declare const LI: ComponentType<LIProps>;
+export declare function LI(props: PropsWithChildren<LIProps>): React.JSX.Element;
 export {};
 //# sourceMappingURL=Lists.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Lists.d.ts","sourceRoot":"","sources":["../../src/elements/Lists.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAiC,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,EAaT,aAAa,CAAC,OAAO,CAAC,CAAC"}
+{"version":3,"file":"Lists.d.ts","sourceRoot":"","sources":["../../src/elements/Lists.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGhE,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAQrD,eAAO,MAAM,EAAE,gCAMd,CAAC;AAWF,KAAK,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AAErC,wBAAgB,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,qBAanD"}

package/build/elements/Rules.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"Rules.d.ts","sourceRoot":"","sources":["../../src/elements/Rules.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAc,MAAM,OAAO,CAAC;AAGzD,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAErD,eAAO,MAAM,EAAE,EAET,aAAa,CAAC,SAAS,CAAC,CAAC"}
+{"version":3,"file":"Rules.d.ts","sourceRoot":"","sources":["../../src/elements/Rules.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAErD,wBAAgB,EAAE,CAAC,KAAK,EAAE,SAAS,qBAElC"}

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

@@ -1,4 +1,3 @@
-import { ComponentType } from 'react';
 import { ViewProps } from '../primitives/View';
-export declare const HR: ComponentType<ViewProps>;
+export declare function HR(props: ViewProps): import("react").ReactElement<import("../primitives/View").WebViewProps & Omit<import("react-native").ViewProps & import("react").ClassAttributes<typeof import("react-native").View>, "style">, string | import("react").JSXElementConstructor<any>>;
 //# sourceMappingURL=Rules.web.d.ts.map

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

@@ -1 +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,EAET,aAAa,CAAC,SAAS,CAAC,CAAC"}
+{"version":3,"file":"Rules.web.d.ts","sourceRoot":"","sources":["../../src/elements/Rules.web.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,wBAAgB,EAAE,CAAC,KAAK,EAAE,SAAS,wPAElC"}

package/build/elements/Table.d.ts

@@ -1,13 +1,13 @@
-import { ComponentType } from 'react';
+import React from 'react';
 import { TableTextProps } from '../primitives/Table';
 import { TextProps } from '../primitives/Text';
 import { ViewProps } from '../primitives/View';
-export declare const Table: ComponentType<ViewProps>;
-export declare const THead: ComponentType<ViewProps>;
-export declare const TBody: ComponentType<ViewProps>;
-export declare const TFoot: ComponentType<ViewProps>;
-export declare const TH: ComponentType<TableTextProps>;
-export declare const TR: ComponentType<ViewProps>;
-export declare const TD: ComponentType<TableTextProps>;
-export declare const Caption: ComponentType<TextProps>;
+export declare function Table(props: ViewProps): React.JSX.Element;
+export declare function THead(props: ViewProps): React.JSX.Element;
+export declare function TBody(props: ViewProps): React.JSX.Element;
+export declare function TFoot(props: ViewProps): React.JSX.Element;
+export declare function TH(props: TableTextProps): React.JSX.Element;
+export declare function TR(props: ViewProps): React.JSX.Element;
+export declare function TD(props: TableTextProps): React.JSX.Element;
+export declare function Caption(props: TextProps): React.JSX.Element;
 //# sourceMappingURL=Table.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/elements/Table.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAc,MAAM,OAAO,CAAC;AAIzD,OAAO,EAAa,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAErD,eAAO,MAAM,KAAK,EAEZ,aAAa,CAAC,SAAS,CAAC,CAAC;AAE/B,eAAO,MAAM,KAAK,EAEZ,aAAa,CAAC,SAAS,CAAC,CAAC;AAE/B,eAAO,MAAM,KAAK,EAEZ,aAAa,CAAC,SAAS,CAAC,CAAC;AAE/B,eAAO,MAAM,KAAK,EAEZ,aAAa,CAAC,SAAS,CAAC,CAAC;AAE/B,eAAO,MAAM,EAAE,EAET,aAAa,CAAC,cAAc,CAAC,CAAC;AAEpC,eAAO,MAAM,EAAE,EAET,aAAa,CAAC,SAAS,CAAC,CAAC;AAE/B,eAAO,MAAM,EAAE,EAET,aAAa,CAAC,cAAc,CAAC,CAAC;AAEpC,eAAO,MAAM,OAAO,EAEd,aAAa,CAAC,SAAS,CAAC,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/elements/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAa,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAErD,wBAAgB,KAAK,CAAC,KAAK,EAAE,SAAS,qBAErC;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,SAAS,qBAErC;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,SAAS,qBAErC;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,SAAS,qBAErC;AAED,wBAAgB,EAAE,CAAC,KAAK,EAAE,cAAc,qBAEvC;AAED,wBAAgB,EAAE,CAAC,KAAK,EAAE,SAAS,qBAElC;AAED,wBAAgB,EAAE,CAAC,KAAK,EAAE,cAAc,qBAEvC;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,SAAS,qBAEvC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Table.web.d.ts","sourceRoot":"","sources":["../../src/elements/Table.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAGzD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAS/C,eAAO,MAAM,KAAK,gCAAqC,CAAC;AAExD,eAAO,MAAM,KAAK,gCAAqC,CAAC;AAExD,eAAO,MAAM,KAAK,gCAAqC,CAAC;AAExD,eAAO,MAAM,KAAK,gCAAqC,CAAC;AAExD,eAAO,MAAM,EAAE,gCAAkC,CAAC;AAElD,eAAO,MAAM,EAAE,gCAAkC,CAAC;AAElD,eAAO,MAAM,EAAE,gCAAkC,CAAC;AAElD,eAAO,MAAM,OAAO,gCAAuC,CAAC"}
+{"version":3,"file":"Table.web.d.ts","sourceRoot":"","sources":["../../src/elements/Table.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAG7C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAS/C,eAAO,MAAM,KAAK,gCAAqC,CAAC;AAExD,eAAO,MAAM,KAAK,gCAAqC,CAAC;AAExD,eAAO,MAAM,KAAK,gCAAqC,CAAC;AAExD,eAAO,MAAM,KAAK,gCAAqC,CAAC;AAExD,eAAO,MAAM,EAAE,gCAAkC,CAAC;AAElD,eAAO,MAAM,EAAE,gCAAkC,CAAC;AAElD,eAAO,MAAM,EAAE,gCAAkC,CAAC;AAElD,eAAO,MAAM,OAAO,gCAAuC,CAAC"}

package/build/elements/Text.d.ts

@@ -1,22 +1,22 @@
-import React, { ComponentType } from 'react';
+import React from 'react';
 import { BlockQuoteProps, QuoteProps, TimeProps } from './Text.types';
 import { TextProps } from '../primitives/Text';
 import { ViewProps } from '../primitives/View';
-export declare const P: ComponentType<TextProps>;
-export declare const B: ComponentType<TextProps>;
-export declare const S: ComponentType<TextProps>;
-export declare const I: ComponentType<TextProps>;
-export declare const Q: ComponentType<QuoteProps>;
-export declare const BlockQuote: ComponentType<BlockQuoteProps>;
-export declare const BR: ComponentType<TextProps>;
-export declare const Mark: ComponentType<TextProps>;
-export declare const Code: ComponentType<TextProps>;
+export declare function P({ style, ...props }: TextProps): React.JSX.Element;
+export declare function B({ style, ...props }: TextProps): React.JSX.Element;
+export declare function S({ style, ...props }: TextProps): React.JSX.Element;
+export declare function I({ style, ...props }: TextProps): React.JSX.Element;
+export declare function Q({ children, cite, style, ...props }: QuoteProps): React.JSX.Element;
+export declare function BlockQuote({ style, cite, ...props }: BlockQuoteProps): React.JSX.Element;
+export declare function BR({ style, ...props }: TextProps): React.JSX.Element;
+export declare function Mark({ style, ...props }: TextProps): React.JSX.Element;
+export declare function Code({ style, ...props }: TextProps): React.JSX.Element;
 type PreProps = TextProps | ViewProps;
-export declare const Pre: ComponentType<PreProps>;
-export declare const Time: ComponentType<TimeProps>;
-export declare const Strong: React.ComponentType<TextProps>;
-export declare const Del: React.ComponentType<TextProps>;
-export declare const EM: React.ComponentType<TextProps>;
+export declare function Pre(props: PreProps): React.JSX.Element;
+export declare function Time({ dateTime, ...props }: TimeProps): React.JSX.Element;
+export declare const Strong: typeof B;
+export declare const Del: typeof S;
+export declare const EM: typeof I;
 export declare const Span: React.ComponentType<TextProps>;
 export {};
 //# sourceMappingURL=Text.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/elements/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAc,MAAM,OAAO,CAAC;AAGzD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEtE,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAErD,eAAO,MAAM,CAAC,EAER,aAAa,CAAC,SAAS,CAAC,CAAC;AAE/B,eAAO,MAAM,CAAC,EAER,aAAa,CAAC,SAAS,CAAC,CAAC;AAE/B,eAAO,MAAM,CAAC,EAER,aAAa,CAAC,SAAS,CAAC,CAAC;AAE/B,eAAO,MAAM,CAAC,EAER,aAAa,CAAC,SAAS,CAAC,CAAC;AAE/B,eAAO,MAAM,CAAC,EAMR,aAAa,CAAC,UAAU,CAAC,CAAC;AAEhC,eAAO,MAAM,UAAU,EAEjB,aAAa,CAAC,eAAe,CAAC,CAAC;AAErC,eAAO,MAAM,EAAE,EAET,aAAa,CAAC,SAAS,CAAC,CAAC;AAE/B,eAAO,MAAM,IAAI,EAEX,aAAa,CAAC,SAAS,CAAC,CAAC;AAE/B,eAAO,MAAM,IAAI,EAEX,aAAa,CAAC,SAAS,CAAC,CAAC;AAM/B,KAAK,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtC,eAAO,MAAM,GAAG,EAKV,aAAa,CAAC,QAAQ,CAAC,CAAC;AAG9B,eAAO,MAAM,IAAI,EAEX,aAAa,CAAC,SAAS,CAAC,CAAC;AAE/B,eAAO,MAAM,MAAM,gCAAI,CAAC;AACxB,eAAO,MAAM,GAAG,gCAAI,CAAC;AACrB,eAAO,MAAM,EAAE,gCAAI,CAAC;AACpB,eAAO,MAAM,IAAI,gCAAO,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/elements/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEtE,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAErD,wBAAgB,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBAE/C;AAED,wBAAgB,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBAE/C;AAED,wBAAgB,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBAE/C;AAED,wBAAgB,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBAE/C;AAED,wBAAgB,CAAC,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,qBAMhE;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,qBAEpE;AAED,wBAAgB,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBAEhD;AAED,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBAElD;AAED,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBAElD;AAMD,KAAK,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtC,wBAAgB,GAAG,CAAC,KAAK,EAAE,QAAQ,qBAKlC;AAGD,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBAErD;AAED,eAAO,MAAM,MAAM,UAAI,CAAC;AACxB,eAAO,MAAM,GAAG,UAAI,CAAC;AACrB,eAAO,MAAM,EAAE,UAAI,CAAC;AACpB,eAAO,MAAM,IAAI,gCAAO,CAAC"}

package/build/primitives/RNWView.d.ts

@@ -8,12 +8,14 @@
  */
 import * as React from 'react';
 import { ViewProps } from 'react-native-web/dist/exports/View/types';
-import { PlatformMethods } from 'react-native-web/dist/types';
 /**
  * This is the View from react-native-web copied out in order to supply a custom `__element` property.
  * In the past, you could use `createElement` to create an element with a custom HTML element, but this changed
  * somewhere between 0.14...0.17.
  */
-declare const View: React.ForwardRefExoticComponent<HTMLElement & PlatformMethods & React.RefAttributes<ViewProps>>;
+declare function View(props: ViewProps): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+declare namespace View {
+    var displayName: string;
+}
 export default View;
 //# sourceMappingURL=RNWView.d.ts.map

package/build/primitives/RNWView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RNWView.d.ts","sourceRoot":"","sources":["../../src/primitives/RNWView.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AASrE,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AA4B9D;;;;GAIG;AAEH,QAAA,MAAM,IAAI,iGAyFR,CAAC;AA8BH,eAAe,IAAI,CAAC"}
+{"version":3,"file":"RNWView.d.ts","sourceRoot":"","sources":["../../src/primitives/RNWView.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAoCrE;;;;GAIG;AAEH,iBAAS,IAAI,CAAC,KAAK,EAAE,SAAS,iGA8F7B;kBA9FQ,IAAI;;;AA4Hb,eAAe,IAAI,CAAC"}

package/build/primitives/createDevView.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 /** Extend a view with a `children` filter that asserts more helpful warnings/errors. */
-export declare function createDevView<TView extends React.ComponentType<any>>(View: TView): React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<TView>>;
+export declare function createDevView<TView extends React.ComponentType<any>>(View: TView): ({ children, ...props }: any) => React.JSX.Element;
 //# sourceMappingURL=createDevView.d.ts.map

package/build/primitives/createDevView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createDevView.d.ts","sourceRoot":"","sources":["../../src/primitives/createDevView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAmC1B,wFAAwF;AACxF,wBAAgB,aAAa,CAAC,KAAK,SAAS,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,kFAIhF"}
+{"version":3,"file":"createDevView.d.ts","sourceRoot":"","sources":["../../src/primitives/createDevView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAmC1B,wFAAwF;AACxF,wBAAgB,aAAa,CAAC,KAAK,SAAS,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,IACvD,wBAAwB,GAAG,uBAGpD"}

package/jest-setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@expo/html-elements",
-  "version": "0.12.2",
+  "version": "0.12.4",
   "description": "Universal semantic HTML React components for iOS, Android, web, and desktop",
-  "main": "build/Elements.js",
+  "main": "src/Elements.tsx",
   "types": "build/Elements.d.ts",
   "sideEffects": false,
   "scripts": {
@@ -37,19 +37,22 @@
   "jest": {
     "projects": [
       {
-        "preset": "jest-expo/ios",
+        "preset": "jest-expo/web",
+        "setupFilesAfterEnv": [
+          "<rootDir>/jest-setup.js"
+        ],
         "modulePathIgnorePatterns": [
           "<rootDir>/babel/"
         ]
       },
       {
-        "preset": "jest-expo/android",
+        "preset": "jest-expo/ios",
         "modulePathIgnorePatterns": [
           "<rootDir>/babel/"
         ]
       },
       {
-        "preset": "jest-expo/web",
+        "preset": "jest-expo/android",
         "modulePathIgnorePatterns": [
           "<rootDir>/babel/"
         ]
@@ -57,7 +60,10 @@
     ]
   },
   "devDependencies": {
-    "expo-module-scripts": "^4.1.2"
+    "expo-module-scripts": "^4.1.5",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/react-native": "^13.1.0"
   },
-  "gitHead": "335e9312f5caf634097354a230f0d4bbbfb9b0ba"
+  "gitHead": "4e542b7b761cfea341d554dd7958103aff5f68c6"
 }

package/{build/Elements.js → src/Elements.tsx}

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

package/src/css/__tests__/__snapshots__/createSafeStyledView.test.native.tsx.snap.android

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`mocks out visibility: hidden by lowering the opacity 1`] = `
+<View
+  style={
+    {
+      "opacity": 0,
+    }
+  }
+/>
+`;
+
+exports[`replaces invalid position with "relative" 1`] = `
+<View
+  style={
+    {
+      "position": "relative",
+    }
+  }
+/>
+`;
+
+exports[`strips invalid style properties 1`] = `
+<View
+  style={
+    {
+      "position": "absolute",
+    }
+  }
+/>
+`;

package/src/css/__tests__/__snapshots__/createSafeStyledView.test.native.tsx.snap.ios

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`mocks out visibility: hidden by lowering the opacity 1`] = `
+<View
+  style={
+    {
+      "opacity": 0,
+    }
+  }
+/>
+`;
+
+exports[`replaces invalid position with "relative" 1`] = `
+<View
+  style={
+    {
+      "position": "relative",
+    }
+  }
+/>
+`;
+
+exports[`strips invalid style properties 1`] = `
+<View
+  style={
+    {
+      "position": "absolute",
+    }
+  }
+/>
+`;

package/src/css/__tests__/createSafeStyledView.test.native.tsx

@@ -0,0 +1,54 @@
+import { render } from '@testing-library/react-native';
+import * as React from 'react';
+
+import View from '../../primitives/View';
+import { createSafeStyledView } from '../createSafeStyledView';
+
+const Safe = createSafeStyledView(View);
+
+const originalConsoleError = console.error;
+const originalConsoleWarn = console.warn;
+
+beforeEach(() => {
+  console.error = jest.fn();
+  console.warn = jest.fn();
+});
+afterAll(() => {
+  console.error = originalConsoleError;
+  console.warn = originalConsoleWarn;
+});
+
+it('strips invalid style properties', () => {
+  const { toJSON } = render(
+    <Safe
+      style={{
+        transitionDuration: '200ms',
+        position: 'absolute',
+      }}
+    />
+  );
+  expect(toJSON()).toMatchSnapshot();
+});
+
+it('replaces invalid position with "relative"', () => {
+  const { toJSON } = render(
+    <Safe
+      style={{
+        position: 'fixed',
+      }}
+    />
+  );
+  expect(toJSON()).toMatchSnapshot();
+  expect(console.warn).toBeCalledWith(`Unsupported position: 'fixed'`);
+});
+
+it('mocks out visibility: hidden by lowering the opacity', () => {
+  const { toJSON } = render(
+    <Safe
+      style={{
+        visibility: 'hidden',
+      }}
+    />
+  );
+  expect(toJSON()).toMatchSnapshot();
+});

package/src/css/createSafeStyledView.native.tsx

@@ -0,0 +1,12 @@
+import React, { useMemo } from 'react';
+
+import { filterStyles } from './filterStyles';
+
+export function createSafeStyledView<TView extends React.ComponentType<any>>(View: TView) {
+  return function Safe({ style, ...props }: any) {
+    // Filter and apply `center` prop.
+    const finalStyle = useMemo(() => filterStyles(style), [style]);
+
+    return <View style={finalStyle} {...props} />;
+  };
+}

package/src/css/createSafeStyledView.tsx

@@ -0,0 +1,4 @@
+export function createSafeStyledView<TView>(View: TView) {
+  // Do nothing by default
+  return View;
+}

package/src/css/filterStyles.ts

@@ -0,0 +1,92 @@
+import type { CSSProperties } from 'react';
+import { type StyleProp, 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: StyleProp<any>) {
+  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: CSSProperties) {
+  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;
+}

package/src/css/units.ts

@@ -0,0 +1,11 @@
+import { PixelRatio, Platform } from 'react-native';
+
+export function rem(value: number): number | string {
+  if (Platform.OS === 'web') return `${value}rem`;
+  return PixelRatio.getFontScale() * 16 * value;
+}
+
+export function em(value: number): number | string {
+  if (Platform.OS === 'web') return `${value}em`;
+  return rem(value);
+}

package/src/elements/Anchor.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Linking, Platform } from 'react-native';
+
+import { LinkProps } from './Text.types';
+import Text from '../primitives/Text';
+
+export function A({ href, target, download, rel, ...props }: LinkProps) {
+  const nativeProps = Platform.select<LinkProps>({
+    web: {
+      href,
+      hrefAttrs: {
+        target,
+        download,
+        rel,
+      },
+    },
+    default: {
+      onPress: (event) => {
+        props.onPress && props.onPress(event);
+        if (Platform.OS !== 'web' && href !== undefined) {
+          Linking.openURL(href);
+        }
+      },
+    },
+  });
+  return <Text role="link" {...props} {...nativeProps} />;
+}

package/src/elements/Headings.tsx

@@ -0,0 +1,81 @@
+import React, { ComponentType } from 'react';
+import { Platform, StyleSheet } from 'react-native';
+
+import { em } from '../css/units';
+import Text, { TextProps } from '../primitives/Text';
+
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+function createHeadingComponent(level: HeadingLevel): ComponentType<TextProps> {
+  const nativeProps: any = Platform.select({
+    web: {
+      'aria-level': level,
+      role: 'header',
+    },
+    default: {
+      accessibilityRole: 'header',
+    },
+  });
+  function Heading(props: TextProps) {
+    return <Text {...nativeProps} {...props} style={[styles[`h${level}`], props.style]} />;
+  }
+
+  if (__DEV__) {
+    Heading.displayName = `H${level}`;
+  }
+
+  return Heading;
+}
+
+export const H1 = createHeadingComponent(1);
+export const H2 = createHeadingComponent(2);
+export const H3 = createHeadingComponent(3);
+export const H4 = createHeadingComponent(4);
+export const H5 = createHeadingComponent(5);
+export const H6 = createHeadingComponent(6);
+
+// 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',
+  },
+});