![](\"screenshots/surface-1.png\")
\n * ![](\"screenshots/surface-2.png\")
\n * ![](\"screenshots/surface-3.png\")
\n * ![](\"screenshots/surface-dark-1.png\")
\n * ![](\"screenshots/surface-dark-2.png\")
\n * ![](\"screenshots/touchable-ripple.gif\")
\n * ![](\"screenshots/icon-button-1.png\"){kind=icon}
\n * ![](\"screenshots/icon-button-2.png\"){kind=icon}
\n * ![](\"screenshots/textinput-flat.icon.png\"){kind=icon}
\n * ![](\"screenshots/textinput-outline.affix.png\")
\n * ![](\"screenshots/textinput-flat.focused.png\")
\n * ![](\"screenshots/textinput-flat.disabled.png\")
\n * ![](\"screenshots/textinput-outlined.focused.png\")
\n * ![](\"screenshots/textinput-outlined.disabled.png\")
\n * ![](\"screenshots/switch-enabled.android.png\")
\n * ![](\"screenshots/switch-disabled.android.png\")
\n * ![](\"screenshots/switch-enabled.ios.png\")
\n * ![](\"screenshots/switch-disabled.ios.png\")
\n * (\n component: ComponentClass
,\n options?: unknown\n ): ComponentClass
;\n };\n useEvent: (\n callback: (event: GestureUpdateEvent | GestureStateChangeEvent) => void,\n events: string[],\n rebuild: boolean\n ) => unknown;\n useSharedValue: (props: {\n cachedNaturalDimensions?: ImageDimensions;\n source: ImageURISource;\n specifiedDimensions: IncompleteImageDimensions;\n}) {\n const { source, cachedNaturalDimensions } = props;\n const [naturalDimensions, setNaturalDimensions] = useState<\n P['cachedNaturalDimensions'] extends ImageDimensions\n ? ImageDimensions\n : ImageDimensions | null\n >((cachedNaturalDimensions as any) || null);\n const { width: cachedNaturalWidth, height: cachedNaturalHeight } =\n cachedNaturalDimensions || {};\n const [error, setError] = useState ,\n containerStyles?: StyleProp {\n function Wrapper(props: P) {\n return (\n (\n Component: React.ComponentType ,\n config: Readonly
` tags.\n *\n * @deprecated Use `textContent` instead.\n * @param node Node to get the inner text of.\n * @returns `node`'s inner text.\n */\nfunction getText(node) {\n if (Array.isArray(node))\n return node.map(getText).join(\"\");\n if ((0, domhandler_1.isTag)(node))\n return node.name === \"br\" ? \"\\n\" : getText(node.children);\n if ((0, domhandler_1.isCDATA)(node))\n return getText(node.children);\n if ((0, domhandler_1.isText)(node))\n return node.data;\n return \"\";\n}\nexports.getText = getText;\n/**\n * Get a node's text content.\n *\n * @param node Node to get the text content of.\n * @returns `node`'s text content.\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent}\n */\nfunction textContent(node) {\n if (Array.isArray(node))\n return node.map(textContent).join(\"\");\n if ((0, domhandler_1.hasChildren)(node) && !(0, domhandler_1.isComment)(node)) {\n return textContent(node.children);\n }\n if ((0, domhandler_1.isText)(node))\n return node.data;\n return \"\";\n}\nexports.textContent = textContent;\n/**\n * Get a node's inner text.\n *\n * @param node Node to get the inner text of.\n * @returns `node`'s inner text.\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Node/innerText}\n */\nfunction innerText(node) {\n if (Array.isArray(node))\n return node.map(innerText).join(\"\");\n if ((0, domhandler_1.hasChildren)(node) && (node.type === domelementtype_1.ElementType.Tag || (0, domhandler_1.isCDATA)(node))) {\n return innerText(node.children);\n }\n if ((0, domhandler_1.isText)(node))\n return node.data;\n return \"\";\n}\nexports.innerText = innerText;\n","\"use strict\";\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.decodeHTML = exports.decodeHTMLStrict = exports.decodeXML = void 0;\nvar entities_json_1 = __importDefault(require(\"./maps/entities.json\"));\nvar legacy_json_1 = __importDefault(require(\"./maps/legacy.json\"));\nvar xml_json_1 = __importDefault(require(\"./maps/xml.json\"));\nvar decode_codepoint_1 = __importDefault(require(\"./decode_codepoint\"));\nvar strictEntityRe = /&(?:[a-zA-Z0-9]+|#[xX][\\da-fA-F]+|#\\d+);/g;\nexports.decodeXML = getStrictDecoder(xml_json_1.default);\nexports.decodeHTMLStrict = getStrictDecoder(entities_json_1.default);\nfunction getStrictDecoder(map) {\n var replace = getReplacer(map);\n return function (str) { return String(str).replace(strictEntityRe, replace); };\n}\nvar sorter = function (a, b) { return (a < b ? 1 : -1); };\nexports.decodeHTML = (function () {\n var legacy = Object.keys(legacy_json_1.default).sort(sorter);\n var keys = Object.keys(entities_json_1.default).sort(sorter);\n for (var i = 0, j = 0; i < keys.length; i++) {\n if (legacy[j] === keys[i]) {\n keys[i] += \";?\";\n j++;\n }\n else {\n keys[i] += \";\";\n }\n }\n var re = new RegExp(\"&(?:\" + keys.join(\"|\") + \"|#[xX][\\\\da-fA-F]+;?|#\\\\d+;?)\", \"g\");\n var replace = getReplacer(entities_json_1.default);\n function replacer(str) {\n if (str.substr(-1) !== \";\")\n str += \";\";\n return replace(str);\n }\n // TODO consider creating a merged map\n return function (str) { return String(str).replace(re, replacer); };\n})();\nfunction getReplacer(map) {\n return function replace(str) {\n if (str.charAt(1) === \"#\") {\n var secondChar = str.charAt(2);\n if (secondChar === \"X\" || secondChar === \"x\") {\n return decode_codepoint_1.default(parseInt(str.substr(3), 16));\n }\n return decode_codepoint_1.default(parseInt(str.substr(2), 10));\n }\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing\n return map[str.slice(1, -1)] || str;\n };\n}\n","\"use strict\";\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.escapeUTF8 = exports.escape = exports.encodeNonAsciiHTML = exports.encodeHTML = exports.encodeXML = void 0;\nvar xml_json_1 = __importDefault(require(\"./maps/xml.json\"));\nvar inverseXML = getInverseObj(xml_json_1.default);\nvar xmlReplacer = getInverseReplacer(inverseXML);\n/**\n * Encodes all non-ASCII characters, as well as characters not valid in XML\n * documents using XML entities.\n *\n * If a character has no equivalent entity, a\n * numeric hexadecimal reference (eg. `ü`) will be used.\n */\nexports.encodeXML = getASCIIEncoder(inverseXML);\nvar entities_json_1 = __importDefault(require(\"./maps/entities.json\"));\nvar inverseHTML = getInverseObj(entities_json_1.default);\nvar htmlReplacer = getInverseReplacer(inverseHTML);\n/**\n * Encodes all entities and non-ASCII characters in the input.\n *\n * This includes characters that are valid ASCII characters in HTML documents.\n * For example `#` will be encoded as `#`. To get a more compact output,\n * consider using the `encodeNonAsciiHTML` function.\n *\n * If a character has no equivalent entity, a\n * numeric hexadecimal reference (eg. `ü`) will be used.\n */\nexports.encodeHTML = getInverse(inverseHTML, htmlReplacer);\n/**\n * Encodes all non-ASCII characters, as well as characters not valid in HTML\n * documents using HTML entities.\n *\n * If a character has no equivalent entity, a\n * numeric hexadecimal reference (eg. `ü`) will be used.\n */\nexports.encodeNonAsciiHTML = getASCIIEncoder(inverseHTML);\nfunction getInverseObj(obj) {\n return Object.keys(obj)\n .sort()\n .reduce(function (inverse, name) {\n inverse[obj[name]] = \"&\" + name + \";\";\n return inverse;\n }, {});\n}\nfunction getInverseReplacer(inverse) {\n var single = [];\n var multiple = [];\n for (var _i = 0, _a = Object.keys(inverse); _i < _a.length; _i++) {\n var k = _a[_i];\n if (k.length === 1) {\n // Add value to single array\n single.push(\"\\\\\" + k);\n }\n else {\n // Add value to multiple array\n multiple.push(k);\n }\n }\n // Add ranges to single characters.\n single.sort();\n for (var start = 0; start < single.length - 1; start++) {\n // Find the end of a run of characters\n var end = start;\n while (end < single.length - 1 &&\n single[end].charCodeAt(1) + 1 === single[end + 1].charCodeAt(1)) {\n end += 1;\n }\n var count = 1 + end - start;\n // We want to replace at least three characters\n if (count < 3)\n continue;\n single.splice(start, count, single[start] + \"-\" + single[end]);\n }\n multiple.unshift(\"[\" + single.join(\"\") + \"]\");\n return new RegExp(multiple.join(\"|\"), \"g\");\n}\n// /[^\\0-\\x7F]/gu\nvar reNonASCII = /(?:[\\x80-\\uD7FF\\uE000-\\uFFFF]|[\\uD800-\\uDBFF][\\uDC00-\\uDFFF]|[\\uD800-\\uDBFF](?![\\uDC00-\\uDFFF])|(?:[^\\uD800-\\uDBFF]|^)[\\uDC00-\\uDFFF])/g;\nvar getCodePoint = \n// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\nString.prototype.codePointAt != null\n ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n function (str) { return str.codePointAt(0); }\n : // http://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae\n function (c) {\n return (c.charCodeAt(0) - 0xd800) * 0x400 +\n c.charCodeAt(1) -\n 0xdc00 +\n 0x10000;\n };\nfunction singleCharReplacer(c) {\n return \"&#x\" + (c.length > 1 ? getCodePoint(c) : c.charCodeAt(0))\n .toString(16)\n .toUpperCase() + \";\";\n}\nfunction getInverse(inverse, re) {\n return function (data) {\n return data\n .replace(re, function (name) { return inverse[name]; })\n .replace(reNonASCII, singleCharReplacer);\n };\n}\nvar reEscapeChars = new RegExp(xmlReplacer.source + \"|\" + reNonASCII.source, \"g\");\n/**\n * Encodes all non-ASCII characters, as well as characters not valid in XML\n * documents using numeric hexadecimal reference (eg. `ü`).\n *\n * Have a look at `escapeUTF8` if you want a more concise output at the expense\n * of reduced transportability.\n *\n * @param data String to escape.\n */\nfunction escape(data) {\n return data.replace(reEscapeChars, singleCharReplacer);\n}\nexports.escape = escape;\n/**\n * Encodes all characters not valid in XML documents using numeric hexadecimal\n * reference (eg. `ü`).\n *\n * Note that the output will be character-set dependent.\n *\n * @param data String to escape.\n */\nfunction escapeUTF8(data) {\n return data.replace(xmlReplacer, singleCharReplacer);\n}\nexports.escapeUTF8 = escapeUTF8;\nfunction getASCIIEncoder(obj) {\n return function (data) {\n return data.replace(reEscapeChars, function (c) { return obj[c] || singleCharReplacer(c); });\n };\n}\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.findAll = exports.existsOne = exports.findOne = exports.findOneChild = exports.find = exports.filter = void 0;\nvar domhandler_1 = require(\"domhandler\");\n/**\n * Search a node and its children for nodes passing a test function.\n *\n * @param test Function to test nodes on.\n * @param node Node to search. Will be included in the result set if it matches.\n * @param recurse Also consider child nodes.\n * @param limit Maximum number of nodes to return.\n * @returns All nodes passing `test`.\n */\nfunction filter(test, node, recurse, limit) {\n if (recurse === void 0) { recurse = true; }\n if (limit === void 0) { limit = Infinity; }\n if (!Array.isArray(node))\n node = [node];\n return find(test, node, recurse, limit);\n}\nexports.filter = filter;\n/**\n * Search an array of node and its children for nodes passing a test function.\n *\n * @param test Function to test nodes on.\n * @param nodes Array of nodes to search.\n * @param recurse Also consider child nodes.\n * @param limit Maximum number of nodes to return.\n * @returns All nodes passing `test`.\n */\nfunction find(test, nodes, recurse, limit) {\n var result = [];\n for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {\n var elem = nodes_1[_i];\n if (test(elem)) {\n result.push(elem);\n if (--limit <= 0)\n break;\n }\n if (recurse && (0, domhandler_1.hasChildren)(elem) && elem.children.length > 0) {\n var children = find(test, elem.children, recurse, limit);\n result.push.apply(result, children);\n limit -= children.length;\n if (limit <= 0)\n break;\n }\n }\n return result;\n}\nexports.find = find;\n/**\n * Finds the first element inside of an array that matches a test function.\n *\n * @param test Function to test nodes on.\n * @param nodes Array of nodes to search.\n * @returns The first node in the array that passes `test`.\n */\nfunction findOneChild(test, nodes) {\n return nodes.find(test);\n}\nexports.findOneChild = findOneChild;\n/**\n * Finds one element in a tree that passes a test.\n *\n * @param test Function to test nodes on.\n * @param nodes Array of nodes to search.\n * @param recurse Also consider child nodes.\n * @returns The first child node that passes `test`.\n */\nfunction findOne(test, nodes, recurse) {\n if (recurse === void 0) { recurse = true; }\n var elem = null;\n for (var i = 0; i < nodes.length && !elem; i++) {\n var checked = nodes[i];\n if (!(0, domhandler_1.isTag)(checked)) {\n continue;\n }\n else if (test(checked)) {\n elem = checked;\n }\n else if (recurse && checked.children.length > 0) {\n elem = findOne(test, checked.children);\n }\n }\n return elem;\n}\nexports.findOne = findOne;\n/**\n * @param test Function to test nodes on.\n * @param nodes Array of nodes to search.\n * @returns Whether a tree of nodes contains at least one node passing a test.\n */\nfunction existsOne(test, nodes) {\n return nodes.some(function (checked) {\n return (0, domhandler_1.isTag)(checked) &&\n (test(checked) ||\n (checked.children.length > 0 &&\n existsOne(test, checked.children)));\n });\n}\nexports.existsOne = existsOne;\n/**\n * Search and array of nodes and its children for nodes passing a test function.\n *\n * Same as `find`, only with less options, leading to reduced complexity.\n *\n * @param test Function to test nodes on.\n * @param nodes Array of nodes to search.\n * @returns All nodes passing `test`.\n */\nfunction findAll(test, nodes) {\n var _a;\n var result = [];\n var stack = nodes.filter(domhandler_1.isTag);\n var elem;\n while ((elem = stack.shift())) {\n var children = (_a = elem.children) === null || _a === void 0 ? void 0 : _a.filter(domhandler_1.isTag);\n if (children && children.length > 0) {\n stack.unshift.apply(stack, children);\n }\n if (test(elem))\n result.push(elem);\n }\n return result;\n}\nexports.findAll = findAll;\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.getElementsByTagType = exports.getElementsByTagName = exports.getElementById = exports.getElements = exports.testElement = void 0;\nvar domhandler_1 = require(\"domhandler\");\nvar querying_1 = require(\"./querying\");\nvar Checks = {\n tag_name: function (name) {\n if (typeof name === \"function\") {\n return function (elem) { return (0, domhandler_1.isTag)(elem) && name(elem.name); };\n }\n else if (name === \"*\") {\n return domhandler_1.isTag;\n }\n return function (elem) { return (0, domhandler_1.isTag)(elem) && elem.name === name; };\n },\n tag_type: function (type) {\n if (typeof type === \"function\") {\n return function (elem) { return type(elem.type); };\n }\n return function (elem) { return elem.type === type; };\n },\n tag_contains: function (data) {\n if (typeof data === \"function\") {\n return function (elem) { return (0, domhandler_1.isText)(elem) && data(elem.data); };\n }\n return function (elem) { return (0, domhandler_1.isText)(elem) && elem.data === data; };\n },\n};\n/**\n * @param attrib Attribute to check.\n * @param value Attribute value to look for.\n * @returns A function to check whether the a node has an attribute with a particular value.\n */\nfunction getAttribCheck(attrib, value) {\n if (typeof value === \"function\") {\n return function (elem) { return (0, domhandler_1.isTag)(elem) && value(elem.attribs[attrib]); };\n }\n return function (elem) { return (0, domhandler_1.isTag)(elem) && elem.attribs[attrib] === value; };\n}\n/**\n * @param a First function to combine.\n * @param b Second function to combine.\n * @returns A function taking a node and returning `true` if either\n * of the input functions returns `true` for the node.\n */\nfunction combineFuncs(a, b) {\n return function (elem) { return a(elem) || b(elem); };\n}\n/**\n * @param options An object describing nodes to look for.\n * @returns A function executing all checks in `options` and returning `true`\n * if any of them match a node.\n */\nfunction compileTest(options) {\n var funcs = Object.keys(options).map(function (key) {\n var value = options[key];\n return Object.prototype.hasOwnProperty.call(Checks, key)\n ? Checks[key](value)\n : getAttribCheck(key, value);\n });\n return funcs.length === 0 ? null : funcs.reduce(combineFuncs);\n}\n/**\n * @param options An object describing nodes to look for.\n * @param node The element to test.\n * @returns Whether the element matches the description in `options`.\n */\nfunction testElement(options, node) {\n var test = compileTest(options);\n return test ? test(node) : true;\n}\nexports.testElement = testElement;\n/**\n * @param options An object describing nodes to look for.\n * @param nodes Nodes to search through.\n * @param recurse Also consider child nodes.\n * @param limit Maximum number of nodes to return.\n * @returns All nodes that match `options`.\n */\nfunction getElements(options, nodes, recurse, limit) {\n if (limit === void 0) { limit = Infinity; }\n var test = compileTest(options);\n return test ? (0, querying_1.filter)(test, nodes, recurse, limit) : [];\n}\nexports.getElements = getElements;\n/**\n * @param id The unique ID attribute value to look for.\n * @param nodes Nodes to search through.\n * @param recurse Also consider child nodes.\n * @returns The node with the supplied ID.\n */\nfunction getElementById(id, nodes, recurse) {\n if (recurse === void 0) { recurse = true; }\n if (!Array.isArray(nodes))\n nodes = [nodes];\n return (0, querying_1.findOne)(getAttribCheck(\"id\", id), nodes, recurse);\n}\nexports.getElementById = getElementById;\n/**\n * @param tagName Tag name to search for.\n * @param nodes Nodes to search through.\n * @param recurse Also consider child nodes.\n * @param limit Maximum number of nodes to return.\n * @returns All nodes with the supplied `tagName`.\n */\nfunction getElementsByTagName(tagName, nodes, recurse, limit) {\n if (recurse === void 0) { recurse = true; }\n if (limit === void 0) { limit = Infinity; }\n return (0, querying_1.filter)(Checks.tag_name(tagName), nodes, recurse, limit);\n}\nexports.getElementsByTagName = getElementsByTagName;\n/**\n * @param type Element type to look for.\n * @param nodes Nodes to search through.\n * @param recurse Also consider child nodes.\n * @param limit Maximum number of nodes to return.\n * @returns All nodes with the supplied `type`.\n */\nfunction getElementsByTagType(type, nodes, recurse, limit) {\n if (recurse === void 0) { recurse = true; }\n if (limit === void 0) { limit = Infinity; }\n return (0, querying_1.filter)(Checks.tag_type(type), nodes, recurse, limit);\n}\nexports.getElementsByTagType = getElementsByTagType;\n","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _domutils = require(\"domutils\");\n\nvar _HTMLContentModel = _interopRequireDefault(require(\"./HTMLContentModel\"));\n\nvar _HTMLElementModel = _interopRequireDefault(require(\"./HTMLElementModel\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nconst UA_ANCHOR_COL = '#245dc1';\nconst UA_GRAY = '#CCC';\nconst UA_MARGIN_HZ = 30;\nconst bigMarginTopBottomStyle = {\n marginTop: '1em',\n marginBottom: '1em'\n};\nconst shortMarginTopBottomStyle = {\n marginTop: '.5em',\n marginBottom: '.5em'\n};\nconst lineThroughStyle = {\n textDecorationLine: 'line-through'\n};\nconst italicStyle = {\n fontStyle: 'italic'\n};\nconst monoStyle = {\n fontFamily: 'monospace'\n};\nconst boldStyle = {\n fontWeight: 'bold'\n};\nconst spacedBlockStyle = { ...bigMarginTopBottomStyle,\n marginLeft: UA_MARGIN_HZ,\n marginRight: UA_MARGIN_HZ\n};\nconst anchorStyle = {\n color: UA_ANCHOR_COL,\n textDecorationLine: 'underline',\n textDecorationColor: UA_ANCHOR_COL\n};\nconst leftBorderQuoteStyle = {\n borderLeftWidth: 2,\n borderLeftColor: UA_GRAY\n};\nconst dottedUnderlineStyle = {\n textDecorationLine: 'underline',\n textDecorationStyle: 'dotted'\n};\nconst solidUnderlineStyle = {\n textDecorationLine: 'underline',\n textDecorationStyle: 'solid'\n}; // TODO, support directional styles\n\nconst listStyles = { ...bigMarginTopBottomStyle,\n paddingLeft: 30\n};\nconst preStyles = {\n whiteSpace: 'pre',\n ...monoStyle,\n ...bigMarginTopBottomStyle\n};\n\nfunction headerStyle(fontSize, marginSize) {\n return {\n fontSize,\n marginTop: marginSize,\n marginBottom: marginSize,\n ...boldStyle\n };\n}\n\nconst getReactNativePropsForHeading = ({\n domNode\n}) => {\n const textLabel = (0, _domutils.textContent)(domNode);\n return {\n native: {\n accessible: true,\n accessibilityLabel: textLabel,\n accessibilityRole: 'header'\n }\n };\n};\n\nconst getReactNativePropsWithHref = function getReactNativePropsWithHref({\n attributes\n}) {\n if (typeof attributes.href === 'string' && attributes.href.length > 0) {\n return {\n native: {\n accessible: true,\n accessibilityRole: 'link'\n }\n };\n }\n};\n\nconst sectioningModelMap = {\n address: _HTMLElementModel.default.fromNativeModel({\n category: 'sectioning',\n tagName: 'address',\n mixedUAStyles: italicStyle\n }),\n article: _HTMLElementModel.default.fromNativeModel({\n category: 'sectioning',\n tagName: 'article'\n }),\n aside: _HTMLElementModel.default.fromNativeModel({\n category: 'sectioning',\n tagName: 'aside'\n }),\n body: _HTMLElementModel.default.fromNativeModel({\n category: 'sectioning',\n tagName: 'body'\n }),\n footer: _HTMLElementModel.default.fromNativeModel({\n category: 'sectioning',\n tagName: 'footer'\n }),\n h1: _HTMLElementModel.default.fromNativeModel({\n category: 'sectioning',\n tagName: 'h1',\n mixedUAStyles: headerStyle('2em', '.67em'),\n getReactNativeProps: getReactNativePropsForHeading\n }),\n h2: _HTMLElementModel.default.fromNativeModel({\n category: 'sectioning',\n tagName: 'h2',\n mixedUAStyles: headerStyle('1.5em', '.83em'),\n getReactNativeProps: getReactNativePropsForHeading\n }),\n h3: _HTMLElementModel.default.fromNativeModel({\n category: 'sectioning',\n tagName: 'h3',\n mixedUAStyles: headerStyle('1.17em', '1em'),\n getReactNativeProps: getReactNativePropsForHeading\n }),\n h4: _HTMLElementModel.default.fromNativeModel({\n category: 'sectioning',\n tagName: 'h4',\n mixedUAStyles: headerStyle('1em', '1.33em'),\n getReactNativeProps: getReactNativePropsForHeading\n }),\n h5: _HTMLElementModel.default.fromNativeModel({\n category: 'sectioning',\n tagName: 'h5',\n mixedUAStyles: headerStyle('.83em', '1.67em'),\n getReactNativeProps: getReactNativePropsForHeading\n }),\n h6: _HTMLElementModel.default.fromNativeModel({\n category: 'sectioning',\n tagName: 'h6',\n mixedUAStyles: headerStyle('.67em', '2.33em'),\n getReactNativeProps: getReactNativePropsForHeading\n }),\n header: _HTMLElementModel.default.fromNativeModel({\n category: 'sectioning',\n tagName: 'header'\n }),\n hgroup: _HTMLElementModel.default.fromNativeModel({\n category: 'sectioning',\n tagName: 'hgroup'\n }),\n nav: _HTMLElementModel.default.fromNativeModel({\n category: 'sectioning',\n tagName: 'nav'\n }),\n section: _HTMLElementModel.default.fromNativeModel({\n category: 'sectioning',\n tagName: 'section'\n })\n};\nconst unsupportedModelMap = {\n area: _HTMLElementModel.default.fromNativeModel({\n tagName: 'area',\n category: 'untranslatable',\n isVoid: true,\n getReactNativeProps: getReactNativePropsWithHref\n }),\n map: _HTMLElementModel.default.fromNativeModel({\n tagName: 'map',\n category: 'untranslatable'\n })\n};\nconst attribsModelMap = {\n accesskey: _HTMLElementModel.default.fromNativeModel({\n tagName: 'accesskey',\n category: 'untranslatable'\n }),\n caption: _HTMLElementModel.default.fromNativeModel({\n tagName: 'caption',\n category: 'untranslatable'\n }),\n col: _HTMLElementModel.default.fromNativeModel({\n tagName: 'col',\n category: 'untranslatable',\n isVoid: true\n }),\n colgroup: _HTMLElementModel.default.fromNativeModel({\n tagName: 'colgroup',\n category: 'untranslatable'\n }),\n datalist: _HTMLElementModel.default.fromNativeModel({\n tagName: 'datalist',\n category: 'untranslatable'\n }),\n source: _HTMLElementModel.default.fromNativeModel({\n tagName: 'source',\n category: 'untranslatable',\n isVoid: true\n }),\n track: _HTMLElementModel.default.fromNativeModel({\n tagName: 'track',\n category: 'untranslatable',\n isVoid: true\n }),\n optgroup: _HTMLElementModel.default.fromNativeModel({\n tagName: 'optgroup',\n category: 'untranslatable'\n }),\n option: _HTMLElementModel.default.fromNativeModel({\n tagName: 'option',\n category: 'untranslatable'\n }),\n param: _HTMLElementModel.default.fromNativeModel({\n tagName: 'param',\n category: 'untranslatable',\n isVoid: true\n })\n};\nconst interactiveModelMap = {\n button: _HTMLElementModel.default.fromNativeModel({\n tagName: 'button',\n category: 'interactive',\n reactNativeProps: {\n native: {\n accessibilityRole: 'button'\n }\n }\n }),\n fieldset: _HTMLElementModel.default.fromNativeModel({\n tagName: 'fieldset',\n category: 'interactive'\n }),\n form: _HTMLElementModel.default.fromNativeModel({\n tagName: 'form',\n category: 'interactive'\n }),\n input: _HTMLElementModel.default.fromNativeModel({\n tagName: 'input',\n category: 'interactive',\n isVoid: true\n }),\n label: _HTMLElementModel.default.fromNativeModel({\n tagName: 'label',\n category: 'interactive'\n }),\n legend: _HTMLElementModel.default.fromNativeModel({\n tagName: 'legend',\n category: 'interactive'\n }),\n meter: _HTMLElementModel.default.fromNativeModel({\n tagName: 'meter',\n category: 'interactive'\n }),\n progress: _HTMLElementModel.default.fromNativeModel({\n tagName: 'progress',\n category: 'interactive'\n }),\n select: _HTMLElementModel.default.fromNativeModel({\n tagName: 'select',\n category: 'interactive',\n reactNativeProps: {\n native: {\n accessible: true,\n accessibilityRole: 'combobox'\n }\n }\n }),\n details: _HTMLElementModel.default.fromNativeModel({\n tagName: 'details',\n category: 'interactive'\n }),\n dialog: _HTMLElementModel.default.fromNativeModel({\n tagName: 'dialog',\n category: 'interactive'\n }),\n output: _HTMLElementModel.default.fromNativeModel({\n tagName: 'output',\n category: 'interactive'\n }),\n summary: _HTMLElementModel.default.fromNativeModel({\n tagName: 'summary',\n category: 'interactive'\n }),\n textarea: _HTMLElementModel.default.fromNativeModel({\n tagName: 'textarea',\n category: 'interactive'\n })\n};\nconst metadataModelMap = {\n base: _HTMLElementModel.default.fromNativeModel({\n tagName: 'base',\n category: 'untranslatable',\n isVoid: true\n }),\n head: _HTMLElementModel.default.fromNativeModel({\n tagName: 'head',\n category: 'untranslatable',\n isOpaque: true\n }),\n link: _HTMLElementModel.default.fromNativeModel({\n tagName: 'link',\n category: 'untranslatable',\n isVoid: true\n }),\n meta: _HTMLElementModel.default.fromNativeModel({\n tagName: 'meta',\n category: 'untranslatable',\n isVoid: true\n }),\n title: _HTMLElementModel.default.fromNativeModel({\n tagName: 'title',\n category: 'untranslatable'\n })\n};\nconst untranslatableModelMap = { ...attribsModelMap,\n ...interactiveModelMap,\n ...unsupportedModelMap,\n ...metadataModelMap\n};\nconst groupingModelMap = {\n blockquote: _HTMLElementModel.default.fromNativeModel({\n tagName: 'blockquote',\n category: 'grouping',\n getMixedUAStyles: ({\n attributes\n }) => {\n if (attributes.type === 'cite') {\n return leftBorderQuoteStyle;\n }\n },\n mixedUAStyles: spacedBlockStyle\n }),\n dd: _HTMLElementModel.default.fromNativeModel({\n tagName: 'dd',\n category: 'grouping',\n mixedUAStyles: {\n marginLeft: UA_MARGIN_HZ\n }\n }),\n div: _HTMLElementModel.default.fromNativeModel({\n tagName: 'div',\n category: 'grouping'\n }),\n dl: _HTMLElementModel.default.fromNativeModel({\n tagName: 'dl',\n category: 'grouping',\n mixedUAStyles: bigMarginTopBottomStyle\n }),\n dt: _HTMLElementModel.default.fromNativeModel({\n tagName: 'dt',\n category: 'grouping',\n mixedUAStyles: boldStyle\n }),\n figcaption: _HTMLElementModel.default.fromNativeModel({\n tagName: 'figcaption',\n category: 'grouping',\n mixedUAStyles: { ...italicStyle,\n textAlign: 'center'\n }\n }),\n figure: _HTMLElementModel.default.fromNativeModel({\n tagName: 'figure',\n category: 'grouping',\n mixedUAStyles: spacedBlockStyle\n }),\n hr: _HTMLElementModel.default.fromNativeModel({\n tagName: 'hr',\n category: 'grouping',\n mixedUAStyles: {\n marginLeft: 'auto',\n marginRight: 'auto',\n height: 1,\n width: '100%',\n backgroundColor: UA_GRAY,\n ...shortMarginTopBottomStyle\n }\n }),\n li: _HTMLElementModel.default.fromNativeModel({\n tagName: 'li',\n category: 'grouping'\n }),\n main: _HTMLElementModel.default.fromNativeModel({\n tagName: 'main',\n category: 'grouping'\n }),\n menu: _HTMLElementModel.default.fromNativeModel({\n tagName: 'menu',\n category: 'grouping'\n }),\n ol: _HTMLElementModel.default.fromNativeModel({\n tagName: 'ol',\n category: 'grouping',\n mixedUAStyles: listStyles,\n\n setMarkersForTNode(targetMarkers, parentMarkers) {\n targetMarkers.olNestLevel = parentMarkers.olNestLevel + 1;\n }\n\n }),\n p: _HTMLElementModel.default.fromNativeModel({\n tagName: 'p',\n category: 'grouping',\n mixedUAStyles: bigMarginTopBottomStyle\n }),\n pre: _HTMLElementModel.default.fromNativeModel({\n tagName: 'pre',\n category: 'grouping',\n mixedUAStyles: preStyles\n }),\n xmp: _HTMLElementModel.default.fromNativeModel({\n tagName: 'xmp',\n category: 'grouping',\n mixedUAStyles: preStyles\n }),\n listing: _HTMLElementModel.default.fromNativeModel({\n tagName: 'listing',\n category: 'grouping',\n mixedUAStyles: preStyles\n }),\n plaintext: _HTMLElementModel.default.fromNativeModel({\n tagName: 'plaintext',\n category: 'grouping',\n mixedUAStyles: preStyles\n }),\n ul: _HTMLElementModel.default.fromNativeModel({\n tagName: 'ul',\n category: 'grouping',\n mixedUAStyles: listStyles,\n\n setMarkersForTNode(targetMarkers, parentMarkers) {\n targetMarkers.ulNestLevel = parentMarkers.ulNestLevel + 1;\n }\n\n }),\n dir: _HTMLElementModel.default.fromNativeModel({\n tagName: 'dir',\n category: 'grouping',\n mixedUAStyles: listStyles\n })\n};\nconst tabularModelMap = {\n table: _HTMLElementModel.default.fromNativeModel({\n tagName: 'table',\n category: 'tabular'\n }),\n tbody: _HTMLElementModel.default.fromNativeModel({\n tagName: 'tbody',\n category: 'tabular'\n }),\n td: _HTMLElementModel.default.fromNativeModel({\n tagName: 'td',\n category: 'tabular',\n mixedUAStyles: {\n padding: 2,\n flex: 1\n }\n }),\n tfoot: _HTMLElementModel.default.fromNativeModel({\n tagName: 'tfoot',\n category: 'tabular'\n }),\n th: _HTMLElementModel.default.fromNativeModel({\n tagName: 'th',\n category: 'tabular',\n mixedUAStyles: {\n padding: 2,\n flex: 1,\n fontWeight: 'bold'\n }\n }),\n thead: _HTMLElementModel.default.fromNativeModel({\n tagName: 'thead',\n category: 'tabular'\n }),\n tr: _HTMLElementModel.default.fromNativeModel({\n tagName: 'tr',\n category: 'tabular',\n mixedUAStyles: {\n flexDirection: 'row',\n flexWrap: 'nowrap'\n }\n })\n}; // These emnbedded should be rendered by default.\n\nconst renderedEmbeddedModelMap = {\n img: _HTMLElementModel.default.fromNativeModel({\n tagName: 'img',\n category: 'embedded',\n isVoid: true,\n\n getReactNativeProps({\n attributes\n }, props) {\n // see https://w3c.github.io/html-aria/#el-img\n const label = attributes['aria-label'] || attributes.alt;\n\n if (label && (!(props !== null && props !== void 0 && props.view) || props.view.accessibilityRole !== 'none')) {\n return {\n native: {\n accessibilityLabel: label,\n accessibilityRole: 'image'\n }\n };\n }\n\n return {\n native: {\n accessibilityRole: 'none'\n }\n };\n }\n\n }).extend({\n contentModel: _HTMLContentModel.default.block\n }),\n picture: _HTMLElementModel.default.fromNativeModel({\n tagName: 'picture',\n category: 'embedded',\n isOpaque: false,\n isVoid: false // allows source and img\n\n }).extend({\n contentModel: _HTMLContentModel.default.block\n })\n}; // Embedded elements content model is \"none\" by default.\n\nconst emptyEmbeddedModelMap = {\n audio: _HTMLElementModel.default.fromNativeModel({\n tagName: 'audio',\n category: 'embedded',\n isVoid: false // allows tracks\n\n }),\n canvas: _HTMLElementModel.default.fromNativeModel({\n tagName: 'canvas',\n category: 'embedded',\n isVoid: false // allows specific content\n\n }),\n embed: _HTMLElementModel.default.fromNativeModel({\n tagName: 'embed',\n category: 'embedded',\n isVoid: true\n }),\n iframe: _HTMLElementModel.default.fromNativeModel({\n tagName: 'iframe',\n category: 'embedded',\n isVoid: true\n }),\n math: _HTMLElementModel.default.fromNativeModel({\n tagName: 'math',\n category: 'embedded',\n isVoid: false,\n // allows mathml elems\n isOpaque: true\n }),\n object: _HTMLElementModel.default.fromNativeModel({\n tagName: 'object',\n category: 'embedded',\n isVoid: false // allows params\n\n }),\n svg: _HTMLElementModel.default.fromNativeModel({\n tagName: 'svg',\n category: 'embedded',\n isVoid: false,\n // allows svg elems\n isOpaque: true,\n\n getReactNativeProps({\n attributes\n }) {\n if (attributes['aria-label']) {\n return {\n native: {\n accessibilityLabel: attributes['aria-label'],\n accessibilityRole: 'image'\n }\n };\n }\n\n return {\n native: {\n accessibilityRole: 'none'\n }\n };\n }\n\n }),\n video: _HTMLElementModel.default.fromNativeModel({\n tagName: 'video',\n category: 'embedded',\n isVoid: false // allows source, tracks + transparent\n\n })\n};\nconst editsModelMap = {\n ins: _HTMLElementModel.default.fromNativeModel({\n tagName: 'ins',\n category: 'edits',\n mixedUAStyles: solidUnderlineStyle,\n\n setMarkersForTNode(targetMarkers) {\n targetMarkers.edits = 'ins';\n }\n\n }),\n del: _HTMLElementModel.default.fromNativeModel({\n tagName: 'del',\n category: 'edits',\n mixedUAStyles: lineThroughStyle,\n\n setMarkersForTNode(targetMarkers) {\n targetMarkers.edits = 'del';\n }\n\n })\n};\nconst textLevelModelMap = {\n em: _HTMLElementModel.default.fromNativeModel({\n tagName: 'em',\n category: 'textual',\n mixedUAStyles: italicStyle\n }),\n strong: _HTMLElementModel.default.fromNativeModel({\n tagName: 'strong',\n category: 'textual',\n mixedUAStyles: boldStyle\n }),\n small: _HTMLElementModel.default.fromNativeModel({\n tagName: 'small',\n category: 'textual',\n mixedUAStyles: {\n fontSize: 'smaller'\n }\n }),\n big: _HTMLElementModel.default.fromNativeModel({\n tagName: 'big',\n category: 'textual',\n mixedUAStyles: {\n fontSize: 'larger'\n }\n }),\n s: _HTMLElementModel.default.fromNativeModel({\n tagName: 's',\n category: 'textual',\n mixedUAStyles: lineThroughStyle\n }),\n strike: _HTMLElementModel.default.fromNativeModel({\n tagName: 'strike',\n category: 'textual',\n mixedUAStyles: lineThroughStyle\n }),\n cite: _HTMLElementModel.default.fromNativeModel({\n tagName: 'cite',\n category: 'textual',\n mixedUAStyles: italicStyle\n }),\n q: _HTMLElementModel.default.fromNativeModel({\n tagName: 'q',\n category: 'textual' // default style, content: \"open,close-quote\"\n\n }),\n dfn: _HTMLElementModel.default.fromNativeModel({\n tagName: 'dfn',\n category: 'textual',\n mixedUAStyles: italicStyle\n }),\n abbr: _HTMLElementModel.default.fromNativeModel({\n tagName: 'abbr',\n category: 'textual',\n mixedUAStyles: dottedUnderlineStyle\n }),\n acronym: _HTMLElementModel.default.fromNativeModel({\n tagName: 'acronym',\n category: 'textual',\n mixedUAStyles: dottedUnderlineStyle\n }),\n ruby: _HTMLElementModel.default.fromNativeModel({\n tagName: 'ruby',\n category: 'textual'\n }),\n rt: _HTMLElementModel.default.fromNativeModel({\n tagName: 'rt',\n category: 'textual'\n }),\n rp: _HTMLElementModel.default.fromNativeModel({\n tagName: 'rp',\n category: 'textual'\n }),\n data: _HTMLElementModel.default.fromNativeModel({\n tagName: 'data',\n category: 'textual'\n }),\n time: _HTMLElementModel.default.fromNativeModel({\n tagName: 'time',\n category: 'textual'\n }),\n code: _HTMLElementModel.default.fromNativeModel({\n tagName: 'code',\n category: 'textual',\n mixedUAStyles: monoStyle\n }),\n tt: _HTMLElementModel.default.fromNativeModel({\n tagName: 'tt',\n category: 'textual',\n mixedUAStyles: monoStyle\n }),\n var: _HTMLElementModel.default.fromNativeModel({\n tagName: 'var',\n category: 'textual',\n mixedUAStyles: italicStyle\n }),\n samp: _HTMLElementModel.default.fromNativeModel({\n tagName: 'samp',\n category: 'textual',\n mixedUAStyles: monoStyle\n }),\n kbd: _HTMLElementModel.default.fromNativeModel({\n tagName: 'kbd',\n category: 'textual',\n mixedUAStyles: monoStyle\n }),\n sub: _HTMLElementModel.default.fromNativeModel({\n tagName: 'sub',\n category: 'textual',\n mixedUAStyles: {\n textAlignVertical: 'bottom',\n fontSize: 'smaller'\n }\n }),\n sup: _HTMLElementModel.default.fromNativeModel({\n tagName: 'sup',\n category: 'textual',\n mixedUAStyles: {\n textAlignVertical: 'top',\n fontSize: 'smaller'\n }\n }),\n i: _HTMLElementModel.default.fromNativeModel({\n tagName: 'i',\n category: 'textual',\n mixedUAStyles: italicStyle\n }),\n b: _HTMLElementModel.default.fromNativeModel({\n tagName: 'b',\n category: 'textual',\n mixedUAStyles: boldStyle\n }),\n u: _HTMLElementModel.default.fromNativeModel({\n tagName: 'u',\n category: 'textual',\n mixedUAStyles: solidUnderlineStyle\n }),\n mark: _HTMLElementModel.default.fromNativeModel({\n tagName: 'mark',\n category: 'textual',\n mixedUAStyles: {\n backgroundColor: 'yellow',\n color: 'black'\n }\n }),\n bdi: _HTMLElementModel.default.fromNativeModel({\n tagName: 'bdi',\n category: 'textual' // unicode-bidi: isolate;\n\n }),\n bdo: _HTMLElementModel.default.fromNativeModel({\n tagName: 'bdo',\n category: 'textual' // unicode-bidi: isolate-override;\n\n }),\n span: _HTMLElementModel.default.fromNativeModel({\n tagName: 'span',\n category: 'textual'\n }),\n br: _HTMLElementModel.default.fromNativeModel({\n tagName: 'br',\n category: 'textual',\n isVoid: true\n }),\n wbr: _HTMLElementModel.default.fromNativeModel({\n tagName: 'wbr',\n category: 'textual',\n isVoid: true\n })\n};\nconst defaultHTMLElementModels = {\n a: _HTMLElementModel.default.fromNativeModel({\n tagName: 'a',\n category: 'anchor',\n getMixedUAStyles: ({\n attributes\n }) => {\n if (typeof attributes.href === 'string') {\n return anchorStyle;\n }\n },\n getReactNativeProps: getReactNativePropsWithHref,\n\n setMarkersForTNode(targetMarkers) {\n targetMarkers.anchor = true;\n }\n\n }),\n ...textLevelModelMap,\n ...editsModelMap,\n ...renderedEmbeddedModelMap,\n ...emptyEmbeddedModelMap,\n ...tabularModelMap,\n ...groupingModelMap,\n ...sectioningModelMap,\n ...interactiveModelMap,\n ...untranslatableModelMap\n};\nvar _default = defaultHTMLElementModels;\nexports.default = _default;\n//# sourceMappingURL=defaultHTMLElementModels.js.map","/**\n * Default system fonts based on current platform.\n *\n * @remarks If you are using Expo, use `Constants.systemFonts` instead.\n */\nconst defaultSystemFonts = ['Arial', 'Courier New', 'Georgia'];\nexport default defaultSystemFonts;\n","import React, { PropsWithChildren, ReactElement, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport RenderersPropsProvider from './context/RenderersPropsProvider';\nimport SharedPropsProvider from './context/SharedPropsProvider';\nimport TChildrenRenderersContext from './context/TChildrenRendererContext';\nimport { RenderHTMLConfig } from './shared-types';\nimport TNodeChildrenRenderer from './TNodeChildrenRenderer';\nimport TChildrenRenderer from './TChildrenRenderer';\nimport sourceLoaderContext, {\n defaultRenderError,\n defaultRenderLoading\n} from './context/sourceLoaderContext';\nimport RenderRegistryProvider from './context/RenderRegistryProvider';\nimport { useAmbientTRenderEngine } from './TRenderEngineProvider';\nimport useProfiler from './hooks/useProfiler';\nimport ListStyleSpecsProvider from './context/ListStyleSpecsProvider';\n\nconst childrenRendererContext = {\n TChildrenRenderer,\n TNodeChildrenRenderer\n};\n\nexport type RenderHTMLConfigPropTypes = Record