tamagui 1.74.15 → 1.74.17

package/dist/native.js

@@ -1510,6 +1510,7 @@ var require_createShallowSetState_native = __commonJS({
     }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), createShallowSetState_exports = {};
     __export2(createShallowSetState_exports, {
       createShallowSetState: () => createShallowSetState,
+      isEqualShallow: () => isEqualShallow,
       mergeIfNotShallowEqual: () => mergeIfNotShallowEqual
     });
     module2.exports = __toCommonJS2(createShallowSetState_exports);
@@ -1517,10 +1518,13 @@ var require_createShallowSetState_native = __commonJS({
       return (next) => setter((prev) => mergeIfNotShallowEqual(prev, next));
     }
     function mergeIfNotShallowEqual(prev, next) {
+      return isEqualShallow(prev, next) ? prev : { ...prev, ...next };
+    }
+    function isEqualShallow(prev, next) {
       for (let key in next)
         if (prev[key] !== next[key])
-          return { ...prev, ...next };
-      return prev;
+          return !1;
+      return !0;
     }
   }
 });
@@ -3387,7 +3391,7 @@ var require_ThemeManager_native = __commonJS({
     __export2(ThemeManager_exports, {
       ThemeManager: () => ThemeManager,
       getHasThemeUpdatingProps: () => getHasThemeUpdatingProps,
-      getNonComponentParentManager: () => getNonComponentParentManager
+      getManagers: () => getManagers
     });
     module2.exports = __toCommonJS2(ThemeManager_exports);
     var import_constants = require_index_native2(), import_config = require_config_native(), import_constants2 = require_constants_native2(), emptyState = { name: "" };
@@ -3395,17 +3399,17 @@ var require_ThemeManager_native = __commonJS({
       return props.name || props.componentName || props.inverse || props.reset;
     }
     var uid = 0, ThemeManager = class {
-      constructor(props = {}, parentManagerIn) {
-        if (this.props = props, this.id = uid++, this.isComponent = !1, this.themeListeners = /* @__PURE__ */ new Set(), this.parentManager = null, this.state = emptyState, this.scheme = null, this._allKeys = null, parentManagerIn === "root") {
+      constructor(props = {}, parentManager) {
+        if (this.props = props, this.id = uid++, this.themeListeners = /* @__PURE__ */ new Set(), this.parentManager = null, this.state = emptyState, this._allKeys = null, parentManager === "root") {
           this.updateStateFromProps(props, !1);
           return;
         }
-        if (!parentManagerIn)
+        if (!parentManager)
           throw process.env.NODE_ENV !== "production" ? new Error(
             "No parent manager given, this is likely due to duplicated Tamagui dependencies. Check your lockfile for mis-matched versions. It could also be from an error somewhere else in your stack causing Tamagui to recieve undefined context, you can try putting some ErrorBoundary components around other areas of your app, or a Suspense boundary."
           ) : "\u274C 0";
-        if (this.parentManager = parentManagerIn, !this.updateStateFromProps(props, !1))
-          return parentManagerIn || this;
+        if (this.parentManager = parentManager, !this.updateStateFromProps(props, !1))
+          return parentManager;
       }
       updateStateFromProps(props = this.props || {}, shouldNotify = !0) {
         if (this.props = props, props.forceTheme)
@@ -3415,9 +3419,7 @@ var require_ThemeManager_native = __commonJS({
           return this.updateState(nextState, shouldNotify), nextState;
       }
       updateState(nextState, shouldNotify = !0) {
-        this.state = nextState;
-        let names = this.state.name.split("_"), lastName = names[names.length - 1][0];
-        this.isComponent = lastName[0] === lastName[0].toUpperCase(), this._allKeys = null, this.scheme = names[0] === "light" ? "light" : names[0] === "dark" ? "dark" : null, process.env.NODE_ENV === "development" && (this._numChangeEventsSent ??= 0, this._numChangeEventsSent++), shouldNotify && queueMicrotask(() => {
+        this.state = nextState, this._allKeys = null, process.env.NODE_ENV !== "production" && (this._numChangeEventsSent ??= 0, this._numChangeEventsSent++), shouldNotify && queueMicrotask(() => {
           this.notify();
         });
       }
@@ -3445,51 +3447,37 @@ var require_ThemeManager_native = __commonJS({
         this.themeListeners.forEach((cb) => cb(this.state.name, this, forced));
       }
       onChangeTheme(cb, debugId) {
-        return process.env.NODE_ENV === "development" && debugId && (this._listeningIds ??= /* @__PURE__ */ new Set(), this._listeningIds.add(debugId)), this.themeListeners.add(cb), () => {
+        return process.env.NODE_ENV !== "production" && debugId && (this._listeningIds ??= /* @__PURE__ */ new Set(), this._listeningIds.add(debugId)), this.themeListeners.add(cb), () => {
           this.themeListeners.delete(cb);
         };
       }
     };
-    function getNextThemeClassName(name) {
-      return `t_sub_theme ${import_constants2.THEME_CLASSNAME_PREFIX}${name}`.replace("light_", "").replace("dark_", "");
-    }
-    function getState(props, parentManager) {
-      var _a, _b, _c, _d, _e, _f;
-      let validManagerAndAllComponentThemes = getNonComponentParentManager(parentManager);
-      parentManager = validManagerAndAllComponentThemes[0];
-      let allComponentThemes = validManagerAndAllComponentThemes[1], themes = (0, import_config.getThemes)(), isDirectParentAComponentTheme = allComponentThemes.length > 0;
+    function getState(props, manager) {
+      var _a;
       if (props.name && props.reset)
-        throw new Error("Cannot reset + set new name");
-      if (!props.name && !props.inverse && !props.reset && !props.componentName)
+        throw new Error(
+          process.env.NODE_ENV === "production" ? "\u274C004" : "Cannot reset and set a new name at the same time."
+        );
+      if (!getHasThemeUpdatingProps(props))
         return null;
-      if (props.reset && !isDirectParentAComponentTheme && !(parentManager != null && parentManager.parentManager))
-        return process.env.NODE_ENV === "development" && console.warn("Cannot reset no grandparent exists"), null;
-      let result = null, nextName = props.reset ? isDirectParentAComponentTheme ? ((_a = parentManager == null ? void 0 : parentManager.state) == null ? void 0 : _a.name) || "" : ((_c = (_b = parentManager == null ? void 0 : parentManager.parentManager) == null ? void 0 : _b.state) == null ? void 0 : _c.name) || "" : props.name || "", { componentName } = props, parentName = props.reset ? isDirectParentAComponentTheme ? (
-        // here because parentManager already skipped componentTheme so we have to only go up once
-        ((_d = parentManager == null ? void 0 : parentManager.parentManager) == null ? void 0 : _d.state.name) || ""
-      ) : ((_f = (_e = parentManager == null ? void 0 : parentManager.parentManager) == null ? void 0 : _e.parentManager) == null ? void 0 : _f.state.name) || "" : isDirectParentAComponentTheme ? allComponentThemes[0] || "" : (parentManager == null ? void 0 : parentManager.state.name) || "";
-      props.reset && isDirectParentAComponentTheme && allComponentThemes.shift();
-      let base = parentName.split(import_constants2.THEME_NAME_SEPARATOR), lastSegment = base[base.length - 1], isParentComponentTheme = parentName && lastSegment[0].toUpperCase() === lastSegment[0];
-      isParentComponentTheme && base.pop();
-      let parentBaseTheme = isParentComponentTheme ? base.slice(0, base.length).join(import_constants2.THEME_NAME_SEPARATOR) : parentName, max2 = base.length, min2 = componentName && !nextName ? max2 : 0;
-      process.env.NODE_ENV === "development" && typeof props.debug == "string" && (console.groupCollapsed("ThemeManager.getState()"), console.info({
-        props,
-        parentName,
-        parentBaseTheme,
-        base,
-        min: min2,
-        max: max2,
-        isParentComponentTheme
-      }));
+      let themes = (0, import_config.getThemes)(), [allManagers, componentManagers] = getManagers(manager), isDirectParentAComponentTheme = !!(manager != null && manager.state.isComponent), startIndex = props.reset && !isDirectParentAComponentTheme ? 1 : 0, baseManager = allManagers[startIndex], parentManager = allManagers[startIndex + 1];
+      if (!baseManager && props.reset)
+        return process.env.NODE_ENV !== "production" && console.warn("Cannot reset, no parent theme exists"), null;
+      let { componentName } = props, result = null, baseName = (baseManager == null ? void 0 : baseManager.state.name) || "";
+      baseManager != null && baseManager.state.isComponent && (baseName = baseName.replace(/_[A-Z][a-z]+/, ""));
+      let nextName = props.reset ? baseName : props.name || "", allComponentThemes = componentManagers.map((x) => (x == null ? void 0 : x.state.name) || "");
+      isDirectParentAComponentTheme && allComponentThemes.shift();
+      let base = baseName.split(import_constants2.THEME_NAME_SEPARATOR), max2 = base.length, min2 = props.componentName && !nextName ? max2 : 0;
+      process.env.NODE_ENV !== "production" && typeof props.debug == "string" && (console.groupCollapsed("ThemeManager.getState()"), console.info({ props, baseName, base, min: min2, max: max2 }));
       for (let i = max2; i >= min2; i--) {
         let prefix = base.slice(0, i).join(import_constants2.THEME_NAME_SEPARATOR);
         props.inverse && (prefix = inverseThemeName(prefix));
         let potentials = [];
-        if (prefix && prefix !== parentBaseTheme && potentials.push(prefix), nextName && potentials.unshift(prefix ? `${prefix}_${nextName}` : nextName), i === 1) {
-          let lastSegment2 = potentials.findIndex((x) => !x.includes("_"));
-          lastSegment2 > 0 && potentials.splice(lastSegment2, 0, nextName);
+        if (prefix && prefix !== baseName && potentials.push(prefix), nextName && potentials.unshift(prefix ? `${prefix}_${nextName}` : nextName), i === 1) {
+          let lastSegment = potentials.findIndex((x) => !x.includes("_"));
+          lastSegment > 0 && potentials.splice(lastSegment, 0, nextName);
         }
-        if (componentName) {
+        if (componentName && !props.reset) {
           let componentPotentials = [];
           if (nextName) {
             let beforeSeparator = prefix.slice(0, prefix.indexOf(import_constants2.THEME_NAME_SEPARATOR));
@@ -3507,29 +3495,27 @@ var require_ThemeManager_native = __commonJS({
           potentials = [...componentPotentials, ...potentials, ...allComponentThemes];
         }
         let found = potentials.find((t) => t in themes);
-        if (process.env.NODE_ENV === "development" && typeof props.debug == "string" && console.info(" - ", { found, potentials, parentManager }), found) {
+        if (process.env.NODE_ENV !== "production" && typeof props.debug == "string" && console.info(" - ", { found, potentials, baseManager, nextName, baseName, prefix }), found) {
+          let names = found.split("_"), [firstName, ...restNames] = names, lastName = names[names.length - 1], isComponent = lastName[0] === lastName[0].toUpperCase(), scheme = firstName === "light" ? "light" : firstName === "dark" ? "dark" : void 0, pre = import_constants2.THEME_CLASSNAME_PREFIX, className = import_constants.isWeb ? `${pre}sub_theme ${pre}${!scheme || !restNames.length ? firstName : restNames.join("_")}` : "", parentState = (_a = baseManager || parentManager) == null ? void 0 : _a.state, parentName = parentState == null ? void 0 : parentState.name;
           result = {
             name: found,
-            theme: themes[found],
-            className: import_constants.isWeb ? getNextThemeClassName(found) : "",
             parentName,
-            componentName,
-            inverse: props.inverse
+            theme: themes[found],
+            className,
+            isComponent,
+            scheme
           };
           break;
         }
       }
-      return process.env.NODE_ENV === "development" && typeof props.debug == "string" && typeof window < "u" && (console.warn("ThemeManager.getState():", {
-        result
-      }), console.trace(), console.groupEnd()), result;
+      return process.env.NODE_ENV !== "production" && typeof props.debug == "string" && typeof window < "u" && (console.warn("ThemeManager.getState():", { result }), console.trace(), console.groupEnd()), result;
     }
     var inverseThemeName = (themeName) => themeName.startsWith("light") ? themeName.replace(/^light/, "dark") : themeName.replace(/^dark/, "light");
-    function getNonComponentParentManager(themeManager) {
-      var _a;
-      let res = themeManager, componentThemeNames = [];
-      for (; res && res != null && res.isComponent; )
-        componentThemeNames.push((_a = res == null ? void 0 : res.state) == null ? void 0 : _a.name), res = res.parentManager;
-      return [res || null, componentThemeNames];
+    function getManagers(themeManager) {
+      let comp = [], all = [], cur = themeManager;
+      for (; cur; )
+        all.push(cur), cur.state.isComponent && comp.push(cur), cur = cur.parentManager;
+      return [all, comp];
     }
   }
 });
@@ -3577,7 +3563,7 @@ var require_useTheme_native = __commonJS({
       useThemeWithState: () => useThemeWithState
     });
     module2.exports = __toCommonJS2(useTheme_exports);
-    var import_constants = require_index_native2(), import_react2 = require("react"), import_config = require_config_native(), import_createVariable = require_createVariable_native(), import_createProxy = require_createProxy_native(), import_ThemeManager = require_ThemeManager_native(), import_ThemeManagerContext = require_ThemeManagerContext_native(), import_getThemeUnwrapped = require_getThemeUnwrapped_native(), emptyProps = { name: null }, cached;
+    var import_constants = require_index_native2(), import_react2 = require("react"), import_config = require_config_native(), import_createVariable = require_createVariable_native(), import_createProxy = require_createProxy_native(), import_createShallowSetState = require_createShallowSetState_native(), import_ThemeManager = require_ThemeManager_native(), import_ThemeManagerContext = require_ThemeManagerContext_native(), import_getThemeUnwrapped = require_getThemeUnwrapped_native(), emptyProps = { name: null }, cached;
     function getDefaultThemeProxied() {
       if (cached)
         return cached;
@@ -3611,7 +3597,7 @@ If this is intended and you are using Tamagui without any themes, you can disabl
       let themeProxied = (0, import_react2.useMemo)(() => !themeManager || !(state != null && state.theme) ? {} : getThemeProxied(state, props.deopt, themeManager, keys.current, props.debug), [state, themeManager, props.deopt, props.debug]);
       return process.env.NODE_ENV === "development" && props.debug === "verbose" && (console.groupCollapsed("  \u{1F539} useTheme =>", state == null ? void 0 : state.name), console.info("returning state", changedThemeState, "from props", props), console.groupEnd()), [changedThemeState, themeProxied];
     };
-    function getThemeProxied({ theme, name }, deopt = !1, themeManager, keys, debug) {
+    function getThemeProxied({ theme, name, scheme }, deopt = !1, themeManager, keys, debug) {
       if (!theme)
         return {};
       let config = (0, import_config.getConfig)();
@@ -3644,21 +3630,18 @@ If this is intended and you are using Tamagui without any themes, you can disabl
                   else if (subkey === "get")
                     return (platform) => {
                       let outVal = (0, import_createVariable.getVariable)(val);
-                      if (platform !== "web" && import_constants.isIos && !deopt && config.settings.fastSchemeChange) {
-                        let isDark = name.startsWith("dark"), isLight = !isDark && name.startsWith("light");
-                        if (isDark || isLight) {
-                          let oppositeThemeName = name.replace(
-                            isDark ? "dark" : "light",
-                            isDark ? "light" : "dark"
-                          ), oppositeTheme = config.themes[oppositeThemeName], oppositeVal = (0, import_createVariable.getVariable)(oppositeTheme == null ? void 0 : oppositeTheme[keyString]);
-                          if (oppositeVal)
-                            return {
-                              dynamic: {
-                                dark: isDark ? outVal : oppositeVal,
-                                light: isLight ? outVal : oppositeVal
-                              }
-                            };
-                        }
+                      if (platform !== "web" && import_constants.isIos && !deopt && config.settings.fastSchemeChange && !someParentIsInversed(themeManager) && scheme) {
+                        let oppositeThemeName = name.replace(
+                          scheme === "dark" ? "dark" : "light",
+                          scheme === "dark" ? "light" : "dark"
+                        ), oppositeTheme = config.themes[oppositeThemeName], oppositeVal = (0, import_createVariable.getVariable)(oppositeTheme == null ? void 0 : oppositeTheme[keyString]);
+                        if (oppositeVal)
+                          return {
+                            dynamic: {
+                              dark: scheme === "dark" ? outVal : oppositeVal,
+                              light: scheme === "light" ? outVal : oppositeVal
+                            }
+                          };
                       }
                       return track(keyString), outVal;
                     };
@@ -3670,6 +3653,19 @@ If this is intended and you are using Tamagui without any themes, you can disabl
         }
       });
     }
+    function someParentIsInversed(manager) {
+      {
+        let cur = manager;
+        for (; cur; ) {
+          if (!cur.parentManager)
+            return !0;
+          if (cur.parentManager.state.scheme !== cur.state.scheme)
+            return !1;
+          cur = cur.parentManager;
+        }
+      }
+      return !1;
+    }
     var activeThemeManagers = /* @__PURE__ */ new Set(), useChangeThemeEffect = (props, isRoot = !1, keys, shouldUpdate) => {
       let { disable } = props, parentManager = (0, import_react2.useContext)(import_ThemeManagerContext.ThemeManagerContext);
       if (!isRoot && !parentManager || disable)
@@ -3678,7 +3674,7 @@ If this is intended and you are using Tamagui without any themes, you can disabl
           state: parentManager == null ? void 0 : parentManager.state,
           themeManager: parentManager
         };
-      let [themeState, setThemeState] = (0, import_react2.useState)(createState), { state, mounted, isNewTheme, themeManager } = themeState, isInversingOnMount = !!(!themeState.mounted && props.inverse);
+      let [themeState, setThemeState] = (0, import_react2.useState)(createState), { state, mounted, isNewTheme, themeManager, inversed } = themeState, isInversingOnMount = !!(!themeState.mounted && props.inverse);
       function getShouldUpdateTheme(manager = themeManager, nextState, prevState = state, forceShouldChange = !1) {
         let forceUpdate = shouldUpdate == null ? void 0 : shouldUpdate();
         if (!manager || !forceShouldChange && forceUpdate === !1)
@@ -3691,7 +3687,10 @@ If this is intended and you are using Tamagui without any themes, you can disabl
         if (!themeManager)
           return;
         if (props.inverse && !mounted) {
-          setThemeState({ ...themeState, mounted: !0 });
+          setThemeState((prev) => createState({
+            ...prev,
+            mounted: !0
+          }));
           return;
         }
         isNewTheme && themeManager && activeThemeManagers.add(themeManager), (isNewTheme || getShouldUpdateTheme(themeManager)) && setThemeState(createState);
@@ -3725,6 +3724,7 @@ If this is intended and you are using Tamagui without any themes, you can disabl
       }), [themeManager])), isInversingOnMount)
         return {
           isNewTheme: !1,
+          inversed: !1,
           themeManager: parentManager,
           state: {
             name: "",
@@ -3735,10 +3735,10 @@ If this is intended and you are using Tamagui without any themes, you can disabl
       return {
         state,
         isNewTheme,
+        inversed,
         themeManager
       };
       function createState(prev, force = !1) {
-        var _a;
         if (prev && (shouldUpdate == null ? void 0 : shouldUpdate()) === !1)
           return prev;
         let themeManager2 = parentManager, state2;
@@ -3757,15 +3757,18 @@ If this is intended and you are using Tamagui without any themes, you can disabl
             themeManager2 = getNewThemeManager(), state2 = { ...themeManager2.state };
         }
         let isNewTheme2 = !!(themeManager2 !== parentManager || props.inverse), mounted2 = props.inverse ? isRoot || (prev == null ? void 0 : prev.mounted) : !0;
-        if (state2 || (isNewTheme2 ? state2 = themeManager2.state : (state2 = parentManager.state, themeManager2 = parentManager)), !force && (state2 == null ? void 0 : state2.name) === ((_a = prev == null ? void 0 : prev.state) == null ? void 0 : _a.name))
-          return prev;
-        let response = {
-          state: state2,
+        state2 || (isNewTheme2 ? state2 = themeManager2.state : (state2 = parentManager.state, themeManager2 = parentManager));
+        let wasInversed = prev == null ? void 0 : prev.inversed, inversed2 = isNewTheme2 && state2.scheme !== (parentManager == null ? void 0 : parentManager.state.scheme) ? !0 : wasInversed ? !1 : null, response = {
           themeManager: themeManager2,
           isNewTheme: isNewTheme2,
-          mounted: mounted2
-        };
-        if (process.env.NODE_ENV === "development" && props.debug && import_constants.isClient) {
+          mounted: mounted2,
+          inversed: inversed2
+        }, shouldReturnPrev = !force && prev && // isEqualShallow uses the second arg as the keys so this should compare without state first...
+        (0, import_createShallowSetState.isEqualShallow)(prev, response) && // ... and then compare just the state, because we make a new state obj but is likely the same
+        (0, import_createShallowSetState.isEqualShallow)(prev.state, state2);
+        if (prev && shouldReturnPrev)
+          return prev;
+        if (response.state = state2, process.env.NODE_ENV === "development" && props.debug && import_constants.isClient) {
           console.groupCollapsed(` \u{1F537} ${themeManager2.id} useChangeThemeEffect createState`);
           let parentState = { ...parentManager == null ? void 0 : parentManager.state }, parentId = parentManager == null ? void 0 : parentManager.id, themeManagerState = { ...themeManager2.state };
           console.info({
@@ -3833,9 +3836,7 @@ var require_Theme_native = __commonJS({
     )), __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), Theme_exports = {};
     __export2(Theme_exports, {
       Theme: () => Theme2,
-      getThemeCNStyle: () => getThemeCNStyle,
-      useThemedChildren: () => useThemedChildren,
-      wrapThemeElements: () => wrapThemeElements
+      useThemedChildren: () => useThemedChildren
     });
     module2.exports = __toCommonJS2(Theme_exports);
     var import_constants = require_index_native2(), import_react2 = __toESM2(require("react")), import_createVariable = require_createVariable_native(), import_ThemeManagerContext = require_ThemeManagerContext_native(), import_useTheme = require_useTheme_native(), import_ThemeDebug = require_ThemeDebug_native(), import_jsx_runtime6 = require("react/jsx-runtime"), Theme2 = (0, import_react2.forwardRef)(function(props, ref) {
@@ -3874,40 +3875,32 @@ var require_Theme_native = __commonJS({
         isRoot
       }) : elementsWithContext;
     }
-    function getThemeCNStyle(themeState, isRoot = !1) {
-      var _a, _b;
-      if (!themeState.isNewTheme)
-        return;
-      let themeColor = (_a = themeState.state) != null && _a.theme && themeState.isNewTheme ? (0, import_createVariable.variableToString)(themeState.state.theme.color) : "", style = themeColor ? {
-        color: themeColor
-      } : void 0, className = ((_b = themeState.state) == null ? void 0 : _b.className) || "";
-      return isRoot && (className = className.replace("t_sub_theme", "")), { style, className };
-    }
     function wrapThemeElements({
       children,
       themeState,
       forceClassName,
       isRoot
     }) {
-      var _a, _b;
+      var _a;
       if (isRoot && forceClassName === !1)
         return children;
-      let inverse = (_a = themeState.state) == null ? void 0 : _a.inverse;
-      if (!themeState.isNewTheme && !inverse && !forceClassName)
+      let inverse = themeState.inversed, requiresExtraWrapper = inverse != null || forceClassName;
+      if (!themeState.isNewTheme && !requiresExtraWrapper)
         return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "_dsp_contents is_Theme", children });
-      let { className, style } = getThemeCNStyle(themeState, isRoot), themedChildren = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${className} _dsp_contents is_Theme`, style, children });
-      if (inverse != null || forceClassName) {
-        let name = ((_b = themeState.state) == null ? void 0 : _b.name) || "";
-        themedChildren = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          "span",
-          {
-            className: `${name.startsWith("light") ? "t_light" : name.startsWith("dark") ? "t_dark" : ""} _dsp_contents ${inverse ? "is_inversed" : ""}`,
-            children: themedChildren
-          }
-        );
+      let { className, style } = getThemeClassNameAndStyle(themeState, isRoot), themedChildren = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${className} _dsp_contents is_Theme`, style, children });
+      if (requiresExtraWrapper) {
+        let name = ((_a = themeState.state) == null ? void 0 : _a.name) || "", inverseClassName = name.startsWith("light") ? "t_light is_inversed" : name.startsWith("dark") ? "t_dark is_inversed" : "";
+        themedChildren = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${inverse ? inverseClassName : ""} _dsp_contents`, children: themedChildren });
       }
       return themedChildren;
     }
+    function getThemeClassNameAndStyle(themeState, isRoot = !1) {
+      var _a, _b;
+      let themeColor = (_a = themeState.state) != null && _a.theme && themeState.isNewTheme ? (0, import_createVariable.variableToString)(themeState.state.theme.color) : "", style = themeColor ? {
+        color: themeColor
+      } : void 0, className = ((_b = themeState.state) == null ? void 0 : _b.className) || "";
+      return isRoot && (className = className.replace("t_sub_theme", "")), { style, className };
+    }
   }
 });
 
@@ -3936,7 +3929,7 @@ var require_themeable_native = __commonJS({
           import_Theme.Theme,
           {
             componentName: componentName || (staticConfig == null ? void 0 : staticConfig.componentName),
-            name: theme || null,
+            name: theme,
             "disable-child-theme": !0,
             debug: props.debug,
             inverse: themeInverse,
@@ -11813,7 +11806,6 @@ var require_Button_native = __commonJS({
       }
     }), ButtonText = (0, import_web.styled)(import_text2.SizableText, {
       name: "Button",
-      // same name as the frame so they can share a single theme
       context: ButtonContext,
       variants: {
         unstyled: {
@@ -14993,12 +14985,12 @@ var require_Popper_native = __commonJS({
       left: "right"
     }, PopperArrow = PopperArrowFrame.styleable(function(propsIn, forwardedRef) {
       var _a, _b;
-      let { __scopePopper, ...rest } = propsIn, props = (0, import_core13.useProps)(rest), { offset: offset2, size: sizeProp, borderWidth = 0, ...arrowProps } = props, context = usePopperContext(__scopePopper), sizeVal = sizeProp ?? context.size, size2 = +(0, import_core13.getVariableValue)(
+      let { __scopePopper, ...rest } = propsIn, props = (0, import_core13.useProps)(rest), { offset: offset2, size: sizeProp, borderWidth = 0, ...arrowProps } = props, context = usePopperContext(__scopePopper), sizeVal = sizeProp ?? context.size, sizeValResolved = (0, import_core13.getVariableValue)(
         (0, import_get_token2.getSpace)(sizeVal, {
           shift: -2,
           bounds: [2]
         })
-      ), { placement } = context, refs = (0, import_compose_refs.useComposedRefs)(context.arrowRef, forwardedRef), x = ((_a = context.arrowStyle) == null ? void 0 : _a.x) || 0, y = ((_b = context.arrowStyle) == null ? void 0 : _b.y) || 0, primaryPlacement = placement ? placement.split("-")[0] : "top", arrowStyle = { x, y, width: size2, height: size2 }, innerArrowStyle = {}, isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
+      ), size2 = Math.max(0, +sizeValResolved), { placement } = context, refs = (0, import_compose_refs.useComposedRefs)(context.arrowRef, forwardedRef), x = ((_a = context.arrowStyle) == null ? void 0 : _a.x) || 0, y = ((_b = context.arrowStyle) == null ? void 0 : _b.y) || 0, primaryPlacement = placement ? placement.split("-")[0] : "top", arrowStyle = { x, y, width: size2, height: size2 }, innerArrowStyle = {}, isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
       if (primaryPlacement) {
         arrowStyle[isVertical ? "width" : "height"] = size2 * 2;
         let oppSide = opposites[primaryPlacement];
@@ -18471,9 +18463,7 @@ var require_ToggleGroup_native = __commonJS({
             width: void 0,
             height: void 0,
             padding: (0, import_web.getVariableValue)(size2) * 0.6
-          };
-          props.unstyled || (props.orientation === "horizontal" ? sizeProps.height = (0, import_web.getVariableValue)(size2) * 2.4 : sizeProps.width = (0, import_web.getVariableValue)(size2) * 2.4);
-          let iconSize = (typeof size2 == "number" ? size2 * 0.7 : (0, import_font_size.getFontSize)(size2)) * 1.2, theme = (0, import_web.useTheme)(), getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({ size: iconSize, color: theme.color }), children = import_react2.default.Children.toArray(props.children).map((child) => props.disablePassStyles || !import_react2.default.isValidElement(child) ? child : getThemedIcon(child)), commonProps = { pressed, disabled, ...sizeProps, ...props, children };
+          }, iconSize = (typeof size2 == "number" ? size2 * 0.7 : (0, import_font_size.getFontSize)(size2)) * 1.2, theme = (0, import_web.useTheme)(), getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({ size: iconSize, color: theme.color }), children = import_react2.default.Children.toArray(props.children).map((child) => props.disablePassStyles || !import_react2.default.isValidElement(child) ? child : getThemedIcon(child)), commonProps = { pressed, disabled, ...sizeProps, ...props, children };
           return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ToggleGroupItemProvider, { scope: __scopeToggleGroup, children: context.rovingFocus ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             import_roving_focus.RovingFocusGroup.Item,
             {