@tamagui/web 1.110.4 → 1.111.0

package/dist/esm/createComponent.native.js

@@ -23,306 +23,16 @@ import { hooks } from "./setupHooks";
 import { Slot } from "./views/Slot";
 import { getThemedChildren } from "./views/Theme";
 import { ThemeDebug } from "./views/ThemeDebug";
-function _array_like_to_array(arr, len) {
-  (len == null || len > arr.length) && (len = arr.length);
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-function _array_with_holes(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-function _array_without_holes(arr) {
-  if (Array.isArray(arr)) return _array_like_to_array(arr);
-}
-function _define_property(obj, key, value) {
-  return key in obj ? Object.defineProperty(obj, key, {
-    value,
-    enumerable: !0,
-    configurable: !0,
-    writable: !0
-  }) : obj[key] = value, obj;
-}
-function _iterable_to_array(iter) {
-  if (typeof Symbol < "u" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-function _iterable_to_array_limit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol < "u" && arr[Symbol.iterator] || arr["@@iterator"];
-  if (_i != null) {
-    var _arr = [], _n = !0, _d = !1, _s, _e;
-    try {
-      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done) && (_arr.push(_s.value), !(i && _arr.length === i)); _n = !0)
-        ;
-    } catch (err) {
-      _d = !0, _e = err;
-    } finally {
-      try {
-        !_n && _i.return != null && _i.return();
-      } finally {
-        if (_d) throw _e;
-      }
-    }
-    return _arr;
-  }
-}
-function _non_iterable_rest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _non_iterable_spread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _object_spread(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {}, ownKeys2 = Object.keys(source);
-    typeof Object.getOwnPropertySymbols == "function" && (ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-      return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-    }))), ownKeys2.forEach(function(key) {
-      _define_property(target, key, source[key]);
-    });
-  }
-  return target;
-}
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function(sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-  return keys;
-}
-function _object_spread_props(target, source) {
-  return source = source ?? {}, Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
-    Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-  }), target;
-}
-function _object_without_properties(source, excluded) {
-  if (source == null) return {};
-  var target = _object_without_properties_loose(source, excluded), key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++)
-      key = sourceSymbolKeys[i], !(excluded.indexOf(key) >= 0) && Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]);
-  }
-  return target;
-}
-function _object_without_properties_loose(source, excluded) {
-  if (source == null) return {};
-  var target = {}, sourceKeys = Object.keys(source), key, i;
-  for (i = 0; i < sourceKeys.length; i++)
-    key = sourceKeys[i], !(excluded.indexOf(key) >= 0) && (target[key] = source[key]);
-  return target;
-}
-function _sliced_to_array(arr, i) {
-  return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
-}
-function _tagged_template_literal(strings, raw) {
-  return raw || (raw = strings.slice(0)), Object.freeze(Object.defineProperties(strings, {
-    raw: {
-      value: Object.freeze(raw)
-    }
-  }));
-}
-function _to_consumable_array(arr) {
-  return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
-}
-function _type_of(obj) {
-  "@swc/helpers - typeof";
-  return obj && typeof Symbol < "u" && obj.constructor === Symbol ? "symbol" : typeof obj;
-}
-function _unsupported_iterable_to_array(o, minLen) {
-  if (o) {
-    if (typeof o == "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor && (n = o.constructor.name), n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-  }
-}
-function _templateObject() {
-  var data = _tagged_template_literal([
-    "pre-use-state"
-  ]);
-  return _templateObject = function() {
-    return data;
-  }, data;
-}
-function _templateObject1() {
-  var data = _tagged_template_literal([
-    "start (ignore)"
-  ]);
-  return _templateObject1 = function() {
-    return data;
-  }, data;
-}
-function _templateObject2() {
-  var data = _tagged_template_literal([
-    "did-finish-ssr"
-  ]);
-  return _templateObject2 = function() {
-    return data;
-  }, data;
-}
-function _templateObject3() {
-  var data = _tagged_template_literal([
-    "stateref"
-  ]);
-  return _templateObject3 = function() {
-    return data;
-  }, data;
-}
-function _templateObject4() {
-  var data = _tagged_template_literal([
-    "use-state"
-  ]);
-  return _templateObject4 = function() {
-    return data;
-  }, data;
-}
-function _templateObject5() {
-  var data = _tagged_template_literal([
-    "use-context"
-  ]);
-  return _templateObject5 = function() {
-    return data;
-  }, data;
-}
-function _templateObject6() {
-  var data = _tagged_template_literal([
-    "theme-props"
-  ]);
-  return _templateObject6 = function() {
-    return data;
-  }, data;
-}
-function _templateObject7() {
-  var data = _tagged_template_literal([
-    "pre-theme-media"
-  ]);
-  return _templateObject7 = function() {
-    return data;
-  }, data;
-}
-function _templateObject8() {
-  var data = _tagged_template_literal([
-    "theme"
-  ]);
-  return _templateObject8 = function() {
-    return data;
-  }, data;
-}
-function _templateObject9() {
-  var data = _tagged_template_literal([
-    "media"
-  ]);
-  return _templateObject9 = function() {
-    return data;
-  }, data;
-}
-function _templateObject10() {
-  var data = _tagged_template_literal([
-    "split-styles"
-  ]);
-  return _templateObject10 = function() {
-    return data;
-  }, data;
-}
-function _templateObject11() {
-  var data = _tagged_template_literal([
-    "animations"
-  ]);
-  return _templateObject11 = function() {
-    return data;
-  }, data;
-}
-function _templateObject12() {
-  var data = _tagged_template_literal([
-    "destructure"
-  ]);
-  return _templateObject12 = function() {
-    return data;
-  }, data;
-}
-function _templateObject13() {
-  var data = _tagged_template_literal([
-    "events-hooks"
-  ]);
-  return _templateObject13 = function() {
-    return data;
-  }, data;
-}
-function _templateObject14() {
-  var data = _tagged_template_literal([
-    "events-setup"
-  ]);
-  return _templateObject14 = function() {
-    return data;
-  }, data;
-}
-function _templateObject15() {
-  var data = _tagged_template_literal([
-    "events"
-  ]);
-  return _templateObject15 = function() {
-    return data;
-  }, data;
-}
-function _templateObject16() {
-  var data = _tagged_template_literal([
-    "hooks"
-  ]);
-  return _templateObject16 = function() {
-    return data;
-  }, data;
-}
-function _templateObject17() {
-  var data = _tagged_template_literal([
-    "spaced-as-child"
-  ]);
-  return _templateObject17 = function() {
-    return data;
-  }, data;
-}
-function _templateObject18() {
-  var data = _tagged_template_literal([
-    "create-element"
-  ]);
-  return _templateObject18 = function() {
-    return data;
-  }, data;
-}
-function _templateObject19() {
-  var data = _tagged_template_literal([
-    "group-context"
-  ]);
-  return _templateObject19 = function() {
-    return data;
-  }, data;
-}
-function _templateObject20() {
-  var data = _tagged_template_literal([
-    "themed-children"
-  ]);
-  return _templateObject20 = function() {
-    return data;
-  }, data;
-}
-function _templateObject21() {
-  var data = _tagged_template_literal([
-    "rest"
-  ]);
-  return _templateObject21 = function() {
-    return data;
-  }, data;
-}
 var tamaguiConfig, time, debugKeyListeners, startVisualizer, componentSetStates = /* @__PURE__ */ new Set();
 if (typeof document < "u") {
   var cancelTouches = function() {
     componentSetStates.forEach(function(setState) {
       return setState(function(prev) {
-        return prev.press || prev.pressIn ? _object_spread_props(_object_spread({}, prev), {
+        return prev.press || prev.pressIn ? {
+          ...prev,
           press: !1,
           pressIn: !1
-        }) : prev;
+        } : prev;
       });
     }), componentSetStates.clear();
   };
@@ -330,38 +40,39 @@ if (typeof document < "u") {
     var devVisualizerConfig = devConfig === null || devConfig === void 0 ? void 0 : devConfig.visualizer;
     if (devVisualizerConfig) {
       debugKeyListeners = /* @__PURE__ */ new Set();
-      var tm, isShowing = !1, options = _object_spread({
+      var tm, isShowing = !1, options = {
         key: "Alt",
-        delay: 800
-      }, (typeof devVisualizerConfig > "u" ? "undefined" : _type_of(devVisualizerConfig)) === "object" ? devVisualizerConfig : {});
+        delay: 800,
+        ...typeof devVisualizerConfig == "object" ? devVisualizerConfig : {}
+      };
       document.addEventListener("blur", function() {
         clearTimeout(tm);
       }), document.addEventListener("keydown", function(param) {
-        var key = param.key, defaultPrevented = param.defaultPrevented;
+        var { key, defaultPrevented } = param;
         defaultPrevented || (clearTimeout(tm), key === options.key && (tm = setTimeout(function() {
-          isShowing = !0, debugKeyListeners == null || debugKeyListeners.forEach(function(l) {
+          isShowing = !0, debugKeyListeners?.forEach(function(l) {
             return l(!0);
           });
         }, options.delay)));
       }), document.addEventListener("keyup", function(param) {
-        var key = param.key, defaultPrevented = param.defaultPrevented;
-        defaultPrevented || key === options.key && (clearTimeout(tm), isShowing && (debugKeyListeners == null || debugKeyListeners.forEach(function(l) {
+        var { key, defaultPrevented } = param;
+        defaultPrevented || key === options.key && (clearTimeout(tm), isShowing && debugKeyListeners?.forEach(function(l) {
           return l(!1);
-        })));
+        }));
       });
     }
   });
 }
 var useComponentState = function(props, param, staticConfig, config) {
-  var animationDriver = param.animationDriver, groups = param.groups, _animationDriver_usePresence, useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, stateRef = React.useRef(void 0);
+  var { animationDriver, groups } = param, _animationDriver_usePresence, useAnimations = animationDriver?.useAnimations, stateRef = React.useRef(void 0);
   stateRef.current || (stateRef.current = {});
-  var hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationDriver == null ? void 0 : animationDriver.supportsCSSVars, curStateRef = stateRef.current, willBeAnimatedClient = function() {
+  var hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationDriver?.supportsCSSVars, curStateRef = stateRef.current, willBeAnimatedClient = function() {
     var next = !!(hasAnimationProp && !staticConfig.isHOC && useAnimations);
     return !!(next || curStateRef.hasAnimated);
   }(), willBeAnimated = !isServer && willBeAnimatedClient;
   willBeAnimated && !curStateRef.hasAnimated && (curStateRef.hasAnimated = !0);
-  var presence = willBeAnimated && props.animatePresence !== !1 && (animationDriver == null || (_animationDriver_usePresence = animationDriver.usePresence) === null || _animationDriver_usePresence === void 0 ? void 0 : _animationDriver_usePresence.call(animationDriver)) || null, presenceState = presence == null ? void 0 : presence[2], isExiting = (presenceState == null ? void 0 : presenceState.isPresent) === !1, isEntering = (presenceState == null ? void 0 : presenceState.isPresent) === !0 && presenceState.initial !== !1, hasEnterStyle = !!props.enterStyle, hasRNAnimation = hasAnimationProp && (animationDriver == null ? void 0 : animationDriver.isReactNative);
-  process.env.NODE_ENV === "development" && time && time(_templateObject());
+  var presence = willBeAnimated && props.animatePresence !== !1 && (animationDriver == null || (_animationDriver_usePresence = animationDriver.usePresence) === null || _animationDriver_usePresence === void 0 ? void 0 : _animationDriver_usePresence.call(animationDriver)) || null, presenceState = presence?.[2], isExiting = presenceState?.isPresent === !1, isEntering = presenceState?.isPresent === !0 && presenceState.initial !== !1, hasEnterStyle = !!props.enterStyle, hasRNAnimation = hasAnimationProp && animationDriver?.isReactNative;
+  process.env.NODE_ENV === "development" && time && time`pre-use-state`;
   var hasEnterState = hasEnterStyle || isEntering, didHydrateOnce = willBeAnimated ? useDidHydrateOnce() : !0, shouldEnter = hasEnterState || !didHydrateOnce && hasRNAnimation, shouldEnterFromUnhydrated = isWeb && !didHydrateOnce, initialState = shouldEnter ? (
     // on the very first render we switch all spring animation drivers to css rendering
     // this is because we need to use css variables, which they don't support to do proper SSR
@@ -371,19 +82,24 @@ var useComponentState = function(props, param, staticConfig, config) {
     shouldEnterFromUnhydrated ? defaultComponentState : defaultComponentStateShouldEnter
   ) : defaultComponentStateMounted, disabled = isDisabled(props);
   disabled != null && (initialState.disabled = disabled);
-  var states = React.useState(initialState), state = props.forceStyle ? _object_spread_props(_object_spread({}, states[0]), _define_property({}, props.forceStyle, !0)) : states[0], setState = states[1], isHydrated = state.unmounted === !1 || state.unmounted === "should-enter", isAnimated = willBeAnimated;
-  isWeb && hasRNAnimation && !staticConfig.isHOC && state.unmounted === !0 && (isAnimated = !1, curStateRef.willHydrate = !0), disabled !== state.disabled && (state.disabled = disabled, disabled && Object.assign(state, defaultComponentStateMounted), setState(_object_spread({}, state)));
+  var states = React.useState(initialState), state = props.forceStyle ? {
+    ...states[0],
+    [props.forceStyle]: !0
+  } : states[0], setState = states[1], isHydrated = state.unmounted === !1 || state.unmounted === "should-enter", isAnimated = willBeAnimated;
+  isWeb && hasRNAnimation && !staticConfig.isHOC && state.unmounted === !0 && (isAnimated = !1, curStateRef.willHydrate = !0), disabled !== state.disabled && (state.disabled = disabled, disabled && Object.assign(state, defaultComponentStateMounted), setState({
+    ...state
+  }));
   var setStateShallow = createShallowSetState(setState, disabled, !1, props.debug);
   if (presenceState && isAnimated && isHydrated && staticConfig.variants) {
-    process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn("has presenceState ".concat(JSON.stringify(presenceState)));
-    var enterVariant = presenceState.enterVariant, exitVariant = presenceState.exitVariant, enterExitVariant = presenceState.enterExitVariant, custom = presenceState.custom;
+    process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn(`has presenceState ${JSON.stringify(presenceState)}`);
+    var { enterVariant, exitVariant, enterExitVariant, custom } = presenceState;
     isObj(custom) && Object.assign(props, custom);
     var exv = exitVariant ?? enterExitVariant, env = enterVariant ?? enterExitVariant;
-    state.unmounted && env && staticConfig.variants[env] ? (process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn('Animating presence ENTER "'.concat(env, '"')), props[env] = !0) : isExiting && exv && (process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn('Animating presence EXIT "'.concat(exv, '"')), props[exv] = exitVariant !== enterExitVariant);
+    state.unmounted && env && staticConfig.variants[env] ? (process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn(`Animating presence ENTER "${env}"`), props[env] = !0) : isExiting && exv && (process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn(`Animating presence EXIT "${exv}"`), props[exv] = exitVariant !== enterExitVariant);
   }
   var shouldAvoidClasses = !isWeb;
   if (isWeb) {
-    var disableClassName = props.disableClassName, isAnimatedAndHydrated = isAnimated && !supportsCSSVars && didHydrateOnce && !isServer, isClassNameDisabled = !staticConfig.acceptsClassName && (config.disableSSR || didHydrateOnce), isDisabledManually = disableClassName && !isServer && didHydrateOnce && state.unmounted === !0;
+    var { disableClassName } = props, isAnimatedAndHydrated = isAnimated && !supportsCSSVars && didHydrateOnce && !isServer, isClassNameDisabled = !staticConfig.acceptsClassName && (config.disableSSR || didHydrateOnce), isDisabledManually = disableClassName && !isServer && didHydrateOnce && state.unmounted === !0;
     (isAnimatedAndHydrated || isDisabledManually || isClassNameDisabled) && (shouldAvoidClasses = !0, process.env.NODE_ENV === "development" && props.debug && log("avoiding className", {
       isAnimatedAndHydrated,
       isDisabledManually,
@@ -395,12 +111,12 @@ var useComponentState = function(props, param, staticConfig, config) {
     var listeners = /* @__PURE__ */ new Set();
     curStateRef.group = {
       listeners,
-      emit: function(name, state2) {
+      emit(name, state2) {
         listeners.forEach(function(l) {
           return l(name, state2);
         });
       },
-      subscribe: function(cb) {
+      subscribe(cb) {
         return listeners.add(cb), function() {
           listeners.delete(cb);
         };
@@ -413,7 +129,10 @@ var useComponentState = function(props, param, staticConfig, config) {
       og(state2), curStateRef.group.emit(groupName, {
         pseudo: state2
       });
-      var next = _object_spread({}, groupContextState[groupName], state2);
+      var next = {
+        ...groupContextState[groupName],
+        ...state2
+      };
       groupContextState[groupName] = next;
     };
   }
@@ -448,15 +167,18 @@ isWeb && globalThis.document && (document.addEventListener("keydown", function()
   lastInteractionWasKeyboard.value = !1;
 }));
 function createComponent(staticConfig) {
-  var _staticConfig_defaultProps, componentName = staticConfig.componentName, config = null, defaultProps = staticConfig.defaultProps;
+  var _staticConfig_defaultProps, { componentName } = staticConfig, config = null, defaultProps = staticConfig.defaultProps;
   onConfiguredOnce(function(conf) {
     if (config = conf, componentName) {
       var _conf_defaultProps, defaultForComponent = (_conf_defaultProps = conf.defaultProps) === null || _conf_defaultProps === void 0 ? void 0 : _conf_defaultProps[componentName];
-      defaultForComponent && (defaultProps = _object_spread({}, defaultForComponent, defaultProps));
+      defaultForComponent && (defaultProps = {
+        ...defaultForComponent,
+        ...defaultProps
+      });
     }
   });
-  var Component = staticConfig.Component, isText = staticConfig.isText, isZStack = staticConfig.isZStack, isHOC = staticConfig.isHOC, _staticConfig_validStyles = staticConfig.validStyles, _$validStyles = _staticConfig_validStyles === void 0 ? {} : _staticConfig_validStyles, _staticConfig_variants = staticConfig.variants, variants = _staticConfig_variants === void 0 ? {} : _staticConfig_variants;
-  process.env.NODE_ENV === "development" && (!((_staticConfig_defaultProps = staticConfig.defaultProps) === null || _staticConfig_defaultProps === void 0) && _staticConfig_defaultProps.debug) && process.env.IS_STATIC !== "is_static" && log("\u{1F41B} [".concat(componentName || "Component", "]"), {
+  var { Component, isText, isZStack, isHOC, validStyles: _$validStyles = {}, variants = {} } = staticConfig;
+  process.env.NODE_ENV === "development" && (!((_staticConfig_defaultProps = staticConfig.defaultProps) === null || _staticConfig_defaultProps === void 0) && _staticConfig_defaultProps.debug) && process.env.IS_STATIC !== "is_static" && log(`\u{1F41B} [${componentName || "Component"}]`, {
     staticConfig,
     defaultProps,
     defaultPropsKeyOrder: defaultProps ? Object.keys(defaultProps) : []
@@ -473,20 +195,23 @@ function createComponent(staticConfig) {
       var _propsIn_datatestrenders, _current, _;
       (_ = (_propsIn_datatestrenders = propsIn["data-test-renders"])[_current = "current"]) !== null && _ !== void 0 || (_propsIn_datatestrenders[_current] = 0), propsIn["data-test-renders"].current += 1;
     }
-    var componentContext = React.useContext(ComponentContext), styledContextProps, overriddenContextProps, contextValue, context = staticConfig.context, isReactNative = staticConfig.isReactNative;
+    var componentContext = React.useContext(ComponentContext), styledContextProps, overriddenContextProps, contextValue, { context, isReactNative } = staticConfig;
     if (context) {
       contextValue = React.useContext(context);
-      var inverseShorthands = getConfig().inverseShorthands;
+      var { inverseShorthands } = getConfig();
       for (var key in context.props) {
-        var _propsIn_key, _ref, _ref1, propVal = (_ref1 = (_ref = (_propsIn_key = propsIn[key]) !== null && _propsIn_key !== void 0 ? _propsIn_key : propsIn[inverseShorthands[key]]) !== null && _ref !== void 0 ? _ref : defaultProps == null ? void 0 : defaultProps[key]) !== null && _ref1 !== void 0 ? _ref1 : defaultProps == null ? void 0 : defaultProps[inverseShorthands[key]];
+        var _propsIn_key, _ref, _ref1, propVal = (_ref1 = (_ref = (_propsIn_key = propsIn[key]) !== null && _propsIn_key !== void 0 ? _propsIn_key : propsIn[inverseShorthands[key]]) !== null && _ref !== void 0 ? _ref : defaultProps?.[key]) !== null && _ref1 !== void 0 ? _ref1 : defaultProps?.[inverseShorthands[key]];
         if (propVal === void 0) {
-          var val = contextValue == null ? void 0 : contextValue[key];
+          var val = contextValue?.[key];
           val !== void 0 && (styledContextProps || (styledContextProps = {}), styledContextProps[key] = val);
         } else
           overriddenContextProps || (overriddenContextProps = {}), overriddenContextProps[key] = propVal;
       }
     }
-    var curDefaultProps = styledContextProps ? _object_spread({}, defaultProps, styledContextProps) : defaultProps, props = propsIn;
+    var curDefaultProps = styledContextProps ? {
+      ...defaultProps,
+      ...styledContextProps
+    } : defaultProps, props = propsIn;
     curDefaultProps && (props = mergeProps(curDefaultProps, propsIn));
     var debugProp = props.debug, componentName2 = props.componentName || staticConfig.componentName;
     if (process.env.NODE_ENV === "development" && isClient && React.useEffect(function() {
@@ -496,12 +221,12 @@ function createComponent(staticConfig) {
           if (show) {
             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.style.webkitFontSmoothing = "none", tooltip.innerText = "".concat(componentName2 || "", " ").concat(dataAt, " ").concat(dataIn).trim(), overlay.appendChild(tooltip), node.appendChild(overlay);
+            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.style.webkitFontSmoothing = "none", tooltip.innerText = `${componentName2 || ""} ${dataAt} ${dataIn}`.trim(), overlay.appendChild(tooltip), node.appendChild(overlay);
           } else
             overlay && node.removeChild(overlay);
       };
       return debugKeyListeners || (debugKeyListeners = /* @__PURE__ */ new Set()), debugKeyListeners.add(debugVisualizerHandler), function() {
-        debugKeyListeners == null || debugKeyListeners.delete(debugVisualizerHandler);
+        debugKeyListeners?.delete(debugVisualizerHandler);
       };
     }, [
       componentName2
@@ -509,15 +234,15 @@ function createComponent(staticConfig) {
       var timer = require("@tamagui/timer").timer();
       time = timer.start();
     }
-    process.env.NODE_ENV === "development" && time && time(_templateObject1()), process.env.NODE_ENV === "development" && time && time(_templateObject2()), process.env.NODE_ENV === "development" && time && time(_templateObject3());
-    var animationDriver = componentContext.animationDriver, useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, _useComponentState = useComponentState(props, componentContext, staticConfig, config), curStateRef = _useComponentState.curStateRef, disabled = _useComponentState.disabled, groupName = _useComponentState.groupName, hasAnimationProp = _useComponentState.hasAnimationProp, hasEnterStyle = _useComponentState.hasEnterStyle, isAnimated = _useComponentState.isAnimated, isExiting = _useComponentState.isExiting, isHydrated = _useComponentState.isHydrated, presence = _useComponentState.presence, presenceState = _useComponentState.presenceState, setState = _useComponentState.setState, setStateShallow = _useComponentState.setStateShallow, shouldAvoidClasses = _useComponentState.shouldAvoidClasses, state = _useComponentState.state, stateRef = _useComponentState.stateRef, supportsCSSVars = _useComponentState.supportsCSSVars, willBeAnimated = _useComponentState.willBeAnimated, willBeAnimatedClient = _useComponentState.willBeAnimatedClient, shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo;
-    process.env.NODE_ENV === "development" && time && time(_templateObject4());
+    process.env.NODE_ENV === "development" && time && time`start (ignore)`, process.env.NODE_ENV === "development" && time && time`did-finish-ssr`, process.env.NODE_ENV === "development" && time && time`stateref`;
+    var animationDriver = componentContext.animationDriver, useAnimations = animationDriver?.useAnimations, { curStateRef, disabled, groupName, hasAnimationProp, hasEnterStyle, isAnimated, isExiting, isHydrated, presence, presenceState, setState, setStateShallow, shouldAvoidClasses, state, stateRef, supportsCSSVars, willBeAnimated, willBeAnimatedClient } = useComponentState(props, componentContext, staticConfig, config), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo;
+    process.env.NODE_ENV === "development" && time && time`use-state`;
     var hasTextAncestor = !!(isWeb && isText && componentContext.inText);
-    process.env.NODE_ENV === "development" && time && time(_templateObject5());
+    process.env.NODE_ENV === "development" && time && time`use-context`;
     var isTaggable = !Component || typeof Component == "string", tagProp = props.tag, element = isWeb && isTaggable && tagProp || Component, BaseTextComponent = BaseText || element || "span", BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div"), elementType = isText ? BaseTextComponent : BaseViewComponent;
     animationDriver && isAnimated && (elementType = animationDriver[isText ? "Text" : "View"] || elementType);
     var disableThemeProp = !1, disableTheme = disableThemeProp || isHOC;
-    process.env.NODE_ENV === "development" && time && time(_templateObject6()), props.themeShallow && (curStateRef.themeShallow = !0);
+    process.env.NODE_ENV === "development" && time && time`theme-props`, props.themeShallow && (curStateRef.themeShallow = !0);
     var themeStateProps = {
       componentName: componentName2,
       disable: disableTheme,
@@ -527,8 +252,8 @@ function createComponent(staticConfig) {
     if ("themeInverse" in props && (themeStateProps.inverse = props.themeInverse), "theme" in props && (themeStateProps.name = props.theme), typeof curStateRef.isListeningToTheme == "boolean" && (themeStateProps.shouldUpdate = function() {
       return stateRef.current.isListeningToTheme;
     }), themeStateProps.deopt = willBeAnimated, process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
-      var name = "".concat(componentName2 || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"), type = (hasEnterStyle ? "(hasEnter)" : " ") + (isAnimated ? "(animated)" : " ") + (isReactNative ? "(rnw)" : " ") + (shouldAvoidClasses ? "(shouldAvoidClasses)" : " ") + (state.press || state.pressIn ? "(PRESSED)" : " ") + (state.hover ? "(HOVERED)" : " ") + (state.focus ? "(FOCUSED)" : " ") + ((presenceState == null ? void 0 : presenceState.isPresent) === !1 ? "(EXIT)" : ""), dataIs = propsIn["data-is"] || "", banner = "".concat(internalID, " ").concat(name).concat(dataIs ? " ".concat(dataIs) : "", " ").concat(type);
-      if (console.info("%c ".concat(banner, " (hydrated: ").concat(isHydrated, ") (unmounted: ").concat(state.unmounted, ")"), "background: green; color: white;"), isServer)
+      var name = `${componentName2 || Component?.displayName || Component?.name || "[Unnamed Component]"}`, type = (hasEnterStyle ? "(hasEnter)" : " ") + (isAnimated ? "(animated)" : " ") + (isReactNative ? "(rnw)" : " ") + (shouldAvoidClasses ? "(shouldAvoidClasses)" : " ") + (state.press || state.pressIn ? "(PRESSED)" : " ") + (state.hover ? "(HOVERED)" : " ") + (state.focus ? "(FOCUSED)" : " ") + (presenceState?.isPresent === !1 ? "(EXIT)" : ""), dataIs = propsIn["data-is"] || "", banner = `${internalID} ${name}${dataIs ? ` ${dataIs}` : ""} ${type}`;
+      if (console.info(`%c ${banner} (hydrated: ${isHydrated}) (unmounted: ${state.unmounted})`, "background: green; color: white;"), isServer)
         log({
           noClassNames,
           isAnimated,
@@ -539,7 +264,7 @@ function createComponent(staticConfig) {
       else {
         console.groupEnd();
         var ch = propsIn.children, childLog = typeof ch == "string" ? ch.length > 4 ? ch.slice(0, 4) + "..." : ch : "";
-        childLog.length && (childLog = "(children: ".concat(childLog, ")")), console.groupCollapsed("".concat(childLog, " Props:")), log("props in:", propsIn), log("final props:", props), log({
+        childLog.length && (childLog = `(children: ${childLog})`), console.groupCollapsed(`${childLog} Props:`), log("props in:", propsIn), log("final props:", props), log({
           state,
           staticConfig,
           elementType,
@@ -556,13 +281,13 @@ function createComponent(staticConfig) {
         }), console.groupEnd();
       }
     }
-    process.env.NODE_ENV === "development" && time && time(_templateObject7());
-    var _useThemeWithState = _sliced_to_array(useThemeWithState(themeStateProps), 2), themeState = _useThemeWithState[0], theme = _useThemeWithState[1];
+    process.env.NODE_ENV === "development" && time && time`pre-theme-media`;
+    var [themeState, theme] = useThemeWithState(themeStateProps);
     elementType = Component || elementType;
     var isStringElement = typeof elementType == "string";
-    process.env.NODE_ENV === "development" && time && time(_templateObject8());
+    process.env.NODE_ENV === "development" && time && time`theme`;
     var mediaState = useMedia(stateRef, componentContext, debugProp);
-    setDidGetVariableValue(!1), process.env.NODE_ENV === "development" && time && time(_templateObject9());
+    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 && !supportsCSSVars || isHOC && state.unmounted == !1 && hasAnimationProp ? "value" : "auto"
@@ -579,34 +304,37 @@ function createComponent(staticConfig) {
       var _splitStyles;
       (_splitStyles = splitStyles).style || (_splitStyles.style = {}), splitStyles.style.opacity = 0;
     }
-    process.env.NODE_ENV === "development" && time && time(_templateObject10()), curStateRef.isListeningToTheme = splitStyles.dynamicThemeAccess;
+    process.env.NODE_ENV === "development" && time && time`split-styles`, curStateRef.isListeningToTheme = splitStyles.dynamicThemeAccess;
     var hasRuntimeMediaKeys = splitStyles.hasMedia && splitStyles.hasMedia !== !0, shouldListenForMedia = didGetVariableValue() || hasRuntimeMediaKeys || noClassNames && splitStyles.hasMedia === !0, mediaListeningKeys = hasRuntimeMediaKeys ? splitStyles.hasMedia : null;
     process.env.NODE_ENV === "development" && debugProp && console.info("useMedia() createComponent", shouldListenForMedia, mediaListeningKeys), setMediaShouldUpdate(stateRef, {
       enabled: shouldListenForMedia,
       keys: mediaListeningKeys
     });
-    var viewPropsIn = splitStyles.viewProps, pseudos = splitStyles.pseudos, splitStylesStyle = splitStyles.style, classNames = splitStyles.classNames, space = splitStyles.space, propsWithAnimation = props, asChild = viewPropsIn.asChild, children = viewPropsIn.children, themeShallow = viewPropsIn.themeShallow, _spaceDirection = viewPropsIn.spaceDirection, onPress = viewPropsIn.onPress, onLongPress = viewPropsIn.onLongPress, onPressIn = viewPropsIn.onPressIn, onPressOut = viewPropsIn.onPressOut, onHoverIn = viewPropsIn.onHoverIn, onHoverOut = viewPropsIn.onHoverOut, onMouseUp = viewPropsIn.onMouseUp, onMouseDown = viewPropsIn.onMouseDown, onMouseEnter = viewPropsIn.onMouseEnter, onMouseLeave = viewPropsIn.onMouseLeave, onFocus = viewPropsIn.onFocus, onBlur = viewPropsIn.onBlur, separator = viewPropsIn.separator, _forceStyle = viewPropsIn.forceStyle, onClick = viewPropsIn.onClick, _themeProp = viewPropsIn.theme, nonTamaguiProps = _object_without_properties(viewPropsIn, [
-      "asChild",
-      "children",
-      "themeShallow",
-      "spaceDirection",
-      "onPress",
-      "onLongPress",
-      "onPressIn",
-      "onPressOut",
-      "onHoverIn",
-      "onHoverOut",
-      "onMouseUp",
-      "onMouseDown",
-      "onMouseEnter",
-      "onMouseLeave",
-      "onFocus",
-      "onBlur",
-      "separator",
-      "forceStyle",
-      "onClick",
-      "theme"
-    ]), viewProps = nonTamaguiProps;
+    var { viewProps: viewPropsIn, pseudos, style: splitStylesStyle, classNames, space } = 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
+      forceStyle: _forceStyle,
+      // @ts-ignore  for next/link compat etc
+      onClick,
+      theme: _themeProp,
+      ...nonTamaguiProps
+    } = viewPropsIn, viewProps = nonTamaguiProps;
     !isTaggable && props.forceStyle && (viewProps.forceStyle = props.forceStyle), isHOC && _themeProp && (viewProps.theme = _themeProp), elementType.acceptTagProp && (viewProps.tag = tagProp);
     var animationStyles, shouldUseAnimation = (
       // if it supports css vars we run it on server too to get matching initial style
@@ -625,23 +353,25 @@ function createComponent(staticConfig) {
         staticConfig,
         stateRef
       });
-      (isAnimated || supportsCSSVars) && animations && (animationStyles = animations.style, viewProps.style = animationStyles, animations.className && (viewProps.className = "".concat(viewProps.className || "", " ").concat(animations.className))), process.env.NODE_ENV === "development" && time && time(_templateObject11());
+      (isAnimated || supportsCSSVars) && animations && (animationStyles = animations.style, viewProps.style = animationStyles, animations.className && (viewProps.className = `${viewProps.className || ""} ${animations.className}`)), process.env.NODE_ENV === "development" && time && time`animations`;
     }
     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(_templateObject12()), groupName && (nonTamaguiProps.onLayout = composeEventHandlers(nonTamaguiProps.onLayout, function(e) {
+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`, groupName && (nonTamaguiProps.onLayout = composeEventHandlers(nonTamaguiProps.onLayout, function(e) {
       stateRef.current.group.emit(groupName, {
         layout: e.nativeEvent.layout
       }), !stateRef.current.hasMeasured && props.untilMeasured === "hide" && setState(function(prev) {
-        return _object_spread({}, prev);
+        return {
+          ...prev
+        };
       }), stateRef.current.hasMeasured = !0;
     })), viewProps = ((_hooks_usePropsTransform = hooks.usePropsTransform) === null || _hooks_usePropsTransform === void 0 ? void 0 : _hooks_usePropsTransform.call(hooks, elementType, nonTamaguiProps, stateRef, curStateRef.willHydrate)) || nonTamaguiProps, curStateRef.composedRef || (curStateRef.composedRef = composeRefs(function(x) {
       return stateRef.current.host = x;
     }, forwardedRef, setElementProps)), viewProps.ref = curStateRef.composedRef, 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: ".concat(item, ". A text node cannot be a child of a <View>."));
-    }), process.env.NODE_ENV === "development" && time && time(_templateObject13());
-    var pseudoGroups = splitStyles.pseudoGroups, mediaGroups = splitStyles.mediaGroups, unPress = function() {
+` && console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`);
+    }), process.env.NODE_ENV === "development" && time && time`events-hooks`;
+    var { pseudoGroups, mediaGroups } = splitStyles, unPress = function() {
       return setStateShallow({
         press: !1,
         pressIn: !1
@@ -672,17 +402,21 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           pseudoGroups
         });
         return function() {
-          dispose == null || dispose(), componentSetStates.delete(setState);
+          dispose?.(), componentSetStates.delete(setState);
         };
       }
     }, [
       state.unmounted,
       disabled,
-      pseudoGroups ? Object.keys(_to_consumable_array(pseudoGroups)).join("") : 0,
-      mediaGroups ? Object.keys(_to_consumable_array(mediaGroups)).join("") : 0
+      pseudoGroups ? Object.keys([
+        ...pseudoGroups
+      ]).join("") : 0,
+      mediaGroups ? Object.keys([
+        ...mediaGroups
+      ]).join("") : 0
     ]);
-    var runtimePressStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.pressStyle), runtimeFocusStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.focusStyle), runtimeFocusVisibleStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.focusVisibleStyle), attachFocus = !!(runtimePressStyle || runtimeFocusStyle || runtimeFocusVisibleStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick || pseudos != null && pseudos.focusVisibleStyle), runtimeHoverStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.hoverStyle), needsHoverState = !!(groupName || runtimeHoverStyle || onHoverIn || onHoverOut), attachHover = isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !disabled && !props.asChild && !!(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle), needsPressState = !!(groupName || runtimePressStyle);
-    process.env.NODE_ENV === "development" && time && time(_templateObject14()), process.env.NODE_ENV === "development" && debugProp === "verbose" && log("\u{1FAA9} events()", {
+    var runtimePressStyle = !disabled && noClassNames && pseudos?.pressStyle, runtimeFocusStyle = !disabled && noClassNames && pseudos?.focusStyle, runtimeFocusVisibleStyle = !disabled && noClassNames && pseudos?.focusVisibleStyle, attachFocus = !!(runtimePressStyle || runtimeFocusStyle || runtimeFocusVisibleStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick || pseudos?.focusVisibleStyle), runtimeHoverStyle = !disabled && noClassNames && pseudos?.hoverStyle, needsHoverState = !!(groupName || runtimeHoverStyle || onHoverIn || onHoverOut), attachHover = isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !disabled && !props.asChild && !!(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle), needsPressState = !!(groupName || runtimePressStyle);
+    process.env.NODE_ENV === "development" && time && time`events-setup`, process.env.NODE_ENV === "development" && debugProp === "verbose" && log("\u{1FAA9} events()", {
       runtimeFocusStyle,
       runtimePressStyle,
       runtimeHoverStyle,
@@ -693,52 +427,54 @@ If you meant to do this, you can disable this warning - either change untilMeasu
       shouldAttach,
       needsHoverState
     });
-    var events = shouldAttach ? _object_spread(_object_spread_props(_object_spread({
+    var events = shouldAttach ? {
       onPressOut: attachPress ? function(e) {
-        unPress(), onPressOut == null || onPressOut(e), onMouseUp == null || onMouseUp(e);
-      } : void 0
-    }, (attachHover || attachPress) && {
-      onMouseEnter: function(e) {
-        var next = {};
-        needsHoverState && (next.hover = !0), needsPressState && state.pressIn && (next.press = !0), setStateShallow(next), onHoverIn == null || onHoverIn(e), onMouseEnter == null || onMouseEnter(e);
+        unPress(), onPressOut?.(e), onMouseUp?.(e);
+      } : void 0,
+      ...(attachHover || attachPress) && {
+        onMouseEnter: function(e) {
+          var next = {};
+          needsHoverState && (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 && state.pressIn && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut?.(e), onMouseLeave?.(e);
+        }
       },
-      onMouseLeave: function(e) {
-        var next = {};
-        needsHoverState && (next.hover = !1), needsPressState && state.pressIn && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut == null || onHoverOut(e), onMouseLeave == null || onMouseLeave(e);
-      }
-    }), {
       onPressIn: attachPress ? function(e) {
         (runtimePressStyle || groupName) && setStateShallow({
           press: !0,
           pressIn: !0
-        }), onPressIn == null || onPressIn(e), onMouseDown == null || onMouseDown(e), isWeb && componentSetStates.add(setState);
+        }), onPressIn?.(e), onMouseDown?.(e), isWeb && componentSetStates.add(setState);
       } : void 0,
       onPress: attachPress ? function(e) {
-        unPress(), isWeb && (onClick == null || onClick(e)), onPress == null || onPress(e);
-      } : void 0
-    }), attachPress && onLongPress && {
-      onLongPress: function(e) {
-        unPress(), onLongPress == null || onLongPress(e);
-      }
-    }, attachFocus && {
-      onFocus: function(e) {
-        pseudos != null && pseudos.focusVisibleStyle ? setTimeout(function() {
-          setStateShallow({
-            focus: !0,
-            focusVisible: !!lastInteractionWasKeyboard.value
-          });
-        }, 0) : setStateShallow({
-          focus: !0,
-          focusVisible: !1
-        }), onFocus == null || onFocus(e);
+        unPress(), isWeb && onClick?.(e), onPress?.(e);
+      } : void 0,
+      ...attachPress && onLongPress && {
+        onLongPress: function(e) {
+          unPress(), onLongPress?.(e);
+        }
       },
-      onBlur: function(e) {
-        setStateShallow({
-          focus: !1,
-          focusVisible: !1
-        }), onBlur == null || onBlur(e);
+      ...attachFocus && {
+        onFocus: function(e) {
+          pseudos?.focusVisibleStyle ? setTimeout(function() {
+            setStateShallow({
+              focus: !0,
+              focusVisible: !!lastInteractionWasKeyboard.value
+            });
+          }, 0) : setStateShallow({
+            focus: !0,
+            focusVisible: !1
+          }), onFocus?.(e);
+        },
+        onBlur: function(e) {
+          setStateShallow({
+            focus: !1,
+            focusVisible: !1
+          }), onBlur?.(e);
+        }
       }
-    }) : null;
+    } : null;
     if (events && !asChild) {
       var _viewProps_focusable;
       Object.assign(events, {
@@ -752,13 +488,13 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         minPressDuration: 0
       });
     }
-    process.env.NODE_ENV === "development" && time && time(_templateObject15()), process.env.NODE_ENV === "development" && debugProp === "verbose" && log("events", {
+    process.env.NODE_ENV === "development" && time && time`events`, process.env.NODE_ENV === "development" && debugProp === "verbose" && log("events", {
       events,
       attachHover,
       attachPress
     }), (_hooks_useEvents = hooks.useEvents) === null || _hooks_useEvents === void 0 || _hooks_useEvents.call(hooks, viewProps, events, splitStyles, setStateShallow, staticConfig);
     var direction = props.spaceDirection || "both";
-    process.env.NODE_ENV === "development" && time && time(_templateObject16());
+    process.env.NODE_ENV === "development" && time && time`hooks`;
     var content = !children || asChild ? children : spacedChildren({
       separator,
       children,
@@ -775,37 +511,42 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           onPress,
           onLongPress
         });
-    process.env.NODE_ENV === "development" && time && time(_templateObject17());
+    process.env.NODE_ENV === "development" && time && time`spaced-as-child`;
     var useChildrenResult;
     hooks.useChildren && (useChildrenResult = hooks.useChildren(elementType, content, viewProps, events, staticConfig)), useChildrenResult ? content = useChildrenResult : content = /* @__PURE__ */ React.createElement(elementType, viewProps, content);
     var ResetPresence = config == null || (_config_animations = config.animations) === null || _config_animations === void 0 ? void 0 : _config_animations.ResetPresence;
     ResetPresence && willBeAnimated && (hasEnterStyle || presenceState) && content && typeof content != "string" && (content = /* @__PURE__ */ _jsx(ResetPresence, {
       children: content
-    })), process.env.NODE_ENV === "development" && time && time(_templateObject18());
+    })), process.env.NODE_ENV === "development" && time && time`create-element`;
     var groupState = curStateRef.group, subGroupContext = React.useMemo(function() {
       var _splitStyles_style, _splitStyles_style1;
       if (!(!groupState || !groupName))
-        return groupState.listeners.clear(), _object_spread_props(_object_spread({}, componentContext.groups), {
+        return groupState.listeners.clear(), {
+          ...componentContext.groups,
           // change reference so as we mutate it doesn't affect siblings etc
-          state: _object_spread_props(_object_spread({}, componentContext.groups.state), _define_property({}, groupName, {
-            pseudo: defaultComponentStateMounted,
-            // capture just initial width and height if they exist
-            // will have top, left, width, height (not x, y)
-            layout: {
-              width: fromPx((_splitStyles_style = splitStyles.style) === null || _splitStyles_style === void 0 ? void 0 : _splitStyles_style.width),
-              height: fromPx((_splitStyles_style1 = splitStyles.style) === null || _splitStyles_style1 === void 0 ? void 0 : _splitStyles_style1.height)
+          state: {
+            ...componentContext.groups.state,
+            [groupName]: {
+              pseudo: defaultComponentStateMounted,
+              // capture just initial width and height if they exist
+              // will have top, left, width, height (not x, y)
+              layout: {
+                width: fromPx((_splitStyles_style = splitStyles.style) === null || _splitStyles_style === void 0 ? void 0 : _splitStyles_style.width),
+                height: fromPx((_splitStyles_style1 = splitStyles.style) === null || _splitStyles_style1 === void 0 ? void 0 : _splitStyles_style1.height)
+              }
             }
-          })),
+          },
           emit: groupState.emit,
           subscribe: groupState.subscribe
-        });
+        };
     }, [
       groupName
     ]);
-    if (groupName && subGroupContext && (content = /* @__PURE__ */ _jsx(ComponentContext.Provider, _object_spread_props(_object_spread({}, componentContext), {
+    if (groupName && subGroupContext && (content = /* @__PURE__ */ _jsx(ComponentContext.Provider, {
+      ...componentContext,
       groups: subGroupContext,
       children: content
-    }))), process.env.NODE_ENV === "development" && time && time(_templateObject19()), content = disableTheme ? content : getThemedChildren(themeState, content, themeStateProps, !1, stateRef), process.env.NODE_ENV === "development" && time && time(_templateObject20()), process.env.NODE_ENV === "development" && props.debug === "visualize" && (content = /* @__PURE__ */ _jsx(ThemeDebug, {
+    })), process.env.NODE_ENV === "development" && time && time`group-context`, content = disableTheme ? content : getThemedChildren(themeState, content, themeStateProps, !1, stateRef), process.env.NODE_ENV === "development" && time && time`themed-children`, process.env.NODE_ENV === "development" && props.debug === "visualize" && (content = /* @__PURE__ */ _jsx(ThemeDebug, {
       themeState,
       themeProps: props,
       children: content
@@ -821,14 +562,16 @@ If you meant to do this, you can disable this warning - either change untilMeasu
     }
     if (overriddenContextProps) {
       var Provider = staticConfig.context.Provider;
-      content = /* @__PURE__ */ _jsx(Provider, _object_spread_props(_object_spread({}, contextValue, overriddenContextProps), {
+      content = /* @__PURE__ */ _jsx(Provider, {
+        ...contextValue,
+        ...overriddenContextProps,
         children: content
-      }));
+      });
     }
     if (process.env.TAMAGUI_REACT_19 && !1)
       var rulesToInsert, keys;
     if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
-      var element1 = typeof elementType == "string" ? elementType : "Component", title = "render <".concat(element1, " /> (").concat(internalID, ") with props");
+      var element1 = typeof elementType == "string" ? elementType : "Component", title = `render <${element1} /> (${internalID}) with props`;
       if (isWeb) {
         console.groupCollapsed(title);
         try {
@@ -871,7 +614,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
       if (debugProp === "break")
         debugger;
     }
-    return process.env.NODE_ENV === "development" && time && (time(_templateObject21()), globalThis.willPrint || (globalThis.willPrint = !0, setTimeout(function() {
+    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;
   });
@@ -879,18 +622,20 @@ If you meant to do this, you can disable this warning - either change untilMeasu
   var res = component;
   (process.env.TAMAGUI_FORCE_MEMO || staticConfig.memo) && (res = /* @__PURE__ */ React.memo(res)), res.staticConfig = staticConfig;
   function extendStyledConfig(extended) {
-    return _object_spread_props(_object_spread({}, staticConfig, extended), {
+    return {
+      ...staticConfig,
+      ...extended,
       neverFlatten: !0,
       isHOC: !0,
       isStyledHOC: !1
-    });
+    };
   }
   function extractable(Component2, extended) {
     return Component2.staticConfig = extendStyledConfig(extended), Component2.styleable = styleable, Component2;
   }
   function styleable(Component2, options) {
-    var _Component_render, isForwardedRefAlready = ((_Component_render = Component2.render) === null || _Component_render === void 0 ? void 0 : _Component_render.length) === 2, out = isForwardedRefAlready ? Component2 : /* @__PURE__ */ React.forwardRef(Component2), extendedConfig = extendStyledConfig(options == null ? void 0 : options.staticConfig);
-    return out = options != null && options.disableTheme ? out : themeable(out, extendedConfig), process.env.TAMAGUI_MEMOIZE_STYLEABLE && (out = /* @__PURE__ */ React.memo(out)), out.staticConfig = extendedConfig, out.styleable = styleable, out;
+    var _Component_render, isForwardedRefAlready = ((_Component_render = Component2.render) === null || _Component_render === void 0 ? void 0 : _Component_render.length) === 2, out = isForwardedRefAlready ? Component2 : /* @__PURE__ */ React.forwardRef(Component2), extendedConfig = extendStyledConfig(options?.staticConfig);
+    return out = options?.disableTheme ? out : themeable(out, extendedConfig), process.env.TAMAGUI_MEMOIZE_STYLEABLE && (out = /* @__PURE__ */ React.memo(out)), out.staticConfig = extendedConfig, out.styleable = styleable, out;
   }
   return res.extractable = extractable, res.styleable = styleable, res;
 }
@@ -899,7 +644,7 @@ function Unspaced(props) {
 }
 Unspaced.isUnspaced = !0;
 var getSpacerSize = function(size, param) {
-  var tokens = param.tokens;
+  var { tokens } = param;
   size = size === !0 ? "$true" : size;
   var _tokens_space_size, sizePx = (_tokens_space_size = tokens.space[size]) !== null && _tokens_space_size !== void 0 ? _tokens_space_size : size;
   return {
@@ -913,12 +658,13 @@ var getSpacerSize = function(size, param) {
   memo: !0,
   componentName: "Spacer",
   validStyles,
-  defaultProps: _object_spread_props(_object_spread({}, stackDefaultStyles), {
+  defaultProps: {
+    ...stackDefaultStyles,
     // avoid nesting issues
     tag: "span",
     size: !0,
     pointerEvents: "none"
-  }),
+  },
   variants: {
     size: {
       "...": getSpacerSize
@@ -942,7 +688,7 @@ var getSpacerSize = function(size, param) {
   }
 });
 function spacedChildren(props) {
-  var _childrenList__type, _childrenList_, isZStack = props.isZStack, children = props.children, space = props.space, direction = props.direction, spaceFlex = props.spaceFlex, separator = props.separator, ensureKeys = props.ensureKeys, hasSpace = !!(space || spaceFlex), hasSeparator = separator != null, areChildrenArray = Array.isArray(children);
+  var _childrenList__type, _childrenList_, { isZStack, children, space, direction, spaceFlex, separator, ensureKeys } = props, hasSpace = !!(space || spaceFlex), hasSeparator = separator != null, areChildrenArray = Array.isArray(children);
   if (!ensureKeys && !(hasSpace || hasSeparator || isZStack))
     return children;
   var childrenList = areChildrenArray ? children : React.Children.toArray(children), len = childrenList.length;
@@ -951,7 +697,7 @@ function spacedChildren(props) {
   var final = [], _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
   try {
     for (var _iterator = childrenList.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
-      var _step_value = _sliced_to_array(_step.value, 2), index = _step_value[0], child = _step_value[1], _child_type, isEmpty = child == null || Array.isArray(child) && child.length === 0;
+      var [index, child] = _step.value, _child_type, isEmpty = child == null || Array.isArray(child) && child.length === 0;
       if (!isEmpty && /* @__PURE__ */ React.isValidElement(child) && (!((_child_type = child.type) === null || _child_type === void 0) && _child_type.shouldForwardSpace) && (child = /* @__PURE__ */ React.cloneElement(child, {
         space,
         spaceFlex,
@@ -961,22 +707,22 @@ function spacedChildren(props) {
         children: isZStack ? /* @__PURE__ */ _jsx(AbsoluteFill, {
           children: child
         }) : child
-      }, "".concat(index, "0t"))), !(isUnspaced(child) && index === 0) && !isZStack) {
+      }, `${index}0t`)), !(isUnspaced(child) && index === 0) && !isZStack) {
         var next = childrenList[index + 1];
         next && !isEmpty && !isUnspaced(next) && (separator ? (hasSpace && final.push(createSpacer({
-          key: "_".concat(index, "_00t"),
+          key: `_${index}_00t`,
           direction,
           space,
           spaceFlex
         })), final.push(/* @__PURE__ */ _jsx(React.Fragment, {
           children: separator
-        }, "".concat(index, "03t"))), hasSpace && final.push(createSpacer({
-          key: "_".concat(index, "01t"),
+        }, `${index}03t`)), hasSpace && final.push(createSpacer({
+          key: `_${index}01t`,
           direction,
           space,
           spaceFlex
         }))) : final.push(createSpacer({
-          key: "_".concat(index, "02t"),
+          key: `_${index}02t`,
           direction,
           space,
           spaceFlex
@@ -996,20 +742,22 @@ function spacedChildren(props) {
   return process.env.NODE_ENV === "development" && props.debug && log("  Spaced children", final, props), final;
 }
 function createSpacer(param) {
-  var key = param.key, direction = param.direction, space = param.space, spaceFlex = param.spaceFlex;
-  return /* @__PURE__ */ _jsx(Spacer, _object_spread({
+  var { key, direction, space, spaceFlex } = param;
+  return /* @__PURE__ */ _jsx(Spacer, {
     size: space,
-    direction
-  }, typeof spaceFlex < "u" && {
-    flex: spaceFlex === !0 ? 1 : spaceFlex === !1 ? 0 : spaceFlex
-  }), key);
+    direction,
+    ...typeof spaceFlex < "u" && {
+      flex: spaceFlex === !0 ? 1 : spaceFlex === !1 ? 0 : spaceFlex
+    }
+  }, key);
 }
 function isUnspaced(child) {
-  var t = child == null ? void 0 : child.type;
-  return (t == null ? void 0 : t.isVisuallyHidden) || (t == null ? void 0 : t.isUnspaced);
+  var t = child?.type;
+  return t?.isVisuallyHidden || t?.isUnspaced;
 }
 var AbsoluteFill = createComponent({
-  defaultProps: _object_spread_props(_object_spread({}, stackDefaultStyles), {
+  defaultProps: {
+    ...stackDefaultStyles,
     flexDirection: "column",
     position: "absolute",
     top: 0,
@@ -1017,12 +765,12 @@ var AbsoluteFill = createComponent({
     bottom: 0,
     left: 0,
     pointerEvents: "box-none"
-  })
+  }
 });
 function hasAnimatedStyleValue(style) {
   return Object.keys(style).some(function(k) {
     var val = style[k];
-    return val && (typeof val > "u" ? "undefined" : _type_of(val)) === "object" && "_animation" in val;
+    return val && typeof val == "object" && "_animation" in val;
   });
 }
 var fromPx = function(val) {
@@ -1031,25 +779,29 @@ var fromPx = function(val) {
   var _props_accessibilityState;
   return props.disabled || ((_props_accessibilityState = props.accessibilityState) === null || _props_accessibilityState === void 0 ? void 0 : _props_accessibilityState.disabled) || props["aria-disabled"] || props.accessibilityDisabled || !1;
 }, subscribeToContextGroup = function(param) {
-  var _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? !1 : _param_disabled, setStateShallow = param.setStateShallow, pseudoGroups = param.pseudoGroups, mediaGroups = param.mediaGroups, componentContext = param.componentContext, state = param.state;
+  var { disabled = !1, setStateShallow, pseudoGroups, mediaGroups, componentContext, state } = param;
   if (pseudoGroups || mediaGroups) {
     var _componentContext_groups_subscribe, _componentContext_groups, current = {
       pseudo: {},
       media: {}
     };
     return process.env.NODE_ENV === "development" && !componentContext.groups && console.debug("No context group found"), (_componentContext_groups = componentContext.groups) === null || _componentContext_groups === void 0 || (_componentContext_groups_subscribe = _componentContext_groups.subscribe) === null || _componentContext_groups_subscribe === void 0 ? void 0 : _componentContext_groups_subscribe.call(_componentContext_groups, function(name, param2) {
-      var layout = param2.layout, pseudo = param2.pseudo, persist = function() {
-        var group = _object_spread_props(_object_spread({}, state.group), _define_property({}, name, current));
-        setStateShallow({
-          group
-        });
-      };
-      if (pseudo && (pseudoGroups != null && pseudoGroups.has(String(name))))
+      var { layout, pseudo } = param2;
+      if (pseudo && pseudoGroups?.has(String(name)))
         Object.assign(current.pseudo, pseudo), persist();
       else if (layout && mediaGroups) {
         var mediaState = getMediaState(mediaGroups, layout), next = mergeIfNotShallowEqual(current.media, mediaState);
         next !== current.media && (Object.assign(current.media, next), persist());
       }
+      function persist() {
+        var group = {
+          ...state.group,
+          [name]: current
+        };
+        setStateShallow({
+          group
+        });
+      }
     });
   }
 };