@tamagui/core 1.0.1-beta.216 → 1.0.1-beta.218

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/useShallowSetState.tsx"],
-  "sourcesContent": ["import React, { useCallback } from 'react'\n\nexport function useShallowSetState<State extends Object>(\n  setter: React.Dispatch<React.SetStateAction<State>>,\n  debug?: boolean | 'verbose',\n  debugName?: string\n) {\n  return useCallback(\n    (next: Partial<State>) => {\n      setter((prev) => {\n        for (const key in next) {\n          if (prev[key] !== next[key]) {\n            if (process.env.NODE_ENV === 'development') {\n              if (debug === 'verbose') {\n                // eslint-disable-next-line no-console\n                console.log(` \u25B2 setState ${debugName}`, next)\n              }\n            }\n            return { ...prev, ...next }\n          }\n        }\n        return prev\n      })\n    },\n    [setter]\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AAE5B,SAAS,mBACd,QACA,OACA,WACA;AACA,aAAO;AAAA,IACL,CAAC,SAAyB;AACxB,aAAO,CAAC,SAAS;AACf,mBAAW,OAAO,MAAM;AACtB,cAAI,KAAK,SAAS,KAAK,MAAM;AAC3B,gBAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,kBAAI,UAAU,WAAW;AAEvB,wBAAQ,IAAI,oBAAe,aAAa,IAAI;AAAA,cAC9C;AAAA,YACF;AACA,mBAAO,EAAE,GAAG,MAAM,GAAG,KAAK;AAAA,UAC5B;AAAA,QACF;AACA,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AACF;",
+  "sourcesContent": ["import React, { useCallback } from 'react'\n\nimport { DebugProp } from '../types'\n\nexport function useShallowSetState<State extends Object>(\n  setter: React.Dispatch<React.SetStateAction<State>>,\n  debug?: DebugProp,\n  debugName?: string\n) {\n  return useCallback(\n    (next: Partial<State>) => {\n      setter((prev) => {\n        for (const key in next) {\n          if (prev[key] !== next[key]) {\n            if (process.env.NODE_ENV === 'development') {\n              if (debug === 'verbose') {\n                // eslint-disable-next-line no-console\n                console.log(` \u25B2 setState ${debugName}`, next)\n              }\n            }\n            return { ...prev, ...next }\n          }\n        }\n        return prev\n      })\n    },\n    [setter]\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AAI5B,SAAS,mBACd,QACA,OACA,WACA;AACA,aAAO;AAAA,IACL,CAAC,SAAyB;AACxB,aAAO,CAAC,SAAS;AACf,mBAAW,OAAO,MAAM;AACtB,cAAI,KAAK,SAAS,KAAK,MAAM;AAC3B,gBAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,kBAAI,UAAU,WAAW;AAEvB,wBAAQ,IAAI,oBAAe,aAAa,IAAI;AAAA,cAC9C;AAAA,YACF;AACA,mBAAO,EAAE,GAAG,MAAM,GAAG,KAAK;AAAA,UAC5B;AAAA,QACF;AACA,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AACF;",
   "names": []
 }

package/dist/cjs/hooks/useMedia.js

@@ -33,7 +33,6 @@ __export(useMedia_exports, {
   useMediaPropsActive: () => useMediaPropsActive
 });
 module.exports = __toCommonJS(useMedia_exports);
-var import_constants = require("@tamagui/constants");
 var import_react = require("react");
 var import_config = require("../config");
 var import_createProxy = require("../helpers/createProxy");
@@ -64,13 +63,10 @@ function removeMediaQueryListener(key, cb) {
   (_a = listeners[key]) == null ? void 0 : _a.delete(cb);
 }
 const mediaQueryConfig = {};
-const getMedia = () => {
-  return mediaState;
-};
-let curState;
+const getMedia = () => mediaState;
 let initState;
 const getInitialMediaState = () => {
-  return ((0, import_config.getConfig)().disableSSR ? curState : initState) || {};
+  return ((0, import_config.getConfig)().disableSSR ? mediaState : initState) || {};
 };
 let mediaKeysOrdered;
 const getMediaKeyImportance = (key) => mediaKeysOrdered.indexOf(key[0] === "$" ? key.slice(1) : key) + 2;
@@ -83,8 +79,8 @@ const configureMedia = (config) => {
     mediaState[key] = (mediaQueryDefaultActive == null ? void 0 : mediaQueryDefaultActive[key]) || false;
   }
   Object.assign(mediaQueryConfig, media);
-  curState = { ...mediaState };
-  initState = curState;
+  initState = { ...mediaState };
+  updateCurrentState();
   mediaKeysOrdered = Object.keys(media);
   if (config.disableSSR) {
     setupMediaListeners();
@@ -108,7 +104,7 @@ function setupMediaListeners() {
       if (next === mediaState[key])
         return;
       mediaState[key] = next;
-      curState = { ...mediaState };
+      updateCurrentState();
       const cur = listeners[key];
       if (cur == null ? void 0 : cur.size) {
         cur.forEach((cb) => cb(next));
@@ -134,39 +130,40 @@ function useMediaListeners(config) {
     return unlisten;
   }, []);
 }
+const currentStateListeners = /* @__PURE__ */ new Set();
+function updateCurrentState() {
+  currentStateListeners.forEach((cb) => cb(mediaState));
+}
+function subscribe(subscriber) {
+  currentStateListeners.add(subscriber);
+  return () => currentStateListeners.delete(subscriber);
+}
 function useMedia() {
-  const keys = (0, import_useSafeRef.useSafeRef)({});
-  const [state, setState] = (0, import_react.useState)(() => getMediaState(initState || {}, keys));
-  function updateState() {
-    setState((prev) => {
-      for (const key in keys.current) {
-        if (prev[key] !== mediaState[key]) {
-          return getMediaState({ ...mediaState }, keys);
-        }
+  const keys = (0, import_useSafeRef.useSafeRef)({ prev: initState });
+  const state = (0, import_react.useSyncExternalStore)(
+    subscribe,
+    () => {
+      const { prev, ...curKeys } = keys.current;
+      const shouldUpdate = !prev || Object.keys(curKeys).some((k) => mediaState[k] !== prev[k]);
+      if (shouldUpdate) {
+        const next = { ...mediaState };
+        keys.current.prev = next;
+        return next;
       }
       return prev;
-    });
-  }
-  (0, import_constants.useIsomorphicLayoutEffect)(() => {
-    updateState();
-    const disposers = Object.keys(keys.current).map(
-      (key) => addMediaQueryListener(key, updateState)
-    );
-    return () => {
-      disposers.forEach((cb) => cb());
-    };
-  }, [keys.current]);
-  return state;
-}
-function getMediaState(state, keys) {
-  return new Proxy(state, {
-    get(_, key) {
-      if (!keys.current[key]) {
-        keys.current[key] = true;
+    },
+    () => initState
+  );
+  return (0, import_react.useMemo)(() => {
+    return new Proxy(state, {
+      get(_, key) {
+        if (!keys.current[key]) {
+          keys.current[key] = true;
+        }
+        return Reflect.get(state, key);
       }
-      return Reflect.get(state, key);
-    }
-  });
+    });
+  }, [state]);
 }
 function useMediaPropsActive(props) {
   const media = useMedia();

package/dist/cjs/hooks/useMedia.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useMedia.tsx"],
-  "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { MutableRefObject, useEffect, useMemo, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { createProxy } from '../helpers/createProxy'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n  MediaQueries,\n  MediaQueryKey,\n  MediaQueryObject,\n  MediaQueryState,\n  TamaguiInternalConfig,\n} from '../types'\nimport { useSafeRef } from './useSafeRef'\n\nexport const mediaState: MediaQueryState =\n  // development time safeguard\n  process.env.NODE_ENV === 'development'\n    ? createProxy(\n        {},\n        {\n          get(target, key) {\n            if (\n              typeof key === 'string' &&\n              key[0] === '$' &&\n              // dont error on $$typeof\n              key[1] !== '$'\n            ) {\n              throw new Error(`Access mediaState should not use \"$\": ${key}`)\n            }\n            return Reflect.get(target, key)\n          },\n        }\n      )\n    : ({} as any)\n\ntype MediaListener = (next: boolean) => void\n\nconst listeners: { [key: string]: Set<MediaListener> } = {}\n\nexport function addMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {\n  if (process.env.NODE_ENV === 'development' && key[0] === '$') {\n    // eslint-disable-next-line no-console\n    console.warn(`Warning, listening to media queries shouldn't use the \"$\" prefix`)\n  }\n  listeners[key] = listeners[key] || new Set()\n  listeners[key].add(cb)\n  return () => removeMediaQueryListener(key, cb)\n}\n\nexport function removeMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {\n  listeners[key]?.delete(cb)\n}\n\nexport const mediaQueryConfig: MediaQueries = {}\n\nexport const getMedia = () => {\n  return mediaState\n}\n\n// for SSR capture it at time of startup\nlet curState: MediaQueryState\nlet initState: MediaQueryState\nexport const getInitialMediaState = () => {\n  return (getConfig().disableSSR ? curState : initState) || {}\n}\n\nlet mediaKeysOrdered: string[]\nexport const getMediaKeyImportance = (key: string) =>\n  // + 2 because we set base usedKeys=1 in getSplitStyles and all media go above 1\n  mediaKeysOrdered.indexOf(key[0] === '$' ? key.slice(1) : key) + 2\n\nconst dispose = new Set<Function>()\n\nexport const configureMedia = (config: TamaguiInternalConfig) => {\n  const { media, mediaQueryDefaultActive } = config\n  if (!media) return\n  for (const key in media) {\n    mediaState[key] = mediaQueryDefaultActive?.[key] || false\n  }\n  Object.assign(mediaQueryConfig, media)\n  curState = { ...mediaState }\n  initState = curState\n  mediaKeysOrdered = Object.keys(media)\n  if (config.disableSSR) {\n    setupMediaListeners()\n  }\n}\n\nfunction unlisten() {\n  dispose.forEach((cb) => cb())\n  dispose.clear()\n}\n\n/**\n * Note: This should *not* set the state on the first render!\n * Because to avoid hydration issues SSR must match the server\n * *and then* re-render with the actual media query state.\n */\nlet configuredKey = ''\nfunction setupMediaListeners() {\n  // avoid setting up more than once per config\n  const nextKey = JSON.stringify(mediaQueryConfig)\n  if (nextKey === configuredKey) {\n    return\n  }\n  configuredKey = nextKey\n\n  // hmr, undo existing before re-binding\n  unlisten()\n\n  for (const key in mediaQueryConfig) {\n    const str = mediaObjectToString(mediaQueryConfig[key])\n    const getMatch = () => matchMedia(str)\n    const match = getMatch()\n    if (!match) {\n      throw new Error('\u26A0\uFE0F No match')\n    }\n    // react native needs these deprecated apis for now\n    match.addListener(update)\n    dispose.add(() => match.removeListener(update))\n\n    update()\n\n    function update() {\n      const next = !!getMatch().matches\n      if (next === mediaState[key]) return\n      mediaState[key] = next\n      curState = { ...mediaState }\n      const cur = listeners[key]\n      if (cur?.size) {\n        cur.forEach((cb) => cb(next))\n      }\n    }\n  }\n}\n\nexport function useMediaListeners(config: TamaguiInternalConfig) {\n  if (config.disableSSR) return\n  useEffect(() => {\n    setupMediaListeners()\n    return unlisten\n  }, [])\n}\n\nexport function useMedia(): {\n  [key in MediaQueryKey]: boolean\n} {\n  const keys = useSafeRef({} as Record<string, boolean>)\n  const [state, setState] = useState<MediaQueryState>(() => getMediaState(initState || {}, keys))\n\n  function updateState() {\n    setState((prev) => {\n      for (const key in keys.current) {\n        if (prev[key] !== mediaState[key]) {\n          return getMediaState({ ...mediaState }, keys)\n        }\n      }\n      return prev\n    })\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    updateState()\n    const disposers = Object.keys(keys.current).map((key) =>\n      addMediaQueryListener(key, updateState)\n    )\n    return () => {\n      disposers.forEach((cb) => cb())\n    }\n  }, [keys.current])\n\n  return state\n}\n\nfunction getMediaState(state: MediaQueryState, keys: MutableRefObject<Record<string, boolean>>) {\n  return new Proxy(state, {\n    get(_, key: string) {\n      if (!keys.current[key]) {\n        keys.current[key] = true\n      }\n      return Reflect.get(state, key)\n    },\n  })\n}\n\n/**\n * Useful for more complex components that need access to the currently active props,\n * accounting for the currently active media queries.\n *\n * Use sparingly, is will loop props and trigger re-render on all media queries.\n *\n * */\nexport function useMediaPropsActive<A extends Object>(\n  props: A\n): {\n  // remove all media\n  [Key in keyof A extends `$${string}` ? never : keyof A]?: A[Key]\n} {\n  const media = useMedia()\n\n  return useMemo(() => {\n    const next = {} as A\n    const importancesUsed = {}\n    const propNames = Object.keys(props)\n\n    for (let i = propNames.length - 1; i >= 0; i--) {\n      const key = propNames[i]\n      const val = props[key]\n      if (key[0] === '$') {\n        if (!media[key.slice(1)]) {\n          continue\n        }\n        if (val && typeof val === 'object') {\n          const subKeys = Object.keys(val)\n          for (let j = subKeys.length; j--; j >= 0) {\n            const subKey = subKeys[j]\n            mergeMediaByImportance(next, subKey, val[subKey], importancesUsed)\n          }\n        }\n      } else {\n        mergeMediaByImportance(next, key, val, importancesUsed)\n      }\n    }\n\n    return next\n  }, [media, props])\n}\n\nexport function mergeMediaByImportance(\n  onto: Record<string, any>,\n  key: string,\n  value: any,\n  importancesUsed: Record<string, number>\n) {\n  const importance = getMediaKeyImportance(key)\n  if (importancesUsed[key] > importance) {\n    return false\n  }\n  importancesUsed[key] = importance\n  onto[key] = value\n  return true\n}\n\nfunction camelToHyphen(str: string) {\n  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()\n}\n\nexport function mediaObjectToString(query: string | MediaQueryObject) {\n  if (typeof query === 'string') {\n    return query\n  }\n  return Object.entries(query)\n    .map(([feature, value]) => {\n      feature = camelToHyphen(feature)\n      if (typeof value === 'string') {\n        return `(${feature}: ${value})`\n      }\n      if (typeof value === 'number' && /[height|width]$/.test(feature)) {\n        value = `${value}px`\n      }\n      return `(${feature}: ${value})`\n    })\n    .join(' and ')\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useEffect, useMemo, useSyncExternalStore } from 'react'\n\nimport { getConfig } from '../config'\nimport { createProxy } from '../helpers/createProxy'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n  MediaQueries,\n  MediaQueryKey,\n  MediaQueryObject,\n  MediaQueryState,\n  TamaguiInternalConfig,\n} from '../types'\nimport { useSafeRef } from './useSafeRef'\n\nexport const mediaState: MediaQueryState =\n  // development time safeguard\n  process.env.NODE_ENV === 'development'\n    ? createProxy(\n        {},\n        {\n          get(target, key) {\n            if (\n              typeof key === 'string' &&\n              key[0] === '$' &&\n              // dont error on $$typeof\n              key[1] !== '$'\n            ) {\n              throw new Error(`Access mediaState should not use \"$\": ${key}`)\n            }\n            return Reflect.get(target, key)\n          },\n        }\n      )\n    : ({} as any)\n\ntype MediaListener = (next: boolean) => void\n\nconst listeners: { [key: string]: Set<MediaListener> } = {}\n\nexport function addMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {\n  if (process.env.NODE_ENV === 'development' && key[0] === '$') {\n    // eslint-disable-next-line no-console\n    console.warn(`Warning, listening to media queries shouldn't use the \"$\" prefix`)\n  }\n  listeners[key] = listeners[key] || new Set()\n  listeners[key].add(cb)\n  return () => removeMediaQueryListener(key, cb)\n}\n\nexport function removeMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {\n  listeners[key]?.delete(cb)\n}\n\nexport const mediaQueryConfig: MediaQueries = {}\n\nexport const getMedia = () => mediaState\n\n// for SSR capture it at time of startup\nlet initState: MediaQueryState\nexport const getInitialMediaState = () => {\n  return (getConfig().disableSSR ? mediaState : initState) || {}\n}\n\nlet mediaKeysOrdered: string[]\nexport const getMediaKeyImportance = (key: string) =>\n  // + 2 because we set base usedKeys=1 in getSplitStyles and all media go above 1\n  mediaKeysOrdered.indexOf(key[0] === '$' ? key.slice(1) : key) + 2\n\nconst dispose = new Set<Function>()\n\nexport const configureMedia = (config: TamaguiInternalConfig) => {\n  const { media, mediaQueryDefaultActive } = config\n  if (!media) return\n  for (const key in media) {\n    mediaState[key] = mediaQueryDefaultActive?.[key] || false\n  }\n  Object.assign(mediaQueryConfig, media)\n  initState = { ...mediaState }\n  updateCurrentState()\n  mediaKeysOrdered = Object.keys(media)\n  if (config.disableSSR) {\n    setupMediaListeners()\n  }\n}\n\nfunction unlisten() {\n  dispose.forEach((cb) => cb())\n  dispose.clear()\n}\n\n/**\n * Note: This should *not* set the state on the first render!\n * Because to avoid hydration issues SSR must match the server\n * *and then* re-render with the actual media query state.\n */\nlet configuredKey = ''\nfunction setupMediaListeners() {\n  // avoid setting up more than once per config\n  const nextKey = JSON.stringify(mediaQueryConfig)\n  if (nextKey === configuredKey) {\n    return\n  }\n  configuredKey = nextKey\n\n  // hmr, undo existing before re-binding\n  unlisten()\n\n  for (const key in mediaQueryConfig) {\n    const str = mediaObjectToString(mediaQueryConfig[key])\n    const getMatch = () => matchMedia(str)\n    const match = getMatch()\n    if (!match) {\n      throw new Error('\u26A0\uFE0F No match')\n    }\n    // react native needs these deprecated apis for now\n    match.addListener(update)\n    dispose.add(() => match.removeListener(update))\n\n    update()\n\n    function update() {\n      const next = !!getMatch().matches\n      if (next === mediaState[key]) return\n      mediaState[key] = next\n      updateCurrentState()\n      const cur = listeners[key]\n      if (cur?.size) {\n        cur.forEach((cb) => cb(next))\n      }\n    }\n  }\n}\n\nexport function useMediaListeners(config: TamaguiInternalConfig) {\n  if (config.disableSSR) return\n  useEffect(() => {\n    setupMediaListeners()\n    return unlisten\n  }, [])\n}\n\nconst currentStateListeners = new Set<any>()\nfunction updateCurrentState() {\n  currentStateListeners.forEach((cb) => cb(mediaState))\n}\nfunction subscribe(subscriber: any) {\n  currentStateListeners.add(subscriber)\n  return () => currentStateListeners.delete(subscriber)\n}\n\ntype MediaKeysState = {\n  [key: string]: any\n}\n\nexport function useMedia(): {\n  [key in MediaQueryKey]: boolean\n} {\n  const keys = useSafeRef<MediaKeysState>({ prev: initState })\n\n  const state = useSyncExternalStore<MediaQueryState>(\n    subscribe,\n    () => {\n      const { prev, ...curKeys } = keys.current\n      const shouldUpdate = !prev || Object.keys(curKeys).some((k) => mediaState[k] !== prev[k])\n      if (shouldUpdate) {\n        const next = { ...mediaState }\n        keys.current.prev = next\n        return next\n      }\n      return prev\n    },\n    () => initState\n  )\n\n  return useMemo(() => {\n    return new Proxy(state, {\n      get(_, key: string) {\n        if (!keys.current[key]) {\n          keys.current[key] = true\n        }\n        return Reflect.get(state, key)\n      },\n    })\n  }, [state])\n}\n\n/**\n * Useful for more complex components that need access to the currently active props,\n * accounting for the currently active media queries.\n *\n * Use sparingly, is will loop props and trigger re-render on all media queries.\n *\n * */\nexport function useMediaPropsActive<A extends Object>(\n  props: A\n): {\n  // remove all media\n  [Key in keyof A extends `$${string}` ? never : keyof A]?: A[Key]\n} {\n  const media = useMedia()\n\n  return useMemo(() => {\n    const next = {} as A\n    const importancesUsed = {}\n    const propNames = Object.keys(props)\n\n    for (let i = propNames.length - 1; i >= 0; i--) {\n      const key = propNames[i]\n      const val = props[key]\n      if (key[0] === '$') {\n        if (!media[key.slice(1)]) {\n          continue\n        }\n        if (val && typeof val === 'object') {\n          const subKeys = Object.keys(val)\n          for (let j = subKeys.length; j--; j >= 0) {\n            const subKey = subKeys[j]\n            mergeMediaByImportance(next, subKey, val[subKey], importancesUsed)\n          }\n        }\n      } else {\n        mergeMediaByImportance(next, key, val, importancesUsed)\n      }\n    }\n\n    return next\n  }, [media, props])\n}\n\nexport function mergeMediaByImportance(\n  onto: Record<string, any>,\n  key: string,\n  value: any,\n  importancesUsed: Record<string, number>\n) {\n  const importance = getMediaKeyImportance(key)\n  if (importancesUsed[key] > importance) {\n    return false\n  }\n  importancesUsed[key] = importance\n  onto[key] = value\n  return true\n}\n\nfunction camelToHyphen(str: string) {\n  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()\n}\n\nexport function mediaObjectToString(query: string | MediaQueryObject) {\n  if (typeof query === 'string') {\n    return query\n  }\n  return Object.entries(query)\n    .map(([feature, value]) => {\n      feature = camelToHyphen(feature)\n      if (typeof value === 'string') {\n        return `(${feature}: ${value})`\n      }\n      if (typeof value === 'number' && /[height|width]$/.test(feature)) {\n        value = `${value}px`\n      }\n      return `(${feature}: ${value})`\n    })\n    .join(' and ')\n}\n"],
+  "mappings": "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",
   "names": ["update"]
 }

package/dist/cjs/hooks/useTheme.js

@@ -37,7 +37,7 @@ var import_createProxy = require("../helpers/createProxy");
 var import_ThemeManager = require("../helpers/ThemeManager");
 var import_getThemeUnwrapped = require("./getThemeUnwrapped");
 var import_useServerHooks = require("./useServerHooks");
-const useTheme = (themeName, componentName, props, forceUpdate) => {
+const useTheme = (themeName, componentName, props, forceUpdate, disableTracking) => {
   if (import_constants.isRSC) {
     const config = (0, import_config.getConfig)();
     return getThemeProxied(config.themes[config.defaultTheme], config.defaultTheme);
@@ -84,10 +84,33 @@ const useTheme = (themeName, componentName, props, forceUpdate) => {
     return themes[Object.keys(themes)[0]];
   }
   return (0, import_react.useMemo)(() => {
-    return getThemeProxied(theme, name, className, themeManager, state, debugProp);
-  }, [theme, name, className, themeManager, state, debugProp]);
+    return getThemeProxied({
+      theme,
+      name,
+      className,
+      themeManager,
+      onStringKeyAccess(key) {
+        if (disableTracking)
+          return;
+        if (state) {
+          if (state.current.isRendering && !state.current.keys.has(key)) {
+            state.current.keys.add(key);
+            if (process.env.NODE_ENV === "development" && debugProp === "verbose") {
+              console.log("  \u{1F538} tracking theme", key);
+            }
+          }
+        }
+      }
+    });
+  }, [theme, name, className, themeManager, debugProp, disableTracking]);
 };
-function getThemeProxied(theme, name, className, themeManager, state, debugProp) {
+function getThemeProxied({
+  theme,
+  name,
+  className,
+  themeManager,
+  onStringKeyAccess
+}) {
   return (0, import_createProxy.createProxy)(theme, {
     has(_, key) {
       if (typeof key === "string" && key[0] === "$") {
@@ -117,14 +140,7 @@ function getThemeProxied(theme, name, className, themeManager, state, debugProp)
       if (!themeManager) {
         return theme[key];
       }
-      if (state) {
-        if (state.current.isRendering && !state.current.keys.has(key)) {
-          state.current.keys.add(key);
-          if (process.env.NODE_ENV === "development" && debugProp === "verbose") {
-            console.log("  \u{1F538} tracking theme", key);
-          }
-        }
-      }
+      onStringKeyAccess == null ? void 0 : onStringKeyAccess(key);
       return themeManager.getValue(key);
     }
   });

package/dist/cjs/hooks/useTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useTheme.tsx"],
-  "sourcesContent": ["import { isRSC, isServer, useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { isDevTools } from '../constants/isDevTools'\nimport { ThemeContext } from '../contexts/ThemeContext'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport { createProxy } from '../helpers/createProxy'\nimport {\n  GetNextThemeProps,\n  ThemeManager,\n  ThemeManagerContext,\n  emptyManager,\n} from '../helpers/ThemeManager'\nimport { ThemeName, ThemeParsed } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useServerRef } from './useServerHooks'\n\nexport interface ThemeProps {\n  className?: string\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  componentName?: string\n  children?: any\n  reset?: boolean\n  debug?: boolean | 'verbose'\n}\n\ninterface UseThemeState {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nexport const useTheme = (\n  themeName?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdate?: any\n): ThemeParsed => {\n  // TODO this can use useChangeThemeEffect almost ready\n  if (isRSC) {\n    const config = getConfig()\n    // @ts-ignore\n    return getThemeProxied(config.themes[config.defaultTheme], config.defaultTheme)\n  }\n\n  const state = useServerRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n\n  const { name, theme, themes, themeManager, className } = useChangeThemeEffect(\n    themeName,\n    componentName,\n    props,\n    forceUpdate,\n    state.current.uuid\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props?.debug === 'verbose') {\n      // eslint-disable-next-line no-console\n      console.groupCollapsed('  \uD83D\uDD39 useTheme =>', name)\n      const logs = { themeName, componentName, name, className, ...(isDevTools && { theme }) }\n      for (const key in logs) {\n        // eslint-disable-next-line no-console\n        console.log('  ', key, logs[key])\n      }\n      // eslint-disable-next-line no-console\n      console.groupEnd()\n    }\n  }\n\n  // track usage\n  state.current.isRendering = true\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    const cur = themeManager?.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      themeManager?.track(st.uuid, st.keys)\n    }\n  })\n\n  const debugProp = props && props['debug']\n\n  if (!theme) {\n    if (process.env.NODE_ENV === 'development') {\n      // eslint-disable-next-line no-console\n      console.warn('No theme with name', themeName)\n    }\n    return themes[Object.keys(themes)[0]]\n  }\n\n  return useMemo(() => {\n    return getThemeProxied(theme, name, className, themeManager, state, debugProp)\n  }, [theme, name, className, themeManager, state, debugProp])\n}\n\nfunction getThemeProxied(\n  theme: any,\n  name: string,\n  className?: string,\n  themeManager?: ThemeManager | null,\n  state?: React.MutableRefObject<UseThemeState>,\n  debugProp?: boolean | 'verbose'\n) {\n  return createProxy(theme, {\n    has(_, key) {\n      if (typeof key === 'string' && key[0] === '$') {\n        key = key.slice(1)\n      }\n      return Reflect.has(theme, key)\n    },\n    get(_, key) {\n      if (key === GetThemeUnwrapped) {\n        return theme\n      }\n      if (key === GetThemeManager) {\n        return themeManager\n      }\n      if (key === 'name') {\n        return name\n      }\n      if (key === 'className') {\n        return className\n      }\n      if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {\n        return Reflect.get(_, key)\n      }\n      // auto convert variables to plain\n      if (key[0] === '$') {\n        key = key.slice(1)\n      }\n      if (!themeManager) {\n        return theme[key]\n      }\n      if (state) {\n        if (state.current.isRendering && !state.current.keys.has(key)) {\n          state.current.keys.add(key)\n          if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {\n            // eslint-disable-next-line no-console\n            console.log('  \uD83D\uDD38 tracking theme', key)\n          }\n        }\n      }\n      return themeManager.getValue(key)\n    },\n  })\n}\n\nconst GetThemeManager = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined => {\n  if (!theme) return\n  return theme[GetThemeManager]\n}\n\nexport function useThemeName(opts?: { parent?: true }): ThemeName {\n  if (isRSC) {\n    const config = getConfig()\n    return config.themes[Object.keys(config.themes)[0]] as any\n  }\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent?.name || '')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!parent) return\n    return parent.onChangeTheme((next, manager) => {\n      const name = opts?.parent ? manager.parentName || next : next\n      if (!name) return\n      setName(name)\n    })\n  }, [parent])\n\n  return name\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (\n  name?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdateProp?: any,\n  uuid?: Object\n): {\n  themes: Record<string, ThemeParsed>\n  themeManager: ThemeManager | null\n  name: string\n  theme: ThemeParsed | null\n  className?: string\n} => {\n  const config = getConfig()\n\n  if (process.env.NODE_ENV === 'development') {\n    if (!config) {\n      throw new Error(\n        `Missing tamagui config, you either have a duplicate config, or haven't set it up. Be sure createTamagui is called before rendering.`\n      )\n    }\n  }\n\n  const { themes } = config\n\n  if (isRSC) {\n    // we need context working for this to work well\n    const parentManager = new ThemeManager('light', 'light', themes.light)\n    const next = parentManager.getNextTheme({\n      name,\n      componentName,\n      themes,\n      reset: props?.reset,\n    })\n    return {\n      ...next,\n      themes,\n      themeManager: null,\n    }\n  }\n\n  const debug = props && props['debug']\n  const parentManager = useContext(ThemeManagerContext) || emptyManager\n  const reset = props?.reset || false\n  const getThemeProps: GetNextThemeProps = {\n    name,\n    componentName,\n    themes,\n    reset,\n  }\n  const next = parentManager.getNextTheme(getThemeProps, debug)\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const forceUpdate = forceUpdateProp || useForceUpdate()\n\n  const themeManager = useMemo(() => {\n    return new ThemeManager(next.name, next.className, next.theme, parentManager, reset)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  // not concurrent safe but fixes native (but breaks SSR and not needed on web (i think) so leave only on native)\n  let didChange = false\n  if (process.env.TAMAGUI_TARGET === 'native') {\n    didChange = Boolean(\n      next?.name !== themeManager.name || next?.className !== themeManager.className\n    )\n    if (didChange) {\n      themeManager.update(next, false, false)\n    }\n  }\n\n  if (!isServer) {\n    useLayoutEffect(() => {\n      themeManager.update(next, didChange)\n      activeThemeManagers.add(themeManager)\n\n      const disposeParentOnChange = parentManager.onChangeTheme(() => {\n        const next = parentManager.getNextTheme(getThemeProps, debug)\n        if (!next) return\n        if (themeManager.update(next)) {\n          if (uuid && !themeManager.isTracking(uuid)) {\n            // no need to re-render if not tracking any keys\n            return\n          }\n          if (process.env.NODE_ENV === 'development' && debug) {\n            // eslint-disable-next-line no-console\n            console.log('Changed theme', componentName, next, { props })\n          }\n          forceUpdate()\n        }\n      })\n\n      return () => {\n        activeThemeManagers.delete(themeManager)\n        disposeParentOnChange()\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [didChange, themes, next?.name, next?.className, componentName, debug])\n  }\n\n  return {\n    ...(parentManager && {\n      name: parentManager.name,\n      theme: parentManager.theme,\n    }),\n    ...next,\n    className: next.className === parentManager.className ? undefined : next.className,\n    themes,\n    themeManager,\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA2D;AAC3D,8BAA+B;AAC/B,mBAA8E;AAE9E,oBAA0B;AAC1B,wBAA2B;AAC3B,0BAA6B;AAC7B,0BAA6B;AAC7B,yBAA4B;AAC5B,0BAKO;AAEP,+BAAkC;AAClC,4BAA6B;AAkBtB,MAAM,WAAW,CACtB,WACA,eACA,OACA,gBACgB;AAEhB,MAAI,wBAAO;AACT,UAAM,aAAS,yBAAU;AAEzB,WAAO,gBAAgB,OAAO,OAAO,OAAO,eAAe,OAAO,YAAY;AAAA,EAChF;AAEA,QAAM,YAAQ,oCAAa;AAC3B,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,UAAU;AAAA,MACd,MAAM,CAAC;AAAA,MACP,MAAM,oBAAI,IAAI;AAAA,MACd,aAAa;AAAA,IACf;AAAA,EACF;AAEA,QAAM,EAAE,MAAM,OAAO,QAAQ,cAAc,UAAU,IAAI;AAAA,IACvD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM,QAAQ;AAAA,EAChB;AAEA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,SAAI,+BAAO,WAAU,WAAW;AAE9B,cAAQ,eAAe,2BAAoB,IAAI;AAC/C,YAAM,OAAO,EAAE,WAAW,eAAe,MAAM,WAAW,GAAI,gCAAc,EAAE,MAAM,EAAG;AACvF,iBAAW,OAAO,MAAM;AAEtB,gBAAQ,IAAI,MAAM,KAAK,KAAK,IAAI;AAAA,MAClC;AAEA,cAAQ,SAAS;AAAA,IACnB;AAAA,EACF;AAGA,QAAM,QAAQ,cAAc;AAC5B,kDAA0B,MAAM;AAC9B,UAAM,KAAK,MAAM;AACjB,OAAG,cAAc;AACjB,UAAM,MAAM,6CAAc,KAAK,IAAI,GAAG;AACtC,QAAI,CAAC,OAAO,KAAC,kCAAa,GAAG,MAAM,GAAG,GAAG;AACvC,mDAAc,MAAM,GAAG,MAAM,GAAG;AAAA,IAClC;AAAA,EACF,CAAC;AAED,QAAM,YAAY,SAAS,MAAM;AAEjC,MAAI,CAAC,OAAO;AACV,QAAI,QAAQ,IAAI,aAAa,eAAe;AAE1C,cAAQ,KAAK,sBAAsB,SAAS;AAAA,IAC9C;AACA,WAAO,OAAO,OAAO,KAAK,MAAM,EAAE;AAAA,EACpC;AAEA,aAAO,sBAAQ,MAAM;AACnB,WAAO,gBAAgB,OAAO,MAAM,WAAW,cAAc,OAAO,SAAS;AAAA,EAC/E,GAAG,CAAC,OAAO,MAAM,WAAW,cAAc,OAAO,SAAS,CAAC;AAC7D;AAEA,SAAS,gBACP,OACA,MACA,WACA,cACA,OACA,WACA;AACA,aAAO,gCAAY,OAAO;AAAA,IACxB,IAAI,GAAG,KAAK;AACV,UAAI,OAAO,QAAQ,YAAY,IAAI,OAAO,KAAK;AAC7C,cAAM,IAAI,MAAM,CAAC;AAAA,MACnB;AACA,aAAO,QAAQ,IAAI,OAAO,GAAG;AAAA,IAC/B;AAAA,IACA,IAAI,GAAG,KAAK;AACV,UAAI,QAAQ,4CAAmB;AAC7B,eAAO;AAAA,MACT;AACA,UAAI,QAAQ,iBAAiB;AAC3B,eAAO;AAAA,MACT;AACA,UAAI,QAAQ,QAAQ;AAClB,eAAO;AAAA,MACT;AACA,UAAI,QAAQ,aAAa;AACvB,eAAO;AAAA,MACT;AACA,UAAI,CAAC,QAAQ,QAAQ,eAAe,OAAO,QAAQ,YAAY,QAAQ,WAAW;AAChF,eAAO,QAAQ,IAAI,GAAG,GAAG;AAAA,MAC3B;AAEA,UAAI,IAAI,OAAO,KAAK;AAClB,cAAM,IAAI,MAAM,CAAC;AAAA,MACnB;AACA,UAAI,CAAC,cAAc;AACjB,eAAO,MAAM;AAAA,MACf;AACA,UAAI,OAAO;AACT,YAAI,MAAM,QAAQ,eAAe,CAAC,MAAM,QAAQ,KAAK,IAAI,GAAG,GAAG;AAC7D,gBAAM,QAAQ,KAAK,IAAI,GAAG;AAC1B,cAAI,QAAQ,IAAI,aAAa,iBAAiB,cAAc,WAAW;AAErE,oBAAQ,IAAI,8BAAuB,GAAG;AAAA,UACxC;AAAA,QACF;AAAA,MACF;AACA,aAAO,aAAa,SAAS,GAAG;AAAA,IAClC;AAAA,EACF,CAAC;AACH;AAEA,MAAM,kBAAkB,OAAO;AAExB,MAAM,kBAAkB,CAAC,UAAyC;AACvE,MAAI,CAAC;AAAO;AACZ,SAAO,MAAM;AACf;AAEO,SAAS,aAAa,MAAqC;AAChE,MAAI,wBAAO;AACT,UAAM,aAAS,yBAAU;AACzB,WAAO,OAAO,OAAO,OAAO,KAAK,OAAO,MAAM,EAAE;AAAA,EAClD;AACA,QAAM,aAAS,yBAAW,uCAAmB;AAC7C,QAAM,CAAC,MAAM,OAAO,QAAI,wBAAS,iCAAQ,SAAQ,EAAE;AAEnD,kDAA0B,MAAM;AAC9B,QAAI,CAAC;AAAQ;AACb,WAAO,OAAO,cAAc,CAAC,MAAM,YAAY;AAC7C,YAAMA,SAAO,6BAAM,UAAS,QAAQ,cAAc,OAAO;AACzD,UAAI,CAACA;AAAM;AACX,cAAQA,KAAI;AAAA,IACd,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO;AACT;AAEO,MAAM,sBAAsB,MAAM;AAxLzC;AAyLE,UAAO,kCAAW,gCAAY,MAAvB,mBAA0B;AACnC;AAEO,MAAM,sBAAsB,oBAAI,IAAkB;AAElD,MAAM,uBAAuB,CAClC,MACA,eACA,OACA,iBACA,SAOG;AACH,QAAM,aAAS,yBAAU;AAEzB,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,CAAC,QAAQ;AACX,YAAM,IAAI;AAAA,QACR;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,EAAE,OAAO,IAAI;AAEnB,MAAI,wBAAO;AAET,UAAMC,iBAAgB,IAAI,iCAAa,SAAS,SAAS,OAAO,KAAK;AACrE,UAAMC,QAAOD,eAAc,aAAa;AAAA,MACtC;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,+BAAO;AAAA,IAChB,CAAC;AACD,WAAO;AAAA,MACL,GAAGC;AAAA,MACH;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,EACF;AAEA,QAAM,QAAQ,SAAS,MAAM;AAC7B,QAAM,oBAAgB,yBAAW,uCAAmB,KAAK;AACzD,QAAM,SAAQ,+BAAO,UAAS;AAC9B,QAAM,gBAAmC;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,OAAO,cAAc,aAAa,eAAe,KAAK;AAE5D,QAAM,cAAc,uBAAmB,wCAAe;AAEtD,QAAM,mBAAe,sBAAQ,MAAM;AACjC,WAAO,IAAI,iCAAa,KAAK,MAAM,KAAK,WAAW,KAAK,OAAO,eAAe,KAAK;AAAA,EAErF,GAAG,CAAC,CAAC;AAGL,MAAI,YAAY;AAChB,MAAI,QAAQ,IAAI,mBAAmB,UAAU;AAC3C,gBAAY;AAAA,OACV,6BAAM,UAAS,aAAa,SAAQ,6BAAM,eAAc,aAAa;AAAA,IACvE;AACA,QAAI,WAAW;AACb,mBAAa,OAAO,MAAM,OAAO,KAAK;AAAA,IACxC;AAAA,EACF;AAEA,MAAI,CAAC,2BAAU;AACb,sCAAgB,MAAM;AACpB,mBAAa,OAAO,MAAM,SAAS;AACnC,0BAAoB,IAAI,YAAY;AAEpC,YAAM,wBAAwB,cAAc,cAAc,MAAM;AAC9D,cAAMA,QAAO,cAAc,aAAa,eAAe,KAAK;AAC5D,YAAI,CAACA;AAAM;AACX,YAAI,aAAa,OAAOA,KAAI,GAAG;AAC7B,cAAI,QAAQ,CAAC,aAAa,WAAW,IAAI,GAAG;AAE1C;AAAA,UACF;AACA,cAAI,QAAQ,IAAI,aAAa,iBAAiB,OAAO;AAEnD,oBAAQ,IAAI,iBAAiB,eAAeA,OAAM,EAAE,MAAM,CAAC;AAAA,UAC7D;AACA,sBAAY;AAAA,QACd;AAAA,MACF,CAAC;AAED,aAAO,MAAM;AACX,4BAAoB,OAAO,YAAY;AACvC,8BAAsB;AAAA,MACxB;AAAA,IAEF,GAAG,CAAC,WAAW,QAAQ,6BAAM,MAAM,6BAAM,WAAW,eAAe,KAAK,CAAC;AAAA,EAC3E;AAEA,SAAO;AAAA,IACL,GAAI,iBAAiB;AAAA,MACnB,MAAM,cAAc;AAAA,MACpB,OAAO,cAAc;AAAA,IACvB;AAAA,IACA,GAAG;AAAA,IACH,WAAW,KAAK,cAAc,cAAc,YAAY,SAAY,KAAK;AAAA,IACzE;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { isRSC, isServer, useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { isDevTools } from '../constants/isDevTools'\nimport { ThemeContext } from '../contexts/ThemeContext'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport { createProxy } from '../helpers/createProxy'\nimport {\n  GetNextThemeProps,\n  ThemeManager,\n  ThemeManagerContext,\n  emptyManager,\n} from '../helpers/ThemeManager'\nimport { ThemeName, ThemeParsed } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useServerRef } from './useServerHooks'\n\nexport interface ThemeProps {\n  className?: string\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  componentName?: string\n  children?: any\n  reset?: boolean\n  debug?: boolean | 'verbose'\n}\n\ninterface UseThemeState {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nexport const useTheme = (\n  themeName?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdate?: any,\n  disableTracking?: boolean\n): ThemeParsed => {\n  // TODO this can use useChangeThemeEffect almost ready\n  if (isRSC) {\n    const config = getConfig()\n    // @ts-ignore\n    return getThemeProxied(config.themes[config.defaultTheme], config.defaultTheme)\n  }\n\n  const state = useServerRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n\n  const { name, theme, themes, themeManager, className } = useChangeThemeEffect(\n    themeName,\n    componentName,\n    props,\n    forceUpdate,\n    state.current.uuid\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props?.debug === 'verbose') {\n      // eslint-disable-next-line no-console\n      console.groupCollapsed('  \uD83D\uDD39 useTheme =>', name)\n      const logs = { themeName, componentName, name, className, ...(isDevTools && { theme }) }\n      for (const key in logs) {\n        // eslint-disable-next-line no-console\n        console.log('  ', key, logs[key])\n      }\n      // eslint-disable-next-line no-console\n      console.groupEnd()\n    }\n  }\n\n  // track usage\n  state.current.isRendering = true\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    const cur = themeManager?.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      themeManager?.track(st.uuid, st.keys)\n    }\n  })\n\n  const debugProp = props && props['debug']\n\n  if (!theme) {\n    if (process.env.NODE_ENV === 'development') {\n      // eslint-disable-next-line no-console\n      console.warn('No theme with name', themeName)\n    }\n    return themes[Object.keys(themes)[0]]\n  }\n\n  return useMemo(() => {\n    return getThemeProxied({\n      theme,\n      name,\n      className,\n      themeManager,\n      onStringKeyAccess(key) {\n        if (disableTracking) return\n        if (state) {\n          if (state.current.isRendering && !state.current.keys.has(key)) {\n            state.current.keys.add(key)\n            if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {\n              // eslint-disable-next-line no-console\n              console.log('  \uD83D\uDD38 tracking theme', key)\n            }\n          }\n        }\n      },\n    })\n  }, [theme, name, className, themeManager, debugProp, disableTracking])\n}\n\nfunction getThemeProxied({\n  theme,\n  name,\n  className,\n  themeManager,\n  onStringKeyAccess,\n}: {\n  theme: any\n  name: string\n  onStringKeyAccess?: (cb: string) => void\n  className?: string\n  themeManager?: ThemeManager | null\n}) {\n  return createProxy(theme, {\n    has(_, key) {\n      if (typeof key === 'string' && key[0] === '$') {\n        key = key.slice(1)\n      }\n      return Reflect.has(theme, key)\n    },\n    get(_, key) {\n      if (key === GetThemeUnwrapped) {\n        return theme\n      }\n      if (key === GetThemeManager) {\n        return themeManager\n      }\n      if (key === 'name') {\n        return name\n      }\n      if (key === 'className') {\n        return className\n      }\n      if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {\n        return Reflect.get(_, key)\n      }\n      // auto convert variables to plain\n      if (key[0] === '$') {\n        key = key.slice(1)\n      }\n      if (!themeManager) {\n        return theme[key]\n      }\n      onStringKeyAccess?.(key)\n      return themeManager.getValue(key)\n    },\n  })\n}\n\nconst GetThemeManager = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined => {\n  if (!theme) return\n  return theme[GetThemeManager]\n}\n\nexport function useThemeName(opts?: { parent?: true }): ThemeName {\n  if (isRSC) {\n    const config = getConfig()\n    return config.themes[Object.keys(config.themes)[0]] as any\n  }\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent?.name || '')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!parent) return\n    return parent.onChangeTheme((next, manager) => {\n      const name = opts?.parent ? manager.parentName || next : next\n      if (!name) return\n      setName(name)\n    })\n  }, [parent])\n\n  return name\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (\n  name?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdateProp?: any,\n  uuid?: Object\n): {\n  themes: Record<string, ThemeParsed>\n  themeManager: ThemeManager | null\n  name: string\n  theme: ThemeParsed | null\n  className?: string\n} => {\n  const config = getConfig()\n\n  if (process.env.NODE_ENV === 'development') {\n    if (!config) {\n      throw new Error(\n        `Missing tamagui config, you either have a duplicate config, or haven't set it up. Be sure createTamagui is called before rendering.`\n      )\n    }\n  }\n\n  const { themes } = config\n\n  if (isRSC) {\n    // we need context working for this to work well\n    const parentManager = new ThemeManager('light', 'light', themes.light)\n    const next = parentManager.getNextTheme({\n      name,\n      componentName,\n      themes,\n      reset: props?.reset,\n    })\n    return {\n      ...next,\n      themes,\n      themeManager: null,\n    }\n  }\n\n  const debug = props && props['debug']\n  const parentManager = useContext(ThemeManagerContext) || emptyManager\n  const reset = props?.reset || false\n  const getThemeProps: GetNextThemeProps = {\n    name,\n    componentName,\n    themes,\n    reset,\n  }\n  const next = parentManager.getNextTheme(getThemeProps, debug)\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const forceUpdate = forceUpdateProp || useForceUpdate()\n\n  const themeManager = useMemo(() => {\n    return new ThemeManager(next.name, next.className, next.theme, parentManager, reset)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  // not concurrent safe but fixes native (but breaks SSR and not needed on web (i think) so leave only on native)\n  let didChange = false\n  if (process.env.TAMAGUI_TARGET === 'native') {\n    didChange = Boolean(\n      next?.name !== themeManager.name || next?.className !== themeManager.className\n    )\n    if (didChange) {\n      themeManager.update(next, false, false)\n    }\n  }\n\n  if (!isServer) {\n    useLayoutEffect(() => {\n      themeManager.update(next, didChange)\n      activeThemeManagers.add(themeManager)\n\n      const disposeParentOnChange = parentManager.onChangeTheme(() => {\n        const next = parentManager.getNextTheme(getThemeProps, debug)\n        if (!next) return\n        if (themeManager.update(next)) {\n          if (uuid && !themeManager.isTracking(uuid)) {\n            // no need to re-render if not tracking any keys\n            return\n          }\n          if (process.env.NODE_ENV === 'development' && debug) {\n            // eslint-disable-next-line no-console\n            console.log('Changed theme', componentName, next, { props })\n          }\n          forceUpdate()\n        }\n      })\n\n      return () => {\n        activeThemeManagers.delete(themeManager)\n        disposeParentOnChange()\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [didChange, themes, next?.name, next?.className, componentName, debug])\n  }\n\n  return {\n    ...(parentManager && {\n      name: parentManager.name,\n      theme: parentManager.theme,\n    }),\n    ...next,\n    className: next.className === parentManager.className ? undefined : next.className,\n    themes,\n    themeManager,\n  }\n}\n"],
+  "mappings": "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",
   "names": ["name", "parentManager", "next"]
 }

package/dist/cjs/views/ThemeInverse.js

@@ -36,8 +36,7 @@ const ThemeInverse = ({
   (0, import_constants.useIsomorphicLayoutEffect)(() => {
     if (themeName.startsWith("dark")) {
       setName("light");
-    }
-    if (themeName.startsWith("light")) {
+    } else if (themeName.startsWith("light")) {
       setName("dark");
     }
   }, [defaultTheme, themeName]);

package/dist/cjs/views/ThemeInverse.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeInverse.tsx"],
-  "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport React, { useState } from 'react'\n\nimport { useDefaultThemeName, useThemeName } from '../hooks/useTheme'\nimport { Theme } from './Theme'\n\nexport const ThemeInverse = ({\n  children,\n  disable,\n}: {\n  children: React.ReactNode\n  disable?: boolean\n}) => {\n  const themeName = useThemeName()\n  const defaultTheme = useDefaultThemeName()\n  const [name, setName] = useState<null | string>(null)\n\n  // ssr\n  useIsomorphicLayoutEffect(() => {\n    if (themeName.startsWith('dark')) {\n      setName('light')\n    }\n    if (themeName.startsWith('light')) {\n      setName('dark')\n    }\n  }, [defaultTheme, themeName])\n\n  if (disable) {\n    return children as JSX.Element\n  }\n\n  return <Theme name={name}>{children}</Theme>\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BS;AA/BT,uBAA0C;AAC1C,mBAAgC;AAEhC,sBAAkD;AAClD,mBAAsB;AAEf,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AACF,MAGM;AACJ,QAAM,gBAAY,8BAAa;AAC/B,QAAM,mBAAe,qCAAoB;AACzC,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAwB,IAAI;AAGpD,kDAA0B,MAAM;AAC9B,QAAI,UAAU,WAAW,MAAM,GAAG;AAChC,cAAQ,OAAO;AAAA,IACjB;AACA,QAAI,UAAU,WAAW,OAAO,GAAG;AACjC,cAAQ,MAAM;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,cAAc,SAAS,CAAC;AAE5B,MAAI,SAAS;AACX,WAAO;AAAA,EACT;AAEA,SAAO,4CAAC;AAAA,IAAM;AAAA,IAAa;AAAA,GAAS;AACtC;",
+  "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport React, { useState } from 'react'\n\nimport { useDefaultThemeName, useThemeName } from '../hooks/useTheme'\nimport { Theme } from './Theme'\n\nexport const ThemeInverse = ({\n  children,\n  disable,\n}: {\n  children: React.ReactNode\n  disable?: boolean\n}) => {\n  const themeName = useThemeName()\n  const defaultTheme = useDefaultThemeName()\n  const [name, setName] = useState<null | string>(null)\n\n  // ssr\n  useIsomorphicLayoutEffect(() => {\n    if (themeName.startsWith('dark')) {\n      setName('light')\n    } else if (themeName.startsWith('light')) {\n      setName('dark')\n    }\n  }, [defaultTheme, themeName])\n\n  if (disable) {\n    return children as JSX.Element\n  }\n\n  return <Theme name={name}>{children}</Theme>\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BS;AA9BT,uBAA0C;AAC1C,mBAAgC;AAEhC,sBAAkD;AAClD,mBAAsB;AAEf,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AACF,MAGM;AACJ,QAAM,gBAAY,8BAAa;AAC/B,QAAM,mBAAe,qCAAoB;AACzC,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAwB,IAAI;AAGpD,kDAA0B,MAAM;AAC9B,QAAI,UAAU,WAAW,MAAM,GAAG;AAChC,cAAQ,OAAO;AAAA,IACjB,WAAW,UAAU,WAAW,OAAO,GAAG;AACxC,cAAQ,MAAM;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,cAAc,SAAS,CAAC;AAE5B,MAAI,SAAS;AACX,WAAO;AAAA,EACT;AAEA,SAAO,4CAAC;AAAA,IAAM;AAAA,IAAa;AAAA,GAAS;AACtC;",
   "names": []
 }

package/dist/esm/createComponent.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useComposedRefs } from "@tamagui/compose-refs";
-import { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { isClient, isRSC, isServer, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
 import {
   composeEventHandlers,
   stylePropsTransform,
@@ -26,16 +26,11 @@ import { stackDefaultStyles } from "./constants/constants";
 import { FontLanguageContext } from "./contexts/FontLanguageContext";
 import { TextAncestorContext } from "./contexts/TextAncestorContext";
 import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
-import {
-  getSubStyle,
-  insertSplitStyles,
-  useSplitStyles
-} from "./helpers/getSplitStyles";
+import { getSubStyle, useSplitStyles } from "./helpers/getSplitStyles";
 import { getAllSelectors } from "./helpers/insertStyleRule";
 import { mergeProps } from "./helpers/mergeProps";
 import { mergeTransform } from "./helpers/mergeTransform";
 import { proxyThemeVariables } from "./helpers/proxyThemeVariables";
-import { pseudoDescriptors } from "./helpers/pseudoDescriptors";
 import { useShallowSetState } from "./helpers/useShallowSetState";
 import { getRect, measureLayout, useElementLayout } from "./hooks/useElementLayout";
 import { addMediaQueryListener, getInitialMediaState } from "./hooks/useMedia";
@@ -88,7 +83,6 @@ function createComponent(configIn, ParentComponent) {
   let defaultNativeStyle;
   let tamaguiDefaultProps;
   let defaultTag;
-  let initialSplitStyles;
   const component = forwardRef((propsIn, forwardedRef) => {
     var _a, _b, _c, _d, _e, _f, _g;
     let props;
@@ -122,17 +116,26 @@ function createComponent(configIn, ParentComponent) {
       staticConfig.isReactNative || isAnimated && tamaguiConfig.animations.isReactNative
     );
     if (process.env.NODE_ENV === "development") {
-      if (props["debug"]) {
+      if (debugProp) {
         const name = `${componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`;
         const type = isReactNative ? "(rnw)" : "";
         const dataIs = propsIn["data-is"] || "";
         const banner = `${name}${dataIs ? ` ${dataIs}` : ""} ${type}`;
         console.group(`%c ${banner}`, "background: yellow;");
-        console.log(`state`, state);
+        if (!isServer) {
+          console.log(`state`, state);
+          console.groupCollapsed("props");
+          console.log(props);
+          console.log("order", Object.keys(props));
+          console.groupEnd();
+        }
       }
     }
+    const shouldAvoidClasses = !isWeb || !!(props.animation && avoidClassesWhileAnimating) || !staticConfig.acceptsClassName;
+    const shouldForcePseudo = !!propsIn.forceStyle;
+    const noClassNames = shouldAvoidClasses || shouldForcePseudo;
     const forceUpdate = useForceUpdate();
-    const theme = useTheme(props.theme, componentName, props, forceUpdate);
+    const theme = useTheme(props.theme, componentName, props, forceUpdate, !noClassNames);
     const shouldSetMounted = needsMount && state.unmounted;
     const setMounted = shouldSetMounted ? () => {
       setTimeout(
@@ -144,10 +147,7 @@ function createComponent(configIn, ParentComponent) {
         isWeb ? 10 : 0
       );
     } : void 0;
-    const shouldAvoidClasses = !isWeb || !!(props.animation && avoidClassesWhileAnimating) || !staticConfig.acceptsClassName;
-    const shouldForcePseudo = !!propsIn.forceStyle;
     const hasTextAncestor = !!(isWeb && isText ? useContext(TextAncestorContext) : false);
-    const noClassNames = shouldAvoidClasses || shouldForcePseudo;
     const languageContext = isRSC ? null : useContext(FontLanguageContext);
     const isDisabled = props.disabled ?? ((_b = props.accessibilityState) == null ? void 0 : _b.disabled);
     const isTaggable = !Component || typeof Component === "string";
@@ -157,19 +157,18 @@ function createComponent(configIn, ParentComponent) {
     let elementType = isText ? (isAnimated ? AnimatedText : null) || BaseTextComponent : (isAnimated ? AnimatedView : null) || BaseViewComponent;
     elementType = Component || elementType;
     const isStringElement = typeof elementType === "string";
-    const splitStyleState = {
-      ...state,
-      noClassNames,
-      dynamicStylesInline: noClassNames,
-      hasTextAncestor,
-      resolveVariablesAs: "value"
-    };
     const splitStyles = useSplitStyles(
       props,
       staticConfig,
       theme,
-      splitStyleState,
-      props.asChild ? null : initialSplitStyles,
+      {
+        ...state,
+        noClassNames,
+        dynamicStylesInline: noClassNames,
+        hasTextAncestor,
+        resolveVariablesAs: "value"
+      },
+      null,
       languageContext || void 0,
       elementType,
       debugProp
@@ -412,11 +411,7 @@ function createComponent(configIn, ParentComponent) {
       styles = [isWeb ? null : defaultNativeStyle, animationStyles ?? splitStylesStyle, medias];
       if (shouldForcePseudo) {
         const next = {};
-        for (const style of styles) {
-          if (style) {
-            Object.assign(next, style);
-          }
-        }
+        styles.forEach((style) => Object.assign(next, style));
         Object.assign(splitStyles.style, next);
       }
     }
@@ -475,6 +470,8 @@ function createComponent(configIn, ParentComponent) {
             for (const style2 of styles) {
               if (style2 == null ? void 0 : style2.fontFamily) {
                 style2.fontFamily = overrideFace;
+                delete style2.fontWeight;
+                delete style2.fontStyle;
               }
             }
           }
@@ -482,15 +479,13 @@ function createComponent(configIn, ParentComponent) {
       }
       viewProps.style = styles;
     }
-    const initialPseudos = initialSplitStyles == null ? void 0 : initialSplitStyles.pseudos;
-    const runtimePressStyle = noClassNames && ((pseudos == null ? void 0 : pseudos.pressStyle) || (initialPseudos == null ? void 0 : initialPseudos.pressStyle));
+    const runtimePressStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.pressStyle);
     const attachPress = !!(runtimePressStyle || onPress || onPressOut || onPressIn || onClick);
-    const isHoverable = isWeb;
-    const runtimeHoverStyle = noClassNames && ((pseudos == null ? void 0 : pseudos.hoverStyle) || initialPseudos.hoverStyle);
-    const attachHover = isHoverable && !!(runtimeHoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
+    const runtimeHoverStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.hoverStyle);
+    const isHoverable = isWeb && !!(runtimeHoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
     const handlesPressEvents = !isWeb && !asChild;
     const shouldAttach = asChild ? false : Boolean(
-      attachPress || attachHover || "pressStyle" in props || "onPress" in props || "onPressIn" in props || "onPressOut" in props || isWeb && ("hoverStyle" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props)
+      attachPress || isHoverable || "pressStyle" in props || "onPress" in props || "onPressIn" in props || "onPressOut" in props || isWeb && ("hoverStyle" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props)
     );
     const events = shouldAttach && !isRSC && !isDisabled ? {
       onPressOut: attachPress ? (e) => {
@@ -498,25 +493,25 @@ function createComponent(configIn, ParentComponent) {
         onPressOut == null ? void 0 : onPressOut(e);
         onMouseUp == null ? void 0 : onMouseUp(e);
       } : void 0,
-      ...attachHover && {
-        onMouseEnter: attachHover ? (e) => {
+      ...isHoverable && {
+        onMouseEnter: isHoverable ? (e) => {
           const next = {};
-          if (attachHover) {
+          if (isHoverable) {
             next.hover = true;
           }
           if (state.pressIn) {
             next.press = true;
           }
-          if (attachHover || state.pressIn) {
+          if (isHoverable || state.pressIn) {
             setStateShallow(next);
           }
           onHoverIn == null ? void 0 : onHoverIn(e);
           onMouseEnter == null ? void 0 : onMouseEnter(e);
         } : void 0,
-        onMouseLeave: attachHover ? (e) => {
+        onMouseLeave: isHoverable ? (e) => {
           const next = {};
           mouseUps.add(unPress);
-          if (attachHover) {
+          if (isHoverable) {
             next.hover = false;
           }
           if (state.pressIn) {
@@ -593,7 +588,7 @@ function createComponent(configIn, ParentComponent) {
       };
     }
     if (process.env.TAMAGUI_TARGET === "native") {
-      const attachFocus = !!(pseudos.focusStyle || initialPseudos && initialPseudos.focusStyle);
+      const attachFocus = !!pseudos.focusStyle;
       if (attachFocus) {
         viewProps.onFocus = mergeEvent(viewProps.onFocus, () => {
           setStateShallow({ focus: true });
@@ -639,7 +634,7 @@ function createComponent(configIn, ParentComponent) {
         console.log("children", content);
         console.groupEnd();
         if (typeof window !== "undefined") {
-          console.log({ state, shouldProvideThemeManager, isAnimated, isAnimatedReactNativeWeb, tamaguiDefaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, isStringElement, classNamesIn: (_f = props.className) == null ? void 0 : _f.split(" "), classNamesOut: (_g = viewProps.className) == null ? void 0 : _g.split(" "), events, shouldAttach, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses: avoidClassesWhileAnimating, animation: props.animation, style: splitStylesStyle, defaultNativeStyle, initialSplitStyles, ...typeof window !== "undefined" ? { theme, themeClassName: theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo, classNames: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) } : null });
+          console.log({ state, shouldProvideThemeManager, isAnimated, isAnimatedReactNativeWeb, tamaguiDefaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, isStringElement, classNamesIn: (_f = props.className) == null ? void 0 : _f.split(" "), classNamesOut: (_g = viewProps.className) == null ? void 0 : _g.split(" "), events, shouldAttach, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses: avoidClassesWhileAnimating, animation: props.animation, style: splitStylesStyle, defaultNativeStyle, ...typeof window !== "undefined" ? { theme, themeClassName: theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo, classNames: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) } : null });
         }
         console.groupEnd();
       }
@@ -693,38 +688,16 @@ function createComponent(configIn, ParentComponent) {
       );
     }
     const debug = defaultPropsIn["debug"];
-    const [ourProps, ourClassNames] = mergeProps(defaultPropsIn, {}, true);
+    const [ourProps, ourClassNames] = mergeProps(defaultPropsIn, {});
     if (ourProps.tag) {
       defaultTag = ourProps.tag;
     }
     const noClassNames = !staticConfig.acceptsClassName;
-    initialSplitStyles = insertSplitStyles(
-      ourProps,
-      staticConfig,
-      initialTheme,
-      {
-        unmounted: false,
-        hover: false,
-        press: false,
-        pressIn: false,
-        focus: false,
-        resolveVariablesAs: "both",
-        noClassNames
-      },
-      void 0,
-      void 0,
-      debug
-    );
-    const [defaults, defaultsClassnames] = mergeProps(
-      component.defaultProps,
-      isWeb ? { ...initialSplitStyles.pseudos, ...initialSplitStyles.viewProps } : initialSplitStyles.viewProps,
-      true
-    );
-    initialSplitStyles.classNames = {
-      ...defaultsClassnames,
-      ...initialSplitStyles.classNames,
-      ...ourClassNames
-    };
+    const { name, variants, defaultVariants, ...restProps } = ourProps;
+    const [defaults, defaultsClassnames] = mergeProps(component.defaultProps, {
+      ...defaultVariants,
+      ...restProps
+    });
     defaultNativeStyle = {};
     const validStyles2 = staticConfig.validStyles || stylePropsView;
     if (!isWeb) {
@@ -739,34 +712,10 @@ function createComponent(configIn, ParentComponent) {
         }
       }
     }
-    if (Object.keys(defaults).length) {
-      tamaguiDefaultProps = defaults;
-      if (!isWeb) {
-        Object.keys(pseudoDescriptors).forEach((k) => {
-          if (ourProps[k]) {
-            initialSplitStyles.pseudos[k] = null;
-            tamaguiDefaultProps[k] = ourProps[k];
-          }
-        });
-      }
-    }
+    tamaguiDefaultProps = defaults;
     if (process.env.NODE_ENV === "development" && debug) {
       if (process.env.IS_STATIC !== "is_static") {
-        console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, {
-          staticConfig,
-          initialSplitStyles,
-          tamaguiDefaultProps,
-          defaultNativeStyle,
-          defaults,
-          defaultPropsIn,
-          defaultPropsKeyOrder: Object.keys(staticConfig.defaultProps),
-          defaultPropsInKeyOrder: Object.keys(defaultPropsIn).map((k) => [k, defaultPropsIn[k]]),
-          ourProps,
-          ourClassNames,
-          defaultsClassnames,
-          defaultTag,
-          noClassNames
-        });
+        console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, { staticConfig, tamaguiDefaultProps, defaultNativeStyle, defaults, defaultPropsIn, defaultPropsKeyOrder: Object.keys(staticConfig.defaultProps), defaultPropsInKeyOrder: Object.keys(defaultPropsIn).map((k) => [k, defaultPropsIn[k]]), ourProps, ourClassNames, defaultsClassnames, defaultTag, noClassNames });
       }
     }
   });