@tamagui/web 1.89.26 → 1.89.27-1708112217600

package/dist/cjs/createComponent.native.js

@@ -30,162 +30,459 @@ __export(createComponent_exports, {
   spacedChildren: () => spacedChildren
 });
 module.exports = __toCommonJS(createComponent_exports);
-var import_compose_refs = require("@tamagui/compose-refs"), import_constants = require("@tamagui/constants"), import_helpers = require("@tamagui/helpers"), import_use_did_finish_ssr = require("@tamagui/use-did-finish-ssr"), import_react = __toESM(require("react")), import_config = require("./config"), import_constants2 = require("./constants/constants"), import_ComponentContext = require("./contexts/ComponentContext"), import_createVariable = require("./createVariable"), import_defaultComponentState = require("./defaultComponentState"), import_createShallowSetState = require("./helpers/createShallowSetState"), import_getSplitStyles = require("./helpers/getSplitStyles"), import_isObj = require("./helpers/isObj"), import_log = require("./helpers/log"), import_mergeProps = require("./helpers/mergeProps"), import_themeable = require("./helpers/themeable"), import_useMedia = require("./hooks/useMedia"), import_useTheme = require("./hooks/useTheme"), import_setupHooks = require("./setupHooks"), import_Slot = require("./views/Slot"), import_Theme = require("./views/Theme"), import_ThemeDebug = require("./views/ThemeDebug"), import_jsx_runtime = require("react/jsx-runtime");
-let tamaguiConfig, time, debugKeyListeners, startVisualizer;
-const mouseUps = /* @__PURE__ */ new Set();
+var import_compose_refs = require("@tamagui/compose-refs"), import_constants = require("@tamagui/constants"), import_helpers = require("@tamagui/helpers"), import_use_did_finish_ssr = require("@tamagui/use-did-finish-ssr"), import_react = __toESM(require("react")), import_config = require("./config"), import_constants2 = require("./constants/constants"), import_ComponentContext = require("./contexts/ComponentContext"), import_createVariable = require("./createVariable"), import_defaultComponentState = require("./defaultComponentState"), import_createShallowSetState = require("./helpers/createShallowSetState"), import_getSplitStyles = require("./helpers/getSplitStyles"), import_isObj = require("./helpers/isObj"), import_log = require("./helpers/log"), import_mergeProps = require("./helpers/mergeProps"), import_themeable = require("./helpers/themeable"), import_useMedia = require("./hooks/useMedia"), import_useTheme = require("./hooks/useTheme"), import_setupHooks = require("./setupHooks"), import_Slot = require("./views/Slot"), import_Theme = require("./views/Theme"), import_ThemeDebug = require("./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 _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([
+    "start (ignore)"
+  ]);
+  return _templateObject = function() {
+    return data;
+  }, data;
+}
+function _templateObject1() {
+  var data = _tagged_template_literal([
+    "did-finish-ssr"
+  ]);
+  return _templateObject1 = function() {
+    return data;
+  }, data;
+}
+function _templateObject2() {
+  var data = _tagged_template_literal([
+    "stateref"
+  ]);
+  return _templateObject2 = function() {
+    return data;
+  }, data;
+}
+function _templateObject3() {
+  var data = _tagged_template_literal([
+    "pre-use-state"
+  ]);
+  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, mouseUps = /* @__PURE__ */ new Set();
 if (typeof document < "u") {
-  const cancelTouches = () => {
-    mouseUps.forEach((x) => x()), mouseUps.clear();
+  var cancelTouches = function() {
+    mouseUps.forEach(function(x) {
+      return x();
+    }), mouseUps.clear();
   };
-  addEventListener("mouseup", cancelTouches), addEventListener("touchend", cancelTouches), addEventListener("touchcancel", cancelTouches), process.env.NODE_ENV === "development" && (startVisualizer = () => {
-    var _a;
-    const devVisualizerConfig = (_a = import_config.devConfig) == null ? void 0 : _a.visualizer;
+  addEventListener("mouseup", cancelTouches), addEventListener("touchend", cancelTouches), addEventListener("touchcancel", cancelTouches), process.env.NODE_ENV === "development" && (startVisualizer = function() {
+    var devVisualizerConfig = import_config.devConfig === null || import_config.devConfig === void 0 ? void 0 : import_config.devConfig.visualizer;
     if (devVisualizerConfig) {
       debugKeyListeners = /* @__PURE__ */ new Set();
-      let tm, isShowing = !1;
-      const options = {
+      var tm, isShowing = !1, options = _object_spread({
         key: "Alt",
-        delay: 800,
-        ...typeof devVisualizerConfig == "object" ? devVisualizerConfig : {}
-      };
-      document.addEventListener("blur", () => {
+        delay: 800
+      }, typeof devVisualizerConfig == "object" ? devVisualizerConfig : {});
+      document.addEventListener("blur", function() {
         clearTimeout(tm);
-      }), document.addEventListener("keydown", ({ key, defaultPrevented }) => {
-        defaultPrevented || (clearTimeout(tm), key === options.key && (tm = setTimeout(() => {
-          isShowing = !0, debugKeyListeners == null || debugKeyListeners.forEach((l) => l(!0));
+      }), document.addEventListener("keydown", function(param) {
+        var key = param.key, defaultPrevented = param.defaultPrevented;
+        defaultPrevented || (clearTimeout(tm), key === options.key && (tm = setTimeout(function() {
+          isShowing = !0, debugKeyListeners == null || debugKeyListeners.forEach(function(l) {
+            return l(!0);
+          });
         }, options.delay)));
-      }), document.addEventListener("keyup", ({ key, defaultPrevented }) => {
-        defaultPrevented || key === options.key && (clearTimeout(tm), isShowing && (debugKeyListeners == null || debugKeyListeners.forEach((l) => l(!1))));
+      }), 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) {
+          return l(!1);
+        })));
       });
     }
   });
 }
-let BaseText, BaseView, hasSetupBaseViews = !1;
+var BaseText, BaseView, hasSetupBaseViews = !1;
 function createComponent(staticConfig) {
-  var _a;
-  const { componentName } = staticConfig;
-  let config = null, defaultProps = staticConfig.defaultProps;
-  (0, import_config.onConfiguredOnce)((conf) => {
-    var _a2;
+  var _staticConfig_defaultProps, componentName = staticConfig.componentName, config = null, defaultProps = staticConfig.defaultProps;
+  (0, import_config.onConfiguredOnce)(function(conf) {
     if (config = conf, componentName) {
-      const defaultForComponent = (_a2 = conf.defaultProps) == null ? void 0 : _a2[componentName];
-      defaultForComponent && (defaultProps = { ...defaultForComponent, ...defaultProps });
+      var _conf_defaultProps, defaultForComponent = (_conf_defaultProps = conf.defaultProps) === null || _conf_defaultProps === void 0 ? void 0 : _conf_defaultProps[componentName];
+      defaultForComponent && (defaultProps = _object_spread({}, defaultForComponent, defaultProps));
     }
   });
-  const {
-    Component,
-    isText,
-    isInput,
-    isZStack,
-    isHOC,
-    validStyles: validStyles2 = {},
-    variants = {}
-  } = staticConfig;
-  process.env.NODE_ENV === "development" && ((_a = staticConfig.defaultProps) != null && _a.debug) && process.env.IS_STATIC !== "is_static" && (0, import_log.log)(`\u{1F41B} [${componentName || "Component"}]`, {
+  var Component = staticConfig.Component, isText = staticConfig.isText, isInput = staticConfig.isInput, 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" && (0, import_log.log)("\u{1F41B} [".concat(componentName || "Component", "]"), {
     staticConfig,
     defaultProps,
     defaultPropsKeyOrder: defaultProps ? Object.keys(defaultProps) : []
   });
-  const component = (0, import_react.forwardRef)((propsIn, forwardedRef) => {
-    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
-    const internalID = process.env.NODE_ENV === "development" ? (0, import_react.useId)() : "";
+  var component = /* @__PURE__ */ (0, import_react.forwardRef)(function(propsIn, forwardedRef) {
+    var _animationsConfig_usePresence, _props_accessibilityState, _themeState_state, _props_accessibilityState1, _hooks_usePropsTransform, _hooks_useEvents, _config_animations, internalID = process.env.NODE_ENV === "development" ? (0, import_react.useId)() : "";
     if (process.env.NODE_ENV === "development" && startVisualizer && (startVisualizer(), startVisualizer = void 0), !hasSetupBaseViews) {
+      var _hooks_getBaseViews;
       hasSetupBaseViews = !0;
-      const baseViews = (_b = (_a2 = import_setupHooks.hooks).getBaseViews) == null ? void 0 : _b.call(_a2);
+      var baseViews = (_hooks_getBaseViews = import_setupHooks.hooks.getBaseViews) === null || _hooks_getBaseViews === void 0 ? void 0 : _hooks_getBaseViews.call(import_setupHooks.hooks);
       baseViews && (BaseText = baseViews.Text, BaseView = baseViews.View);
     }
-    process.env.NODE_ENV === "test" && propsIn["data-test-renders"] && ((_c = propsIn["data-test-renders"]).current ?? (_c.current = 0), propsIn["data-test-renders"].current += 1);
-    const componentContext = (0, import_react.useContext)(import_ComponentContext.ComponentContext);
-    let styledContextProps, overriddenContextProps, contextValue;
-    const { context } = staticConfig;
+    if (process.env.NODE_ENV === "test" && propsIn["data-test-renders"]) {
+      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 = (0, import_react.useContext)(import_ComponentContext.ComponentContext), styledContextProps, overriddenContextProps, contextValue, context = staticConfig.context;
     if (context) {
       contextValue = (0, import_react.useContext)(context);
-      const { inverseShorthands } = (0, import_config.getConfig)();
-      for (const key in context.props) {
-        const propVal = (
-          // because its after default props but before props this annoying amount of checks
-          propsIn[key] ?? propsIn[inverseShorthands[key]] ?? (defaultProps == null ? void 0 : defaultProps[key]) ?? (defaultProps == null ? void 0 : defaultProps[inverseShorthands[key]])
-        );
-        propVal === void 0 ? contextValue && (key in validStyles2 || key in variants) && (styledContextProps || (styledContextProps = {}), styledContextProps[key] = contextValue[key]) : (overriddenContextProps || (overriddenContextProps = {}), overriddenContextProps[key] = propVal);
+      var inverseShorthands = (0, import_config.getConfig)().inverseShorthands;
+      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]];
+        if (propVal === void 0) {
+          if (contextValue) {
+            var isValidValue = key in _$validStyles || key in variants;
+            isValidValue && (styledContextProps || (styledContextProps = {}), styledContextProps[key] = contextValue[key]);
+          }
+        } else
+          overriddenContextProps || (overriddenContextProps = {}), overriddenContextProps[key] = propVal;
       }
     }
-    const curDefaultProps = styledContextProps ? { ...defaultProps, ...styledContextProps } : defaultProps;
-    let props = propsIn;
+    var curDefaultProps = styledContextProps ? _object_spread({}, defaultProps, styledContextProps) : defaultProps, props = propsIn;
     curDefaultProps && (props = (0, import_mergeProps.mergeProps)(curDefaultProps, propsIn));
-    const debugProp = props.debug, componentName2 = props.componentName || staticConfig.componentName;
-    process.env.NODE_ENV === "development" && import_constants.isClient && (0, import_react.useEffect)(() => {
-      let overlay = null;
-      const debugVisualizerHandler = (show = !1) => {
-        const node = curState.host;
+    var debugProp = props.debug, componentName2 = props.componentName || staticConfig.componentName;
+    if (process.env.NODE_ENV === "development" && import_constants.isClient && (0, import_react.useEffect)(function() {
+      var overlay = null, debugVisualizerHandler = function() {
+        var show = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1, node = curState.host;
         if (node)
           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";
-            const 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 = `${componentName2 || ""} ${dataAt} ${dataIn}`.trim(), overlay.appendChild(tooltip), node.appendChild(overlay);
+            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);
           } else
             overlay && node.removeChild(overlay);
       };
-      return debugKeyListeners || (debugKeyListeners = /* @__PURE__ */ new Set()), debugKeyListeners.add(debugVisualizerHandler), () => {
+      return debugKeyListeners || (debugKeyListeners = /* @__PURE__ */ new Set()), debugKeyListeners.add(debugVisualizerHandler), function() {
         debugKeyListeners == null || debugKeyListeners.delete(debugVisualizerHandler);
       };
-    }, [componentName2]), !process.env.TAMAGUI_IS_CORE_NODE && process.env.NODE_ENV === "development" && debugProp === "profile" && !time && (time = require("@tamagui/timer").timer().start()), process.env.NODE_ENV === "development" && time && time`start (ignore)`, process.env.NODE_ENV === "development" && time && time`did-finish-ssr`;
-    const stateRef = (0, import_react.useRef)({});
-    process.env.NODE_ENV === "development" && time && time`stateref`;
-    const animationsConfig = componentContext.animationDriver, useAnimations = animationsConfig == null ? void 0 : animationsConfig.useAnimations, hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationsConfig == null ? void 0 : animationsConfig.supportsCSSVars, curState = stateRef.current, willBeAnimatedClient = !!(!!(hasAnimationProp && !isHOC && useAnimations) || curState.hasAnimated), willBeAnimated = !import_constants.isServer && willBeAnimatedClient;
+    }, [
+      componentName2
+    ]), !process.env.TAMAGUI_IS_CORE_NODE && process.env.NODE_ENV === "development" && debugProp === "profile" && !time) {
+      var timer = require("@tamagui/timer").timer();
+      time = timer.start();
+    }
+    process.env.NODE_ENV === "development" && time && time(_templateObject()), process.env.NODE_ENV === "development" && time && time(_templateObject1());
+    var stateRef = (0, import_react.useRef)({});
+    process.env.NODE_ENV === "development" && time && time(_templateObject2());
+    var animationsConfig = componentContext.animationDriver, useAnimations = animationsConfig == null ? void 0 : animationsConfig.useAnimations, hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationsConfig == null ? void 0 : animationsConfig.supportsCSSVars, curState = stateRef.current, willBeAnimatedClient = function() {
+      var next = !!(hasAnimationProp && !isHOC && useAnimations);
+      return !!(next || curState.hasAnimated);
+    }(), willBeAnimated = !import_constants.isServer && willBeAnimatedClient;
     willBeAnimated && !curState.hasAnimated && (curState.hasAnimated = !0);
-    const isHydrated = config != null && config.disableSSR ? !0 : (0, import_use_did_finish_ssr.useDidFinishSSR)(), presence = willBeAnimated && ((_d = animationsConfig == null ? void 0 : animationsConfig.usePresence) == null ? void 0 : _d.call(animationsConfig)) || 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 && (animationsConfig == null ? void 0 : animationsConfig.isReactNative), isReactNative = staticConfig.isReactNative;
-    let isAnimated = willBeAnimated;
-    !isReactNative && hasRNAnimation && !isHOC && !isHydrated && (isAnimated = !1, curState.willHydrate = !0), process.env.NODE_ENV === "development" && time && time`pre-use-state`;
-    const hasEnterState = hasEnterStyle || isEntering, needsToMount = !isHydrated || !curState.host, initialState = hasEnterState ? needsToMount ? import_defaultComponentState.defaultComponentStateShouldEnter : import_defaultComponentState.defaultComponentState : import_defaultComponentState.defaultComponentStateMounted, states = (0, import_react.useState)(initialState), state = props.forceStyle ? { ...states[0], [props.forceStyle]: !0 } : states[0], setState = states[1];
-    let setStateShallow = (0, import_createShallowSetState.createShallowSetState)(setState, debugProp);
+    var isHydrated = config != null && config.disableSSR ? !0 : (0, import_use_did_finish_ssr.useDidFinishSSR)(), presence = willBeAnimated && (animationsConfig == null || (_animationsConfig_usePresence = animationsConfig.usePresence) === null || _animationsConfig_usePresence === void 0 ? void 0 : _animationsConfig_usePresence.call(animationsConfig)) || 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 && (animationsConfig == null ? void 0 : animationsConfig.isReactNative), isReactNative = staticConfig.isReactNative, isAnimated = willBeAnimated;
+    !isReactNative && hasRNAnimation && !isHOC && !isHydrated && (isAnimated = !1, curState.willHydrate = !0), process.env.NODE_ENV === "development" && time && time(_templateObject3());
+    var hasEnterState = hasEnterStyle || isEntering, needsToMount = !isHydrated || !curState.host, initialState = hasEnterState ? needsToMount ? import_defaultComponentState.defaultComponentStateShouldEnter : import_defaultComponentState.defaultComponentState : import_defaultComponentState.defaultComponentStateMounted, states = (0, import_react.useState)(initialState), state = props.forceStyle ? _object_spread_props(_object_spread({}, states[0]), _define_property({}, props.forceStyle, !0)) : states[0], setState = states[1], setStateShallow = (0, import_createShallowSetState.createShallowSetState)(setState, debugProp);
     if (isHydrated && state.unmounted === "should-enter" && (state.unmounted = !0), presenceState && isAnimated && isHydrated && staticConfig.variants) {
-      process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`has presenceState ${JSON.stringify(presenceState)}`);
-      const { enterVariant, exitVariant, enterExitVariant, custom } = presenceState;
+      process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn("has presenceState ".concat(JSON.stringify(presenceState)));
+      var enterVariant = presenceState.enterVariant, exitVariant = presenceState.exitVariant, enterExitVariant = presenceState.enterExitVariant, custom = presenceState.custom;
       (0, import_isObj.isObj)(custom) && Object.assign(props, custom);
-      const exv = exitVariant ?? enterExitVariant, env = enterVariant ?? enterExitVariant;
-      state.unmounted && env && staticConfig.variants[env] ? (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence ENTER "${env}"`), props[env] = !0) : isExiting && exv && (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence EXIT "${exv}"`), props[exv] = exitVariant !== enterExitVariant);
+      var exv = exitVariant ?? enterExitVariant, env = enterVariant ?? enterExitVariant;
+      state.unmounted && env && staticConfig.variants[env] ? (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn('Animating presence ENTER "'.concat(env, '"')), props[env] = !0) : isExiting && exv && (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn('Animating presence EXIT "'.concat(exv, '"')), props[exv] = exitVariant !== enterExitVariant);
     }
-    const shouldAvoidClasses = !!(!import_constants.isWeb || isAnimated && !supportsCSSVars || !staticConfig.acceptsClassName || // on server for SSR and animation compat added the && isHydrated but perhaps we want
+    var shouldAvoidClasses = !!(!import_constants.isWeb || isAnimated && !supportsCSSVars || !staticConfig.acceptsClassName || // on server for SSR and animation compat added the && isHydrated but perhaps we want
     // disableClassName="until-hydrated" to be more straightforward
     // see issue if not, Button sets disableClassName to true <Button animation="" /> with
     // the react-native driver errors because it tries to animate var(--color) to rbga(..)
     propsIn.disableClassName && isHydrated), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo, groupName = props.group;
     if (groupName && !curState.group) {
-      const listeners = /* @__PURE__ */ new Set();
+      var listeners = /* @__PURE__ */ new Set();
       curState.group = {
         listeners,
-        emit(name, state2) {
-          listeners.forEach((l) => l(name, state2));
+        emit: function(name2, state2) {
+          listeners.forEach(function(l) {
+            return l(name2, state2);
+          });
         },
-        subscribe(cb) {
-          return listeners.add(cb), () => {
+        subscribe: function(cb) {
+          return listeners.add(cb), function() {
             listeners.delete(cb);
           };
         }
       };
     }
     if (groupName) {
-      const groupContextState = componentContext.groups.state, og = setStateShallow;
-      setStateShallow = (state2) => {
+      var groupContextState = componentContext.groups.state, og = setStateShallow;
+      setStateShallow = function(state2) {
         og(state2), curState.group.emit(groupName, {
           pseudo: state2
         });
-        const next = {
-          ...groupContextState[groupName],
-          ...state2
-        };
+        var next = _object_spread({}, groupContextState[groupName], state2);
         groupContextState[groupName] = next;
       };
     }
-    process.env.NODE_ENV === "development" && time && time`use-state`;
-    const hasTextAncestor = !!(import_constants.isWeb && isText && componentContext.inText), isDisabled = props.disabled ?? ((_e = props.accessibilityState) == null ? void 0 : _e.disabled);
-    process.env.NODE_ENV === "development" && time && time`use-context`;
-    const element = import_constants.isWeb && (!Component || typeof Component == "string") && props.tag || Component;
-    let elementType = isText ? BaseText || element || "span" : BaseView || element || (hasTextAncestor ? "span" : "div");
+    process.env.NODE_ENV === "development" && time && time(_templateObject4());
+    var hasTextAncestor = !!(import_constants.isWeb && isText && componentContext.inText), _props_disabled, isDisabled = (_props_disabled = props.disabled) !== null && _props_disabled !== void 0 ? _props_disabled : (_props_accessibilityState = props.accessibilityState) === null || _props_accessibilityState === void 0 ? void 0 : _props_accessibilityState.disabled;
+    process.env.NODE_ENV === "development" && time && time(_templateObject5());
+    var isTaggable = !Component || typeof Component == "string", element = import_constants.isWeb && isTaggable && props.tag || Component, BaseTextComponent = BaseText || element || "span", BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div"), elementType = isText ? BaseTextComponent : BaseViewComponent;
     animationsConfig && isAnimated && (elementType = animationsConfig[isText ? "Text" : "View"] || elementType);
-    const disableTheme = !1 || isHOC;
-    process.env.NODE_ENV === "development" && time && time`theme-props`, props.themeShallow && (curState.themeShallow = !0);
-    const themeStateProps = {
+    var disableThemeProp = !1, disableTheme = disableThemeProp || isHOC;
+    process.env.NODE_ENV === "development" && time && time(_templateObject6()), props.themeShallow && (curState.themeShallow = !0);
+    var themeStateProps = {
       name: props.theme,
       componentName: componentName2,
       disable: disableTheme,
@@ -193,28 +490,46 @@ function createComponent(staticConfig) {
       inverse: props.themeInverse,
       debug: debugProp
     };
-    if (typeof curState.isListeningToTheme == "boolean" && (themeStateProps.shouldUpdate = () => stateRef.current.isListeningToTheme), themeStateProps.deopt = willBeAnimated, process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
-      const name = `${componentName2 || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`, type = (hasEnterStyle ? "(hasEnter)" : "") + (isAnimated ? "(animated)" : "") + (isReactNative ? "(rnw)" : "") + ((presenceState == null ? void 0 : 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;"
-      ), import_constants.isServer)
-        (0, import_log.log)({ noClassNames, isAnimated, shouldAvoidClasses, isWeb: import_constants.isWeb, supportsCSSVars });
+    if (typeof curState.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)" : "") + ((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;"), import_constants.isServer)
+        (0, import_log.log)({
+          noClassNames,
+          isAnimated,
+          shouldAvoidClasses,
+          isWeb: import_constants.isWeb,
+          supportsCSSVars
+        });
       else {
         console.groupEnd();
-        const stateLog = `${`${state.press || state.pressIn ? " PRESS " : ""}`}${state.hover ? " HOVER " : ""}${state.focus ? " FOCUS" : " "}`, ch = propsIn.children;
-        let childLog = typeof ch == "string" ? ch.length > 4 ? ch.slice(0, 4) + "..." : ch : "";
-        childLog.length && (childLog = `(children: ${childLog})`), console.groupCollapsed(`${childLog}${stateLog}Props:`), (0, import_log.log)("props in:", propsIn), (0, import_log.log)("final props:", props), (0, import_log.log)({ state, staticConfig, elementType, themeStateProps }), (0, import_log.log)({ contextProps: styledContextProps, overriddenContextProps }), (0, import_log.log)({ presence, isAnimated, isHOC, hasAnimationProp, useAnimations }), console.groupEnd();
+        var pressLog = "".concat(state.press || state.pressIn ? " PRESS " : ""), stateLog = "".concat(pressLog).concat(state.hover ? " HOVER " : "").concat(state.focus ? " FOCUS" : " "), 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).concat(stateLog, "Props:")), (0, import_log.log)("props in:", propsIn), (0, import_log.log)("final props:", props), (0, import_log.log)({
+          state,
+          staticConfig,
+          elementType,
+          themeStateProps
+        }), (0, import_log.log)({
+          contextProps: styledContextProps,
+          overriddenContextProps
+        }), (0, import_log.log)({
+          presence,
+          isAnimated,
+          isHOC,
+          hasAnimationProp,
+          useAnimations
+        }), console.groupEnd();
       }
     }
-    process.env.NODE_ENV === "development" && time && time`pre-theme-media`;
-    const [themeState, theme] = (0, import_useTheme.useThemeWithState)(themeStateProps);
+    process.env.NODE_ENV === "development" && time && time(_templateObject7());
+    var _useThemeWithState = _sliced_to_array((0, import_useTheme.useThemeWithState)(themeStateProps), 2), themeState = _useThemeWithState[0], theme = _useThemeWithState[1];
     elementType = Component || elementType;
-    const isStringElement = typeof elementType == "string";
-    process.env.NODE_ENV === "development" && time && time`theme`;
-    const mediaState = (0, import_useMedia.useMedia)(stateRef, componentContext);
-    (0, import_createVariable.setDidGetVariableValue)(!1), process.env.NODE_ENV === "development" && time && time`media`;
-    const resolveValues = (
+    var isStringElement = typeof elementType == "string";
+    process.env.NODE_ENV === "development" && time && time(_templateObject8());
+    var mediaState = (0, import_useMedia.useMedia)(stateRef, componentContext);
+    (0, import_createVariable.setDidGetVariableValue)(!1), process.env.NODE_ENV === "development" && time && time(_templateObject9());
+    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"
     ), styleProps = {
@@ -223,206 +538,186 @@ function createComponent(staticConfig) {
       resolveValues,
       isExiting,
       isAnimated
-    }, splitStyles = (0, import_getSplitStyles.useSplitStyles)(
-      props,
-      staticConfig,
-      theme,
-      ((_f = themeState == null ? void 0 : themeState.state) == null ? void 0 : _f.name) || "",
-      state,
-      styleProps,
-      null,
-      componentContext,
-      elementType,
-      debugProp
-    );
-    props.group && props.untilMeasured === "hide" && !curState.hasMeasured && (splitStyles.style || (splitStyles.style = {}), splitStyles.style.opacity = 0), process.env.NODE_ENV === "development" && time && time`split-styles`, curState.isListeningToTheme = splitStyles.dynamicThemeAccess;
-    const isMediaArray = splitStyles.hasMedia && Array.isArray(splitStyles.hasMedia), shouldListenForMedia = (0, import_createVariable.didGetVariableValue)() || isMediaArray || noClassNames && splitStyles.hasMedia === !0, mediaListeningKeys = isMediaArray ? splitStyles.hasMedia : null;
+    }, splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, (themeState == null || (_themeState_state = themeState.state) === null || _themeState_state === void 0 ? void 0 : _themeState_state.name) || "", state, styleProps, null, componentContext, elementType, debugProp);
+    if (props.group && props.untilMeasured === "hide" && !curState.hasMeasured) {
+      var _splitStyles;
+      (_splitStyles = splitStyles).style || (_splitStyles.style = {}), splitStyles.style.opacity = 0;
+    }
+    process.env.NODE_ENV === "development" && time && time(_templateObject10()), curState.isListeningToTheme = splitStyles.dynamicThemeAccess;
+    var isMediaArray = splitStyles.hasMedia && Array.isArray(splitStyles.hasMedia), shouldListenForMedia = (0, import_createVariable.didGetVariableValue)() || isMediaArray || noClassNames && splitStyles.hasMedia === !0, mediaListeningKeys = isMediaArray ? splitStyles.hasMedia : null;
     (0, import_useMedia.setMediaShouldUpdate)(stateRef, {
       enabled: shouldListenForMedia,
       keys: mediaListeningKeys
     });
-    const {
-      viewProps: viewPropsIn,
-      pseudos,
-      style: splitStylesStyle,
-      classNames,
-      space
-    } = splitStyles, propsWithAnimation = props, {
-      asChild,
-      children,
-      themeShallow,
-      spaceDirection: _spaceDirection,
-      disabled: disabledProp,
-      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,
-      // @ts-ignore
-      defaultVariants,
-      ...nonTamaguiProps
-    } = viewPropsIn;
-    let viewProps = nonTamaguiProps;
+    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, disabledProp = viewPropsIn.disabled, 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, defaultVariants = viewPropsIn.defaultVariants, nonTamaguiProps = _object_without_properties(viewPropsIn, [
+      "asChild",
+      "children",
+      "themeShallow",
+      "spaceDirection",
+      "disabled",
+      "onPress",
+      "onLongPress",
+      "onPressIn",
+      "onPressOut",
+      "onHoverIn",
+      "onHoverOut",
+      "onMouseUp",
+      "onMouseDown",
+      "onMouseEnter",
+      "onMouseLeave",
+      "onFocus",
+      "onBlur",
+      "separator",
+      "forceStyle",
+      "onClick",
+      "theme",
+      "defaultVariants"
+    ]), viewProps = nonTamaguiProps;
     isHOC && _themeProp && (viewProps.theme = _themeProp);
-    let animationStyles;
+    var animationStyles;
     if (
       // if it supports css vars we run it on server too to get matching initial style
       (supportsCSSVars ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC
     ) {
-      const animations = useAnimations({
+      var _themeState_state1, animations = useAnimations({
         props: propsWithAnimation,
         // if hydrating, send empty style
         style: splitStylesStyle || {},
         presence,
         componentState: state,
         styleProps,
-        theme: (_g = themeState.state) == null ? void 0 : _g.theme,
+        theme: (_themeState_state1 = themeState.state) === null || _themeState_state1 === void 0 ? void 0 : _themeState_state1.theme,
         pseudos: pseudos || null,
         staticConfig,
         stateRef
       });
-      (isAnimated || supportsCSSVars) && animations && (animationStyles = animations.style, viewProps.style = animationStyles), process.env.NODE_ENV === "development" && time && time`animations`;
+      (isAnimated || supportsCSSVars) && animations && (animationStyles = animations.style, viewProps.style = animationStyles), process.env.NODE_ENV === "development" && time && time(_templateObject11());
     }
-    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.
+    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`;
-    const disabled = ((_h = props.accessibilityState) == null ? void 0 : _h.disabled) || // @ts-expect-error (comes from core)
+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());
+    var disabled = ((_props_accessibilityState1 = props.accessibilityState) === null || _props_accessibilityState1 === void 0 ? void 0 : _props_accessibilityState1.disabled) || // @ts-expect-error (comes from core)
     props.accessibilityDisabled;
-    groupName && (nonTamaguiProps.onLayout = (0, import_helpers.composeEventHandlers)(
-      nonTamaguiProps.onLayout,
-      (e) => {
-        stateRef.current.group.emit(groupName, {
-          layout: e.nativeEvent.layout
-        }), !stateRef.current.hasMeasured && props.untilMeasured === "hide" && setState((prev) => ({ ...prev })), stateRef.current.hasMeasured = !0;
-      }
-    )), viewProps = ((_j = (_i = import_setupHooks.hooks).usePropsTransform) == null ? void 0 : _j.call(
-      _i,
-      elementType,
-      nonTamaguiProps,
-      stateRef,
-      curState.willHydrate
-    )) ?? nonTamaguiProps, curState.composedRef || (curState.composedRef = (0, import_compose_refs.composeRefs)(
-      (x) => stateRef.current.host = x,
-      forwardedRef
-    )), viewProps.ref = curState.composedRef, process.env.NODE_ENV === "development" && !isReactNative && !isText && import_constants.isWeb && !isHOC && import_react.Children.toArray(props.children).forEach((item) => {
+    groupName && (nonTamaguiProps.onLayout = (0, import_helpers.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);
+      }), stateRef.current.hasMeasured = !0;
+    }));
+    var _hooks_usePropsTransform1;
+    viewProps = (_hooks_usePropsTransform1 = (_hooks_usePropsTransform = import_setupHooks.hooks.usePropsTransform) === null || _hooks_usePropsTransform === void 0 ? void 0 : _hooks_usePropsTransform.call(import_setupHooks.hooks, elementType, nonTamaguiProps, stateRef, curState.willHydrate)) !== null && _hooks_usePropsTransform1 !== void 0 ? _hooks_usePropsTransform1 : nonTamaguiProps, curState.composedRef || (curState.composedRef = (0, import_compose_refs.composeRefs)(function(x) {
+      return stateRef.current.host = x;
+    }, forwardedRef)), viewProps.ref = curState.composedRef, process.env.NODE_ENV === "development" && !isReactNative && !isText && import_constants.isWeb && !isHOC && import_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 <View>.`
-      );
-    }), process.env.NODE_ENV === "development" && time && time`events-hooks`;
-    const { pseudoGroups, mediaGroups } = splitStyles;
-    curState.unPress || (curState.unPress = () => setStateShallow({ press: !1, pressIn: !1 }));
-    const unPress = curState.unPress, shouldEnter = state.unmounted;
-    (0, import_react.useEffect)(() => {
+` && 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;
+    curState.unPress || (curState.unPress = function() {
+      return setStateShallow({
+        press: !1,
+        pressIn: !1
+      });
+    });
+    var unPress = curState.unPress, shouldEnter = state.unmounted;
+    (0, import_react.useEffect)(function() {
       if (shouldEnter) {
-        setStateShallow({ unmounted: !1 });
+        setStateShallow({
+          unmounted: !1
+        });
         return;
       }
-      let disposeGroupsListener;
+      var disposeGroupsListener;
       if (pseudoGroups || mediaGroups) {
-        const current = {
+        var current = {
           pseudo: {},
           media: {}
         };
-        disposeGroupsListener = componentContext.groups.subscribe(
-          (name, { layout, pseudo }) => {
-            if (pseudo && (pseudoGroups != null && pseudoGroups.has(name)))
-              Object.assign(current.pseudo, pseudo), persist();
-            else if (layout && mediaGroups) {
-              const mediaState2 = getMediaState(mediaGroups, layout), next = (0, import_createShallowSetState.mergeIfNotShallowEqual)(current.media, mediaState2);
-              next !== current.media && (Object.assign(current.media, next), persist());
-            }
-            function persist() {
-              setStateShallow({
-                // force it to be referentially different so it always updates
-                group: {
-                  ...state.group,
-                  [name]: current
-                }
-              });
-            }
+        disposeGroupsListener = componentContext.groups.subscribe(function(name2, param) {
+          var layout = param.layout, pseudo = param.pseudo, persist = function() {
+            setStateShallow({
+              // force it to be referentially different so it always updates
+              group: _object_spread_props(_object_spread({}, state.group), _define_property({}, name2, current))
+            });
+          };
+          if (pseudo && (pseudoGroups != null && pseudoGroups.has(name2)))
+            Object.assign(current.pseudo, pseudo), persist();
+          else if (layout && mediaGroups) {
+            var mediaState2 = getMediaState(mediaGroups, layout), next = (0, import_createShallowSetState.mergeIfNotShallowEqual)(current.media, mediaState2);
+            next !== current.media && (Object.assign(current.media, next), persist());
           }
-        );
+        });
       }
-      return () => {
+      return function() {
         disposeGroupsListener == null || disposeGroupsListener(), mouseUps.delete(unPress);
       };
     }, [
       shouldEnter,
-      pseudoGroups ? Object.keys([...pseudoGroups]).join("") : 0,
-      mediaGroups ? Object.keys([...mediaGroups]).join("") : 0
+      pseudoGroups ? Object.keys(_to_consumable_array(pseudoGroups)).join("") : 0,
+      mediaGroups ? Object.keys(_to_consumable_array(mediaGroups)).join("") : 0
     ]);
-    const runtimePressStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.pressStyle), runtimeFocusStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.focusStyle), attachFocus = !!(runtimePressStyle || runtimeFocusStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick), runtimeHoverStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.hoverStyle), needsHoverState = runtimeHoverStyle || onHoverIn || onHoverOut, isHoverable = import_constants.isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !!(attachFocus || attachPress || isHoverable || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle);
-    process.env.NODE_ENV === "development" && time && time`events-setup`;
-    const events = shouldAttach && !isDisabled && !props.asChild ? {
-      onPressOut: attachPress ? (e) => {
+    var runtimePressStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.pressStyle), runtimeFocusStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.focusStyle), attachFocus = !!(runtimePressStyle || runtimeFocusStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick), runtimeHoverStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.hoverStyle), needsHoverState = runtimeHoverStyle || onHoverIn || onHoverOut, isHoverable = import_constants.isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !!(attachFocus || attachPress || isHoverable || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle);
+    process.env.NODE_ENV === "development" && time && time(_templateObject14());
+    var events = shouldAttach && !isDisabled && !props.asChild ? _object_spread(_object_spread_props(_object_spread({
+      onPressOut: attachPress ? function(e) {
         unPress(), onPressOut == null || onPressOut(e), onMouseUp == null || onMouseUp(e);
-      } : void 0,
-      ...(isHoverable || attachPress) && {
-        onMouseEnter: (e) => {
-          const next = {};
-          needsHoverState && (next.hover = !0), runtimePressStyle && state.pressIn && (next.press = !0), setStateShallow(next), onHoverIn == null || onHoverIn(e), onMouseEnter == null || onMouseEnter(e);
-        },
-        onMouseLeave: (e) => {
-          const next = {};
-          mouseUps.add(unPress), needsHoverState && (next.hover = !1), runtimePressStyle && state.pressIn && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut == null || onHoverOut(e), onMouseLeave == null || onMouseLeave(e);
-        }
+      } : void 0
+    }, (isHoverable || attachPress) && {
+      onMouseEnter: function(e) {
+        var next = {};
+        needsHoverState && (next.hover = !0), runtimePressStyle && state.pressIn && (next.press = !0), setStateShallow(next), onHoverIn == null || onHoverIn(e), onMouseEnter == null || onMouseEnter(e);
       },
-      onPressIn: attachPress ? (e) => {
+      onMouseLeave: function(e) {
+        var next = {};
+        mouseUps.add(unPress), needsHoverState && (next.hover = !1), runtimePressStyle && state.pressIn && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut == null || onHoverOut(e), onMouseLeave == null || onMouseLeave(e);
+      }
+    }), {
+      onPressIn: attachPress ? function(e) {
         runtimePressStyle && setStateShallow({
           press: !0,
           pressIn: !0
         }), onPressIn == null || onPressIn(e), onMouseDown == null || onMouseDown(e), import_constants.isWeb && mouseUps.add(unPress);
       } : void 0,
-      onPress: attachPress ? (e) => {
+      onPress: attachPress ? function(e) {
         unPress(), import_constants.isWeb && (onClick == null || onClick(e)), onPress == null || onPress(e);
-      } : void 0,
-      ...attachPress && onLongPress && {
-        onLongPress: (e) => {
-          unPress(), onLongPress == null || onLongPress(e);
-        }
+      } : void 0
+    }), attachPress && onLongPress && {
+      onLongPress: function(e) {
+        unPress(), onLongPress == null || onLongPress(e);
+      }
+    }, attachFocus && {
+      onFocus: function(e) {
+        setStateShallow({
+          focus: !0
+        }), onFocus == null || onFocus(e);
       },
-      ...attachFocus && {
-        onFocus: (e) => {
-          setStateShallow({
-            focus: !0
-          }), onFocus == null || onFocus(e);
-        },
-        onBlur: (e) => {
-          setStateShallow({
-            focus: !1
-          }), onBlur == null || onBlur(e);
-        }
+      onBlur: function(e) {
+        setStateShallow({
+          focus: !1
+        }), onBlur == null || onBlur(e);
       }
-    } : null;
-    events && !asChild && Object.assign(events, {
-      cancelable: !viewProps.rejectResponderTermination,
-      disabled: isDisabled,
-      hitSlop: viewProps.hitSlop,
-      delayLongPress: viewProps.delayLongPress,
-      delayPressIn: viewProps.delayPressIn,
-      delayPressOut: viewProps.delayPressOut,
-      focusable: viewProps.focusable ?? !0,
-      minPressDuration: 0
-    }), process.env.NODE_ENV === "development" && time && time`events`, process.env.NODE_ENV === "development" && debugProp === "verbose" && (0, import_log.log)("events", { events, isHoverable, attachPress }), (_l = (_k = import_setupHooks.hooks).useEvents) == null || _l.call(_k, viewProps, events, splitStyles, setStateShallow, staticConfig);
-    const direction = props.spaceDirection || "both";
-    process.env.NODE_ENV === "development" && time && time`hooks`;
-    let content = !children || asChild ? children : spacedChildren({
+    }) : null;
+    if (events && !asChild) {
+      var _viewProps_focusable;
+      Object.assign(events, {
+        cancelable: !viewProps.rejectResponderTermination,
+        disabled: isDisabled,
+        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(_templateObject15()), process.env.NODE_ENV === "development" && debugProp === "verbose" && (0, import_log.log)("events", {
+      events,
+      isHoverable,
+      attachPress
+    }), (_hooks_useEvents = import_setupHooks.hooks.useEvents) === null || _hooks_useEvents === void 0 || _hooks_useEvents.call(import_setupHooks.hooks, viewProps, events, splitStyles, setStateShallow, staticConfig);
+    var direction = props.spaceDirection || "both";
+    process.env.NODE_ENV === "development" && time && time(_templateObject16());
+    var content = !children || asChild ? children : spacedChildren({
       separator,
       children,
       space,
@@ -430,50 +725,60 @@ If you meant to do this, you can disable this warning - either change untilMeasu
       isZStack,
       debug: debugProp
     });
-    asChild && (elementType = import_Slot.Slot, Object.assign(viewProps, { onPress, onLongPress })), process.env.NODE_ENV === "development" && time && time`spaced-as-child`;
-    let useChildrenResult;
-    import_setupHooks.hooks.useChildren && (useChildrenResult = import_setupHooks.hooks.useChildren(
-      elementType,
-      content,
-      viewProps,
-      events,
-      staticConfig
-    )), useChildrenResult ? content = useChildrenResult : content = (0, import_react.createElement)(elementType, viewProps, content);
-    const ResetPresence = (_m = config == null ? void 0 : config.animations) == null ? void 0 : _m.ResetPresence;
-    ResetPresence && willBeAnimated && (hasEnterStyle || presenceState) && content && typeof content != "string" && (content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResetPresence, { children: content })), process.env.NODE_ENV === "development" && time && time`create-element`;
-    const groupState = curState.group, subGroupContext = (0, import_react.useMemo)(() => {
-      var _a3, _b2;
+    if (asChild)
+      if (elementType = import_Slot.Slot, 0)
+        var webStyleEvents, passEvents;
+      else
+        Object.assign(viewProps, {
+          onPress,
+          onLongPress
+        });
+    process.env.NODE_ENV === "development" && time && time(_templateObject17());
+    var useChildrenResult;
+    import_setupHooks.hooks.useChildren && (useChildrenResult = import_setupHooks.hooks.useChildren(elementType, content, viewProps, events, staticConfig)), useChildrenResult ? content = useChildrenResult : content = /* @__PURE__ */ (0, import_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__ */ import_react.default.createElement(ResetPresence, null, content)), process.env.NODE_ENV === "development" && time && time(_templateObject18());
+    var groupState = curState.group, subGroupContext = (0, import_react.useMemo)(function() {
+      var _splitStyles_style, _splitStyles_style1;
       if (!(!groupState || !groupName))
-        return groupState.listeners.clear(), {
-          ...componentContext.groups,
+        return groupState.listeners.clear(), _object_spread_props(_object_spread({}, componentContext.groups), {
           // change reference so as we mutate it doesn't affect siblings etc
-          state: {
-            ...componentContext.groups.state,
-            [groupName]: {
-              pseudo: import_defaultComponentState.defaultComponentStateMounted,
-              // capture just initial width and height if they exist
-              // will have top, left, width, height (not x, y)
-              layout: {
-                width: fromPx((_a3 = splitStyles.style) == null ? void 0 : _a3.width),
-                height: fromPx((_b2 = splitStyles.style) == null ? void 0 : _b2.height)
-              }
+          state: _object_spread_props(_object_spread({}, componentContext.groups.state), _define_property({}, groupName, {
+            pseudo: import_defaultComponentState.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__ */ (0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, { ...componentContext, groups: subGroupContext, children: content })), process.env.NODE_ENV === "development" && time && time`group-context`, content = disableTheme ? content : (0, import_Theme.getThemedChildren)(themeState, content, themeStateProps, !1), process.env.NODE_ENV === "development" && time && time`themed-children`, process.env.NODE_ENV === "development" && props.debug === "visualize" && (content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, { themeState, themeProps: props, children: content })), staticConfig.context) {
-      const contextProps = staticConfig.context.props;
-      for (const key in contextProps)
-        (viewProps.style && key in viewProps.style || key in viewProps) && (overriddenContextProps || (overriddenContextProps = {}), overriddenContextProps[key] = ((_n = viewProps.style) == null ? void 0 : _n[key]) ?? viewProps[key]);
+        });
+    }, [
+      groupName
+    ]);
+    if (groupName && subGroupContext && (content = /* @__PURE__ */ import_react.default.createElement(import_ComponentContext.ComponentContext.Provider, _object_spread_props(_object_spread({}, componentContext), {
+      groups: subGroupContext
+    }), content)), process.env.NODE_ENV === "development" && time && time(_templateObject19()), content = disableTheme ? content : (0, import_Theme.getThemedChildren)(themeState, content, themeStateProps, !1), process.env.NODE_ENV === "development" && time && time(_templateObject20()), process.env.NODE_ENV === "development" && props.debug === "visualize" && (content = /* @__PURE__ */ import_react.default.createElement(import_ThemeDebug.ThemeDebug, {
+      themeState,
+      themeProps: props
+    }, content)), staticConfig.context) {
+      var contextProps = staticConfig.context.props;
+      for (var key1 in contextProps)
+        if (viewProps.style && key1 in viewProps.style || key1 in viewProps) {
+          var _viewProps_style;
+          overriddenContextProps || (overriddenContextProps = {});
+          var _viewProps_style_key;
+          overriddenContextProps[key1] = (_viewProps_style_key = (_viewProps_style = viewProps.style) === null || _viewProps_style === void 0 ? void 0 : _viewProps_style[key1]) !== null && _viewProps_style_key !== void 0 ? _viewProps_style_key : viewProps[key1];
+        }
     }
     if (overriddenContextProps) {
-      const Provider = staticConfig.context.Provider;
-      content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { ...contextValue, ...overriddenContextProps, children: content });
+      var Provider = staticConfig.context.Provider;
+      content = /* @__PURE__ */ import_react.default.createElement(Provider, _object_spread({}, contextValue, overriddenContextProps), content);
     }
     if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
-      const title = `render <${typeof elementType == "string" ? elementType : "Component"} /> (${internalID}) with props`;
+      var element1 = typeof elementType == "string" ? elementType : "Component", title = "render <".concat(element1, " /> (").concat(internalID, ") with props");
       if (import_constants.isWeb) {
         console.groupCollapsed(title);
         try {
@@ -511,36 +816,32 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         }
       } else {
         (0, import_log.log)(title), (0, import_log.log)("final styles:");
-        for (const key in splitStylesStyle)
-          (0, import_log.log)(key, splitStylesStyle[key]);
+        for (var key2 in splitStylesStyle)
+          (0, import_log.log)(key2, splitStylesStyle[key2]);
       }
       if (debugProp === "break")
         debugger;
     }
-    return process.env.NODE_ENV === "development" && time && (time`rest`, globalThis.willPrint || (globalThis.willPrint = !0, setTimeout(() => {
+    return process.env.NODE_ENV === "development" && time && (time(_templateObject21()), globalThis.willPrint || (globalThis.willPrint = !0, setTimeout(function() {
       delete globalThis.willPrint, time.print(), time = null;
     }, 50))), content;
   });
   staticConfig.componentName && (component.displayName = staticConfig.componentName);
-  let res = component;
-  (process.env.TAMAGUI_FORCE_MEMO || staticConfig.memo) && (res = (0, import_react.memo)(res)), res.staticConfig = staticConfig;
+  var res = component;
+  (process.env.TAMAGUI_FORCE_MEMO || staticConfig.memo) && (res = /* @__PURE__ */ (0, import_react.memo)(res)), res.staticConfig = staticConfig;
   function extendStyledConfig(extended) {
-    return {
-      ...staticConfig,
-      ...extended,
+    return _object_spread_props(_object_spread({}, 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 _a2;
-    let out = ((_a2 = Component2.render) == null ? void 0 : _a2.length) === 2 ? Component2 : (0, import_react.forwardRef)(Component2);
-    const extendedConfig = extendStyledConfig(options == null ? void 0 : options.staticConfig);
-    return out = options != null && options.disableTheme ? out : (0, import_themeable.themeable)(out, extendedConfig), process.env.TAMAGUI_MEMOIZE_STYLEABLE && (out = (0, import_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__ */ (0, import_react.forwardRef)(Component2), extendedConfig = extendStyledConfig(options == null ? void 0 : options.staticConfig);
+    return out = options != null && options.disableTheme ? out : (0, import_themeable.themeable)(out, extendedConfig), process.env.TAMAGUI_MEMOIZE_STYLEABLE && (out = /* @__PURE__ */ (0, import_react.memo)(out)), out.staticConfig = extendedConfig, out.styleable = styleable, out;
   }
   return res.extractable = extractable, res.styleable = styleable, res;
 }
@@ -548,9 +849,10 @@ function Unspaced(props) {
   return props.children;
 }
 Unspaced.isUnspaced = !0;
-const getSpacerSize = (size, { tokens }) => {
+var getSpacerSize = function(size, param) {
+  var tokens = param.tokens;
   size = size === !0 ? "$true" : size;
-  const sizePx = tokens.space[size] ?? size;
+  var _tokens_space_size, sizePx = (_tokens_space_size = tokens.space[size]) !== null && _tokens_space_size !== void 0 ? _tokens_space_size : size;
   return {
     width: sizePx,
     height: sizePx,
@@ -562,13 +864,12 @@ const getSpacerSize = (size, { tokens }) => {
   memo: !0,
   componentName: "Spacer",
   validStyles: import_helpers.validStyles,
-  defaultProps: {
-    ...import_constants2.stackDefaultStyles,
+  defaultProps: _object_spread_props(_object_spread({}, import_constants2.stackDefaultStyles), {
     // avoid nesting issues
     tag: "span",
     size: !0,
     pointerEvents: "none"
-  },
+  }),
   variants: {
     size: {
       "...": getSpacerSize
@@ -592,73 +893,73 @@ const getSpacerSize = (size, { tokens }) => {
   }
 });
 function spacedChildren(props) {
-  var _a, _b, _c;
-  const { isZStack, children, space, direction, spaceFlex, separator } = props, hasSpace = !!(space || spaceFlex), hasSeparator = separator != null;
+  var _childrenList__type, _childrenList_, isZStack = props.isZStack, children = props.children, space = props.space, direction = props.direction, spaceFlex = props.spaceFlex, separator = props.separator, hasSpace = !!(space || spaceFlex), hasSeparator = separator != null;
   if (!(hasSpace || hasSeparator || isZStack))
     return children;
-  const childrenList = import_react.Children.toArray(children);
-  if (childrenList.length <= 1 && !isZStack && !((_b = (_a = childrenList[0]) == null ? void 0 : _a.type) != null && _b.shouldForwardSpace))
+  var childrenList = import_react.Children.toArray(children), len = childrenList.length;
+  if (len <= 1 && !isZStack && !(!((_childrenList_ = childrenList[0]) === null || _childrenList_ === void 0 || (_childrenList__type = _childrenList_.type) === null || _childrenList__type === void 0) && _childrenList__type.shouldForwardSpace))
     return childrenList;
-  const final = [];
-  for (let [index, child] of childrenList.entries()) {
-    const isEmpty = child == null || Array.isArray(child) && child.length === 0;
-    if (!isEmpty && import_react.default.isValidElement(child) && ((_c = child.type) != null && _c.shouldForwardSpace) && (child = import_react.default.cloneElement(child, {
-      space,
-      spaceFlex,
-      separator,
-      key: child.key
-    })), isEmpty || !child || child.key && !isZStack ? final.push(child) : final.push(
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: isZStack ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AbsoluteFill, { children: child }) : child }, index)
-    ), isUnspaced(child) && index === 0 || isZStack)
-      continue;
-    const next = childrenList[index + 1];
-    next && !isUnspaced(next) && (separator ? (hasSpace && final.push(
-      createSpacer({
-        key: `_${index}_00tmgui`,
-        direction,
-        space,
-        spaceFlex
-      })
-    ), final.push(
-      import_react.default.isValidElement(separator) ? import_react.default.cloneElement(separator, { key: `sep_${index}` }) : separator
-    ), hasSpace && final.push(
-      createSpacer({
-        key: `_${index}01tmgui`,
-        direction,
+  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;
+      if (!isEmpty && /* @__PURE__ */ import_react.default.isValidElement(child) && (!((_child_type = child.type) === null || _child_type === void 0) && _child_type.shouldForwardSpace) && (child = /* @__PURE__ */ import_react.default.cloneElement(child, {
         space,
-        spaceFlex
-      })
-    )) : final.push(
-      createSpacer({
-        key: `_${index}02tmgui`,
-        direction,
-        space,
-        spaceFlex
-      })
-    ));
+        spaceFlex,
+        separator,
+        key: child.key
+      })), isEmpty || !child || child.key && !isZStack ? final.push(child) : final.push(/* @__PURE__ */ import_react.default.createElement(import_react.Fragment, {
+        key: index
+      }, isZStack ? /* @__PURE__ */ import_react.default.createElement(AbsoluteFill, null, child) : child)), !(isUnspaced(child) && index === 0) && !isZStack) {
+        var next = childrenList[index + 1];
+        next && !isUnspaced(next) && (separator ? (hasSpace && final.push(createSpacer({
+          key: "_".concat(index, "_00tmgui"),
+          direction,
+          space,
+          spaceFlex
+        })), final.push(/* @__PURE__ */ import_react.default.isValidElement(separator) ? /* @__PURE__ */ import_react.default.cloneElement(separator, {
+          key: "sep_".concat(index)
+        }) : separator), hasSpace && final.push(createSpacer({
+          key: "_".concat(index, "01tmgui"),
+          direction,
+          space,
+          spaceFlex
+        }))) : final.push(createSpacer({
+          key: "_".concat(index, "02tmgui"),
+          direction,
+          space,
+          spaceFlex
+        })));
+      }
+    }
+  } catch (err) {
+    _didIteratorError = !0, _iteratorError = err;
+  } finally {
+    try {
+      !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+    } finally {
+      if (_didIteratorError)
+        throw _iteratorError;
+    }
   }
   return process.env.NODE_ENV === "development" && props.debug && (0, import_log.log)("  Spaced children", final, props), final;
 }
-function createSpacer({ key, direction, space, spaceFlex }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    Spacer,
-    {
-      size: space,
-      direction,
-      ...typeof spaceFlex < "u" && {
-        flex: spaceFlex === !0 ? 1 : spaceFlex === !1 ? 0 : spaceFlex
-      }
-    },
-    key
-  );
+function createSpacer(param) {
+  var key = param.key, direction = param.direction, space = param.space, spaceFlex = param.spaceFlex;
+  return /* @__PURE__ */ import_react.default.createElement(Spacer, _object_spread({
+    key,
+    size: space,
+    direction
+  }, typeof spaceFlex < "u" && {
+    flex: spaceFlex === !0 ? 1 : spaceFlex === !1 ? 0 : spaceFlex
+  }));
 }
 function isUnspaced(child) {
-  const t = child == null ? void 0 : child.type;
+  var t = child == null ? void 0 : child.type;
   return (t == null ? void 0 : t.isVisuallyHidden) || (t == null ? void 0 : t.isUnspaced);
 }
-const AbsoluteFill = createComponent({
-  defaultProps: {
-    ...import_constants2.stackDefaultStyles,
+var AbsoluteFill = createComponent({
+  defaultProps: _object_spread_props(_object_spread({}, import_constants2.stackDefaultStyles), {
     flexDirection: "column",
     position: "absolute",
     top: 0,
@@ -666,20 +967,25 @@ const AbsoluteFill = createComponent({
     bottom: 0,
     left: 0,
     pointerEvents: "box-none"
-  }
+  })
 });
 function hasAnimatedStyleValue(style) {
-  return Object.keys(style).some((k) => {
-    const val = style[k];
+  return Object.keys(style).some(function(k) {
+    var val = style[k];
     return val && typeof val == "object" && "_animation" in val;
   });
 }
 function getMediaState(mediaGroups, layout) {
-  return Object.fromEntries(
-    [...mediaGroups].map((mediaKey) => [mediaKey, (0, import_useMedia.mediaKeyMatch)(mediaKey, layout)])
-  );
+  return Object.fromEntries(_to_consumable_array(mediaGroups).map(function(mediaKey) {
+    return [
+      mediaKey,
+      (0, import_useMedia.mediaKeyMatch)(mediaKey, layout)
+    ];
+  }));
 }
-const fromPx = (val) => typeof val != "string" ? val : +val.replace("px", "");
+var fromPx = function(val) {
+  return typeof val != "string" ? val : +val.replace("px", "");
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Spacer,