@hanzogui/web 3.0.6 → 4.3.1

package/dist/esm/createComponent.native.js

@@ -1,17 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { composeRefs } from "@hanzogui/compose-refs";
 import { isClient, isServer, isWeb, useIsomorphicLayoutEffect } from "@hanzogui/constants";
 import { NativeMenuContext } from "@hanzogui/native";
 import { composeEventHandlers } from "@hanzogui/helpers";
 import { isEqualShallow } from "@hanzogui/is-equal-shallow";
 import React, { useMemo } from "react";
-import { getConfig } from "./config.native.js";
+import { devConfig, getConfig } from "./config.native.js";
 import { isDevTools } from "./constants/isDevTools.native.js";
 import { ComponentContext } from "./contexts/ComponentContext.native.js";
 import { GroupContext } from "./contexts/GroupContext.native.js";
 import { didGetVariableValue, setDidGetVariableValue } from "./createVariable.native.js";
 import { defaultComponentStateMounted } from "./defaultComponentState.native.js";
-import { useEvents, wrapWithGestureDetector } from "./eventHandling.native.js";
+import { getWebEvents, useEvents, wrapWithGestureDetector } from "./eventHandling.native.js";
 import { getDefaultProps } from "./helpers/getDefaultProps.native.js";
 import { resolveAnimationDriver } from "./helpers/resolveAnimationDriver.native.js";
 import { getSplitStyles, useSplitStyles } from "./helpers/getSplitStyles.native.js";
@@ -24,6 +24,7 @@ import { extractPseudoState, resolveEffectivePseudoTransition } from "./helpers/
 import { setElementProps } from "./helpers/setElementProps.native.js";
 import { subscribeToContextGroup } from "./helpers/subscribeToContextGroup.native.js";
 import { themeable } from "./helpers/themeable.native.js";
+import { getStyleTags } from "./helpers/wrapStyleTags.native.js";
 import { useComponentState } from "./hooks/useComponentState.native.js";
 import { setMediaShouldUpdate, useMedia } from "./hooks/useMedia.native.js";
 import { useThemeWithState } from "./hooks/useTheme.native.js";
@@ -33,532 +34,866 @@ import { getThemedChildren } from "./views/Theme.native.js";
 function _type_of(obj) {
   "@swc/helpers - typeof";
 
-  return obj && typeof Symbol < "u" && obj.constructor === Symbol ? "symbol" : typeof obj;
+  return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
-var time,
-  debugKeyListeners,
-  startVisualizer,
-  componentSetStates = /* @__PURE__ */new Set(),
-  avoidReRenderKeys = /* @__PURE__ */new Set(["hover", "press", "pressIn", "group", "focus", "focusWithin", "media", "group"]);
-if (0) var cancelPresses, cancelTouches;
-var BaseText,
-  BaseView,
-  hasSetupBaseViews = !1,
-  lastInteractionWasKeyboard = {
-    value: !1
-  },
-  lastInteractionWasTouch = {
-    value: !1
+var time;
+var debugKeyListeners;
+var startVisualizer;
+var componentSetStates = /* @__PURE__ */new Set();
+var avoidReRenderKeys = /* @__PURE__ */new Set(["hover", "press", "pressIn", "group", "focus", "focusWithin", "media", "group"]);
+if (false) {
+  var cancelPresses = function () {
+    componentSetStates.forEach(function (setState) {
+      return setState(function (prev) {
+        if (prev.press || prev.pressIn) {
+          return {
+            ...prev,
+            press: false,
+            pressIn: false
+          };
+        }
+        return prev;
+      });
+    });
+    componentSetStates.clear();
+  };
+  var cancelTouches = function () {
+    componentSetStates.forEach(function (setState) {
+      return setState(function (prev) {
+        if (prev.press || prev.pressIn || prev.hover) {
+          return {
+            ...prev,
+            press: false,
+            pressIn: false,
+            hover: false
+          };
+        }
+        return prev;
+      });
+    });
+    componentSetStates.clear();
   };
-isWeb && typeof document < "u" && (document.addEventListener("keydown", function () {
-  lastInteractionWasKeyboard.value || (lastInteractionWasKeyboard.value = !0);
-}), document.addEventListener("mousedown", function () {
-  lastInteractionWasKeyboard.value && (lastInteractionWasKeyboard.value = !1);
-}), document.addEventListener("mousemove", function () {
-  lastInteractionWasKeyboard.value && (lastInteractionWasKeyboard.value = !1), lastInteractionWasTouch.value = !1;
-}), document.addEventListener("touchstart", function () {
-  lastInteractionWasTouch.value = !0;
-}));
+  addEventListener("mouseup", cancelPresses);
+  addEventListener("touchend", cancelTouches);
+  addEventListener("touchcancel", cancelTouches);
+  if (process.env.NODE_ENV === "development") {
+    startVisualizer = function () {
+      var devVisualizerConfig = devConfig === null || devConfig === void 0 ? void 0 : devConfig.visualizer;
+      if (devVisualizerConfig && !globalThis.__guiDevVisualizer) {
+        let show2 = function (val) {
+            clearTimeout(tm);
+            isShowing = val;
+            debugKeyListeners === null || debugKeyListeners === void 0 ? void 0 : debugKeyListeners.forEach(function (l) {
+              return l(val);
+            });
+            if (!val && resizeListener) {
+              window.removeEventListener("resize", resizeListener);
+              resizeListener = null;
+            }
+          },
+          cancelShow2 = function () {
+            clearTimeout(tm);
+            if (resizeListener) {
+              window.removeEventListener("resize", resizeListener);
+              resizeListener = null;
+            }
+          };
+        var show = show2,
+          cancelShow = cancelShow2;
+        globalThis.__guiDevVisualizer = true;
+        debugKeyListeners = /* @__PURE__ */new Set();
+        var tm;
+        var isShowing = false;
+        var resizeListener = null;
+        var options = {
+          key: "Alt",
+          delay: 800,
+          ...((typeof devVisualizerConfig === "undefined" ? "undefined" : _type_of(devVisualizerConfig)) === "object" ? devVisualizerConfig : {})
+        };
+        window.addEventListener("blur", function () {
+          show2(false);
+        });
+        window.addEventListener("keydown", function (param) {
+          var {
+            key,
+            metaKey,
+            defaultPrevented
+          } = param;
+          clearTimeout(tm);
+          if (defaultPrevented) return;
+          if (metaKey) return;
+          if (key === options.key) {
+            if (!resizeListener) {
+              resizeListener = function () {
+                return cancelShow2();
+              };
+              window.addEventListener("resize", resizeListener);
+            }
+            tm = setTimeout(function () {
+              show2(true);
+            }, options.delay);
+          }
+        });
+        window.addEventListener("keyup", function (param) {
+          var {
+            defaultPrevented
+          } = param;
+          if (defaultPrevented) return;
+          cancelShow2();
+          if (isShowing) {
+            show2(false);
+          }
+        });
+      }
+    };
+  }
+}
+var BaseText;
+var BaseView;
+var hasSetupBaseViews = false;
+var lastInteractionWasKeyboard = {
+  value: false
+};
+var lastInteractionWasTouch = {
+  value: false
+};
+if (isWeb && typeof document !== "undefined") {
+  document.addEventListener("keydown", function () {
+    if (!lastInteractionWasKeyboard.value) {
+      lastInteractionWasKeyboard.value = true;
+    }
+  });
+  document.addEventListener("mousedown", function () {
+    if (lastInteractionWasKeyboard.value) {
+      lastInteractionWasKeyboard.value = false;
+    }
+  });
+  document.addEventListener("mousemove", function () {
+    if (lastInteractionWasKeyboard.value) {
+      lastInteractionWasKeyboard.value = false;
+    }
+    lastInteractionWasTouch.value = false;
+  });
+  document.addEventListener("touchstart", function () {
+    lastInteractionWasTouch.value = true;
+  });
+}
 function createComponent(staticConfig) {
-  var config = null,
-    {
-      Component,
-      isText,
-      isHOC
-    } = staticConfig,
-    component = /* @__PURE__ */React.forwardRef(function (propsIn, forwardedRef) {
-      "use no memo";
+  var config = null;
+  var {
+    Component,
+    isText,
+    isHOC
+  } = staticConfig;
+  var component = /* @__PURE__ */React.forwardRef(function (propsIn, forwardedRef) {
+    "use no memo";
 
-      var _hooks_usePropsTransform;
-      config = config || getConfig();
-      var internalID = process.env.NODE_ENV === "development" ? React.useId() : "";
-      if (process.env.NODE_ENV === "development" && startVisualizer && (startVisualizer(), startVisualizer = void 0), !hasSetupBaseViews) {
+    var _hooks_usePropsTransform;
+    config = config || getConfig();
+    var internalID = process.env.NODE_ENV === "development" ? React.useId() : "";
+    if (process.env.NODE_ENV === "development") {
+      if (startVisualizer) {
+        startVisualizer();
+        startVisualizer = void 0;
+      }
+    }
+    if (true) {
+      if (!hasSetupBaseViews) {
         var _hooks_getBaseViews;
-        hasSetupBaseViews = !0;
+        hasSetupBaseViews = true;
         var baseViews = (_hooks_getBaseViews = hooks.getBaseViews) === null || _hooks_getBaseViews === void 0 ? void 0 : _hooks_getBaseViews.call(hooks);
-        baseViews && (BaseText = baseViews.Text, BaseView = baseViews.View);
+        if (baseViews) {
+          BaseText = baseViews.Text;
+          BaseView = baseViews.View;
+        }
       }
-      if (process.env.NODE_ENV === "test" && propsIn["data-test-renders"]) {
+    }
+    if (process.env.NODE_ENV === "test") {
+      if (propsIn["data-test-renders"]) {
         var _propsIn_datatestrenders_current;
-        propsIn["data-test-renders"].current = (_propsIn_datatestrenders_current = propsIn["data-test-renders"].current) !== null && _propsIn_datatestrenders_current !== void 0 ? _propsIn_datatestrenders_current : 0, propsIn["data-test-renders"].current += 1;
-      }
-      var {
-          context,
-          isReactNative
-        } = staticConfig,
-        debugProp = propsIn.debug,
-        styledContextValue = context ? React.useContext(context) : void 0,
-        overriddenContextProps = null,
-        componentContext = React.useContext(ComponentContext),
-        hasTextAncestor = !!(isWeb && isText && componentContext.inText),
-        isInsideNativeMenu = React.useContext(NativeMenuContext);
-      if (!process.env.HANZO_GUI_IS_CORE_NODE && process.env.NODE_ENV === "development" && debugProp === "profile" && !time) {
-        var timer = require("@hanzogui/timer").timer();
-        time = timer.start(), globalThis.time = time;
+        propsIn["data-test-renders"]["current"] = (_propsIn_datatestrenders_current = propsIn["data-test-renders"]["current"]) !== null && _propsIn_datatestrenders_current !== void 0 ? _propsIn_datatestrenders_current : 0;
+        propsIn["data-test-renders"]["current"] += 1;
       }
-      process.env.NODE_ENV === "development" && !time && globalThis.time && (time = globalThis.time), process.env.NODE_ENV === "development" && time && time`non-gui time (ignore)`;
-      var props = propsIn,
-        componentName = props.componentName || staticConfig.componentName,
-        defaultProps = getDefaultProps(staticConfig, props.componentName),
-        [nextProps, overrides] = mergeComponentProps(defaultProps, styledContextValue, propsIn);
-      props = nextProps, overriddenContextProps = overrides, process.env.NODE_ENV === "development" && isClient && React.useEffect(function () {
-        var node,
-          overlay = null,
-          remove = function () {
-            if (overlay) try {
+    }
+    var {
+      context,
+      isReactNative
+    } = staticConfig;
+    var debugProp = propsIn["debug"];
+    var styledContextValue = context ? React.useContext(context) : void 0;
+    var overriddenContextProps = null;
+    var componentContext = React.useContext(ComponentContext);
+    var hasTextAncestor = !!(isWeb && isText ? componentContext.inText : false);
+    var isInsideNativeMenu = true ? React.useContext(NativeMenuContext) : false;
+    if (!process.env.GUI_IS_CORE_NODE && process.env.NODE_ENV === "development" && debugProp === "profile" && !time) {
+      var timer = require("@hanzogui/timer").timer();
+      time = timer.start();
+      globalThis["time"] = time;
+    }
+    if (process.env.NODE_ENV === "development" && !time && globalThis.time) {
+      time = globalThis.time;
+    }
+    if (process.env.NODE_ENV === "development" && time) time`non-gui time (ignore)`;
+    var props = propsIn;
+    var componentName = props.componentName || staticConfig.componentName;
+    var defaultProps = getDefaultProps(staticConfig, props.componentName);
+    var [nextProps, overrides] = mergeComponentProps(defaultProps, styledContextValue, propsIn);
+    props = nextProps;
+    overriddenContextProps = overrides;
+    if (process.env.NODE_ENV === "development" && isClient) {
+      React.useEffect(function () {
+        var node;
+        var overlay = null;
+        var remove = function () {
+          if (overlay) {
+            try {
               var _overlay_parentNode;
-              (_overlay_parentNode = overlay.parentNode) === null || _overlay_parentNode === void 0 || _overlay_parentNode.removeChild(overlay), overlay = null;
-            } catch {}
-          },
-          debugVisualizerHandler = function () {
-            var show = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1;
-            if (node = stateRef.current.host, !!node) if (show) {
-              overlay || (overlay = document.createElement("span"), overlay.style.inset = "0px", overlay.style.zIndex = "1000000", overlay.style.position = "absolute", overlay.style.borderColor = "red", overlay.style.borderWidth = "1px", overlay.style.borderStyle = "dotted");
-              var dataAt = node.getAttribute("data-at") || "",
-                dataIn = node.getAttribute("data-in") || "",
-                tooltip = document.createElement("span");
-              tooltip.style.position = "absolute", tooltip.style.top = "0px", tooltip.style.left = "0px", tooltip.style.padding = "3px", tooltip.style.background = "rgba(0,0,0,0.75)", tooltip.style.color = "rgba(255,255,255,1)", tooltip.style.fontSize = "12px", tooltip.style.lineHeight = "12px", tooltip.style.fontFamily = "monospace", tooltip.innerText = `${componentName || ""} ${dataAt} ${dataIn}`.trim(), overlay.appendChild(tooltip), node.appendChild(overlay);
-            } else remove();
-          };
-        return debugKeyListeners = debugKeyListeners || /* @__PURE__ */new Set(), debugKeyListeners.add(debugVisualizerHandler), function () {
-          remove(), debugKeyListeners?.delete(debugVisualizerHandler);
+              (_overlay_parentNode = overlay.parentNode) === null || _overlay_parentNode === void 0 ? void 0 : _overlay_parentNode.removeChild(overlay);
+              overlay = null;
+            } catch (e) {}
+          }
         };
-      }, [componentName]);
-      var groupContextParent = React.useContext(GroupContext),
-        animationDriver = function () {
-          if (props.animatedBy && config) {
-            if (config.animationDrivers) {
-              var _config_animationDrivers_props_animatedBy;
-              return (_config_animationDrivers_props_animatedBy = config.animationDrivers[props.animatedBy]) !== null && _config_animationDrivers_props_animatedBy !== void 0 ? _config_animationDrivers_props_animatedBy : config.animations;
+        var debugVisualizerHandler = function () {
+          var show = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
+          node = stateRef.current.host;
+          if (!node) return;
+          if (show) {
+            if (!overlay) {
+              overlay = document.createElement("span");
+              overlay.style.inset = "0px";
+              overlay.style.zIndex = "1000000";
+              overlay.style.position = "absolute";
+              overlay.style.borderColor = "red";
+              overlay.style.borderWidth = "1px";
+              overlay.style.borderStyle = "dotted";
             }
-            return props.animatedBy === "default" ? config.animations : null;
+            var dataAt = node.getAttribute("data-at") || "";
+            var dataIn = node.getAttribute("data-in") || "";
+            var tooltip = document.createElement("span");
+            tooltip.style.position = "absolute";
+            tooltip.style.top = "0px";
+            tooltip.style.left = "0px";
+            tooltip.style.padding = "3px";
+            tooltip.style.background = "rgba(0,0,0,0.75)";
+            tooltip.style.color = "rgba(255,255,255,1)";
+            tooltip.style.fontSize = "12px";
+            tooltip.style.lineHeight = "12px";
+            tooltip.style.fontFamily = "monospace";
+            tooltip.innerText = `${componentName || ""} ${dataAt} ${dataIn}`.trim();
+            overlay.appendChild(tooltip);
+            node.appendChild(overlay);
+          } else {
+            remove();
           }
-          var _resolveAnimationDriver, _ref;
-          return (_ref = (_resolveAnimationDriver = resolveAnimationDriver(componentContext.animationDriver)) !== null && _resolveAnimationDriver !== void 0 ? _resolveAnimationDriver : resolveAnimationDriver(config?.animations)) !== null && _ref !== void 0 ? _ref : null;
-        }(),
-        useAnimations = animationDriver?.useAnimations,
-        componentState = useComponentState(props, animationDriver?.isStub ? null : animationDriver, staticConfig, config),
-        {
-          disabled,
-          groupName,
-          hasAnimationProp,
-          hasEnterStyle,
-          isAnimated,
-          isExiting,
-          isHydrated,
-          presence,
-          presenceState,
-          setState,
-          noClass,
-          state,
-          stateRef,
-          inputStyle,
-          outputStyle,
-          willBeAnimated,
-          willBeAnimatedClient,
-          startedUnhydrated
-        } = componentState;
-      hasAnimationProp && animationDriver?.avoidReRenders && useIsomorphicLayoutEffect(function () {
+        };
+        debugKeyListeners = debugKeyListeners || /* @__PURE__ */new Set();
+        debugKeyListeners.add(debugVisualizerHandler);
+        return function () {
+          remove();
+          debugKeyListeners === null || debugKeyListeners === void 0 ? void 0 : debugKeyListeners.delete(debugVisualizerHandler);
+        };
+      }, [componentName]);
+    }
+    var groupContextParent = React.useContext(GroupContext);
+    var animationDriver = function () {
+      if (props.animatedBy && config) {
+        if (config.animationDrivers) {
+          var _config_animationDrivers_props_animatedBy;
+          return (_config_animationDrivers_props_animatedBy = config.animationDrivers[props.animatedBy]) !== null && _config_animationDrivers_props_animatedBy !== void 0 ? _config_animationDrivers_props_animatedBy : config.animations;
+        }
+        return props.animatedBy === "default" ? config.animations : null;
+      }
+      var _resolveAnimationDriver, _ref;
+      return (_ref = (_resolveAnimationDriver = resolveAnimationDriver(componentContext.animationDriver)) !== null && _resolveAnimationDriver !== void 0 ? _resolveAnimationDriver : resolveAnimationDriver(config === null || config === void 0 ? void 0 : config.animations)) !== null && _ref !== void 0 ? _ref : null;
+    }();
+    var useAnimations = animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.useAnimations;
+    var componentState = useComponentState(props, (animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.isStub) ? null : animationDriver, staticConfig, config);
+    var {
+      disabled,
+      groupName,
+      hasAnimationProp,
+      hasEnterStyle,
+      isAnimated,
+      isExiting,
+      isHydrated,
+      presence,
+      presenceState,
+      setState,
+      noClass,
+      state,
+      stateRef,
+      inputStyle,
+      outputStyle,
+      willBeAnimated,
+      willBeAnimatedClient,
+      startedUnhydrated
+    } = componentState;
+    if (hasAnimationProp && (animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.avoidReRenders)) {
+      useIsomorphicLayoutEffect(function () {
         var pendingState = stateRef.current.nextState;
-        pendingState && (stateRef.current.nextState = void 0, componentState.setStateShallow(pendingState));
+        if (pendingState) {
+          stateRef.current.nextState = void 0;
+          componentState.setStateShallow(pendingState);
+        }
       });
-      var allGroupContexts = useMemo(function () {
-          var _stateRef_current_group_listeners, _stateRef_current_group;
-          if (!groupName || props.passThrough) return groupContextParent;
-          var listeners = /* @__PURE__ */new Set();
-          return (_stateRef_current_group = stateRef.current.group) === null || _stateRef_current_group === void 0 || (_stateRef_current_group_listeners = _stateRef_current_group.listeners) === null || _stateRef_current_group_listeners === void 0 || _stateRef_current_group_listeners.clear(), stateRef.current.group = {
-            listeners,
-            emit(state2) {
-              listeners.forEach(function (l) {
-                return l(state2);
+    }
+    var allGroupContexts = useMemo(function () {
+      var _stateRef_current_group_listeners, _stateRef_current_group;
+      if (!groupName || props.passThrough) {
+        return groupContextParent;
+      }
+      var listeners = /* @__PURE__ */new Set();
+      (_stateRef_current_group = stateRef.current.group) === null || _stateRef_current_group === void 0 ? void 0 : (_stateRef_current_group_listeners = _stateRef_current_group.listeners) === null || _stateRef_current_group_listeners === void 0 ? void 0 : _stateRef_current_group_listeners.clear();
+      stateRef.current.group = {
+        listeners,
+        emit(state2) {
+          listeners.forEach(function (l) {
+            return l(state2);
+          });
+        },
+        subscribe(cb) {
+          listeners.add(cb);
+          if (listeners.size === 1) {
+            setStateShallow({
+              hasDynGroupChildren: true
+            });
+          }
+          return function () {
+            listeners.delete(cb);
+            if (listeners.size === 0) {
+              setStateShallow({
+                hasDynGroupChildren: false
               });
-            },
-            subscribe(cb) {
-              return listeners.add(cb), listeners.size === 1 && setStateShallow({
-                hasDynGroupChildren: !0
-              }), function () {
-                listeners.delete(cb), listeners.size === 0 && setStateShallow({
-                  hasDynGroupChildren: !1
-                });
-              };
-            }
-          }, {
-            ...groupContextParent,
-            [groupName]: {
-              state: {
-                pseudo: defaultComponentStateMounted
-              },
-              subscribe: function (listener) {
-                var _stateRef_current_group2,
-                  dispose = (_stateRef_current_group2 = stateRef.current.group) === null || _stateRef_current_group2 === void 0 ? void 0 : _stateRef_current_group2.subscribe(listener);
-                return function () {
-                  dispose?.();
-                };
-              }
             }
           };
-        }, [stateRef, groupName, groupContextParent]),
-        setStateShallow = componentState.setStateShallow;
-      process.env.NODE_ENV === "development" && time && time`use-state`;
-      var renderProp = props.render,
-        isRenderString = !Component || typeof Component == "string",
-        element = isWeb && isRenderString && renderProp || Component,
-        BaseTextComponent = BaseText || element || "span",
-        BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div"),
-        BaseComponent = isText ? BaseTextComponent : BaseViewComponent,
-        elementType = BaseComponent,
-        isAnimatedCustomComponent = animationDriver && isAnimated && animationDriver.needsCustomComponent;
-      isAnimatedCustomComponent && (elementType = animationDriver[isText ? "Text" : "View"] || elementType);
-      var disableThemeProp = !1,
-        disableTheme = disableThemeProp || isHOC;
-      process.env.NODE_ENV === "development" && time && time`theme-props`;
-      var themeStateProps = {
-        componentName,
-        disable: disableTheme,
-        shallow: props.themeShallow,
-        debug: debugProp,
-        unstyled: props.unstyled
+        }
+      };
+      return {
+        ...groupContextParent,
+        [groupName]: {
+          state: {
+            pseudo: defaultComponentStateMounted
+          },
+          subscribe: function (listener) {
+            var _stateRef_current_group2;
+            var dispose = (_stateRef_current_group2 = stateRef.current.group) === null || _stateRef_current_group2 === void 0 ? void 0 : _stateRef_current_group2.subscribe(listener);
+            return function () {
+              dispose === null || dispose === void 0 ? void 0 : dispose();
+            };
+          }
+        }
       };
-      if ("theme" in props && (themeStateProps.name = props.theme), themeStateProps.needsUpdate = function () {
-        return !!stateRef.current.isListeningToTheme;
-      }, themeStateProps.deopt = willBeAnimated, process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
-        var name = `${componentName || Component?.displayName || Component?.name || "[Unnamed Component]"}`,
-          type = (hasEnterStyle ? "(hasEnter)" : " ") + (isAnimated ? "(animated)" : " ") + (isReactNative ? "(rnw)" : " ") + (noClass ? "(noClass)" : " ") + (state.press || state.pressIn ? "(PRESSED)" : " ") + (state.hover ? "(HOVERED)" : " ") + (state.focus ? "(FOCUSED)" : " ") + (state.focusWithin ? "(WITHIN FOCUSED)" : " ") + (presenceState?.isPresent === !1 ? "(EXIT)" : ""),
-          dataIs = propsIn["data-is"] || "",
-          banner = `<${name} /> ${internalID} ${dataIs ? ` ${dataIs}` : ""} ${type.trim()} (hydrated: ${isHydrated}) (unmounted: ${state.unmounted})`,
-          ch = propsIn.children,
-          childLog = typeof ch == "string" ? ch.length > 4 ? ch.slice(0, 4) + "..." : ch : "";
-        childLog.length && (childLog = `(children: ${childLog})`), isWeb ? (console.info(`%c ${banner}`, "background: green; color: white;"), isServer ? log({
-          noClass,
-          isAnimated,
-          isWeb,
-          inputStyle
-        }) : (console.groupEnd(), console.groupCollapsed(`${childLog} [inspect props, state, context \u{1F447}]`), log("props in:", propsIn), log("final props:", props, Object.keys(props)), log({
-          state,
-          staticConfig,
-          elementType,
-          themeStateProps
-        }), log({
-          context,
-          overriddenContextProps,
-          componentContext
-        }), log({
-          presence,
-          isAnimated,
-          isHOC,
-          hasAnimationProp,
-          useAnimations
-        }), console.groupEnd())) : (console.info(`
+    }, [stateRef, groupName, groupContextParent]);
+    var setStateShallow = componentState.setStateShallow;
+    if (process.env.NODE_ENV === "development" && time) time`use-state`;
+    var renderProp = props.render;
+    var isRenderString = !Component || typeof Component === "string";
+    var element = isWeb ? isRenderString ? renderProp || Component : Component : Component;
+    var BaseTextComponent = BaseText || element || "span";
+    var BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div");
+    var BaseComponent = isText ? BaseTextComponent : BaseViewComponent;
+    var elementType = BaseComponent;
+    var isAnimatedCustomComponent = animationDriver && isAnimated && animationDriver.needsCustomComponent;
+    if (isAnimatedCustomComponent) {
+      elementType = animationDriver[isText ? "Text" : "View"] || elementType;
+    }
+    var disableThemeProp = true ? false : props["data-disable-theme"];
+    var disableTheme = disableThemeProp || isHOC;
+    if (process.env.NODE_ENV === "development" && time) time`theme-props`;
+    var themeStateProps = {
+      componentName,
+      disable: disableTheme,
+      shallow: props.themeShallow,
+      debug: debugProp,
+      unstyled: props.unstyled
+    };
+    if ("theme" in props) {
+      themeStateProps.name = props.theme;
+    }
+    themeStateProps.needsUpdate = function () {
+      return !!stateRef.current.isListeningToTheme;
+    };
+    if (true) {
+      themeStateProps.deopt = willBeAnimated;
+    }
+    if (process.env.NODE_ENV === "development") {
+      if (debugProp && debugProp !== "profile") {
+        var name = `${componentName || (Component === null || Component === void 0 ? void 0 : Component.displayName) || (Component === null || Component === void 0 ? void 0 : Component.name) || "[Unnamed Component]"}`;
+        var type = (hasEnterStyle ? "(hasEnter)" : " ") + (isAnimated ? "(animated)" : " ") + (isReactNative ? "(rnw)" : " ") + (noClass ? "(noClass)" : " ") + (state.press || state.pressIn ? "(PRESSED)" : " ") + (state.hover ? "(HOVERED)" : " ") + (state.focus ? "(FOCUSED)" : " ") + (state.focusWithin ? "(WITHIN FOCUSED)" : " ") + ((presenceState === null || presenceState === void 0 ? void 0 : presenceState.isPresent) === false ? "(EXIT)" : "");
+        var dataIs = propsIn["data-is"] || "";
+        var banner = `<${name} /> ${internalID} ${dataIs ? ` ${dataIs}` : ""} ${type.trim()} (hydrated: ${isHydrated}) (unmounted: ${state.unmounted})`;
+        var ch = propsIn.children;
+        var childLog = typeof ch === "string" ? ch.length > 4 ? ch.slice(0, 4) + "..." : ch : "";
+        if (childLog.length) {
+          childLog = `(children: ${childLog})`;
+        }
+        if (isWeb) {
+          console.info(`%c ${banner}`, "background: green; color: white;");
+          if (isServer) {
+            log({
+              noClass,
+              isAnimated,
+              isWeb,
+              inputStyle
+            });
+          } else {
+            console.groupEnd();
+            console.groupCollapsed(`${childLog} [inspect props, state, context \u{1F447}]`);
+            log("props in:", propsIn);
+            log("final props:", props, Object.keys(props));
+            log({
+              state,
+              staticConfig,
+              elementType,
+              themeStateProps
+            });
+            log({
+              context,
+              overriddenContextProps,
+              componentContext
+            });
+            log({
+              presence,
+              isAnimated,
+              isHOC,
+              hasAnimationProp,
+              useAnimations
+            });
+            console.groupEnd();
+          }
+        } else {
+          console.info(`
 
 ------------------------------
 ${banner}
 ------------------------------
-`), log("children:", props.children), log({
-          overriddenContextProps,
-          styledContextValue
-        }), log({
-          noClass,
-          isAnimated,
-          isWeb,
-          inputStyle
-        }));
+`);
+          log(`children:`, props.children);
+          log({
+            overriddenContextProps,
+            styledContextValue
+          });
+          log({
+            noClass,
+            isAnimated,
+            isWeb,
+            inputStyle
+          });
+        }
       }
-      process.env.NODE_ENV === "development" && time && time`pre-theme-media`;
-      var [theme, themeState] = useThemeWithState(themeStateProps);
-      process.env.NODE_ENV === "development" && time && time`theme`, elementType = element || elementType;
-      var isStringElement = typeof elementType == "string",
-        mediaState = useMedia(componentContext, debugProp);
-      setDidGetVariableValue(!1), process.env.NODE_ENV === "development" && time && time`media`;
-      var resolveValues =
-        // if HOC + mounted + has animation prop, resolve as value so it passes non-variable to child
-        isAnimated && inputStyle !== "css" || isHOC && state.unmounted == !1 && hasAnimationProp ? "value" : "auto",
-        styleProps = {
-          mediaState,
-          noClass,
-          resolveValues,
-          isExiting,
-          isAnimated,
-          willBeAnimated,
-          styledContext: styledContextValue
-        },
-        themeName = themeState?.name || "";
-      process.env.NODE_ENV === "development" && time && time`split-styles-prepare`;
-      var splitStyles = useSplitStyles(props, staticConfig, theme, themeName, state, styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp, animationDriver),
-        isPassthrough = !splitStyles,
-        contextForOverride = staticConfig.context;
-      if (splitStyles?.overriddenContextProps) {
-        var _staticConfig_parentStaticConfig,
-          contextForProps = staticConfig.context || ((_staticConfig_parentStaticConfig = staticConfig.parentStaticConfig) === null || _staticConfig_parentStaticConfig === void 0 ? void 0 : _staticConfig_parentStaticConfig.context);
-        if (contextForProps) {
-          for (var key in splitStyles.overriddenContextProps) overriddenContextProps = overriddenContextProps || {}, overriddenContextProps[key] = splitStyles.overriddenContextProps[key];
-          staticConfig.context || (contextForOverride = contextForProps);
+    }
+    if (process.env.NODE_ENV === "development" && time) time`pre-theme-media`;
+    var [theme, themeState] = useThemeWithState(themeStateProps);
+    if (process.env.NODE_ENV === "development" && time) time`theme`;
+    elementType = element || elementType;
+    var isStringElement = typeof elementType === "string";
+    var mediaState = useMedia(componentContext, debugProp);
+    setDidGetVariableValue(false);
+    if (process.env.NODE_ENV === "development" && time) time`media`;
+    var resolveValues =
+    // if HOC + mounted + has animation prop, resolve as value so it passes non-variable to child
+    isAnimated && inputStyle !== "css" || isHOC && state.unmounted == false && hasAnimationProp ? "value" : "auto";
+    var styleProps = {
+      mediaState,
+      noClass,
+      resolveValues,
+      isExiting,
+      isAnimated,
+      willBeAnimated,
+      styledContext: styledContextValue
+    };
+    var themeName = (themeState === null || themeState === void 0 ? void 0 : themeState.name) || "";
+    if (process.env.NODE_ENV === "development" && time) time`split-styles-prepare`;
+    var splitStyles = useSplitStyles(props, staticConfig, theme, themeName, state, styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp, animationDriver);
+    var isPassthrough = !splitStyles;
+    var contextForOverride = staticConfig.context;
+    if (splitStyles === null || splitStyles === void 0 ? void 0 : splitStyles.overriddenContextProps) {
+      var _staticConfig_parentStaticConfig;
+      var contextForProps = staticConfig.context || ((_staticConfig_parentStaticConfig = staticConfig.parentStaticConfig) === null || _staticConfig_parentStaticConfig === void 0 ? void 0 : _staticConfig_parentStaticConfig.context);
+      if (contextForProps) {
+        for (var key in splitStyles.overriddenContextProps) {
+          overriddenContextProps = overriddenContextProps || {};
+          overriddenContextProps[key] = splitStyles.overriddenContextProps[key];
+        }
+        if (!staticConfig.context) {
+          contextForOverride = contextForProps;
         }
       }
-      var groupContext = groupName && allGroupContexts?.[groupName] || null;
-      if (!isPassthrough && groupContext &&
-      // avoids onLayout if we don't need it
-      props.containerType !== "normal") {
-        var groupState = groupContext?.state;
-        if (groupState && groupState.layout === void 0) {
-          var _splitStyles_style, _splitStyles_style1;
-          (!((_splitStyles_style = splitStyles.style) === null || _splitStyles_style === void 0) && _splitStyles_style.width || !((_splitStyles_style1 = splitStyles.style) === null || _splitStyles_style1 === void 0) && _splitStyles_style1.height) && (groupState.layout = {
+    }
+    var groupContext = groupName ? (allGroupContexts === null || allGroupContexts === void 0 ? void 0 : allGroupContexts[groupName]) || null : null;
+    if (!isPassthrough && groupContext &&
+    // avoids onLayout if we don't need it
+    props.containerType !== "normal") {
+      var groupState = groupContext === null || groupContext === void 0 ? void 0 : groupContext.state;
+      if (groupState && groupState.layout === void 0) {
+        var _splitStyles_style, _splitStyles_style1;
+        if (((_splitStyles_style = splitStyles.style) === null || _splitStyles_style === void 0 ? void 0 : _splitStyles_style.width) || ((_splitStyles_style1 = splitStyles.style) === null || _splitStyles_style1 === void 0 ? void 0 : _splitStyles_style1.height)) {
+          groupState.layout = {
             width: fromPx(splitStyles.style.width),
             height: fromPx(splitStyles.style.height)
-          });
+          };
         }
       }
-      var hasEnterExitTransition = props.transition && _type_of(props.transition) === "object" && !Array.isArray(props.transition) && ("enter" in props.transition || "exit" in props.transition);
-      if (!isPassthrough && (hasAnimationProp || groupName) && animationDriver?.avoidReRenders && !hasEnterExitTransition) {
-        let updateGroupListeners2 = function () {
-          var updatedState = stateRef.current.nextState;
-          if (groupContext) {
-            var {
-              group,
-              hasDynGroupChildren,
-              unmounted,
-              transition,
-              ...childrenGroupState
-            } = updatedState;
-            notifyGroupSubscribers(groupContext, stateRef.current.group || null, childrenGroupState);
+    }
+    var hasEnterExitTransition = props.transition && _type_of(props.transition) === "object" && !Array.isArray(props.transition) && ("enter" in props.transition || "exit" in props.transition);
+    if (!isPassthrough && (hasAnimationProp || groupName) && (animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.avoidReRenders) && !hasEnterExitTransition) {
+      let updateGroupListeners2 = function () {
+        var updatedState = stateRef.current.nextState;
+        if (groupContext) {
+          var {
+            group,
+            hasDynGroupChildren,
+            unmounted,
+            transition,
+            ...childrenGroupState
+          } = updatedState;
+          notifyGroupSubscribers(groupContext, stateRef.current.group || null, childrenGroupState);
+        }
+      };
+      var updateGroupListeners = updateGroupListeners2;
+      var ogSetStateShallow = setStateShallow;
+      stateRef.current.updateStyleListener = function () {
+        var useStyleListener = stateRef.current.useStyleListener;
+        if (!useStyleListener) {
+          var pendingState = stateRef.current.nextState;
+          if (pendingState) {
+            stateRef.current.nextState = void 0;
+            ogSetStateShallow(pendingState);
           }
+          return;
+        }
+        var updatedState = stateRef.current.nextState || state;
+        var mediaState2 = stateRef.current.nextMedia;
+        var nextStyles = getSplitStyles(props, staticConfig, theme, themeName, updatedState, mediaState2 ? {
+          ...styleProps,
+          mediaState: mediaState2
+        } : styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp, animationDriver);
+        var effectiveTransition2 = resolveEffectivePseudoTransition(stateRef.current.prevPseudoState, updatedState, nextStyles === null || nextStyles === void 0 ? void 0 : nextStyles.pseudoTransitions, props.transition);
+        stateRef.current.prevPseudoState = extractPseudoState(updatedState);
+        useStyleListener((nextStyles === null || nextStyles === void 0 ? void 0 : nextStyles.style) || {}, effectiveTransition2);
+      };
+      componentContext.mediaEmitListeners = componentContext.mediaEmitListeners || /* @__PURE__ */new Set();
+      if (!stateRef.current.mediaEmitCleanup) {
+        var updateListener = function (next) {
+          var _stateRef_current_updateStyleListener, _stateRef_current;
+          stateRef.current.nextMedia = next;
+          (_stateRef_current_updateStyleListener = (_stateRef_current = stateRef.current).updateStyleListener) === null || _stateRef_current_updateStyleListener === void 0 ? void 0 : _stateRef_current_updateStyleListener.call(_stateRef_current);
+        };
+        componentContext.mediaEmitListeners.add(updateListener);
+        stateRef.current.mediaEmitCleanup = function () {
+          var _componentContext_mediaEmitListeners;
+          (_componentContext_mediaEmitListeners = componentContext.mediaEmitListeners) === null || _componentContext_mediaEmitListeners === void 0 ? void 0 : _componentContext_mediaEmitListeners.delete(updateListener);
         };
-        var updateGroupListeners = updateGroupListeners2,
-          ogSetStateShallow = setStateShallow;
-        if (stateRef.current.updateStyleListener = function () {
-          var useStyleListener = stateRef.current.useStyleListener;
-          if (!useStyleListener) {
-            var pendingState = stateRef.current.nextState;
-            pendingState && (stateRef.current.nextState = void 0, ogSetStateShallow(pendingState));
-            return;
+      }
+      componentContext.mediaEmit = componentContext.mediaEmit || function (next) {
+        var _iteratorNormalCompletion = true,
+          _didIteratorError = false,
+          _iteratorError = void 0;
+        try {
+          for (var _iterator = componentContext.mediaEmitListeners[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+            var listener = _step.value;
+            listener(next);
           }
-          var updatedState = stateRef.current.nextState || state,
-            mediaState2 = stateRef.current.nextMedia,
-            nextStyles = getSplitStyles(props, staticConfig, theme, themeName, updatedState, mediaState2 ? {
-              ...styleProps,
-              mediaState: mediaState2
-            } : styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp, animationDriver),
-            effectiveTransition2 = resolveEffectivePseudoTransition(stateRef.current.prevPseudoState, updatedState, nextStyles?.pseudoTransitions, props.transition);
-          stateRef.current.prevPseudoState = extractPseudoState(updatedState), useStyleListener(nextStyles?.style || {}, effectiveTransition2);
-        }, componentContext.mediaEmitListeners = componentContext.mediaEmitListeners || /* @__PURE__ */new Set(), !stateRef.current.mediaEmitCleanup) {
-          var updateListener = function (next) {
-            var _stateRef_current_updateStyleListener, _stateRef_current;
-            stateRef.current.nextMedia = next, (_stateRef_current_updateStyleListener = (_stateRef_current = stateRef.current).updateStyleListener) === null || _stateRef_current_updateStyleListener === void 0 || _stateRef_current_updateStyleListener.call(_stateRef_current);
-          };
-          componentContext.mediaEmitListeners.add(updateListener), stateRef.current.mediaEmitCleanup = function () {
-            var _componentContext_mediaEmitListeners;
-            (_componentContext_mediaEmitListeners = componentContext.mediaEmitListeners) === null || _componentContext_mediaEmitListeners === void 0 || _componentContext_mediaEmitListeners.delete(updateListener);
-          };
-        }
-        componentContext.mediaEmit = componentContext.mediaEmit || function (next) {
-          var _iteratorNormalCompletion = !0,
-            _didIteratorError = !1,
-            _iteratorError = void 0;
+        } catch (err) {
+          _didIteratorError = true;
+          _iteratorError = err;
+        } finally {
           try {
-            for (var _iterator = componentContext.mediaEmitListeners[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
-              var listener = _step.value;
-              listener(next);
+            if (!_iteratorNormalCompletion && _iterator.return != null) {
+              _iterator.return();
             }
-          } catch (err) {
-            _didIteratorError = !0, _iteratorError = err;
           } finally {
-            try {
-              !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
-            } finally {
-              if (_didIteratorError) throw _iteratorError;
+            if (_didIteratorError) {
+              throw _iteratorError;
             }
           }
-        }, stateRef.current.setStateShallow = function (nextOrGetNext) {
-          var prev = stateRef.current.nextState || state,
-            next = typeof nextOrGetNext == "function" ? nextOrGetNext(prev) : nextOrGetNext;
-          if (!(next === prev || isEqualShallow(prev, next))) {
-            var canAvoidReRender = Object.keys(next).every(function (key3) {
-                return avoidReRenderKeys.has(key3);
-              }),
-              updatedState = {
-                ...prev,
-                ...next
-              };
-            if (stateRef.current.nextState = updatedState, canAvoidReRender) {
-              var _stateRef_current_updateStyleListener, _stateRef_current;
-              process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile" && (console.groupCollapsed("[\u26A1\uFE0F] avoid setState", componentName, next, {
-                updatedState,
-                props
-              }), console.info(stateRef.current.host), console.groupEnd()), updateGroupListeners2(), (_stateRef_current_updateStyleListener = (_stateRef_current = stateRef.current).updateStyleListener) === null || _stateRef_current_updateStyleListener === void 0 || _stateRef_current_updateStyleListener.call(_stateRef_current);
-            } else process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile" && console.info("[\u{1F40C}] re-render", {
+        }
+      };
+      stateRef.current.setStateShallow = function (nextOrGetNext) {
+        var prev = stateRef.current.nextState || state;
+        var next = typeof nextOrGetNext === "function" ? nextOrGetNext(prev) : nextOrGetNext;
+        if (next === prev || isEqualShallow(prev, next)) {
+          return;
+        }
+        var canAvoidReRender = Object.keys(next).every(function (key3) {
+          return avoidReRenderKeys.has(key3);
+        });
+        var updatedState = {
+          ...prev,
+          ...next
+        };
+        stateRef.current.nextState = updatedState;
+        if (canAvoidReRender) {
+          var _stateRef_current_updateStyleListener, _stateRef_current;
+          if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
+            console.groupCollapsed(`[\u26A1\uFE0F] avoid setState`, componentName, next, {
+              updatedState,
+              props
+            });
+            console.info(stateRef.current.host);
+            console.groupEnd();
+          }
+          updateGroupListeners2();
+          (_stateRef_current_updateStyleListener = (_stateRef_current = stateRef.current).updateStyleListener) === null || _stateRef_current_updateStyleListener === void 0 ? void 0 : _stateRef_current_updateStyleListener.call(_stateRef_current);
+        } else {
+          if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
+            console.info(`[\u{1F40C}] re-render`, {
               canAvoidReRender,
               next
-            }), ogSetStateShallow(next);
+            });
           }
-        }, setStateShallow = function (state2) {
-          var _stateRef_current_setStateShallow, _stateRef_current;
-          (_stateRef_current_setStateShallow = (_stateRef_current = stateRef.current).setStateShallow) === null || _stateRef_current_setStateShallow === void 0 || _stateRef_current_setStateShallow.call(_stateRef_current, state2);
-        };
+          ogSetStateShallow(next);
+        }
+      };
+      setStateShallow = function (state2) {
+        var _stateRef_current_setStateShallow, _stateRef_current;
+        (_stateRef_current_setStateShallow = (_stateRef_current = stateRef.current).setStateShallow) === null || _stateRef_current_setStateShallow === void 0 ? void 0 : _stateRef_current_setStateShallow.call(_stateRef_current, state2);
+      };
+    }
+    if (process.env.NODE_ENV === "development" && time) time`split-styles`;
+    if (splitStyles) {
+      if (props.group && props.untilMeasured === "hide" && !stateRef.current.hasMeasured) {
+        splitStyles.style = splitStyles.style || {};
+        splitStyles.style.opacity = 0;
       }
-      process.env.NODE_ENV === "development" && time && time`split-styles`, splitStyles && (props.group && props.untilMeasured === "hide" && !stateRef.current.hasMeasured && (splitStyles.style = splitStyles.style || {}, splitStyles.style.opacity = 0), splitStyles.dynamicThemeAccess != null && (stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess));
-      var hasRuntimeMediaKeys = splitStyles?.hasMedia && splitStyles.hasMedia !== !0,
-        shouldListenForMedia = didGetVariableValue() || hasRuntimeMediaKeys || noClass && splitStyles?.hasMedia === !0,
-        mediaListeningKeys = hasRuntimeMediaKeys ? splitStyles.hasMedia : null;
-      process.env.NODE_ENV === "development" && debugProp === "verbose" && console.info("useMedia() createComponent", shouldListenForMedia, mediaListeningKeys), setMediaShouldUpdate(componentContext, shouldListenForMedia, mediaListeningKeys);
-      var {
-          viewProps: viewPropsIn,
-          pseudos,
-          style: splitStylesStyle,
-          classNames,
-          pseudoGroups,
-          mediaGroups
-        } = splitStyles || {},
-        propsWithAnimation = props,
-        {
-          asChild,
-          children,
-          themeShallow,
-          spaceDirection: _spaceDirection,
-          onPress,
-          onLongPress,
-          onPressIn,
-          onPressOut,
-          onHoverIn,
-          onHoverOut,
-          onMouseUp,
-          onMouseDown,
-          onMouseEnter,
-          onMouseLeave,
-          onFocus,
-          onBlur,
-          separator,
-          // ignore from here on out
-          passThrough,
-          forceStyle: _forceStyle,
-          // @ts-ignore  for next/link compat etc
-          onClick,
-          theme: _themeProp,
-          ...nonGuiProps
-        } = viewPropsIn || {},
-        viewProps = nonGuiProps;
-      props.forceStyle && (viewProps.forceStyle = props.forceStyle), isHOC && (typeof _themeProp < "u" && (viewProps.theme = _themeProp), typeof passThrough < "u" && (viewProps.passThrough = passThrough));
-      var animationStyles,
-        shouldUseAnimation =
-        // if it supports css vars we run it on server too to get matching initial style
-        (inputStyle === "css" ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC,
-        animatedRef;
-      if (shouldUseAnimation) {
-        var useStyleEmitter = animationDriver?.avoidReRenders ? function (listener) {
-            stateRef.current.useStyleListener = listener;
-          } : void 0,
-          effectiveTransition = resolveEffectivePseudoTransition(stateRef.current.prevPseudoState, state, splitStyles?.pseudoTransitions, props.transition);
-        splitStyles && (splitStyles.effectiveTransition = effectiveTransition), stateRef.current.prevPseudoState = extractPseudoState(state);
-        var animations = useAnimations({
-          props: propsWithAnimation,
-          // clone style to prevent animation driver mutations from leaking to viewProps
-          // during SSR/pre-hydration (CSS driver mutates style.transition in place)
-          style: isHydrated ? splitStylesStyle || {} : {
-            ...splitStylesStyle
-          },
-          // @ts-ignore
-          styleState: splitStyles,
-          useStyleEmitter,
-          presence,
-          componentState: state,
-          styleProps,
-          theme,
-          themeName,
-          pseudos: pseudos || null,
-          staticConfig,
-          stateRef
-        });
-        animations && (animations.ref && (animatedRef = animations.ref), isHydrated && animations && (animationStyles = animations.style, viewProps.style = animationStyles, animations.className && (viewProps.className = `${state.unmounted === "should-enter" ? "t_unmounted " : ""}${viewProps.className || ""} ${animations.className}`))), process.env.NODE_ENV === "development" && time && time`animations`;
+      if (splitStyles.dynamicThemeAccess != null) {
+        stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess;
       }
-      process.env.NODE_ENV === "development" && props.untilMeasured && !props.group && console.warn(`You set the untilMeasured prop without setting group. This doesn't work, be sure to set untilMeasured on the parent that sets group, not the children that use the $group- prop.
+    }
+    var hasRuntimeMediaKeys = (splitStyles === null || splitStyles === void 0 ? void 0 : splitStyles.hasMedia) && splitStyles.hasMedia !== true;
+    var shouldListenForMedia = didGetVariableValue() || hasRuntimeMediaKeys || noClass && (splitStyles === null || splitStyles === void 0 ? void 0 : splitStyles.hasMedia) === true;
+    var mediaListeningKeys = hasRuntimeMediaKeys ? splitStyles.hasMedia : null;
+    if (process.env.NODE_ENV === "development" && debugProp === "verbose") {
+      console.info(`useMedia() createComponent`, shouldListenForMedia, mediaListeningKeys);
+    }
+    setMediaShouldUpdate(componentContext, shouldListenForMedia, mediaListeningKeys);
+    var {
+      viewProps: viewPropsIn,
+      pseudos,
+      style: splitStylesStyle,
+      classNames,
+      pseudoGroups,
+      mediaGroups
+    } = splitStyles || {};
+    var propsWithAnimation = props;
+    var {
+      asChild,
+      children,
+      themeShallow,
+      spaceDirection: _spaceDirection,
+      onPress,
+      onLongPress,
+      onPressIn,
+      onPressOut,
+      onHoverIn,
+      onHoverOut,
+      onMouseUp,
+      onMouseDown,
+      onMouseEnter,
+      onMouseLeave,
+      onFocus,
+      onBlur,
+      separator,
+      // ignore from here on out
+      passThrough,
+      forceStyle: _forceStyle,
+      // @ts-ignore  for next/link compat etc
+      onClick,
+      theme: _themeProp,
+      ...nonGuiProps
+    } = viewPropsIn || {};
+    var viewProps = nonGuiProps;
+    if (props.forceStyle) {
+      viewProps.forceStyle = props.forceStyle;
+    }
+    if (isHOC) {
+      if (typeof _themeProp !== "undefined") {
+        viewProps.theme = _themeProp;
+      }
+      if (typeof passThrough !== "undefined") {
+        viewProps.passThrough = passThrough;
+      }
+    }
+    var animationStyles;
+    var shouldUseAnimation =
+    // if it supports css vars we run it on server too to get matching initial style
+    (inputStyle === "css" ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC;
+    var animatedRef;
+    if (shouldUseAnimation) {
+      var useStyleEmitter = (animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.avoidReRenders) ? function (listener) {
+        stateRef.current.useStyleListener = listener;
+      } : void 0;
+      var effectiveTransition = resolveEffectivePseudoTransition(stateRef.current.prevPseudoState, state, splitStyles === null || splitStyles === void 0 ? void 0 : splitStyles.pseudoTransitions, props.transition);
+      if (splitStyles) {
+        splitStyles.effectiveTransition = effectiveTransition;
+      }
+      stateRef.current.prevPseudoState = extractPseudoState(state);
+      var animations = useAnimations({
+        props: propsWithAnimation,
+        // clone style to prevent animation driver mutations from leaking to viewProps
+        // during SSR/pre-hydration (CSS driver mutates style.transition in place)
+        style: isHydrated ? splitStylesStyle || {} : {
+          ...splitStylesStyle
+        },
+        // @ts-ignore
+        styleState: splitStyles,
+        useStyleEmitter,
+        presence,
+        componentState: state,
+        styleProps,
+        theme,
+        themeName,
+        pseudos: pseudos || null,
+        staticConfig,
+        stateRef
+      });
+      if (animations) {
+        if (animations.ref) {
+          animatedRef = animations.ref;
+        }
+        if (isHydrated && animations) {
+          animationStyles = animations.style;
+          viewProps.style = animationStyles;
+          if (animations.className) {
+            viewProps.className = `${state.unmounted === "should-enter" ? "t_unmounted " : ""}${viewProps.className || ""} ${animations.className}`;
+          }
+        }
+      }
+      if (process.env.NODE_ENV === "development" && time) time`animations`;
+    }
+    if (process.env.NODE_ENV === "development" && props.untilMeasured && !props.group) {
+      console.warn(`You set the untilMeasured prop without setting group. This doesn't work, be sure to set untilMeasured on the parent that sets group, not the children that use the $group- prop.
 
-If you meant to do this, you can disable this warning - either change untilMeasured and group at the same time, or do group={conditional ? 'name' : undefined}`), process.env.NODE_ENV === "development" && time && time`destructure`, !isPassthrough && groupContext &&
-      // avoids onLayout if we don't need it
-      props.containerType !== "normal" && (nonGuiProps.onLayout = composeEventHandlers(nonGuiProps.onLayout, function (e) {
-        var _stateRef_current_group,
-          layout = e.nativeEvent.layout;
-        groupContext.state.layout = layout, (_stateRef_current_group = stateRef.current.group) === null || _stateRef_current_group === void 0 || _stateRef_current_group.emit({
+If you meant to do this, you can disable this warning - either change untilMeasured and group at the same time, or do group={conditional ? 'name' : undefined}`);
+    }
+    if (process.env.NODE_ENV === "development" && time) time`destructure`;
+    if (!isPassthrough && groupContext &&
+    // avoids onLayout if we don't need it
+    props.containerType !== "normal") {
+      nonGuiProps.onLayout = composeEventHandlers(nonGuiProps.onLayout, function (e) {
+        var _stateRef_current_group;
+        var layout = e.nativeEvent.layout;
+        groupContext.state.layout = layout;
+        (_stateRef_current_group = stateRef.current.group) === null || _stateRef_current_group === void 0 ? void 0 : _stateRef_current_group.emit({
           layout
-        }), !stateRef.current.hasMeasured && props.untilMeasured === "hide" && setState(function (prev) {
-          return {
-            ...prev
-          };
-        }), stateRef.current.hasMeasured = !0;
-      })), viewProps = ((_hooks_usePropsTransform = hooks.usePropsTransform) === null || _hooks_usePropsTransform === void 0 ? void 0 : _hooks_usePropsTransform.call(hooks, elementType, nonGuiProps, stateRef, stateRef.current.willHydrate)) || nonGuiProps, stateRef.current.composedRef || (stateRef.current.composedRef = composeRefs(function (x) {
+        });
+        if (!stateRef.current.hasMeasured && props.untilMeasured === "hide") {
+          setState(function (prev) {
+            return {
+              ...prev
+            };
+          });
+        }
+        stateRef.current.hasMeasured = true;
+      });
+    }
+    viewProps = ((_hooks_usePropsTransform = hooks.usePropsTransform) === null || _hooks_usePropsTransform === void 0 ? void 0 : _hooks_usePropsTransform.call(hooks, elementType, nonGuiProps, stateRef, stateRef.current.willHydrate)) || nonGuiProps;
+    if (!stateRef.current.composedRef) {
+      stateRef.current.composedRef = composeRefs(function (x) {
         return stateRef.current.host = x;
-      }, forwardedRef, setElementProps, animatedRef)), viewProps.ref = stateRef.current.composedRef, usePointerEvents(props, viewProps), process.env.NODE_ENV === "development" && !isReactNative && !isText && isWeb && !isHOC && React.Children.toArray(props.children).forEach(function (item) {
-        typeof item == "string" && item !== `
-` && console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <${staticConfig.componentName || propsIn.tag || "View"}>.`, props);
-      }), process.env.NODE_ENV === "development" && time && time`events-hooks`;
-      var unPress = function () {
-        setStateShallow({
-          press: !1,
-          pressIn: !1
+      }, forwardedRef, setElementProps, animatedRef);
+    }
+    viewProps.ref = stateRef.current.composedRef;
+    usePointerEvents(props, viewProps);
+    if (process.env.NODE_ENV === "development") {
+      if (!isReactNative && !isText && isWeb && !isHOC) {
+        React.Children.toArray(props.children).forEach(function (item) {
+          if (typeof item === "string" && item !== "\n") {
+            console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <${staticConfig.componentName || propsIn.tag || "View"}>.`, props);
+          }
         });
-      };
-      process.env.NODE_ENV === "development" && isWeb && useIsomorphicLayoutEffect(function () {
+      }
+    }
+    if (process.env.NODE_ENV === "development" && time) time`events-hooks`;
+    var unPress = function () {
+      setStateShallow({
+        press: false,
+        pressIn: false
+      });
+    };
+    if (process.env.NODE_ENV === "development" && isWeb) {
+      useIsomorphicLayoutEffect(function () {
         if (debugProp === "verbose") {
           let cssStyleDeclarationToObject2 = function (style) {
-            for (var styleObject = {}, i = 0; i < style.length; i++) {
+            var styleObject = {};
+            for (var i = 0; i < style.length; i++) {
               var prop = style[i];
               styleObject[prop] = style.getPropertyValue(prop);
             }
             return styleObject;
           };
-          var cssStyleDeclarationToObject = cssStyleDeclarationToObject2,
-            computed = stateRef.current.host ? cssStyleDeclarationToObject2(getComputedStyle(stateRef.current.host)) : {};
-          console.groupCollapsed(`Rendered > (opacity: ${computed.opacity})`), console.warn(stateRef.current.host), console.warn(computed), console.groupEnd();
-        }
-      }), useIsomorphicLayoutEffect(function () {
-        if (state.unmounted === !0 && hasEnterStyle) {
-          setStateShallow({
-            unmounted: "should-enter"
-          });
-          return;
+          var cssStyleDeclarationToObject = cssStyleDeclarationToObject2;
+          var computed = stateRef.current.host ? cssStyleDeclarationToObject2(getComputedStyle(stateRef.current.host)) : {};
+          console.groupCollapsed(`Rendered > (opacity: ${computed.opacity})`);
+          console.warn(stateRef.current.host);
+          console.warn(computed);
+          console.groupEnd();
         }
-        if (state.unmounted) {
-          if (inputStyle === "css") {
-            var cancelled = !1;
-            return requestAnimationFrame(function () {
-              cancelled || requestAnimationFrame(function () {
-                cancelled || setStateShallow({
-                  unmounted: !1
-                });
+      });
+    }
+    useIsomorphicLayoutEffect(function () {
+      if (state.unmounted === true && hasEnterStyle) {
+        setStateShallow({
+          unmounted: "should-enter"
+        });
+        return;
+      }
+      if (state.unmounted) {
+        if (inputStyle === "css") {
+          var cancelled = false;
+          requestAnimationFrame(function () {
+            if (cancelled) return;
+            requestAnimationFrame(function () {
+              if (cancelled) return;
+              setStateShallow({
+                unmounted: false
               });
-            }), function () {
-              cancelled = !0;
-            };
-          }
-          setStateShallow({
-            unmounted: !1
+            });
           });
+          return function () {
+            cancelled = true;
+          };
         }
-        return function () {
-          var _stateRef_current_mediaEmitCleanup, _stateRef_current;
-          componentSetStates.delete(setState), (_stateRef_current_mediaEmitCleanup = (_stateRef_current = stateRef.current).mediaEmitCleanup) === null || _stateRef_current_mediaEmitCleanup === void 0 || _stateRef_current_mediaEmitCleanup.call(_stateRef_current);
-        };
-      }, [state.unmounted, inputStyle]), useIsomorphicLayoutEffect(function () {
-        if (!disabled && !(!pseudoGroups && !mediaGroups) && allGroupContexts) return subscribeToContextGroup({
-          groupContext: allGroupContexts,
-          setStateShallow,
-          mediaGroups,
-          pseudoGroups
+        setStateShallow({
+          unmounted: false
         });
-      }, [allGroupContexts, disabled, pseudoGroups ? objectIdentityKey(pseudoGroups) : 0, mediaGroups ? objectIdentityKey(mediaGroups) : 0]);
-      var groupEmitter = stateRef.current.group;
-      useIsomorphicLayoutEffect(function () {
-        !groupContext || !groupEmitter || notifyGroupSubscribers(groupContext, groupEmitter, state);
-      }, [groupContext, groupEmitter, state]);
-      var runtimePressStyle = !disabled && noClass && pseudos?.pressStyle,
-        runtimeFocusStyle = !disabled && noClass && pseudos?.focusStyle,
-        runtimeFocusVisibleStyle = !disabled && noClass && pseudos?.focusVisibleStyle,
-        attachFocus = !!(runtimePressStyle || runtimeFocusStyle || runtimeFocusVisibleStyle || onFocus || onBlur || componentContext.setParentFocusState),
-        hasDynamicGroupChildren = !!(groupName && state.hasDynGroupChildren),
-        attachPress = !!(hasDynamicGroupChildren || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick || pseudos?.focusVisibleStyle),
-        runtimeHoverStyle = !disabled && noClass && pseudos?.hoverStyle,
-        needsHoverState = !!(hasDynamicGroupChildren || runtimeHoverStyle),
-        attachHover = isWeb && !!(hasDynamicGroupChildren || needsHoverState || onMouseEnter || onMouseLeave),
-        shouldAttach = !disabled && !props.asChild && !!(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle),
-        needsPressState = !!(hasDynamicGroupChildren || runtimePressStyle);
-      process.env.NODE_ENV === "development" && time && time`events-setup`, process.env.NODE_ENV === "development" && debugProp === "verbose" && log("\u{1FAA9} events()", {
+      }
+      return function () {
+        var _stateRef_current_mediaEmitCleanup, _stateRef_current;
+        componentSetStates.delete(setState);
+        (_stateRef_current_mediaEmitCleanup = (_stateRef_current = stateRef.current).mediaEmitCleanup) === null || _stateRef_current_mediaEmitCleanup === void 0 ? void 0 : _stateRef_current_mediaEmitCleanup.call(_stateRef_current);
+      };
+    }, [state.unmounted, inputStyle]);
+    useIsomorphicLayoutEffect(function () {
+      if (disabled) return;
+      if (!pseudoGroups && !mediaGroups) return;
+      if (!allGroupContexts) return;
+      return subscribeToContextGroup({
+        groupContext: allGroupContexts,
+        setStateShallow,
+        mediaGroups,
+        pseudoGroups
+      });
+    }, [allGroupContexts, disabled, pseudoGroups ? objectIdentityKey(pseudoGroups) : 0, mediaGroups ? objectIdentityKey(mediaGroups) : 0]);
+    var groupEmitter = stateRef.current.group;
+    useIsomorphicLayoutEffect(function () {
+      if (!groupContext || !groupEmitter) return;
+      notifyGroupSubscribers(groupContext, groupEmitter, state);
+    }, [groupContext, groupEmitter, state]);
+    var runtimePressStyle = !disabled && noClass && (pseudos === null || pseudos === void 0 ? void 0 : pseudos.pressStyle);
+    var runtimeFocusStyle = !disabled && noClass && (pseudos === null || pseudos === void 0 ? void 0 : pseudos.focusStyle);
+    var runtimeFocusVisibleStyle = !disabled && noClass && (pseudos === null || pseudos === void 0 ? void 0 : pseudos.focusVisibleStyle);
+    var attachFocus = Boolean(runtimePressStyle || runtimeFocusStyle || runtimeFocusVisibleStyle || onFocus || onBlur || !!componentContext.setParentFocusState);
+    var hasDynamicGroupChildren = Boolean(groupName && state.hasDynGroupChildren);
+    var attachPress = Boolean(hasDynamicGroupChildren || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick || (pseudos === null || pseudos === void 0 ? void 0 : pseudos.focusVisibleStyle));
+    var runtimeHoverStyle = !disabled && noClass && (pseudos === null || pseudos === void 0 ? void 0 : pseudos.hoverStyle);
+    var needsHoverState = Boolean(hasDynamicGroupChildren || runtimeHoverStyle);
+    var attachHover = isWeb && !!(hasDynamicGroupChildren || needsHoverState || onMouseEnter || onMouseLeave);
+    var shouldAttach = !disabled && !props.asChild && Boolean(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle);
+    var needsPressState = Boolean(hasDynamicGroupChildren || runtimePressStyle);
+    if (process.env.NODE_ENV === "development" && time) time`events-setup`;
+    if (process.env.NODE_ENV === "development" && debugProp === "verbose") {
+      log(`\u{1FAA9} events()`, {
         runtimeFocusStyle,
         runtimePressStyle,
         runtimeHoverStyle,
@@ -570,221 +905,402 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         needsHoverState,
         pseudos
       });
-      var events = shouldAttach ? {
-        onPressOut: attachPress ? function (e) {
-          unPress(), onPressOut?.(e), onMouseUp?.(e);
-        } : void 0,
-        ...((attachHover || attachPress) && {
-          onMouseEnter: function (e) {
-            var next = {};
-            needsHoverState && !lastInteractionWasTouch.value && (next.hover = !0), needsPressState && state.pressIn && (next.press = !0), setStateShallow(next), onHoverIn?.(e), onMouseEnter?.(e);
-          },
-          onMouseLeave: function (e) {
-            var next = {};
-            needsHoverState && (next.hover = !1), needsPressState && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut?.(e), onMouseLeave?.(e);
+    }
+    var events = shouldAttach ? {
+      onPressOut: attachPress ? function (e) {
+        unPress();
+        onPressOut === null || onPressOut === void 0 ? void 0 : onPressOut(e);
+        onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(e);
+      } : void 0,
+      ...((attachHover || attachPress) && {
+        onMouseEnter: function (e) {
+          var next = {};
+          if (needsHoverState && !lastInteractionWasTouch.value) {
+            next.hover = true;
           }
-        }),
-        onPressIn: attachPress ? function (e) {
-          needsPressState && setStateShallow({
-            press: !0,
-            pressIn: !0
-          }), onPressIn?.(e), onMouseDown?.(e), isWeb && componentSetStates.add(setState);
-        } : void 0,
-        onPress: attachPress ? function (e) {
-          unPress(), isWeb && onClick?.(e), onPress?.(e);
-        } : void 0,
-        ...(attachPress && onLongPress && {
-          onLongPress: function (e) {
-            unPress(), onLongPress?.(e);
+          if (needsPressState) {
+            if (state.pressIn) {
+              next.press = true;
+            }
           }
-        }),
-        ...(attachFocus && {
-          onFocus: function (e) {
-            var next = {};
-            componentContext.setParentFocusState && (componentContext.setParentFocusState({
-              focusWithin: !0
-            }), next.focusWithin = !0), pseudos?.focusVisibleStyle && lastInteractionWasKeyboard.value ? next.focusVisible = !0 : next.focus = !0, setStateShallow(next), onFocus?.(e);
-          },
-          onBlur: function (e) {
-            componentContext.setParentFocusState && componentContext.setParentFocusState({
-              focusWithin: !1
-            }), setStateShallow({
-              focus: !1,
-              focusVisible: !1,
-              focusWithin: !1
-            }), onBlur?.(e);
+          setStateShallow(next);
+          onHoverIn === null || onHoverIn === void 0 ? void 0 : onHoverIn(e);
+          onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+        },
+        onMouseLeave: function (e) {
+          var next = {};
+          if (needsHoverState) {
+            next.hover = false;
           }
-        })
-      } : null;
-      if (events && !asChild) {
-        var _viewProps_focusable;
-        Object.assign(events, {
-          cancelable: !viewProps.rejectResponderTermination,
-          disabled,
-          hitSlop: viewProps.hitSlop,
-          delayLongPress: viewProps.delayLongPress,
-          delayPressIn: viewProps.delayPressIn,
-          delayPressOut: viewProps.delayPressOut,
-          focusable: (_viewProps_focusable = viewProps.focusable) !== null && _viewProps_focusable !== void 0 ? _viewProps_focusable : !0,
-          minPressDuration: 0
-        });
-      }
-      process.env.NODE_ENV === "development" && time && time`events`, process.env.NODE_ENV === "development" && debugProp === "verbose" && log("events", {
+          if (needsPressState) {
+            next.press = false;
+            next.pressIn = false;
+          }
+          setStateShallow(next);
+          onHoverOut === null || onHoverOut === void 0 ? void 0 : onHoverOut(e);
+          onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+        }
+      }),
+      onPressIn: attachPress ? function (e) {
+        if (needsPressState) {
+          setStateShallow({
+            press: true,
+            pressIn: true
+          });
+        }
+        onPressIn === null || onPressIn === void 0 ? void 0 : onPressIn(e);
+        onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e);
+        if (isWeb) {
+          componentSetStates.add(setState);
+        }
+      } : void 0,
+      onPress: attachPress ? function (e) {
+        unPress();
+        isWeb && (onClick === null || onClick === void 0 ? void 0 : onClick(e));
+        onPress === null || onPress === void 0 ? void 0 : onPress(e);
+        if (false) {
+          onLongPress === null || onLongPress === void 0 ? void 0 : onLongPress(e);
+        }
+      } : void 0,
+      ...(attachPress && onLongPress && {
+        onLongPress: function (e) {
+          unPress();
+          onLongPress === null || onLongPress === void 0 ? void 0 : onLongPress(e);
+        }
+      }),
+      ...(attachFocus && {
+        onFocus: function (e) {
+          var next = {};
+          if (componentContext.setParentFocusState) {
+            componentContext.setParentFocusState({
+              focusWithin: true
+            });
+            next.focusWithin = true;
+          }
+          if (pseudos === null || pseudos === void 0 ? void 0 : pseudos.focusVisibleStyle) {
+            if (lastInteractionWasKeyboard.value) {
+              next.focusVisible = true;
+            } else {
+              next.focus = true;
+            }
+          } else {
+            next.focus = true;
+          }
+          setStateShallow(next);
+          onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+        },
+        onBlur: function (e) {
+          if (componentContext.setParentFocusState) {
+            componentContext.setParentFocusState({
+              focusWithin: false
+            });
+          }
+          setStateShallow({
+            focus: false,
+            focusVisible: false,
+            focusWithin: false
+          });
+          onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+        }
+      })
+    } : null;
+    if (events && !asChild) {
+      var _viewProps_focusable;
+      Object.assign(events, {
+        cancelable: !viewProps.rejectResponderTermination,
+        disabled,
+        hitSlop: viewProps.hitSlop,
+        delayLongPress: viewProps.delayLongPress,
+        delayPressIn: viewProps.delayPressIn,
+        delayPressOut: viewProps.delayPressOut,
+        focusable: (_viewProps_focusable = viewProps.focusable) !== null && _viewProps_focusable !== void 0 ? _viewProps_focusable : true,
+        minPressDuration: 0
+      });
+    }
+    if (false) {
+      Object.assign(viewProps, getWebEvents(events));
+    }
+    if (process.env.NODE_ENV === "development" && time) time`events`;
+    if (process.env.NODE_ENV === "development" && debugProp === "verbose") {
+      log(`events`, {
         events,
         attachHover,
         attachPress
       });
-      var pressGesture = useEvents(events, viewProps, stateRef, staticConfig, isHOC, isInsideNativeMenu);
-      if (process.env.NODE_ENV === "development" && time && time`hooks`, asChild) if (elementType = Slot, 0) var webStyleEvents, passEvents;else Object.assign(viewProps, {
-        onPress,
-        onLongPress
-      });
-      process.env.NODE_ENV === "development" && time && time`spaced-as-child`;
-      var content;
-      if (isPassthrough) content = /* @__PURE__ */React.createElement(BaseComponent, {
+    }
+    var pressGesture = true ? useEvents(events, viewProps, stateRef, staticConfig, isHOC, isInsideNativeMenu) : null;
+    if (process.env.NODE_ENV === "development" && time) time`hooks`;
+    if (asChild) {
+      elementType = Slot;
+      if (false) {
+        var webStyleEvents = asChild === "web" || asChild === "except-style-web";
+        var passEvents = getWebEvents({
+          onPress,
+          onLongPress,
+          onPressIn,
+          onPressOut,
+          onMouseUp,
+          onMouseDown,
+          onMouseEnter,
+          onMouseLeave
+        }, webStyleEvents);
+        Object.assign(viewProps, passEvents);
+      } else {
+        Object.assign(viewProps, {
+          onPress,
+          onLongPress
+        });
+      }
+    }
+    if (process.env.NODE_ENV === "development" && time) time`spaced-as-child`;
+    var content;
+    if (isPassthrough) {
+      content = /* @__PURE__ */React.createElement(BaseComponent, {
         style: {
           display: "contents"
         }
-      }, propsIn.children);else {
-        hooks.useChildren && (content = hooks.useChildren(elementType, content || children, viewProps));
-        var isRenderPropString = typeof renderProp == "string";
-        if (renderProp && !isRenderPropString) {
-          var out = getCustomRender(renderProp, content || children, viewProps, componentState);
-          out && (viewProps = out.viewProps, elementType = out.elementType);
+      }, propsIn.children);
+    } else {
+      if (hooks.useChildren) {
+        content = hooks.useChildren(elementType, content || children, viewProps);
+      }
+      var isRenderPropString = typeof renderProp === "string";
+      if (renderProp && !isRenderPropString) {
+        var out = getCustomRender(renderProp, content || children, viewProps, componentState);
+        if (out) {
+          viewProps = out.viewProps;
+          elementType = out.elementType;
         }
-        content || (isRenderPropString && viewProps.render, content = /* @__PURE__ */React.createElement(elementType, viewProps, content || children)), process.env.NODE_ENV === "development" && time && time`use-children`;
       }
-      content = wrapWithGestureDetector(content, pressGesture, stateRef, isHOC);
-      var ResetPresence = animationDriver?.ResetPresence,
-        needsReset = !!(
-        // not when passing down to child
-        !asChild &&
-        // not when passThrough
-        splitStyles &&
-        // not when HOC
-        !isHOC && ResetPresence && willBeAnimated && (hasEnterStyle || presenceState)),
-        hasEverReset = stateRef.current.hasEverResetPresence;
-      needsReset && !hasEverReset && (stateRef.current.hasEverResetPresence = !0);
-      var renderReset = needsReset || hasEverReset;
-      if (renderReset && ResetPresence && (content = /* @__PURE__ */_jsx(ResetPresence, {
+      if (!content) {
+        if (isRenderPropString) {
+          viewProps.render === renderProp;
+        }
+        content = /* @__PURE__ */React.createElement(elementType, viewProps, content || children);
+      }
+      if (process.env.NODE_ENV === "development" && time) time`use-children`;
+    }
+    if (true) {
+      var isCompositeComponent = !isHOC && Component && typeof Component !== "string";
+      content = wrapWithGestureDetector(content, pressGesture, stateRef, isHOC, isCompositeComponent);
+    }
+    var ResetPresence = animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.ResetPresence;
+    var needsReset = Boolean(
+    // not when passing down to child
+    !asChild &&
+    // not when passThrough
+    splitStyles &&
+    // not when HOC
+    !isHOC && ResetPresence && willBeAnimated && (hasEnterStyle || presenceState));
+    var hasEverReset = stateRef.current.hasEverResetPresence;
+    if (needsReset && !hasEverReset) {
+      stateRef.current.hasEverResetPresence = true;
+    }
+    var renderReset = needsReset || hasEverReset;
+    if (renderReset && ResetPresence) {
+      content = /* @__PURE__ */_jsx(ResetPresence, {
         disabled: !needsReset,
         children: content
-      })), process.env.NODE_ENV === "development" && time && time`create-element`, ("focusWithinStyle" in propsIn || pseudos?.focusWithinStyle) && (content = /* @__PURE__ */_jsx(ComponentContext.Provider, {
+      });
+    }
+    if (process.env.NODE_ENV === "development" && time) time`create-element`;
+    if ("focusWithinStyle" in propsIn || (pseudos === null || pseudos === void 0 ? void 0 : pseudos.focusWithinStyle)) {
+      content = /* @__PURE__ */_jsx(ComponentContext.Provider, {
         ...componentContext,
         setParentFocusState: setStateShallow,
         children: content
-      })), "group" in props && (content = /* @__PURE__ */_jsx(GroupContext.Provider, {
+      });
+    }
+    if ("group" in props) {
+      content = /* @__PURE__ */_jsx(GroupContext.Provider, {
         value: allGroupContexts,
         children: content
-      })), process.env.NODE_ENV === "development" && time && time`group-context`, content = disableTheme || !splitStyles ? content : getThemedChildren(themeState, content, themeStateProps, !1, stateRef), process.env.NODE_ENV === "development" && time && time`themed-children`, overriddenContextProps && contextForOverride) {
-        var Provider = contextForOverride.Provider;
-        for (var key1 in styledContextValue) key1 in overriddenContextProps || (overriddenContextProps[key1] = styledContextValue[key1]);
-        content = /* @__PURE__ */_jsx(Provider, {
-          __disableMergeDefaultValues: !0,
-          ...overriddenContextProps,
+      });
+    }
+    if (false) {
+      content = /* @__PURE__ */_jsx(ComponentContext.Provider, {
+        ...componentContext,
+        inText: true,
+        children: content
+      });
+    }
+    if (process.env.NODE_ENV === "development" && time) time`group-context`;
+    content = disableTheme || !splitStyles ? content : getThemedChildren(themeState, content, themeStateProps, false, stateRef);
+    if (process.env.NODE_ENV === "development" && time) time`themed-children`;
+    if (false) {
+      if (isReactNative && !asChild) {
+        content = /* @__PURE__ */_jsx("span", {
+          className: "_dsp_contents",
+          ...(!isPassthrough && isHydrated && events && getWebEvents(events)),
           children: content
         });
       }
-      if (process.env.NODE_ENV === "development" && time && time`context-override`, process.env.NODE_ENV === "development" && time && time`style-tags`, process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
-        var element1 = typeof elementType == "string" ? elementType : "Component",
-          title = `render <${element1} /> (${internalID}) with props`;
+    }
+    if (overriddenContextProps && contextForOverride) {
+      var Provider = contextForOverride.Provider;
+      for (var key1 in styledContextValue) {
+        if (!(key1 in overriddenContextProps)) {
+          overriddenContextProps[key1] = styledContextValue[key1];
+        }
+      }
+      content = /* @__PURE__ */_jsx(Provider, {
+        __disableMergeDefaultValues: true,
+        ...overriddenContextProps,
+        children: content
+      });
+    }
+    if (process.env.NODE_ENV === "development" && time) time`context-override`;
+    if (false) {
+      content = /* @__PURE__ */_jsxs(_Fragment, {
+        children: [content, /* we surpress hydration warnings */
+        !isHydrated ? getStyleTags(Object.values(splitStyles.rulesToInsert)) : null]
+      });
+    }
+    if (process.env.NODE_ENV === "development" && time) time`style-tags`;
+    if (process.env.NODE_ENV === "development") {
+      if (debugProp && debugProp !== "profile") {
+        var element1 = typeof elementType === "string" ? elementType : "Component";
+        var title = `render <${element1} /> (${internalID}) with props`;
         if (!isWeb || !isClient) {
-          log(title), log("state: ", state), isDevTools && log("viewProps", viewProps), log("final styles:");
-          for (var key2 in splitStylesStyle) log(key2, splitStylesStyle[key2]);
+          log(title);
+          log(`state: `, state);
+          if (isDevTools) {
+            log("viewProps", viewProps);
+          }
+          log(`final styles:`);
+          for (var key2 in splitStylesStyle) {
+            log(key2, splitStylesStyle[key2]);
+          }
         } else {
           console.groupCollapsed(title);
           try {
-            log("viewProps", viewProps), log("children", content), typeof window < "u" && log({
-              propsIn,
-              props,
-              attachPress,
-              animationStyles,
-              classNames,
-              content,
-              elementType,
-              events,
-              isAnimated,
-              hasRuntimeMediaKeys,
-              isStringElement,
-              mediaListeningKeys,
-              pseudos,
-              shouldAttach,
-              noClass,
-              shouldListenForMedia,
-              splitStyles,
-              splitStylesStyle,
-              state,
-              stateRef,
-              staticConfig,
-              styleProps,
-              themeState,
-              viewProps,
-              willBeAnimated,
-              startedUnhydrated
-            });
-          } catch {} finally {
+            log("viewProps", viewProps);
+            log("children", content);
+            if (typeof window !== "undefined") {
+              log({
+                propsIn,
+                props,
+                attachPress,
+                animationStyles,
+                classNames,
+                content,
+                elementType,
+                events,
+                isAnimated,
+                hasRuntimeMediaKeys,
+                isStringElement,
+                mediaListeningKeys,
+                pseudos,
+                shouldAttach,
+                noClass,
+                shouldListenForMedia,
+                splitStyles,
+                splitStylesStyle,
+                state,
+                stateRef,
+                staticConfig,
+                styleProps,
+                themeState,
+                viewProps,
+                willBeAnimated,
+                startedUnhydrated
+              });
+            }
+          } catch (e) {} finally {
             console.groupEnd();
           }
         }
+        if (debugProp === "break") {}
       }
-      return process.env.NODE_ENV === "development" && time && (time`rest`, globalThis.willPrint || (globalThis.willPrint = !0, setTimeout(function () {
-        delete globalThis.willPrint, time.print(), time = null;
-      }, 50))), content;
-    });
+    }
+    if (process.env.NODE_ENV === "development" && time) {
+      time`rest`;
+      if (!globalThis["willPrint"]) {
+        globalThis["willPrint"] = true;
+        setTimeout(function () {
+          delete globalThis["willPrint"];
+          time.print();
+          time = null;
+        }, 50);
+      }
+    }
+    return content;
+  });
   function notifyGroupSubscribers(groupContext, groupEmitter, pseudo) {
-    if (!(!groupContext || !groupEmitter)) {
-      var nextState = {
-        ...groupContext.state,
-        pseudo
-      };
-      groupEmitter.emit(nextState), groupContext.state = nextState;
+    if (!groupContext || !groupEmitter) {
+      return;
     }
+    var nextState = {
+      ...groupContext.state,
+      pseudo
+    };
+    groupEmitter.emit(nextState);
+    groupContext.state = nextState;
+  }
+  if (staticConfig.componentName) {
+    component.displayName = staticConfig.componentName;
   }
-  staticConfig.componentName && (component.displayName = staticConfig.componentName);
   var res = component;
-  res = /* @__PURE__ */React.memo(res), res.staticConfig = staticConfig;
+  res = /* @__PURE__ */React.memo(res);
+  res.staticConfig = staticConfig;
   function extendStyledConfig(extended) {
     return {
       ...staticConfig,
       ...extended,
-      neverFlatten: !0,
-      isHOC: !0,
-      isStyledHOC: !1
+      neverFlatten: true,
+      isHOC: true,
+      isStyledHOC: false
     };
   }
   function styleable(Component2, options) {
-    var skipForwardRef = typeof Component2 == "function" && Component2.length === 1,
-      out = skipForwardRef ? Component2 : /* @__PURE__ */React.forwardRef(Component2),
-      extendedConfig = extendStyledConfig(options?.staticConfig);
-    return out = options?.disableTheme ? out : themeable(out, extendedConfig, !0), (extendedConfig.memo || process.env.HANZO_GUI_MEMOIZE_STYLEABLE) && (out = /* @__PURE__ */React.memo(out)), out.staticConfig = extendedConfig, out.styleable = styleable, out;
+    var skipForwardRef = typeof Component2 === "function" && Component2.length === 1;
+    var out = skipForwardRef ? Component2 : /* @__PURE__ */React.forwardRef(Component2);
+    var extendedConfig = extendStyledConfig(options === null || options === void 0 ? void 0 : options.staticConfig);
+    out = (options === null || options === void 0 ? void 0 : options.disableTheme) ? out : themeable(out, extendedConfig, true);
+    if (extendedConfig.memo || process.env.GUI_MEMOIZE_STYLEABLE) {
+      out = /* @__PURE__ */React.memo(out);
+    }
+    out.staticConfig = extendedConfig;
+    out.styleable = styleable;
+    return out;
   }
-  return res.styleable = styleable, res;
+  res.styleable = styleable;
+  return res;
 }
 var fromPx = function (val) {
-    return typeof val == "number" ? val : typeof val == "string" ? +val.replace("px", "") : 0;
-  },
-  getCustomRender = function (renderProp, content, viewProps, state) {
-    if (typeof renderProp == "function") {
-      var out = renderProp(viewProps, state);
-      renderProp = getRenderElementForPlatform(out);
-    }
-    if (renderProp && (typeof renderProp > "u" ? "undefined" : _type_of(renderProp)) === "object" && /* @__PURE__ */React.isValidElement(renderProp)) {
+  if (typeof val === "number") return val;
+  if (typeof val === "string") return +val.replace("px", "");
+  return 0;
+};
+var getCustomRender = function (renderProp, content, viewProps, state) {
+  if (typeof renderProp === "function") {
+    var out = renderProp(viewProps, state);
+    renderProp = getRenderElementForPlatform(out);
+  }
+  if (renderProp) {
+    if ((typeof renderProp === "undefined" ? "undefined" : _type_of(renderProp)) === "object" && /* @__PURE__ */React.isValidElement(renderProp)) {
       var renderElement = getRenderElementForPlatform(renderProp);
       if (renderElement) {
-        var elementProps = renderProp.props,
-          mergedProps = elementProps ? mergeRenderElementProps(elementProps, viewProps, content) : viewProps;
+        var elementProps = renderProp.props;
+        var mergedProps = elementProps ? mergeRenderElementProps(elementProps, viewProps, content) : viewProps;
         return {
           elementType: renderProp.type,
           viewProps: mergedProps
         };
       }
     }
-  };
+  }
+};
 function getRenderElementForPlatform(potential) {
-  if (!isHTMLElement(potential)) return potential;
+  if (true) {
+    if (isHTMLElement(potential)) {
+      return;
+    }
+  }
+  return potential;
 }
 function isHTMLElement(el) {
-  return typeof el.type == "string" && el.type[0] === el.type[0].toLowerCase();
+  return typeof el["type"] === "string" && el["type"][0] === el["type"][0].toLowerCase();
 }
 export { componentSetStates, createComponent };
 //# sourceMappingURL=createComponent.native.js.map