@tamagui/web 1.39.6 → 1.39.8

package/dist/esm/views/Text.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Text.tsx"],
-  "mappings": "AAAA,SAAS,oBAAoB,mBAAmB;AAEhD,SAAS,uBAAuB;AAGhC,MAAM,eAAe;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd;AAEO,MAAM,OAAO,gBAA8D;AAAA,EAChF,kBAAkB;AAAA,EAClB,QAAQ;AAAA,EAER,cACE,QAAQ,IAAI,mBAAmB,QAC3B;AAAA,IACE,OAAO;AAAA,IACP,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,EACV,IACA;AAAA,IACE,OAAO;AAAA,IACP,SAAS;AAAA,IACT,sBAAsB;AAAA,EACxB;AAAA,EAEN,uBAAuB,oBAAI,IAAI,CAAC,YAAY,CAAC;AAAA,EAE7C,UAAU;AAAA,IACR,GAAI,QAAQ,IAAI,mBAAmB,SAAS;AAAA,MAC1C,eAAe;AAAA,QACb,GAAG;AAAA,QAEH,WAAW,CAAC,kBACV,iBAAiB,IACb;AAAA,UACE,iBAAiB;AAAA,UACjB,iBAAiB;AAAA,UACjB,SAAS;AAAA,UACT,UAAU;AAAA,QACZ,IACA;AAAA,MACR;AAAA,IACF;AAAA;AAAA,IAGA,eAAe;AAAA,MACb,OAAO,MAAM;AAAA,IACf;AAAA,IAEA,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,MACA,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IAEA,SAAS;AAAA,MACP,MACE,QAAQ,IAAI,mBAAmB,QAC3B,eACA;AAAA,QACE,eAAe;AAAA,QACf,eAAe;AAAA,MACjB;AAAA,IACR;AAAA,EACF;AAAA,EAEA,YAAY,IAAI,IAAI,QAAQ,IAAI,mBAAmB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;AAAA,EAE3E,aAAa;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF,CAAC;",
+  "mappings": "AAAA,SAAyB,oBAAoB,mBAAmB;AAEhE,SAAS,uBAAuB;AAGhC,MAAM,eAAe;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd;AAEO,MAAM,OAAO,gBAA8D;AAAA,EAChF,kBAAkB;AAAA,EAClB,QAAQ;AAAA,EAER,cACE,QAAQ,IAAI,mBAAmB,QAC3B;AAAA,IACE,OAAO;AAAA,IACP,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,EACV,IACA;AAAA,IACE,OAAO;AAAA,IACP,SAAS;AAAA,IACT,sBAAsB;AAAA,EACxB;AAAA,EAEN,uBAAuB,oBAAI,IAAI,CAAC,YAAY,CAAC;AAAA,EAE7C,UAAU;AAAA,IACR,GAAI,QAAQ,IAAI,mBAAmB,SAAS;AAAA,MAC1C,eAAe;AAAA,QACb,GAAG;AAAA,QAEH,WAAW,CAAC,kBACV,iBAAiB,IACb;AAAA,UACE,iBAAiB;AAAA,UACjB,iBAAiB;AAAA,UACjB,SAAS;AAAA,UACT,UAAU;AAAA,QACZ,IACA;AAAA,MACR;AAAA,IACF;AAAA;AAAA,IAGA,eAAe;AAAA,MACb,OAAO,MAAM;AAAA,IACf;AAAA,IAEA,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,MACA,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IAEA,SAAS;AAAA,MACP,MACE,QAAQ,IAAI,mBAAmB,QAC3B,eACA;AAAA,QACE,eAAe;AAAA,QACf,eAAe;AAAA,MACjB;AAAA,IACR;AAAA,EACF;AAAA,EAEA,YAAY,IAAI,IAAI,QAAQ,IAAI,mBAAmB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;AAAA,EAE3E,aAAa;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF,CAAC;",
   "names": []
 }

package/dist/esm/views/Theme.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { isWeb } from "@tamagui/constants";
-import { Children, cloneElement, isValidElement } from "react";
+import { Children, cloneElement, isValidElement, useMemo } from "react";
 import { variableToString } from "../createVariable";
 import { ThemeManagerContext } from "../helpers/ThemeManagerContext";
 import { useServerRef } from "../hooks/useServerHooks";
@@ -31,8 +31,9 @@ function useThemedChildren(themeState, children, props, isRoot = false) {
     hasEverThemed.current = true;
   }
   const shouldRenderChildrenWithTheme = isNewTheme || hasEverThemed.current || forceClassName || isRoot;
+  const childrenMemo = useMemo(() => children, [children]);
   if (!shouldRenderChildrenWithTheme) {
-    return children;
+    return childrenMemo;
   }
   if (shallow && themeManager) {
     let next = Children.toArray(children);
@@ -44,7 +45,7 @@ function useThemedChildren(themeState, children, props, isRoot = false) {
       ) : child;
     });
   }
-  const elementsWithContext = /* @__PURE__ */ jsx(ThemeManagerContext.Provider, { value: themeManager, children });
+  const elementsWithContext = /* @__PURE__ */ jsx(ThemeManagerContext.Provider, { value: themeManager, children: childrenMemo });
   if (forceClassName === false) {
     return elementsWithContext;
   }

package/dist/esm/views/Theme.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "mappings": "AA4BQ;AA5BR,SAAS,aAAa;AACtB,SAAgB,UAAU,cAAc,sBAAsB;AAE9D,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B,SAA+B,4BAA4B;AAE3D,SAAS,kBAAkB;AAEpB,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM,SAAS;AACjB,WAAO,MAAM;AAAA,EACf;AAEA,QAAM,SAAS,CAAC,CAAC,MAAM,SAAS;AAChC,QAAM,aAAa,qBAAqB,OAAO,MAAM;AAErD,MAAI,WAAW,MAAM,qBAAqB,IACtC,SAAS;AAAA,IAAI,MAAM;AAAA,IAAU,CAAC,UAC5B,aAAa,OAAO,EAAE,CAAC,oBAAoB,GAAG,KAAK,CAAC;AAAA,EACtD,IACA,MAAM;AAEV,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,MAAM,UAAU,aAAa;AAC/B,iBACE,oBAAC,cAAW,YAAwB,YAAY,OAC7C,UACH;AAAA,IAEJ;AAAA,EACF;AAEA,SAAO,kBAAkB,YAAY,UAAU,OAAO,MAAM;AAC9D;AAEO,SAAS,kBACd,YACA,UACA,OAMA,SAAS,OACT;AACA,QAAM,EAAE,cAAc,WAAW,IAAI;AACrC,QAAM,EAAE,SAAS,eAAe,IAAI;AACpC,QAAM,gBAAgB,aAAa,KAAK;AACxC,MAAI,YAAY;AACd,kBAAc,UAAU;AAAA,EAC1B;AAEA,QAAM,gCACJ,cAAc,cAAc,WAAW,kBAAkB;AAE3D,MAAI,CAAC,+BAA+B;AAClC,WAAO;AAAA,EACT;AAKA,MAAI,WAAW,cAAc;AAC3B,QAAI,OAAO,SAAS,QAAQ,QAAQ;AACpC,WAAO,KAAK,IAAI,CAAC,UAAU;AACzB,aAAO,eAAe,KAAK,IACvB;AAAA,QACE;AAAA,QACA;AAAA,QACA,oBAAC,SAAM,MAAM,aAAa,MAAM,YAC5B,gBAAc,MAAM,UACxB;AAAA,MACF,IACA;AAAA,IACN,CAAC;AAAA,EACH;AAEA,QAAM,sBACJ,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,cAClC,UACH;AAGF,MAAI,mBAAmB,OAAO;AAC5B,WAAO;AAAA,EACT;AAEA,MAAI,SAAS,CAAC,MAAM,qBAAqB;AACvC,WAAO,kBAAkB;AAAA,MACvB,UAAU;AAAA,MACV;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO;AACT;AAEO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AACF,GAGG;AA3GH;AA6GE,QAAM,aACJ,WAAW,SAAS,WAAW,aAC3B,iBAAiB,WAAW,MAAM,KAAK,IACvC;AACN,QAAM,aAAa,aACf;AAAA,IACE,OAAO;AAAA,EACT,IACA;AAEJ,QAAM,gBAAe,sBAAW,iBAAX,mBAAyB,kBAAzB,mBAAwC;AAC7D,QAAM,UAAS,gBAAW,iBAAX,mBAAyB;AACxC,QAAM,cAAc,UAAU,gBAAgB,WAAW;AAEzD,MAAI,iBACF;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,WAAW,aAAa;AAAA,MACtC,OAAO;AAAA,MAEN;AAAA;AAAA,EACH;AAGF,MAAI,aAAa;AACf,qBACE,oBAAC,UAAK,WAAW,KAAK,6CACnB,0BACH;AAAA,EAEJ;AAEA,SAAO;AACT;",
+  "mappings": "AA6BQ;AA7BR,SAAS,aAAa;AACtB,SAAgB,UAAU,cAAc,gBAAgB,eAAe;AAEvE,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AAEpC,SAAS,oBAAoB;AAC7B,SAA+B,4BAA4B;AAE3D,SAAS,kBAAkB;AAEpB,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM,SAAS;AACjB,WAAO,MAAM;AAAA,EACf;AAEA,QAAM,SAAS,CAAC,CAAC,MAAM,SAAS;AAChC,QAAM,aAAa,qBAAqB,OAAO,MAAM;AAErD,MAAI,WAAW,MAAM,qBAAqB,IACtC,SAAS;AAAA,IAAI,MAAM;AAAA,IAAU,CAAC,UAC5B,aAAa,OAAO,EAAE,CAAC,oBAAoB,GAAG,KAAK,CAAC;AAAA,EACtD,IACA,MAAM;AAEV,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,MAAM,UAAU,aAAa;AAC/B,iBACE,oBAAC,cAAW,YAAwB,YAAY,OAC7C,UACH;AAAA,IAEJ;AAAA,EACF;AAEA,SAAO,kBAAkB,YAAY,UAAU,OAAO,MAAM;AAC9D;AAEO,SAAS,kBACd,YACA,UACA,OAMA,SAAS,OACT;AACA,QAAM,EAAE,cAAc,WAAW,IAAI;AACrC,QAAM,EAAE,SAAS,eAAe,IAAI;AACpC,QAAM,gBAAgB,aAAa,KAAK;AACxC,MAAI,YAAY;AACd,kBAAc,UAAU;AAAA,EAC1B;AAEA,QAAM,gCACJ,cAAc,cAAc,WAAW,kBAAkB;AAE3D,QAAM,eAAe,QAAQ,MAAM,UAAU,CAAC,QAAQ,CAAC;AAEvD,MAAI,CAAC,+BAA+B;AAClC,WAAO;AAAA,EACT;AAKA,MAAI,WAAW,cAAc;AAC3B,QAAI,OAAO,SAAS,QAAQ,QAAQ;AACpC,WAAO,KAAK,IAAI,CAAC,UAAU;AACzB,aAAO,eAAe,KAAK,IACvB;AAAA,QACE;AAAA,QACA;AAAA,QACA,oBAAC,SAAM,MAAM,aAAa,MAAM,YAC5B,gBAAc,MAAM,UACxB;AAAA,MACF,IACA;AAAA,IACN,CAAC;AAAA,EACH;AAEA,QAAM,sBACJ,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,cAClC,wBACH;AAGF,MAAI,mBAAmB,OAAO;AAC5B,WAAO;AAAA,EACT;AAEA,MAAI,SAAS,CAAC,MAAM,qBAAqB;AACvC,WAAO,kBAAkB;AAAA,MACvB,UAAU;AAAA,MACV;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO;AACT;AAEO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AACF,GAGG;AA9GH;AAgHE,QAAM,aACJ,WAAW,SAAS,WAAW,aAC3B,iBAAiB,WAAW,MAAM,KAAK,IACvC;AACN,QAAM,aAAa,aACf;AAAA,IACE,OAAO;AAAA,EACT,IACA;AAEJ,QAAM,gBAAe,sBAAW,iBAAX,mBAAyB,kBAAzB,mBAAwC;AAC7D,QAAM,UAAS,gBAAW,iBAAX,mBAAyB;AACxC,QAAM,cAAc,UAAU,gBAAgB,WAAW;AAEzD,MAAI,iBACF;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,WAAW,aAAa;AAAA,MACtC,OAAO;AAAA,MAEN;AAAA;AAAA,EACH;AAGF,MAAI,aAAa;AACf,qBACE,oBAAC,UAAK,WAAW,KAAK,6CACnB,0BACH;AAAA,EAEJ;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/views/View.js

@@ -1,6 +1,8 @@
+import { validStyles } from "@tamagui/helpers";
 import { createComponent } from "../createComponent";
 const View = createComponent({
-  acceptsClassName: true
+  acceptsClassName: true,
+  validStyles
 });
 export {
   View

package/dist/esm/views/View.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/views/View.tsx"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAGzB,MAAM,OAAO,gBAA4D;AAAA,EAC9E,kBAAkB;AACpB,CAAC;",
+  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,SAAS,uBAAuB;AAGzB,MAAM,OAAO,gBAA4D;AAAA,EAC9E,kBAAkB;AAAA,EAClB;AACF,CAAC;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.39.6",
+  "version": "1.39.8",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,19 +27,19 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "1.39.6",
-    "@tamagui/constants": "1.39.6",
-    "@tamagui/helpers": "1.39.6",
-    "@tamagui/normalize-css-color": "1.39.6",
-    "@tamagui/use-did-finish-ssr": "1.39.6",
-    "@tamagui/use-event": "1.39.6",
-    "@tamagui/use-force-update": "1.39.6"
+    "@tamagui/compose-refs": "1.39.8",
+    "@tamagui/constants": "1.39.8",
+    "@tamagui/helpers": "1.39.8",
+    "@tamagui/normalize-css-color": "1.39.8",
+    "@tamagui/use-did-finish-ssr": "1.39.8",
+    "@tamagui/use-event": "1.39.8",
+    "@tamagui/use-force-update": "1.39.8"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.39.6",
+    "@tamagui/build": "1.39.8",
     "@testing-library/react": "^13.4.0",
     "csstype": "^3.0.10",
     "react": "^18.2.0",

package/src/createComponent.tsx

@@ -6,7 +6,7 @@ import {
   isWeb,
   useIsomorphicLayoutEffect,
 } from '@tamagui/constants'
-import { stylePropsView, validStyles } from '@tamagui/helpers'
+import { validStyles } from '@tamagui/helpers'
 import React, {
   Children,
   Fragment,
@@ -25,9 +25,9 @@ import { stackDefaultStyles } from './constants/constants'
 import { FontLanguageContext } from './contexts/FontLanguageContext'
 import { TextAncestorContext } from './contexts/TextAncestorContext'
 import { didGetVariableValue, setDidGetVariableValue } from './createVariable'
-import { extendStaticConfig, parseStaticConfig } from './helpers/extendStaticConfig'
 import { useSplitStyles } from './helpers/getSplitStyles'
 import { mergeProps } from './helpers/mergeProps'
+import { parseStaticConfig } from './helpers/parseStaticConfig'
 import { proxyThemeVariables } from './helpers/proxyThemeVariables'
 import { themeable } from './helpers/themeable'
 import { useShallowSetState } from './helpers/useShallowSetState'
@@ -43,7 +43,6 @@ import {
   SpacerProps,
   StaticConfig,
   StaticConfigParsed,
-  StylableComponent,
   TamaguiComponent,
   TamaguiComponentEvents,
   TamaguiComponentState,
@@ -121,19 +120,26 @@ export function createComponent<
   ComponentPropTypes extends Object = {},
   Ref = TamaguiElement,
   BaseProps = never
->(
-  staticConfigIn: Partial<StaticConfig> | StaticConfigParsed,
-  ParentComponent?: StylableComponent
-) {
-  const staticConfig = (() => {
-    const next = extendStaticConfig(staticConfigIn, ParentComponent)
-
-    if ('parsed' in next) {
-      return next
-    } else {
-      return parseStaticConfig(next)
+>(staticConfigIn: Partial<StaticConfig> | StaticConfigParsed) {
+  const staticConfig = parseStaticConfig(staticConfigIn)
+
+  onConfiguredOnce((conf) => {
+    // one time only setup
+    if (!tamaguiConfig) {
+      tamaguiConfig = conf
+
+      if (!initialTheme) {
+        const next = conf.themes[Object.keys(conf.themes)[0]]
+        initialTheme = proxyThemeVariables(next)
+        if (process.env.NODE_ENV === 'development') {
+          if (!initialTheme) {
+            // rome-ignore lint/nursery/noConsoleLog: <explanation>
+            console.log('Warning: Missing theme')
+          }
+        }
+      }
     }
-  })()
+  })
 
   const {
     Component,
@@ -145,10 +151,19 @@ export function createComponent<
   } = staticConfig
 
   const defaultComponentClassName = `is_${staticConfig.componentName}`
-  let defaultProps: any
-  let defaultTag: string | undefined
+  const defaultProps = staticConfig.defaultProps
+
+  if (process.env.NODE_ENV === 'development' && staticConfigIn.defaultProps?.['debug']) {
+    if (process.env.IS_STATIC !== 'is_static') {
+      // rome-ignore lint/nursery/noConsoleLog: <explanation>
+      console.log(`🐛 [${staticConfig.componentName || 'Component'}]`, {
+        staticConfig,
+        defaultProps,
+        defaultPropsKeyOrder: Object.keys(defaultProps),
+      })
+    }
+  }
 
-  // see onConfiguredOnce below which attaches a name then to this component
   const component = forwardRef<Ref, ComponentPropTypes>((propsIn: any, forwardedRef) => {
     if (process.env.TAMAGUI_TARGET === 'native') {
       // todo this could be moved to a cleaner location
@@ -302,11 +317,7 @@ export function createComponent<
 
     const isTaggable = !Component || typeof Component === 'string'
     // default to tag, fallback to component (when both strings)
-    const element = isWeb
-      ? isTaggable
-        ? props.tag || defaultTag || Component
-        : Component
-      : Component
+    const element = isWeb ? (isTaggable ? props.tag || Component : Component) : Component
 
     const BaseTextComponent = BaseText || element || 'span'
     const BaseViewComponent = BaseView || element || (hasTextAncestor ? 'span' : 'div')
@@ -927,93 +938,22 @@ export function createComponent<
     component.displayName = staticConfig.componentName
   }
 
-  onConfiguredOnce((conf) => {
-    // one time only setup
-    if (!tamaguiConfig) {
-      tamaguiConfig = conf
-
-      if (!initialTheme) {
-        const next = conf.themes[Object.keys(conf.themes)[0]]
-        initialTheme = proxyThemeVariables(next)
-        if (process.env.NODE_ENV === 'development') {
-          if (!initialTheme) {
-            // rome-ignore lint/nursery/noConsoleLog: <explanation>
-            console.log('Warning: Missing theme')
-          }
-        }
-      }
-    }
-
-    // HOC doesn't use defaultProps those already come in below
-    let defaultPropsIn = staticConfig.defaultProps || {}
-
-    // because we run createTamagui after styled() defs, have to do some work here
-    // gather defaults props one time and merge downwards
-    // find last unprocessed and process
-    const parentNames = [...(staticConfig.parentNames || []), staticConfig.componentName]
-
-    if (tamaguiConfig.defaultProps && parentNames && staticConfig.componentName) {
-      defaultPropsIn = mergeConfigDefaultProps(
-        staticConfig.componentName,
-        defaultPropsIn,
-        tamaguiConfig.defaultProps,
-        parentNames,
-        tamaguiConfig
-      )
-    }
-
-    const debug = defaultPropsIn['debug']
-
-    if (defaultPropsIn.tag) {
-      defaultTag = defaultPropsIn.tag
-    }
-
-    const { name, variants, defaultVariants, ...restProps } = defaultPropsIn
-
-    defaultProps = restProps
-
-    if (staticConfig.isText && !defaultProps.fontFamily && conf.defaultFont) {
-      defaultProps.fontFamily = `$${conf.defaultFont}`
-    }
-
-    // add debug logs
-    if (process.env.NODE_ENV === 'development' && debug) {
-      if (process.env.IS_STATIC !== 'is_static') {
-        // rome-ignore lint/nursery/noConsoleLog: <explanation>
-        console.log(`🐛 [${staticConfig.componentName || 'Component'}]`, {
-          staticConfig,
-          defaultPropsIn,
-          defaultProps,
-          defaultPropsKeyOrder: Object.keys(defaultProps),
-          defaultTag,
-        })
-      }
-    }
-  })
-
   type ComponentType = TamaguiComponent<ComponentPropTypes, Ref, BaseProps, {}>
 
   let res: ComponentType = component as any
 
-  if (staticConfigIn.memo) {
+  if (staticConfig.memo) {
     res = memo(res) as any
   }
 
-  // is this necessary?
-  res.staticConfig = {
-    validStyles: staticConfig.validStyles || stylePropsView,
-    ...staticConfig,
-  }
+  res.staticConfig = staticConfig
 
   function extendStyledConfig() {
-    return extendStaticConfig(
-      {
-        ...staticConfig,
-        neverFlatten: true,
-        isHOC: true,
-      },
-      res
-    )
+    return {
+      ...staticConfig,
+      neverFlatten: true,
+      isHOC: true,
+    }
   }
 
   function extractable(Component: any) {
@@ -1228,43 +1168,6 @@ function isUnspaced(child: React.ReactNode) {
 
 const DefaultProps = new Map()
 
-function mergeConfigDefaultProps(
-  name: string,
-  props: Record<string, any>,
-  configDefaults: Record<string, Object>,
-  parentNames: (string | undefined)[],
-  conf: TamaguiInternalConfig
-) {
-  const len = parentNames.length
-  let prev
-
-  for (let i = 0; i < len; i++) {
-    const n = parentNames[i]
-    if (!n) continue
-    if (DefaultProps.has(n)) {
-      prev = DefaultProps.get(n)
-      continue
-    }
-    const props = configDefaults[n]
-    if (!props) {
-      if (prev) {
-        DefaultProps.set(n, prev)
-      }
-      continue
-    }
-    prev = mergeProps(prev || {}, props, false, conf.inverseShorthands)[0]
-    DefaultProps.set(n, prev)
-  }
-
-  // overwrite the user defined defaults on top of internal defined defaults
-  const ourDefaultsMerged = DefaultProps.get(name)
-  if (ourDefaultsMerged) {
-    return mergeProps(props, ourDefaultsMerged, false, conf.inverseShorthands)[0]
-  }
-
-  return props
-}
-
 const AbsoluteFill: any = createComponent({
   defaultProps: {
     ...stackDefaultStyles,

package/src/helpers/getThemeCSSRules.ts

@@ -104,7 +104,7 @@ export function getThemeCSSRules({
     }
   }
 
-  const selectors = [...selectorsSet]
+  const selectors = [...selectorsSet].sort((a, b) => a.localeCompare(b))
 
   // only do our :root attach if it's not light/dark - not support sub themes on root saves a lot of effort/size
   // this isBaseTheme logic could probably be done more efficiently above

package/src/helpers/mergeVariants.ts

@@ -0,0 +1,59 @@
+import type { GenericVariantDefinitions } from '../types'
+
+// deep merge variants
+// except for functions which override any parents
+
+export const mergeVariants = (
+  parentVariants: GenericVariantDefinitions,
+  ourVariants: GenericVariantDefinitions
+) => {
+  const variants = {}
+
+  for (const key in ourVariants) {
+    const parentVariant = parentVariants?.[key]
+    const ourVariant = ourVariants[key]
+
+    // do some early checks to avoid bad merges
+    if (!parentVariant || typeof ourVariant === 'function') {
+      variants[key] = ourVariant
+      continue
+    }
+
+    // do some early checks to avoid bad merges
+    if (parentVariant && !ourVariant) {
+      variants[key] = parentVariant[key]
+      continue
+    }
+
+    variants[key] = {}
+
+    for (const subKey in ourVariant) {
+      const val = ourVariant[subKey]
+      const parentVal = parentVariant?.[subKey]
+      if (typeof val === 'function') {
+        variants[key][subKey] = val
+      } else if (!parentVal || typeof parentVal === 'function') {
+        variants[key][subKey] = val
+      } else {
+        variants[key][subKey] = {
+          // keep order
+          ...parentVal,
+          ...val,
+        }
+      }
+    }
+
+    // merge parent variant keys that are superset
+    if (parentVariant) {
+      variants[key] = {
+        ...parentVariant,
+        ...variants[key],
+      }
+    }
+  }
+
+  return {
+    ...parentVariants,
+    ...variants,
+  }
+}

package/src/helpers/parseStaticConfig.ts

@@ -0,0 +1,14 @@
+import type { StaticConfig, StaticConfigParsed } from '../types'
+import { createPropMapper } from './createPropMapper'
+
+export const parseStaticConfig = (config: Partial<StaticConfig>): StaticConfigParsed => {
+  const parsed = {
+    defaultProps: {},
+    ...config,
+    parsed: true,
+  } as const
+  return {
+    ...parsed,
+    propMapper: createPropMapper(parsed as StaticConfigParsed),
+  }
+}

package/src/index.ts

@@ -16,7 +16,6 @@ export {
   getConfig,
   getThemes,
   getTokens,
-  onConfiguredOnce,
   updateConfig,
   getToken,
   getTokenValue,

package/src/styled.tsx

@@ -2,7 +2,7 @@ import { stylePropsAll } from '@tamagui/helpers'
 
 import { createComponent } from './createComponent'
 import { StyledContext } from './helpers/createStyledContext'
-import { mergeVariants } from './helpers/extendStaticConfig'
+import { mergeVariants } from './helpers/mergeVariants'
 import { getReactNativeConfig } from './setupReactNative'
 import type {
   GetProps,
@@ -13,7 +13,6 @@ import type {
   StaticConfig,
   StylableComponent,
   TamaguiComponent,
-  TamaguiElement,
   VariantDefinitions,
   VariantSpreadFunction,
 } from './types'
@@ -74,8 +73,7 @@ export function styled<
     }
   }
 
-  const parentStaticConfig =
-    'staticConfig' in ComponentIn ? (ComponentIn.staticConfig as StaticConfig) : null
+  const parentStaticConfig = ComponentIn['staticConfig'] as StaticConfig | undefined
 
   const isPlainStyledComponent =
     !!parentStaticConfig &&
@@ -113,6 +111,10 @@ export function styled<
             ...defaultVariants,
           }
         }
+
+        if (parentStaticConfig.variants) {
+          variants = mergeVariants(parentStaticConfig.variants, variants)
+        }
       }
 
       if (defaultVariants) {
@@ -123,8 +125,6 @@ export function styled<
       }
 
       if (parentStaticConfig?.isHOC) {
-        variants = mergeVariants(parentStaticConfig.variants, variants)
-
         // if HOC we map name => componentName as we have a difference in how we name prop vs styled() there
         if (name) {
           // @ts-ignore
@@ -135,13 +135,22 @@ export function styled<
       const isText = Boolean(
         staticExtractionOptions?.isText || parentStaticConfig?.isText
       )
+
       const acceptsClassName =
         acceptsClassNameProp ??
         (isPlainStyledComponent ||
           isReactNative ||
           (parentStaticConfig?.isHOC && parentStaticConfig?.acceptsClassName))
 
+      if (process.env.NODE_ENV === 'development') {
+        // dont inherit the debug prop so we can debug specific styled() more accurately
+        if (parentStaticConfig?.defaultProps?.debug && !options.debug) {
+          delete defaultProps.debug
+        }
+      }
+
       const conf: Partial<StaticConfig> = {
+        ...parentStaticConfig,
         ...staticExtractionOptions,
         ...(!isPlainStyledComponent && {
           Component,
@@ -169,7 +178,7 @@ export function styled<
     }
   })()
 
-  const component = createComponent(staticConfigProps || {}, Component)
+  const component = createComponent(staticConfigProps || {})
 
   // get parent props without pseudos and medias so we can rebuild both with new variants
   // get parent props without pseudos and medias so we can rebuild both with new variants

package/src/types.tsx

@@ -28,9 +28,7 @@ import type {
 import type { Variable } from './createVariable'
 import type { ResolveVariableTypes } from './helpers/createPropMapper'
 import { StyledContext } from './helpers/createStyledContext'
-import { styled } from './styled'
 import type { FontLanguageProps, LanguageContextType } from './views/FontLanguage.types'
-import { Text } from './views/Text'
 import type { ThemeProviderProps } from './views/ThemeProvider'
 
 export type { MediaStyleObject, StyleObject } from '@tamagui/helpers'
@@ -2080,7 +2078,7 @@ type FillInFontValues<
 export type GetRef<C> = C extends TamaguiComponent<any, infer Ref>
   ? Ref
   : C extends new (props: any) => Component
-  ? C
+  ? InstanceType<C>
   : C extends abstract new (...args: any) => any
   ? InstanceType<C>
   : C extends Component

package/src/views/Stack.tsx

@@ -1,3 +1,5 @@
+import { validStyles } from '@tamagui/helpers'
+
 import { stackDefaultStyles } from '../constants/constants'
 import { createComponent } from '../createComponent'
 import type { StackProps, StackPropsBase, TamaguiElement } from '../types'
@@ -8,6 +10,7 @@ export const Stack = createComponent<StackProps, TamaguiElement, StackPropsBase>
     ...stackDefaultStyles,
     flexDirection: 'column',
   },
+  validStyles,
 })
 
 // test types

package/src/views/Text.tsx

@@ -1,4 +1,4 @@
-import { stylePropsTextOnly, validStyles } from '@tamagui/helpers'
+import { stylePropsText, stylePropsTextOnly, validStyles } from '@tamagui/helpers'
 
 import { createComponent } from '../createComponent'
 import { TamaguiTextElement, TextProps, TextPropsBase } from '../types'

package/src/views/Theme.tsx

@@ -1,8 +1,9 @@
 import { isWeb } from '@tamagui/constants'
-import React, { Children, cloneElement, isValidElement } from 'react'
+import React, { Children, cloneElement, isValidElement, useMemo } from 'react'
 
 import { variableToString } from '../createVariable'
 import { ThemeManagerContext } from '../helpers/ThemeManagerContext'
+import { useMemoDebug } from '../hooks/useMemoDebug'
 import { useServerRef } from '../hooks/useServerHooks'
 import { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme'
 import type { DebugProp, ThemeProps } from '../types'
@@ -57,8 +58,10 @@ export function useThemedChildren(
   const shouldRenderChildrenWithTheme =
     isNewTheme || hasEverThemed.current || forceClassName || isRoot
 
+  const childrenMemo = useMemo(() => children, [children])
+
   if (!shouldRenderChildrenWithTheme) {
-    return children
+    return childrenMemo
   }
 
   // be sure to memoize shouldReset to avoid reparenting
@@ -81,7 +84,7 @@ export function useThemedChildren(
 
   const elementsWithContext = (
     <ThemeManagerContext.Provider value={themeManager}>
-      {children}
+      {childrenMemo}
     </ThemeManagerContext.Provider>
   )
 

package/src/views/View.tsx

@@ -1,6 +1,9 @@
+import { validStyles } from '@tamagui/helpers'
+
 import { createComponent } from '../createComponent'
 import type { StackProps, StackPropsBase, TamaguiElement } from '../types'
 
 export const View = createComponent<StackProps, TamaguiElement, StackPropsBase>({
   acceptsClassName: true,
+  validStyles,
 })

package/types/createComponent.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { DebugProp, SpaceDirection, SpaceValue, SpacerProps, StaticConfig, StaticConfigParsed, StylableComponent, TamaguiComponent, TamaguiComponentState, TamaguiElement } from './types';
+import { DebugProp, SpaceDirection, SpaceValue, SpacerProps, StaticConfig, StaticConfigParsed, TamaguiComponent, TamaguiComponentState, TamaguiElement } from './types';
 export declare const defaultComponentState: TamaguiComponentState;
 export declare const mouseUps: Set<Function>;
-export declare function createComponent<ComponentPropTypes extends Object = {}, Ref = TamaguiElement, BaseProps = never>(staticConfigIn: Partial<StaticConfig> | StaticConfigParsed, ParentComponent?: StylableComponent): TamaguiComponent<ComponentPropTypes, Ref, BaseProps, {}>;
+export declare function createComponent<ComponentPropTypes extends Object = {}, Ref = TamaguiElement, BaseProps = never>(staticConfigIn: Partial<StaticConfig> | StaticConfigParsed): TamaguiComponent<ComponentPropTypes, Ref, BaseProps, {}>;
 export declare const Unspaced: {
     (props: {
         children?: any;

package/types/createComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AASA,OAAO,KAWN,MAAM,OAAO,CAAA;AAkBd,OAAO,EACL,SAAS,EACT,cAAc,EACd,UAAU,EACV,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAEhB,qBAAqB,EACrB,cAAc,EAIf,MAAM,SAAS,CAAA;AAoBhB,eAAO,MAAM,qBAAqB,EAAE,qBAMnC,CAAA;AAmBD,eAAO,MAAM,QAAQ,eAAsB,CAAA;AAqB3C,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,GAAG,EAAE,EACtC,GAAG,GAAG,cAAc,EACpB,SAAS,GAAG,KAAK,EAEjB,cAAc,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,kBAAkB,EAC1D,eAAe,CAAC,EAAE,iBAAiB,4DAo5BpC;AAGD,eAAO,MAAM,QAAQ;YAAW;QAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;KAAE;;CAAmB,CAAA;AAMrE,eAAO,MAAM,MAAM,0DA8CjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBAkGxD"}
+{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AASA,OAAO,KAWN,MAAM,OAAO,CAAA;AAkBd,OAAO,EACL,SAAS,EACT,cAAc,EACd,UAAU,EACV,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAEhB,qBAAqB,EACrB,cAAc,EAIf,MAAM,SAAS,CAAA;AAoBhB,eAAO,MAAM,qBAAqB,EAAE,qBAMnC,CAAA;AAmBD,eAAO,MAAM,QAAQ,eAAsB,CAAA;AAqB3C,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,GAAG,EAAE,EACtC,GAAG,GAAG,cAAc,EACpB,SAAS,GAAG,KAAK,EACjB,cAAc,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,kBAAkB,4DA21B3D;AAGD,eAAO,MAAM,QAAQ;YAAW;QAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;KAAE;;CAAmB,CAAA;AAMrE,eAAO,MAAM,MAAM,0DA8CjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBAkGxD"}

package/types/helpers/extendStaticConfig.d.ts

@@ -2,9 +2,9 @@ import type { GenericVariantDefinitions, StaticConfig, StaticConfigParsed, Styla
 export declare function extendStaticConfig(config: Partial<StaticConfig>, parent?: StylableComponent): StaticConfigParsed;
 export declare const mergeVariants: (parentVariants?: GenericVariantDefinitions, ourVariants?: GenericVariantDefinitions) => {
     [x: string]: {
-        [key: string]: ((a: any, b: any) => any) | {
+        [key: string]: {
             [key: string]: any;
-        };
+        } | ((a: any, b: any) => any);
     };
 };
 export declare const parseStaticConfig: (config: Partial<StaticConfig>) => StaticConfigParsed;

package/types/helpers/mergeVariants.d.ts

@@ -0,0 +1,3 @@
+import type { GenericVariantDefinitions } from '../types';
+export declare const mergeVariants: (parentVariants: GenericVariantDefinitions, ourVariants: GenericVariantDefinitions) => {};
+//# sourceMappingURL=mergeVariants.d.ts.map

package/types/helpers/mergeVariants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mergeVariants.d.ts","sourceRoot":"","sources":["../../src/helpers/mergeVariants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAA;AAKzD,eAAO,MAAM,aAAa,mBACR,yBAAyB,eAC5B,yBAAyB,OAmDvC,CAAA"}

package/types/helpers/parseStaticConfig.d.ts

@@ -0,0 +1,3 @@
+import type { StaticConfig, StaticConfigParsed } from '../types';
+export declare const parseStaticConfig: (config: Partial<StaticConfig>) => StaticConfigParsed;
+//# sourceMappingURL=parseStaticConfig.d.ts.map