@hanzogui/web 3.0.6 → 4.4.0

package/dist/cjs/views/Theme.cjs

@@ -2,123 +2,155 @@ 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 __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  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);
+// 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: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 var Theme_exports = {};
 __export(Theme_exports, {
   Theme: () => Theme,
   getThemedChildren: () => getThemedChildren
 });
 module.exports = __toCommonJS(Theme_exports);
-var import_constants = require("@hanzogui/constants"),
-  import_react = __toESM(require("react"), 1),
-  import_createVariable = require("../createVariable.cjs"),
-  import_useTheme = require("../hooks/useTheme.cjs"),
-  import_useThemeState = require("../hooks/useThemeState.cjs"),
-  import_ThemeDebug = require("./ThemeDebug.cjs"),
-  import_jsx_runtime = require("react/jsx-runtime");
-const Theme = (0, import_react.forwardRef)(function (props, ref) {
+var import_constants = require("@hanzogui/constants");
+var import_react = __toESM(require("react"), 1);
+var import_createVariable = require("../createVariable.cjs");
+var import_useTheme = require("../hooks/useTheme.cjs");
+var import_useThemeState = require("../hooks/useThemeState.cjs");
+var import_ThemeDebug = require("./ThemeDebug.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const Theme = (0, import_react.forwardRef)(function Theme2(props, ref) {
   "use no memo";
 
-  if (props.disable) return props.children;
+  if (props.disable) {
+    return props.children;
+  }
   const {
-      passThrough
-    } = props,
-    isRoot = !!props._isRoot,
-    [_, themeState] = (0, import_useTheme.useThemeWithState)(props, isRoot);
-  let finalChildren = props["disable-child-theme"] ? import_react.Children.map(props.children, child => passThrough || !(0, import_react.isValidElement)(child) ? child : (0, import_react.cloneElement)(child, {
-    "data-disable-theme": !0
+    passThrough
+  } = props;
+  const isRoot = !!props["_isRoot"];
+  const [_, themeState] = (0, import_useTheme.useThemeWithState)(props, isRoot);
+  const disableDirectChildTheme = props["disable-child-theme"];
+  let finalChildren = disableDirectChildTheme ? import_react.Children.map(props.children, child => passThrough || !(0, import_react.isValidElement)(child) ? child : (0, import_react.cloneElement)(child, {
+    ["data-disable-theme"]: true
   })) : props.children;
-  if (ref) try {
-    import_react.default.Children.only(finalChildren), finalChildren = (0, import_react.cloneElement)(finalChildren, {
-      ref
-    });
-  } catch {}
+  if (ref) {
+    try {
+      import_react.default.Children.only(finalChildren);
+      finalChildren = (0, import_react.cloneElement)(finalChildren, {
+        ref
+      });
+    } catch {}
+  }
   const stateRef = (0, import_react.useRef)({
-    hasEverThemed: !1
+    hasEverThemed: false
   });
   return getThemedChildren(themeState, finalChildren, props, isRoot, stateRef, passThrough);
 });
-Theme.avoidForwardRef = !0;
-function getThemedChildren(themeState, children, props, isRoot = !1, stateRef, passThrough = !1) {
+Theme["avoidForwardRef"] = true;
+function getThemedChildren(themeState, children, props, isRoot = false, stateRef, passThrough = false) {
   const {
-      shallow,
-      forceClassName
-    } = props,
-    state = stateRef.current;
-  let shouldRenderChildrenWithTheme = state.hasEverThemed || themeState.isNew || isRoot || (0, import_useThemeState.hasThemeUpdatingProps)(props);
-  if (process.env.NODE_ENV === "development" && props.debug === "visualize" && (children = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, {
-    themeState,
-    themeProps: props,
-    children
-  })), !shouldRenderChildrenWithTheme) return children;
+    shallow,
+    forceClassName
+  } = props;
+  const state = stateRef.current;
+  let hasEverThemed = state.hasEverThemed;
+  let shouldRenderChildrenWithTheme = hasEverThemed || themeState.isNew || isRoot || (0, import_useThemeState.hasThemeUpdatingProps)(props);
+  if (process.env.NODE_ENV === "development" && props.debug === "visualize") {
+    children = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, {
+      themeState,
+      themeProps: props,
+      children
+    });
+  }
+  if (!shouldRenderChildrenWithTheme) {
+    return children;
+  }
   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 ||
+    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"), 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) ? passThrough ? child : (0, import_react.cloneElement)(child, void 0, /* @__PURE__ */(0, import_jsx_runtime.jsx)(Theme, {
-      name: parentState.name,
-      children: child.props.children
-    })) : child);
+  themeState.name === "dark" || themeState.name === "light") {
+    state.hasEverThemed = "wrapped";
+  }
+  if (shallow) {
+    if (!themeState.parentId) {} else {
+      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 => {
+        return (0, import_react.isValidElement)(child) ? passThrough ? 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") {
+    if (!passThrough && props.debug) {
+      console.warn(` getThemedChildren`, {
+        requiresExtraWrapper,
+        forceClassName,
+        themeState,
+        state,
+        themeSpanProps: getThemeClassNameAndColor(themeState, props, isRoot)
+      });
+    }
+  }
+  if (forceClassName === false) {
+    return children;
   }
-  if (process.env.NODE_ENV === "development" && !passThrough && props.debug && console.warn(" getThemedChildren", {
-    requiresExtraWrapper,
-    forceClassName,
-    themeState,
-    state,
-    themeSpanProps: getThemeClassNameAndColor(themeState, props, isRoot)
-  }), forceClassName === !1) return children;
   if (import_constants.isWeb) {
-    const baseStyle = props.contain ? inertContainedStyle : inertStyle,
-      {
-        className = "",
-        color
-      } = passThrough ? {} : getThemeClassNameAndColor(themeState, props, isRoot);
-    if (children = /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+    const baseStyle = props.contain ? inertContainedStyle : inertStyle;
+    const {
+      className = "",
+      color
+    } = passThrough ? {} : getThemeClassNameAndColor(themeState, props, isRoot);
+    children = /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
       className: `${className} is_Theme`,
       style: passThrough ? baseStyle : {
         color,
         ...baseStyle
       },
       children
-    }), state.hasEverThemed === "wrapped") {
-      const className2 = requiresExtraWrapper ? `${name.startsWith("light") ? "t_light" : name.startsWith("dark") ? "t_dark" : ""} _dsp_contents` : "_dsp_contents";
+    });
+    if (state.hasEverThemed === "wrapped") {
+      const className2 = requiresExtraWrapper ? `${name.startsWith("light") ? "t_light" : name.startsWith("dark") ? "t_dark" : ""} _dsp_contents` : `_dsp_contents`;
       children = /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
         className: className2,
         children
@@ -129,28 +161,32 @@ function getThemedChildren(themeState, children, props, isRoot = !1, stateRef, p
   return children;
 }
 const inertStyle = {
-    display: "contents"
-  },
-  inertContainedStyle = {
-    display: "contents",
-    contain: "strict"
-  },
-  empty = {
-    className: "",
-    color: void 0
-  };
-function getThemeClassNameAndColor(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,
-    themeClassName = themeState.name.replace(schemePrefix, ""),
-    themeNameParts = themeClassName.split("_");
+  display: "contents"
+};
+const inertContainedStyle = {
+  display: "contents",
+  contain: "strict"
+};
+const empty = {
+  className: "",
+  color: void 0
+};
+function getThemeClassNameAndColor(themeState, props, isRoot = false) {
+  if (!themeState.isNew && !props.forceClassName) {
+    return empty;
+  }
+  const themeColor = themeState?.theme && themeState.isNew ? (0, import_createVariable.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("_")}`);
+    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}`;

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

@@ -4,132 +4,160 @@ 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 __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  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);
+// 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: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 var Theme_exports = {};
 __export(Theme_exports, {
   Theme: () => Theme,
   getThemedChildren: () => getThemedChildren
 });
 module.exports = __toCommonJS(Theme_exports);
-var import_jsx_runtime = require("react/jsx-runtime"),
-  import_constants = require("@hanzogui/constants"),
-  import_react = __toESM(require("react"), 1),
-  import_createVariable = require("../createVariable.native.js"),
-  import_useTheme = require("../hooks/useTheme.native.js"),
-  import_useThemeState = require("../hooks/useThemeState.native.js"),
-  import_ThemeDebug = require("./ThemeDebug.native.js"),
-  Theme = /* @__PURE__ */(0, import_react.forwardRef)(function (props, ref) {
-    "use no memo";
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_constants = require("@hanzogui/constants");
+var import_react = __toESM(require("react"), 1);
+var import_createVariable = require("../createVariable.native.js");
+var import_useTheme = require("../hooks/useTheme.native.js");
+var import_useThemeState = require("../hooks/useThemeState.native.js");
+var import_ThemeDebug = require("./ThemeDebug.native.js");
+var Theme = /* @__PURE__ */(0, import_react.forwardRef)(function Theme2(props, ref) {
+  "use no memo";
 
-    if (props.disable) return props.children;
-    var {
-        passThrough
-      } = props,
-      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 passThrough || ! /* @__PURE__ */(0, import_react.isValidElement)(child) ? child : /* @__PURE__ */(0, import_react.cloneElement)(child, {
-          "data-disable-theme": !0
-        });
-      }) : props.children;
-    if (ref) try {
-      import_react.default.Children.only(finalChildren), finalChildren = /* @__PURE__ */(0, import_react.cloneElement)(finalChildren, {
+  if (props.disable) {
+    return props.children;
+  }
+  var {
+    passThrough
+  } = props;
+  var isRoot = !!props["_isRoot"];
+  var [_, themeState] = (0, import_useTheme.useThemeWithState)(props, isRoot);
+  var disableDirectChildTheme = props["disable-child-theme"];
+  var finalChildren = disableDirectChildTheme ? import_react.Children.map(props.children, function (child) {
+    return passThrough || ! /* @__PURE__ */(0, import_react.isValidElement)(child) ? child : /* @__PURE__ */(0, import_react.cloneElement)(child, {
+      ["data-disable-theme"]: true
+    });
+  }) : props.children;
+  if (ref) {
+    try {
+      import_react.default.Children.only(finalChildren);
+      finalChildren = /* @__PURE__ */(0, import_react.cloneElement)(finalChildren, {
         ref
       });
-    } catch {}
-    var stateRef = (0, import_react.useRef)({
-      hasEverThemed: !1
-    });
-    return getThemedChildren(themeState, finalChildren, props, isRoot, stateRef, passThrough);
+    } catch (e) {}
+  }
+  var stateRef = (0, import_react.useRef)({
+    hasEverThemed: false
   });
-Theme.avoidForwardRef = !0;
+  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] : !1,
+  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] : !1,
-    {
-      shallow,
-      forceClassName
-    } = props,
-    state = stateRef.current,
-    hasEverThemed = state.hasEverThemed,
-    shouldRenderChildrenWithTheme = hasEverThemed || themeState.isNew || isRoot || (0, import_useThemeState.hasThemeUpdatingProps)(props);
-  if (process.env.NODE_ENV === "development" && props.debug === "visualize" && (children = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, {
-    themeState,
-    themeProps: props,
-    children
-  })), !shouldRenderChildrenWithTheme) return children;
+    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 || (0, import_useThemeState.hasThemeUpdatingProps)(props);
+  if (process.env.NODE_ENV === "development" && props.debug === "visualize") {
+    children = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, {
+      themeState,
+      themeProps: props,
+      children
+    });
+  }
+  if (!shouldRenderChildrenWithTheme) {
+    return children;
+  }
   children = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_useThemeState.ThemeStateContext.Provider, {
     value: themeState.id,
     children
   });
   var {
-      isInverse,
-      name
-    } = themeState,
-    requiresExtraWrapper = isInverse || forceClassName;
-  if (state.hasEverThemed || (state.hasEverThemed = !0), (requiresExtraWrapper ||
+    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"), 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) ? passThrough ? child : /* @__PURE__ */(0, import_react.cloneElement)(child, void 0, /* @__PURE__ */(0, import_jsx_runtime.jsx)(Theme, {
-        name: parentState.name,
-        children: child.props.children
-      })) : child;
-    });
+  themeState.name === "dark" || themeState.name === "light") {
+    state.hasEverThemed = "wrapped";
+  }
+  if (shallow) {
+    if (!themeState.parentId) {} else {
+      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) ? passThrough ? child : /* @__PURE__ */(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") {
+    if (!passThrough && props.debug) {
+      console.warn(` getThemedChildren`, {
+        requiresExtraWrapper,
+        forceClassName,
+        themeState,
+        state,
+        themeSpanProps: getThemeClassNameAndColor(themeState, props, isRoot)
+      });
+    }
+  }
+  if (forceClassName === false) {
+    return children;
   }
-  if (process.env.NODE_ENV === "development" && !passThrough && props.debug && console.warn(" getThemedChildren", {
-    requiresExtraWrapper,
-    forceClassName,
-    themeState,
-    state,
-    themeSpanProps: getThemeClassNameAndColor(themeState, props, isRoot)
-  }), forceClassName === !1) return children;
   if (import_constants.isWeb) {
-    var baseStyle = props.contain ? inertContainedStyle : inertStyle,
-      {
-        className = "",
-        color
-      } = passThrough ? {} : getThemeClassNameAndColor(themeState, props, isRoot);
-    if (children = /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+    var baseStyle = props.contain ? inertContainedStyle : inertStyle;
+    var {
+      className = "",
+      color
+    } = passThrough ? {} : getThemeClassNameAndColor(themeState, props, isRoot);
+    children = /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
       className: `${className} is_Theme`,
       style: passThrough ? baseStyle : {
         color,
         ...baseStyle
       },
       children
-    }), state.hasEverThemed === "wrapped") {
-      var className1 = requiresExtraWrapper ? `${name.startsWith("light") ? "t_light" : name.startsWith("dark") ? "t_dark" : ""} _dsp_contents` : "_dsp_contents";
+    });
+    if (state.hasEverThemed === "wrapped") {
+      var className1 = requiresExtraWrapper ? `${name.startsWith("light") ? "t_light" : name.startsWith("dark") ? "t_dark" : ""} _dsp_contents` : `_dsp_contents`;
       children = /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
         className: className1,
         children
@@ -140,28 +168,33 @@ function getThemedChildren(themeState, children, props) {
   return children;
 }
 var inertStyle = {
-    display: "contents"
-  },
-  inertContainedStyle = {
-    display: "contents",
-    contain: "strict"
-  },
-  empty = {
-    className: "",
-    color: void 0
-  };
+  display: "contents"
+};
+var inertContainedStyle = {
+  display: "contents",
+  contain: "strict"
+};
+var empty = {
+  className: "",
+  color: void 0
+};
 function getThemeClassNameAndColor(themeState, props) {
-  var isRoot = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1;
-  if (!themeState.isNew && !props.forceClassName) return empty;
-  var themeColor = themeState?.theme && themeState.isNew ? (0, import_createVariable.variableToString)(themeState.theme.color) : "",
-    style = themeColor ? {
-      color: themeColor
-    } : void 0,
-    themeClassName = themeState.name.replace(schemePrefix, ""),
-    themeNameParts = themeClassName.split("_"),
-    themeClasses = `t_${themeClassName}`;
+  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 ? (0, import_createVariable.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) {
-    for (var hierarchyClasses = [], i = 1; i <= themeNameParts.length; i++) hierarchyClasses.push(`t_${themeNameParts.slice(0, i).join("_")}`);
+    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}`;