@tamagui/web 2.7.7 → 3.0.0-beta.1093.1

package/dist/esm/views/Theme.mjs

@@ -1,161 +1,118 @@
-import { isWeb } from "@tamagui/constants";
-import React, { Children, cloneElement, forwardRef, isValidElement, useRef } from "react";
+import { createRefComponent } from "@tamagui/compose-refs";
+import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { getThemeClassNames, reservedThemeProps } from "@tamagui/helpers";
+import React, { Children, cloneElement, isValidElement, useRef } from "react";
 import { variableToString } from "../createVariable.mjs";
+import { formatDiagnostic } from "../helpers/formatDiagnostic.mjs";
+import { warnOnce } from "../helpers/warnOnce.mjs";
 import { useThemeWithState } from "../hooks/useTheme.mjs";
-import { getThemeState, hasThemeUpdatingProps, ThemeStateContext } from "../hooks/useThemeState.mjs";
+import { ThemeStateContext, getThemeState, hasThemeUpdatingProps } from "../hooks/useThemeState.mjs";
 import { ThemeDebug } from "./ThemeDebug.mjs";
 import { jsx } from "react/jsx-runtime";
-const Theme = forwardRef(function Theme2(props, ref) {
-  "use no memo";
 
-  if (props.disable) {
-    return props.children;
-  }
-  const {
-    passThrough
-  } = props;
-  const isRoot = !!props["_isRoot"];
-  const [_, themeState] = useThemeWithState(props, isRoot, true);
-  const disableDirectChildTheme = props["disable-child-theme"];
-  let finalChildren = disableDirectChildTheme ? Children.map(props.children, child => passThrough || !isValidElement(child) ? child : cloneElement(child, {
-    ["data-disable-theme"]: true
-  })) : props.children;
-  if (ref) {
-    try {
-      React.Children.only(finalChildren);
-      finalChildren = cloneElement(finalChildren, {
-        ref
-      });
-    } catch {}
-  }
-  const stateRef = useRef({
-    hasEverThemed: false
-  });
-  return getThemedChildren(themeState, finalChildren, props, isRoot, stateRef, passThrough);
+const Theme = createRefComponent(function Theme2(props, ref) {
+	"use no memo";
+	if (props.disable) return props.children;
+	if (process.env.NODE_ENV === "development") {
+		for (const key in props) if (!reservedThemeProps[key] && key !== "srcloc" && !key.startsWith("data-")) warnOnce(`theme-update:${key}`, `<Theme ${key}=...> no longer accepts inline values. Wrap the subtree in <ThemeUpdate ${key}=...> instead.`);
+	}
+	const { passThrough } = props;
+	const isRoot = !!props["_isRoot"];
+	const [_, themeState] = useThemeWithState(props, isRoot, true);
+	useIsomorphicLayoutEffect(() => {}, [
+		themeState.id,
+		themeState.name,
+		themeState.theme
+	]);
+	let finalChildren = props["disable-child-theme"] ? Children.map(props.children, (child) => passThrough || !isValidElement(child) ? child : cloneElement(child, { ["data-disable-theme"]: true })) : props.children;
+	if (ref) try {
+		React.Children.only(finalChildren);
+		finalChildren = cloneElement(finalChildren, { ref });
+	} catch {}
+	const stateRef = useRef({ hasEverThemed: false });
+	return getThemedChildren(themeState, finalChildren, props, isRoot, stateRef, passThrough);
 });
 Theme["avoidForwardRef"] = true;
 function getThemedChildren(themeState, children, props, isRoot = false, stateRef, passThrough = false) {
-  const {
-    shallow,
-    forceClassName
-  } = props;
-  const state = stateRef.current;
-  let hasEverThemed = state.hasEverThemed;
-  let shouldRenderChildrenWithTheme = hasEverThemed || themeState.isNew || isRoot || hasThemeUpdatingProps(props);
-  if (process.env.NODE_ENV === "development" && props.debug === "visualize") {
-    children = /* @__PURE__ */jsx(ThemeDebug, {
-      themeState,
-      themeProps: props,
-      children
-    });
-  }
-  if (!shouldRenderChildrenWithTheme) {
-    return children;
-  }
-  children = /* @__PURE__ */jsx(ThemeStateContext.Provider, {
-    value: themeState.id,
-    children
-  });
-  const {
-    isInverse,
-    name
-  } = themeState;
-  const requiresExtraWrapper = isInverse || forceClassName;
-  if (!state.hasEverThemed) {
-    state.hasEverThemed = true;
-  }
-  if (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";
-  }
-  if (shallow) {
-    if (!themeState.parentId) {} else {
-      const parentState = getThemeState(themeState.isNew ? themeState.id : themeState.parentId);
-      if (!parentState) throw new Error(`\u203C\uFE0F010`);
-      children = Children.toArray(children).map(child => {
-        return isValidElement(child) ? passThrough ? child : cloneElement(child, void 0, /* @__PURE__ */jsx(Theme, {
-          name: parentState.name,
-          children: child.props.children
-        })) : child;
-      });
-    }
-  }
-  if (process.env.NODE_ENV === "development") {
-    if (!passThrough && props.debug) {
-      console.warn(` getThemedChildren`, {
-        requiresExtraWrapper,
-        forceClassName,
-        themeState,
-        state,
-        themeSpanProps: getThemeClassNameAndColor(themeState, props, isRoot)
-      });
-    }
-  }
-  if (forceClassName === false) {
-    return children;
-  }
-  if (isWeb) {
-    const baseStyle = props.contain ? inertContainedStyle : inertStyle;
-    const {
-      className = "",
-      color
-    } = passThrough ? {} : getThemeClassNameAndColor(themeState, props, isRoot);
-    children = /* @__PURE__ */jsx("span", {
-      className: `${className} is_Theme`,
-      style: passThrough ? baseStyle : {
-        color,
-        ...baseStyle
-      },
-      children
-    });
-    if (state.hasEverThemed === "wrapped") {
-      const className2 = requiresExtraWrapper ? `${name.startsWith("light") ? "t_light" : name.startsWith("dark") ? "t_dark" : ""} _dsp_contents` : `_dsp_contents`;
-      children = /* @__PURE__ */jsx("span", {
-        className: className2,
-        children
-      });
-    }
-    return children;
-  }
-  return children;
+	const { shallow, forceClassName } = props;
+	const state = stateRef.current;
+	let shouldRenderChildrenWithTheme = state.hasEverThemed || themeState.isNew || isRoot || hasThemeUpdatingProps(props);
+	if (process.env.NODE_ENV === "development" && props.debug === "visualize") children = /* @__PURE__ */ jsx(ThemeDebug, {
+		themeState,
+		themeProps: props,
+		children
+	});
+	if (!shouldRenderChildrenWithTheme) return children;
+	children = /* @__PURE__ */ jsx(ThemeStateContext.Provider, {
+		value: themeState.id,
+		children
+	});
+	const { isInverse } = themeState;
+	const requiresExtraWrapper = isInverse || forceClassName;
+	if (!state.hasEverThemed) state.hasEverThemed = true;
+	if (requiresExtraWrapper || themeState.name === "dark" || themeState.name === "light") state.hasEverThemed = "wrapped";
+	if (shallow) if (!themeState.parentId) {} else {
+		const parentState = getThemeState(themeState.isNew ? themeState.id : themeState.parentId);
+		if (!parentState) throw new Error(process.env.NODE_ENV !== "production" ? formatDiagnostic("‼️010", "Theme", "parent theme state is missing for shallow rendering", "Keep <Theme shallow> inside its mounted parent Theme", "name,parentId", {
+			name: themeState.name,
+			parentId: themeState.parentId
+		}) : "❌ Error 014");
+		children = Children.toArray(children).map((child) => {
+			return isValidElement(child) ? passThrough ? child : cloneElement(child, void 0, /* @__PURE__ */ jsx(Theme, {
+				name: parentState.name,
+				children: child.props.children
+			})) : child;
+		});
+	}
+	if (process.env.NODE_ENV === "development") {
+		if (!passThrough && props.debug) console.warn(` getThemedChildren`, {
+			requiresExtraWrapper,
+			forceClassName,
+			themeState,
+			state,
+			themeSpanProps: getThemeClassNameAndColor(themeState, props, isRoot)
+		});
+	}
+	if (forceClassName === false) return children;
+	if (isWeb) {
+		const baseStyle = props.contain ? inertContainedStyle : inertStyle;
+		const { className = "", color } = passThrough ? {} : getThemeClassNameAndColor(themeState, props, isRoot);
+		const inlineClassName = passThrough ? void 0 : props._themeUpdate?.className;
+		children = /* @__PURE__ */ jsx("span", {
+			className: `${className} is_Theme${inlineClassName ? ` ${inlineClassName}` : ""}`,
+			style: passThrough ? baseStyle : {
+				color,
+				...baseStyle
+			},
+			children
+		});
+		if (state.hasEverThemed === "wrapped") {
+			const scheme = requiresExtraWrapper && themeState.schemeAuthored && themeState.scheme;
+			children = /* @__PURE__ */ jsx("span", {
+				className: scheme ? `t_${scheme} _dsp_contents` : "_dsp_contents",
+				children
+			});
+		}
+		return children;
+	}
+	return children;
 }
-const inertStyle = {
-  display: "contents"
-};
+const inertStyle = { display: "contents" };
 const inertContainedStyle = {
-  display: "contents",
-  contain: "strict"
+	display: "contents",
+	contain: "strict"
 };
 const empty = {
-  className: "",
-  color: void 0
+	className: "",
+	color: void 0
 };
-function getThemeClassNameAndColor(themeState, props, isRoot = false) {
-  if (!themeState.isNew && !props.forceClassName) {
-    return empty;
-  }
-  const themeColor = themeState?.theme && themeState.isNew ? variableToString(themeState.theme.color) : "";
-  const style = themeColor ? {
-    color: themeColor
-  } : void 0;
-  const themeClassName = themeState.name.replace(schemePrefix, "");
-  const themeNameParts = themeClassName.split("_");
-  let themeClasses = `t_${themeClassName}`;
-  if (themeNameParts.length > 1) {
-    const hierarchyClasses = [];
-    for (let i = 1; i <= themeNameParts.length; i++) {
-      hierarchyClasses.push(`t_${themeNameParts.slice(0, i).join("_")}`);
-    }
-    themeClasses = hierarchyClasses.join(" ");
-  }
-  const className = `${isRoot ? "" : "t_sub_theme"} ${themeClasses}`;
-  return {
-    color: themeColor,
-    className
-  };
+function getThemeClassNameAndColor(themeState, props, isRoot) {
+	if (!themeState.isNew && !props.forceClassName) return empty;
+	return {
+		color: themeState?.theme && themeState.isNew ? variableToString(themeState.theme.color) : "",
+		className: getThemeClassNames(themeState.name, isRoot, themeState.schemeAuthored)
+	};
 }
-const schemePrefix = /^(dark|light)_/;
+
 export { Theme, getThemedChildren };
 //# sourceMappingURL=Theme.mjs.map

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

@@ -1 +1 @@
-{"version":3,"names":["isWeb","React","Children","cloneElement","forwardRef","isValidElement","useRef","variableToString","useThemeWithState","getThemeState","hasThemeUpdatingProps","ThemeStateContext","ThemeDebug","jsx","Theme","Theme2","props","ref","disable","children","passThrough","isRoot","_","themeState","disableDirectChildTheme","finalChildren","map","child","only","stateRef","hasEverThemed","getThemedChildren","shallow","forceClassName","state","current","shouldRenderChildrenWithTheme","isNew","process","env","NODE_ENV","debug","themeProps","Provider","value","id","isInverse","name","requiresExtraWrapper","parentId","parentState","Error","toArray","console","warn","themeSpanProps","getThemeClassNameAndColor","baseStyle","contain","inertContainedStyle","inertStyle","className","color","style","startsWith","className2","display","empty","themeColor","theme","themeClassName","replace","schemePrefix","themeNameParts","split","themeClasses","length","hierarchyClasses","i","push","slice","join"],"sources":["../../../src/views/Theme.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Theme.js","names":[],"sources":["esm/views/Theme.js"],"sourcesContent":["import { createRefComponent } from \"@tamagui/compose-refs\";\nimport { isWeb, useIsomorphicLayoutEffect } from \"@tamagui/constants\";\nimport { getThemeClassNames, reservedThemeProps } from \"@tamagui/helpers\";\nimport React, { Children, cloneElement, isValidElement, useRef } from \"react\";\nimport { variableToString } from \"../createVariable\";\nimport { formatDiagnostic } from \"../helpers/formatDiagnostic\";\nimport { warnOnce } from \"../helpers/warnOnce\";\nimport { useThemeWithState } from \"../hooks/useTheme\";\nimport { ThemeStateContext, getThemeState, hasThemeUpdatingProps } from \"../hooks/useThemeState\";\nimport { ThemeDebug } from \"./ThemeDebug\";\nimport { jsx } from \"react/jsx-runtime\";\n\nconst Theme = createRefComponent(function Theme2(props, ref) {\n\t\"use no memo\";\n\tif (props.disable) return props.children;\n\tif (process.env.NODE_ENV === \"development\") {\n\t\tfor (const key in props) if (!reservedThemeProps[key] && key !== \"srcloc\" && !key.startsWith(\"data-\")) warnOnce(`theme-update:${key}`, `<Theme ${key}=...> no longer accepts inline values. Wrap the subtree in <ThemeUpdate ${key}=...> instead.`);\n\t}\n\tconst { passThrough } = props;\n\tconst isRoot = !!props[\"_isRoot\"];\n\tconst [_, themeState] = useThemeWithState(props, isRoot, true);\n\tuseIsomorphicLayoutEffect(() => {}, [\n\t\tthemeState.id,\n\t\tthemeState.name,\n\t\tthemeState.theme\n\t]);\n\tlet finalChildren = props[\"disable-child-theme\"] ? Children.map(props.children, (child) => passThrough || !isValidElement(child) ? child : cloneElement(child, { [\"data-disable-theme\"]: true })) : props.children;\n\tif (ref) try {\n\t\tReact.Children.only(finalChildren);\n\t\tfinalChildren = cloneElement(finalChildren, { ref });\n\t} catch {}\n\tconst stateRef = useRef({ hasEverThemed: false });\n\treturn getThemedChildren(themeState, finalChildren, props, isRoot, stateRef, passThrough);\n});\nTheme[\"avoidForwardRef\"] = true;\nfunction getThemedChildren(themeState, children, props, isRoot = false, stateRef, passThrough = false) {\n\tconst { shallow, forceClassName } = props;\n\tconst state = stateRef.current;\n\tlet shouldRenderChildrenWithTheme = state.hasEverThemed || themeState.isNew || isRoot || hasThemeUpdatingProps(props);\n\tif (process.env.NODE_ENV === \"development\" && props.debug === \"visualize\") children = /* @__PURE__ */ jsx(ThemeDebug, {\n\t\tthemeState,\n\t\tthemeProps: props,\n\t\tchildren\n\t});\n\tif (!shouldRenderChildrenWithTheme) return children;\n\tchildren = /* @__PURE__ */ jsx(ThemeStateContext.Provider, {\n\t\tvalue: themeState.id,\n\t\tchildren\n\t});\n\tconst { isInverse } = themeState;\n\tconst requiresExtraWrapper = isInverse || forceClassName;\n\tif (!state.hasEverThemed) state.hasEverThemed = true;\n\tif (requiresExtraWrapper || themeState.name === \"dark\" || themeState.name === \"light\") state.hasEverThemed = \"wrapped\";\n\tif (shallow) if (!themeState.parentId) {} else {\n\t\tconst parentState = getThemeState(themeState.isNew ? themeState.id : themeState.parentId);\n\t\tif (!parentState) throw new Error(process.env.NODE_ENV !== \"production\" ? formatDiagnostic(\"‼️010\", \"Theme\", \"parent theme state is missing for shallow rendering\", \"Keep <Theme shallow> inside its mounted parent Theme\", \"name,parentId\", {\n\t\t\tname: themeState.name,\n\t\t\tparentId: themeState.parentId\n\t\t}) : \"❌ Error 014\");\n\t\tchildren = Children.toArray(children).map((child) => {\n\t\t\treturn isValidElement(child) ? passThrough ? child : cloneElement(child, void 0, /* @__PURE__ */ jsx(Theme, {\n\t\t\t\tname: parentState.name,\n\t\t\t\tchildren: child.props.children\n\t\t\t})) : child;\n\t\t});\n\t}\n\tif (process.env.NODE_ENV === \"development\") {\n\t\tif (!passThrough && props.debug) console.warn(` getThemedChildren`, {\n\t\t\trequiresExtraWrapper,\n\t\t\tforceClassName,\n\t\t\tthemeState,\n\t\t\tstate,\n\t\t\tthemeSpanProps: getThemeClassNameAndColor(themeState, props, isRoot)\n\t\t});\n\t}\n\tif (forceClassName === false) return children;\n\tif (isWeb) {\n\t\tconst baseStyle = props.contain ? inertContainedStyle : inertStyle;\n\t\tconst { className = \"\", color } = passThrough ? {} : getThemeClassNameAndColor(themeState, props, isRoot);\n\t\tconst inlineClassName = passThrough ? void 0 : props._themeUpdate?.className;\n\t\tchildren = /* @__PURE__ */ jsx(\"span\", {\n\t\t\tclassName: `${className} is_Theme${inlineClassName ? ` ${inlineClassName}` : \"\"}`,\n\t\t\tstyle: passThrough ? baseStyle : {\n\t\t\t\tcolor,\n\t\t\t\t...baseStyle\n\t\t\t},\n\t\t\tchildren\n\t\t});\n\t\tif (state.hasEverThemed === \"wrapped\") {\n\t\t\tconst scheme = requiresExtraWrapper && themeState.schemeAuthored && themeState.scheme;\n\t\t\tchildren = /* @__PURE__ */ jsx(\"span\", {\n\t\t\t\tclassName: scheme ? `t_${scheme} _dsp_contents` : \"_dsp_contents\",\n\t\t\t\tchildren\n\t\t\t});\n\t\t}\n\t\treturn children;\n\t}\n\treturn children;\n}\nconst inertStyle = { display: \"contents\" };\nconst inertContainedStyle = {\n\tdisplay: \"contents\",\n\tcontain: \"strict\"\n};\nconst empty = {\n\tclassName: \"\",\n\tcolor: void 0\n};\nfunction getThemeClassNameAndColor(themeState, props, isRoot) {\n\tif (!themeState.isNew && !props.forceClassName) return empty;\n\treturn {\n\t\tcolor: themeState?.theme && themeState.isNew ? variableToString(themeState.theme.color) : \"\",\n\t\tclassName: getThemeClassNames(themeState.name, isRoot, themeState.schemeAuthored)\n\t};\n}\n\nexport { Theme, getThemedChildren };"],"mappings":"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"}

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

@@ -1,167 +1,128 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { isWeb } from "@tamagui/constants";
-import React, { Children, cloneElement, forwardRef, isValidElement, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { createRefComponent } from "@tamagui/compose-refs";
+import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { getThemeClassNames, reservedThemeProps } from "@tamagui/helpers";
+import React, { Children, cloneElement, isValidElement, useRef } from "react";
 import { variableToString } from "../createVariable.native.js";
+import { formatDiagnostic } from "../helpers/formatDiagnostic.native.js";
+import { removeNativeStyleScope, updateNativeStyleScope } from "../helpers/nativeStyleEngine.native.js";
+import { warnOnce } from "../helpers/warnOnce.native.js";
 import { useThemeWithState } from "../hooks/useTheme.native.js";
-import { getThemeState, hasThemeUpdatingProps, ThemeStateContext } from "../hooks/useThemeState.native.js";
+import { ThemeStateContext, getThemeState, hasThemeUpdatingProps } from "../hooks/useThemeState.native.js";
 import { ThemeDebug } from "./ThemeDebug.native.js";
-var Theme = /* @__PURE__ */forwardRef(function Theme2(props, ref) {
-  "use no memo";
 
-  if (props.disable) {
-    return props.children;
-  }
-  var {
-    passThrough
-  } = props;
-  var isRoot = !!props["_isRoot"];
-  var [_, themeState] = useThemeWithState(props, isRoot, true);
-  var disableDirectChildTheme = props["disable-child-theme"];
-  var finalChildren = disableDirectChildTheme ? Children.map(props.children, function (child) {
-    return passThrough || ! /* @__PURE__ */isValidElement(child) ? child : /* @__PURE__ */cloneElement(child, {
-      ["data-disable-theme"]: true
-    });
-  }) : props.children;
-  if (ref) {
-    try {
-      React.Children.only(finalChildren);
-      finalChildren = /* @__PURE__ */cloneElement(finalChildren, {
-        ref
-      });
-    } catch (e) {}
-  }
-  var stateRef = useRef({
-    hasEverThemed: false
-  });
-  return getThemedChildren(themeState, finalChildren, props, isRoot, stateRef, passThrough);
+var Theme = createRefComponent(function Theme2(props, ref) {
+	"use no memo";
+	if (props.disable) return props.children;
+	if (process.env.NODE_ENV === "development") {
+		for (var key in props) if (!reservedThemeProps[key] && key !== "srcloc" && !key.startsWith("data-")) warnOnce(`theme-update:${key}`, `<Theme ${key}=...> no longer accepts inline values. Wrap the subtree in <ThemeUpdate ${key}=...> instead.`);
+	}
+	var { passThrough } = props;
+	var isRoot = !!props["_isRoot"];
+	var [_, themeState] = useThemeWithState(props, isRoot, true);
+	useIsomorphicLayoutEffect(function() {
+		updateNativeStyleScope(themeState.id, themeState.name, themeState.theme);
+		return function() {
+			return removeNativeStyleScope(themeState.id);
+		};
+	}, [
+		themeState.id,
+		themeState.name,
+		themeState.theme
+	]);
+	var finalChildren = props["disable-child-theme"] ? Children.map(props.children, function(child) {
+		return passThrough || !/* @__PURE__ */ isValidElement(child) ? child : /* @__PURE__ */ cloneElement(child, { ["data-disable-theme"]: true });
+	}) : props.children;
+	if (ref) try {
+		React.Children.only(finalChildren);
+		finalChildren = /* @__PURE__ */ cloneElement(finalChildren, { ref });
+	} catch (e) {}
+	var stateRef = useRef({ hasEverThemed: false });
+	return getThemedChildren(themeState, finalChildren, props, isRoot, stateRef, passThrough);
 });
 Theme["avoidForwardRef"] = true;
 function getThemedChildren(themeState, children, props) {
-  var isRoot = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false,
-    stateRef = arguments.length > 4 ? arguments[4] : void 0,
-    passThrough = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : false;
-  var {
-    shallow,
-    forceClassName
-  } = props;
-  var state = stateRef.current;
-  var hasEverThemed = state.hasEverThemed;
-  var shouldRenderChildrenWithTheme = hasEverThemed || themeState.isNew || isRoot || hasThemeUpdatingProps(props);
-  if (process.env.NODE_ENV === "development" && props.debug === "visualize") {
-    children = /* @__PURE__ */_jsx(ThemeDebug, {
-      themeState,
-      themeProps: props,
-      children
-    });
-  }
-  if (!shouldRenderChildrenWithTheme) {
-    return children;
-  }
-  children = /* @__PURE__ */_jsx(ThemeStateContext.Provider, {
-    value: themeState.id,
-    children
-  });
-  var {
-    isInverse,
-    name
-  } = themeState;
-  var requiresExtraWrapper = isInverse || forceClassName;
-  if (!state.hasEverThemed) {
-    state.hasEverThemed = true;
-  }
-  if (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";
-  }
-  if (shallow) {
-    if (!themeState.parentId) {} else {
-      var parentState = getThemeState(themeState.isNew ? themeState.id : themeState.parentId);
-      if (!parentState) throw new Error(`\u203C\uFE0F010`);
-      children = Children.toArray(children).map(function (child) {
-        return /* @__PURE__ */isValidElement(child) ? passThrough ? child : /* @__PURE__ */cloneElement(child, void 0, /* @__PURE__ */_jsx(Theme, {
-          name: parentState.name,
-          children: child.props.children
-        })) : child;
-      });
-    }
-  }
-  if (process.env.NODE_ENV === "development") {
-    if (!passThrough && props.debug) {
-      console.warn(` getThemedChildren`, {
-        requiresExtraWrapper,
-        forceClassName,
-        themeState,
-        state,
-        themeSpanProps: getThemeClassNameAndColor(themeState, props, isRoot)
-      });
-    }
-  }
-  if (forceClassName === false) {
-    return children;
-  }
-  if (isWeb) {
-    var baseStyle = props.contain ? inertContainedStyle : inertStyle;
-    var {
-      className = "",
-      color
-    } = passThrough ? {} : getThemeClassNameAndColor(themeState, props, isRoot);
-    children = /* @__PURE__ */_jsx("span", {
-      className: `${className} is_Theme`,
-      style: passThrough ? baseStyle : {
-        color,
-        ...baseStyle
-      },
-      children
-    });
-    if (state.hasEverThemed === "wrapped") {
-      var className1 = requiresExtraWrapper ? `${name.startsWith("light") ? "t_light" : name.startsWith("dark") ? "t_dark" : ""} _dsp_contents` : `_dsp_contents`;
-      children = /* @__PURE__ */_jsx("span", {
-        className: className1,
-        children
-      });
-    }
-    return children;
-  }
-  return children;
+	var isRoot = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false, stateRef = arguments.length > 4 ? arguments[4] : void 0, passThrough = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : false;
+	var { shallow, forceClassName } = props;
+	var state = stateRef.current;
+	var shouldRenderChildrenWithTheme = state.hasEverThemed || themeState.isNew || isRoot || hasThemeUpdatingProps(props);
+	if (process.env.NODE_ENV === "development" && props.debug === "visualize") children = /* @__PURE__ */ jsx(ThemeDebug, {
+		themeState,
+		themeProps: props,
+		children
+	});
+	if (!shouldRenderChildrenWithTheme) return children;
+	children = /* @__PURE__ */ jsx(ThemeStateContext.Provider, {
+		value: themeState.id,
+		children
+	});
+	var { isInverse } = themeState;
+	var requiresExtraWrapper = isInverse || forceClassName;
+	if (!state.hasEverThemed) state.hasEverThemed = true;
+	if (requiresExtraWrapper || themeState.name === "dark" || themeState.name === "light") state.hasEverThemed = "wrapped";
+	if (shallow) if (!themeState.parentId) {} else {
+		var parentState = getThemeState(themeState.isNew ? themeState.id : themeState.parentId);
+		if (!parentState) throw new Error(process.env.NODE_ENV !== "production" ? formatDiagnostic("‼️010", "Theme", "parent theme state is missing for shallow rendering", "Keep <Theme shallow> inside its mounted parent Theme", "name,parentId", {
+			name: themeState.name,
+			parentId: themeState.parentId
+		}) : "❌ Error 014");
+		children = Children.toArray(children).map(function(child) {
+			return /* @__PURE__ */ isValidElement(child) ? passThrough ? child : /* @__PURE__ */ cloneElement(child, void 0, /* @__PURE__ */ jsx(Theme, {
+				name: parentState.name,
+				children: child.props.children
+			})) : child;
+		});
+	}
+	if (process.env.NODE_ENV === "development") {
+		if (!passThrough && props.debug) console.warn(` getThemedChildren`, {
+			requiresExtraWrapper,
+			forceClassName,
+			themeState,
+			state,
+			themeSpanProps: getThemeClassNameAndColor(themeState, props, isRoot)
+		});
+	}
+	if (forceClassName === false) return children;
+	if (isWeb) {
+		var _props__themeUpdate;
+		var baseStyle = props.contain ? inertContainedStyle : inertStyle;
+		var { className = "", color } = passThrough ? {} : getThemeClassNameAndColor(themeState, props, isRoot);
+		var inlineClassName = passThrough ? void 0 : (_props__themeUpdate = props._themeUpdate) === null || _props__themeUpdate === void 0 ? void 0 : _props__themeUpdate.className;
+		children = /* @__PURE__ */ jsx("span", {
+			className: `${className} is_Theme${inlineClassName ? ` ${inlineClassName}` : ""}`,
+			style: passThrough ? baseStyle : {
+				color,
+				...baseStyle
+			},
+			children
+		});
+		if (state.hasEverThemed === "wrapped") {
+			var scheme = requiresExtraWrapper && themeState.schemeAuthored && themeState.scheme;
+			children = /* @__PURE__ */ jsx("span", {
+				className: scheme ? `t_${scheme} _dsp_contents` : "_dsp_contents",
+				children
+			});
+		}
+		return children;
+	}
+	return children;
 }
-var inertStyle = {
-  display: "contents"
-};
+var inertStyle = { display: "contents" };
 var inertContainedStyle = {
-  display: "contents",
-  contain: "strict"
+	display: "contents",
+	contain: "strict"
 };
 var empty = {
-  className: "",
-  color: void 0
+	className: "",
+	color: void 0
 };
-function getThemeClassNameAndColor(themeState, props) {
-  var isRoot = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
-  if (!themeState.isNew && !props.forceClassName) {
-    return empty;
-  }
-  var themeColor = (themeState === null || themeState === void 0 ? void 0 : themeState.theme) && themeState.isNew ? variableToString(themeState.theme.color) : "";
-  var style = themeColor ? {
-    color: themeColor
-  } : void 0;
-  var themeClassName = themeState.name.replace(schemePrefix, "");
-  var themeNameParts = themeClassName.split("_");
-  var themeClasses = `t_${themeClassName}`;
-  if (themeNameParts.length > 1) {
-    var hierarchyClasses = [];
-    for (var i = 1; i <= themeNameParts.length; i++) {
-      hierarchyClasses.push(`t_${themeNameParts.slice(0, i).join("_")}`);
-    }
-    themeClasses = hierarchyClasses.join(" ");
-  }
-  var className = `${isRoot ? "" : "t_sub_theme"} ${themeClasses}`;
-  return {
-    color: themeColor,
-    className
-  };
+function getThemeClassNameAndColor(themeState, props, isRoot) {
+	if (!themeState.isNew && !props.forceClassName) return empty;
+	return {
+		color: (themeState === null || themeState === void 0 ? void 0 : themeState.theme) && themeState.isNew ? variableToString(themeState.theme.color) : "",
+		className: getThemeClassNames(themeState.name, isRoot, themeState.schemeAuthored)
+	};
 }
-var schemePrefix = /^(dark|light)_/;
+
 export { Theme, getThemedChildren };
 //# sourceMappingURL=Theme.native.js.map