@tamagui/web 1.11.1 → 1.12.0

package/dist/cjs/helpers/insertStyleRule.js

@@ -29,6 +29,7 @@ __export(insertStyleRule_exports, {
   updateRules: () => updateRules
 });
 module.exports = __toCommonJS(insertStyleRule_exports);
+var import_constants = require("@tamagui/constants");
 const allSelectors = {};
 const allRules = {};
 const insertedTransforms = {};
@@ -41,7 +42,7 @@ function addTransform(identifier, css, rule) {
     if (process.env.NODE_ENV === "development") {
       console.error(`\u274C Invalid transform, likely used deg/% improperly ${identifier}`);
     }
-    return false;
+    return;
   }
   const startI = s + "transform:".length;
   const endI = css.indexOf(";");
@@ -50,47 +51,50 @@ function addTransform(identifier, css, rule) {
     insertedTransforms[identifier] = value;
     return true;
   }
-  return false;
 }
-const isClient = typeof document !== "undefined";
 const scannedCache = /* @__PURE__ */ new WeakMap();
-const totalSheetSelectors = /* @__PURE__ */ new Map();
+const totalSelectorsInserted = /* @__PURE__ */ new Map();
 function listenForSheetChanges() {
-  if (!isClient)
+  if (!import_constants.isClient)
     return;
-  function handleNode(node, remove = false) {
-    if (node instanceof HTMLStyleElement && node.sheet) {
-      updateSheetStyles(node.sheet, remove);
-    }
-  }
   const mo = new MutationObserver((entries) => {
     for (const entry of entries) {
-      entry.addedNodes.forEach((node) => handleNode(node));
-      entry.removedNodes.forEach((node) => handleNode(node, true));
+      if (entry instanceof HTMLStyleElement && entry.sheet || entry instanceof HTMLLinkElement && entry.href.endsWith(".css")) {
+        scanAllSheets();
+        break;
+      }
     }
   });
   mo.observe(document.head, {
     childList: true
   });
 }
+let lastScannedSheets = null;
 function scanAllSheets() {
   if (process.env.NODE_ENV === "test")
     return;
-  if (!isClient)
-    return;
-  const sheets = document.styleSheets;
-  if (!sheets)
+  if (!import_constants.isClient)
     return;
-  for (let i = 0; i < sheets.length; i++) {
-    const sheet2 = sheets[i];
-    if (!sheet2)
-      continue;
-    updateSheetStyles(sheet2);
+  const sheets = document.styleSheets || [];
+  const prev = lastScannedSheets;
+  const current = new Set(sheets);
+  if (document.styleSheets) {
+    for (const sheet2 of current) {
+      sheet2 && updateSheetStyles(sheet2);
+    }
+    lastScannedSheets = current;
+  }
+  if (prev) {
+    for (const sheet2 of prev) {
+      if (sheet2 && !current.has(sheet2)) {
+        updateSheetStyles(sheet2, true);
+      }
+    }
   }
 }
 function track(id, remove = false) {
-  const next = (totalSheetSelectors.get(id) || 0) + (remove ? -1 : 1);
-  totalSheetSelectors.set(id, next);
+  const next = (totalSelectorsInserted.get(id) || 0) + (remove ? -1 : 1);
+  totalSelectorsInserted.set(id, next);
   return next;
 }
 function updateSheetStyles(sheet2, remove = false) {
@@ -102,9 +106,6 @@ function updateSheetStyles(sheet2, remove = false) {
     return;
   }
   const firstSelector = (_a = getTamaguiSelector(rules[0])) == null ? void 0 : _a[0];
-  if (!firstSelector) {
-    return;
-  }
   const lastSelector = (_b = getTamaguiSelector(rules[rules.length - 1])) == null ? void 0 : _b[0];
   const cacheKey = `${rules.length}${firstSelector}${lastSelector}`;
   const lastScanned = scannedCache.get(sheet2);
@@ -114,11 +115,18 @@ function updateSheetStyles(sheet2, remove = false) {
     }
   }
   const len = rules.length;
+  let fails = 0;
   for (let i = 0; i < len; i++) {
     const rule = rules[i];
+    if (!(rule instanceof CSSStyleRule))
+      continue;
     const response = getTamaguiSelector(rule);
     if (!response) {
-      return;
+      fails++;
+      if (fails > 5) {
+        return;
+      }
+      continue;
     }
     const [identifier, cssRule] = response;
     const total = track(identifier, remove);
@@ -126,13 +134,11 @@ function updateSheetStyles(sheet2, remove = false) {
       if (total === 0) {
         delete allSelectors[identifier];
       }
-    } else {
-      if (!(identifier in allSelectors)) {
-        const isTransform = identifier.startsWith("_transform");
-        const shouldInsert = isTransform ? addTransform(identifier, cssRule.cssText, cssRule) : true;
-        if (shouldInsert) {
-          allSelectors[identifier] = cssRule.cssText;
-        }
+    } else if (!(identifier in allSelectors)) {
+      const isTransform = identifier.startsWith("_transform");
+      const shouldInsert = isTransform ? addTransform(identifier, cssRule.cssText, cssRule) : true;
+      if (shouldInsert) {
+        allSelectors[identifier] = cssRule.cssText;
       }
     }
   }
@@ -155,10 +161,11 @@ function getTamaguiSelector(rule) {
   return null;
 }
 const getIdentifierFromTamaguiSelector = (selector) => selector.replace(/(:root)+\s+/, "").replace(/:[a-z]+$/, "").slice(1);
-const sheet = isClient ? document.head.appendChild(document.createElement("style")).sheet : null;
+const sheet = import_constants.isClient ? document.head.appendChild(document.createElement("style")).sheet : null;
 function updateRules(identifier, rules) {
-  if (allRules[identifier])
+  if (identifier in allRules) {
     return false;
+  }
   allRules[identifier] = rules.join(" ");
   if (identifier.startsWith("_transform")) {
     return addTransform(identifier, rules[0]);
@@ -166,42 +173,40 @@ function updateRules(identifier, rules) {
   return true;
 }
 function insertStyleRules(rulesToInsert) {
-  if (!rulesToInsert.length)
-    return;
-  if (isClient && !sheet) {
-    if (process.env.NODE_ENV === "development")
-      throw "impossible";
+  if (!rulesToInsert.length || !sheet) {
     return;
   }
   for (const { identifier, rules } of rulesToInsert) {
-    if (identifier in allSelectors)
+    if (!shouldInsertStyleRules(identifier)) {
       continue;
-    allSelectors[identifier] = process.env.NODE_ENV === "development" ? rules.join("\n") : " ";
+    }
+    allSelectors[identifier] = rules.join("\n");
+    track(identifier);
     updateRules(identifier, rules);
-    if (sheet) {
-      for (const rule of rules) {
+    for (const rule of rules) {
+      if (process.env.NODE_ENV === "production") {
+        sheet.insertRule(rule, sheet.cssRules.length);
+      } else {
         try {
           sheet.insertRule(rule, sheet.cssRules.length);
         } catch (err) {
-          if (process.env.NODE_ENV !== "production") {
-            console.groupCollapsed(
-              `Error inserting rule into CSSStyleSheet: ${String(err)}`
-            );
-            console.log({ rule, rulesToInsert });
-            console.trace();
-            console.groupEnd();
-          }
+          console.groupCollapsed(
+            `Error inserting rule into CSSStyleSheet: ${String(err)}`
+          );
+          console.log({ rule, rulesToInsert });
+          console.trace();
+          console.groupEnd();
         }
       }
     }
   }
 }
-const IS_STATIC = process.env.IS_STATIC === "is_static";
-function shouldInsertStyleRules(styleObject) {
-  if (IS_STATIC) {
+function shouldInsertStyleRules(identifier) {
+  if (process.env.IS_STATIC === "is_static") {
     return true;
   }
-  return !(styleObject.identifier in allSelectors);
+  const total = totalSelectorsInserted.get(identifier);
+  return total === void 0 || total < 2;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/helpers/insertStyleRule.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/insertStyleRule.tsx"],
-  "sourcesContent": ["import type { RulesToInsert, StyleObject } from '../types.js'\n\nconst allSelectors: Record<string, string> = {}\nconst allRules: Record<string, string> = {}\nexport const insertedTransforms = {}\n\nexport const getAllSelectors = () => allSelectors\nexport const getAllRules = () => Object.values(allRules)\nexport const getAllTransforms = () => insertedTransforms\n\n// keep transforms in map for merging later\nfunction addTransform(identifier: string, css: string, rule?: CSSRule) {\n  const s = css.indexOf('transform:')\n  if (s === -1) {\n    if (process.env.NODE_ENV === 'development') {\n      console.error(`\u274C Invalid transform, likely used deg/% improperly ${identifier}`)\n    }\n    return false\n  }\n  const startI = s + 'transform:'.length\n  const endI = css.indexOf(';')\n  const value = css.slice(startI, endI)\n  if (!insertedTransforms[identifier]) {\n    insertedTransforms[identifier] = value\n    return true\n  }\n  return false\n}\n\nconst isClient = typeof document !== 'undefined'\n\n// gets existing ones (client side)\n// takes ~0.1ms for a fairly large page\n// used now for three things:\n//   1. debugging at dev time\n//   2. avoid duplicate insert styles at runtime\n//   3. used now for merging transforms atomically\n\n// multiple sheets could have the same ids so we have to count\n\n// only cache tamagui styles\nconst scannedCache = new WeakMap<CSSStyleSheet, string>()\nconst totalSheetSelectors = new Map<string, number>()\n\nexport function listenForSheetChanges() {\n  if (!isClient) return\n  function handleNode(node: Node, remove = false) {\n    if (node instanceof HTMLStyleElement && node.sheet) {\n      updateSheetStyles(node.sheet, remove)\n    }\n  }\n  const mo = new MutationObserver((entries) => {\n    for (const entry of entries) {\n      entry.addedNodes.forEach((node) => handleNode(node))\n      entry.removedNodes.forEach((node) => handleNode(node, true))\n    }\n  })\n  mo.observe(document.head, {\n    childList: true,\n  })\n}\n\nexport function scanAllSheets() {\n  if (process.env.NODE_ENV === 'test') return\n  if (!isClient) return\n  const sheets = document.styleSheets\n  if (!sheets) return\n  for (let i = 0; i < sheets.length; i++) {\n    const sheet = sheets[i]\n    if (!sheet) continue\n    updateSheetStyles(sheet)\n  }\n}\n\nfunction track(id: string, remove = false) {\n  const next = (totalSheetSelectors.get(id) || 0) + (remove ? -1 : 1)\n  totalSheetSelectors.set(id, next)\n  return next\n}\n\nfunction updateSheetStyles(sheet: CSSStyleSheet, remove = false) {\n  // avoid errors on cross origin sheets\n  // https://stackoverflow.com/questions/49993633/uncaught-domexception-failed-to-read-the-cssrules-property\n  let rules: CSSRuleList\n  try {\n    rules = sheet.cssRules\n  } catch {\n    return\n  }\n\n  // not tamagui stylesheet\n  const firstSelector = getTamaguiSelector(rules[0])?.[0]\n  if (!firstSelector) {\n    return\n  }\n\n  const lastSelector = getTamaguiSelector(rules[rules.length - 1])?.[0]\n\n  const cacheKey = `${rules.length}${firstSelector}${lastSelector}`\n  const lastScanned = scannedCache.get(sheet)\n  if (!remove) {\n    // avoid re-scanning\n    if (lastScanned === cacheKey) {\n      return\n    }\n  }\n\n  const len = rules.length\n  for (let i = 0; i < len; i++) {\n    const rule = rules[i]\n    const response = getTamaguiSelector(rule)\n    if (!response) {\n      return\n    }\n\n    const [identifier, cssRule] = response\n\n    // track references\n    const total = track(identifier, remove)\n\n    if (remove) {\n      if (total === 0) {\n        delete allSelectors[identifier]\n      }\n    } else {\n      if (!(identifier in allSelectors)) {\n        const isTransform = identifier.startsWith('_transform')\n        const shouldInsert = isTransform\n          ? addTransform(identifier, cssRule.cssText, cssRule)\n          : true\n        if (shouldInsert) {\n          allSelectors[identifier] = cssRule.cssText\n        }\n      }\n    }\n  }\n\n  scannedCache.set(sheet, cacheKey)\n}\n\nfunction getTamaguiSelector(\n  rule: CSSRule | null\n): readonly [string, CSSStyleRule] | null {\n  if (rule instanceof CSSStyleRule) {\n    const text = rule.selectorText\n    if (text[0] === '.' && text[1] === '_') {\n      return [text.slice(1), rule]\n    }\n    if (text.startsWith(':root') && text.includes('._')) {\n      return [getIdentifierFromTamaguiSelector(text), rule]\n    }\n  } else if (rule instanceof CSSMediaRule) {\n    // tamagui only ever inserts 1 rule per media\n    if (rule.cssRules.length > 1) return null\n    return getTamaguiSelector(rule.cssRules[0])\n  }\n  return null\n}\n\nconst getIdentifierFromTamaguiSelector = (selector: string) =>\n  selector\n    .replace(/(:root)+\\s+/, '')\n    .replace(/:[a-z]+$/, '')\n    .slice(1)\n\nconst sheet = isClient\n  ? document.head.appendChild(document.createElement('style')).sheet\n  : null\n\nexport function updateRules(identifier: string, rules: string[]) {\n  if (allRules[identifier]) return false\n  allRules[identifier] = rules.join(' ')\n  if (identifier.startsWith('_transform')) {\n    return addTransform(identifier, rules[0])\n  }\n  return true\n}\n\nexport function insertStyleRules(rulesToInsert: RulesToInsert) {\n  if (!rulesToInsert.length) return\n  if (isClient && !sheet) {\n    if (process.env.NODE_ENV === 'development') throw 'impossible'\n    return\n  }\n  for (const { identifier, rules } of rulesToInsert) {\n    if (identifier in allSelectors) continue\n    allSelectors[identifier] =\n      process.env.NODE_ENV === 'development' ? rules.join('\\n') : ' '\n    updateRules(identifier, rules)\n    if (sheet) {\n      for (const rule of rules) {\n        try {\n          sheet.insertRule(rule, sheet.cssRules.length)\n        } catch (err) {\n          if (process.env.NODE_ENV !== 'production') {\n            console.groupCollapsed(\n              `Error inserting rule into CSSStyleSheet: ${String(err)}`\n            )\n            console.log({ rule, rulesToInsert })\n            console.trace()\n            console.groupEnd()\n          }\n        }\n      }\n    }\n  }\n}\n\nconst IS_STATIC = process.env.IS_STATIC === 'is_static'\n\nexport function shouldInsertStyleRules(styleObject: StyleObject) {\n  if (IS_STATIC) {\n    return true\n  }\n  return !(styleObject.identifier in allSelectors)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,MAAM,eAAuC,CAAC;AAC9C,MAAM,WAAmC,CAAC;AACnC,MAAM,qBAAqB,CAAC;AAE5B,MAAM,kBAAkB,MAAM;AAC9B,MAAM,cAAc,MAAM,OAAO,OAAO,QAAQ;AAChD,MAAM,mBAAmB,MAAM;AAGtC,SAAS,aAAa,YAAoB,KAAa,MAAgB;AACrE,QAAM,IAAI,IAAI,QAAQ,YAAY;AAClC,MAAI,MAAM,IAAI;AACZ,QAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,cAAQ,MAAM,0DAAqD,YAAY;AAAA,IACjF;AACA,WAAO;AAAA,EACT;AACA,QAAM,SAAS,IAAI,aAAa;AAChC,QAAM,OAAO,IAAI,QAAQ,GAAG;AAC5B,QAAM,QAAQ,IAAI,MAAM,QAAQ,IAAI;AACpC,MAAI,CAAC,mBAAmB,UAAU,GAAG;AACnC,uBAAmB,UAAU,IAAI;AACjC,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEA,MAAM,WAAW,OAAO,aAAa;AAYrC,MAAM,eAAe,oBAAI,QAA+B;AACxD,MAAM,sBAAsB,oBAAI,IAAoB;AAE7C,SAAS,wBAAwB;AACtC,MAAI,CAAC;AAAU;AACf,WAAS,WAAW,MAAY,SAAS,OAAO;AAC9C,QAAI,gBAAgB,oBAAoB,KAAK,OAAO;AAClD,wBAAkB,KAAK,OAAO,MAAM;AAAA,IACtC;AAAA,EACF;AACA,QAAM,KAAK,IAAI,iBAAiB,CAAC,YAAY;AAC3C,eAAW,SAAS,SAAS;AAC3B,YAAM,WAAW,QAAQ,CAAC,SAAS,WAAW,IAAI,CAAC;AACnD,YAAM,aAAa,QAAQ,CAAC,SAAS,WAAW,MAAM,IAAI,CAAC;AAAA,IAC7D;AAAA,EACF,CAAC;AACD,KAAG,QAAQ,SAAS,MAAM;AAAA,IACxB,WAAW;AAAA,EACb,CAAC;AACH;AAEO,SAAS,gBAAgB;AAC9B,MAAI,QAAQ,IAAI,aAAa;AAAQ;AACrC,MAAI,CAAC;AAAU;AACf,QAAM,SAAS,SAAS;AACxB,MAAI,CAAC;AAAQ;AACb,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,UAAMA,SAAQ,OAAO,CAAC;AACtB,QAAI,CAACA;AAAO;AACZ,sBAAkBA,MAAK;AAAA,EACzB;AACF;AAEA,SAAS,MAAM,IAAY,SAAS,OAAO;AACzC,QAAM,QAAQ,oBAAoB,IAAI,EAAE,KAAK,MAAM,SAAS,KAAK;AACjE,sBAAoB,IAAI,IAAI,IAAI;AAChC,SAAO;AACT;AAEA,SAAS,kBAAkBA,QAAsB,SAAS,OAAO;AAhFjE;AAmFE,MAAI;AACJ,MAAI;AACF,YAAQA,OAAM;AAAA,EAChB,QAAE;AACA;AAAA,EACF;AAGA,QAAM,iBAAgB,wBAAmB,MAAM,CAAC,CAAC,MAA3B,mBAA+B;AACrD,MAAI,CAAC,eAAe;AAClB;AAAA,EACF;AAEA,QAAM,gBAAe,wBAAmB,MAAM,MAAM,SAAS,CAAC,CAAC,MAA1C,mBAA8C;AAEnE,QAAM,WAAW,GAAG,MAAM,SAAS,gBAAgB;AACnD,QAAM,cAAc,aAAa,IAAIA,MAAK;AAC1C,MAAI,CAAC,QAAQ;AAEX,QAAI,gBAAgB,UAAU;AAC5B;AAAA,IACF;AAAA,EACF;AAEA,QAAM,MAAM,MAAM;AAClB,WAAS,IAAI,GAAG,IAAI,KAAK,KAAK;AAC5B,UAAM,OAAO,MAAM,CAAC;AACpB,UAAM,WAAW,mBAAmB,IAAI;AACxC,QAAI,CAAC,UAAU;AACb;AAAA,IACF;AAEA,UAAM,CAAC,YAAY,OAAO,IAAI;AAG9B,UAAM,QAAQ,MAAM,YAAY,MAAM;AAEtC,QAAI,QAAQ;AACV,UAAI,UAAU,GAAG;AACf,eAAO,aAAa,UAAU;AAAA,MAChC;AAAA,IACF,OAAO;AACL,UAAI,EAAE,cAAc,eAAe;AACjC,cAAM,cAAc,WAAW,WAAW,YAAY;AACtD,cAAM,eAAe,cACjB,aAAa,YAAY,QAAQ,SAAS,OAAO,IACjD;AACJ,YAAI,cAAc;AAChB,uBAAa,UAAU,IAAI,QAAQ;AAAA,QACrC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,eAAa,IAAIA,QAAO,QAAQ;AAClC;AAEA,SAAS,mBACP,MACwC;AACxC,MAAI,gBAAgB,cAAc;AAChC,UAAM,OAAO,KAAK;AAClB,QAAI,KAAK,CAAC,MAAM,OAAO,KAAK,CAAC,MAAM,KAAK;AACtC,aAAO,CAAC,KAAK,MAAM,CAAC,GAAG,IAAI;AAAA,IAC7B;AACA,QAAI,KAAK,WAAW,OAAO,KAAK,KAAK,SAAS,IAAI,GAAG;AACnD,aAAO,CAAC,iCAAiC,IAAI,GAAG,IAAI;AAAA,IACtD;AAAA,EACF,WAAW,gBAAgB,cAAc;AAEvC,QAAI,KAAK,SAAS,SAAS;AAAG,aAAO;AACrC,WAAO,mBAAmB,KAAK,SAAS,CAAC,CAAC;AAAA,EAC5C;AACA,SAAO;AACT;AAEA,MAAM,mCAAmC,CAAC,aACxC,SACG,QAAQ,eAAe,EAAE,EACzB,QAAQ,YAAY,EAAE,EACtB,MAAM,CAAC;AAEZ,MAAM,QAAQ,WACV,SAAS,KAAK,YAAY,SAAS,cAAc,OAAO,CAAC,EAAE,QAC3D;AAEG,SAAS,YAAY,YAAoB,OAAiB;AAC/D,MAAI,SAAS,UAAU;AAAG,WAAO;AACjC,WAAS,UAAU,IAAI,MAAM,KAAK,GAAG;AACrC,MAAI,WAAW,WAAW,YAAY,GAAG;AACvC,WAAO,aAAa,YAAY,MAAM,CAAC,CAAC;AAAA,EAC1C;AACA,SAAO;AACT;AAEO,SAAS,iBAAiB,eAA8B;AAC7D,MAAI,CAAC,cAAc;AAAQ;AAC3B,MAAI,YAAY,CAAC,OAAO;AACtB,QAAI,QAAQ,IAAI,aAAa;AAAe,YAAM;AAClD;AAAA,EACF;AACA,aAAW,EAAE,YAAY,MAAM,KAAK,eAAe;AACjD,QAAI,cAAc;AAAc;AAChC,iBAAa,UAAU,IACrB,QAAQ,IAAI,aAAa,gBAAgB,MAAM,KAAK,IAAI,IAAI;AAC9D,gBAAY,YAAY,KAAK;AAC7B,QAAI,OAAO;AACT,iBAAW,QAAQ,OAAO;AACxB,YAAI;AACF,gBAAM,WAAW,MAAM,MAAM,SAAS,MAAM;AAAA,QAC9C,SAAS,KAAP;AACA,cAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,oBAAQ;AAAA,cACN,4CAA4C,OAAO,GAAG;AAAA,YACxD;AACA,oBAAQ,IAAI,EAAE,MAAM,cAAc,CAAC;AACnC,oBAAQ,MAAM;AACd,oBAAQ,SAAS;AAAA,UACnB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEA,MAAM,YAAY,QAAQ,IAAI,cAAc;AAErC,SAAS,uBAAuB,aAA0B;AAC/D,MAAI,WAAW;AACb,WAAO;AAAA,EACT;AACA,SAAO,EAAE,YAAY,cAAc;AACrC;",
+  "sourcesContent": ["import { isClient } from '@tamagui/constants'\n\nimport type { RulesToInsert, StyleObject } from '../types.js'\n\nconst allSelectors: Record<string, string> = {}\nconst allRules: Record<string, string> = {}\nexport const insertedTransforms = {}\n\nexport const getAllSelectors = () => allSelectors\nexport const getAllRules = () => Object.values(allRules)\nexport const getAllTransforms = () => insertedTransforms\n\n// keep transforms in map for merging later\nfunction addTransform(identifier: string, css: string, rule?: CSSRule) {\n  const s = css.indexOf('transform:')\n  if (s === -1) {\n    if (process.env.NODE_ENV === 'development') {\n      console.error(`\u274C Invalid transform, likely used deg/% improperly ${identifier}`)\n    }\n    return\n  }\n  const startI = s + 'transform:'.length\n  const endI = css.indexOf(';')\n  const value = css.slice(startI, endI)\n  if (!insertedTransforms[identifier]) {\n    insertedTransforms[identifier] = value\n    return true\n  }\n}\n\n// gets existing ones (client side)\n// takes ~0.1ms for a fairly large page\n// used now for three things:\n//   1. debugging at dev time\n//   2. avoid duplicate insert styles at runtime\n//   3. used now for merging transforms atomically\n\n// multiple sheets could have the same ids so we have to count\n\n// only cache tamagui styles\nconst scannedCache = new WeakMap<CSSStyleSheet, string>()\nconst totalSelectorsInserted = new Map<string, number>()\n\nexport function listenForSheetChanges() {\n  if (!isClient) return\n\n  const mo = new MutationObserver((entries) => {\n    for (const entry of entries) {\n      if (\n        (entry instanceof HTMLStyleElement && entry.sheet) ||\n        (entry instanceof HTMLLinkElement && entry.href.endsWith('.css'))\n      ) {\n        scanAllSheets()\n        break\n      }\n    }\n  })\n\n  mo.observe(document.head, {\n    childList: true,\n  })\n}\n\nlet lastScannedSheets: Set<CSSStyleSheet> | null = null\n\nexport function scanAllSheets() {\n  if (process.env.NODE_ENV === 'test') return\n  if (!isClient) return\n\n  const sheets = document.styleSheets || []\n  const prev = lastScannedSheets\n  const current = new Set(sheets as any as CSSStyleSheet[])\n  if (document.styleSheets) {\n    for (const sheet of current) {\n      sheet && updateSheetStyles(sheet)\n    }\n    lastScannedSheets = current\n  }\n\n  if (prev) {\n    for (const sheet of prev) {\n      if (sheet && !current.has(sheet)) {\n        updateSheetStyles(sheet, true)\n      }\n    }\n  }\n}\n\nfunction track(id: string, remove = false) {\n  const next = (totalSelectorsInserted.get(id) || 0) + (remove ? -1 : 1)\n  totalSelectorsInserted.set(id, next)\n  return next\n}\n\nfunction updateSheetStyles(sheet: CSSStyleSheet, remove = false) {\n  // avoid errors on cross origin sheets\n  // https://stackoverflow.com/questions/49993633/uncaught-domexception-failed-to-read-the-cssrules-property\n  let rules: CSSRuleList\n  try {\n    rules = sheet.cssRules\n  } catch {\n    return\n  }\n\n  const firstSelector = getTamaguiSelector(rules[0])?.[0]\n  const lastSelector = getTamaguiSelector(rules[rules.length - 1])?.[0]\n  const cacheKey = `${rules.length}${firstSelector}${lastSelector}`\n  const lastScanned = scannedCache.get(sheet)\n\n  if (!remove) {\n    // avoid re-scanning\n    if (lastScanned === cacheKey) {\n      return\n    }\n  }\n\n  const len = rules.length\n  let fails = 0\n\n  for (let i = 0; i < len; i++) {\n    const rule = rules[i]\n    if (!(rule instanceof CSSStyleRule)) continue\n\n    const response = getTamaguiSelector(rule)\n\n    if (!response) {\n      fails++\n      if (fails > 5) {\n        // conservatively bail out of non-tamagui sheets\n        return\n      }\n      continue\n    }\n\n    const [identifier, cssRule] = response\n\n    // track references\n    const total = track(identifier, remove)\n\n    if (remove) {\n      if (total === 0) {\n        delete allSelectors[identifier]\n      }\n    } else if (!(identifier in allSelectors)) {\n      const isTransform = identifier.startsWith('_transform')\n      const shouldInsert = isTransform\n        ? addTransform(identifier, cssRule.cssText, cssRule)\n        : true\n      if (shouldInsert) {\n        allSelectors[identifier] = cssRule.cssText\n      }\n    }\n  }\n\n  scannedCache.set(sheet, cacheKey)\n}\n\nfunction getTamaguiSelector(\n  rule: CSSRule | null\n): readonly [string, CSSStyleRule] | null {\n  if (rule instanceof CSSStyleRule) {\n    const text = rule.selectorText\n    if (text[0] === '.' && text[1] === '_') {\n      return [text.slice(1), rule]\n    }\n    if (text.startsWith(':root') && text.includes('._')) {\n      return [getIdentifierFromTamaguiSelector(text), rule]\n    }\n  } else if (rule instanceof CSSMediaRule) {\n    // tamagui only ever inserts 1 rule per media\n    if (rule.cssRules.length > 1) return null\n    return getTamaguiSelector(rule.cssRules[0])\n  }\n  return null\n}\n\nconst getIdentifierFromTamaguiSelector = (selector: string) =>\n  selector\n    .replace(/(:root)+\\s+/, '')\n    .replace(/:[a-z]+$/, '')\n    .slice(1)\n\nconst sheet = isClient\n  ? document.head.appendChild(document.createElement('style')).sheet\n  : null\n\nexport function updateRules(identifier: string, rules: string[]) {\n  if (identifier in allRules) {\n    return false\n  }\n  allRules[identifier] = rules.join(' ')\n  if (identifier.startsWith('_transform')) {\n    return addTransform(identifier, rules[0])\n  }\n  return true\n}\n\nexport function insertStyleRules(rulesToInsert: RulesToInsert) {\n  if (!rulesToInsert.length || !sheet) {\n    return\n  }\n\n  for (const { identifier, rules } of rulesToInsert) {\n    if (!shouldInsertStyleRules(identifier)) {\n      continue\n    }\n\n    allSelectors[identifier] = rules.join('\\n')\n    track(identifier)\n    updateRules(identifier, rules)\n\n    for (const rule of rules) {\n      if (process.env.NODE_ENV === 'production') {\n        sheet.insertRule(rule, sheet.cssRules.length)\n      } else {\n        try {\n          sheet.insertRule(rule, sheet.cssRules.length)\n        } catch (err) {\n          console.groupCollapsed(\n            `Error inserting rule into CSSStyleSheet: ${String(err)}`\n          )\n          console.log({ rule, rulesToInsert })\n          console.trace()\n          console.groupEnd()\n        }\n      }\n    }\n  }\n}\n\nexport function shouldInsertStyleRules(identifier: string) {\n  if (process.env.IS_STATIC === 'is_static') {\n    return true\n  }\n  const total = totalSelectorsInserted.get(identifier)\n  // note, -1, we are being conservative and leaving some in\n  return total === undefined || total < 2\n}\n"],
+  "mappings": "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",
   "names": ["sheet"]
 }

package/dist/cjs/styled.js

@@ -24,23 +24,24 @@ module.exports = __toCommonJS(styled_exports);
 var import_helpers = require("@tamagui/helpers");
 var import_createComponent = require("./createComponent.js");
 var import_setupReactNative = require("./setupReactNative.js");
-function styled(Component, options, staticExtractionOptions) {
+function styled(ComponentIn, options, staticExtractionOptions) {
   if (process.env.NODE_ENV !== "production") {
-    if (!Component) {
+    if (!ComponentIn) {
       throw new Error(`No component given to styled()`);
     }
     if (options == null ? void 0 : options.variants) {
       for (const key in options.variants) {
         if (key in import_helpers.stylePropsAll) {
           console.error(
-            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce implementation complexity.`
+            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce complexity and confusion.`
           );
         }
       }
     }
   }
-  const parentStaticConfig = "staticConfig" in Component ? Component.staticConfig : null;
-  const isTamagui = !!parentStaticConfig;
+  const parentStaticConfig = "staticConfig" in ComponentIn ? ComponentIn.staticConfig : null;
+  const isPlainStyledComponent = !!parentStaticConfig && !(parentStaticConfig.isReactNative || parentStaticConfig.isHOC);
+  const Component = isPlainStyledComponent ? ComponentIn : (parentStaticConfig == null ? void 0 : parentStaticConfig.Component) || ComponentIn;
   const isReactNative = Boolean(
     import_setupReactNative.ReactNativeStaticConfigs.has(Component) || (staticExtractionOptions == null ? void 0 : staticExtractionOptions.isReactNative) || import_setupReactNative.ReactNativeStaticConfigs.has(parentStaticConfig == null ? void 0 : parentStaticConfig.Component) || (parentStaticConfig == null ? void 0 : parentStaticConfig.isReactNative)
   );
@@ -56,16 +57,15 @@ function styled(Component, options, staticExtractionOptions) {
       if (defaultVariants) {
         Object.assign(defaultProps, defaultVariants);
       }
-      const Comp = isReactNative ? (parentStaticConfig == null ? void 0 : parentStaticConfig.Component) || Component : Component;
-      const nativeConf = isReactNative && import_setupReactNative.ReactNativeStaticConfigs.get(Comp) || null;
+      const nativeConf = isReactNative && import_setupReactNative.ReactNativeStaticConfigs.get(Component) || null;
       const isText = Boolean(
         (staticExtractionOptions == null ? void 0 : staticExtractionOptions.isText) || (parentStaticConfig == null ? void 0 : parentStaticConfig.isText)
       );
-      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative);
+      const acceptsClassName = acceptsClassNameProp ?? (isPlainStyledComponent || isReactNative);
       const conf = {
         ...staticExtractionOptions,
-        ...!isTamagui && {
-          Component: Comp
+        ...!isPlainStyledComponent && {
+          Component
         },
         // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above
         // take away the Partial<> and it's fine

package/dist/cjs/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx"],
-  "sourcesContent": ["import { stylePropsAll } from '@tamagui/helpers'\nimport { forwardRef } from 'react'\n\nimport { createComponent } from './createComponent.js'\nimport { ReactNativeStaticConfigs } from './setupReactNative.js'\nimport type {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  TamaguiElement,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types.js'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> =\n  GetProps<ParentComponent> & {\n    name?: string\n    variants?: VariantDefinitions<ParentComponent> | undefined\n    defaultVariants?: { [key: string]: any }\n  }\n\ntype GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  infer P\n>\n  ? P\n  : GetProps<A>\n\ntype GetVariantProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  any,\n  infer V\n>\n  ? V\n  : {}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n  Component: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n    acceptsClassName?: boolean\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  // validate not using a variant over an existing valid style\n  if (process.env.NODE_ENV !== 'production') {\n    if (!Component) {\n      throw new Error(`No component given to styled()`)\n    }\n    if (options?.variants) {\n      for (const key in options.variants) {\n        if (key in stylePropsAll) {\n          console.error(\n            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce implementation complexity.`\n          )\n        }\n      }\n    }\n  }\n\n  const parentStaticConfig =\n    'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null\n  const isTamagui = !!parentStaticConfig\n\n  const isReactNative = Boolean(\n    ReactNativeStaticConfigs.has(Component) ||\n      staticExtractionOptions?.isReactNative ||\n      ReactNativeStaticConfigs.has(parentStaticConfig?.Component) ||\n      parentStaticConfig?.isReactNative\n  )\n\n  const staticConfigProps = (() => {\n    if (options) {\n      const {\n        variants,\n        name,\n        defaultVariants,\n        acceptsClassName: acceptsClassNameProp,\n        ...defaultProps\n      } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n\n      const Comp = isReactNative\n        ? parentStaticConfig?.Component || Component\n        : (Component as any)\n\n      const nativeConf = (isReactNative && ReactNativeStaticConfigs.get(Comp)) || null\n\n      const isText = Boolean(\n        staticExtractionOptions?.isText || parentStaticConfig?.isText\n      )\n      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative)\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name || parentStaticConfig?.componentName,\n        isReactNative,\n        isText,\n        acceptsClassName,\n        ...nativeConf,\n      }\n\n      // bail on non className views as well\n      if (defaultProps.children || !acceptsClassName) {\n        conf.neverFlatten = true\n      }\n\n      return conf\n    }\n  })()\n\n  const component = createComponent(staticConfigProps || {}, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = GetBaseProps<ParentComponent>\n  type ParentVariants = GetVariantProps<ParentComponent>\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<\n          any,\n          infer Val\n        >\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  type StyledComponent = TamaguiComponent<\n    Props,\n    TamaguiElement,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n\n  return component as StyledComponent\n}\n\n// sanity check types\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n//   variants: {\n//     size: {\n//       '...size': (val) => {\n//         return {\n//           pointerEvents: 'auto'\n//         }\n//       }\n//     },\n//     disabled: {\n//       true: {\n//         alignContent: 'center',\n//         opacity: 0.5,\n//         pointerEvents: 'none',\n//       },\n//     },\n//   } as const\n// })\n// // type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA8B;AAG9B,6BAAgC;AAChC,8BAAyC;AAuClC,SAAS,OAId,WAEA,SAOA,yBACA;AAEA,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,WAAW;AACd,YAAM,IAAI,MAAM,gCAAgC;AAAA,IAClD;AACA,QAAI,mCAAS,UAAU;AACrB,iBAAW,OAAO,QAAQ,UAAU;AAClC,YAAI,OAAO,8BAAe;AACxB,kBAAQ;AAAA,YACN,gDAAgD;AAAA,UAClD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBACJ,kBAAkB,YAAa,UAAU,eAAgC;AAC3E,QAAM,YAAY,CAAC,CAAC;AAEpB,QAAM,gBAAgB;AAAA,IACpB,iDAAyB,IAAI,SAAS,MACpC,mEAAyB,kBACzB,iDAAyB,IAAI,yDAAoB,SAAS,MAC1D,yDAAoB;AAAA,EACxB;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,SAAS;AACX,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAkB;AAAA,QAClB,GAAG;AAAA,MACL,IAAI;AACJ,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AAEA,YAAM,OAAO,iBACT,yDAAoB,cAAa,YAChC;AAEL,YAAM,aAAc,iBAAiB,iDAAyB,IAAI,IAAI,KAAM;AAE5E,YAAM,SAAS;AAAA,SACb,mEAAyB,YAAU,yDAAoB;AAAA,MACzD;AACA,YAAM,mBAAmB,yBAAyB,aAAa;AAE/D,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,SAAQ,yDAAoB;AAAA,QAC3C;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAGA,UAAI,aAAa,YAAY,CAAC,kBAAkB;AAC9C,aAAK,eAAe;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AAAA,EACF,GAAG;AAEH,QAAM,gBAAY,wCAAgB,qBAAqB,CAAC,GAAG,SAAS;AAqCpE,SAAO;AACT;",
+  "sourcesContent": ["import { stylePropsAll } from '@tamagui/helpers'\nimport { forwardRef } from 'react'\n\nimport { createComponent } from './createComponent.js'\nimport { ReactNativeStaticConfigs } from './setupReactNative.js'\nimport type {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  TamaguiElement,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types.js'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> =\n  GetProps<ParentComponent> & {\n    name?: string\n    variants?: VariantDefinitions<ParentComponent> | undefined\n    defaultVariants?: { [key: string]: any }\n  }\n\ntype GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  infer P\n>\n  ? P\n  : GetProps<A>\n\ntype GetVariantProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  any,\n  infer V\n>\n  ? V\n  : {}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n  ComponentIn: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n    acceptsClassName?: boolean\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  // validate not using a variant over an existing valid style\n  if (process.env.NODE_ENV !== 'production') {\n    if (!ComponentIn) {\n      throw new Error(`No component given to styled()`)\n    }\n    if (options?.variants) {\n      for (const key in options.variants) {\n        if (key in stylePropsAll) {\n          console.error(\n            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce complexity and confusion.`\n          )\n        }\n      }\n    }\n  }\n\n  const parentStaticConfig =\n    'staticConfig' in ComponentIn ? (ComponentIn.staticConfig as StaticConfig) : null\n\n  const isPlainStyledComponent =\n    !!parentStaticConfig &&\n    !(parentStaticConfig.isReactNative || parentStaticConfig.isHOC)\n\n  const Component: any = isPlainStyledComponent\n    ? ComponentIn\n    : parentStaticConfig?.Component || ComponentIn\n\n  const isReactNative = Boolean(\n    ReactNativeStaticConfigs.has(Component) ||\n      staticExtractionOptions?.isReactNative ||\n      ReactNativeStaticConfigs.has(parentStaticConfig?.Component) ||\n      parentStaticConfig?.isReactNative\n  )\n\n  const staticConfigProps = (() => {\n    if (options) {\n      const {\n        variants,\n        name,\n        defaultVariants,\n        acceptsClassName: acceptsClassNameProp,\n        ...defaultProps\n      } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n\n      const nativeConf =\n        (isReactNative && ReactNativeStaticConfigs.get(Component)) || null\n\n      const isText = Boolean(\n        staticExtractionOptions?.isText || parentStaticConfig?.isText\n      )\n      const acceptsClassName =\n        acceptsClassNameProp ?? (isPlainStyledComponent || isReactNative)\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isPlainStyledComponent && {\n          Component,\n        }),\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name || parentStaticConfig?.componentName,\n        isReactNative,\n        isText,\n        acceptsClassName,\n        ...nativeConf,\n      }\n\n      // bail on non className views as well\n      if (defaultProps.children || !acceptsClassName) {\n        conf.neverFlatten = true\n      }\n\n      return conf\n    }\n  })()\n\n  const component = createComponent(staticConfigProps || {}, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = GetBaseProps<ParentComponent>\n  type ParentVariants = GetVariantProps<ParentComponent>\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<\n          any,\n          infer Val\n        >\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  type StyledComponent = TamaguiComponent<\n    Props,\n    TamaguiElement,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n\n  return component as StyledComponent\n}\n\n// sanity check types\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n//   variants: {\n//     size: {\n//       '...size': (val) => {\n//         return {\n//           pointerEvents: 'auto'\n//         }\n//       }\n//     },\n//     disabled: {\n//       true: {\n//         alignContent: 'center',\n//         opacity: 0.5,\n//         pointerEvents: 'none',\n//       },\n//     },\n//   } as const\n// })\n// // type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA8B;AAG9B,6BAAgC;AAChC,8BAAyC;AAuClC,SAAS,OAId,aAEA,SAOA,yBACA;AAEA,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAI,CAAC,aAAa;AAChB,YAAM,IAAI,MAAM,gCAAgC;AAAA,IAClD;AACA,QAAI,mCAAS,UAAU;AACrB,iBAAW,OAAO,QAAQ,UAAU;AAClC,YAAI,OAAO,8BAAe;AACxB,kBAAQ;AAAA,YACN,gDAAgD;AAAA,UAClD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBACJ,kBAAkB,cAAe,YAAY,eAAgC;AAE/E,QAAM,yBACJ,CAAC,CAAC,sBACF,EAAE,mBAAmB,iBAAiB,mBAAmB;AAE3D,QAAM,YAAiB,yBACnB,eACA,yDAAoB,cAAa;AAErC,QAAM,gBAAgB;AAAA,IACpB,iDAAyB,IAAI,SAAS,MACpC,mEAAyB,kBACzB,iDAAyB,IAAI,yDAAoB,SAAS,MAC1D,yDAAoB;AAAA,EACxB;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,SAAS;AACX,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAkB;AAAA,QAClB,GAAG;AAAA,MACL,IAAI;AACJ,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AAEA,YAAM,aACH,iBAAiB,iDAAyB,IAAI,SAAS,KAAM;AAEhE,YAAM,SAAS;AAAA,SACb,mEAAyB,YAAU,yDAAoB;AAAA,MACzD;AACA,YAAM,mBACJ,yBAAyB,0BAA0B;AAErD,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,0BAA0B;AAAA,UAC7B;AAAA,QACF;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe,SAAQ,yDAAoB;AAAA,QAC3C;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAGA,UAAI,aAAa,YAAY,CAAC,kBAAkB;AAC9C,aAAK,eAAe;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AAAA,EACF,GAAG;AAEH,QAAM,gBAAY,wCAAgB,qBAAqB,CAAC,GAAG,SAAS;AAqCpE,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/types.tsx"],
-  "sourcesContent": ["// TODO split this into own package @tamagui/types to share with animations packages\n\nimport type { StyleObject } from '@tamagui/helpers'\nimport type { Properties } from 'csstype'\nimport type {\n  ComponentType,\n  ForwardRefExoticComponent,\n  FunctionComponent,\n  HTMLAttributes,\n  ReactNode,\n  RefAttributes,\n  RefObject,\n} from 'react'\nimport type {\n  GestureResponderHandlers,\n  PressableProps,\n  TextProps as ReactTextProps,\n  TextStyle,\n  View,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\n\nimport type { Variable } from './createVariable.js'\nimport type { ResolveVariableTypes } from './helpers/createPropMapper.js'\nimport type { FontLanguageProps } from './views/FontLanguage.types.js'\nimport type { ThemeProviderProps } from './views/ThemeProvider.js'\n\nexport type { MediaStyleObject, StyleObject } from '@tamagui/helpers'\n\nexport type SpaceDirection = 'vertical' | 'horizontal' | 'both'\n\nexport type TamaguiElement = HTMLElement | View\n\nexport type DebugProp = boolean | 'break' | 'verbose'\n\n// base props that are accepted by createComponent (additional to react-native-web)\n\ntype DivAttributes = HTMLAttributes<HTMLDivElement>\n\nexport type TamaguiReactElement<P = any> = React.ReactElement<P> & {\n  type: TamaguiComponent\n}\n\nexport type TamaguiComponentPropsBase = {\n  target?: string\n  hitSlop?: PressableProps['hitSlop']\n  asChild?: boolean\n  space?: SpaceTokens | null\n  spaceDirection?: SpaceDirection\n  separator?: ReactNode\n  dangerouslySetInnerHTML?: { __html: string }\n  animation?: AnimationProp | null\n  animateOnly?: string[]\n  children?: any | any[]\n  debug?: DebugProp\n  disabled?: boolean\n  className?: string\n  themeShallow?: boolean\n  id?: string\n  tag?: string\n  theme?: ThemeName | null\n  componentName?: string\n  tabIndex?: string | number\n  role?: string\n\n  /**\n   * Forces the pseudo style state to be on\n   */\n  forceStyle?: 'hover' | 'press' | 'focus'\n  onPress?: PressableProps['onPress']\n  onPressIn?: PressableProps['onPress']\n  onPressOut?: PressableProps['onPress']\n\n  // WEB ONLY TODO probably remove these in favor of something better\n  onHoverIn?: DivAttributes['onMouseEnter']\n  onHoverOut?: DivAttributes['onMouseLeave']\n  onMouseEnter?: DivAttributes['onMouseEnter']\n  onMouseLeave?: DivAttributes['onMouseLeave']\n  onMouseDown?: DivAttributes['onMouseDown']\n  onMouseUp?: DivAttributes['onMouseUp']\n  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void\n  onScroll?: (event: React.UIEvent<HTMLDivElement, UIEvent>) => void\n}\n\nexport type ReactComponentWithRef<Props, Ref> = ForwardRefExoticComponent<\n  Props & RefAttributes<Ref>\n>\n\nexport type ConfigListener = (conf: TamaguiInternalConfig) => void\n\n// to prevent things from going circular, hoisting some types in this file\n// to generally order them as building up towards TamaguiConfig\n\nexport type VariableVal = number | string | Variable\nexport type VariableColorVal = string | Variable\n\ntype GenericKey = string\n\nexport interface CreateTokens<Val extends VariableVal = VariableVal> {\n  color: { [key: GenericKey]: Val }\n  space: { [key: GenericKey]: Val }\n  size: { [key: GenericKey]: Val }\n  radius: { [key: GenericKey]: Val }\n  zIndex: { [key: GenericKey]: Val }\n}\n\ntype Tokenify<A extends GenericTokens> = {\n  color: TokenifyRecord<A['color']>\n  space: TokenifyRecord<A['space']>\n  size: TokenifyRecord<A['size']>\n  radius: TokenifyRecord<A['radius']>\n  zIndex: TokenifyRecord<A['zIndex']>\n}\n\ntype TokenifyRecord<A extends CreateTokens[keyof CreateTokens]> = {\n  [Key in keyof A]: A[Key] extends Variable ? A[Key] : Variable<A[Key]>\n}\n\nexport type TamaguiBaseTheme = {\n  // defined for our tamagui kit , we could do this inside `tamagui`\n  // but maybe helpful to have some sort of universally shared things +\n  // + enforce if they want their own, redefine in their design sys\n  background: VariableColorVal\n  backgroundHover: VariableColorVal\n  backgroundPress: VariableColorVal\n  backgroundFocus: VariableColorVal\n  color: VariableColorVal\n  colorHover: VariableColorVal\n  colorPress: VariableColorVal\n  colorFocus: VariableColorVal\n  borderColor: VariableColorVal\n  borderColorHover: VariableColorVal\n  borderColorPress: VariableColorVal\n  borderColorFocus: VariableColorVal\n  shadowColor: VariableColorVal\n  shadowColorHover: VariableColorVal\n  shadowColorPress: VariableColorVal\n  shadowColorFocus: VariableColorVal\n}\n\ntype GenericTokens = CreateTokens\ntype GenericThemes = {\n  [key: string]:\n    | Partial<TamaguiBaseTheme> & {\n        [key: string]: VariableVal\n      }\n}\n\nexport type CreateShorthands = {\n  // for some reason using keyof ViewStyle here will cause type circularity on react native 0.71\n  [key: string]: string\n}\n\nexport type GenericShorthands = {}\n\n// sm: { minWidth: 100 }\ntype GenericMedia = {\n  [key: string]: {\n    [key: string]: number | string\n  }\n}\n\nexport type GenericFonts = Record<string, GenericFont>\n\ntype GenericAnimations = {\n  [key: string]:\n    | string\n    | {\n        [key: string]: any\n      }\n    | any[]\n}\n\n// this is the \"main\" typed object, which users re-define\n// (internal) keep all types directly on this object and reference them from elsewhere\n//\n// const config = createTamagui(...)\n// type MyConfig = typeof config\n// declare module 'tamagui' {\n//   export interface TamaguiCustomConfig extends MyConfig {}\n// }\n// now your whole app/kit should be typed correctly\n//\nexport interface TamaguiCustomConfig {}\n\nexport interface TamaguiConfig\n  extends Omit<GenericTamaguiConfig, keyof TamaguiCustomConfig>,\n    TamaguiCustomConfig {}\n\nexport type CreateTamaguiConfig<\n  A extends GenericTokens,\n  B extends GenericThemes,\n  C extends GenericShorthands = GenericShorthands,\n  D extends GenericMedia = GenericMedia,\n  E extends GenericAnimations = GenericAnimations,\n  F extends GenericFonts = GenericFonts\n> = {\n  fonts: RemoveLanguagePostfixes<F>\n  fontLanguages: GetLanguagePostfixes<F> extends never\n    ? string[]\n    : GetLanguagePostfixes<F>[]\n  tokens: A\n  // parsed\n  themes: {\n    [Name in keyof B]: {\n      [Key in keyof B[Name]]: Variable\n    }\n  }\n  shorthands: C\n  media: D\n  animations: AnimationDriver<E>\n}\n\ntype GetLanguagePostfix<Set> = Set extends string\n  ? Set extends `${string}_${infer Postfix}`\n    ? Postfix\n    : never\n  : never\n\ntype OmitLanguagePostfix<Set> = Set extends string\n  ? Set extends `${infer Prefix}_${string}`\n    ? Prefix\n    : Set\n  : never\n\ntype RemoveLanguagePostfixes<F extends GenericFonts> = {\n  [Key in OmitLanguagePostfix<keyof F>]: F[Key]\n}\n\ntype GetLanguagePostfixes<F extends GenericFonts> = GetLanguagePostfix<keyof F>\n\n// test RemoveLanguagePostfixes\n// type x = CreateTamaguiConfig<any, any, any, any, any, {\n//   body: any,\n//   body_en: any\n// }>['fonts']\n\ntype ConfProps<\n  A extends GenericTokens,\n  B extends GenericThemes,\n  C extends GenericShorthands = GenericShorthands,\n  D extends GenericMedia = GenericMedia,\n  E extends GenericAnimations = GenericAnimations,\n  F extends GenericFonts = GenericFonts\n> = {\n  tokens: A\n  themes: B\n  shorthands?: C\n  media?: D\n  animations?: AnimationDriver<E>\n  fonts: F\n}\n\nexport type InferTamaguiConfig<Conf> = Conf extends ConfProps<\n  infer A,\n  infer B,\n  infer C,\n  infer D,\n  infer E,\n  infer F\n>\n  ? TamaguiInternalConfig<A, B, C, D, E, F>\n  : unknown\n\n// for use in creation functions so it doesnt get overwritten\nexport type GenericTamaguiConfig = CreateTamaguiConfig<\n  GenericTokens,\n  GenericThemes,\n  GenericShorthands,\n  GenericMedia,\n  GenericAnimations,\n  GenericFonts\n>\n\n// try and find the top level types as they can be supersets:\ntype NonSubThemeNames<A extends string | number> = A extends `${string}_${string}`\n  ? never\n  : A\ntype BaseThemeDefinitions = TamaguiConfig['themes'][NonSubThemeNames<\n  keyof TamaguiConfig['themes']\n>]\ntype GenericThemeDefinition = TamaguiConfig['themes'][keyof TamaguiConfig['themes']]\nexport type ThemeDefinition = BaseThemeDefinitions extends never\n  ? GenericThemeDefinition\n  : BaseThemeDefinitions\nexport type ThemeKeys = keyof ThemeDefinition\nexport type ThemeParsed = {\n  [key in ThemeKeys]: Variable<any>\n}\n\nexport type Tokens = TamaguiConfig['tokens']\n\nexport type TokensParsed = {\n  size: TokenPrefixed<Tokens['size']>\n  color: TokenPrefixed<Tokens['color']>\n  radius: TokenPrefixed<Tokens['radius']>\n  zIndex: TokenPrefixed<Tokens['zIndex']>\n  space: TokenPrefixed<Tokens['space']>\n}\n\ntype TokenPrefixed<A extends { [key: string]: any }> = {\n  [key in Ensure$Prefix<keyof A>]: A[keyof A]\n}\n\ntype Ensure$Prefix<A extends string | number | symbol> = A extends string\n  ? A extends `$${string}`\n    ? A\n    : `$${A}`\n  : never\n\nexport type TokensMerged = {\n  size: TokensParsed['size'] & Tokens['size']\n  color: TokensParsed['color'] & Tokens['color']\n  radius: TokensParsed['radius'] & Tokens['radius']\n  zIndex: TokensParsed['zIndex'] & Tokens['zIndex']\n  space: TokensParsed['space'] & Tokens['space']\n}\n\nexport type Shorthands = TamaguiConfig['shorthands']\nexport type Media = TamaguiConfig['media']\nexport type Themes = TamaguiConfig['themes']\nexport type ThemeName = Exclude<GetAltThemeNames<keyof Themes>, number>\nexport type ThemeTokens = `$${ThemeKeys}`\nexport type AnimationKeys = TamaguiConfig['animations'] extends AnimationDriver<\n  infer Config\n>\n  ? keyof Config\n  : string\nexport type FontLanguages = ArrayIntersection<TamaguiConfig['fontLanguages']>\n\nexport interface ThemeProps {\n  className?: string\n  name?: Exclude<ThemeName, number> | null\n  componentName?: string\n  children?: any\n  reset?: boolean\n  debug?: DebugProp\n  inverse?: boolean\n  // on the web, for portals we need to re-insert className\n  forceClassName?: boolean\n  // allows for disabling the auto-update behavior\n  shouldUpdate?: () => boolean\n}\n\ntype ArrayIntersection<A extends any[]> = A[keyof A]\n\ntype GetAltThemeNames<S> =\n  | (S extends `${string}_${infer Alt}` ? GetAltThemeNames<Alt> : S)\n  | S\n\ntype SpacerPropsBase = {\n  size?: number | SpaceTokens | null\n  flex?: boolean | number\n  direction?: SpaceDirection\n}\ntype SpacerOwnProps = SpacerPropsBase &\n  //\n  WithThemeShorthandsPseudosMediaAnimation<SpacerPropsBase>\n\nexport type SpacerProps = Omit<StackProps, 'flex' | 'direction' | 'size'> &\n  //\n  SpacerOwnProps\n\nexport type CreateTamaguiProps = {\n  reactNative?: any\n  shorthands?: CreateShorthands\n  media?: GenericTamaguiConfig['media']\n  animations?: AnimationDriver<any>\n  fonts: GenericTamaguiConfig['fonts']\n  tokens: GenericTamaguiConfig['tokens']\n  themes: {\n    [key: string]: {\n      [key: string]: string | number | Variable\n    }\n  }\n\n  /**\n   * *Advanced use case* For all CSS extracted views, this has no effect.\n   *\n   * For SSR compatibility on the web, Tamagui will render once with the settings\n   * from `mediaQueryDefaultActive` set for all media queries. Then, it will render\n   * again after the initial render using the proper media query values. This is so that\n   * hydration will match perfectly with the server.\n   *\n   * Setting disableSSR will avoid this second render by setting the media query state\n   * to the actual browser dimensions on initial load. This is only useful for client-only\n   * apps.\n   *\n   */\n  disableSSR?: boolean\n\n  /**\n   * Disable inserting a theme class in the DOM or context, allowing you to manually place it higher.\n   * For custom use cases like integration with next-theme.\n   */\n  disableRootThemeClass?: boolean\n\n  defaultProps?: Record<string, any> & {\n    Stack?: StackProps\n    Text?: TextProps\n    Spacer?: SpacerProps\n  }\n\n  // for the first render, determines which media queries are true\n  // useful for SSR\n  mediaQueryDefaultActive?: Record<MediaQueryKey, boolean>\n\n  // what's between each CSS style rule, set to \"\\n\" to be easier to read\n  // defaults: \"\\n\" when NODE_ENV=development, \"\" otherwise\n  cssStyleSeparator?: string\n\n  // (Advanced)\n  // on the web, tamagui treats `dark` and `light` themes as special and\n  // generates extra CSS to avoid having to re-render the entire page.\n  // this CSS relies on specificity hacks that multiply by your sub-themes.\n  // this sets the maxiumum number of nested dark/light themes you can do\n  // defaults to 3 for a balance, but can be higher if you nest them deeply.\n  maxDarkLightNesting?: number\n\n  // adds @media(prefers-color-scheme) media queries for dark/light\n  shouldAddPrefersColorThemes?: boolean\n\n  // only if you put the theme classname on the html element we have to generate diff\n  themeClassNameOnRoot?: boolean\n}\n\n// this is the config generated via createTamagui()\nexport type TamaguiInternalConfig<\n  A extends GenericTokens = GenericTokens,\n  B extends GenericThemes = GenericThemes,\n  C extends GenericShorthands = GenericShorthands,\n  D extends GenericMedia = GenericMedia,\n  E extends GenericAnimations = GenericAnimations,\n  F extends GenericFonts = GenericFonts\n> = Omit<CreateTamaguiProps, keyof GenericTamaguiConfig> &\n  Omit<CreateTamaguiConfig<A, B, C, D, E, F>, 'tokens'> & {\n    // TODO need to make it this but this breaks types, revisit\n    // animations: E //AnimationDriver<E>\n    // with $ prefixes for fast lookups (one time cost at startup vs every render)\n    tokens: Tokenify<A>\n    tokensParsed: Tokenify<A>\n    themeConfig: any\n    fontsParsed: GenericFonts\n    getCSS: () => string\n    parsed: boolean\n    inverseShorthands: Record<string, string>\n    reactNative?: any\n  }\n\nexport type GetAnimationKeys<A extends GenericTamaguiConfig> = keyof A['animations']\n\n// prevents const intersections from being clobbered into string, keeping the consts\nexport type UnionableString = string & {}\nexport type UnionableNumber = number & {}\n\nexport type GenericFont<Key extends number | string = number | string> = {\n  size: { [key in Key]: number | Variable }\n  lineHeight: Partial<{ [key in Key]: number | Variable }>\n  letterSpacing: Partial<{ [key in Key]: number | Variable }>\n  weight: Partial<{ [key in Key]: number | string | Variable }>\n  family: string | Variable\n  style?: Partial<{ [key in Key]: TextStyle['fontStyle'] | Variable }>\n  transform?: Partial<{ [key in Key]: TextStyle['textTransform'] | Variable }>\n  color?: Partial<{ [key in Key]: string | Variable }>\n  // for native use only, lets you map to alternative fonts\n  face?: Partial<{\n    [key in FontWeightSteps]: { normal?: string; italic?: string }\n  }>\n}\n\n// media\nexport type MediaQueryObject = { [key: string]: string | number | string }\nexport type MediaQueryKey = keyof Media\nexport type MediaPropKeys = `$${MediaQueryKey}`\nexport type MediaQueryState = { [key in MediaQueryKey]: boolean }\nexport type MediaProps<A> = {\n  [key in MediaPropKeys]?: A\n}\nexport type MediaQueries = {\n  [key in MediaQueryKey]: MediaQueryObject\n}\n\nexport interface MediaQueryList {\n  addListener(listener?: any): void\n  removeListener(listener?: any): void\n  matches: boolean\n}\n\nexport type MatchMedia = (query: string) => MediaQueryList\n\nexport type TransformStyleProps = {\n  x?: number\n  y?: number\n  perspective?: number\n  scale?: number\n  scaleX?: number\n  scaleY?: number\n  skewX?: string\n  skewY?: string\n  matrix?: number[]\n  rotate?: string\n  rotateY?: string\n  rotateX?: string\n  rotateZ?: string\n}\n\n// createComponent props helpers\n\n// animation=\"bouncy\"\n// animation={['bouncy', {  }]}\n// { all: 'name' }\n\n// TODO can override for better types\nexport type AnimationConfigType = any\n\nexport type AnimationProp =\n  | AnimationKeys\n  | {\n      [key: string]:\n        | AnimationKeys\n        | {\n            type: AnimationKeys\n            [key: string]: any\n          }\n    }\n  | [\n      AnimationKeys,\n      {\n        [key: string]:\n          | AnimationKeys\n          | {\n              type?: AnimationKeys\n              [key: string]: any\n            }\n      }\n    ]\n\ntype GetTokenFontKeysFor<\n  A extends\n    | 'size'\n    | 'weight'\n    | 'letterSpacing'\n    | 'family'\n    | 'lineHeight'\n    | 'transform'\n    | 'style'\n    | 'color'\n> = keyof TamaguiConfig['fonts']['body'][A]\n\ntype GetTokenString<A> = A extends string | number ? `$${A}` : `$${string}`\n\n// base tokens\nexport type SizeTokens = GetTokenString<keyof Tokens['size']> | number\nexport type SpaceTokens = GetTokenString<keyof Tokens['space']> | number | boolean\n\nexport type ColorTokens =\n  | GetTokenString<keyof Tokens['color']>\n  | GetTokenString<keyof ThemeParsed>\n  | CSSColorNames\nexport type ZIndexTokens = GetTokenString<keyof Tokens['zIndex']> | number\nexport type RadiusTokens = GetTokenString<keyof Tokens['radius']> | number\n\n// font tokens\nexport type FontTokens = GetTokenString<keyof TamaguiConfig['fonts']>\nexport type FontSizeTokens = GetTokenString<GetTokenFontKeysFor<'size'>> | number\nexport type FontLineHeightTokens = `$${GetTokenFontKeysFor<'lineHeight'>}` | number\nexport type FontWeightSteps = `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00`\nexport type FontWeightTokens = `$${GetTokenFontKeysFor<'weight'>}` | FontWeightSteps\nexport type FontColorTokens = `$${GetTokenFontKeysFor<'color'>}` | number\nexport type FontLetterSpacingTokens = `$${GetTokenFontKeysFor<'letterSpacing'>}` | number\nexport type FontStyleTokens = `$${GetTokenFontKeysFor<'style'>}` | TextStyle['fontStyle']\nexport type FontTransformTokens =\n  | `$${GetTokenFontKeysFor<'transform'>}`\n  | TextStyle['textTransform']\n\n//\n// adds theme short values to relevant props\n//\n\nexport type ThemeValueByCategory<K extends string | number | symbol> = K extends 'theme'\n  ? ThemeTokens\n  : K extends 'size'\n  ? SizeTokens\n  : K extends 'font'\n  ? FontTokens\n  : K extends 'fontSize'\n  ? FontSizeTokens\n  : K extends 'space'\n  ? SpaceTokens\n  : K extends 'color'\n  ? ColorTokens\n  : K extends 'zIndex'\n  ? ZIndexTokens\n  : K extends 'lineHeight'\n  ? FontLineHeightTokens\n  : K extends 'fontWeight'\n  ? FontWeightTokens\n  : K extends 'letterSpacing'\n  ? FontLetterSpacingTokens\n  : {}\n\ntype FontKeys = 'fontFamily'\ntype FontSizeKeys = 'fontSize'\ntype FontWeightKeys = 'fontWeight'\ntype FontLetterSpacingKeys = 'letterSpacing'\ntype LineHeightKeys = 'lineHeight'\ntype ZIndexKeys = 'zIndex'\n\nexport type ThemeValueGet<K extends string | number | symbol> = K extends 'theme'\n  ? ThemeTokens\n  : K extends SizeKeys\n  ? SizeTokens\n  : K extends FontKeys\n  ? FontTokens\n  : K extends FontSizeKeys\n  ? FontSizeTokens\n  : K extends `${`border${string | ''}Radius`}`\n  ? RadiusTokens\n  : K extends SpaceKeys\n  ? K extends 'shadowOffset'\n    ? { width: SpaceTokens; height: SpaceTokens }\n    : SpaceTokens\n  : K extends ColorKeys\n  ? ColorTokens\n  : K extends ZIndexKeys\n  ? ZIndexTokens\n  : K extends LineHeightKeys\n  ? FontLineHeightTokens\n  : K extends FontWeightKeys\n  ? FontWeightTokens\n  : K extends FontLetterSpacingKeys\n  ? FontLetterSpacingTokens\n  : never\n\nexport type ThemeValueFallback = UnionableString | Variable\n\nexport type WithThemeValues<T extends object> = {\n  [K in keyof T]: ThemeValueGet<K> extends never\n    ? T[K]\n    : ThemeValueGet<K> | Exclude<T[K], string> | ThemeValueFallback\n}\n\n// adds shorthand props\nexport type WithShorthands<StyleProps> = {\n  [Key in keyof Shorthands]?: Shorthands[Key] extends keyof StyleProps\n    ? StyleProps[Shorthands[Key]] | null\n    : undefined\n}\n\n// adds pseudo props\nexport type PseudoProps<A> = {\n  hoverStyle?: A | null\n  pressStyle?: A | null\n  focusStyle?: A | null\n  exitStyle?: A | null\n  enterStyle?: A | null\n}\n\nexport type PseudoPropKeys = keyof PseudoProps<any>\n\nexport type PseudoStyles = {\n  hoverStyle?: ViewStyle\n  pressStyle?: ViewStyle\n  focusStyle?: ViewStyle\n  enterStyle?: ViewStyle\n  exitStyle?: ViewStyle\n}\n\n//\n// add both theme and shorthands\n//\ntype WithThemeAndShorthands<A extends object> = WithThemeValues<A> &\n  WithShorthands<WithThemeValues<A>>\n\n//\n// combines all of theme, shorthands, pseudos...\n//\ntype WithThemeShorthandsAndPseudos<A extends object> =\n  | WithThemeAndShorthands<A> & PseudoProps<WithThemeAndShorthands<A>>\n\n//\n// ... media queries and animations\n//\ntype WithThemeShorthandsPseudosMediaAnimation<A extends object> =\n  WithThemeShorthandsAndPseudos<A> & MediaProps<WithThemeShorthandsAndPseudos<A>>\n\n/**\n * Base style-only props (no media, pseudo):\n */\n\ntype SharedBaseExtraStyleProps = {\n  pointerEvents?: ViewProps['pointerEvents']\n  cursor?: Properties['cursor']\n  contain?: Properties['contain']\n  display?: 'inherit' | 'none' | 'inline' | 'block' | 'contents' | 'flex' | 'inline-flex'\n  gap?: number | SpaceTokens\n  columnGap?: number | SpaceTokens\n  rowGap?: number | SpaceTokens\n  userSelect?: Properties['userSelect']\n  outlineColor?: Properties['outlineColor']\n  outlineStyle?: Properties['outlineStyle']\n  outlineOffset?: Properties['outlineOffset']\n  outlineWidth?: Properties['outlineWidth']\n}\n\ntype OverrideRNStyleProps =\n  | 'display'\n  | 'backfaceVisibility'\n  | 'elevation'\n  | 'gap'\n  | 'columnGap'\n  | 'rowGap'\n\nexport type StackStylePropsBase = Omit<ViewStyle, OverrideRNStyleProps> &\n  TransformStyleProps &\n  SharedBaseExtraStyleProps\n\nexport type TextStylePropsBase = Omit<TextStyle, OverrideRNStyleProps> &\n  TransformStyleProps &\n  SharedBaseExtraStyleProps & {\n    ellipse?: boolean\n    textDecorationDistance?: number\n    textOverflow?: Properties['textOverflow']\n    whiteSpace?: Properties['whiteSpace']\n    wordWrap?: Properties['wordWrap']\n  }\n\nexport interface ExtendBaseStackProps {}\nexport interface ExtendsBaseTextProps {}\n\n//\n// Stack\n//\n\n// these are added back in by core\ntype OmitRemovedNonWebProps = 'onLayout' | keyof GestureResponderHandlers\n\nexport type StackNonStyleProps = Omit<\n  ViewProps,\n  'display' | 'children' | OmitRemovedNonWebProps\n> &\n  ExtendBaseStackProps &\n  TamaguiComponentPropsBase\n\nexport type StackStyleProps =\n  WithThemeShorthandsPseudosMediaAnimation<StackStylePropsBase>\nexport type StackPropsBase = StackNonStyleProps &\n  WithThemeAndShorthands<StackStylePropsBase>\nexport type StackProps = StackNonStyleProps & StackStyleProps\n\n//\n// Text props\n//\n\nexport type TextNonStyleProps = Omit<\n  ReactTextProps,\n  'children' | OmitRemovedNonWebProps\n> &\n  ExtendsBaseTextProps &\n  TamaguiComponentPropsBase\n\nexport type TextPropsBase = TextNonStyleProps & WithThemeAndShorthands<TextStylePropsBase>\n\nexport type TextStyleProps = WithThemeShorthandsPseudosMediaAnimation<TextStylePropsBase>\nexport type TextProps = TextNonStyleProps & TextStyleProps\n\n// could actually infer from parent\nexport type ViewOrTextProps = WithThemeShorthandsPseudosMediaAnimation<\n  Omit<TextStylePropsBase, keyof StackStylePropsBase> & StackStylePropsBase\n>\n\n//\n// StaticComponent\n//\n\nexport type TamaguiComponent<\n  Props = any,\n  Ref = any,\n  BaseProps = {},\n  VariantProps = {}\n> = ReactComponentWithRef<Props, Ref> & StaticComponentObject\n\ntype StaticComponentObject = {\n  staticConfig: StaticConfigParsed\n  /*\n   * Only needed for more complex components\n   * If you create a styled frame component this is a HoC to extract\n   * styles from all parents.\n   */\n  extractable: <X>(a: X, opts?: Partial<StaticConfig>) => X\n}\n\nexport type TamaguiProviderProps = Partial<Omit<ThemeProviderProps, 'children'>> & {\n  config: TamaguiInternalConfig\n  disableInjectCSS?: boolean\n  children?: ReactNode\n}\n\nexport type PropMapper = (\n  key: string,\n  value: any,\n  theme: ThemeParsed,\n  props: Record<string, any>,\n  state: Partial<SplitStyleState>,\n  languageContext?: FontLanguageProps,\n  avoidDefaultProps?: boolean,\n  debug?: DebugProp\n) => undefined | [string, any][]\n\nexport type StaticConfigParsed = StaticConfig & {\n  parsed: true\n  propMapper: PropMapper\n  variantsParsed?: {\n    [key: string]: {\n      [key: string]: any\n    }\n  }\n}\n\nexport type GenericVariantDefinitions = {\n  [key: string]: {\n    [key: string]:\n      | ((a: any, b: any) => any)\n      | {\n          [key: string]: any\n        }\n  }\n}\n\nexport type StaticConfigPublic = {\n  /**\n   * (compiler) If you need to pass context or something, prevents from ever\n   * flattening. The 'jsx' option means it will never flatten. if you\n   * pass JSX as a children (if its purely string, it will still flatten).\n   */\n  neverFlatten?: boolean | 'jsx'\n\n  /**\n   * Determines ultimate output tag (Text vs View)\n   */\n  isText?: boolean\n\n  /**\n   * Which style keys are allowed to be extracted.\n   */\n  validStyles?: { [key: string]: boolean }\n\n  /**\n   * (compiler) If these props are encountered, bail on all optimization.\n   */\n  deoptProps?: Set<string>\n\n  /**\n   * (compiler) If these props are encountered, leave them un-extracted.\n   */\n  inlineProps?: Set<string>\n\n  /**\n   * (compiler) If not flattening, leave this prop as original value.\n   * Only applies to style attributes\n   */\n  inlineWhenUnflattened?: Set<string>\n\n  /**\n   * (compiler) A bit odd, only for more advanced heirarchies.\n   * Indicates that the component will set this prop so the\n   * static extraction can ensure it sets them to ={undefined}\n   * so they get overriddent. In the future, this can be smarter.\n   */\n  ensureOverriddenProp?: { [key: string]: boolean }\n\n  /**\n   * Auto-detected, but can ovverride. Wraps children to space them on top\n   */\n  isZStack?: boolean\n\n  /**\n   * Auto-detect, but can override, passes styles properly to react-native-web\n   */\n  isReactNative?: boolean\n\n  /**\n   * By default if styled() doesn't recognize a parent Tamagui compoent or specific react-native views,\n   * it will assume the passed in component only accepts style={} for react-native compatibility.\n   * Setting `acceptsClassName: true` indicates Tamagui can pass in className props.\n   */\n  acceptsClassName?: boolean\n}\n\ntype StaticConfigBase = StaticConfigPublic & {\n  Component?: FunctionComponent<any> & StaticComponentObject\n\n  variants?: GenericVariantDefinitions\n\n  /**\n   * Used for applying sub theme style\n   */\n  componentName?: string\n\n  /**\n   * Same as React.defaultProps, be sure to sync\n   */\n  defaultProps: Record<string, any>\n\n  /**\n   * Merges into defaultProps later on, used internally yonly\n   */\n  defaultVariants?: { [key: string]: any }\n\n  /**\n   * Memoize the component\n   */\n  memo?: boolean\n\n  /**\n   * Used insternally to attach default props to names\n   */\n  parentNames?: string[]\n\n  /**\n   * By default if styled() doesn't recognize a parent Tamagui compoent or specific react-native views,\n   * it will assume the passed in component only accepts style={} for react-native compatibility.\n   * Setting `acceptsClassName: true` indicates Tamagui can pass in className props.\n   */\n  acceptsClassName?: boolean\n\n  /**\n   * Used internally for handling focus\n   */\n  isInput?: boolean\n\n  /**\n   * Used internally for knowing how to handle when a HOC is in-between styled()\n   */\n  isHOC?: boolean\n}\n\nexport type StaticConfig = StaticConfigBase & {\n  parentStaticConfig?: StaticConfigBase\n}\n\nexport type ViewStyleWithPseudos =\n  | TextStyleProps\n  | (TextStyleProps & {\n      hoverStyle?: TextStyleProps\n      pressStyle?: TextStyleProps\n      focusStyle?: TextStyleProps\n    })\n\n/**\n * --------------------------------------------\n *   variants\n * --------------------------------------------\n */\n\nexport type StylableComponent =\n  | TamaguiComponent\n  // * excessively deep type instantiation\n  // | TamaguiReactElement\n  | ComponentType<any>\n  | ForwardRefExoticComponent<any>\n  | ReactComponentWithRef<any, any>\n  | (new (props: any) => any)\n\nexport type GetStyledVariants<A extends TamaguiComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  any,\n  infer Variants\n>\n  ? Variants\n  : never\n\nexport type GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  infer BaseProps\n>\n  ? BaseProps\n  : never\n\nexport type GetProps<A extends StylableComponent> = A extends TamaguiComponent<\n  infer Props\n>\n  ? Props\n  : A extends TamaguiReactElement<infer Props>\n  ? Props\n  : A extends ComponentType<infer Props>\n  ? GetGenericComponentTamaguiProps<Props>\n  : A extends new (props: infer Props) => any\n  ? GetGenericComponentTamaguiProps<Props>\n  : {}\n\ntype GetGenericComponentTamaguiProps<P> = P &\n  Omit<'textAlign' extends keyof P ? TextProps : StackProps, keyof P>\n\nexport type SpreadKeys =\n  | '...fontSize'\n  | '...fontStyle'\n  | '...fontTransform'\n  | '...lineHeight'\n  | '...letterSpacing'\n  | '...size'\n  | '...space'\n  | '...color'\n  | '...zIndex'\n  | '...theme'\n  | '...radius'\n\nexport type VariantDefinitions<\n  Parent extends StylableComponent = TamaguiComponent,\n  MyProps extends Object = GetProps<Parent>,\n  Val = any\n> = VariantDefinitionFromProps<MyProps, Val>\n\nexport type VariantDefinitionFromProps<MyProps, Val> = MyProps extends Object\n  ? {\n      [propName: string]:\n        | VariantSpreadFunction<MyProps, Val>\n        | ({\n            [Key in SpreadKeys]?: Key extends '...fontSize'\n              ? FontSizeVariantSpreadFunction<MyProps>\n              : Key extends '...size'\n              ? SizeVariantSpreadFunction<MyProps>\n              : Key extends '...space'\n              ? SpaceVariantSpreadFunction<MyProps>\n              : Key extends '...color'\n              ? ColorVariantSpreadFunction<MyProps>\n              : Key extends '...lineHeight'\n              ? FontLineHeightVariantSpreadFunction<MyProps>\n              : Key extends '...fontTransform'\n              ? FontTransformVariantSpreadFunction<MyProps>\n              : Key extends '...fontStyle'\n              ? FontStyleVariantSpreadFunction<MyProps>\n              : Key extends '...letterSpacing'\n              ? FontLetterSpacingVariantSpreadFunction<MyProps>\n              : Key extends '...zIndex'\n              ? ZIndexVariantSpreadFunction<MyProps>\n              : Key extends '...radius'\n              ? RadiusVariantSpreadFunction<MyProps>\n              : Key extends '...theme'\n              ? ThemeVariantSpreadFunction<MyProps>\n              : never\n          } & {\n            [Key in string | number | 'true' | 'false']?:\n              | MyProps\n              | VariantSpreadFunction<MyProps, Val>\n          } & {\n            [Key in VariantTypeKeys]?: Key extends ':number'\n              ? VariantSpreadFunction<MyProps, number>\n              : Key extends ':boolean'\n              ? VariantSpreadFunction<MyProps, boolean>\n              : Key extends ':string'\n              ? VariantSpreadFunction<MyProps, string>\n              : never\n          })\n    }\n  : never\n\nexport type GenericStackVariants = VariantDefinitionFromProps<StackProps, any>\nexport type GenericTextVariants = VariantDefinitionFromProps<StackProps, any>\n\nexport type GetVariantProps<Variants> = {\n  [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<any, infer Val>\n    ? Val\n    : GetVariantValues<keyof Variants[Key]>\n}\n\nexport type VariantSpreadExtras<Props> = {\n  fonts: TamaguiConfig['fonts']\n  tokens: TamaguiConfig['tokens']\n  theme: Themes extends { [key: string]: infer B } ? B : unknown\n  props: Props\n}\n\ntype PropLike = { [key: string]: any }\n\nexport type VariantSpreadFunction<Props extends PropLike, Val = any> = (\n  val: Val,\n  config: VariantSpreadExtras<Props>\n) =>\n  | {\n      [Key in keyof Props]: Props[Key] | Variable\n    }\n  | null\n  | undefined\n\nexport type VariantTypeKeys = ':string' | ':boolean' | ':number'\n\nexport type GetVariantValues<Key> = Key extends `...${infer VariantSpread}`\n  ? ThemeValueByCategory<VariantSpread>\n  : Key extends 'true' | 'false'\n  ? boolean\n  : Key extends ':string'\n  ? string\n  : Key extends ':boolean'\n  ? boolean\n  : Key extends ':number'\n  ? number\n  : Key\n\nexport type FontSizeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  FontSizeTokens\n>\nexport type SizeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  SizeTokens\n>\nexport type SpaceVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  SpaceTokens\n>\nexport type ColorVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  ColorTokens\n>\nexport type FontLineHeightVariantSpreadFunction<A extends PropLike> =\n  VariantSpreadFunction<A, FontLineHeightTokens>\nexport type FontLetterSpacingVariantSpreadFunction<A extends PropLike> =\n  VariantSpreadFunction<A, FontLetterSpacingTokens>\nexport type FontStyleVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  FontStyleTokens\n>\nexport type FontTransformVariantSpreadFunction<A extends PropLike> =\n  VariantSpreadFunction<A, FontTransformTokens>\nexport type ZIndexVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  ZIndexTokens\n>\nexport type RadiusVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  RadiusTokens\n>\nexport type ThemeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  ThemeTokens\n>\n\n/**\n * --------------------------------------------\n *   end variants\n * --------------------------------------------\n */\n\ntype SizeKeys =\n  | 'width'\n  | 'height'\n  | 'minWidth'\n  | 'minHeight'\n  | 'maxWidth'\n  | 'maxHeight'\n  | 'shadowRadius'\n\ntype ColorKeys =\n  | 'color'\n  | 'backgroundColor'\n  | 'borderColor'\n  | 'borderBottomColor'\n  | 'borderTopColor'\n  | 'borderLeftColor'\n  | 'borderRightColor'\n  | 'shadowColor'\n  | 'textShadowColor'\n\ntype SpaceKeys =\n  | 'space'\n  | 'padding'\n  | 'paddingHorizontal'\n  | 'paddingVertical'\n  | 'paddingLeft'\n  | 'paddingTop'\n  | 'paddingBottom'\n  | 'paddingLeft'\n  | 'paddingRight'\n  | 'paddingEnd'\n  | 'paddingStart'\n  | 'margin'\n  | 'marginHorizontal'\n  | 'marginVertical'\n  | 'marginLeft'\n  | 'marginTop'\n  | 'marginBottom'\n  | 'marginLeft'\n  | 'marginRight'\n  | 'marginEnd'\n  | 'marginStart'\n  | 'x'\n  | 'y'\n  | 'scale'\n  | 'scaleX'\n  | 'scaleY'\n  | 'borderTopEndRadius'\n  | 'borderTopLeftRadius'\n  | 'borderTopRightRadius'\n  | 'borderTopStartRadius'\n  | 'borderBottomEndRadius'\n  | 'borderBottomLeftRadius'\n  | 'borderBottomRightRadius'\n  | 'borderBottomStartRadius'\n  | 'borderBottomWidth'\n  | 'borderLeftWidth'\n  | 'borderRadius'\n  | 'borderRightWidth'\n  | 'borderTopEndRadius'\n  | 'borderTopLeftRadius'\n  | 'borderTopRightRadius'\n  | 'borderEndWidth'\n  | 'borderStartWidth'\n  | 'borderTopStartRadius'\n  | 'borderTopWidth'\n  | 'borderWidth'\n  | 'left'\n  | 'top'\n  | 'right'\n  | 'bottom'\n  | 'shadowOffset'\n\ntype CSSColorNames =\n  | 'aliceblue'\n  | 'antiquewhite'\n  | 'aqua'\n  | 'aquamarine'\n  | 'azure'\n  | 'beige'\n  | 'bisque'\n  | 'black'\n  | 'blanchedalmond'\n  | 'blue'\n  | 'blueviolet'\n  | 'brown'\n  | 'burlywood'\n  | 'cadetblue'\n  | 'chartreuse'\n  | 'chocolate'\n  | 'coral'\n  | 'cornflowerblue'\n  | 'cornsilk'\n  | 'crimson'\n  | 'cyan'\n  | 'darkblue'\n  | 'darkcyan'\n  | 'darkgoldenrod'\n  | 'darkgray'\n  | 'darkgreen'\n  | 'darkkhaki'\n  | 'darkmagenta'\n  | 'darkolivegreen'\n  | 'darkorange'\n  | 'darkorchid'\n  | 'darkred'\n  | 'darksalmon'\n  | 'darkseagreen'\n  | 'darkslateblue'\n  | 'darkslategray'\n  | 'darkturquoise'\n  | 'darkviolet'\n  | 'deeppink'\n  | 'deepskyblue'\n  | 'dimgray'\n  | 'dodgerblue'\n  | 'firebrick'\n  | 'floralwhite'\n  | 'forestgreen'\n  | 'fuchsia'\n  | 'gainsboro'\n  | 'ghostwhite'\n  | 'gold'\n  | 'goldenrod'\n  | 'gray'\n  | 'green'\n  | 'greenyellow'\n  | 'honeydew'\n  | 'hotpink'\n  | 'indianred '\n  | 'indigo  '\n  | 'ivory'\n  | 'khaki'\n  | 'lavender'\n  | 'lavenderblush'\n  | 'lawngreen'\n  | 'lemonchiffon'\n  | 'lightblue'\n  | 'lightcoral'\n  | 'lightcyan'\n  | 'lightgoldenrodyellow'\n  | 'lightgrey'\n  | 'lightgreen'\n  | 'lightpink'\n  | 'lightsalmon'\n  | 'lightseagreen'\n  | 'lightskyblue'\n  | 'lightslategray'\n  | 'lightsteelblue'\n  | 'lightyellow'\n  | 'lime'\n  | 'limegreen'\n  | 'linen'\n  | 'magenta'\n  | 'maroon'\n  | 'mediumaquamarine'\n  | 'mediumblue'\n  | 'mediumorchid'\n  | 'mediumpurple'\n  | 'mediumseagreen'\n  | 'mediumslateblue'\n  | 'mediumspringgreen'\n  | 'mediumturquoise'\n  | 'mediumvioletred'\n  | 'midnightblue'\n  | 'mintcream'\n  | 'mistyrose'\n  | 'moccasin'\n  | 'navajowhite'\n  | 'navy'\n  | 'oldlace'\n  | 'olive'\n  | 'olivedrab'\n  | 'orange'\n  | 'orangered'\n  | 'orchid'\n  | 'palegoldenrod'\n  | 'palegreen'\n  | 'paleturquoise'\n  | 'palevioletred'\n  | 'papayawhip'\n  | 'peachpuff'\n  | 'peru'\n  | 'pink'\n  | 'plum'\n  | 'powderblue'\n  | 'purple'\n  | 'red'\n  | 'rosybrown'\n  | 'royalblue'\n  | 'saddlebrown'\n  | 'salmon'\n  | 'sandybrown'\n  | 'seagreen'\n  | 'seashell'\n  | 'sienna'\n  | 'silver'\n  | 'skyblue'\n  | 'slateblue'\n  | 'slategray'\n  | 'snow'\n  | 'springgreen'\n  | 'steelblue'\n  | 'tan'\n  | 'teal'\n  | 'thistle'\n  | 'tomato'\n  | 'turquoise'\n  | 'violet'\n  | 'wheat'\n  | 'white'\n  | 'whitesmoke'\n  | 'yellow'\n  | 'yellowgreen'\n\nexport type TamaguiComponentState = {\n  hover: boolean\n  press: boolean\n  pressIn: boolean\n  focus: boolean\n  unmounted: boolean\n  animation?: null | {\n    style?: any\n    avoidClasses?: boolean\n  }\n}\n\nexport type SplitStyleState = TamaguiComponentState & {\n  mediaState?: Record<string, boolean>\n  noClassNames?: boolean\n  dynamicStylesInline?: boolean\n  resolveVariablesAs?: ResolveVariableTypes\n  fallbackProps?: Record<string, any>\n  hasTextAncestor?: boolean\n\n  // for animations\n  isExiting?: boolean\n  exitVariant?: string\n  enterVariant?: string\n}\n\n// Presence\n\nexport interface PresenceContextProps {\n  id: string\n  isPresent: boolean\n  register: (id: string) => () => void\n  onExitComplete?: (id: string) => void\n  initial?: false | string | string[]\n  custom?: any\n  exitVariant?: string | null\n  enterVariant?: string | null\n}\n\ntype SafeToRemoveCallback = () => void\ntype AlwaysPresent = [true, null, null]\ntype Present = [true, undefined, PresenceContextProps]\ntype NotPresent = [false, SafeToRemoveCallback, PresenceContextProps]\n\nexport type UsePresenceResult = AlwaysPresent | Present | NotPresent\n\n// Animations:\n\ntype AnimationConfig = {\n  [key: string]: any\n}\n\n// includes a very limited adapter between various impls for number => style\n// this is useful only in limited scenarios like `Sheet`, but necessary in those cases\n// TODO: make css driver compatible with this?\n\nexport type AnimatedNumberStrategy =\n  // only values shared between reanimated/react-native for now\n  | {\n      type: 'spring'\n      stiffness?: number\n      damping?: number\n      mass?: number\n      overshootClamping?: boolean\n      restSpeedThreshold?: number\n      restDisplacementThreshold?: number\n    }\n  | { type: 'timing'; duration: number }\n  | { type: 'direct' }\n\nexport type UniversalAnimatedNumber<A> = {\n  getInstance(): A\n  getValue(): number\n  setValue(next: number, config?: AnimatedNumberStrategy): void\n  stop(): void\n}\n\nexport type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {\n  isReactNative?: boolean\n  useAnimations: UseAnimationHook\n  usePresence: () => UsePresenceResult\n  useAnimatedNumber: (initial: number) => UniversalAnimatedNumber<any>\n  useAnimatedNumberStyle: <V extends UniversalAnimatedNumber<any>>(\n    val: V,\n    getStyle: (current: any) => any\n  ) => any\n  useAnimatedNumberReaction: <V extends UniversalAnimatedNumber<any>>(\n    opts: {\n      value: V\n      hostRef: RefObject<HTMLElement | View>\n    },\n    onValue: (current: number) => void\n  ) => void\n  animations: A\n  View?: any\n  Text?: any\n}\n\nexport type UseAnimationProps = TamaguiComponentPropsBase & Record<string, any>\n\nexport type UseAnimationHook = (props: {\n  style: Record<string, any>\n  props: Record<string, any>\n  presence?: UsePresenceResult | null\n  hostRef: RefObject<HTMLElement | View>\n  staticConfig: StaticConfigParsed\n  state: SplitStyleState\n  pseudos: PseudoProps<ViewStyle> | null\n  onDidAnimate?: any\n  delay?: number\n}) => null | {\n  style?: StackStylePropsBase | StackStylePropsBase[]\n}\n\nexport type GestureReponderEvent = Exclude<\n  View['props']['onResponderMove'],\n  void\n> extends (event: infer Event) => void\n  ? Event\n  : never\n\nexport type RulesToInsert = StyleObject[]\n\nexport type GetStyleResult = {\n  pseudos?: PseudoStyles\n  style: ViewStyle\n  classNames: ClassNamesObject\n  rulesToInsert: RulesToInsert\n  viewProps: StackProps & Record<string, any>\n  fontFamily: string | undefined\n  space?: any // SpaceTokens?\n  hasMedia: boolean | 'space'\n}\n\nexport type ClassNamesObject = Record<string, string>\n\nexport type TamaguiComponentEvents = {\n  cancelable?: boolean | undefined\n  disabled?: any\n  hitSlop?: any\n  delayLongPress?: any\n  delayPressIn?: any\n  delayPressOut?: any\n  focusable?: any\n  minPressDuration?: number | undefined\n  onPressIn: ((e: any) => void) | undefined\n  onPress: ((e: any) => void) | undefined\n  onMouseEnter?: ((e: any) => void) | undefined\n  onMouseLeave?: ((e: any) => void) | undefined\n  onPressOut: ((e: any) => void) | undefined\n}\n"],
+  "sourcesContent": ["// TODO split this into own package @tamagui/types to share with animations packages\n\nimport type { StyleObject } from '@tamagui/helpers'\nimport type { Properties } from 'csstype'\nimport type {\n  ComponentType,\n  ForwardRefExoticComponent,\n  FunctionComponent,\n  HTMLAttributes,\n  ReactNode,\n  RefAttributes,\n  RefObject,\n} from 'react'\nimport type {\n  GestureResponderHandlers,\n  PressableProps,\n  TextProps as ReactTextProps,\n  TextStyle,\n  View,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\n\nimport type { Variable } from './createVariable.js'\nimport type { ResolveVariableTypes } from './helpers/createPropMapper.js'\nimport type { FontLanguageProps } from './views/FontLanguage.types.js'\nimport type { ThemeProviderProps } from './views/ThemeProvider.js'\n\nexport type { MediaStyleObject, StyleObject } from '@tamagui/helpers'\n\nexport type SpaceDirection = 'vertical' | 'horizontal' | 'both'\n\nexport type TamaguiElement = HTMLElement | View\n\nexport type DebugProp = boolean | 'break' | 'verbose'\n\n// base props that are accepted by createComponent (additional to react-native-web)\n\ntype DivAttributes = HTMLAttributes<HTMLDivElement>\n\nexport type TamaguiReactElement<P = any> = React.ReactElement<P> & {\n  type: TamaguiComponent\n}\n\nexport type TamaguiComponentPropsBase = {\n  target?: string\n  hitSlop?: PressableProps['hitSlop']\n  asChild?: boolean\n  space?: SpaceTokens | null\n  spaceDirection?: SpaceDirection\n  separator?: ReactNode\n  dangerouslySetInnerHTML?: { __html: string }\n  animation?: AnimationProp | null\n  animateOnly?: string[]\n  children?: any | any[]\n  debug?: DebugProp\n  disabled?: boolean\n  className?: string\n  themeShallow?: boolean\n  id?: string\n  tag?: string\n  theme?: ThemeName | null\n  componentName?: string\n  tabIndex?: string | number\n  role?: string\n\n  /**\n   * Forces the pseudo style state to be on\n   */\n  forceStyle?: 'hover' | 'press' | 'focus'\n  onPress?: PressableProps['onPress']\n  onPressIn?: PressableProps['onPress']\n  onPressOut?: PressableProps['onPress']\n\n  // WEB ONLY TODO probably remove these in favor of something better\n  onHoverIn?: DivAttributes['onMouseEnter']\n  onHoverOut?: DivAttributes['onMouseLeave']\n  onMouseEnter?: DivAttributes['onMouseEnter']\n  onMouseLeave?: DivAttributes['onMouseLeave']\n  onMouseDown?: DivAttributes['onMouseDown']\n  onMouseUp?: DivAttributes['onMouseUp']\n  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void\n  onScroll?: (event: React.UIEvent<HTMLDivElement, UIEvent>) => void\n}\n\nexport type ReactComponentWithRef<Props, Ref> = ForwardRefExoticComponent<\n  Props & RefAttributes<Ref>\n>\n\nexport type ConfigListener = (conf: TamaguiInternalConfig) => void\n\n// to prevent things from going circular, hoisting some types in this file\n// to generally order them as building up towards TamaguiConfig\n\nexport type VariableVal = number | string | Variable\nexport type VariableColorVal = string | Variable\n\ntype GenericKey = string\n\nexport interface CreateTokens<Val extends VariableVal = VariableVal> {\n  color: { [key: GenericKey]: Val }\n  space: { [key: GenericKey]: Val }\n  size: { [key: GenericKey]: Val }\n  radius: { [key: GenericKey]: Val }\n  zIndex: { [key: GenericKey]: Val }\n}\n\ntype Tokenify<A extends GenericTokens> = {\n  color: TokenifyRecord<A['color']>\n  space: TokenifyRecord<A['space']>\n  size: TokenifyRecord<A['size']>\n  radius: TokenifyRecord<A['radius']>\n  zIndex: TokenifyRecord<A['zIndex']>\n}\n\ntype TokenifyRecord<A extends CreateTokens[keyof CreateTokens]> = {\n  [Key in keyof A]: A[Key] extends Variable ? A[Key] : Variable<A[Key]>\n}\n\nexport type TamaguiBaseTheme = {\n  // defined for our tamagui kit , we could do this inside `tamagui`\n  // but maybe helpful to have some sort of universally shared things +\n  // + enforce if they want their own, redefine in their design sys\n  background: VariableColorVal\n  backgroundHover: VariableColorVal\n  backgroundPress: VariableColorVal\n  backgroundFocus: VariableColorVal\n  color: VariableColorVal\n  colorHover: VariableColorVal\n  colorPress: VariableColorVal\n  colorFocus: VariableColorVal\n  borderColor: VariableColorVal\n  borderColorHover: VariableColorVal\n  borderColorPress: VariableColorVal\n  borderColorFocus: VariableColorVal\n  shadowColor: VariableColorVal\n  shadowColorHover: VariableColorVal\n  shadowColorPress: VariableColorVal\n  shadowColorFocus: VariableColorVal\n}\n\ntype GenericTokens = CreateTokens\ntype GenericThemes = {\n  [key: string]:\n    | Partial<TamaguiBaseTheme> & {\n        [key: string]: VariableVal\n      }\n}\n\nexport type CreateShorthands = {\n  // for some reason using keyof ViewStyle here will cause type circularity on react native 0.71\n  [key: string]: string\n}\n\nexport type GenericShorthands = {}\n\n// sm: { minWidth: 100 }\ntype GenericMedia = {\n  [key: string]: {\n    [key: string]: number | string\n  }\n}\n\nexport type GenericFonts = Record<string, GenericFont>\n\ntype GenericAnimations = {\n  [key: string]:\n    | string\n    | {\n        [key: string]: any\n      }\n    | any[]\n}\n\n// this is the \"main\" typed object, which users re-define\n// (internal) keep all types directly on this object and reference them from elsewhere\n//\n// const config = createTamagui(...)\n// type MyConfig = typeof config\n// declare module 'tamagui' {\n//   export interface TamaguiCustomConfig extends MyConfig {}\n// }\n// now your whole app/kit should be typed correctly\n//\nexport interface TamaguiCustomConfig {}\n\nexport interface TamaguiConfig\n  extends Omit<GenericTamaguiConfig, keyof TamaguiCustomConfig>,\n    TamaguiCustomConfig {}\n\nexport type CreateTamaguiConfig<\n  A extends GenericTokens,\n  B extends GenericThemes,\n  C extends GenericShorthands = GenericShorthands,\n  D extends GenericMedia = GenericMedia,\n  E extends GenericAnimations = GenericAnimations,\n  F extends GenericFonts = GenericFonts\n> = {\n  fonts: RemoveLanguagePostfixes<F>\n  fontLanguages: GetLanguagePostfixes<F> extends never\n    ? string[]\n    : GetLanguagePostfixes<F>[]\n  tokens: A\n  // parsed\n  themes: {\n    [Name in keyof B]: {\n      [Key in keyof B[Name]]: Variable\n    }\n  }\n  shorthands: C\n  media: D\n  animations: AnimationDriver<E>\n}\n\ntype GetLanguagePostfix<Set> = Set extends string\n  ? Set extends `${string}_${infer Postfix}`\n    ? Postfix\n    : never\n  : never\n\ntype OmitLanguagePostfix<Set> = Set extends string\n  ? Set extends `${infer Prefix}_${string}`\n    ? Prefix\n    : Set\n  : never\n\ntype RemoveLanguagePostfixes<F extends GenericFonts> = {\n  [Key in OmitLanguagePostfix<keyof F>]: F[Key]\n}\n\ntype GetLanguagePostfixes<F extends GenericFonts> = GetLanguagePostfix<keyof F>\n\n// test RemoveLanguagePostfixes\n// type x = CreateTamaguiConfig<any, any, any, any, any, {\n//   body: any,\n//   body_en: any\n// }>['fonts']\n\ntype ConfProps<\n  A extends GenericTokens,\n  B extends GenericThemes,\n  C extends GenericShorthands = GenericShorthands,\n  D extends GenericMedia = GenericMedia,\n  E extends GenericAnimations = GenericAnimations,\n  F extends GenericFonts = GenericFonts\n> = {\n  tokens: A\n  themes: B\n  shorthands?: C\n  media?: D\n  animations?: AnimationDriver<E>\n  fonts: F\n}\n\nexport type InferTamaguiConfig<Conf> = Conf extends ConfProps<\n  infer A,\n  infer B,\n  infer C,\n  infer D,\n  infer E,\n  infer F\n>\n  ? TamaguiInternalConfig<A, B, C, D, E, F>\n  : unknown\n\n// for use in creation functions so it doesnt get overwritten\nexport type GenericTamaguiConfig = CreateTamaguiConfig<\n  GenericTokens,\n  GenericThemes,\n  GenericShorthands,\n  GenericMedia,\n  GenericAnimations,\n  GenericFonts\n>\n\n// try and find the top level types as they can be supersets:\ntype NonSubThemeNames<A extends string | number> = A extends `${string}_${string}`\n  ? never\n  : A\ntype BaseThemeDefinitions = TamaguiConfig['themes'][NonSubThemeNames<\n  keyof TamaguiConfig['themes']\n>]\ntype GenericThemeDefinition = TamaguiConfig['themes'][keyof TamaguiConfig['themes']]\nexport type ThemeDefinition = BaseThemeDefinitions extends never\n  ? GenericThemeDefinition\n  : BaseThemeDefinitions\nexport type ThemeKeys = keyof ThemeDefinition\nexport type ThemeParsed = {\n  [key in ThemeKeys]: Variable<any>\n}\n\nexport type Tokens = TamaguiConfig['tokens']\n\nexport type TokensParsed = {\n  size: TokenPrefixed<Tokens['size']>\n  color: TokenPrefixed<Tokens['color']>\n  radius: TokenPrefixed<Tokens['radius']>\n  zIndex: TokenPrefixed<Tokens['zIndex']>\n  space: TokenPrefixed<Tokens['space']>\n}\n\ntype TokenPrefixed<A extends { [key: string]: any }> = {\n  [key in Ensure$Prefix<keyof A>]: A[keyof A]\n}\n\ntype Ensure$Prefix<A extends string | number | symbol> = A extends string\n  ? A extends `$${string}`\n    ? A\n    : `$${A}`\n  : never\n\nexport type TokensMerged = {\n  size: TokensParsed['size'] & Tokens['size']\n  color: TokensParsed['color'] & Tokens['color']\n  radius: TokensParsed['radius'] & Tokens['radius']\n  zIndex: TokensParsed['zIndex'] & Tokens['zIndex']\n  space: TokensParsed['space'] & Tokens['space']\n}\n\nexport type Shorthands = TamaguiConfig['shorthands']\nexport type Media = TamaguiConfig['media']\nexport type Themes = TamaguiConfig['themes']\nexport type ThemeName = Exclude<GetAltThemeNames<keyof Themes>, number>\nexport type ThemeTokens = `$${ThemeKeys}`\nexport type AnimationKeys = TamaguiConfig['animations'] extends AnimationDriver<\n  infer Config\n>\n  ? keyof Config\n  : string\nexport type FontLanguages = ArrayIntersection<TamaguiConfig['fontLanguages']>\n\nexport interface ThemeProps {\n  className?: string\n  name?: Exclude<ThemeName, number> | null\n  componentName?: string\n  children?: any\n  reset?: boolean\n  debug?: DebugProp\n  inverse?: boolean\n  // on the web, for portals we need to re-insert className\n  forceClassName?: boolean\n  // allows for disabling the auto-update behavior\n  shouldUpdate?: () => boolean\n}\n\ntype ArrayIntersection<A extends any[]> = A[keyof A]\n\ntype GetAltThemeNames<S> =\n  | (S extends `${string}_${infer Alt}` ? GetAltThemeNames<Alt> : S)\n  | S\n\ntype SpacerPropsBase = {\n  size?: number | SpaceTokens | null\n  flex?: boolean | number\n  direction?: SpaceDirection\n}\ntype SpacerOwnProps = SpacerPropsBase &\n  //\n  WithThemeShorthandsPseudosMediaAnimation<SpacerPropsBase>\n\nexport type SpacerProps = Omit<StackProps, 'flex' | 'direction' | 'size'> &\n  //\n  SpacerOwnProps\n\nexport type CreateTamaguiProps = {\n  reactNative?: any\n  shorthands?: CreateShorthands\n  media?: GenericTamaguiConfig['media']\n  animations?: AnimationDriver<any>\n  fonts: GenericTamaguiConfig['fonts']\n  tokens: GenericTamaguiConfig['tokens']\n  themes: {\n    [key: string]: {\n      [key: string]: string | number | Variable\n    }\n  }\n\n  /**\n   * *Advanced use case* For all CSS extracted views, this has no effect.\n   *\n   * For SSR compatibility on the web, Tamagui will render once with the settings\n   * from `mediaQueryDefaultActive` set for all media queries. Then, it will render\n   * again after the initial render using the proper media query values. This is so that\n   * hydration will match perfectly with the server.\n   *\n   * Setting disableSSR will avoid this second render by setting the media query state\n   * to the actual browser dimensions on initial load. This is only useful for client-only\n   * apps.\n   *\n   */\n  disableSSR?: boolean\n\n  /**\n   * Disable inserting a theme class in the DOM or context, allowing you to manually place it higher.\n   * For custom use cases like integration with next-theme.\n   */\n  disableRootThemeClass?: boolean\n\n  defaultProps?: Record<string, any> & {\n    Stack?: StackProps\n    Text?: TextProps\n    Spacer?: SpacerProps\n  }\n\n  // for the first render, determines which media queries are true\n  // useful for SSR\n  mediaQueryDefaultActive?: Record<MediaQueryKey, boolean>\n\n  // what's between each CSS style rule, set to \"\\n\" to be easier to read\n  // defaults: \"\\n\" when NODE_ENV=development, \"\" otherwise\n  cssStyleSeparator?: string\n\n  // (Advanced)\n  // on the web, tamagui treats `dark` and `light` themes as special and\n  // generates extra CSS to avoid having to re-render the entire page.\n  // this CSS relies on specificity hacks that multiply by your sub-themes.\n  // this sets the maxiumum number of nested dark/light themes you can do\n  // defaults to 3 for a balance, but can be higher if you nest them deeply.\n  maxDarkLightNesting?: number\n\n  // adds @media(prefers-color-scheme) media queries for dark/light\n  shouldAddPrefersColorThemes?: boolean\n\n  // only if you put the theme classname on the html element we have to generate diff\n  themeClassNameOnRoot?: boolean\n}\n\n// this is the config generated via createTamagui()\nexport type TamaguiInternalConfig<\n  A extends GenericTokens = GenericTokens,\n  B extends GenericThemes = GenericThemes,\n  C extends GenericShorthands = GenericShorthands,\n  D extends GenericMedia = GenericMedia,\n  E extends GenericAnimations = GenericAnimations,\n  F extends GenericFonts = GenericFonts\n> = Omit<CreateTamaguiProps, keyof GenericTamaguiConfig> &\n  Omit<CreateTamaguiConfig<A, B, C, D, E, F>, 'tokens'> & {\n    // TODO need to make it this but this breaks types, revisit\n    // animations: E //AnimationDriver<E>\n    // with $ prefixes for fast lookups (one time cost at startup vs every render)\n    tokens: Tokenify<A>\n    tokensParsed: Tokenify<A>\n    themeConfig: any\n    fontsParsed: GenericFonts\n    getCSS: () => string\n    parsed: boolean\n    inverseShorthands: Record<string, string>\n    reactNative?: any\n  }\n\nexport type GetAnimationKeys<A extends GenericTamaguiConfig> = keyof A['animations']\n\n// prevents const intersections from being clobbered into string, keeping the consts\nexport type UnionableString = string & {}\nexport type UnionableNumber = number & {}\n\nexport type GenericFont<Key extends number | string = number | string> = {\n  size: { [key in Key]: number | Variable }\n  lineHeight: Partial<{ [key in Key]: number | Variable }>\n  letterSpacing: Partial<{ [key in Key]: number | Variable }>\n  weight: Partial<{ [key in Key]: number | string | Variable }>\n  family: string | Variable\n  style?: Partial<{ [key in Key]: TextStyle['fontStyle'] | Variable }>\n  transform?: Partial<{ [key in Key]: TextStyle['textTransform'] | Variable }>\n  color?: Partial<{ [key in Key]: string | Variable }>\n  // for native use only, lets you map to alternative fonts\n  face?: Partial<{\n    [key in FontWeightSteps]: { normal?: string; italic?: string }\n  }>\n}\n\n// media\nexport type MediaQueryObject = { [key: string]: string | number | string }\nexport type MediaQueryKey = keyof Media\nexport type MediaPropKeys = `$${MediaQueryKey}`\nexport type MediaQueryState = { [key in MediaQueryKey]: boolean }\nexport type MediaProps<A> = {\n  [key in MediaPropKeys]?: A\n}\nexport type MediaQueries = {\n  [key in MediaQueryKey]: MediaQueryObject\n}\n\nexport interface MediaQueryList {\n  addListener(listener?: any): void\n  removeListener(listener?: any): void\n  matches: boolean\n}\n\nexport type MatchMedia = (query: string) => MediaQueryList\n\nexport type TransformStyleProps = {\n  x?: number\n  y?: number\n  perspective?: number\n  scale?: number\n  scaleX?: number\n  scaleY?: number\n  skewX?: string\n  skewY?: string\n  matrix?: number[]\n  rotate?: string\n  rotateY?: string\n  rotateX?: string\n  rotateZ?: string\n}\n\n// createComponent props helpers\n\n// animation=\"bouncy\"\n// animation={['bouncy', {  }]}\n// { all: 'name' }\n\n// TODO can override for better types\nexport type AnimationConfigType = any\n\nexport type AnimationProp =\n  | AnimationKeys\n  | {\n      [key: string]:\n        | AnimationKeys\n        | {\n            type: AnimationKeys\n            [key: string]: any\n          }\n    }\n  | [\n      AnimationKeys,\n      {\n        [key: string]:\n          | AnimationKeys\n          | {\n              type?: AnimationKeys\n              [key: string]: any\n            }\n      }\n    ]\n\ntype GetTokenFontKeysFor<\n  A extends\n    | 'size'\n    | 'weight'\n    | 'letterSpacing'\n    | 'family'\n    | 'lineHeight'\n    | 'transform'\n    | 'style'\n    | 'color'\n> = keyof TamaguiConfig['fonts']['body'][A]\n\ntype GetTokenString<A> = A extends string | number ? `$${A}` : `$${string}`\n\n// base tokens\nexport type SizeTokens = GetTokenString<keyof Tokens['size']> | number\nexport type SpaceTokens = GetTokenString<keyof Tokens['space']> | number | boolean\n\nexport type ColorTokens =\n  | GetTokenString<keyof Tokens['color']>\n  | GetTokenString<keyof ThemeParsed>\n  | CSSColorNames\nexport type ZIndexTokens = GetTokenString<keyof Tokens['zIndex']> | number\nexport type RadiusTokens = GetTokenString<keyof Tokens['radius']> | number\n\n// font tokens\nexport type FontTokens = GetTokenString<keyof TamaguiConfig['fonts']>\nexport type FontSizeTokens = GetTokenString<GetTokenFontKeysFor<'size'>> | number\nexport type FontLineHeightTokens = `$${GetTokenFontKeysFor<'lineHeight'>}` | number\nexport type FontWeightSteps = `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00`\nexport type FontWeightTokens = `$${GetTokenFontKeysFor<'weight'>}` | FontWeightSteps\nexport type FontColorTokens = `$${GetTokenFontKeysFor<'color'>}` | number\nexport type FontLetterSpacingTokens = `$${GetTokenFontKeysFor<'letterSpacing'>}` | number\nexport type FontStyleTokens = `$${GetTokenFontKeysFor<'style'>}` | TextStyle['fontStyle']\nexport type FontTransformTokens =\n  | `$${GetTokenFontKeysFor<'transform'>}`\n  | TextStyle['textTransform']\n\n//\n// adds theme short values to relevant props\n//\n\nexport type ThemeValueByCategory<K extends string | number | symbol> = K extends 'theme'\n  ? ThemeTokens\n  : K extends 'size'\n  ? SizeTokens\n  : K extends 'font'\n  ? FontTokens\n  : K extends 'fontSize'\n  ? FontSizeTokens\n  : K extends 'space'\n  ? SpaceTokens\n  : K extends 'color'\n  ? ColorTokens\n  : K extends 'zIndex'\n  ? ZIndexTokens\n  : K extends 'lineHeight'\n  ? FontLineHeightTokens\n  : K extends 'fontWeight'\n  ? FontWeightTokens\n  : K extends 'letterSpacing'\n  ? FontLetterSpacingTokens\n  : {}\n\ntype FontKeys = 'fontFamily'\ntype FontSizeKeys = 'fontSize'\ntype FontWeightKeys = 'fontWeight'\ntype FontLetterSpacingKeys = 'letterSpacing'\ntype LineHeightKeys = 'lineHeight'\ntype ZIndexKeys = 'zIndex'\n\nexport type ThemeValueGet<K extends string | number | symbol> = K extends 'theme'\n  ? ThemeTokens\n  : K extends SizeKeys\n  ? SizeTokens\n  : K extends FontKeys\n  ? FontTokens\n  : K extends FontSizeKeys\n  ? FontSizeTokens\n  : K extends `${`border${string | ''}Radius`}`\n  ? RadiusTokens\n  : K extends SpaceKeys\n  ? K extends 'shadowOffset'\n    ? { width: SpaceTokens; height: SpaceTokens }\n    : SpaceTokens\n  : K extends ColorKeys\n  ? ColorTokens\n  : K extends ZIndexKeys\n  ? ZIndexTokens\n  : K extends LineHeightKeys\n  ? FontLineHeightTokens\n  : K extends FontWeightKeys\n  ? FontWeightTokens\n  : K extends FontLetterSpacingKeys\n  ? FontLetterSpacingTokens\n  : never\n\nexport type ThemeValueFallback = UnionableString | Variable\n\nexport type WithThemeValues<T extends object> = {\n  [K in keyof T]: ThemeValueGet<K> extends never\n    ? T[K]\n    : ThemeValueGet<K> | Exclude<T[K], string> | ThemeValueFallback\n}\n\n// adds shorthand props\nexport type WithShorthands<StyleProps> = {\n  [Key in keyof Shorthands]?: Shorthands[Key] extends keyof StyleProps\n    ? StyleProps[Shorthands[Key]] | null\n    : undefined\n}\n\n// adds pseudo props\nexport type PseudoProps<A> = {\n  hoverStyle?: A | null\n  pressStyle?: A | null\n  focusStyle?: A | null\n  exitStyle?: A | null\n  enterStyle?: A | null\n}\n\nexport type PseudoPropKeys = keyof PseudoProps<any>\n\nexport type PseudoStyles = {\n  hoverStyle?: ViewStyle\n  pressStyle?: ViewStyle\n  focusStyle?: ViewStyle\n  enterStyle?: ViewStyle\n  exitStyle?: ViewStyle\n}\n\n//\n// add both theme and shorthands\n//\ntype WithThemeAndShorthands<A extends object> = WithThemeValues<A> &\n  WithShorthands<WithThemeValues<A>>\n\n//\n// combines all of theme, shorthands, pseudos...\n//\ntype WithThemeShorthandsAndPseudos<A extends object> =\n  | WithThemeAndShorthands<A> & PseudoProps<WithThemeAndShorthands<A>>\n\n//\n// ... media queries and animations\n//\ntype WithThemeShorthandsPseudosMediaAnimation<A extends object> =\n  WithThemeShorthandsAndPseudos<A> & MediaProps<WithThemeShorthandsAndPseudos<A>>\n\n/**\n * Base style-only props (no media, pseudo):\n */\n\ntype SharedBaseExtraStyleProps = {\n  pointerEvents?: ViewProps['pointerEvents']\n  cursor?: Properties['cursor']\n  contain?: Properties['contain']\n  display?: 'inherit' | 'none' | 'inline' | 'block' | 'contents' | 'flex' | 'inline-flex'\n  gap?: number | SpaceTokens\n  columnGap?: number | SpaceTokens\n  rowGap?: number | SpaceTokens\n  userSelect?: Properties['userSelect']\n  outlineColor?: Properties['outlineColor']\n  outlineStyle?: Properties['outlineStyle']\n  outlineOffset?: number | SpaceTokens\n  outlineWidth?: number | SpaceTokens\n}\n\ntype OverrideRNStyleProps =\n  | 'display'\n  | 'backfaceVisibility'\n  | 'elevation'\n  | 'gap'\n  | 'columnGap'\n  | 'rowGap'\n\nexport type StackStylePropsBase = Omit<ViewStyle, OverrideRNStyleProps> &\n  TransformStyleProps &\n  SharedBaseExtraStyleProps\n\nexport type TextStylePropsBase = Omit<TextStyle, OverrideRNStyleProps> &\n  TransformStyleProps &\n  SharedBaseExtraStyleProps & {\n    ellipse?: boolean\n    textDecorationDistance?: number\n    textOverflow?: Properties['textOverflow']\n    whiteSpace?: Properties['whiteSpace']\n    wordWrap?: Properties['wordWrap']\n  }\n\nexport interface ExtendBaseStackProps {}\nexport interface ExtendsBaseTextProps {}\n\n//\n// Stack\n//\n\n// these are added back in by core\ntype OmitRemovedNonWebProps = 'onLayout' | keyof GestureResponderHandlers\n\nexport type StackNonStyleProps = Omit<\n  ViewProps,\n  'display' | 'children' | OmitRemovedNonWebProps\n> &\n  ExtendBaseStackProps &\n  TamaguiComponentPropsBase\n\nexport type StackStyleProps =\n  WithThemeShorthandsPseudosMediaAnimation<StackStylePropsBase>\nexport type StackPropsBase = StackNonStyleProps &\n  WithThemeAndShorthands<StackStylePropsBase>\nexport type StackProps = StackNonStyleProps & StackStyleProps\n\n//\n// Text props\n//\n\nexport type TextNonStyleProps = Omit<\n  ReactTextProps,\n  'children' | OmitRemovedNonWebProps\n> &\n  ExtendsBaseTextProps &\n  TamaguiComponentPropsBase\n\nexport type TextPropsBase = TextNonStyleProps & WithThemeAndShorthands<TextStylePropsBase>\n\nexport type TextStyleProps = WithThemeShorthandsPseudosMediaAnimation<TextStylePropsBase>\nexport type TextProps = TextNonStyleProps & TextStyleProps\n\n// could actually infer from parent\nexport type ViewOrTextProps = WithThemeShorthandsPseudosMediaAnimation<\n  Omit<TextStylePropsBase, keyof StackStylePropsBase> & StackStylePropsBase\n>\n\n//\n// StaticComponent\n//\n\nexport type TamaguiComponent<\n  Props = any,\n  Ref = any,\n  BaseProps = {},\n  VariantProps = {}\n> = ReactComponentWithRef<Props, Ref> & StaticComponentObject\n\ntype StaticComponentObject = {\n  staticConfig: StaticConfigParsed\n  /*\n   * Only needed for more complex components\n   * If you create a styled frame component this is a HoC to extract\n   * styles from all parents.\n   */\n  extractable: <X>(a: X, opts?: Partial<StaticConfig>) => X\n}\n\nexport type TamaguiProviderProps = Partial<Omit<ThemeProviderProps, 'children'>> & {\n  config: TamaguiInternalConfig\n  disableInjectCSS?: boolean\n  children?: ReactNode\n}\n\nexport type PropMapper = (\n  key: string,\n  value: any,\n  theme: ThemeParsed,\n  props: Record<string, any>,\n  state: Partial<SplitStyleState>,\n  languageContext?: FontLanguageProps,\n  avoidDefaultProps?: boolean,\n  debug?: DebugProp\n) => undefined | [string, any][]\n\nexport type StaticConfigParsed = StaticConfig & {\n  parsed: true\n  propMapper: PropMapper\n  variantsParsed?: {\n    [key: string]: {\n      [key: string]: any\n    }\n  }\n}\n\nexport type GenericVariantDefinitions = {\n  [key: string]: {\n    [key: string]:\n      | ((a: any, b: any) => any)\n      | {\n          [key: string]: any\n        }\n  }\n}\n\nexport type StaticConfigPublic = {\n  /**\n   * (compiler) If you need to pass context or something, prevents from ever\n   * flattening. The 'jsx' option means it will never flatten. if you\n   * pass JSX as a children (if its purely string, it will still flatten).\n   */\n  neverFlatten?: boolean | 'jsx'\n\n  /**\n   * Determines ultimate output tag (Text vs View)\n   */\n  isText?: boolean\n\n  /**\n   * Which style keys are allowed to be extracted.\n   */\n  validStyles?: { [key: string]: boolean }\n\n  /**\n   * (compiler) If these props are encountered, bail on all optimization.\n   */\n  deoptProps?: Set<string>\n\n  /**\n   * (compiler) If these props are encountered, leave them un-extracted.\n   */\n  inlineProps?: Set<string>\n\n  /**\n   * (compiler) If not flattening, leave this prop as original value.\n   * Only applies to style attributes\n   */\n  inlineWhenUnflattened?: Set<string>\n\n  /**\n   * (compiler) A bit odd, only for more advanced heirarchies.\n   * Indicates that the component will set this prop so the\n   * static extraction can ensure it sets them to ={undefined}\n   * so they get overriddent. In the future, this can be smarter.\n   */\n  ensureOverriddenProp?: { [key: string]: boolean }\n\n  /**\n   * Auto-detected, but can ovverride. Wraps children to space them on top\n   */\n  isZStack?: boolean\n\n  /**\n   * Auto-detect, but can override, passes styles properly to react-native-web\n   */\n  isReactNative?: boolean\n\n  /**\n   * By default if styled() doesn't recognize a parent Tamagui compoent or specific react-native views,\n   * it will assume the passed in component only accepts style={} for react-native compatibility.\n   * Setting `acceptsClassName: true` indicates Tamagui can pass in className props.\n   */\n  acceptsClassName?: boolean\n}\n\ntype StaticConfigBase = StaticConfigPublic & {\n  Component?: FunctionComponent<any> & StaticComponentObject\n\n  variants?: GenericVariantDefinitions\n\n  /**\n   * Used for applying sub theme style\n   */\n  componentName?: string\n\n  /**\n   * Same as React.defaultProps, be sure to sync\n   */\n  defaultProps: Record<string, any>\n\n  /**\n   * Merges into defaultProps later on, used internally yonly\n   */\n  defaultVariants?: { [key: string]: any }\n\n  /**\n   * Memoize the component\n   */\n  memo?: boolean\n\n  /**\n   * Used insternally to attach default props to names\n   */\n  parentNames?: string[]\n\n  /**\n   * By default if styled() doesn't recognize a parent Tamagui compoent or specific react-native views,\n   * it will assume the passed in component only accepts style={} for react-native compatibility.\n   * Setting `acceptsClassName: true` indicates Tamagui can pass in className props.\n   */\n  acceptsClassName?: boolean\n\n  /**\n   * Used internally for handling focus\n   */\n  isInput?: boolean\n\n  /**\n   * Used internally for knowing how to handle when a HOC is in-between styled()\n   */\n  isHOC?: boolean\n}\n\nexport type StaticConfig = StaticConfigBase & {\n  parentStaticConfig?: StaticConfigBase\n}\n\nexport type ViewStyleWithPseudos =\n  | TextStyleProps\n  | (TextStyleProps & {\n      hoverStyle?: TextStyleProps\n      pressStyle?: TextStyleProps\n      focusStyle?: TextStyleProps\n    })\n\n/**\n * --------------------------------------------\n *   variants\n * --------------------------------------------\n */\n\nexport type StylableComponent =\n  | TamaguiComponent\n  // * excessively deep type instantiation\n  // | TamaguiReactElement\n  | ComponentType<any>\n  | ForwardRefExoticComponent<any>\n  | ReactComponentWithRef<any, any>\n  | (new (props: any) => any)\n\nexport type GetStyledVariants<A extends TamaguiComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  any,\n  infer Variants\n>\n  ? Variants\n  : never\n\nexport type GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  infer BaseProps\n>\n  ? BaseProps\n  : never\n\nexport type GetProps<A extends StylableComponent> = A extends TamaguiComponent<\n  infer Props\n>\n  ? Props\n  : A extends TamaguiReactElement<infer Props>\n  ? Props\n  : A extends ComponentType<infer Props>\n  ? GetGenericComponentTamaguiProps<Props>\n  : A extends new (props: infer Props) => any\n  ? GetGenericComponentTamaguiProps<Props>\n  : {}\n\ntype GetGenericComponentTamaguiProps<P> = P &\n  Omit<'textAlign' extends keyof P ? TextProps : StackProps, keyof P>\n\nexport type SpreadKeys =\n  | '...fontSize'\n  | '...fontStyle'\n  | '...fontTransform'\n  | '...lineHeight'\n  | '...letterSpacing'\n  | '...size'\n  | '...space'\n  | '...color'\n  | '...zIndex'\n  | '...theme'\n  | '...radius'\n\nexport type VariantDefinitions<\n  Parent extends StylableComponent = TamaguiComponent,\n  MyProps extends Object = GetProps<Parent>,\n  Val = any\n> = VariantDefinitionFromProps<MyProps, Val>\n\nexport type VariantDefinitionFromProps<MyProps, Val> = MyProps extends Object\n  ? {\n      [propName: string]:\n        | VariantSpreadFunction<MyProps, Val>\n        | ({\n            [Key in SpreadKeys]?: Key extends '...fontSize'\n              ? FontSizeVariantSpreadFunction<MyProps>\n              : Key extends '...size'\n              ? SizeVariantSpreadFunction<MyProps>\n              : Key extends '...space'\n              ? SpaceVariantSpreadFunction<MyProps>\n              : Key extends '...color'\n              ? ColorVariantSpreadFunction<MyProps>\n              : Key extends '...lineHeight'\n              ? FontLineHeightVariantSpreadFunction<MyProps>\n              : Key extends '...fontTransform'\n              ? FontTransformVariantSpreadFunction<MyProps>\n              : Key extends '...fontStyle'\n              ? FontStyleVariantSpreadFunction<MyProps>\n              : Key extends '...letterSpacing'\n              ? FontLetterSpacingVariantSpreadFunction<MyProps>\n              : Key extends '...zIndex'\n              ? ZIndexVariantSpreadFunction<MyProps>\n              : Key extends '...radius'\n              ? RadiusVariantSpreadFunction<MyProps>\n              : Key extends '...theme'\n              ? ThemeVariantSpreadFunction<MyProps>\n              : never\n          } & {\n            [Key in string | number | 'true' | 'false']?:\n              | MyProps\n              | VariantSpreadFunction<MyProps, Val>\n          } & {\n            [Key in VariantTypeKeys]?: Key extends ':number'\n              ? VariantSpreadFunction<MyProps, number>\n              : Key extends ':boolean'\n              ? VariantSpreadFunction<MyProps, boolean>\n              : Key extends ':string'\n              ? VariantSpreadFunction<MyProps, string>\n              : never\n          })\n    }\n  : never\n\nexport type GenericStackVariants = VariantDefinitionFromProps<StackProps, any>\nexport type GenericTextVariants = VariantDefinitionFromProps<StackProps, any>\n\nexport type GetVariantProps<Variants> = {\n  [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<any, infer Val>\n    ? Val\n    : GetVariantValues<keyof Variants[Key]>\n}\n\nexport type VariantSpreadExtras<Props> = {\n  fonts: TamaguiConfig['fonts']\n  tokens: TamaguiConfig['tokens']\n  theme: Themes extends { [key: string]: infer B } ? B : unknown\n  props: Props\n}\n\ntype PropLike = { [key: string]: any }\n\nexport type VariantSpreadFunction<Props extends PropLike, Val = any> = (\n  val: Val,\n  config: VariantSpreadExtras<Props>\n) =>\n  | {\n      [Key in keyof Props]: Props[Key] | Variable\n    }\n  | null\n  | undefined\n\nexport type VariantTypeKeys = ':string' | ':boolean' | ':number'\n\nexport type GetVariantValues<Key> = Key extends `...${infer VariantSpread}`\n  ? ThemeValueByCategory<VariantSpread>\n  : Key extends 'true' | 'false'\n  ? boolean\n  : Key extends ':string'\n  ? string\n  : Key extends ':boolean'\n  ? boolean\n  : Key extends ':number'\n  ? number\n  : Key\n\nexport type FontSizeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  FontSizeTokens\n>\nexport type SizeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  SizeTokens\n>\nexport type SpaceVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  SpaceTokens\n>\nexport type ColorVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  ColorTokens\n>\nexport type FontLineHeightVariantSpreadFunction<A extends PropLike> =\n  VariantSpreadFunction<A, FontLineHeightTokens>\nexport type FontLetterSpacingVariantSpreadFunction<A extends PropLike> =\n  VariantSpreadFunction<A, FontLetterSpacingTokens>\nexport type FontStyleVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  FontStyleTokens\n>\nexport type FontTransformVariantSpreadFunction<A extends PropLike> =\n  VariantSpreadFunction<A, FontTransformTokens>\nexport type ZIndexVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  ZIndexTokens\n>\nexport type RadiusVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  RadiusTokens\n>\nexport type ThemeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  ThemeTokens\n>\n\n/**\n * --------------------------------------------\n *   end variants\n * --------------------------------------------\n */\n\ntype SizeKeys =\n  | 'width'\n  | 'height'\n  | 'minWidth'\n  | 'minHeight'\n  | 'maxWidth'\n  | 'maxHeight'\n  | 'shadowRadius'\n\ntype ColorKeys =\n  | 'color'\n  | 'backgroundColor'\n  | 'borderColor'\n  | 'borderBottomColor'\n  | 'borderTopColor'\n  | 'borderLeftColor'\n  | 'borderRightColor'\n  | 'shadowColor'\n  | 'textShadowColor'\n\ntype SpaceKeys =\n  | 'space'\n  | 'padding'\n  | 'paddingHorizontal'\n  | 'paddingVertical'\n  | 'paddingLeft'\n  | 'paddingTop'\n  | 'paddingBottom'\n  | 'paddingLeft'\n  | 'paddingRight'\n  | 'paddingEnd'\n  | 'paddingStart'\n  | 'margin'\n  | 'marginHorizontal'\n  | 'marginVertical'\n  | 'marginLeft'\n  | 'marginTop'\n  | 'marginBottom'\n  | 'marginLeft'\n  | 'marginRight'\n  | 'marginEnd'\n  | 'marginStart'\n  | 'x'\n  | 'y'\n  | 'scale'\n  | 'scaleX'\n  | 'scaleY'\n  | 'borderTopEndRadius'\n  | 'borderTopLeftRadius'\n  | 'borderTopRightRadius'\n  | 'borderTopStartRadius'\n  | 'borderBottomEndRadius'\n  | 'borderBottomLeftRadius'\n  | 'borderBottomRightRadius'\n  | 'borderBottomStartRadius'\n  | 'borderBottomWidth'\n  | 'borderLeftWidth'\n  | 'borderRadius'\n  | 'borderRightWidth'\n  | 'borderTopEndRadius'\n  | 'borderTopLeftRadius'\n  | 'borderTopRightRadius'\n  | 'borderEndWidth'\n  | 'borderStartWidth'\n  | 'borderTopStartRadius'\n  | 'borderTopWidth'\n  | 'borderWidth'\n  | 'left'\n  | 'top'\n  | 'right'\n  | 'bottom'\n  | 'shadowOffset'\n\ntype CSSColorNames =\n  | 'aliceblue'\n  | 'antiquewhite'\n  | 'aqua'\n  | 'aquamarine'\n  | 'azure'\n  | 'beige'\n  | 'bisque'\n  | 'black'\n  | 'blanchedalmond'\n  | 'blue'\n  | 'blueviolet'\n  | 'brown'\n  | 'burlywood'\n  | 'cadetblue'\n  | 'chartreuse'\n  | 'chocolate'\n  | 'coral'\n  | 'cornflowerblue'\n  | 'cornsilk'\n  | 'crimson'\n  | 'cyan'\n  | 'darkblue'\n  | 'darkcyan'\n  | 'darkgoldenrod'\n  | 'darkgray'\n  | 'darkgreen'\n  | 'darkkhaki'\n  | 'darkmagenta'\n  | 'darkolivegreen'\n  | 'darkorange'\n  | 'darkorchid'\n  | 'darkred'\n  | 'darksalmon'\n  | 'darkseagreen'\n  | 'darkslateblue'\n  | 'darkslategray'\n  | 'darkturquoise'\n  | 'darkviolet'\n  | 'deeppink'\n  | 'deepskyblue'\n  | 'dimgray'\n  | 'dodgerblue'\n  | 'firebrick'\n  | 'floralwhite'\n  | 'forestgreen'\n  | 'fuchsia'\n  | 'gainsboro'\n  | 'ghostwhite'\n  | 'gold'\n  | 'goldenrod'\n  | 'gray'\n  | 'green'\n  | 'greenyellow'\n  | 'honeydew'\n  | 'hotpink'\n  | 'indianred '\n  | 'indigo  '\n  | 'ivory'\n  | 'khaki'\n  | 'lavender'\n  | 'lavenderblush'\n  | 'lawngreen'\n  | 'lemonchiffon'\n  | 'lightblue'\n  | 'lightcoral'\n  | 'lightcyan'\n  | 'lightgoldenrodyellow'\n  | 'lightgrey'\n  | 'lightgreen'\n  | 'lightpink'\n  | 'lightsalmon'\n  | 'lightseagreen'\n  | 'lightskyblue'\n  | 'lightslategray'\n  | 'lightsteelblue'\n  | 'lightyellow'\n  | 'lime'\n  | 'limegreen'\n  | 'linen'\n  | 'magenta'\n  | 'maroon'\n  | 'mediumaquamarine'\n  | 'mediumblue'\n  | 'mediumorchid'\n  | 'mediumpurple'\n  | 'mediumseagreen'\n  | 'mediumslateblue'\n  | 'mediumspringgreen'\n  | 'mediumturquoise'\n  | 'mediumvioletred'\n  | 'midnightblue'\n  | 'mintcream'\n  | 'mistyrose'\n  | 'moccasin'\n  | 'navajowhite'\n  | 'navy'\n  | 'oldlace'\n  | 'olive'\n  | 'olivedrab'\n  | 'orange'\n  | 'orangered'\n  | 'orchid'\n  | 'palegoldenrod'\n  | 'palegreen'\n  | 'paleturquoise'\n  | 'palevioletred'\n  | 'papayawhip'\n  | 'peachpuff'\n  | 'peru'\n  | 'pink'\n  | 'plum'\n  | 'powderblue'\n  | 'purple'\n  | 'red'\n  | 'rosybrown'\n  | 'royalblue'\n  | 'saddlebrown'\n  | 'salmon'\n  | 'sandybrown'\n  | 'seagreen'\n  | 'seashell'\n  | 'sienna'\n  | 'silver'\n  | 'skyblue'\n  | 'slateblue'\n  | 'slategray'\n  | 'snow'\n  | 'springgreen'\n  | 'steelblue'\n  | 'tan'\n  | 'teal'\n  | 'thistle'\n  | 'tomato'\n  | 'turquoise'\n  | 'violet'\n  | 'wheat'\n  | 'white'\n  | 'whitesmoke'\n  | 'yellow'\n  | 'yellowgreen'\n\nexport type TamaguiComponentState = {\n  hover: boolean\n  press: boolean\n  pressIn: boolean\n  focus: boolean\n  unmounted: boolean\n  animation?: null | {\n    style?: any\n    avoidClasses?: boolean\n  }\n}\n\nexport type SplitStyleState = TamaguiComponentState & {\n  mediaState?: Record<string, boolean>\n  noClassNames?: boolean\n  dynamicStylesInline?: boolean\n  resolveVariablesAs?: ResolveVariableTypes\n  fallbackProps?: Record<string, any>\n  hasTextAncestor?: boolean\n\n  // for animations\n  isExiting?: boolean\n  exitVariant?: string\n  enterVariant?: string\n}\n\n// Presence\n\nexport interface PresenceContextProps {\n  id: string\n  isPresent: boolean\n  register: (id: string) => () => void\n  onExitComplete?: (id: string) => void\n  initial?: false | string | string[]\n  custom?: any\n  exitVariant?: string | null\n  enterVariant?: string | null\n}\n\ntype SafeToRemoveCallback = () => void\ntype AlwaysPresent = [true, null, null]\ntype Present = [true, undefined, PresenceContextProps]\ntype NotPresent = [false, SafeToRemoveCallback, PresenceContextProps]\n\nexport type UsePresenceResult = AlwaysPresent | Present | NotPresent\n\n// Animations:\n\ntype AnimationConfig = {\n  [key: string]: any\n}\n\n// includes a very limited adapter between various impls for number => style\n// this is useful only in limited scenarios like `Sheet`, but necessary in those cases\n// TODO: make css driver compatible with this?\n\nexport type AnimatedNumberStrategy =\n  // only values shared between reanimated/react-native for now\n  | {\n      type: 'spring'\n      stiffness?: number\n      damping?: number\n      mass?: number\n      overshootClamping?: boolean\n      restSpeedThreshold?: number\n      restDisplacementThreshold?: number\n    }\n  | { type: 'timing'; duration: number }\n  | { type: 'direct' }\n\nexport type UniversalAnimatedNumber<A> = {\n  getInstance(): A\n  getValue(): number\n  setValue(next: number, config?: AnimatedNumberStrategy): void\n  stop(): void\n}\n\nexport type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {\n  isReactNative?: boolean\n  useAnimations: UseAnimationHook\n  usePresence: () => UsePresenceResult\n  useAnimatedNumber: (initial: number) => UniversalAnimatedNumber<any>\n  useAnimatedNumberStyle: <V extends UniversalAnimatedNumber<any>>(\n    val: V,\n    getStyle: (current: any) => any\n  ) => any\n  useAnimatedNumberReaction: <V extends UniversalAnimatedNumber<any>>(\n    opts: {\n      value: V\n      hostRef: RefObject<HTMLElement | View>\n    },\n    onValue: (current: number) => void\n  ) => void\n  animations: A\n  View?: any\n  Text?: any\n}\n\nexport type UseAnimationProps = TamaguiComponentPropsBase & Record<string, any>\n\nexport type UseAnimationHook = (props: {\n  style: Record<string, any>\n  props: Record<string, any>\n  presence?: UsePresenceResult | null\n  hostRef: RefObject<HTMLElement | View>\n  staticConfig: StaticConfigParsed\n  state: SplitStyleState\n  pseudos: PseudoProps<ViewStyle> | null\n  onDidAnimate?: any\n  delay?: number\n}) => null | {\n  style?: StackStylePropsBase | StackStylePropsBase[]\n}\n\nexport type GestureReponderEvent = Exclude<\n  View['props']['onResponderMove'],\n  void\n> extends (event: infer Event) => void\n  ? Event\n  : never\n\nexport type RulesToInsert = StyleObject[]\n\nexport type GetStyleResult = {\n  pseudos?: PseudoStyles\n  style: ViewStyle\n  classNames: ClassNamesObject\n  rulesToInsert: RulesToInsert\n  viewProps: StackProps & Record<string, any>\n  fontFamily: string | undefined\n  space?: any // SpaceTokens?\n  hasMedia: boolean | 'space'\n}\n\nexport type ClassNamesObject = Record<string, string>\n\nexport type TamaguiComponentEvents = {\n  cancelable?: boolean | undefined\n  disabled?: any\n  hitSlop?: any\n  delayLongPress?: any\n  delayPressIn?: any\n  delayPressOut?: any\n  focusable?: any\n  minPressDuration?: number | undefined\n  onPressIn: ((e: any) => void) | undefined\n  onPress: ((e: any) => void) | undefined\n  onMouseEnter?: ((e: any) => void) | undefined\n  onMouseLeave?: ((e: any) => void) | undefined\n  onPressOut: ((e: any) => void) | undefined\n}\n"],
   "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
   "names": []
 }