@tamagui/web 1.123.17 → 1.124.0

package/dist/cjs/views/Theme.js

@@ -26,21 +26,20 @@ __export(Theme_exports, {
   getThemedChildren: () => getThemedChildren
 });
 module.exports = __toCommonJS(Theme_exports);
-var import_constants = require("@tamagui/constants"), import_react = __toESM(require("react")), import_createVariable = require("../createVariable"), import_log = require("../helpers/log"), import_ThemeManagerContext = require("../helpers/ThemeManagerContext"), import_useTheme = require("../hooks/useTheme"), import_ThemeDebug = require("./ThemeDebug"), import_jsx_runtime = require("react/jsx-runtime");
-const Theme = (0, import_react.forwardRef)(function({ children, ...props }, ref) {
+var import_constants = require("@tamagui/constants"), import_react = __toESM(require("react")), import_config = require("../config"), import_createVariable = require("../createVariable"), import_useTheme = require("../hooks/useTheme"), import_useThemeState = require("../hooks/useThemeState"), import_ThemeDebug = require("./ThemeDebug"), import_jsx_runtime = require("react/jsx-runtime");
+const empty = { className: "", style: {} }, Theme = (0, import_react.forwardRef)(function(props, ref) {
   if (props.disable)
-    return children;
-  const isRoot = !!props._isRoot, themeState = (0, import_useTheme.useChangeThemeEffect)(props, isRoot);
+    return props.children;
+  const isRoot = !!props._isRoot, [_, themeState] = (0, import_useTheme.useThemeWithState)(props, isRoot);
   let finalChildren = props["disable-child-theme"] ? import_react.Children.map(
-    children,
+    props.children,
     (child) => (0, import_react.cloneElement)(child, { "data-disable-theme": !0 })
-  ) : children;
+  ) : props.children;
   if (ref)
     try {
       import_react.default.Children.only(finalChildren), finalChildren = (0, import_react.cloneElement)(finalChildren, { ref });
     } catch {
     }
-  process.env.NODE_ENV === "development" && props.debug === "visualize" && (finalChildren = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, { themeState, themeProps: props, children: finalChildren }));
   const stateRef = (0, import_react.useRef)({
     hasEverThemed: !1
   });
@@ -48,55 +47,49 @@ const Theme = (0, import_react.forwardRef)(function({ children, ...props }, ref)
 });
 Theme.avoidForwardRef = !0;
 function getThemedChildren(themeState, children, props, isRoot = !1, stateRef) {
-  const { themeManager, isNewTheme } = themeState;
-  if (!themeManager)
-    return children;
-  const { shallow, forceClassName } = props;
-  let shouldRenderChildrenWithTheme = isNewTheme || isRoot || "inverse" in props || "name" in props || "reset" in props || "forceClassName" in props || stateRef.current.hasEverThemed;
-  if (shouldRenderChildrenWithTheme && (stateRef.current.hasEverThemed = !0), !shouldRenderChildrenWithTheme)
+  const { shallow, forceClassName } = props, state = stateRef.current;
+  if (!(state.hasEverThemed || themeState.isNew || isRoot || (0, import_useThemeState.hasThemeUpdatingProps)(props)))
     return children;
-  process.env.NODE_ENV === "development" && shouldRenderChildrenWithTheme && props.debug === "verbose" && (0, import_log.log)(
-    `adding theme: isRoot ${isRoot}, inverse ${"inverse" in props}, isNewTheme ${isNewTheme}, hasEver ${stateRef.current.hasEverThemed}`,
-    props
-  );
-  let next = children;
-  shallow && (next = import_react.Children.toArray(children).map((child) => (0, import_react.isValidElement)(child) ? (0, import_react.cloneElement)(
-    child,
-    void 0,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Theme, { name: themeManager.state.parentName, children: child.props.children })
-  ) : child));
-  const elementsWithContext = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeManagerContext.ThemeManagerContext.Provider, { value: themeManager, children: next });
-  return forceClassName === !1 ? elementsWithContext : import_constants.isWeb ? wrapThemeElements({
-    children: elementsWithContext,
-    themeState,
+  children = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_useThemeState.ThemeStateContext.Provider, { value: themeState.id, children });
+  const { isInverse, name } = themeState, requiresExtraWrapper = isInverse || forceClassName;
+  if (state.hasEverThemed || (state.hasEverThemed = !0), (requiresExtraWrapper || // if the theme is exactly dark or light, its likely to change between dark/light
+  // and that would require wrapping which would re-parent, so to avoid re-parenting do this
+  themeState.name === "dark" || themeState.name === "light") && (state.hasEverThemed = "wrapped"), shallow && themeState.parentId) {
+    const parentState = (0, import_useThemeState.getThemeState)(
+      themeState.isNew ? themeState.id : themeState.parentId
+    );
+    if (!parentState) throw new Error("\u203C\uFE0F010");
+    children = import_react.Children.toArray(children).map((child) => (0, import_react.isValidElement)(child) ? (0, import_react.cloneElement)(
+      child,
+      void 0,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Theme, { name: parentState.name, children: child.props.children })
+    ) : child);
+  }
+  if (process.env.NODE_ENV === "development" && props.debug && (console.warn(" getThemedChildren", {
+    requiresExtraWrapper,
     forceClassName,
-    isRoot
-  }) : elementsWithContext;
-}
-function wrapThemeElements({
-  children,
-  themeState,
-  forceClassName,
-  isRoot
-}) {
-  if (isRoot && forceClassName === !1)
+    themeState,
+    state,
+    ...getThemeClassNameAndStyle(themeState, props, isRoot)
+  }), children = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, { themeState, themeProps: props, children })), forceClassName === !1)
+    return children;
+  if (import_constants.isWeb) {
+    const { className, style } = getThemeClassNameAndStyle(themeState, props, isRoot);
+    if (children = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${className} _dsp_contents is_Theme`, style, children }), state.hasEverThemed === "wrapped") {
+      const className2 = requiresExtraWrapper ? `${isInverse ? name.startsWith("light") ? "t_light is_inversed" : name.startsWith("dark") ? "t_dark is_inversed" : "" : ""} _dsp_contents` : "_dsp_contents";
+      children = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: className2, children });
+    }
     return children;
-  const inverse = themeState.inversed, requiresExtraWrapper = typeof inverse == "boolean" || forceClassName, { className, style } = getThemeClassNameAndStyle(themeState, isRoot);
-  let themedChildren = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${className} _dsp_contents is_Theme`, style, children });
-  if (requiresExtraWrapper) {
-    const name = themeState.state?.name || "", inverseClassName = name.startsWith("light") ? "t_light is_inversed" : name.startsWith("dark") ? "t_dark is_inversed" : "";
-    themedChildren = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${inverse ? inverseClassName : ""} _dsp_contents`, children: themedChildren });
   }
-  return themedChildren;
+  return children;
 }
-const emptyObj = {};
-function getThemeClassNameAndStyle(themeState, isRoot = !1) {
-  if (!themeState.isNewTheme)
-    return { className: "", style: emptyObj };
-  const themeColor = themeState.state?.theme && themeState.isNewTheme ? (0, import_createVariable.variableToString)(themeState.state.theme.color) : "", style = themeColor ? {
+function getThemeClassNameAndStyle(themeState, props, isRoot = !1) {
+  if (!themeState.isNew && !props.forceClassName)
+    return empty;
+  const themeColor = themeState?.theme && themeState.isNew ? (0, import_createVariable.variableToString)(themeState.theme.color) : "", style = themeColor ? {
     color: themeColor
-  } : void 0;
-  let className = themeState.state?.className || "";
-  return isRoot && (className = className.replace("t_sub_theme", "")), { style, className };
+  } : void 0, maxInverses = (0, import_config.getSetting)("maxDarkLightNesting") || 3, themeClassName = themeState.inverses >= maxInverses ? themeState.name : themeState.name.replace(schemePrefix, ""), className = `${isRoot ? "" : "t_sub_theme"} t_${themeClassName}`;
+  return { style, className };
 }
+const schemePrefix = /^(dark|light)_/;
 //# sourceMappingURL=Theme.js.map

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "mappings": "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",
-  "names": ["React"]
+  "mappings": "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",
+  "names": ["React", "className"]
 }

package/dist/cjs/views/Theme.native.js

@@ -27,15 +27,17 @@ __export(Theme_exports, {
   getThemedChildren: () => getThemedChildren
 });
 module.exports = __toCommonJS(Theme_exports);
-var import_jsx_runtime = require("react/jsx-runtime"), import_constants = require("@tamagui/constants"), import_react = __toESM(require("react")), import_createVariable = require("../createVariable"), import_log = require("../helpers/log"), import_ThemeManagerContext = require("../helpers/ThemeManagerContext"), import_useTheme = require("../hooks/useTheme"), import_ThemeDebug = require("./ThemeDebug"), Theme = /* @__PURE__ */ (0, import_react.forwardRef)(function(param, ref) {
-  var { children, ...props } = param;
+var import_jsx_runtime = require("react/jsx-runtime"), import_constants = require("@tamagui/constants"), import_react = __toESM(require("react")), import_config = require("../config"), import_createVariable = require("../createVariable"), import_useTheme = require("../hooks/useTheme"), import_useThemeState = require("../hooks/useThemeState"), import_ThemeDebug = require("./ThemeDebug"), empty = {
+  className: "",
+  style: {}
+}, Theme = /* @__PURE__ */ (0, import_react.forwardRef)(function(props, ref) {
   if (props.disable)
-    return children;
-  var isRoot = !!props._isRoot, themeState = (0, import_useTheme.useChangeThemeEffect)(props, isRoot), disableDirectChildTheme = props["disable-child-theme"], finalChildren = disableDirectChildTheme ? import_react.Children.map(children, function(child) {
+    return props.children;
+  var isRoot = !!props._isRoot, [_, themeState] = (0, import_useTheme.useThemeWithState)(props, isRoot), disableDirectChildTheme = props["disable-child-theme"], finalChildren = disableDirectChildTheme ? import_react.Children.map(props.children, function(child) {
     return /* @__PURE__ */ (0, import_react.cloneElement)(child, {
       "data-disable-theme": !0
     });
-  }) : children;
+  }) : props.children;
   if (ref)
     try {
       import_react.default.Children.only(finalChildren), finalChildren = /* @__PURE__ */ (0, import_react.cloneElement)(finalChildren, {
@@ -43,11 +45,6 @@ var import_jsx_runtime = require("react/jsx-runtime"), import_constants = requir
       });
     } catch {
     }
-  process.env.NODE_ENV === "development" && props.debug === "visualize" && (finalChildren = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, {
-    themeState,
-    themeProps: props,
-    children: finalChildren
-  }));
   var stateRef = (0, import_react.useRef)({
     hasEverThemed: !1
   });
@@ -55,65 +52,68 @@ var import_jsx_runtime = require("react/jsx-runtime"), import_constants = requir
 });
 Theme.avoidForwardRef = !0;
 function getThemedChildren(themeState, children, props) {
-  var isRoot = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : !1, stateRef = arguments.length > 4 ? arguments[4] : void 0, { themeManager, isNewTheme } = themeState;
-  if (!themeManager)
-    return children;
-  var { shallow, forceClassName } = props, shouldRenderChildrenWithTheme = isNewTheme || isRoot || "inverse" in props || "name" in props || "reset" in props || "forceClassName" in props || stateRef.current.hasEverThemed;
-  if (shouldRenderChildrenWithTheme && (stateRef.current.hasEverThemed = !0), !shouldRenderChildrenWithTheme)
-    return children;
-  process.env.NODE_ENV === "development" && shouldRenderChildrenWithTheme && props.debug === "verbose" && (0, import_log.log)(`adding theme: isRoot ${isRoot}, inverse ${"inverse" in props}, isNewTheme ${isNewTheme}, hasEver ${stateRef.current.hasEverThemed}`, props);
-  var next = children;
-  shallow && (next = import_react.Children.toArray(children).map(function(child) {
-    return /* @__PURE__ */ (0, import_react.isValidElement)(child) ? /* @__PURE__ */ (0, import_react.cloneElement)(child, void 0, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Theme, {
-      name: themeManager.state.parentName,
-      children: child.props.children
-    })) : child;
-  }));
-  var elementsWithContext = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeManagerContext.ThemeManagerContext.Provider, {
-    value: themeManager,
-    children: next
-  });
-  return forceClassName === !1 ? elementsWithContext : import_constants.isWeb ? wrapThemeElements({
-    children: elementsWithContext,
-    themeState,
-    forceClassName,
-    isRoot
-  }) : elementsWithContext;
-}
-function wrapThemeElements(param) {
-  var { children, themeState, forceClassName, isRoot } = param;
-  if (isRoot && forceClassName === !1)
+  var isRoot = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : !1, stateRef = arguments.length > 4 ? arguments[4] : void 0, { shallow, forceClassName } = props, state = stateRef.current, hasEverThemed = state.hasEverThemed, shouldRenderChildrenWithTheme = hasEverThemed || themeState.isNew || isRoot || (0, import_useThemeState.hasThemeUpdatingProps)(props);
+  if (!shouldRenderChildrenWithTheme)
     return children;
-  var inverse = themeState.inversed, requiresExtraWrapper = typeof inverse == "boolean" || forceClassName, { className, style } = getThemeClassNameAndStyle(themeState, isRoot), themedChildren = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-    className: `${className} _dsp_contents is_Theme`,
-    style,
+  children = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_useThemeState.ThemeStateContext.Provider, {
+    value: themeState.id,
     children
   });
-  if (requiresExtraWrapper) {
-    var _themeState_state, name = ((_themeState_state = themeState.state) === null || _themeState_state === void 0 ? void 0 : _themeState_state.name) || "", inverseClassName = name.startsWith("light") ? "t_light is_inversed" : name.startsWith("dark") ? "t_dark is_inversed" : "";
-    themedChildren = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-      className: `${inverse ? inverseClassName : ""} _dsp_contents`,
-      children: themedChildren
+  var { isInverse, name } = themeState, requiresExtraWrapper = isInverse || forceClassName;
+  if (state.hasEverThemed || (state.hasEverThemed = !0), (requiresExtraWrapper || // if the theme is exactly dark or light, its likely to change between dark/light
+  // and that would require wrapping which would re-parent, so to avoid re-parenting do this
+  themeState.name === "dark" || themeState.name === "light") && (state.hasEverThemed = "wrapped"), shallow && themeState.parentId) {
+    var parentState = (0, import_useThemeState.getThemeState)(themeState.isNew ? themeState.id : themeState.parentId);
+    if (!parentState) throw new Error("\u203C\uFE0F010");
+    children = import_react.Children.toArray(children).map(function(child) {
+      return /* @__PURE__ */ (0, import_react.isValidElement)(child) ? /* @__PURE__ */ (0, import_react.cloneElement)(child, void 0, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Theme, {
+        name: parentState.name,
+        children: child.props.children
+      })) : child;
     });
   }
-  return themedChildren;
+  if (process.env.NODE_ENV === "development" && props.debug && (console.warn(" getThemedChildren", {
+    requiresExtraWrapper,
+    forceClassName,
+    themeState,
+    state,
+    ...getThemeClassNameAndStyle(themeState, props, isRoot)
+  }), children = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, {
+    themeState,
+    themeProps: props,
+    children
+  })), forceClassName === !1)
+    return children;
+  if (import_constants.isWeb) {
+    var { className, style } = getThemeClassNameAndStyle(themeState, props, isRoot);
+    if (children = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+      className: `${className} _dsp_contents is_Theme`,
+      style,
+      children
+    }), state.hasEverThemed === "wrapped") {
+      var className1 = requiresExtraWrapper ? `${isInverse ? name.startsWith("light") ? "t_light is_inversed" : name.startsWith("dark") ? "t_dark is_inversed" : "" : ""} _dsp_contents` : "_dsp_contents";
+      children = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+        className: className1,
+        children
+      });
+    }
+    return children;
+  }
+  return children;
 }
-var emptyObj = {};
-function getThemeClassNameAndStyle(themeState) {
-  var isRoot = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1, _themeState_state, _themeState_state1;
-  if (!themeState.isNewTheme)
-    return {
-      className: "",
-      style: emptyObj
-    };
-  var themeColor = !((_themeState_state = themeState.state) === null || _themeState_state === void 0) && _themeState_state.theme && themeState.isNewTheme ? (0, import_createVariable.variableToString)(themeState.state.theme.color) : "", style = themeColor ? {
+function getThemeClassNameAndStyle(themeState, props) {
+  var isRoot = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1;
+  if (!themeState.isNew && !props.forceClassName)
+    return empty;
+  var themeColor = themeState != null && themeState.theme && themeState.isNew ? (0, import_createVariable.variableToString)(themeState.theme.color) : "", style = themeColor ? {
     color: themeColor
-  } : void 0, className = ((_themeState_state1 = themeState.state) === null || _themeState_state1 === void 0 ? void 0 : _themeState_state1.className) || "";
-  return isRoot && (className = className.replace("t_sub_theme", "")), {
+  } : void 0, maxInverses = (0, import_config.getSetting)("maxDarkLightNesting") || 3, themeClassName = themeState.inverses >= maxInverses ? themeState.name : themeState.name.replace(schemePrefix, ""), className = `${isRoot ? "" : "t_sub_theme"} t_${themeClassName}`;
+  return {
     style,
     className
   };
 }
+var schemePrefix = /^(dark|light)_/;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Theme,

package/dist/cjs/views/Theme.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Users/n8/tamagui/code/core/web/src/views/Theme.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDAAA,mBAAsB,+BAEtB,eAAkF,2BAClF,wBAAiC,8BACjC,aAAoB,2BACpB,6BAAoC,2CAEpC,kBAAqC,8BAErC,oBAA2B,yBAEdA,QAAQC,6CAAW,SAAe,OAAoCC,KAAG;MAAvC,EAAEC,UAAU,GAAGC,MAAAA,IAAf;AAE7C,MAAIA,MAAMC;AACR,WAAOF;AAGT,MAAMG,SAAS,CAAC,CAACF,MAAM,SACjBG,iBAAaC,sCAAqBJ,OAAOE,MAAAA,GACzCG,0BAA0BL,MAAM,qBAAA,GAElCM,gBAAgBD,0BAChBE,sBAASC,IAAIT,UAAU,SAACU,OAAAA;WACtBC,+CAAaD,OAAO;MAAG,sBAAuB;IAAK,CAAA;OAErDV;AAEJ,MAAID;AACF,QAAI;AACFa,mBAAAA,QAAMJ,SAASK,KAAKN,aAAAA,GACpBA,gBAAgBI,+CAAaJ,eAAe;QAAER;MAAI,CAAA;IACpD,QAAQ;IAER;AAGF,EAAIe,QAAQC,IAAIC,aAAa,iBACvBf,MAAMgB,UAAU,gBAClBV,gBACE,uCAAAW,KAACC,8BAAAA;IAAWf;IAAwBgB,YAAYnB;cAC7CM;;AAMT,MAAMc,eAAWC,qBAAO;IACtBC,eAAe;EACjB,CAAA;AAEA,SAAOC,kBAAkBpB,YAAYG,eAAeN,OAAOE,QAAQkB,QAAAA;AACrE,CAAA;AAEAxB,MAAM,kBAAqB;AAEpB,SAAS2B,kBACdpB,YACAJ,UACAC,OAAiB;MACjBE,SAAAA,UAAAA,SAAAA,KAAAA,UAAAA,CAAAA,MAAAA,SAAAA,UAAAA,CAAAA,IAAS,IACTkB,WAAAA,UAAAA,SAAAA,IAAAA,UAAAA,CAAAA,IAAAA,QAEM,EAAEI,cAAcC,WAAU,IAAKtB;AAGrC,MAAI,CAACqB;AACH,WAAOzB;AAQT,MAAM,EAAE2B,SAASC,eAAc,IAAK3B,OAGhC4B,gCACFH,cACAvB,UACA,aAAaF,SACb,UAAUA,SACV,WAAWA,SACX,oBAAoBA,SACpBoB,SAASS,QAAQP;AAMnB,MAJIM,kCACFR,SAASS,QAAQP,gBAAgB,KAG/B,CAACM;AACH,WAAO7B;AAGT,EAAIc,QAAQC,IAAIC,aAAa,iBACvBa,iCAAiC5B,MAAMgB,UAAU,iBACnDc,gBACE,wBAAwB5B,MAAAA,aAAmB,aAAaF,KAAAA,gBAAqByB,UAAAA,aAAuBL,SAASS,QAAQP,aAAa,IAClItB,KAAAA;AAKN,MAAI+B,OAAOhC;AAGX,EAAI2B,YACFK,OAAOxB,sBAASyB,QAAQjC,QAAAA,EAAUS,IAAI,SAACC,OAAAA;AACrC,WAAOwB,iDAAexB,KAAAA,IAClBC,+CACED,OACAyB,QACA,uCAAAjB,KAACrB,OAAAA;MAAMuC,MAAMX,aAAaY,MAAMC;gBAC5B5B,MAAcT,MAAMD;UAG1BU;EACN,CAAA;AAGF,MAAM6B,sBACJ,uCAAArB,KAACsB,+CAAoBC,UAAQ;IAACC,OAAOjB;cAClCO;;AAIL,SAAIJ,mBAAmB,KACdW,sBAGLI,yBACKC,kBAAkB;IACvB5C,UAAUuC;IACVnC;IACAwB;IACAzB;EACF,CAAA,IAGKoC;AACT;AAEA,SAASK,kBAAkB,OAU1B;MAV0B,EACzB5C,UACAI,YACAwB,gBACAzB,OAAM,IAJmB;AAWzB,MAAIA,UAAUyB,mBAAmB;AAC/B,WAAO5B;AAGT,MAAM6C,UAAUzC,WAAW0C,UACrBC,uBAAuB,OAAOF,WAAY,aAAajB,gBAEvD,EAAEoB,WAAWC,MAAK,IAAKC,0BAA0B9C,YAAYD,MAAAA,GAE/DgD,iBACF,uCAAAjC,KAACkC,QAAAA;IAAKJ,WAAW,GAAGA,SAAAA;IAAoCC;;;AAM1D,MAAIF,sBAAsB;QACX3C,mBAAPgC,SAAOhC,oBAAAA,WAAWiC,WAAK,QAAhBjC,sBAAAA,SAAAA,SAAAA,kBAAkBgC,SAAQ,IACjCiB,mBAAmBjB,KAAKkB,WAAW,OAAA,IACrC,wBACAlB,KAAKkB,WAAW,MAAA,IACd,uBACA;AAENH,qBACE,uCAAAjC,KAACkC,QAAAA;MAAKJ,WAAW,GAAGH,UAAUQ,mBAAmB,EAAA;gBAC9CF;;EAGP;AAEA,SAAOA;AACT;AAEA,IAAMI,WAAW,CAAC;AAElB,SAASL,0BAA0B9C,YAAgC;MAAED,SAAAA,UAAAA,SAAAA,KAAAA,UAAAA,CAAAA,MAAAA,SAAAA,UAAAA,CAAAA,IAAS,IAO1EC,mBAUcA;AAhBhB,MAAI,CAACA,WAAWsB;AACd,WAAO;MAAEsB,WAAW;MAAIC,OAAOM;IAAS;AAI1C,MAAMC,aACJpD,uBAAAA,WAAWiC,WAAK,QAAhBjC,sBAAAA,WAAAA,kBAAkBqD,SAASrD,WAAWsB,iBAClCgC,wCAAiBtD,WAAWiC,MAAMoB,MAAME,KAAK,IAC7C,IAEAV,QAAQO,aACV;IACEG,OAAOH;EACT,IACArB,QAEAa,cAAY5C,qBAAAA,WAAWiC,WAAK,QAAhBjC,uBAAAA,SAAAA,SAAAA,mBAAkB4C,cAAa;AAC/C,SAAI7C,WACF6C,YAAYA,UAAUY,QAAQ,eAAe,EAAA,IAExC;IAAEX;IAAOD;EAAU;AAC5B;",
-  "names": ["Theme", "forwardRef", "ref", "children", "props", "disable", "isRoot", "themeState", "useChangeThemeEffect", "disableDirectChildTheme", "finalChildren", "Children", "map", "child", "cloneElement", "React", "only", "process", "env", "NODE_ENV", "debug", "_jsx", "ThemeDebug", "themeProps", "stateRef", "useRef", "hasEverThemed", "getThemedChildren", "themeManager", "isNewTheme", "shallow", "forceClassName", "shouldRenderChildrenWithTheme", "current", "log", "next", "toArray", "isValidElement", "undefined", "name", "state", "parentName", "elementsWithContext", "ThemeManagerContext", "Provider", "value", "isWeb", "wrapThemeElements", "inverse", "inversed", "requiresExtraWrapper", "className", "style", "getThemeClassNameAndStyle", "themedChildren", "span", "inverseClassName", "startsWith", "emptyObj", "themeColor", "theme", "variableToString", "color", "replace"]
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDAAA,mBAAsB,+BAEtB,eAOO,2BACP,gBAA2B,sBAC3B,wBAAiC,8BACjC,kBAAkC,8BAClC,uBAKO,mCAEP,oBAA2B,yBAErBA,QAAQ;EAAEC,WAAW;EAAIC,OAAO,CAAC;AAAE,GAE5BC,QAAQC,6CAAW,SAAeC,OAAmBC,KAAG;AAEnE,MAAID,MAAME;AACR,WAAOF,MAAMG;AAGf,MAAMC,SAAS,CAAC,CAACJ,MAAM,SACjB,CAACK,GAAGC,UAAAA,QAAcC,mCAAkBP,OAAOI,MAAAA,GAE3CI,0BAA0BR,MAAM,qBAAA,GAElCS,gBAAgBD,0BAChBE,sBAASC,IAAIX,MAAMG,UAAU,SAACS,OAAAA;WAC5BC,+CAAaD,OAAO;MAAG,sBAAuB;IAAK,CAAA;OAErDZ,MAAMG;AAEV,MAAIF;AACF,QAAI;AACFa,mBAAAA,QAAMJ,SAASK,KAAKN,aAAAA,GACpBA,gBAAgBI,+CAAaJ,eAAe;QAAER;MAAI,CAAA;IACpD,QAAQ;IAER;AAGF,MAAMe,eAAWC,qBAAO;IACtBC,eAAe;EACjB,CAAA;AAEA,SAAOC,kBAAkBb,YAAYG,eAAeT,OAAOI,QAAQY,QAAAA;AACrE,CAAA;AAEAlB,MAAM,kBAAqB;AAEpB,SAASqB,kBACdb,YACAH,UACAH,OAAiB;MACjBI,SAAAA,UAAAA,SAAAA,KAAAA,UAAAA,CAAAA,MAAAA,SAAAA,UAAAA,CAAAA,IAAS,IACTY,WAAAA,UAAAA,SAAAA,IAAAA,UAAAA,CAAAA,IAAAA,QAEM,EAAEI,SAASC,eAAc,IAAKrB,OAG9BsB,QAAQN,SAASO,SACnBL,gBAAgBI,MAAMJ,eAEtBM,gCACFN,iBAAiBZ,WAAWmB,SAASrB,cAAUsB,4CAAsB1B,KAAAA;AAEvE,MAAI,CAACwB;AACH,WAAOrB;AAKTA,aACE,uCAAAwB,KAACC,uCAAkBC,UAAQ;IAACC,OAAOxB,WAAWyB;;;AAKhD,MAAM,EAAEC,WAAWC,KAAI,IAAK3B,YACtB4B,uBAAuBF,aAAaX;AAiB1C,MAdKC,MAAMJ,kBACTI,MAAMJ,gBAAgB,MAGtBgB;;EAGA5B,WAAW2B,SAAS,UACpB3B,WAAW2B,SAAS,aAEpBX,MAAMJ,gBAAgB,YAIpBE,WACGd,WAAW6B,UAET;AACL,QAAMC,kBAAcC,oCAClB/B,WAAWmB,QAAQnB,WAAWyB,KAAKzB,WAAW6B,QAAQ;AAExD,QAAI,CAACC,YAAa,OAAM,IAAIE,MAAM,iBAAO;AACzCnC,eAAWO,sBAAS6B,QAAQpC,QAAAA,EAAUQ,IAAI,SAACC,OAAAA;AACzC,aAAO4B,iDAAe5B,KAAAA,IAClBC,+CACED,OACA6B,QACA,uCAAAd,KAAC7B,OAAAA;QAAMmC,MAAMG,YAAYH;kBAAQrB,MAAcZ,MAAMG;YAEvDS;IACN,CAAA;EACF;AAoBF,MAjBI8B,QAAQC,IAAIC,aAAa,iBACvB5C,MAAM6C,UACRC,QAAQC,KAAK,sBAAsB;IACjCb;IACAb;IACAf;IACAgB;IACA,GAAG0B,0BAA0B1C,YAAYN,OAAOI,MAAAA;EAClD,CAAA,GACAD,WACE,uCAAAwB,KAACsB,8BAAAA;IAAW3C;IAAwB4C,YAAYlD;;OAOlDqB,mBAAmB;AACrB,WAAOlB;AAGT,MAAIgD,wBAAO;AACT,QAAM,EAAEvD,WAAWC,MAAK,IAAKmD,0BAA0B1C,YAAYN,OAAOI,MAAAA;AAS1E,QAPAD,WACE,uCAAAwB,KAACyB,QAAAA;MAAKxD,WAAW,GAAGA,SAAAA;MAAoCC;;QAMtDyB,MAAMJ,kBAAkB,WAAW;AAErC,UAAMtB,aAAYsC,uBACd,GACEF,YACIC,KAAKoB,WAAW,OAAA,IACd,wBACApB,KAAKoB,WAAW,MAAA,IACd,uBACA,KACJ,EAAA,mBAEN;AACJlD,iBAAW,uCAAAwB,KAACyB,QAAAA;QAAKxD,WAAWA;;;IAC9B;AAEA,WAAOO;EACT;AAEA,SAAOA;AACT;AAEA,SAAS6C,0BACP1C,YACAN,OAAiB;MACjBI,SAAAA,UAAAA,SAAAA,KAAAA,UAAAA,CAAAA,MAAAA,SAAAA,UAAAA,CAAAA,IAAS;AAET,MAAI,CAACE,WAAWmB,SAAS,CAACzB,MAAMqB;AAC9B,WAAO1B;AAIT,MAAM2D,aACJhD,cAAAA,QAAAA,WAAYiD,SAASjD,WAAWmB,YAAQ+B,wCAAiBlD,WAAWiD,MAAME,KAAK,IAAI,IAE/E5D,QAAQyD,aACV;IACEG,OAAOH;EACT,IACAb,QAEEiB,kBAAcC,0BAAW,qBAAA,KAA0B,GACnDC,iBACJtD,WAAWuD,YAAYH,cACnBpD,WAAW2B,OACX3B,WAAW2B,KAAK6B,QAAQC,cAAc,EAAA,GAEtCnE,YAAY,GAAGQ,SAAS,KAAK,aAAA,MAAmBwD,cAAAA;AAEtD,SAAO;IAAE/D;IAAOD;EAAU;AAC5B;AAEA,IAAMmE,eAAe;",
+  "names": ["empty", "className", "style", "Theme", "forwardRef", "props", "ref", "disable", "children", "isRoot", "_", "themeState", "useThemeWithState", "disableDirectChildTheme", "finalChildren", "Children", "map", "child", "cloneElement", "React", "only", "stateRef", "useRef", "hasEverThemed", "getThemedChildren", "shallow", "forceClassName", "state", "current", "shouldRenderChildrenWithTheme", "isNew", "hasThemeUpdatingProps", "_jsx", "ThemeStateContext", "Provider", "value", "id", "isInverse", "name", "requiresExtraWrapper", "parentId", "parentState", "getThemeState", "Error", "toArray", "isValidElement", "undefined", "process", "env", "NODE_ENV", "debug", "console", "warn", "getThemeClassNameAndStyle", "ThemeDebug", "themeProps", "isWeb", "span", "startsWith", "themeColor", "theme", "variableToString", "color", "maxInverses", "getSetting", "themeClassName", "inverses", "replace", "schemePrefix"]
 }

package/dist/cjs/views/ThemeDebug.cjs

@@ -1,9 +1,7 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
     for (var name in all) __defProp(target, name, {
       get: all[name],
@@ -17,26 +15,16 @@ var __export = (target, all) => {
     });
     return to;
   };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
 var ThemeDebug_exports = {};
 __export(ThemeDebug_exports, {
   ThemeDebug: () => ThemeDebug
 });
 module.exports = __toCommonJS(ThemeDebug_exports);
-var import_react = __toESM(require("react")),
-  import_use_did_finish_ssr = require("@tamagui/use-did-finish-ssr"),
-  import_use_force_update = require("@tamagui/use-force-update"),
+var import_use_did_finish_ssr = require("@tamagui/use-did-finish-ssr"),
+  import_react = require("react"),
   import_react_dom = require("react-dom"),
   import_jsx_runtime = require("react/jsx-runtime");
 let node;
@@ -46,17 +34,9 @@ function ThemeDebug({
   children
 }) {
   if (process.env.NODE_ENV === "development") {
-    const isHydrated = (0, import_use_did_finish_ssr.useDidFinishSSR)(),
-      [onChangeCount, setOnChangeCount] = import_react.default.useState(0),
-      rerender = (0, import_use_force_update.useForceUpdate)(),
-      id = import_react.default.useId();
-    return process.env.NODE_ENV === "development" && typeof document < "u" && (node || (node = document.createElement("div"), node.style.height = "200px", node.style.overflowY = "scroll", node.style.position = "fixed", node.style.zIndex = 1e7, node.style.bottom = "30px", node.style.left = "30px", node.style.right = "30px", node.style.display = "flex", node.style.border = "1px solid #888", node.style.flexDirection = "row", node.style.background = "var(--background)", document.body.appendChild(node))), import_react.default.useEffect(() => {
-      themeState.themeManager?.parentManager?.onChangeTheme((name, manager) => {
-        setOnChangeCount(p => ++p), console.warn(`theme changed for ${themeState.themeManager?.id} from parent ${themeState.themeManager?.parentManager?.id} to new name`, name);
-      });
-    }, [themeState.themeManager]), import_react.default.useEffect(() => {
-      const tm = setInterval(rerender, 1e3);
-      return () => clearTimeout(tm);
+    const isHydrated = (0, import_use_did_finish_ssr.useDidFinishSSR)();
+    return process.env.NODE_ENV === "development" && typeof document < "u" && (node || (node = document.createElement("div"), node.style.height = "200px", node.style.overflowY = "scroll", node.style.position = "fixed", node.style.zIndex = 1e7, node.style.bottom = "30px", node.style.left = "30px", node.style.right = "30px", node.style.display = "flex", node.style.border = "1px solid #888", node.style.flexDirection = "row", node.style.background = "var(--background)")), (0, import_react.useEffect)(() => {
+      document.body.appendChild(node);
     }, []), themeProps["disable-child-theme"] || !isHydrated ? children : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
       children: [(0, import_react_dom.createPortal)(/* @__PURE__ */(0, import_jsx_runtime.jsxs)("code", {
         style: {
@@ -65,25 +45,23 @@ function ThemeDebug({
           overflow: "auto",
           padding: 5
         },
-        children: ["<Theme ", id, " />\xA0", JSON.stringify({
-          propsName: themeProps.name,
-          name: themeState?.state?.name,
-          className: themeState?.state?.className,
-          inverse: themeProps.inverse,
-          forceClassName: themeProps.forceClassName,
-          parent: themeState.themeManager?.state.parentName,
-          id: themeState.themeManager?.id,
-          parentId: themeState.themeManager?.parentManager?.id,
-          isNew: themeState.isNewTheme,
-          onChangeCount,
-          listening: [...(themeState.themeManager?._listeningIds || [])].join(","),
-          _numChangeEventsSent: themeState.themeManager?._numChangeEventsSent
+        children: ["<Theme ", themeState.id, " />\xA0", JSON.stringify({
+          name: themeState.name,
+          parentId: themeState.parentId,
+          inverses: themeState.inverses,
+          isNew: themeState.isNew,
+          themeProps: {
+            name: themeProps.name,
+            componentName: themeProps.componentName,
+            reset: themeProps.reset,
+            inverse: themeProps.inverse
+          }
         }, null, 2)]
       }), node), /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
         style: {
           color: "red"
         },
-        children: id
+        children: themeState.id
       }), children]
     });
   }

package/dist/cjs/views/ThemeDebug.js

@@ -1,8 +1,7 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: !0 });
@@ -12,20 +11,13 @@ var __export = (target, all) => {
       !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
-  mod
-)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
 var ThemeDebug_exports = {};
 __export(ThemeDebug_exports, {
   ThemeDebug: () => ThemeDebug
 });
 module.exports = __toCommonJS(ThemeDebug_exports);
-var import_react = __toESM(require("react")), import_use_did_finish_ssr = require("@tamagui/use-did-finish-ssr"), import_use_force_update = require("@tamagui/use-force-update"), import_react_dom = require("react-dom"), import_jsx_runtime = require("react/jsx-runtime");
+var import_use_did_finish_ssr = require("@tamagui/use-did-finish-ssr"), import_react = require("react"), import_react_dom = require("react-dom"), import_jsx_runtime = require("react/jsx-runtime");
 let node;
 function ThemeDebug({
   themeState,
@@ -33,17 +25,9 @@ function ThemeDebug({
   children
 }) {
   if (process.env.NODE_ENV === "development") {
-    const isHydrated = (0, import_use_did_finish_ssr.useDidFinishSSR)(), [onChangeCount, setOnChangeCount] = import_react.default.useState(0), rerender = (0, import_use_force_update.useForceUpdate)(), id = import_react.default.useId();
-    return process.env.NODE_ENV === "development" && typeof document < "u" && (node || (node = document.createElement("div"), node.style.height = "200px", node.style.overflowY = "scroll", node.style.position = "fixed", node.style.zIndex = 1e7, node.style.bottom = "30px", node.style.left = "30px", node.style.right = "30px", node.style.display = "flex", node.style.border = "1px solid #888", node.style.flexDirection = "row", node.style.background = "var(--background)", document.body.appendChild(node))), import_react.default.useEffect(() => {
-      themeState.themeManager?.parentManager?.onChangeTheme((name, manager) => {
-        setOnChangeCount((p) => ++p), console.warn(
-          `theme changed for ${themeState.themeManager?.id} from parent ${themeState.themeManager?.parentManager?.id} to new name`,
-          name
-        );
-      });
-    }, [themeState.themeManager]), import_react.default.useEffect(() => {
-      const tm = setInterval(rerender, 1e3);
-      return () => clearTimeout(tm);
+    const isHydrated = (0, import_use_did_finish_ssr.useDidFinishSSR)();
+    return process.env.NODE_ENV === "development" && typeof document < "u" && (node || (node = document.createElement("div"), node.style.height = "200px", node.style.overflowY = "scroll", node.style.position = "fixed", node.style.zIndex = 1e7, node.style.bottom = "30px", node.style.left = "30px", node.style.right = "30px", node.style.display = "flex", node.style.border = "1px solid #888", node.style.flexDirection = "row", node.style.background = "var(--background)")), (0, import_react.useEffect)(() => {
+      document.body.appendChild(node);
     }, []), themeProps["disable-child-theme"] || !isHydrated ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       (0, import_react_dom.createPortal)(
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -57,24 +41,20 @@ function ThemeDebug({
             },
             children: [
               "<Theme ",
-              id,
+              themeState.id,
               " />\xA0",
               JSON.stringify(
                 {
-                  propsName: themeProps.name,
-                  name: themeState?.state?.name,
-                  className: themeState?.state?.className,
-                  inverse: themeProps.inverse,
-                  forceClassName: themeProps.forceClassName,
-                  parent: themeState.themeManager?.state.parentName,
-                  id: themeState.themeManager?.id,
-                  parentId: themeState.themeManager?.parentManager?.id,
-                  isNew: themeState.isNewTheme,
-                  onChangeCount,
-                  listening: [...themeState.themeManager?._listeningIds || []].join(
-                    ","
-                  ),
-                  _numChangeEventsSent: themeState.themeManager?._numChangeEventsSent
+                  name: themeState.name,
+                  parentId: themeState.parentId,
+                  inverses: themeState.inverses,
+                  isNew: themeState.isNew,
+                  themeProps: {
+                    name: themeProps.name,
+                    componentName: themeProps.componentName,
+                    reset: themeProps.reset,
+                    inverse: themeProps.inverse
+                  }
                 },
                 null,
                 2
@@ -84,7 +64,7 @@ function ThemeDebug({
         ),
         node
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "red" }, children: id }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "red" }, children: themeState.id }),
       children
     ] });
   }

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeDebug.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB,2BAClB,4BAAgC,wCAChC,0BAA+B,sCAC/B,mBAA6B,sBAyDvB;AApDN,IAAI;AAEG,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAAgF;AAC9E,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UAAM,iBAAa,2CAAgB,GAC7B,CAAC,eAAe,gBAAgB,IAAI,aAAAA,QAAM,SAAS,CAAC,GACpD,eAAW,wCAAe,GAC1B,KAAK,aAAAA,QAAM,MAAM;AAoCvB,WAlCI,QAAQ,IAAI,aAAa,iBAAiB,OAAO,WAAa,QAC3D,SACH,OAAO,SAAS,cAAc,KAAK,GACnC,KAAK,MAAM,SAAS,SACpB,KAAK,MAAM,YAAY,UACvB,KAAK,MAAM,WAAW,SACtB,KAAK,MAAM,SAAS,KACpB,KAAK,MAAM,SAAS,QACpB,KAAK,MAAM,OAAO,QAClB,KAAK,MAAM,QAAQ,QACnB,KAAK,MAAM,UAAU,QACrB,KAAK,MAAM,SAAS,kBACpB,KAAK,MAAM,gBAAgB,OAC3B,KAAK,MAAM,aAAa,qBACxB,SAAS,KAAK,YAAY,IAAI,KAIlC,aAAAA,QAAM,UAAU,MAAM;AACpB,iBAAW,cAAc,eAAe,cAAc,CAAC,MAAM,YAAY;AACvE,yBAAiB,CAAC,MAAM,EAAE,CAAC,GAC3B,QAAQ;AAAA,UACN,qBAAqB,WAAW,cAAc,EAAE,gBAAgB,WAAW,cAAc,eAAe,EAAE;AAAA,UAC1G;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH,GAAG,CAAC,WAAW,YAAY,CAAC,GAE5B,aAAAA,QAAM,UAAU,MAAM;AAEpB,YAAM,KAAK,YAAY,UAAU,GAAI;AACrC,aAAO,MAAM,aAAa,EAAS;AAAA,IACrC,GAAG,CAAC,CAAC,GAED,WAAW,qBAAqB,KAAK,CAAC,aACjC,WAIP,4EACG;AAAA;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,UAAU;AAAA,cACV,SAAS;AAAA,YACX;AAAA,YACD;AAAA;AAAA,cACY;AAAA,cAAG;AAAA,cACb,KAAK;AAAA,gBACJ;AAAA,kBACE,WAAW,WAAW;AAAA,kBACtB,MAAM,YAAY,OAAO;AAAA,kBACzB,WAAW,YAAY,OAAO;AAAA,kBAC9B,SAAS,WAAW;AAAA,kBACpB,gBAAgB,WAAW;AAAA,kBAC3B,QAAQ,WAAW,cAAc,MAAM;AAAA,kBACvC,IAAI,WAAW,cAAc;AAAA,kBAC7B,UAAU,WAAW,cAAc,eAAe;AAAA,kBAClD,OAAO,WAAW;AAAA,kBAClB;AAAA,kBACA,WAAW,CAAC,GAAI,WAAW,cAAe,iBAAoB,CAAC,CAAE,EAAE;AAAA,oBACjE;AAAA,kBACF;AAAA,kBACA,sBAAsB,WAAW,cAAe;AAAA,gBAClD;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,MAEA,4CAAC,SAAI,OAAO,EAAE,OAAO,MAAM,GAAI,cAAG;AAAA,MAEjC;AAAA,OACH;AAAA,EAEJ;AACA,SAAO;AACT;AAEA,WAAW,cAAiB;",
-  "names": ["React"]
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAAgC,wCAChC,eAA0B,kBAC1B,mBAA6B,sBAwCvB;AApCN,IAAI;AAEG,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAAsE;AACpE,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UAAM,iBAAa,2CAAgB;AAuBnC,WArBI,QAAQ,IAAI,aAAa,iBAAiB,OAAO,WAAa,QAC3D,SACH,OAAO,SAAS,cAAc,KAAK,GACnC,KAAK,MAAM,SAAS,SACpB,KAAK,MAAM,YAAY,UACvB,KAAK,MAAM,WAAW,SACtB,KAAK,MAAM,SAAS,KACpB,KAAK,MAAM,SAAS,QACpB,KAAK,MAAM,OAAO,QAClB,KAAK,MAAM,QAAQ,QACnB,KAAK,MAAM,UAAU,QACrB,KAAK,MAAM,SAAS,kBACpB,KAAK,MAAM,gBAAgB,OAC3B,KAAK,MAAM,aAAa,2BAI5B,wBAAU,MAAM;AACd,eAAS,KAAK,YAAY,IAAI;AAAA,IAChC,GAAG,CAAC,CAAC,GAED,WAAW,qBAAqB,KAAK,CAAC,aACjC,WAIP,4EACG;AAAA;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,UAAU;AAAA,cACV,SAAS;AAAA,YACX;AAAA,YACD;AAAA;AAAA,cACY,WAAW;AAAA,cAAG;AAAA,cACxB,KAAK;AAAA,gBACJ;AAAA,kBACE,MAAM,WAAW;AAAA,kBACjB,UAAU,WAAW;AAAA,kBACrB,UAAU,WAAW;AAAA,kBACrB,OAAO,WAAW;AAAA,kBAClB,YAAY;AAAA,oBACV,MAAM,WAAW;AAAA,oBACjB,eAAe,WAAW;AAAA,oBAC1B,OAAO,WAAW;AAAA,oBAClB,SAAS,WAAW;AAAA,kBACtB;AAAA,gBACF;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,MAEA,4CAAC,SAAI,OAAO,EAAE,OAAO,MAAM,GAAI,qBAAW,IAAG;AAAA,MAE5C;AAAA,OACH;AAAA,EAEJ;AACA,SAAO;AACT;AAEA,WAAW,cAAiB;",
+  "names": []
 }

package/dist/cjs/views/ThemeProvider.cjs

@@ -54,7 +54,7 @@ const ThemeProvider = props => {
     className: props.className,
     name: props.defaultTheme,
     forceClassName: !disableRootThemeClass && !themeClassNameOnRoot,
-    _isRoot: !0,
+    _isRoot: import_react.useId,
     children: props.children
   });
 };

package/dist/cjs/views/ThemeProvider.js

@@ -40,7 +40,7 @@ const ThemeProvider = (props) => {
       className: props.className,
       name: props.defaultTheme,
       forceClassName: !disableRootThemeClass && !themeClassNameOnRoot,
-      _isRoot: !0,
+      _isRoot: import_react.useId,
       children: props.children
     }
   );

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeProvider.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB,2BAClB,mBAAyB,+BAEzBA,oBAAuC,mCACvC,eAAsB,oBACtB,gBAA2B,sBAiCvB;AApBG,MAAM,gBAAgB,CAAC,UAA8B;AAC1D,QAAM,wBACJ,MAAM,6BAAyB,0BAAW,uBAAuB,GAC7D,uBACJ,MAAM,4BAAwB,0BAAW,sBAAsB;AAGjE,SAAI,6BACF,aAAAC,QAAM,gBAAgB,MAAM;AAC1B,QAAI,sBAAuB;AAC3B,UAAM,KAAK,GAAG,wCAAsB,GAAG,MAAM,YAAY,IACnD,SAAS,uBAAuB,SAAS,kBAAkB,SAAS;AAC1E,kBAAO,UAAU,IAAI,EAAE,GAChB,MAAM;AACX,aAAO,UAAU,OAAO,EAAE;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,MAAM,cAAc,uBAAuB,oBAAoB,CAAC,GAIpE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,MAAM;AAAA,MACjB,MAAM,MAAM;AAAA,MAEZ,gBAAgB,CAAC,yBAAyB,CAAC;AAAA,MAE3C,SAAO;AAAA,MAEN,gBAAM;AAAA;AAAA,EACT;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA6B,2BAC7B,mBAAyB,+BAEzBA,oBAAuC,mCACvC,eAAsB,oBACtB,gBAA2B,sBAiCvB;AApBG,MAAM,gBAAgB,CAAC,UAA8B;AAC1D,QAAM,wBACJ,MAAM,6BAAyB,0BAAW,uBAAuB,GAC7D,uBACJ,MAAM,4BAAwB,0BAAW,sBAAsB;AAGjE,SAAI,6BACF,aAAAC,QAAM,gBAAgB,MAAM;AAC1B,QAAI,sBAAuB;AAC3B,UAAM,KAAK,GAAG,wCAAsB,GAAG,MAAM,YAAY,IACnD,SAAS,uBAAuB,SAAS,kBAAkB,SAAS;AAC1E,kBAAO,UAAU,IAAI,EAAE,GAChB,MAAM;AACX,aAAO,UAAU,OAAO,EAAE;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,MAAM,cAAc,uBAAuB,oBAAoB,CAAC,GAIpE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,MAAM;AAAA,MACjB,MAAM,MAAM;AAAA,MAEZ,gBAAgB,CAAC,yBAAyB,CAAC;AAAA,MAE3C,SAAS;AAAA,MAER,gBAAM;AAAA;AAAA,EACT;AAEJ;",
   "names": ["import_constants", "React"]
 }

package/dist/cjs/views/ThemeProvider.native.js

@@ -45,7 +45,7 @@ var import_jsx_runtime = require("react/jsx-runtime"), import_react = __toESM(re
     // if root class disabled, force class here
     forceClassName: !disableRootThemeClass && !themeClassNameOnRoot,
     // @ts-expect-error
-    _isRoot: !0,
+    _isRoot: import_react.useId,
     children: props.children
   });
 };