@hanzogui/static 3.0.5 → 4.3.1

package/dist/extractor/createExtractor.cjs

@@ -2,69 +2,72 @@ 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 createExtractor_exports = {};
 __export(createExtractor_exports, {
   createExtractor: () => createExtractor
 });
 module.exports = __toCommonJS(createExtractor_exports);
-var import_traverse = __toESM(require("@babel/traverse")),
-  t = __toESM(require("@babel/types")),
-  import_cli_color = require("@hanzogui/cli-color"),
-  reactNativeWebInternals = __toESM(require("@hanzogui/react-native-web-internals")),
-  import_web = require("@hanzogui/web"),
-  import_node_fs = require("node:fs"),
-  import_node_path = require("node:path"),
-  import_typescript = require("typescript"),
-  import_constants = require("../constants.cjs"),
-  import_requireGuiCore = require("../helpers/requireGuiCore.cjs"),
-  import_createEvaluator = require("./createEvaluator.cjs"),
-  import_evaluateAstNode = require("./evaluateAstNode.cjs"),
-  import_extractHelpers = require("./extractHelpers.cjs"),
-  import_findTopmostFunction = require("./findTopmostFunction.cjs"),
-  import_getStaticBindingsForScope = require("./getStaticBindingsForScope.cjs"),
-  import_literalToAst = require("./literalToAst.cjs"),
-  import_loadGui = require("./loadGui.cjs"),
-  import_logLines = require("./logLines.cjs"),
-  import_normalizeTernaries = require("./normalizeTernaries.cjs"),
-  import_propsToFontFamilyCache = require("./propsToFontFamilyCache.cjs"),
-  import_timer = require("./timer.cjs"),
-  import_validHTMLAttributes = require("./validHTMLAttributes.cjs"),
-  import_errors = require("./errors.cjs"),
-  import_esbuildTsconfigPaths = require("./esbuildTsconfigPaths.cjs");
+var import_traverse = __toESM(require("@babel/traverse"));
+var t = __toESM(require("@babel/types"));
+var import_cli_color = require("@hanzogui/cli-color");
+var reactNativeWebInternals = __toESM(require("@hanzogui/react-native-web-internals"));
+var import_web = require("@hanzogui/web");
+var import_node_fs = require("node:fs");
+var import_node_path = require("node:path");
+var import_typescript = require("typescript");
+var import_constants = require("../constants.cjs");
+var import_requireGuiCore = require("../helpers/requireGuiCore.cjs");
+var import_createEvaluator = require("./createEvaluator.cjs");
+var import_evaluateAstNode = require("./evaluateAstNode.cjs");
+var import_extractHelpers = require("./extractHelpers.cjs");
+var import_findTopmostFunction = require("./findTopmostFunction.cjs");
+var import_getStaticBindingsForScope = require("./getStaticBindingsForScope.cjs");
+var import_literalToAst = require("./literalToAst.cjs");
+var import_loadGui = require("./loadGui.cjs");
+var import_logLines = require("./logLines.cjs");
+var import_normalizeTernaries = require("./normalizeTernaries.cjs");
+var import_propsToFontFamilyCache = require("./propsToFontFamilyCache.cjs");
+var import_timer = require("./timer.cjs");
+var import_validHTMLAttributes = require("./validHTMLAttributes.cjs");
+var import_errors = require("./errors.cjs");
+var import_esbuildTsconfigPaths = require("./esbuildTsconfigPaths.cjs");
 const UNTOUCHED_PROPS = {
-    key: !0,
-    style: !0,
-    className: !0
-  },
-  createTernary = x => x;
-let hasLoggedBaseInfo = !1;
+  key: true,
+  style: true,
+  className: true
+};
+const nativeOnlyPlatforms = /* @__PURE__ */new Set(["android", "ios", "tv", "androidtv", "tvos"]);
+const createTernary = x => x;
+let hasLoggedBaseInfo = false;
 function isFullyDisabled(props) {
   return props.disableExtraction && props.disableDebugAttr;
 }
@@ -75,74 +78,76 @@ function createExtractor({
   logger: console
 }) {
   const INLINE_EXTRACTABLE = {
-      ref: "ref",
-      key: "key",
-      ...(platform === "web" && {
-        onPress: "onClick",
-        onHoverIn: "onMouseEnter",
-        onHoverOut: "onMouseLeave",
-        onPressIn: "onMouseDown",
-        onPressOut: "onMouseUp"
-      }),
-      ...(platform === "native" && {
-        // native view props that should pass through without preventing flattening
-        testID: "testID",
-        nativeID: "nativeID",
-        accessibilityLabel: "accessibilityLabel",
-        accessibilityHint: "accessibilityHint",
-        accessibilityRole: "accessibilityRole",
-        accessibilityState: "accessibilityState",
-        accessibilityValue: "accessibilityValue",
-        accessibilityActions: "accessibilityActions",
-        accessibilityLabelledBy: "accessibilityLabelledBy",
-        accessibilityLiveRegion: "accessibilityLiveRegion",
-        accessibilityElementsHidden: "accessibilityElementsHidden",
-        accessibilityViewIsModal: "accessibilityViewIsModal",
-        importantForAccessibility: "importantForAccessibility",
-        collapsable: "collapsable",
-        needsOffscreenAlphaCompositing: "needsOffscreenAlphaCompositing",
-        removeClippedSubviews: "removeClippedSubviews",
-        renderToHardwareTextureAndroid: "renderToHardwareTextureAndroid",
-        shouldRasterizeIOS: "shouldRasterizeIOS",
-        hitSlop: "hitSlop",
-        pointerEvents: "pointerEvents"
-      })
-    },
-    componentState = {
-      focus: !1,
-      focusVisible: !1,
-      focusWithin: !1,
-      hover: !1,
-      unmounted: !0,
-      press: !1,
-      pressIn: !1,
-      disabled: !1
-    },
-    styleProps = {
-      resolveValues: "variable",
-      noClass: !1,
-      isAnimated: !1
-    },
-    shouldAddDebugProp =
-    // really basic disable this for next.js because it messes with ssr
-    !process.env.npm_package_dependencies_next && !0 && process.env.IDENTIFY_TAGS !== "false" && (process.env.NODE_ENV === "development" || process.env.IDENTIFY_TAGS);
+    ref: "ref",
+    key: "key",
+    ...(platform === "web" && {
+      onPress: "onClick",
+      onHoverIn: "onMouseEnter",
+      onHoverOut: "onMouseLeave",
+      onPressIn: "onMouseDown",
+      onPressOut: "onMouseUp"
+    }),
+    ...(platform === "native" && {
+      // native view props that should pass through without preventing flattening
+      testID: "testID",
+      nativeID: "nativeID",
+      accessibilityLabel: "accessibilityLabel",
+      accessibilityHint: "accessibilityHint",
+      accessibilityRole: "accessibilityRole",
+      accessibilityState: "accessibilityState",
+      accessibilityValue: "accessibilityValue",
+      accessibilityActions: "accessibilityActions",
+      accessibilityLabelledBy: "accessibilityLabelledBy",
+      accessibilityLiveRegion: "accessibilityLiveRegion",
+      accessibilityElementsHidden: "accessibilityElementsHidden",
+      accessibilityViewIsModal: "accessibilityViewIsModal",
+      importantForAccessibility: "importantForAccessibility",
+      collapsable: "collapsable",
+      needsOffscreenAlphaCompositing: "needsOffscreenAlphaCompositing",
+      removeClippedSubviews: "removeClippedSubviews",
+      renderToHardwareTextureAndroid: "renderToHardwareTextureAndroid",
+      shouldRasterizeIOS: "shouldRasterizeIOS",
+      hitSlop: "hitSlop",
+      pointerEvents: "pointerEvents"
+    })
+  };
+  const componentState = {
+    focus: false,
+    focusVisible: false,
+    focusWithin: false,
+    hover: false,
+    unmounted: true,
+    press: false,
+    pressIn: false,
+    disabled: false
+  };
+  const styleProps = {
+    resolveValues: platform === "native" ? "value" : "variable",
+    noClass: false,
+    isAnimated: false
+  };
+  const shouldAddDebugProp =
+  // really basic disable this for next.js because it messes with ssr
+  !process.env.npm_package_dependencies_next && platform !== "native" && process.env.IDENTIFY_TAGS !== "false" && (process.env.NODE_ENV === "development" || process.env.IDENTIFY_TAGS);
   let projectInfo = null;
-  const dynamicComponentCache = /* @__PURE__ */new Map(),
-    dynamicLoadingInProgress = /* @__PURE__ */new Set();
+  const dynamicComponentCache = /* @__PURE__ */new Map();
+  const dynamicLoadingInProgress = /* @__PURE__ */new Set();
   let _compilerOptions = null;
   function getCompilerOptions() {
-    if (!_compilerOptions) try {
-      _compilerOptions = (0, import_esbuildTsconfigPaths.loadCompilerOptionsFromTsconfig)();
-    } catch {
-      _compilerOptions = {};
+    if (!_compilerOptions) {
+      try {
+        _compilerOptions = (0, import_esbuildTsconfigPaths.loadCompilerOptionsFromTsconfig)();
+      } catch {
+        _compilerOptions = {};
+      }
     }
     return _compilerOptions;
   }
   function resolveImportPath(fromFile, importPath) {
     if (importPath.startsWith(".")) {
-      const dir = (0, import_node_path.dirname)(fromFile),
-        base = (0, import_node_path.resolve)(dir, importPath),
-        extensions = [".tsx", ".ts", ".jsx", ".js"];
+      const dir = (0, import_node_path.dirname)(fromFile);
+      const base = (0, import_node_path.resolve)(dir, importPath);
+      const extensions = [".tsx", ".ts", ".jsx", ".js"];
       for (const ext of extensions) {
         const full = base + ext;
         if ((0, import_node_fs.existsSync)(full)) return full;
@@ -154,12 +159,16 @@ function createExtractor({
       return null;
     }
     const compilerOptions = getCompilerOptions();
-    if (compilerOptions.paths) try {
-      const {
-        resolvedModule
-      } = (0, import_typescript.nodeModuleNameResolver)(importPath, fromFile, compilerOptions, import_typescript.sys);
-      if (resolvedModule && !resolvedModule.resolvedFileName.endsWith(".d.ts") && !resolvedModule.isExternalLibraryImport) return resolvedModule.resolvedFileName;
-    } catch {}
+    if (compilerOptions.paths) {
+      try {
+        const {
+          resolvedModule
+        } = (0, import_typescript.nodeModuleNameResolver)(importPath, fromFile, compilerOptions, import_typescript.sys);
+        if (resolvedModule && !resolvedModule.resolvedFileName.endsWith(".d.ts") && !resolvedModule.isExternalLibraryImport) {
+          return resolvedModule.resolvedFileName;
+        }
+      } catch {}
+    }
     return null;
   }
   const styledCheckCache = /* @__PURE__ */new Map();
@@ -167,17 +176,26 @@ function createExtractor({
     const cached = styledCheckCache.get(filePath);
     if (cached !== void 0) return cached;
     try {
-      const result = (0, import_node_fs.readFileSync)(filePath, "utf-8").includes("styled(");
-      return styledCheckCache.set(filePath, result), result;
+      const content = (0, import_node_fs.readFileSync)(filePath, "utf-8");
+      const result = content.includes("styled(");
+      styledCheckCache.set(filePath, result);
+      return result;
     } catch {
-      return styledCheckCache.set(filePath, !1), !1;
+      styledCheckCache.set(filePath, false);
+      return false;
     }
   }
   function loadSync(props) {
-    return isFullyDisabled(props) ? null : projectInfo ||= (0, import_loadGui.loadGuiSync)(props);
+    if (isFullyDisabled(props)) {
+      return null;
+    }
+    return projectInfo ||= (0, import_loadGui.loadGuiSync)(props);
   }
   async function load(props) {
-    return isFullyDisabled(props) ? null : projectInfo ||= await (0, import_loadGui.loadGui)(props);
+    if (isFullyDisabled(props)) {
+      return null;
+    }
+    return projectInfo ||= await (0, import_loadGui.loadGui)(props);
   }
   return {
     options: {
@@ -207,7 +225,7 @@ function createExtractor({
     const {
       config = "gui.config.ts",
       importsWhitelist = ["constants.js"],
-      evaluateVars = !0,
+      evaluateVars = true,
       sourcePath = "",
       onExtractTag,
       onStyledDefinitionRule,
@@ -216,15 +234,21 @@ function createExtractor({
       disableExtraction,
       disableExtractVariables,
       disableDebugAttr,
-      enableDynamicEvaluation = !1,
+      enableDynamicEvaluation = false,
       includeExtensions = [".ts", ".tsx", ".jsx"],
-      extractStyledDefinitions = !1,
+      extractStyledDefinitions = false,
       prefixLogs,
       excludeProps,
       platform: platform2,
       ...restProps
     } = options;
-    if (sourcePath && dynamicComponentCache.has(sourcePath) && (dynamicComponentCache.delete(sourcePath), styledCheckCache.delete(sourcePath)), sourcePath.includes(".gui-dynamic-eval")) return null;
+    if (sourcePath && dynamicComponentCache.has(sourcePath)) {
+      dynamicComponentCache.delete(sourcePath);
+      styledCheckCache.delete(sourcePath);
+    }
+    if (sourcePath.includes(".gui-dynamic-eval")) {
+      return null;
+    }
     const {
       normalizeStyle,
       getSplitStyles,
@@ -234,109 +258,189 @@ function createExtractor({
       getDefaultProps,
       pseudoDescriptors
     } = (0, import_requireGuiCore.requireGuiCore)(platform2);
-    let shouldPrintDebug = options.shouldPrintDebug || !1;
-    if (disable === !0 || Array.isArray(disable) && disable.includes(sourcePath)) return null;
-    if (!isFullyDisabled(options) && !components) throw new Error("Must provide components");
-    if (sourcePath && includeExtensions && !includeExtensions.some(ext => sourcePath.endsWith(ext))) return shouldPrintDebug && logger.info(`Ignoring file due to includeExtensions: ${sourcePath}, includeExtensions: ${includeExtensions.join(", ")}`), null;
+    let shouldPrintDebug = options.shouldPrintDebug || false;
+    if (disable === true || Array.isArray(disable) && disable.includes(sourcePath)) {
+      return null;
+    }
+    if (!isFullyDisabled(options)) {
+      if (!components) {
+        throw new Error(`Must provide components`);
+      }
+    }
+    if (sourcePath && includeExtensions && !includeExtensions.some(ext => sourcePath.endsWith(ext))) {
+      if (shouldPrintDebug) {
+        logger.info(`Ignoring file due to includeExtensions: ${sourcePath}, includeExtensions: ${includeExtensions.join(", ")}`);
+      }
+      return null;
+    }
     function isValidStyleKey(name, staticConfig) {
-      if (!projectInfo) throw new Error("Gui extractor not loaded yet");
-      if (platform2 === "native" && name[0] === "$" && mediaQueryConfig[name.slice(1)]) return !1;
+      if (!projectInfo) {
+        throw new Error(`Gui extractor not loaded yet`);
+      }
+      if (platform2 === "native" && name[0] === "$" && mediaQueryConfig[name.slice(1)]) {
+        return false;
+      }
       if (name[0] === "$") {
         const mediaName = name.slice(1);
-        if (mediaName.startsWith("theme-") || mediaName.startsWith("platform-") || mediaName.startsWith("group-") || mediaQueryConfig[mediaName]) return !0;
+        if (mediaName.startsWith("theme-") || mediaName.startsWith("platform-") || mediaName.startsWith("group-")) {
+          return true;
+        }
+        if (mediaQueryConfig[mediaName]) {
+          return true;
+        }
       }
       return !!(staticConfig.validStyles?.[name] || pseudoDescriptors[name] ||
       // don't disable variants or else you lose many things flattening
       staticConfig.variants?.[name] || projectInfo?.guiConfig?.shorthands[name]);
     }
-    const isTargetingHTML = platform2 === "web",
-      ogDebug = shouldPrintDebug,
-      tm = (0, import_timer.timer)(),
-      propsWithFileInfo = {
-        ...options,
-        sourcePath,
-        allLoadedComponents: components ? [...components] : []
-      };
-    hasLoggedBaseInfo || (hasLoggedBaseInfo = !0, shouldPrintDebug && logger.info(["loaded components:", propsWithFileInfo.allLoadedComponents.map(comp => Object.keys(comp.nameToInfo).join(", ")).join(", ")].join(" ")), process.env.DEBUG?.startsWith("@hanzo/gui") && logger.info(["loaded:", propsWithFileInfo.allLoadedComponents.map(x => x.moduleName)].join(`
-`))), tm.mark("load-gui", !!shouldPrintDebug), isFullyDisabled(options) || guiConfig?.themes || (console.error(`\u26D4\uFE0F Error: Missing "themes" in your gui.config file:
+    const isTargetingHTML = platform2 === "web";
+    const ogDebug = shouldPrintDebug;
+    const tm = (0, import_timer.timer)();
+    const propsWithFileInfo = {
+      ...options,
+      sourcePath,
+      allLoadedComponents: components ? [...components] : []
+    };
+    if (!hasLoggedBaseInfo) {
+      hasLoggedBaseInfo = true;
+      if (shouldPrintDebug) {
+        logger.info(["loaded components:", propsWithFileInfo.allLoadedComponents.map(comp => Object.keys(comp.nameToInfo).join(", ")).join(", ")].join(" "));
+      }
+      if (process.env.DEBUG?.startsWith("@hanzo/gui")) {
+        logger.info(["loaded:", propsWithFileInfo.allLoadedComponents.map(x => x.moduleName)].join("\n"));
+      }
+    }
+    tm.mark("load-gui", !!shouldPrintDebug);
+    if (!isFullyDisabled(options)) {
+      if (!guiConfig?.themes) {
+        console.error(`\u26D4\uFE0F Error: Missing "themes" in your gui.config file:
 
-            You may not need the compiler! Remember you can run Hanzo GUI with no configuration at all.
+            You may not need the compiler! Remember you can run GUI with no configuration at all.
 
             You may have not "export default" your config (you can also "export const config").
             
             Or this may be due to duplicated dependency versions:
               - try out https://github.com/bmish/check-dependency-version-consistency to see if there are mis-matches.
               - or search your lockfile for mis-matches.
-          `), console.info("  Got config:", guiConfig), process.exit(0));
-    const firstThemeName = Object.keys(guiConfig?.themes || {})[0],
-      firstTheme = guiConfig?.themes[firstThemeName] || {};
-    if (!firstTheme || typeof firstTheme != "object") {
+          `);
+        console.info(`  Got config:`, guiConfig);
+        process.exit(0);
+      }
+    }
+    const firstThemeName = Object.keys(guiConfig?.themes || {})[0];
+    const firstTheme = guiConfig?.themes[firstThemeName] || {};
+    if (!firstTheme || typeof firstTheme !== "object") {
       const err = `Missing theme ${firstThemeName}, an error occurred when importing your config`;
-      throw console.info(err, "Got config:", guiConfig), console.info("Looking for theme:", firstThemeName), new Error(err);
+      console.info(err, `Got config:`, guiConfig);
+      console.info(`Looking for theme:`, firstThemeName);
+      throw new Error(err);
     }
-    const proxiedTheme = proxyThemeVariables(firstTheme),
-      themeAccessListeners = /* @__PURE__ */new Set(),
-      defaultTheme = new Proxy(proxiedTheme, {
-        get(target, key) {
-          return Reflect.has(target, key) && themeAccessListeners.forEach(cb => cb(String(key))), Reflect.get(target, key);
+    const proxiedTheme = proxyThemeVariables(firstTheme);
+    const themeAccessListeners = /* @__PURE__ */new Set();
+    const defaultTheme = new Proxy(proxiedTheme, {
+      get(target, key) {
+        if (Reflect.has(target, key)) {
+          themeAccessListeners.forEach(cb => cb(String(key)));
+        }
+        return Reflect.get(target, key);
+      }
+    });
+    const body = fileOrPath.type === "Program" ? fileOrPath.get("body") : fileOrPath.program.body;
+    if (!isFullyDisabled(options)) {
+      if (Object.keys(components || []).length === 0) {
+        console.warn(`Warning: GUI didn't find any valid components (DEBUG=hanzo-gui for more)`);
+        if (process.env.DEBUG === "@hanzo/gui") {
+          console.info(`components`, Object.keys(components || []), components);
         }
-      }),
-      body = fileOrPath.type === "Program" ? fileOrPath.get("body") : fileOrPath.program.body;
-    isFullyDisabled(options) || Object.keys(components || []).length === 0 && (console.warn("Warning: Hanzo GUI didn't find any valid components (DEBUG=hanzo-gui for more)"), process.env.DEBUG === "@hanzo/gui" && console.info("components", Object.keys(components || []), components)), shouldPrintDebug === "verbose" && (logger.info(`allLoadedComponent modules ${propsWithFileInfo.allLoadedComponents.map(k => k.moduleName).join(", ")}`), logger.info(`valid import paths: ${JSON.stringify((0, import_extractHelpers.getValidComponentsPaths)(propsWithFileInfo))}`));
-    let doesUseValidImport = !1,
-      hasImportedTheme = !1;
+      }
+    }
+    if (shouldPrintDebug === "verbose") {
+      logger.info(`allLoadedComponent modules ${propsWithFileInfo.allLoadedComponents.map(k => k.moduleName).join(", ")}`);
+      logger.info(`valid import paths: ${JSON.stringify((0, import_extractHelpers.getValidComponentsPaths)(propsWithFileInfo))}`);
+    }
+    let doesUseValidImport = false;
+    let hasImportedTheme = false;
     const importDeclarations = [];
     for (const bodyPath of body) {
       if (bodyPath.type !== "ImportDeclaration") continue;
-      const node = "node" in bodyPath ? bodyPath.node : bodyPath,
-        moduleName = node.source.value,
-        valid = (0, import_extractHelpers.isValidImport)(propsWithFileInfo, moduleName);
-      if (valid && importDeclarations.push(node), shouldPrintDebug === "verbose" && logger.info(` - import via ${moduleName} ${valid}`), extractStyledDefinitions && enableDynamicEvaluation && node.specifiers.some(specifier => specifier.local.name === "styled") && (doesUseValidImport = !0), valid) {
-        const names = node.specifiers.map(specifier => specifier.local.name),
-          isValidComponent = names.some(name => !!(0, import_extractHelpers.isValidImport)(propsWithFileInfo, moduleName, name));
-        if (shouldPrintDebug === "verbose" && logger.info(` - import ${isValidComponent ? "\u2705" : "\u21E3"} - ${names.join(", ")} via package '${moduleName}' - (valid: ${JSON.stringify((0, import_extractHelpers.getValidComponentsPaths)(propsWithFileInfo))})`), isValidComponent && (doesUseValidImport = !0, !(extractStyledDefinitions && enableDynamicEvaluation))) break;
+      const node = "node" in bodyPath ? bodyPath.node : bodyPath;
+      const moduleName = node.source.value;
+      const valid = (0, import_extractHelpers.isValidImport)(propsWithFileInfo, moduleName);
+      if (valid) {
+        importDeclarations.push(node);
+      }
+      if (shouldPrintDebug === "verbose") {
+        logger.info(` - import via ${moduleName} ${valid}`);
+      }
+      if (extractStyledDefinitions && enableDynamicEvaluation) {
+        if (node.specifiers.some(specifier => specifier.local.name === "styled")) {
+          doesUseValidImport = true;
+        }
+      }
+      if (valid) {
+        const names = node.specifiers.map(specifier => specifier.local.name);
+        const isValidComponent = names.some(name => Boolean((0, import_extractHelpers.isValidImport)(propsWithFileInfo, moduleName, name)));
+        if (shouldPrintDebug === "verbose") {
+          logger.info(` - import ${isValidComponent ? "\u2705" : "\u21E3"} - ${names.join(", ")} via package '${moduleName}' - (valid: ${JSON.stringify((0, import_extractHelpers.getValidComponentsPaths)(propsWithFileInfo))})`);
+        }
+        if (isValidComponent) {
+          doesUseValidImport = true;
+          if (!(extractStyledDefinitions && enableDynamicEvaluation)) break;
+        }
       }
     }
-    if (shouldPrintDebug && logger.info(`${JSON.stringify({
-      doesUseValidImport,
-      hasImportedTheme
-    }, null, 2)}
-`), !doesUseValidImport && extractStyledDefinitions && enableDynamicEvaluation && sourcePath) for (const bodyPath of body) {
-      if (bodyPath.type !== "ImportDeclaration") continue;
-      const moduleName = ("node" in bodyPath ? bodyPath.node : bodyPath).source.value,
-        resolved = resolveImportPath(sourcePath, moduleName);
-      if (resolved) {
+    if (shouldPrintDebug) {
+      logger.info(`${JSON.stringify({
+        doesUseValidImport,
+        hasImportedTheme
+      }, null, 2)}
+`);
+    }
+    if (!doesUseValidImport && extractStyledDefinitions && enableDynamicEvaluation && sourcePath) {
+      for (const bodyPath of body) {
+        if (bodyPath.type !== "ImportDeclaration") continue;
+        const node = "node" in bodyPath ? bodyPath.node : bodyPath;
+        const moduleName = node.source.value;
+        const resolved = resolveImportPath(sourcePath, moduleName);
+        if (!resolved) continue;
         if (dynamicComponentCache.has(resolved)) {
-          doesUseValidImport = !0;
+          doesUseValidImport = true;
           break;
         }
         if (mightHaveStyledComponents(resolved)) {
-          doesUseValidImport = !0;
+          doesUseValidImport = true;
           break;
         }
       }
     }
-    if (!doesUseValidImport) return null;
+    if (!doesUseValidImport) {
+      return null;
+    }
     function getValidImportedComponent(componentName) {
       const importDeclaration = importDeclarations.find(dec => dec.specifiers.some(spec => spec.local.name === componentName));
-      return importDeclaration ? (0, import_extractHelpers.getValidImport)(propsWithFileInfo, importDeclaration.source.value, componentName) : null;
+      if (!importDeclaration) {
+        return null;
+      }
+      return (0, import_extractHelpers.getValidImport)(propsWithFileInfo, importDeclaration.source.value, componentName);
     }
     tm.mark("import-check", !!shouldPrintDebug);
-    let couldntParse = !1;
-    const modifiedComponents = /* @__PURE__ */new Set(),
-      bindingCache = {},
-      callTraverse = a => fileOrPath.type === "File" ? (0, import_traverse.default)(fileOrPath, a) : fileOrPath.traverse(a),
-      shouldDisableExtraction = disableExtraction === !0 || Array.isArray(disableExtraction) && disableExtraction.includes(sourcePath);
+    let couldntParse = false;
+    const modifiedComponents = /* @__PURE__ */new Set();
+    const bindingCache = {};
+    const callTraverse = a => {
+      return fileOrPath.type === "File" ? (0, import_traverse.default)(fileOrPath, a) : fileOrPath.traverse(a);
+    };
+    const shouldDisableExtraction = disableExtraction === true || Array.isArray(disableExtraction) && disableExtraction.includes(sourcePath);
     let programPath = null;
     const res = {
-        styled: 0,
-        flattened: 0,
-        optimized: 0,
-        modified: 0,
-        found: 0
-      },
-      version = `${Math.random()}`;
-    return callTraverse({
+      styled: 0,
+      flattened: 0,
+      optimized: 0,
+      modified: 0,
+      found: 0
+    };
+    const version = `${Math.random()}`;
+    callTraverse({
       // @ts-ignore
       Program: {
         enter(path) {
@@ -345,61 +449,88 @@ function createExtractor({
       },
       // styled() calls
       CallExpression(path) {
-        if (disable || shouldDisableExtraction || extractStyledDefinitions === !1 || !t.isIdentifier(path.node.callee) || path.node.callee.name !== "styled") return;
+        if (disable || shouldDisableExtraction || extractStyledDefinitions === false) {
+          return;
+        }
+        if (!t.isIdentifier(path.node.callee) || path.node.callee.name !== "styled") {
+          return;
+        }
         const variableName = t.isVariableDeclarator(path.parent) && t.isIdentifier(path.parent.id) ? path.parent.id.name : "unknown";
-        shouldPrintDebug && logger.info(` [styled] Found styled(${variableName})`);
+        if (shouldPrintDebug) {
+          logger.info(` [styled] Found styled(${variableName})`);
+        }
         const parentNode = path.node.arguments[0];
-        if (!t.isIdentifier(parentNode)) return;
-        const parentName = parentNode.name,
-          definition = path.node.arguments[1];
-        if (!parentName || !definition || !t.isObjectExpression(definition)) return;
+        if (!t.isIdentifier(parentNode)) {
+          return;
+        }
+        const parentName = parentNode.name;
+        const definition = path.node.arguments[1];
+        if (!parentName || !definition || !t.isObjectExpression(definition)) {
+          return;
+        }
         let Component = getValidImportedComponent(parentName) || getValidImportedComponent(variableName);
         if (!Component) {
-          if (!enableDynamicEvaluation) return;
+          if (!enableDynamicEvaluation) {
+            return;
+          }
           try {
-            shouldPrintDebug && logger.info(`Unknown component: ${variableName} = styled(${parentName}) attempting dynamic load: ${sourcePath}`);
+            if (shouldPrintDebug) {
+              logger.info(`Unknown component: ${variableName} = styled(${parentName}) attempting dynamic load: ${sourcePath}`);
+            }
             const out2 = (0, import_loadGui.loadGuiSync)({
-              forceExports: !0,
+              forceExports: true,
               components: [sourcePath],
               cacheKey: version
             });
             if (!out2?.components) {
-              shouldPrintDebug && logger.info(`Couldn't load, got ${out2}`);
+              if (shouldPrintDebug) {
+                logger.info(`Couldn't load, got ${out2}`);
+              }
               return;
             }
-            if (propsWithFileInfo.allLoadedComponents = [...propsWithFileInfo.allLoadedComponents, ...out2.components], Component = out2.components.flatMap(x => x.nameToInfo[variableName] ?? [])[0], !out2.cached) {
+            propsWithFileInfo.allLoadedComponents = [...propsWithFileInfo.allLoadedComponents, ...out2.components];
+            Component = out2.components.flatMap(x => x.nameToInfo[variableName] ?? [])[0];
+            if (!out2.cached) {
               const foundNames = out2.components?.map(x => Object.keys(x.nameToInfo).join(", ")).join(", ").trim();
-              foundNames && (0, import_cli_color.colorLog)(import_cli_color.Color.FgYellow, `      | Hanzo GUI found dynamic components: ${foundNames}`);
+              if (foundNames) {
+                (0, import_cli_color.colorLog)(import_cli_color.Color.FgYellow, `      | GUI found dynamic components: ${foundNames}`);
+              }
+            }
+          } catch (err) {
+            if (shouldPrintDebug) {
+              logger.info(`skip optimize styled(${variableName}), unable to pre-process (DEBUG=hanzo-gui for more)`);
             }
-          } catch {
-            shouldPrintDebug && logger.info(`skip optimize styled(${variableName}), unable to pre-process (DEBUG=hanzo-gui for more)`);
           }
         }
         if (!Component) {
-          shouldPrintDebug && logger.info(" No component found");
+          if (shouldPrintDebug) {
+            logger.info(` No component found`);
+          }
           return;
         }
         const componentSkipProps = /* @__PURE__ */new Set([...(Component.staticConfig.inlineWhenUnflattened || []), ...(Component.staticConfig.inlineProps || []),
-          // for now skip variants, will return to them
-          "variants", "defaultVariants",
-          // skip fontFamily its basically a "variant", important for theme use to be value always
-          "fontFamily", "name", "focusStyle", "focusVisibleStyle", "focusWithinStyle", "disabledStyle", "hoverStyle", "pressStyle"]),
-          skipped = /* @__PURE__ */new Set(),
-          styles = {},
-          staticDefaultProps = {},
-          staticNamespace = (0, import_getStaticBindingsForScope.getStaticBindingsForScope)(path.scope, importsWhitelist, sourcePath, bindingCache, shouldPrintDebug),
-          attemptEval = evaluateVars ? (0, import_createEvaluator.createEvaluator)({
-            props: propsWithFileInfo,
-            staticNamespace,
-            sourcePath,
-            shouldPrintDebug
-          }) : import_evaluateAstNode.evaluateAstNode,
-          attemptEvalSafe = (0, import_createEvaluator.createSafeEvaluator)(attemptEval);
+        // for now skip variants, will return to them
+        "variants", "defaultVariants",
+        // skip fontFamily its basically a "variant", important for theme use to be value always
+        "fontFamily", "name", "focusStyle", "focusVisibleStyle", "focusWithinStyle", "disabledStyle", "hoverStyle", "pressStyle"]);
+        const skipped = /* @__PURE__ */new Set();
+        const styles = {};
+        const staticDefaultProps = {};
+        const staticNamespace = (0, import_getStaticBindingsForScope.getStaticBindingsForScope)(path.scope, importsWhitelist, sourcePath, bindingCache, shouldPrintDebug);
+        const attemptEval = !evaluateVars ? import_evaluateAstNode.evaluateAstNode : (0, import_createEvaluator.createEvaluator)({
+          props: propsWithFileInfo,
+          staticNamespace,
+          sourcePath,
+          shouldPrintDebug
+        });
+        const attemptEvalSafe = (0, import_createEvaluator.createSafeEvaluator)(attemptEval);
         for (const property of definition.properties) {
           if (t.isObjectProperty(property) && (t.isIdentifier(property.key) || t.isStringLiteral(property.key))) {
-            const key = t.isIdentifier(property.key) ? property.key.name : property.key.value,
-              defaultPropValue = attemptEvalSafe(property.value);
-            defaultPropValue !== import_constants.FAILED_EVAL && (staticDefaultProps[key] = defaultPropValue);
+            const key = t.isIdentifier(property.key) ? property.key.name : property.key.value;
+            const defaultPropValue = attemptEvalSafe(property.value);
+            if (defaultPropValue !== import_constants.FAILED_EVAL) {
+              staticDefaultProps[key] = defaultPropValue;
+            }
           }
           if (!t.isObjectProperty(property) || !t.isIdentifier(property.key) || !isValidStyleKey(property.key.name, Component.staticConfig) ||
           // TODO make pseudos and variants work
@@ -411,20 +542,28 @@ function createExtractor({
             continue;
           }
           const out2 = attemptEvalSafe(property.value);
-          out2 === import_constants.FAILED_EVAL ? skipped.add(property) : styles[property.key.name] = out2;
+          if (out2 === import_constants.FAILED_EVAL) {
+            skipped.add(property);
+          } else {
+            styles[property.key.name] = out2;
+          }
         }
-        const out = getSplitStyles(styles, Component.staticConfig, defaultTheme, "", componentState, styleProps, void 0, void 0, void 0, void 0, !1, shouldPrintDebug),
-          classNames = {
-            ...out.classNames
-          };
-        if (shouldPrintDebug && logger.info([`Extracted styled(${variableName})
-`, JSON.stringify(styles, null, 2), `
- classNames:`, JSON.stringify(classNames, null, 2), `
-  rulesToInsert:`, out.rulesToInsert].join(" ")), out.rulesToInsert) for (const key in out.rulesToInsert) {
-          const styleObject = out.rulesToInsert[key];
-          onStyledDefinitionRule?.(styleObject[import_web.StyleObjectIdentifier], styleObject[import_web.StyleObjectRules]);
+        const out = getSplitStyles(styles, Component.staticConfig, defaultTheme, "", componentState, styleProps, void 0, void 0, void 0, void 0, false, shouldPrintDebug);
+        const classNames = {
+          ...out.classNames
+        };
+        if (shouldPrintDebug) {
+          logger.info([`Extracted styled(${variableName})
+`, JSON.stringify(styles, null, 2), "\n classNames:", JSON.stringify(classNames, null, 2), "\n  rulesToInsert:", out.rulesToInsert].join(" "));
+        }
+        if (out.rulesToInsert) {
+          for (const key in out.rulesToInsert) {
+            const styleObject = out.rulesToInsert[key];
+            onStyledDefinitionRule?.(styleObject[import_web.StyleObjectIdentifier], styleObject[import_web.StyleObjectRules]);
+          }
         }
-        if (res.styled++, extractStyledDefinitions && enableDynamicEvaluation && Component) {
+        res.styled++;
+        if (extractStyledDefinitions && enableDynamicEvaluation && Component) {
           const dynamicStaticConfig = {
             ...Component.staticConfig,
             defaultProps: {
@@ -432,130 +571,218 @@ function createExtractor({
               ...staticDefaultProps
             }
           };
-          if (propsWithFileInfo.allLoadedComponents.push({
+          propsWithFileInfo.allLoadedComponents.push({
             moduleName: "",
             nameToInfo: {
               [variableName]: {
                 staticConfig: dynamicStaticConfig
               }
             }
-          }), sourcePath) {
+          });
+          if (sourcePath) {
             let existing = dynamicComponentCache.get(sourcePath);
-            existing || (existing = {
-              moduleName: sourcePath,
-              nameToInfo: {}
-            }, dynamicComponentCache.set(sourcePath, existing)), existing.nameToInfo[variableName] = {
+            if (!existing) {
+              existing = {
+                moduleName: sourcePath,
+                nameToInfo: {}
+              };
+              dynamicComponentCache.set(sourcePath, existing);
+            }
+            existing.nameToInfo[variableName] = {
               staticConfig: dynamicStaticConfig
             };
           }
         }
-        shouldPrintDebug && logger.info(`Extracted styled(${variableName})`);
+        if (shouldPrintDebug) {
+          logger.info(`Extracted styled(${variableName})`);
+        }
       },
       JSXElement(traversePath) {
         tm.mark("jsx-element", !!shouldPrintDebug);
-        const node = traversePath.node.openingElement,
-          ogAttributes = node.attributes.map(attr => ({
-            ...attr
-          })),
-          componentName = (0, import_extractHelpers.findComponentName)(traversePath.scope),
-          closingElement = traversePath.node.closingElement;
+        const node = traversePath.node.openingElement;
+        const ogAttributes = node.attributes.map(attr => ({
+          ...attr
+        }));
+        const componentName = (0, import_extractHelpers.findComponentName)(traversePath.scope);
+        const closingElement = traversePath.node.closingElement;
         if (closingElement && t.isJSXMemberExpression(closingElement?.name) || !t.isJSXIdentifier(node.name)) {
-          shouldPrintDebug && logger.info(" skip non-identifier element");
+          if (shouldPrintDebug) {
+            logger.info(` skip non-identifier element`);
+          }
           return;
         }
         const binding = traversePath.scope.getBinding(node.name.name);
-        let moduleName = "",
-          dynamicComponent = null;
-        if (binding && t.isImportDeclaration(binding.path.parent) && (moduleName = binding.path.parent.source.value, !(0, import_extractHelpers.isValidImport)(propsWithFileInfo, moduleName, binding.identifier.name))) {
-          if (enableDynamicEvaluation && sourcePath) {
-            const resolved = resolveImportPath(sourcePath, moduleName);
-            if (resolved) {
-              const cached = dynamicComponentCache.get(resolved);
-              if (cached?.nameToInfo[binding.identifier.name]) dynamicComponent = cached.nameToInfo[binding.identifier.name];else if (!dynamicLoadingInProgress.has(resolved) && mightHaveStyledComponents(resolved)) {
-                dynamicLoadingInProgress.add(resolved);
-                try {
-                  const out = (0, import_loadGui.loadGuiSync)({
-                    forceExports: !0,
-                    components: [resolved]
-                  });
-                  if (out?.components) {
-                    for (const comp of out.components) {
-                      let existing = dynamicComponentCache.get(resolved);
-                      existing || (existing = {
-                        moduleName: resolved,
-                        nameToInfo: {}
-                      }, dynamicComponentCache.set(resolved, existing)), Object.assign(existing.nameToInfo, comp.nameToInfo), propsWithFileInfo.allLoadedComponents.push({
-                        moduleName: resolved,
-                        nameToInfo: comp.nameToInfo
+        let moduleName = "";
+        let dynamicComponent = null;
+        if (binding) {
+          if (t.isImportDeclaration(binding.path.parent)) {
+            moduleName = binding.path.parent.source.value;
+            if (!(0, import_extractHelpers.isValidImport)(propsWithFileInfo, moduleName, binding.identifier.name)) {
+              if (enableDynamicEvaluation && sourcePath) {
+                const resolved = resolveImportPath(sourcePath, moduleName);
+                if (resolved) {
+                  const cached = dynamicComponentCache.get(resolved);
+                  if (cached?.nameToInfo[binding.identifier.name]) {
+                    dynamicComponent = cached.nameToInfo[binding.identifier.name];
+                  } else if (!dynamicLoadingInProgress.has(resolved) && mightHaveStyledComponents(resolved)) {
+                    dynamicLoadingInProgress.add(resolved);
+                    try {
+                      const out = (0, import_loadGui.loadGuiSync)({
+                        forceExports: true,
+                        components: [resolved]
                       });
+                      if (out?.components) {
+                        for (const comp of out.components) {
+                          let existing = dynamicComponentCache.get(resolved);
+                          if (!existing) {
+                            existing = {
+                              moduleName: resolved,
+                              nameToInfo: {}
+                            };
+                            dynamicComponentCache.set(resolved, existing);
+                          }
+                          Object.assign(existing.nameToInfo, comp.nameToInfo);
+                          propsWithFileInfo.allLoadedComponents.push({
+                            moduleName: resolved,
+                            nameToInfo: comp.nameToInfo
+                          });
+                        }
+                        const cachedNow = dynamicComponentCache.get(resolved);
+                        if (cachedNow?.nameToInfo[binding.identifier.name]) {
+                          dynamicComponent = cachedNow.nameToInfo[binding.identifier.name];
+                        }
+                      }
+                    } catch (err) {
+                      if (shouldPrintDebug) {
+                        logger.info(` - Failed to dynamically load ${resolved}: ${err}`);
+                      }
+                    } finally {
+                      dynamicLoadingInProgress.delete(resolved);
                     }
-                    const cachedNow = dynamicComponentCache.get(resolved);
-                    cachedNow?.nameToInfo[binding.identifier.name] && (dynamicComponent = cachedNow.nameToInfo[binding.identifier.name]);
                   }
-                } catch (err) {
-                  shouldPrintDebug && logger.info(` - Failed to dynamically load ${resolved}: ${err}`);
-                } finally {
-                  dynamicLoadingInProgress.delete(resolved);
                 }
               }
-            }
-          }
-          if (!dynamicComponent) {
-            shouldPrintDebug && logger.info(` - Binding in component ${componentName} not valid import: "${binding.identifier.name}" isn't in ${moduleName}
+              if (!dynamicComponent) {
+                if (shouldPrintDebug) {
+                  logger.info(` - Binding in component ${componentName} not valid import: "${binding.identifier.name}" isn't in ${moduleName}
 `);
-            return;
+                }
+                return;
+              }
+            }
           }
         }
         const component = dynamicComponent || (0, import_extractHelpers.getValidComponent)(propsWithFileInfo, moduleName, node.name.name);
         if (!component || !component.staticConfig) {
-          shouldPrintDebug && logger.info(`
- - No Hanzo GUI conf for: ${node.name.name}
+          if (shouldPrintDebug) {
+            logger.info(`
+ - No GUI conf for: ${node.name.name}
 `);
+          }
           return;
         }
         const originalNodeName = node.name.name;
         res.found++;
-        const filePath = `./${(0, import_node_path.relative)(process.cwd(), sourcePath)}`,
-          lineNumbers = node.loc ? node.loc.start.line + (node.loc.start.line !== node.loc.end.line ? `-${node.loc.end.line}` : "") : "",
-          codePosition = `${filePath}:${lineNumbers}`,
-          debugPropValue = node.attributes.filter(n => t.isJSXAttribute(n) && t.isJSXIdentifier(n.name) && n.name.name === "debug").map(n => n.value === null ? !0 : t.isStringLiteral(n.value) ? n.value.value : !1)[0];
-        if (debugPropValue && (shouldPrintDebug = debugPropValue), shouldPrintDebug && (logger.info(`\x1B[33m\x1B[0m ${componentName} | ${codePosition} -------------------`), logger.info(["\x1B[1m", "\x1B[32m", `<${originalNodeName} />`, disableDebugAttr ? "" : "\u{1F41B}"].join(" "))), platform2 !== "native" && shouldAddDebugProp && !disableDebugAttr && (res.modified++, node.attributes.unshift(t.jsxAttribute(t.jsxIdentifier("data-is"), t.stringLiteral(node.name.name))), componentName && node.attributes.unshift(t.jsxAttribute(t.jsxIdentifier("data-in"), t.stringLiteral(componentName))), node.attributes.unshift(t.jsxAttribute(t.jsxIdentifier("data-at"), t.stringLiteral(`${(0, import_node_path.basename)(filePath)}:${lineNumbers}`)))), shouldDisableExtraction) {
-          shouldPrintDebug === "verbose" && logger.info(` \u274C Extraction disabled: ${JSON.stringify(disableExtraction)}
+        const filePath = `./${(0, import_node_path.relative)(process.cwd(), sourcePath)}`;
+        const lineNumbers = node.loc ? node.loc.start.line + (node.loc.start.line !== node.loc.end.line ? `-${node.loc.end.line}` : "") : "";
+        const codePosition = `${filePath}:${lineNumbers}`;
+        const debugPropValue = node.attributes.filter(n => t.isJSXAttribute(n) && t.isJSXIdentifier(n.name) && n.name.name === "debug").map(n => {
+          if (n.value === null) return true;
+          if (t.isStringLiteral(n.value)) return n.value.value;
+          return false;
+        })[0];
+        if (debugPropValue) {
+          shouldPrintDebug = debugPropValue;
+        }
+        if (shouldPrintDebug) {
+          logger.info(`\x1B[33m\x1B[0m ${componentName} | ${codePosition} -------------------`);
+          logger.info(["\x1B[1m", "\x1B[32m", `<${originalNodeName} />`, disableDebugAttr ? "" : "\u{1F41B}"].join(" "));
+        }
+        if (platform2 !== "native") {
+          if (shouldAddDebugProp && !disableDebugAttr) {
+            res.modified++;
+            node.attributes.unshift(t.jsxAttribute(t.jsxIdentifier("data-is"), t.stringLiteral(node.name.name)));
+            if (componentName) {
+              node.attributes.unshift(t.jsxAttribute(t.jsxIdentifier("data-in"), t.stringLiteral(componentName)));
+            }
+            node.attributes.unshift(t.jsxAttribute(t.jsxIdentifier("data-at"), t.stringLiteral(`${(0, import_node_path.basename)(filePath)}:${lineNumbers}`)));
+          }
+        }
+        if (shouldDisableExtraction) {
+          if (shouldPrintDebug === "verbose") {
+            logger.info(` \u274C Extraction disabled: ${JSON.stringify(disableExtraction)}
 `);
+          }
           return;
         }
         try {
           let evaluateAttribute = function (path) {
-              const attribute = path.node,
-                attr = {
-                  type: "attr",
-                  value: attribute
-                };
+              const attribute = path.node;
+              const attr = {
+                type: "attr",
+                value: attribute
+              };
               if (t.isJSXSpreadAttribute(attribute)) {
-                const arg = attribute.argument,
-                  conditional = t.isConditionalExpression(arg) ?
-                  // <YStack {...isSmall ? { color: 'red } : { color: 'blue }}
-                  [arg.test, arg.consequent, arg.alternate] : t.isLogicalExpression(arg) && arg.operator === "&&" ?
-                  // <YStack {...isSmall && { color: 'red }}
-                  [arg.left, arg.right, null] : null;
+                const arg = attribute.argument;
+                const conditional = t.isConditionalExpression(arg) ?
+                // <YStack {...isSmall ? { color: 'red } : { color: 'blue }}
+                [arg.test, arg.consequent, arg.alternate] : t.isLogicalExpression(arg) && arg.operator === "&&" ?
+                // <YStack {...isSmall && { color: 'red }}
+                [arg.left, arg.right, null] : null;
                 if (conditional) {
                   const [test, alt, cons] = conditional;
-                  if (!test) throw new Error("no test");
-                  return [alt, cons].some(side => side && !isStaticObject(side)) ? (shouldPrintDebug && logger.info(`not extractable ${alt} ${cons}`), attr) : [...(flattenNestedTernaries(test, alt) || []), ...(cons && flattenNestedTernaries(t.unaryExpression("!", test), cons) || [])].map(ternary => ({
+                  if (!test) throw new Error(`no test`);
+                  if ([alt, cons].some(side => side && !isStaticObject(side))) {
+                    if (shouldPrintDebug) {
+                      logger.info(`not extractable ${alt} ${cons}`);
+                    }
+                    return attr;
+                  }
+                  return [...(flattenNestedTernaries(test, alt) || []), ...(cons && flattenNestedTernaries(t.unaryExpression("!", test), cons) || [])].map(ternary => ({
                     type: "ternary",
                     value: ternary
                   }));
                 }
               }
-              if (t.isJSXSpreadAttribute(attribute) || !attribute.name || typeof attribute.name.name != "string") return shouldPrintDebug && logger.info("  ! inlining, spread attr"), inlined.set(`${Math.random()}`, "spread"), attr;
+              if (t.isJSXSpreadAttribute(attribute) || !attribute.name || typeof attribute.name.name !== "string") {
+                if (shouldPrintDebug) {
+                  logger.info("  ! inlining, spread attr");
+                }
+                inlined.set(`${Math.random()}`, "spread");
+                return attr;
+              }
               const name = attribute.name.name;
-              if (name === "style") return shouldDeopt = !0, null;
-              if (excludeProps?.has(name)) return shouldPrintDebug && logger.info(["  excluding prop", name].join(" ")), null;
-              if (inlineProps.has(name)) return inlined.set(name, name), shouldPrintDebug && logger.info(["  ! inlining, inline prop", name].join(" ")), attr;
-              if (UNTOUCHED_PROPS[name]) return attr;
-              if (INLINE_EXTRACTABLE[name]) return inlined.set(name, INLINE_EXTRACTABLE[name]), attr;
-              if (name.startsWith("data-") || name.startsWith("aria-") || import_validHTMLAttributes.validHTMLAttributes[name]) return attr;
-              if ((name === "enterStyle" || name === "exitStyle") && t.isJSXExpressionContainer(attribute?.value)) return shouldDeopt = !0, attr;
+              if (name === "style") {
+                shouldDeopt = true;
+                return null;
+              }
+              if (excludeProps?.has(name)) {
+                if (shouldPrintDebug) {
+                  logger.info(["  excluding prop", name].join(" "));
+                }
+                return null;
+              }
+              if (inlineProps.has(name)) {
+                inlined.set(name, name);
+                if (shouldPrintDebug) {
+                  logger.info(["  ! inlining, inline prop", name].join(" "));
+                }
+                return attr;
+              }
+              if (UNTOUCHED_PROPS[name]) {
+                return attr;
+              }
+              if (INLINE_EXTRACTABLE[name]) {
+                inlined.set(name, INLINE_EXTRACTABLE[name]);
+                return attr;
+              }
+              if (name.startsWith("data-") || name.startsWith("aria-") || import_validHTMLAttributes.validHTMLAttributes[name]) {
+                return attr;
+              }
+              if ((name === "enterStyle" || name === "exitStyle") && t.isJSXExpressionContainer(attribute?.value)) {
+                shouldDeopt = true;
+                return attr;
+              }
               if (name[0] === "$" && t.isJSXExpressionContainer(attribute?.value)) {
                 const shortname = name.slice(1);
                 if (mediaQueryConfig[shortname]) {
@@ -564,66 +791,161 @@ function createExtractor({
                     const ternaries2 = flattenNestedTernaries(t.stringLiteral(shortname), expression, {
                       inlineMediaQuery: shortname
                     });
-                    if (ternaries2) return ternaries2.map(value2 => ({
-                      type: "ternary",
-                      value: value2
-                    }));
+                    if (ternaries2) {
+                      return ternaries2.map(value2 => ({
+                        type: "ternary",
+                        value: value2
+                      }));
+                    }
                   }
                 }
               }
-              const [value, valuePath] = t.isJSXExpressionContainer(attribute?.value) ? [attribute.value.expression, path.get("value")] : [attribute.value, path.get("value")],
-                remove = () => {
-                  Array.isArray(valuePath) ? valuePath.map(p => p.remove()) : valuePath.remove();
-                };
-              if (name === "ref") return shouldPrintDebug && logger.info(["  ! inlining, ref", name].join(" ")), inlined.set("ref", "ref"), attr;
-              if (name === "render") return (!value || value.type !== "StringLiteral") && (shouldPrintDebug && logger.info("  ! deopt on render prop (not a string literal)"), shouldDeopt = !0), {
-                type: "attr",
-                value: path.node
+              const [value, valuePath] = (() => {
+                if (t.isJSXExpressionContainer(attribute?.value)) {
+                  return [attribute.value.expression, path.get("value")];
+                }
+                return [attribute.value, path.get("value")];
+              })();
+              const remove = () => {
+                Array.isArray(valuePath) ? valuePath.map(p => p.remove()) : valuePath.remove();
               };
-              if (disableExtractVariables === !0 && value && value.type === "StringLiteral" && value.value[0] === "$") return shouldPrintDebug && logger.info([`  ! inlining, native disable extract: ${name} =`, value.value].join(" ")), inlined.set(name, !0), attr;
-              if (name === "theme") return inlined.set("theme", attr.value), attr;
+              if (name === "ref") {
+                if (shouldPrintDebug) {
+                  logger.info(["  ! inlining, ref", name].join(" "));
+                }
+                inlined.set("ref", "ref");
+                return attr;
+              }
+              if (name === "render") {
+                if (!value || value.type !== "StringLiteral") {
+                  if (shouldPrintDebug) {
+                    logger.info(`  ! deopt on render prop (not a string literal)`);
+                  }
+                  shouldDeopt = true;
+                }
+                return {
+                  type: "attr",
+                  value: path.node
+                };
+              }
+              if (disableExtractVariables === true) {
+                if (value) {
+                  if (value.type === "StringLiteral" && value.value[0] === "$") {
+                    if (shouldPrintDebug) {
+                      logger.info([`  ! inlining, native disable extract: ${name} =`, value.value].join(" "));
+                    }
+                    inlined.set(name, true);
+                    return attr;
+                  }
+                }
+              }
+              if (name === "theme") {
+                inlined.set("theme", attr.value);
+                return attr;
+              }
               const styleValue = attemptEvalSafe(value);
               if (!variants[name] && !isValidStyleKey(name, staticConfig)) {
                 let out = null;
-                propMapper(name, styleValue, propMapperStyleState, !1, (key, val) => {
-                  out ||= {}, out[key] = val;
-                }), out && isTargetingHTML && (out = reactNativeWebInternals.createDOMProps(isTextView ? "span" : "div", out), delete out.className);
-                let didInline = !1;
+                propMapper(name, styleValue, propMapperStyleState, false, (key, val) => {
+                  out ||= {};
+                  out[key] = val;
+                });
+                if (out) {
+                  if (isTargetingHTML) {
+                    out = reactNativeWebInternals.createDOMProps(isTextView ? "span" : "div", out);
+                    delete out.className;
+                  }
+                }
+                let didInline = false;
                 const attributes = Object.keys(out).map(key => {
                   const val = out[key];
-                  return isValidStyleKey(key, staticConfig) ? {
-                    type: "style",
-                    value: {
-                      [key]: styleValue
-                    },
-                    name: key,
-                    attr: path.node
-                  } : import_validHTMLAttributes.validHTMLAttributes[key] || key.startsWith("aria-") || key.startsWith("data-") ||
+                  const isStyle = isValidStyleKey(key, staticConfig);
+                  if (isStyle) {
+                    return {
+                      type: "style",
+                      value: {
+                        [key]: styleValue
+                      },
+                      name: key,
+                      attr: path.node
+                    };
+                  }
+                  if (import_validHTMLAttributes.validHTMLAttributes[key] || key.startsWith("aria-") || key.startsWith("data-") ||
                   // this is debug stuff added by vite / new jsx transform
-                  key === "__source" || key === "__self" ? attr : (shouldPrintDebug && logger.info("  ! inlining, non-static " + key), didInline = !0, inlined.set(key, val), val);
+                  key === "__source" || key === "__self") {
+                    return attr;
+                  }
+                  if (shouldPrintDebug) {
+                    logger.info("  ! inlining, non-static " + key);
+                  }
+                  didInline = true;
+                  inlined.set(key, val);
+                  return val;
                 });
-                return didInline ? (shouldPrintDebug && logger.info(`  bailing flattening due to attributes ${attributes.map(x => x.toString())}`), attr) : attributes;
+                if (didInline) {
+                  if (shouldPrintDebug) {
+                    logger.info(`  bailing flattening due to attributes ${attributes.map(x => x.toString())}`);
+                  }
+                  return attr;
+                }
+                return attributes;
               }
               if (styleValue !== import_constants.FAILED_EVAL) {
-                if (inlineWhenUnflattened.has(name) && (inlineWhenUnflattenedOGVals[name] = {
-                  styleValue,
-                  attr
-                }), isValidStyleKey(name, staticConfig)) {
+                if (inlineWhenUnflattened.has(name)) {
+                  inlineWhenUnflattenedOGVals[name] = {
+                    styleValue,
+                    attr
+                  };
+                }
+                if (isValidStyleKey(name, staticConfig)) {
                   if (name[0] === "$") {
-                    if (name.startsWith("$theme-") || name.startsWith("$group-")) return shouldPrintDebug && logger.info(`  ! not flattening media-like style: ${name}`), inlined.set(name, !0), attr;
+                    if (name.startsWith("$theme-") || name.startsWith("$group-")) {
+                      if (shouldPrintDebug) {
+                        logger.info(`  ! not flattening media-like style: ${name}`);
+                      }
+                      inlined.set(name, true);
+                      return attr;
+                    }
                     if (name.startsWith("$platform-")) {
                       const platformName = name.slice(10);
-                      return (platformName === platform2 || platformName === "native" && platform2 === "native" || platformName === "web" && platform2 === "web") && typeof styleValue == "object" ? (shouldPrintDebug && logger.info(`  flattening $platform-${platformName}: ${JSON.stringify(styleValue)}`), Object.entries(styleValue).map(([key, val]) => ({
-                        type: "style",
-                        value: {
-                          [key]: val
-                        },
-                        name: key,
-                        attr: path.node
-                      }))) : (shouldPrintDebug && logger.info(`  ! skipping non-matching platform style: ${name}`), []);
+                      const isMatchingPlatform = platformName === platform2 || platformName === "native" && platform2 === "native" || platformName === "web" && platform2 === "web";
+                      if (isMatchingPlatform && typeof styleValue === "object") {
+                        if (shouldPrintDebug) {
+                          logger.info(`  flattening $platform-${platformName}: ${JSON.stringify(styleValue)}`);
+                        }
+                        return Object.entries(styleValue).map(([key, val]) => ({
+                          type: "style",
+                          value: {
+                            [key]: val
+                          },
+                          name: key,
+                          attr: path.node
+                        }));
+                      } else {
+                        if (platform2 === "native" && nativeOnlyPlatforms.has(platformName)) {
+                          if (shouldPrintDebug) {
+                            logger.info(`  ! keeping platform-specific style for runtime evaluation: ${name}`);
+                          }
+                          inlined.set(name, true);
+                          return attr;
+                        }
+                        if (shouldPrintDebug) {
+                          logger.info(`  ! skipping non-matching platform style: ${name}`);
+                        }
+                        return [];
+                      }
                     }
                   }
-                  return shouldPrintDebug && logger.info(`  style: ${name} = ${JSON.stringify(styleValue)}`), name in defaultProps || hasSetOptimized || (res.optimized++, hasSetOptimized = !0), {
+                  if (shouldPrintDebug) {
+                    logger.info(`  style: ${name} = ${JSON.stringify(styleValue)}`);
+                  }
+                  if (!(name in defaultProps)) {
+                    if (!hasSetOptimized) {
+                      res.optimized++;
+                      hasSetOptimized = true;
+                    }
+                  }
+                  return {
                     type: "style",
                     value: {
                       [name]: styleValue
@@ -632,18 +954,27 @@ function createExtractor({
                     attr: path.node
                   };
                 }
-                return variants[name] && variantValues.set(name, styleValue), inlined.set(name, !0), attr;
+                if (variants[name]) {
+                  variantValues.set(name, styleValue);
+                }
+                inlined.set(name, true);
+                return attr;
               }
               if (t.isBinaryExpression(value)) {
-                shouldPrintDebug && logger.info(` binary expression ${name} = ${value}`);
+                if (shouldPrintDebug) {
+                  logger.info(` binary expression ${name} = ${value}`);
+                }
                 const {
-                    operator,
-                    left,
-                    right
-                  } = value,
-                  lVal = attemptEvalSafe(left),
-                  rVal = attemptEvalSafe(right);
-                if (shouldPrintDebug && logger.info(`  evalBinaryExpression lVal ${String(lVal)}, rVal ${String(rVal)}`), lVal !== import_constants.FAILED_EVAL && t.isConditionalExpression(right)) {
+                  operator,
+                  left,
+                  right
+                } = value;
+                const lVal = attemptEvalSafe(left);
+                const rVal = attemptEvalSafe(right);
+                if (shouldPrintDebug) {
+                  logger.info(`  evalBinaryExpression lVal ${String(lVal)}, rVal ${String(rVal)}`);
+                }
+                if (lVal !== import_constants.FAILED_EVAL && t.isConditionalExpression(right)) {
                   const ternary = addBinaryConditional(operator, left, right);
                   if (ternary) return ternary;
                 }
@@ -651,24 +982,45 @@ function createExtractor({
                   const ternary = addBinaryConditional(operator, right, left);
                   if (ternary) return ternary;
                 }
-                return shouldPrintDebug && logger.info("  evalBinaryExpression cant extract"), inlined.set(name, !0), attr;
+                if (shouldPrintDebug) {
+                  logger.info(`  evalBinaryExpression cant extract`);
+                }
+                inlined.set(name, true);
+                return attr;
               }
               const staticConditional = getStaticConditional(value);
-              if (staticConditional) return shouldPrintDebug === "verbose" && logger.info(` static conditional ${name} ${value}`), {
-                type: "ternary",
-                value: staticConditional
-              };
+              if (staticConditional) {
+                if (shouldPrintDebug === "verbose") {
+                  logger.info(` static conditional ${name} ${value}`);
+                }
+                return {
+                  type: "ternary",
+                  value: staticConditional
+                };
+              }
               const staticLogical = getStaticLogical(value);
-              if (staticLogical) return shouldPrintDebug === "verbose" && logger.info(` static ternary ${name} =  ${value}`), {
-                type: "ternary",
-                value: staticLogical
-              };
-              return inlined.set(name, !0), shouldPrintDebug && logger.info(` ! inline no match ${name} ${value}`), attr;
+              if (staticLogical) {
+                if (shouldPrintDebug === "verbose") {
+                  logger.info(` static ternary ${name} =  ${value}`);
+                }
+                return {
+                  type: "ternary",
+                  value: staticLogical
+                };
+              }
+              inlined.set(name, true);
+              if (shouldPrintDebug) {
+                logger.info(` ! inline no match ${name} ${value}`);
+              }
+              return attr;
               function addBinaryConditional(operator, staticExpr, cond) {
                 if (getStaticConditional(cond)) {
-                  const alt = attemptEval(t.binaryExpression(operator, staticExpr, cond.alternate)),
-                    cons = attemptEval(t.binaryExpression(operator, staticExpr, cond.consequent));
-                  return shouldPrintDebug && logger.info(["  binaryConditional", cond.test, cons, alt].join(" ")), {
+                  const alt = attemptEval(t.binaryExpression(operator, staticExpr, cond.alternate));
+                  const cons = attemptEval(t.binaryExpression(operator, staticExpr, cond.consequent));
+                  if (shouldPrintDebug) {
+                    logger.info(["  binaryConditional", cond.test, cons, alt].join(" "));
+                  }
+                  return {
                     type: "ternary",
                     value: {
                       test: cond.test,
@@ -685,57 +1037,84 @@ function createExtractor({
                 return null;
               }
               function getStaticConditional(value2) {
-                if (t.isConditionalExpression(value2)) try {
-                  const aVal = attemptEval(value2.alternate),
-                    cVal = attemptEval(value2.consequent);
-                  if (shouldPrintDebug) {
-                    const type = value2.test.type;
-                    logger.info(["      static ternary", type, cVal, aVal].join(" "));
-                  }
-                  return {
-                    test: value2.test,
-                    remove,
-                    consequent: {
-                      [name]: cVal
-                    },
-                    alternate: {
-                      [name]: aVal
+                if (t.isConditionalExpression(value2)) {
+                  try {
+                    const aVal = attemptEval(value2.alternate);
+                    const cVal = attemptEval(value2.consequent);
+                    if (shouldPrintDebug) {
+                      const type = value2.test.type;
+                      logger.info(["      static ternary", type, cVal, aVal].join(" "));
                     }
-                  };
-                } catch (err) {
-                  shouldPrintDebug && logger.info(["       cant eval ternary", err.message].join(" "));
+                    return {
+                      test: value2.test,
+                      remove,
+                      consequent: {
+                        [name]: cVal
+                      },
+                      alternate: {
+                        [name]: aVal
+                      }
+                    };
+                  } catch (err) {
+                    if (shouldPrintDebug) {
+                      logger.info(["       cant eval ternary", err.message].join(" "));
+                    }
+                  }
                 }
                 return null;
               }
               function getStaticLogical(value2) {
-                if (t.isLogicalExpression(value2) && value2.operator === "&&") try {
-                  const val = attemptEval(value2.right);
-                  return shouldPrintDebug && logger.info(["  staticLogical", value2.left, name, val].join(" ")), {
-                    test: value2.left,
-                    remove,
-                    consequent: {
-                      [name]: val
-                    },
-                    alternate: null
-                  };
-                } catch (err) {
-                  shouldPrintDebug && logger.info(["  cant static eval logical", err].join(" "));
+                if (t.isLogicalExpression(value2)) {
+                  if (value2.operator === "&&") {
+                    try {
+                      const val = attemptEval(value2.right);
+                      if (shouldPrintDebug) {
+                        logger.info(["  staticLogical", value2.left, name, val].join(" "));
+                      }
+                      return {
+                        test: value2.left,
+                        remove,
+                        consequent: {
+                          [name]: val
+                        },
+                        alternate: null
+                      };
+                    } catch (err) {
+                      if (shouldPrintDebug) {
+                        logger.info(["  cant static eval logical", err].join(" "));
+                      }
+                    }
+                  }
                 }
                 return null;
               }
             },
             isStaticObject = function (obj) {
               return t.isObjectExpression(obj) && obj.properties.every(prop => {
-                if (!t.isObjectProperty(prop)) return !1;
-                const propName = prop.key.name;
-                return !isValidStyleKey(propName, staticConfig) && propName !== "render" ? (shouldPrintDebug && logger.info(["  not a valid style prop!", propName].join(" ")), !1) : !0;
+                if (!t.isObjectProperty(prop)) {
+                  return false;
+                }
+                const propName = prop.key["name"];
+                if (!isValidStyleKey(propName, staticConfig) && propName !== "render") {
+                  if (shouldPrintDebug) {
+                    logger.info(["  not a valid style prop!", propName].join(" "));
+                  }
+                  return false;
+                }
+                return true;
               });
             },
             flattenNestedTernaries = function (test, side, ternaryPartial = {}) {
-              if (!side) return null;
-              if (!isStaticObject(side)) throw new Error("not extractable");
+              if (!side) {
+                return null;
+              }
+              if (!isStaticObject(side)) {
+                throw new Error("not extractable");
+              }
               return side.properties.flatMap(property => {
-                if (!t.isObjectProperty(property)) throw new Error("expected object property");
+                if (!t.isObjectProperty(property)) {
+                  throw new Error("expected object property");
+                }
                 if (t.isConditionalExpression(property.value)) {
                   const [truthy, falsy] = [t.objectExpression([t.objectProperty(property.key, property.value.consequent)]), t.objectExpression([t.objectProperty(property.key, property.value.alternate)])].map(x => attemptEval(x));
                   return [createTernary({
@@ -752,8 +1131,8 @@ function createExtractor({
                     remove() {}
                   })];
                 }
-                const obj = t.objectExpression([t.objectProperty(property.key, property.value)]),
-                  consequent = attemptEval(obj);
+                const obj = t.objectExpression([t.objectProperty(property.key, property.value)]);
+                const consequent = attemptEval(obj);
                 return createTernary({
                   remove() {},
                   ...ternaryPartial,
@@ -764,270 +1143,457 @@ function createExtractor({
               });
             },
             mergeToEnd = function (obj, key, val) {
-              key in obj && delete obj[key], obj[key] = val;
+              if (key in obj) {
+                delete obj[key];
+              }
+              obj[key] = val;
             },
             normalizeStyleWithoutVariants = function (style) {
               let res2 = {};
-              for (const key in style) if (staticConfig.variants && key in staticConfig.variants) mergeToEnd(res2, key, style[key]);else {
-                const expanded = normalizeStyle({
-                  [key]: style[key]
-                }, !0);
-                for (const key2 in expanded) mergeToEnd(res2, key2, expanded[key2]);
+              for (const key in style) {
+                if (staticConfig.variants && key in staticConfig.variants) {
+                  mergeToEnd(res2, key, style[key]);
+                } else {
+                  const expanded = normalizeStyle({
+                    [key]: style[key]
+                  }, true);
+                  for (const key2 in expanded) {
+                    mergeToEnd(res2, key2, expanded[key2]);
+                  }
+                }
               }
               return res2;
             },
             mergeStyles = function (prev2, next) {
-              for (const key in next) pseudoDescriptors[key] ? (prev2[key] = prev2[key] || {}, Object.assign(prev2[key], next[key])) : mergeToEnd(prev2, key, next[key]);
+              for (const key in next) {
+                if (pseudoDescriptors[key]) {
+                  prev2[key] = prev2[key] || {};
+                  Object.assign(prev2[key], next[key]);
+                } else {
+                  mergeToEnd(prev2, key, next[key]);
+                }
+              }
             };
           const {
-              staticConfig
-            } = component,
-            defaultProps = {
-              ...getDefaultProps(staticConfig)
-            },
-            variants = staticConfig.variants || {},
-            isTextView = staticConfig.isText || !1,
-            validStyles = staticConfig?.validStyles ?? {};
+            staticConfig
+          } = component;
+          const defaultProps = {
+            ...getDefaultProps(staticConfig)
+          };
+          const variants = staticConfig.variants || {};
+          const isTextView = staticConfig.isText || false;
+          const validStyles = staticConfig?.validStyles ?? {};
           let tagName = defaultProps.render ?? (isTextView ? "span" : "div");
           traversePath.get("openingElement").get("attributes").forEach(path => {
             const attr = path.node;
-            if (t.isJSXSpreadAttribute(attr) || attr.name.name !== "render") return;
+            if (t.isJSXSpreadAttribute(attr)) return;
+            if (attr.name.name !== "render") return;
             const val = attr.value;
-            t.isStringLiteral(val) && (tagName = val.value);
-          }), shouldPrintDebug === "verbose" && console.info(` Start tag ${tagName}`);
+            if (!t.isStringLiteral(val)) return;
+            tagName = val.value;
+          });
+          if (shouldPrintDebug === "verbose") {
+            console.info(` Start tag ${tagName}`);
+          }
           const flatNodeName = getFlattenedNode?.({
-              isTextView,
-              tag: tagName
-            }),
-            inlineProps = /* @__PURE__ */new Set([
-            // adding some always inline props
-            ...(restProps.inlineProps || []), ...(staticConfig.inlineProps || [])]),
-            deoptProps = /* @__PURE__ */new Set([
-            // always de-opt animation these
-            "animation", "animateOnly", "animatePresence", "disableOptimization", ...(isTargetingHTML ? [] : ["pressStyle", "focusStyle", "focusVisibleStyle", "focusWithinStyle", "disabledStyle"]),
-            // when using a non-CSS driver, de-opt on enterStyle/exitStyle
-            ...(guiConfig?.animations.isReactNative ? ["enterStyle", "exitStyle"] : [])]),
-            inlineWhenUnflattened = new Set(staticConfig.inlineWhenUnflattened || []),
-            staticNamespace = (0, import_getStaticBindingsForScope.getStaticBindingsForScope)(traversePath.scope, importsWhitelist, sourcePath, bindingCache, shouldPrintDebug),
-            attemptEval = evaluateVars ? (0, import_createEvaluator.createEvaluator)({
-              props: propsWithFileInfo,
-              staticNamespace,
-              sourcePath,
-              traversePath,
-              shouldPrintDebug
-            }) : import_evaluateAstNode.evaluateAstNode,
-            attemptEvalSafe = (0, import_createEvaluator.createSafeEvaluator)(attemptEval);
-          if (shouldPrintDebug && logger.info(`  staticNamespace ${Object.keys(staticNamespace).join(", ")}`), couldntParse) return;
+            isTextView,
+            tag: tagName
+          });
+          const inlineProps = /* @__PURE__ */new Set([
+          // adding some always inline props
+          ...(restProps.inlineProps || []), ...(staticConfig.inlineProps || [])]);
+          const deoptProps = /* @__PURE__ */new Set([
+          // always de-opt animation these
+          "animation", "animateOnly", "animatePresence", "disableOptimization", ...(!isTargetingHTML ? ["pressStyle", "focusStyle", "focusVisibleStyle", "focusWithinStyle", "disabledStyle"] : []),
+          // when using a non-CSS driver, de-opt on enterStyle/exitStyle
+          ...(guiConfig?.animations.isReactNative ? ["enterStyle", "exitStyle"] : [])]);
+          const inlineWhenUnflattened = new Set(staticConfig.inlineWhenUnflattened || []);
+          const staticNamespace = (0, import_getStaticBindingsForScope.getStaticBindingsForScope)(traversePath.scope, importsWhitelist, sourcePath, bindingCache, shouldPrintDebug);
+          const attemptEval = !evaluateVars ? import_evaluateAstNode.evaluateAstNode : (0, import_createEvaluator.createEvaluator)({
+            props: propsWithFileInfo,
+            staticNamespace,
+            sourcePath,
+            traversePath,
+            shouldPrintDebug
+          });
+          const attemptEvalSafe = (0, import_createEvaluator.createSafeEvaluator)(attemptEval);
+          if (shouldPrintDebug) {
+            logger.info(`  staticNamespace ${Object.keys(staticNamespace).join(", ")}`);
+          }
+          if (couldntParse) {
+            return;
+          }
           tm.mark("jsx-element-flattened", !!shouldPrintDebug);
-          let attrs = [],
-            shouldDeopt = !1;
-          const inlined = /* @__PURE__ */new Map(),
-            variantValues = /* @__PURE__ */new Map();
-          let hasSetOptimized = !1;
-          const inlineWhenUnflattenedOGVals = {},
-            propMapperStyleState = {
-              staticConfig,
-              usedKeys: {},
-              classNames: {},
-              style: {},
-              theme: defaultTheme,
-              viewProps: defaultProps,
-              conf: guiConfig,
-              props: defaultProps,
-              componentState,
-              styleProps: {
-                ...styleProps,
-                resolveValues: "auto"
-              },
-              debug: shouldPrintDebug
-            };
-          if (attrs = traversePath.get("openingElement").get("attributes").flatMap(path => {
-            if (!shouldDeopt) try {
+          let attrs = [];
+          let shouldDeopt = false;
+          const inlined = /* @__PURE__ */new Map();
+          const variantValues = /* @__PURE__ */new Map();
+          let hasSetOptimized = false;
+          const inlineWhenUnflattenedOGVals = {};
+          const propMapperStyleState = {
+            staticConfig,
+            usedKeys: {},
+            classNames: {},
+            style: {},
+            theme: defaultTheme,
+            viewProps: defaultProps,
+            conf: guiConfig,
+            props: defaultProps,
+            componentState,
+            styleProps: {
+              ...styleProps,
+              resolveValues: "auto"
+            },
+            debug: shouldPrintDebug
+          };
+          attrs = traversePath.get("openingElement").get("attributes").flatMap(path => {
+            if (shouldDeopt) {
+              return;
+            }
+            try {
               const res2 = evaluateAttribute(path);
-              return res2 || path.remove(), res2;
+              if (!res2) {
+                path.remove();
+              }
+              return res2;
             } catch (err) {
-              return shouldPrintDebug && (logger.info(["Recoverable error extracting attribute", err.message, shouldPrintDebug === "verbose" ? err.stack : ""].join(" ")), shouldPrintDebug === "verbose" && logger.info(`node ${path.node?.type}`)), inlined.set(`${Math.random()}`, "spread"), {
+              if (shouldPrintDebug) {
+                logger.info(["Recoverable error extracting attribute", err.message, shouldPrintDebug === "verbose" ? err.stack : ""].join(" "));
+                if (shouldPrintDebug === "verbose") {
+                  logger.info(`node ${path.node?.type}`);
+                }
+              }
+              inlined.set(`${Math.random()}`, "spread");
+              return {
                 type: "attr",
                 value: path.node
               };
             }
-          }).flat(4).filter(import_extractHelpers.isPresent), shouldPrintDebug && logger.info([`  - attrs (before):
-`, (0, import_logLines.logLines)(attrs.map(import_extractHelpers.attrStr).join(", "))].join(" ")), couldntParse || shouldDeopt) {
-            shouldPrintDebug && logger.info(["  avoid optimizing:", {
-              couldntParse,
-              shouldDeopt
-            }].join(" ")), node.attributes = ogAttributes;
+          }).flat(4).filter(import_extractHelpers.isPresent);
+          if (shouldPrintDebug) {
+            logger.info(["  - attrs (before):\n", (0, import_logLines.logLines)(attrs.map(import_extractHelpers.attrStr).join(", "))].join(" "));
+          }
+          if (couldntParse || shouldDeopt) {
+            if (shouldPrintDebug) {
+              logger.info([`  avoid optimizing:`, {
+                couldntParse,
+                shouldDeopt
+              }].join(" "));
+            }
+            node.attributes = ogAttributes;
             return;
           }
           const parentFn = (0, import_findTopmostFunction.findTopmostFunction)(traversePath);
-          parentFn && modifiedComponents.add(parentFn);
-          const hasSpread = attrs.some(x => x.type === "attr" && t.isJSXSpreadAttribute(x.value)),
-            hasOnlyStringChildren = !hasSpread && (node.selfClosing || traversePath.node.children && traversePath.node.children.every(x => x.type === "JSXText"));
+          if (parentFn) {
+            modifiedComponents.add(parentFn);
+          }
+          const hasSpread = attrs.some(x => x.type === "attr" && t.isJSXSpreadAttribute(x.value));
+          const hasOnlyStringChildren = !hasSpread && (node.selfClosing || traversePath.node.children && traversePath.node.children.every(x => x.type === "JSXText"));
           let themeVal = inlined.get("theme");
-          platform2 !== "native" && inlined.delete("theme");
+          if (platform2 !== "native") {
+            inlined.delete("theme");
+          }
           for (const [key] of inlined) {
             const isStaticObjectVariant = staticConfig.variants?.[key] && variantValues.has(key);
-            (INLINE_EXTRACTABLE[key] || isStaticObjectVariant) && inlined.delete(key);
+            if (INLINE_EXTRACTABLE[key] || isStaticObjectVariant) {
+              inlined.delete(key);
+            }
           }
           const canFlattenProps = inlined.size === 0;
-          let shouldFlatten = !!(flatNodeName && !shouldDeopt && canFlattenProps && !hasSpread && !staticConfig.isStyledHOC && !staticConfig.isHOC && !staticConfig.isReactNative && staticConfig.neverFlatten !== !0 && (staticConfig.neverFlatten !== "jsx" || hasOnlyStringChildren));
+          let shouldFlatten = Boolean(flatNodeName && !shouldDeopt && canFlattenProps && !hasSpread && !staticConfig.isStyledHOC && !staticConfig.isHOC && !staticConfig.isReactNative && staticConfig.neverFlatten !== true && (staticConfig.neverFlatten === "jsx" ? hasOnlyStringChildren : true));
           const usedThemeKeys = /* @__PURE__ */new Set();
-          if (themeAccessListeners.add(key => {
-            disableExtractVariables && (usedThemeKeys.add(key), shouldFlatten = !1, shouldPrintDebug === "verbose" && logger.info([" ! accessing theme key, avoid flatten", key].join(" ")));
-          }), !shouldFlatten) {
-            shouldPrintDebug && logger.info(`Deopting ${JSON.stringify({
-              shouldFlatten,
-              shouldDeopt,
-              canFlattenProps,
-              hasSpread,
-              neverFlatten: staticConfig.neverFlatten
-            })}`), node.attributes = ogAttributes;
+          themeAccessListeners.add(key => {
+            if (disableExtractVariables) {
+              usedThemeKeys.add(key);
+              shouldFlatten = false;
+              if (shouldPrintDebug === "verbose") {
+                logger.info([" ! accessing theme key, avoid flatten", key].join(" "));
+              }
+            }
+          });
+          if (!shouldFlatten) {
+            if (shouldPrintDebug) {
+              logger.info(`Deopting ${JSON.stringify({
+                shouldFlatten,
+                shouldDeopt,
+                canFlattenProps,
+                hasSpread,
+                neverFlatten: staticConfig.neverFlatten
+              })}`);
+            }
+            node.attributes = ogAttributes;
             return;
           }
-          let skipMap = !1;
+          let skipMap = false;
           const defaultStyleAttrs = Object.keys(defaultProps).flatMap(key => {
             if (skipMap) return [];
             const value = defaultProps[key];
-            if (key === "theme" && !themeVal) return platform2 === "native" && (shouldFlatten = !1, skipMap = !0, inlined.set("theme", {
-              value: t.stringLiteral(value)
-            })), themeVal = {
-              value: t.stringLiteral(value)
-            }, [];
-            if (!isValidStyleKey(key, staticConfig)) return [];
+            if (key === "theme" && !themeVal) {
+              if (platform2 === "native") {
+                shouldFlatten = false;
+                skipMap = true;
+                inlined.set("theme", {
+                  value: t.stringLiteral(value)
+                });
+              }
+              themeVal = {
+                value: t.stringLiteral(value)
+              };
+              return [];
+            }
+            if (!isValidStyleKey(key, staticConfig)) {
+              return [];
+            }
             const name = guiConfig?.shorthands[key] || key;
             if (value === void 0) {
-              logger.warn(`\u26A0\uFE0F Error evaluating default style for component, prop ${key} ${value}`), shouldDeopt = !0;
+              logger.warn(`\u26A0\uFE0F Error evaluating default style for component, prop ${key} ${value}`);
+              shouldDeopt = true;
               return;
             }
-            return name[0] === "$" && mediaQueryConfig[name.slice(1)] ? (defaultProps[key] = void 0, evaluateAttribute({
-              node: t.jsxAttribute(t.jsxIdentifier(name), t.jsxExpressionContainer(t.objectExpression(Object.keys(value).filter(k => typeof value[k] < "u").map(k => t.objectProperty(t.identifier(k), (0, import_literalToAst.literalToAst)(value[k]))))))
-            })) : {
+            if (name[0] === "$" && mediaQueryConfig[name.slice(1)]) {
+              defaultProps[key] = void 0;
+              return evaluateAttribute({
+                node: t.jsxAttribute(t.jsxIdentifier(name), t.jsxExpressionContainer(t.objectExpression(Object.keys(value).filter(k => {
+                  return typeof value[k] !== "undefined";
+                }).map(k => {
+                  return t.objectProperty(t.identifier(k), (0, import_literalToAst.literalToAst)(value[k]));
+                }))))
+              });
+            }
+            const attr = {
               type: "style",
               name,
               value: {
                 [name]: value
               }
             };
+            return attr;
           });
-          skipMap || defaultStyleAttrs.length && (attrs = [...defaultStyleAttrs, ...attrs]);
+          if (!skipMap) {
+            if (defaultStyleAttrs.length) {
+              attrs = [...defaultStyleAttrs, ...attrs];
+            }
+          }
           let ternaries = [];
           attrs = attrs.reduce((out, cur) => {
             const next = attrs[attrs.indexOf(cur) + 1];
-            if (cur.type === "ternary" && ternaries.push(cur.value), (!next || next.type !== "ternary") && ternaries.length) {
+            if (cur.type === "ternary") {
+              ternaries.push(cur.value);
+            }
+            if ((!next || next.type !== "ternary") && ternaries.length) {
               const normalized = (0, import_normalizeTernaries.normalizeTernaries)(ternaries).map(({
                 alternate,
                 consequent,
                 ...rest
-              }) => ({
-                type: "ternary",
-                value: {
-                  ...rest,
-                  alternate: alternate || null,
-                  consequent: consequent || null
-                }
-              }));
+              }) => {
+                return {
+                  type: "ternary",
+                  value: {
+                    ...rest,
+                    alternate: alternate || null,
+                    consequent: consequent || null
+                  }
+                };
+              });
               try {
                 return [...out, ...normalized];
               } finally {
-                shouldPrintDebug && logger.info(`    normalizeTernaries (${ternaries.length} => ${normalized.length})`), ternaries = [];
+                if (shouldPrintDebug) {
+                  logger.info(`    normalizeTernaries (${ternaries.length} => ${normalized.length})`);
+                }
+                ternaries = [];
+              }
+            }
+            if (cur.type === "ternary") {
+              return out;
+            }
+            out.push(cur);
+            return out;
+          }, []).flat();
+          if (themeVal) {
+            if (!programPath) {
+              console.warn(`No program path found, avoiding importing flattening / importing theme in ${sourcePath}`);
+            } else {
+              if (shouldPrintDebug) {
+                logger.info(["  - wrapping theme", themeVal].join(" "));
               }
+              attrs = attrs.filter(x => !(x.type === "attr" && t.isJSXAttribute(x.value) && x.value.name.name === "theme"));
+              if (!hasImportedTheme) {
+                hasImportedTheme = true;
+                programPath.node.body.push(t.importDeclaration([t.importSpecifier(t.identifier("_GuiTheme"), t.identifier("Theme"))], t.stringLiteral("@hanzogui/web")));
+              }
+              traversePath.replaceWith(t.jsxElement(t.jsxOpeningElement(t.jsxIdentifier("_GuiTheme"), [t.jsxAttribute(t.jsxIdentifier("name"), themeVal.value)]), t.jsxClosingElement(t.jsxIdentifier("_GuiTheme")), [traversePath.node]));
             }
-            return cur.type === "ternary" || out.push(cur), out;
-          }, []).flat(), themeVal && (programPath ? (shouldPrintDebug && logger.info(["  - wrapping theme", themeVal].join(" ")), attrs = attrs.filter(x => !(x.type === "attr" && t.isJSXAttribute(x.value) && x.value.name.name === "theme")), hasImportedTheme || (hasImportedTheme = !0, programPath.node.body.push(t.importDeclaration([t.importSpecifier(t.identifier("_GuiTheme"), t.identifier("Theme"))], t.stringLiteral("@hanzogui/web")))), traversePath.replaceWith(t.jsxElement(t.jsxOpeningElement(t.jsxIdentifier("_GuiTheme"), [t.jsxAttribute(t.jsxIdentifier("name"), themeVal.value)]), t.jsxClosingElement(t.jsxIdentifier("_GuiTheme")), [traversePath.node]))) : console.warn(`No program path found, avoiding importing flattening / importing theme in ${sourcePath}`)), shouldPrintDebug && logger.info([`  - attrs (flattened): 
-`, (0, import_logLines.logLines)(attrs.map(import_extractHelpers.attrStr).join(", "))].join(" "));
+          }
+          if (shouldPrintDebug) {
+            logger.info(["  - attrs (flattened): \n", (0, import_logLines.logLines)(attrs.map(import_extractHelpers.attrStr).join(", "))].join(" "));
+          }
           let foundStaticProps = {};
           for (const key in attrs) {
             const cur = attrs[key];
             if (cur.type === "style") {
               const expanded = normalizeStyleWithoutVariants(cur.value);
-              for (const key2 in expanded) mergeToEnd(foundStaticProps, key2, expanded[key2]);
+              for (const key2 in expanded) {
+                mergeToEnd(foundStaticProps, key2, expanded[key2]);
+              }
               continue;
             }
             if (cur.type === "attr") {
-              if (t.isJSXSpreadAttribute(cur.value) || !t.isJSXIdentifier(cur.value.name)) continue;
-              const key2 = cur.value.name.name,
-                value = attemptEvalSafe(cur.value.value || t.booleanLiteral(!0));
-              value !== import_constants.FAILED_EVAL && mergeToEnd(foundStaticProps, key2, value);
+              if (t.isJSXSpreadAttribute(cur.value)) {
+                continue;
+              }
+              if (!t.isJSXIdentifier(cur.value.name)) {
+                continue;
+              }
+              const key2 = cur.value.name.name;
+              const value = attemptEvalSafe(cur.value.value || t.booleanLiteral(true));
+              if (value !== import_constants.FAILED_EVAL) {
+                mergeToEnd(foundStaticProps, key2, value);
+              }
             }
           }
           const completeProps = {};
-          for (const key in defaultProps) key in foundStaticProps || (completeProps[key] = defaultProps[key]);
-          for (const key in foundStaticProps) completeProps[key] = foundStaticProps[key];
+          for (const key in defaultProps) {
+            if (!(key in foundStaticProps)) {
+              completeProps[key] = defaultProps[key];
+            }
+          }
+          for (const key in foundStaticProps) {
+            completeProps[key] = foundStaticProps[key];
+          }
           attrs = attrs.reduce((acc, cur) => {
             if (!cur) return acc;
-            if (cur.type === "attr" && !t.isJSXSpreadAttribute(cur.value) && shouldFlatten) {
-              const name = cur.value.name.name;
-              if (typeof name == "string") {
-                if (name === "render") return acc;
-                if (variants[name] && variantValues.has(name)) {
-                  const styleState = {
-                    ...propMapperStyleState,
-                    props: completeProps
-                  };
-                  let out = {};
-                  if (propMapper(name, variantValues.get(name), styleState, !1, (key2, val) => {
-                    out[key2] = val;
-                  }), out && isTargetingHTML) {
-                    const cn = out.className;
-                    out = reactNativeWebInternals.createDOMProps(isTextView ? "span" : "div", out), out.className = cn;
+            if (cur.type === "attr" && !t.isJSXSpreadAttribute(cur.value)) {
+              if (shouldFlatten) {
+                const name = cur.value.name.name;
+                if (typeof name === "string") {
+                  if (name === "render") {
+                    return acc;
                   }
-                  shouldPrintDebug && logger.info([" - expanded variant", name, out].join(" "));
-                  for (const key2 in out) {
-                    const value2 = out[key2];
-                    isValidStyleKey(key2, staticConfig) ? acc.push({
-                      type: "style",
-                      value: {
-                        [key2]: value2
-                      },
-                      name: key2,
-                      attr: cur.value
-                    }) : acc.push({
-                      type: "attr",
-                      value: t.jsxAttribute(t.jsxIdentifier(key2), t.jsxExpressionContainer(typeof value2 == "string" ? t.stringLiteral(value2) : (0, import_literalToAst.literalToAst)(value2)))
+                  if (variants[name] && variantValues.has(name)) {
+                    const styleState = {
+                      ...propMapperStyleState,
+                      props: completeProps
+                    };
+                    let out = {};
+                    propMapper(name, variantValues.get(name), styleState, false, (key2, val) => {
+                      out[key2] = val;
                     });
+                    if (out && isTargetingHTML) {
+                      const cn = out.className;
+                      out = reactNativeWebInternals.createDOMProps(isTextView ? "span" : "div", out);
+                      out.className = cn;
+                    }
+                    if (shouldPrintDebug) {
+                      logger.info([" - expanded variant", name, out].join(" "));
+                    }
+                    for (const key2 in out) {
+                      const value2 = out[key2];
+                      if (isValidStyleKey(key2, staticConfig)) {
+                        acc.push({
+                          type: "style",
+                          value: {
+                            [key2]: value2
+                          },
+                          name: key2,
+                          attr: cur.value
+                        });
+                      } else {
+                        acc.push({
+                          type: "attr",
+                          value: t.jsxAttribute(t.jsxIdentifier(key2), t.jsxExpressionContainer(typeof value2 === "string" ? t.stringLiteral(value2) : (0, import_literalToAst.literalToAst)(value2)))
+                        });
+                      }
+                    }
                   }
                 }
               }
             }
-            if (cur.type !== "style") return acc.push(cur), acc;
+            if (cur.type !== "style") {
+              acc.push(cur);
+              return acc;
+            }
             let key = Object.keys(cur.value)[0];
-            const value = cur.value[key],
-              fullKey = guiConfig?.shorthands[key];
-            return fullKey && (cur.value = {
-              [fullKey]: value
-            }, key = fullKey), disableExtractVariables && value[0] === "$" && (usedThemeKeys.has(key) || usedThemeKeys.has(fullKey)) ? (shouldPrintDebug && logger.info([`   keeping variable inline: ${key} =`, value].join(" ")), acc.push({
-              type: "attr",
-              value: t.jsxAttribute(t.jsxIdentifier(key), t.jsxExpressionContainer(t.stringLiteral(value)))
-            }), acc) : (acc.push(cur), acc);
-          }, []), tm.mark("jsx-element-expanded", !!shouldPrintDebug), shouldPrintDebug && logger.info([`  - attrs (expanded): 
-`, (0, import_logLines.logLines)(attrs.map(import_extractHelpers.attrStr).join(", "))].join(" "));
+            const value = cur.value[key];
+            const fullKey = guiConfig?.shorthands[key];
+            if (fullKey) {
+              cur.value = {
+                [fullKey]: value
+              };
+              key = fullKey;
+            }
+            if (disableExtractVariables) {
+              if (value[0] === "$" && (usedThemeKeys.has(key) || usedThemeKeys.has(fullKey))) {
+                if (shouldPrintDebug) {
+                  logger.info([`   keeping variable inline: ${key} =`, value].join(" "));
+                }
+                acc.push({
+                  type: "attr",
+                  value: t.jsxAttribute(t.jsxIdentifier(key), t.jsxExpressionContainer(t.stringLiteral(value)))
+                });
+                return acc;
+              }
+            }
+            acc.push(cur);
+            return acc;
+          }, []);
+          tm.mark("jsx-element-expanded", !!shouldPrintDebug);
+          if (shouldPrintDebug) {
+            logger.info(["  - attrs (expanded): \n", (0, import_logLines.logLines)(attrs.map(import_extractHelpers.attrStr).join(", "))].join(" "));
+          }
           let prev = null;
-          const getProps = (props, includeProps = !1, debugName = "") => {
-            if (!props) return shouldPrintDebug && logger.info([" getProps() no props"].join(" ")), {};
-            if (excludeProps?.size) for (const key in props) excludeProps.has(key) && (shouldPrintDebug && logger.info([" delete excluded", key].join(" ")), delete props[key]);
+          const getProps = (props, includeProps = false, debugName = "") => {
+            if (!props) {
+              if (shouldPrintDebug) logger.info([" getProps() no props"].join(" "));
+              return {};
+            }
+            if (excludeProps?.size) {
+              for (const key in props) {
+                if (excludeProps.has(key)) {
+                  if (shouldPrintDebug) logger.info([" delete excluded", key].join(" "));
+                  delete props[key];
+                }
+              }
+            }
             const before = process.env.IS_STATIC;
             process.env.IS_STATIC = "is_static";
             try {
               const out = getSplitStyles(props, staticConfig, defaultTheme, "", componentState, {
                 ...styleProps,
-                noClass: !0,
+                noClass: true,
                 fallbackProps: completeProps,
                 ...(platform2 === "native" && {
                   resolveValues: "except-theme"
                 })
-              }, void 0, void 0, void 0, void 0, !1, debugPropValue || shouldPrintDebug);
+              }, void 0, void 0, void 0, void 0, false, debugPropValue || shouldPrintDebug);
               let outProps = {
                 ...(includeProps ? out.viewProps : {}),
                 ...out.style,
                 ...out.pseudos
               };
-              for (const key in outProps) deoptProps.has(key) && (shouldFlatten = !1);
-              return shouldPrintDebug && (logger.info(`(${debugName})`), logger.info(`
-       getProps (props in): ${(0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(props))}`), logger.info(`
-       getProps (outProps): ${(0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(outProps))}`)), out.fontFamily && ((0, import_propsToFontFamilyCache.setPropsToFontFamily)(outProps, out.fontFamily), shouldPrintDebug && logger.info(`
-      \u{1F4AC} new font fam: ${out.fontFamily}`)), outProps;
+              for (const key in outProps) {
+                if (deoptProps.has(key)) {
+                  shouldFlatten = false;
+                }
+              }
+              if (shouldPrintDebug) {
+                logger.info(`(${debugName})`);
+                logger.info(`
+       getProps (props in): ${(0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(props))}`);
+                logger.info(`
+       getProps (outProps): ${(0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(outProps))}`);
+              }
+              if (out.fontFamily) {
+                (0, import_propsToFontFamilyCache.setPropsToFontFamily)(outProps, out.fontFamily);
+                if (shouldPrintDebug) {
+                  logger.info(`
+      \u{1F4AC} new font fam: ${out.fontFamily}`);
+                }
+              }
+              return outProps;
             } catch (err) {
-              return logger.info(["error", err.message, err.stack].join(" ")), {};
+              logger.info(["error", err.message, err.stack].join(" "));
+              return {};
             } finally {
               process.env.IS_STATIC = before;
             }
@@ -1035,92 +1601,183 @@ function createExtractor({
           attrs.unshift({
             type: "style",
             value: defaultProps
-          }), attrs = attrs.reduce((acc, cur) => {
+          });
+          attrs = attrs.reduce((acc, cur) => {
             if (cur.type === "style") {
               const keys = Object.keys(cur.value || {});
-              if (!keys.length) return acc;
-              const key = keys[0],
-                value = cur.value[key],
-                isMediaLikeKey = key[0] === "$" && (key.startsWith("$theme-") || key.startsWith("$platform-") || key.startsWith("$group-") || mediaQueryConfig[key.slice(1)]);
-              if (
+              if (!keys.length) {
+                return acc;
+              }
+              const key = keys[0];
+              const value = cur.value[key];
+              const isMediaLikeKey = key[0] === "$" && (key.startsWith("$theme-") || key.startsWith("$platform-") || key.startsWith("$group-") || mediaQueryConfig[key.slice(1)]);
+              const shouldKeepOriginalAttr =
               // !isStyleAndAttr[key] &&
               !shouldFlatten &&
               // de-opt if non-style
-              !validStyles[key] && !pseudoDescriptors[key] && !isMediaLikeKey && !(key.startsWith("data-") || key.startsWith("aria-"))) return shouldPrintDebug && logger.info(["     - keeping as non-style", key].join(" ")), prev = cur, acc.push({
-                type: "attr",
-                value: t.jsxAttribute(t.jsxIdentifier(key), t.jsxExpressionContainer(typeof value == "string" ? t.stringLiteral(value) : (0, import_literalToAst.literalToAst)(value)))
-              }), acc.push(cur), acc;
-              if (prev?.type === "style") return mergeStyles(prev.value, cur.value), acc;
+              !validStyles[key] && !pseudoDescriptors[key] && !isMediaLikeKey && !(key.startsWith("data-") || key.startsWith("aria-"));
+              if (shouldKeepOriginalAttr) {
+                if (shouldPrintDebug) {
+                  logger.info(["     - keeping as non-style", key].join(" "));
+                }
+                prev = cur;
+                acc.push({
+                  type: "attr",
+                  value: t.jsxAttribute(t.jsxIdentifier(key), t.jsxExpressionContainer(typeof value === "string" ? t.stringLiteral(value) : (0, import_literalToAst.literalToAst)(value)))
+                });
+                acc.push(cur);
+                return acc;
+              }
+              if (prev?.type === "style") {
+                mergeStyles(prev.value, cur.value);
+                return acc;
+              }
             }
-            return cur.type === "style" && (prev = cur), acc.push(cur), acc;
-          }, []), shouldPrintDebug && logger.info([`  - attrs (combined \u{1F500}): 
-`, (0, import_logLines.logLines)(attrs.map(import_extractHelpers.attrStr).join(", "))].join(" "));
+            if (cur.type === "style") {
+              prev = cur;
+            }
+            acc.push(cur);
+            return acc;
+          }, []);
+          if (shouldPrintDebug) {
+            logger.info(["  - attrs (combined \u{1F500}): \n", (0, import_logLines.logLines)(attrs.map(import_extractHelpers.attrStr).join(", "))].join(" "));
+          }
           let getStyleError = null;
-          for (const attr of attrs) try {
-            switch (shouldPrintDebug && console.info(`  Processing ${attr.type}:`), attr.type) {
-              case "ternary":
-                {
-                  const a = getProps(attr.value.alternate, !1, "ternary.alternate"),
-                    c = getProps(attr.value.consequent, !1, "ternary.consequent");
-                  a && (attr.value.alternate = a), c && (attr.value.consequent = c), shouldPrintDebug && logger.info(["     => tern ", (0, import_extractHelpers.attrStr)(attr)].join(" "));
-                  continue;
-                }
-              case "style":
-                {
-                  const styles = getProps(attr.value, !1, "style");
-                  styles && (attr.value = styles), shouldPrintDebug && logger.info(["  * styles (in)", (0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(attr.value))].join(" ")), shouldPrintDebug && logger.info(["  * styles (out)", (0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(styles))].join(" "));
-                  continue;
-                }
-              case "attr":
-                if (shouldFlatten && t.isJSXAttribute(attr.value)) {
-                  const key = attr.value.name.name;
-                  if (key === "style" || key === "className" || key === "render") continue;
-                  const value = attemptEvalSafe(attr.value.value || t.booleanLiteral(!0));
-                  if (value !== import_constants.FAILED_EVAL) {
-                    const outProps = getProps({
-                        [key]: value
-                      }, !0, `attr.${key}`),
-                      outKey = Object.keys(outProps)[0];
-                    if (outKey) {
-                      const outVal = outProps[outKey];
-                      attr.value = t.jsxAttribute(t.jsxIdentifier(outKey), t.jsxExpressionContainer(typeof outVal == "string" ? t.stringLiteral(outVal) : (0, import_literalToAst.literalToAst)(outVal)));
+          for (const attr of attrs) {
+            try {
+              if (shouldPrintDebug) {
+                console.info(`  Processing ${attr.type}:`);
+              }
+              switch (attr.type) {
+                case "ternary":
+                  {
+                    const a = getProps(attr.value.alternate, false, "ternary.alternate");
+                    const c = getProps(attr.value.consequent, false, "ternary.consequent");
+                    if (a) attr.value.alternate = a;
+                    if (c) attr.value.consequent = c;
+                    if (shouldPrintDebug) logger.info(["     => tern ", (0, import_extractHelpers.attrStr)(attr)].join(" "));
+                    continue;
+                  }
+                case "style":
+                  {
+                    const styles = getProps(attr.value, false, "style");
+                    if (styles) {
+                      attr.value = styles;
                     }
+                    if (shouldPrintDebug) logger.info(["  * styles (in)", (0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(attr.value))].join(" "));
+                    if (shouldPrintDebug) logger.info(["  * styles (out)", (0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(styles))].join(" "));
+                    continue;
                   }
-                }
+                case "attr":
+                  {
+                    if (shouldFlatten && t.isJSXAttribute(attr.value)) {
+                      const key = attr.value.name.name;
+                      if (key === "style" || key === "className" || key === "render") {
+                        continue;
+                      }
+                      const value = attemptEvalSafe(attr.value.value || t.booleanLiteral(true));
+                      if (value !== import_constants.FAILED_EVAL) {
+                        const outProps = getProps({
+                          [key]: value
+                        }, true, `attr.${key}`);
+                        const outKey = Object.keys(outProps)[0];
+                        if (outKey) {
+                          const outVal = outProps[outKey];
+                          attr.value = t.jsxAttribute(t.jsxIdentifier(outKey), t.jsxExpressionContainer(typeof outVal === "string" ? t.stringLiteral(outVal) : (0, import_literalToAst.literalToAst)(outVal)));
+                        }
+                      }
+                    }
+                  }
+              }
+            } catch (err) {
+              getStyleError = err;
             }
-          } catch (err) {
-            getStyleError = err;
           }
-          if (shouldPrintDebug && logger.info([`  - attrs (ternaries/combined):
-`, (0, import_logLines.logLines)(attrs.map(import_extractHelpers.attrStr).join(", "))].join(" ")), tm.mark("jsx-element-styles", !!shouldPrintDebug), getStyleError) return logger.info([" \u26A0\uFE0F postprocessing error, deopt", getStyleError].join(" ")), node.attributes = ogAttributes, null;
+          if (shouldPrintDebug) {
+            logger.info(["  - attrs (ternaries/combined):\n", (0, import_logLines.logLines)(attrs.map(import_extractHelpers.attrStr).join(", "))].join(" "));
+          }
+          tm.mark("jsx-element-styles", !!shouldPrintDebug);
+          if (getStyleError) {
+            logger.info([" \u26A0\uFE0F postprocessing error, deopt", getStyleError].join(" "));
+            node.attributes = ogAttributes;
+            return null;
+          }
           const existingStyleKeys = /* @__PURE__ */new Set();
           for (let i = attrs.length - 1; i >= 0; i--) {
             const attr = attrs[i];
-            if (shouldFlatten && attr.type === "attr" && t.isJSXAttribute(attr.value) && t.isJSXIdentifier(attr.value.name)) {
-              const name = attr.value.name.name;
-              INLINE_EXTRACTABLE[name] && (attr.value.name.name = INLINE_EXTRACTABLE[name]);
+            if (shouldFlatten) {
+              if (attr.type === "attr") {
+                if (t.isJSXAttribute(attr.value)) {
+                  if (t.isJSXIdentifier(attr.value.name)) {
+                    const name = attr.value.name.name;
+                    if (INLINE_EXTRACTABLE[name]) {
+                      attr.value.name.name = INLINE_EXTRACTABLE[name];
+                    }
+                  }
+                }
+              }
+            }
+            if (attr.type === "style") {
+              for (const key in attr.value) {
+                if (existingStyleKeys.has(key)) {
+                  if (shouldPrintDebug) {
+                    logger.info([`  >> delete existing ${key}`].join(" "));
+                  }
+                  delete attr.value[key];
+                } else {
+                  existingStyleKeys.add(key);
+                }
+              }
+            }
+          }
+          attrs = attrs.filter(Boolean);
+          if (!shouldFlatten) {
+            if (inlineWhenUnflattened.size) {
+              for (const [index, attr] of attrs.entries()) {
+                if (attr.type === "style") {
+                  for (const key in attr.value) {
+                    if (!inlineWhenUnflattened.has(key)) continue;
+                    const val = inlineWhenUnflattenedOGVals[key];
+                    if (val) {
+                      delete attr.value[key];
+                      attrs.splice(index - 1, 0, val.attr);
+                    } else {
+                      delete attr.value[key];
+                    }
+                  }
+                }
+              }
             }
-            if (attr.type === "style") for (const key in attr.value) existingStyleKeys.has(key) ? (shouldPrintDebug && logger.info([`  >> delete existing ${key}`].join(" ")), delete attr.value[key]) : existingStyleKeys.add(key);
           }
-          if (attrs = attrs.filter(Boolean), !shouldFlatten && inlineWhenUnflattened.size) {
-            for (const [index, attr] of attrs.entries()) if (attr.type === "style") for (const key in attr.value) {
-              if (!inlineWhenUnflattened.has(key)) continue;
-              const val = inlineWhenUnflattenedOGVals[key];
-              val ? (delete attr.value[key], attrs.splice(index - 1, 0, val.attr)) : delete attr.value[key];
+          attrs = attrs.filter(x => {
+            if (x.type === "style" && Object.keys(x.value).length === 0) {
+              return false;
             }
+            return true;
+          });
+          const isNativeNotFlat = !shouldFlatten && platform2 === "native";
+          if (isNativeNotFlat) {
+            if (shouldPrintDebug) {
+              logger.info(`Disabled flattening except for simple cases on native for now: ${JSON.stringify({
+                flatNode: flatNodeName,
+                shouldDeopt,
+                canFlattenProps,
+                hasSpread,
+                "staticConfig.isStyledHOC": staticConfig.isStyledHOC,
+                "!staticConfig.isHOC": !staticConfig.isHOC,
+                "staticConfig.isReactNative": staticConfig.isReactNative,
+                "staticConfig.neverFlatten": staticConfig.neverFlatten
+              }, null, 2)}`);
+            }
+            node.attributes = ogAttributes;
+            return null;
+          }
+          if (shouldPrintDebug) {
+            logger.info([` - inlined props (${inlined.size}):`, shouldDeopt ? " deopted" : "", hasSpread ? " has spread" : "", staticConfig.neverFlatten ? "neverFlatten" : ""].join(" "));
+            logger.info(`  - attrs (end):
+ ${(0, import_logLines.logLines)(attrs.map(import_extractHelpers.attrStr).join(", "))}`);
           }
-          if (attrs = attrs.filter(x => !(x.type === "style" && Object.keys(x.value).length === 0)), !shouldFlatten && platform2 === "native") return shouldPrintDebug && logger.info(`Disabled flattening except for simple cases on native for now: ${JSON.stringify({
-            flatNode: flatNodeName,
-            shouldDeopt,
-            canFlattenProps,
-            hasSpread,
-            "staticConfig.isStyledHOC": staticConfig.isStyledHOC,
-            "!staticConfig.isHOC": !staticConfig.isHOC,
-            "staticConfig.isReactNative": staticConfig.isReactNative,
-            "staticConfig.neverFlatten": staticConfig.neverFlatten
-          }, null, 2)}`), node.attributes = ogAttributes, null;
-          if (shouldPrintDebug && (logger.info([` - inlined props (${inlined.size}):`, shouldDeopt ? " deopted" : "", hasSpread ? " has spread" : "", staticConfig.neverFlatten ? "neverFlatten" : ""].join(" ")), logger.info(`  - attrs (end):
- ${(0, import_logLines.logLines)(attrs.map(import_extractHelpers.attrStr).join(", "))}`)), onExtractTag({
+          onExtractTag({
             parserProps: propsWithFileInfo,
             attrs,
             node,
@@ -1134,17 +1791,37 @@ function createExtractor({
             programPath,
             completeProps,
             staticConfig
-          }), shouldFlatten) {
-            shouldPrintDebug && logger.info(["  [\u2705] flattened", originalNodeName, flatNodeName].join(" "));
+          });
+          if (shouldFlatten) {
+            if (shouldPrintDebug) {
+              logger.info(["  [\u2705] flattened", originalNodeName, flatNodeName].join(" "));
+            }
             const currentName = node.name?.name;
-            (!currentName || currentName === originalNodeName || currentName.startsWith("__ReactNative")) && (node.name.name = flatNodeName, closingElement && (closingElement.name.name = flatNodeName)), res.flattened++;
+            if (!currentName || currentName === originalNodeName || currentName.startsWith("__ReactNative")) {
+              node.name.name = flatNodeName;
+              if (closingElement) {
+                closingElement.name.name = flatNodeName;
+              }
+            }
+            res.flattened++;
           }
         } catch (err) {
-          node.attributes = ogAttributes, err instanceof import_errors.BailOptimizationError || (console.error(`@hanzogui/static error, reverting optimization. In ${filePath} ${lineNumbers} on ${originalNodeName}: ${err.message}. For stack trace set environment HANZO_GUI_DEBUG=1`), process.env.HANZO_GUI_DEBUG === "1" && console.error(err.stack));
+          node.attributes = ogAttributes;
+          if (!(err instanceof import_errors.BailOptimizationError)) {
+            console.error(`@hanzogui/static error, reverting optimization. In ${filePath} ${lineNumbers} on ${originalNodeName}: ${err.message}. For stack trace set environment GUI_DEBUG=1`);
+            if (process.env.GUI_DEBUG === "1") {
+              console.error(err.stack);
+            }
+          }
         } finally {
-          debugPropValue && (shouldPrintDebug = ogDebug);
+          if (debugPropValue) {
+            shouldPrintDebug = ogDebug;
+          }
         }
       }
-    }), tm.mark("jsx-done", !!shouldPrintDebug), tm.done(shouldPrintDebug === "verbose"), res;
+    });
+    tm.mark("jsx-done", !!shouldPrintDebug);
+    tm.done(shouldPrintDebug === "verbose");
+    return res;
   }
 }