@tamagui/core 2.0.0-rc.4 → 2.0.0-rc.5-1770352331483

package/dist/native.cjs

@@ -569,7 +569,7 @@ var LayoutHandlers = /* @__PURE__ */ new WeakMap(), LayoutDisableKey = /* @__PUR
     children
   });
 };
-function setOnLayoutStrategy(state) {
+function setOnLayoutStrategy(state2) {
 }
 var NodeRectCache = /* @__PURE__ */ new WeakMap(), LastChangeTime = /* @__PURE__ */ new WeakMap(), avoidUpdates = true, queuedUpdates = /* @__PURE__ */ new Map();
 function enable() {
@@ -5050,11 +5050,11 @@ class StateSafePureComponent extends React__namespace.PureComponent {
     this._installSetStateHooks();
   }
   setState(partialState, callback) {
-    typeof partialState == "function" ? super.setState((state, props) => {
+    typeof partialState == "function" ? super.setState((state2, props) => {
       this._inAsyncStateUpdate = true;
       let ret;
       try {
-        ret = partialState(state, props);
+        ret = partialState(state2, props);
       } catch (err) {
         throw err;
       } finally {
@@ -5065,7 +5065,7 @@ class StateSafePureComponent extends React__namespace.PureComponent {
   }
   _installSetStateHooks() {
     const that = this;
-    let { props, state } = this;
+    let { props, state: state2 } = this;
     Object.defineProperty(this, "props", {
       get() {
         return invariant(
@@ -5081,10 +5081,10 @@ class StateSafePureComponent extends React__namespace.PureComponent {
         return invariant(
           !that._inAsyncStateUpdate,
           '"this.state" should not be acceessed during state updates'
-        ), state;
+        ), state2;
       },
       set(newState) {
-        state = newState;
+        state2 = newState;
       }
     });
   }
@@ -5269,8 +5269,8 @@ class CellRenderer extends React__namespace.Component {
     };
   }
   updateSeparatorProps(newProps) {
-    this.setState((state) => ({
-      separatorProps: __spreadValues(__spreadValues({}, state.separatorProps), newProps)
+    this.setState((state2) => ({
+      separatorProps: __spreadValues(__spreadValues({}, state2.separatorProps), newProps)
     }));
   }
   componentWillUnmount() {
@@ -5875,10 +5875,10 @@ const Image$1 = React__namespace.forwardRef((props, ref) => {
     "source",
     "style"
   ]);
-  const [state, updateState] = React__namespace.useState(() => {
+  const [state2, updateState] = React__namespace.useState(() => {
     const uri2 = resolveAssetUri$1(source);
     return uri2 != null && ImageLoader.has(uri2) ? LOADED$1 : IDLE$1;
-  }), [layout, updateLayout] = React__namespace.useState({}), hasTextAncestor = React__namespace.useContext(TextAncestorContext), hiddenImageRef = React__namespace.useRef(null), filterRef = React__namespace.useRef(_filterId$1++), requestRef = React__namespace.useRef(null), shouldDisplaySource = state === LOADED$1 || state === LOADING$1 && defaultSource == null, [flatStyle, _resizeMode, filter, tintColor] = getFlatStyle$1(
+  }), [layout, updateLayout] = React__namespace.useState({}), hasTextAncestor = React__namespace.useContext(TextAncestorContext), hiddenImageRef = React__namespace.useRef(null), filterRef = React__namespace.useRef(_filterId$1++), requestRef = React__namespace.useRef(null), shouldDisplaySource = state2 === LOADED$1 || state2 === LOADING$1 && defaultSource == null, [flatStyle, _resizeMode, filter, tintColor] = getFlatStyle$1(
     {},
     blurRadius,
     filterRef.current
@@ -7045,10 +7045,10 @@ const Image = React__namespace.forwardRef((props, ref) => {
     "source",
     "style"
   ]);
-  const [state, updateState] = React__namespace.useState(() => {
+  const [state2, updateState] = React__namespace.useState(() => {
     const uri2 = resolveAssetUri(source);
     return uri2 != null && ImageLoader.has(uri2) ? LOADED : IDLE;
-  }), [layout, updateLayout] = React__namespace.useState({}), hasTextAncestor = React__namespace.useContext(TextAncestorContext), hiddenImageRef = React__namespace.useRef(null), filterRef = React__namespace.useRef(_filterId++), requestRef = React__namespace.useRef(null), shouldDisplaySource = state === LOADED || state === LOADING && defaultSource == null, [flatStyle, _resizeMode, filter, tintColor] = getFlatStyle({}, blurRadius, filterRef.current), resizeMode = props.resizeMode || _resizeMode || "cover", selectedSource = shouldDisplaySource ? source : defaultSource, displayImageUri = resolveAssetUri(selectedSource), imageSizeStyle = resolveAssetDimensions(selectedSource), backgroundImage = displayImageUri ? `url("${displayImageUri}")` : null, backgroundSize = getBackgroundSize(), hiddenImage = displayImageUri ? createElement$1("img", {
+  }), [layout, updateLayout] = React__namespace.useState({}), hasTextAncestor = React__namespace.useContext(TextAncestorContext), hiddenImageRef = React__namespace.useRef(null), filterRef = React__namespace.useRef(_filterId++), requestRef = React__namespace.useRef(null), shouldDisplaySource = state2 === LOADED || state2 === LOADING && defaultSource == null, [flatStyle, _resizeMode, filter, tintColor] = getFlatStyle({}, blurRadius, filterRef.current), resizeMode = props.resizeMode || _resizeMode || "cover", selectedSource = shouldDisplaySource ? source : defaultSource, displayImageUri = resolveAssetUri(selectedSource), imageSizeStyle = resolveAssetDimensions(selectedSource), backgroundImage = displayImageUri ? `url("${displayImageUri}")` : null, backgroundSize = getBackgroundSize(), hiddenImage = displayImageUri ? createElement$1("img", {
     alt: accessibilityLabel || "",
     style: styles$6.accessibilityImage$raw,
     draggable: draggable || false,
@@ -8381,6 +8381,28 @@ function loadAnimationDriver(name, driver) {
     [name]: driver
   };
 }
+function camelToHyphen(str) {
+  return str.replace(/[A-Z]/g, function(m) {
+    return `-${m.toLowerCase()}`;
+  }).toLowerCase();
+}
+var cache$4 = /* @__PURE__ */ new WeakMap();
+function mediaObjectToString(query2) {
+  if (typeof query2 == "string") return query2;
+  if (cache$4.has(query2)) return cache$4.get(query2);
+  var res = Object.entries(query2).map(function(param) {
+    var [feature, value] = param;
+    return feature = camelToHyphen(feature), typeof value == "string" ? `(${feature}: ${value})` : (typeof value == "number" && /[height|width]$/.test(feature) && (value = `${value}px`), `(${feature}: ${value})`);
+  }).join(" and ");
+  return cache$4.set(query2, res), res;
+}
+exports.mediaState = // development only safeguard
+{};
+var setMediaState = function(next) {
+  exports.mediaState = next;
+}, mediaQueryConfig = {}, getMedia = function() {
+  return exports.mediaState;
+}, mediaKeys = /* @__PURE__ */ new Set();
 function kebabToCamel(str) {
   return str.replace(/-([a-z])/g, function(_2, c) {
     return c.toUpperCase();
@@ -8462,11 +8484,7 @@ function matchMediaFallback(query2) {
 function setupMatchMedia(_2) {
   matchMediaImpl = _2, globalThis.matchMedia = _2;
 }
-exports.mediaState = // development only safeguard
-{};
-var mediaQueryConfig = {}, getMedia = function() {
-  return exports.mediaState;
-}, mediaKeys = /* @__PURE__ */ new Set(), mediaKeyRegex = /\$(platform|theme|group)-/, getMediaKey = function(key) {
+var mediaKeyRegex = /\$(platform|theme|group)-/, getMediaKey = function(key) {
   if (key[0] !== "$") return false;
   if (mediaKeys.has(key)) return true;
   var match = key.match(mediaKeyRegex);
@@ -8479,8 +8497,8 @@ var mediaQueryConfig = {}, getMedia = function() {
   } = config, mediaQueryDefaultActive = getSetting("mediaQueryDefaultActive");
   if (media) {
     mediaVersion++, resetMediaStyleCache();
-    for (var key in media) exports.mediaState[key] = (mediaQueryDefaultActive == null ? void 0 : mediaQueryDefaultActive[key]) || false, mediaKeys.add(`$${key}`);
-    Object.assign(mediaQueryConfig, media), initState = __spreadValues({}, exports.mediaState), mediaKeysOrdered = Object.keys(media), setupMediaListeners();
+    for (var key in media) getMedia()[key] = (mediaQueryDefaultActive == null ? void 0 : mediaQueryDefaultActive[key]) || false, mediaKeys.add(`$${key}`);
+    Object.assign(mediaQueryConfig, media), initState = __spreadValues({}, getMedia()), mediaKeysOrdered = Object.keys(media), setupMediaListeners();
   }
 };
 function unlisten() {
@@ -8500,9 +8518,9 @@ function setupMediaListeners() {
     });
     function update2() {
       var next = !!getMatch().matches;
-      next !== exports.mediaState[key2] && (exports.mediaState = __spreadProps(__spreadValues({}, exports.mediaState), {
+      next !== getMedia()[key2] && (setMediaState(__spreadProps(__spreadValues({}, getMedia()), {
         [key2]: next
-      }), updateMediaListeners());
+      })), updateMediaListeners());
     }
     update2();
   };
@@ -8514,7 +8532,7 @@ function setupMediaListeners() {
 var listeners = /* @__PURE__ */ new Set();
 function updateMediaListeners() {
   listeners.forEach(function(cb) {
-    return cb(exports.mediaState);
+    return cb(getMedia());
   });
 }
 var States = /* @__PURE__ */ new WeakMap();
@@ -8534,23 +8552,23 @@ function useMedia(componentContext, debug) {
   var componentState = componentContext ? States.get(componentContext) : null, internalRef = React.useRef(null);
   internalRef.current || (internalRef.current = {
     keys: /* @__PURE__ */ new Set(),
-    lastState: exports.mediaState
+    lastState: getMedia()
   }), internalRef.current.pendingState && (internalRef.current.lastState = internalRef.current.pendingState, internalRef.current.pendingState = void 0);
   var {
     keys
   } = internalRef.current;
   keys.size && keys.clear();
-  var state = React.useSyncExternalStore(subscribe, function() {
+  var state2 = React.useSyncExternalStore(subscribe, function() {
     var curKeys2 = (componentState == null ? void 0 : componentState.keys) || keys, {
       lastState,
       pendingState
     } = internalRef.current;
     if (!curKeys2.size) return lastState;
-    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+    var ms = getMedia(), _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
     try {
       for (var _iterator = curKeys2[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
         var key = _step.value;
-        if (exports.mediaState[key] !== (pendingState || lastState)[key]) return false, (componentContext == null ? void 0 : componentContext.mediaEmit) ? (componentContext.mediaEmit(exports.mediaState), internalRef.current.pendingState = exports.mediaState, lastState) : (internalRef.current.lastState = exports.mediaState, exports.mediaState);
+        if (ms[key] !== (pendingState || lastState)[key]) return false, (componentContext == null ? void 0 : componentContext.mediaEmit) ? (componentContext.mediaEmit(ms), internalRef.current.pendingState = ms, lastState) : (internalRef.current.lastState = ms, ms);
       }
     } catch (err) {
       _didIteratorError = true, _iteratorError = err;
@@ -8563,9 +8581,9 @@ function useMedia(componentContext, debug) {
     }
     return lastState;
   }, getServerSnapshot);
-  return new Proxy(state, {
+  return new Proxy(state2, {
     get(_2, key) {
-      return !disableMediaTouch && typeof key == "string" && keys.add(key), Reflect.get(state, key);
+      return !disableMediaTouch && typeof key == "string" && keys.add(key), Reflect.get(state2, key);
     }
   });
 }
@@ -8591,21 +8609,6 @@ var getMediaImportanceIfMoreImportant = function(mediaKey, key, styleState, isSi
   var importance = isSizeMedia ? getMediaKeyImportance(mediaKey) : defaultMediaImportance, usedKeys = styleState.usedKeys;
   return !usedKeys[key] || importance > usedKeys[key] ? importance : null;
 };
-function camelToHyphen(str) {
-  return str.replace(/[A-Z]/g, function(m) {
-    return `-${m.toLowerCase()}`;
-  }).toLowerCase();
-}
-var cache$4 = /* @__PURE__ */ new WeakMap();
-function mediaObjectToString(query2, key) {
-  if (typeof query2 == "string") return query2;
-  if (cache$4.has(query2)) return cache$4.get(query2);
-  var res = Object.entries(query2).map(function(param) {
-    var [feature, value] = param;
-    return feature = camelToHyphen(feature), typeof value == "string" ? `(${feature}: ${value})` : (typeof value == "number" && /[height|width]$/.test(feature) && (value = `${value}px`), `(${feature}: ${value})`);
-  }).join(" and ");
-  return cache$4.set(query2, res), res;
-}
 function mediaKeyMatch(key, dimensions2) {
   var mediaQueries = mediaQueryConfig[key], result = Object.keys(mediaQueries).every(function(query2) {
     var expectedVal = +mediaQueries[query2], isMax = query2.startsWith("max"), isWidth = query2.endsWith("Width"), givenVal = dimensions2[isWidth ? "width" : "height"];
@@ -9142,7 +9145,7 @@ var ThemeStateContext = React.createContext(""), allListeners = /* @__PURE__ */
     var _keys_current, _schemeKeys_current, _keys_current1, _props_needsUpdate, local = localStates.get(id2), parentState = states.get(parentId), isSchemeOnlyChange = isIos && getSetting("fastSchemeChange") && local && parentState && local.scheme !== parentState.scheme && getThemeBaseName(local.name) === getThemeBaseName(parentState.name), _keys_current_size, keysSize = (_keys_current_size = keys == null || (_keys_current = keys.current) === null || _keys_current === void 0 ? void 0 : _keys_current.size) !== null && _keys_current_size !== void 0 ? _keys_current_size : 0, _schemeKeys_current_size, schemeKeysSize = (_schemeKeys_current_size = schemeKeys == null || (_schemeKeys_current = schemeKeys.current) === null || _schemeKeys_current === void 0 ? void 0 : _schemeKeys_current.size) !== null && _schemeKeys_current_size !== void 0 ? _schemeKeys_current_size : 0, allKeysSchemeOptimized = schemeKeysSize === keysSize && keysSize > 0, canSkipForSchemeChange = isSchemeOnlyChange && allKeysSchemeOptimized, needsUpdate = props.passThrough ? false : isRoot || props.name === "light" || props.name === "dark" || props.name === null ? true : HasRenderedOnce.get(keys) ? canSkipForSchemeChange ? false : !(keys == null || (_keys_current1 = keys.current) === null || _keys_current1 === void 0) && _keys_current1.size ? true : (_props_needsUpdate = props.needsUpdate) === null || _props_needsUpdate === void 0 ? void 0 : _props_needsUpdate.call(props) : true, [rerender, next] = getNextState(local, props, propsKey, isRoot, id2, parentId, needsUpdate, PendingUpdate.get(id2));
     return PendingUpdate.delete(id2), (!local || rerender) && (local = __spreadValues({}, next), localStates.set(id2, local)), Object.assign(local, next), local.id = id2, states.set(id2, next), local;
   };
-  var state = React.useSyncExternalStore(subscribe2, getSnapshot, getSnapshot);
+  var state2 = React.useSyncExternalStore(subscribe2, getSnapshot, getSnapshot);
   return useIsomorphicLayoutEffect(function() {
     if (!HasRenderedOnce.get(keys)) {
       HasRenderedOnce.set(keys, true);
@@ -9153,7 +9156,7 @@ var ThemeStateContext = React.createContext(""), allListeners = /* @__PURE__ */
       return;
     }
     scheduleUpdate(id2), HadTheme.set(keys, true);
-  }, [keys, propsKey]), state;
+  }, [keys, propsKey]), state2;
 }, getNextState = function(lastState, props, propsKey) {
   var isRoot = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false, id2 = arguments.length > 4 ? arguments[4] : void 0, parentId = arguments.length > 5 ? arguments[5] : void 0, needsUpdate = arguments.length > 6 ? arguments[6] : void 0, pendingUpdate = arguments.length > 7 ? arguments[7] : void 0, {
     debug
@@ -9438,36 +9441,44 @@ var defaultComponentState = {
 }), defaultComponentStateShouldEnter = __spreadProps(__spreadValues({}, defaultComponentState), {
   unmounted: "should-enter"
 });
-var GLOBAL_KEY = "__tamagui_native_gesture_state__";
-function getGlobalState() {
-  var g = globalThis;
-  return g[GLOBAL_KEY] || (g[GLOBAL_KEY] = {
-    enabled: false,
-    Gesture: null,
-    GestureDetector: null,
-    ScrollView: null
-  }), g[GLOBAL_KEY];
+function createGlobalState(key, defaultValue2) {
+  var GLOBAL_KEY = `__tamagui_${key}__`;
+  function getGlobalState() {
+    var g = globalThis;
+    return g[GLOBAL_KEY] || (g[GLOBAL_KEY] = defaultValue2), g[GLOBAL_KEY];
+  }
+  function setGlobalState(newState) {
+    globalThis[GLOBAL_KEY] = newState;
+  }
+  return {
+    get: getGlobalState,
+    set: setGlobalState
+  };
 }
+var state = createGlobalState("gesture", {
+  enabled: false,
+  Gesture: null,
+  GestureDetector: null,
+  ScrollView: null
+});
 function getGestureHandler() {
   return {
     get isEnabled() {
-      return getGlobalState().enabled;
+      return state.get().enabled;
     },
     get state() {
-      return getGlobalState();
+      return state.get();
     },
     set(updates) {
-      var state = getGlobalState();
-      Object.assign(state, updates);
+      Object.assign(state.get(), updates);
     },
     disable() {
-      var state = getGlobalState();
-      state.enabled = false;
+      state.get().enabled = false;
     },
     createPressGesture(config) {
       var {
         Gesture
-      } = getGlobalState();
+      } = state.get();
       if (!Gesture) return null;
       var _config_delayLongPress, longPressDuration = (_config_delayLongPress = config.delayLongPress) !== null && _config_delayLongPress !== void 0 ? _config_delayLongPress : 500, tap = Gesture.Tap().runOnJS(true).maxDuration(1e4).onBegin(function(e) {
         var _config_onPressIn;
@@ -9862,6 +9873,111 @@ function normalizeStyle$1(style) {
   }
   return fixStyles(res), res;
 }
+function parseNativeStyle(key, cssString, tokenMap) {
+  switch (key) {
+    case "backgroundImage":
+      return parseBackgroundImage(cssString, tokenMap);
+    case "boxShadow":
+      return parseBoxShadow(cssString, tokenMap);
+    case "textShadow":
+      return parseTextShadow(cssString, tokenMap);
+    default:
+      return;
+  }
+}
+function resolveColor(raw, tokenMap) {
+  return tokenMap && tokenMap.has(raw) ? tokenMap.get(raw) : raw;
+}
+function parseBackgroundImage(css, tokenMap) {
+  var match = css.match(RegExp("^linear-gradient\\((.+)\\)$", "s"));
+  if (match) {
+    var inner = match[1], parts = splitOutsideParens(inner);
+    if (!(parts.length < 2)) {
+      var direction, startIdx = 0, firstPart = parts[0].trim();
+      (firstPart.startsWith("to ") || /^\d+(\.\d+)?(deg|rad|turn|grad)$/.test(firstPart)) && (direction = firstPart, startIdx = 1);
+      for (var colorStops = [], i = startIdx; i < parts.length; i++) {
+        var stopParts = parts[i].trim().split(/\s+/), colorRaw = stopParts[0], color = resolveColor(colorRaw, tokenMap), positions = stopParts.slice(1), stop = {
+          color
+        };
+        positions.length > 0 && (stop.positions = positions), colorStops.push(stop);
+      }
+      var gradient = {
+        type: "linearGradient",
+        colorStops
+      };
+      return direction && (gradient.direction = direction), [gradient];
+    }
+  }
+}
+function parseBoxShadow(css, tokenMap) {
+  var shadowStrings = splitOutsideParens(css), shadows = [], _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+  try {
+    for (var _iterator = shadowStrings[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var raw = _step.value, s = raw.trim();
+      if (s) {
+        var tokens = s.split(/\s+/);
+        if (tokens.length < 2) return;
+        var startIdx = 0, inset = false;
+        tokens[0] === "inset" && (inset = true, startIdx = 1);
+        for (var numericParts = [], colorParts = [], i = startIdx; i < tokens.length; i++) {
+          var n = parseDimension(tokens[i]);
+          if (n !== void 0) numericParts.push(n);
+          else {
+            colorParts = tokens.slice(i);
+            break;
+          }
+        }
+        if (numericParts.length < 2) return;
+        var shadow = {
+          offsetX: numericParts[0],
+          offsetY: numericParts[1]
+        };
+        if (inset && (shadow.inset = true), numericParts.length >= 3 && (shadow.blurRadius = numericParts[2]), numericParts.length >= 4 && (shadow.spreadDistance = numericParts[3]), colorParts.length > 0) {
+          var colorStr = colorParts.join(" ");
+          shadow.color = resolveColor(colorStr, tokenMap);
+        }
+        shadows.push(shadow);
+      }
+    }
+  } catch (err) {
+    _didIteratorError = true, _iteratorError = err;
+  } finally {
+    try {
+      !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+    } finally {
+      if (_didIteratorError) throw _iteratorError;
+    }
+  }
+  return shadows.length > 0 ? shadows : void 0;
+}
+function parseTextShadow(css, tokenMap) {
+  var tokens = css.trim().split(/\s+/);
+  if (!(tokens.length < 3)) {
+    var offsetX = parseDimension(tokens[0]), offsetY = parseDimension(tokens[1]), blur = parseDimension(tokens[2]);
+    if (!(offsetX === void 0 || offsetY === void 0 || blur === void 0)) {
+      var result = [["textShadowOffset", {
+        width: offsetX,
+        height: offsetY
+      }], ["textShadowRadius", blur]];
+      if (tokens.length >= 4) {
+        var colorStr = tokens.slice(3).join(" ");
+        result.push(["textShadowColor", resolveColor(colorStr, tokenMap)]);
+      }
+      return result;
+    }
+  }
+}
+function parseDimension(s) {
+  var cleaned = s.replace(/px$|dp$/, ""), n = Number(cleaned);
+  return Number.isFinite(n) ? n : void 0;
+}
+function splitOutsideParens(s) {
+  for (var parts = [], depth = 0, current = "", i = 0; i < s.length; i++) {
+    var ch = s[i];
+    ch === "(" ? depth++ : ch === ")" && depth--, ch === "," && depth === 0 ? (parts.push(current), current = "") : current += ch;
+  }
+  return current && parts.push(current), parts;
+}
 var remRegex = /(-?[\d.]+)rem/g;
 function resolveRem(value) {
   var _config_settings, config = getConfig(), _config_settings_remBaseFontSize, baseFontSize = (_config_settings_remBaseFontSize = config == null || (_config_settings = config.settings) === null || _config_settings === void 0 ? void 0 : _config_settings.remBaseFontSize) !== null && _config_settings_remBaseFontSize !== void 0 ? _config_settings_remBaseFontSize : 16;
@@ -9964,15 +10080,57 @@ var propMapper = function(key, value, styleState, disabled, map) {
     }
     styleProps2.disableExpandShorthands || key in conf2.shorthands && (key = conf2.shorthands[key]);
     var originalValue = value;
-    if (value != null && (typeof value == "string" && value[0] === "$" ? value = getTokenForKey(key, value, styleProps2, styleState) : (key === "boxShadow" || key === "textShadow" || key === "filter" || key === "backgroundImage" || key === "border") && typeof value == "string" && value.includes("$") ? value = value.replace(/(\$[\w.-]+)/g, function(t) {
-      var r = getTokenForKey("size", t, styleProps2, styleState);
-      return r == null && (r = getTokenForKey("color", t, styleProps2, styleState)), r != null ? String(r) : t;
-    }) : isVariable(value) ? value = resolveVariableValue(key, value, styleProps2.resolveValues) : isRemValue(value) && (value = resolveRem(value))), value != null) {
+    if (value != null) if (typeof value == "string" && value[0] === "$") value = getTokenForKey(key, value, styleProps2, styleState);
+    else if ((key === "boxShadow" || key === "textShadow" || key === "filter" || key === "backgroundImage" || key === "border") && typeof value == "string" && value.includes("$")) {
+      if (key === "backgroundImage" || key === "boxShadow" || key === "textShadow") {
+        var tokenMap = /* @__PURE__ */ new Map(), placeholderIdx = 0, withPlaceholders = value.replace(/(\$[\w.-]+)/g, function(t) {
+          var r = getTokenForKey("size", t, styleProps2, styleState);
+          if (r == null && (r = getTokenForKey("color", t, styleProps2, styleState)), r == null) return t;
+          if (typeof r != "string" && typeof r != "number") {
+            var placeholder = `__tk${placeholderIdx++}__`;
+            return tokenMap.set(placeholder, r), placeholder;
+          }
+          return String(r);
+        }), parsed = parseNativeStyle(key, withPlaceholders, tokenMap);
+        parsed ? value = parsed : value = value.replace(/(\$[\w.-]+)/g, function(t) {
+          var r = getTokenForKey("size", t, styleProps2, styleState);
+          return r == null && (r = getTokenForKey("color", t, styleProps2, styleState)), r != null ? String(r) : t;
+        });
+      } else value = value.replace(/(\$[\w.-]+)/g, function(t) {
+        var r = getTokenForKey("size", t, styleProps2, styleState);
+        return r == null && (r = getTokenForKey("color", t, styleProps2, styleState)), r != null ? String(r) : t;
+      });
+    } else isVariable(value) ? value = resolveVariableValue(key, value, styleProps2.resolveValues) : isRemValue(value) && (value = resolveRem(value));
+    if (value != null && typeof value == "string" && (key === "backgroundImage" || key === "boxShadow" || key === "textShadow")) {
+      var parsed1 = parseNativeStyle(key, value);
+      if (parsed1) {
+        if (key === "textShadow" && Array.isArray(parsed1) && Array.isArray(parsed1[0])) {
+          var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+          try {
+            for (var _iterator = parsed1[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+              var [nkey, nvalue] = _step.value;
+              map(nkey, nvalue, originalValue);
+            }
+          } catch (err) {
+            _didIteratorError = true, _iteratorError = err;
+          } finally {
+            try {
+              !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+            } finally {
+              if (_didIteratorError) throw _iteratorError;
+            }
+          }
+          return;
+        }
+        value = parsed1;
+      }
+    }
+    if (value != null) {
       key === "fontFamily" && lastFontFamilyToken && (styleState.fontFamily = lastFontFamilyToken);
       var expanded = styleProps2.noExpand ? null : expandStyle(key, value);
       if (expanded) for (var max = expanded.length, i = 0; i < max; i++) {
-        var [nkey, nvalue] = expanded[i];
-        map(nkey, nvalue, originalValue);
+        var [nkey1, nvalue1] = expanded[i];
+        map(nkey1, nvalue1, originalValue);
       }
       else map(key, value, originalValue);
     }
@@ -10267,7 +10425,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
         viewProps[key4] = val2;
         return;
       }
-      if (val2 != null) {
+      if (false, val2 != null) {
         if (key4 === "pointerEvents") {
           viewProps[key4] = val2;
           return;
@@ -10282,13 +10440,13 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
         }
         var shouldPassThrough2 = styleProps2.noExpand && isPseudo || isHOC && (isMediaOrPseudo || (parentStaticConfig == null || (_parentStaticConfig_variants = parentStaticConfig.variants) === null || _parentStaticConfig_variants === void 0 ? void 0 : _parentStaticConfig_variants[keyInit]));
         if (shouldPassThrough2) {
-          passDownProp(viewProps, key4, val2, isMediaOrPseudo);
+          passDownProp(viewProps, key4, val2, isMediaOrPseudo), false;
           return;
         }
         if (isPseudo) {
           if (!val2) return;
           var pseudoStyleObject = getSubStyle(styleState, key4, val2, styleProps2.noClass && process.env.IS_STATIC !== "is_static");
-          {
+          if (!shouldDoClasses || process.env.IS_STATIC === "is_static") {
             var _pseudos, _key;
             if (pseudos || (pseudos = {}), (_pseudos = pseudos)[_key = key4] || (_pseudos[_key] = {}), process.env.IS_STATIC === "is_static") {
               Object.assign(pseudos[key4], pseudoStyleObject);
@@ -10297,9 +10455,11 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
           }
           var descriptor = pseudoDescriptors[key4], isEnter = key4 === "enterStyle", isExit = key4 === "exitStyle";
           if (!descriptor) return;
-          {
+          var pseudoStyles, _iteratorNormalCompletion2, _didIteratorError2, _iteratorError2, _iterator2, _step2, psuedoStyle, fullKey;
+          if (shouldDoClasses && !isExit) ;
+          if (!shouldDoClasses || isExit || isEnter) {
             var descriptorKey = descriptor.stateKey || descriptor.name, isDisabled2 = componentState[descriptorKey] === false;
-            isExit && (isDisabled2 = !styleProps2.isExiting), isEnter && componentState.unmounted === false && (isDisabled2 = true);
+            isExit && (isDisabled2 = !styleProps2.isExiting), isEnter && componentState.unmounted === false && (isDisabled2 = true), false;
             var importance = descriptor.priority, pseudoOriginalValues = styleOriginalValues.get(pseudoStyleObject);
             for (var pkey in pseudoStyleObject) {
               var _$val = pseudoStyleObject[pkey];
@@ -10326,14 +10486,13 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
           if (!val2) return;
           var mediaKeyShort = key4.slice(isMedia == "theme" ? 7 : 1);
           hasMedia || (hasMedia = true);
-          val2.space;
-          if ((!hasMedia || typeof hasMedia == "boolean") && (hasMedia = /* @__PURE__ */ new Set()), hasMedia.add(mediaKeyShort), isMedia === "platform" && !isActivePlatform(key4)) return;
+          var hasSpace = val2.space;
+          if ((hasSpace || !shouldDoClasses || styleProps2.willBeAnimated) && ((!hasMedia || typeof hasMedia == "boolean") && (hasMedia = /* @__PURE__ */ new Set()), hasMedia.add(mediaKeyShort)), isMedia === "platform" && !isActivePlatform(key4)) return;
           var priority = mediaStylesSeen;
           mediaStylesSeen += 1;
-          var shouldDoClassesForThisMedia = isWeb;
+          var shouldDoClassesForThisMedia = shouldDoClasses || isWeb && isMedia === "theme";
           if (shouldDoClassesForThisMedia) {
-            getSubStyle(styleState, key4, val2, false);
-            var mediaStyles = getCSSStylesAtomic(), _iteratorNormalCompletion12 = true, _didIteratorError12 = false, _iteratorError12 = void 0;
+            var mediaStyle = getSubStyle(styleState, key4, val2, false), mediaStyles = getCSSStylesAtomic(mediaStyle), _iteratorNormalCompletion12 = true, _didIteratorError12 = false, _iteratorError12 = void 0;
             try {
               for (var _iterator12 = mediaStyles[Symbol.iterator](), _step12; !(_iteratorNormalCompletion12 = (_step12 = _iterator12.next()).done); _iteratorNormalCompletion12 = true) {
                 var style3 = _step12.value, property = style3[StyleObjectProperty], isSubStyle = property[0] === "$";
@@ -10359,7 +10518,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
               var didMerge = mergeMediaByImportance(styleState, mediaKeyShort, key5, val3, mediaState[mediaKeyShort], importanceBump, debug, originalVal2);
               didMerge && key5 === "fontFamily" && (styleState.fontFamily = mediaStyle1.fontFamily);
             };
-            var isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group", isPlatformMedia = isMedia === "platform";
+            var mergeMediaStyle = mergeMediaStyle2, isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group", isPlatformMedia = isMedia === "platform";
             if (!isThemeMedia && !isPlatformMedia && !isGroupMedia) {
               if (!mediaState[mediaKeyShort]) {
                 return;
@@ -10391,14 +10550,14 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
             } else if (isGroupMedia) {
               var _groupContext_groupName, _componentState_group, groupInfo = getGroupPropParts(mediaKeyShort), groupName = groupInfo.name, groupState = groupContext == null || (_groupContext_groupName = groupContext[groupName]) === null || _groupContext_groupName === void 0 ? void 0 : _groupContext_groupName.state, groupPseudoKey = groupInfo.pseudo, groupMediaKey = groupInfo.media;
               if (!groupState) {
-                pseudoGroups || (pseudoGroups = /* @__PURE__ */ new Set());
+                false, pseudoGroups || (pseudoGroups = /* @__PURE__ */ new Set());
                 return;
               }
               var componentGroupState = (_componentState_group = componentState.group) === null || _componentState_group === void 0 ? void 0 : _componentState_group[groupName];
               if (groupMediaKey) {
                 mediaGroups || (mediaGroups = /* @__PURE__ */ new Set()), mediaGroups.add(groupMediaKey);
                 var mediaState1 = componentGroupState == null ? void 0 : componentGroupState.media, isActive = mediaState1 == null ? void 0 : mediaState1[groupMediaKey];
-                if (!mediaState1 && groupState.layout && (isActive = mediaKeyMatch(groupMediaKey, groupState.layout)), !isActive) {
+                if (!mediaState1 && groupState.layout && (isActive = mediaKeyMatch(groupMediaKey, groupState.layout)), false, !isActive) {
                   for (var pkey1 in mediaStyle1) applyDefaultStyle(pkey1, styleState);
                   return;
                 }
@@ -10408,7 +10567,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
                 var _this;
                 pseudoGroups || (pseudoGroups = /* @__PURE__ */ new Set()), pseudoGroups.add(groupName);
                 var componentGroupPseudoState = (_this = componentGroupState || (groupContext == null ? void 0 : groupContext[groupName].state)) === null || _this === void 0 ? void 0 : _this.pseudo, isActive1 = componentGroupPseudoState == null ? void 0 : componentGroupPseudoState[groupPseudoKey], priority1 = pseudoPriorities[groupPseudoKey];
-                if (!isActive1) {
+                if (false, !isActive1) {
                   for (var pkey2 in mediaStyle1) applyDefaultStyle(pkey2, styleState);
                   return;
                 }
@@ -10446,7 +10605,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
     inlineWhenUnflattened,
     parentStaticConfig,
     acceptsClassName
-  } = staticConfig, viewProps = {}, mediaState = styleProps2.mediaState || exports.mediaState, rulesToInsert = void 0, classNames = {};
+  } = staticConfig, viewProps = {}, mediaState = styleProps2.mediaState || exports.mediaState, shouldDoClasses = acceptsClassName && isWeb, rulesToInsert = void 0, classNames = {};
   props.space;
   var pseudos = null, hasMedia = false, dynamicThemeAccess, pseudoGroups, mediaGroups;
   props.className || "";
@@ -10591,7 +10750,7 @@ var getSubStyle = function(styleState, subKey, styleIn, avoidMergeTransform) {
     var shouldSkip = !staticConfig.isHOC && key1 in skipProps && !styleProps2.noSkip;
     if (shouldSkip) return key = key1, "continue";
     propMapper(key1, val, styleState, false, function(skey, sval, originalVal) {
-      originalVal !== void 0 && (originalValues || (originalValues = {}), originalValues[skey] = originalVal), skey in validPseudoKeys && (sval = getSubStyle(styleState, skey, sval, avoidMergeTransform)), !avoidMergeTransform && skey in stylePropsTransform ? mergeTransform(styleOut, skey, sval) : styleOut[skey] = styleProps2.noNormalize ? sval : normalizeValueWithProperty(sval);
+      originalVal !== void 0 && (originalValues || (originalValues = {}), originalValues[skey] = originalVal), skey in validPseudoKeys && (sval = getSubStyle(styleState, skey, sval, avoidMergeTransform)), !avoidMergeTransform && skey in stylePropsTransform ? mergeTransform(styleOut, skey, sval) : styleOut[skey] = styleProps2.noNormalize ? sval : normalizeValueWithProperty(sval, key1);
     }), key = key1;
   }, {
     staticConfig,
@@ -10903,7 +11062,7 @@ function getThemedChildren(themeState, children, props) {
   var isRoot = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false, stateRef = arguments.length > 4 ? arguments[4] : void 0, passThrough = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : false, {
     shallow,
     forceClassName
-  } = props, state = stateRef.current, hasEverThemed = state.hasEverThemed, shouldRenderChildrenWithTheme = hasEverThemed || themeState.isNew || isRoot || hasThemeUpdatingProps(props);
+  } = props, state2 = stateRef.current, hasEverThemed = state2.hasEverThemed, shouldRenderChildrenWithTheme = hasEverThemed || themeState.isNew || isRoot || hasThemeUpdatingProps(props);
   if (!shouldRenderChildrenWithTheme) return children;
   children = /* @__PURE__ */ jsxRuntime.jsx(ThemeStateContext.Provider, {
     value: themeState.id,
@@ -10913,9 +11072,9 @@ function getThemedChildren(themeState, children, props) {
     isInverse,
     name
   } = themeState, requiresExtraWrapper = isInverse || forceClassName;
-  if (state.hasEverThemed || (state.hasEverThemed = true), (requiresExtraWrapper || // if the theme is exactly dark or light, its likely to change between dark/light
+  if (state2.hasEverThemed || (state2.hasEverThemed = true), (requiresExtraWrapper || // if the theme is exactly dark or light, its likely to change between dark/light
   // and that would require wrapping which would re-parent, so to avoid re-parenting do this
-  themeState.name === "dark" || themeState.name === "light") && (state.hasEverThemed = "wrapped"), shallow && themeState.parentId) {
+  themeState.name === "dark" || themeState.name === "light") && (state2.hasEverThemed = "wrapped"), shallow && themeState.parentId) {
     var parentState = getThemeState(themeState.isNew ? themeState.id : themeState.parentId);
     if (!parentState) throw new Error("‼️010");
     children = React.Children.toArray(children).map(function(child) {
@@ -11024,11 +11183,11 @@ var useComponentState = function(props, animationDriver, staticConfig, config) {
     canImmediatelyEnter ? defaultComponentStateShouldEnter : defaultComponentState
   ) : defaultComponentStateMounted, disabled = isDisabled(props);
   disabled != null && (initialState.disabled = disabled);
-  var states2 = React.useState(initialState), state = props.forceStyle ? __spreadProps(__spreadValues({}, states2[0]), {
+  var states2 = React.useState(initialState), state2 = props.forceStyle ? __spreadProps(__spreadValues({}, states2[0]), {
     [props.forceStyle]: true
   }) : states2[0], setState = states2[1], isAnimated = willBeAnimated;
-  disabled !== state.disabled && (disabled && Object.assign(state, defaultComponentStateMounted), state.disabled = disabled, setState(function(_2) {
-    return __spreadValues({}, state);
+  disabled !== state2.disabled && (disabled && Object.assign(state2, defaultComponentStateMounted), state2.disabled = disabled, setState(function(_2) {
+    return __spreadValues({}, state2);
   }));
   var groupName = props.group, setStateShallow = useCreateShallowSetState(setState, props.debug);
   if (presenceState && isAnimated && isHydrated && staticConfig.variants) {
@@ -11040,7 +11199,7 @@ var useComponentState = function(props, animationDriver, staticConfig, config) {
     } = presenceState;
     isObj(custom) && Object.assign(props, custom);
     var exv = exitVariant != null ? exitVariant : enterExitVariant, env = enterVariant != null ? enterVariant : enterExitVariant;
-    state.unmounted && env && staticConfig.variants[env] ? props[env] = true : isExiting && exv && (props[exv] = exitVariant !== enterExitVariant);
+    state2.unmounted && env && staticConfig.variants[env] ? props[env] = true : isExiting && exv && (props[exv] = exitVariant !== enterExitVariant);
   }
   var noClass = !isWeb;
   return {
@@ -11058,7 +11217,7 @@ var useComponentState = function(props, animationDriver, staticConfig, config) {
     setState,
     setStateShallow,
     noClass,
-    state,
+    state: state2,
     stateRef,
     supportsCSS,
     willBeAnimated,
@@ -11159,7 +11318,7 @@ function createComponent(staticConfig) {
       presenceState,
       setState,
       noClass,
-      state,
+      state: state2,
       stateRef,
       supportsCSS,
       willBeAnimated,
@@ -11176,9 +11335,9 @@ function createComponent(staticConfig) {
       var listeners2 = /* @__PURE__ */ new Set();
       return (_stateRef_current_group = stateRef.current.group) === null || _stateRef_current_group === void 0 || (_stateRef_current_group_listeners = _stateRef_current_group.listeners) === null || _stateRef_current_group_listeners === void 0 || _stateRef_current_group_listeners.clear(), stateRef.current.group = {
         listeners: listeners2,
-        emit(state2) {
+        emit(state22) {
           listeners2.forEach(function(l) {
-            return l(state2);
+            return l(state22);
           });
         },
         subscribe(cb) {
@@ -11227,7 +11386,7 @@ function createComponent(staticConfig) {
     setDidGetVariableValue(false);
     var resolveValues = (
       // if HOC + mounted + has animation prop, resolve as value so it passes non-variable to child
-      isAnimated && !supportsCSS || isHOC && state.unmounted == false && hasAnimationProp ? "value" : "auto"
+      isAnimated && !supportsCSS || isHOC && state2.unmounted == false && hasAnimationProp ? "value" : "auto"
     ), styleProps2 = {
       mediaState,
       noClass,
@@ -11237,7 +11396,7 @@ function createComponent(staticConfig) {
       willBeAnimated,
       styledContext: styledContextValue
     }, themeName = (themeState == null ? void 0 : themeState.name) || "";
-    var splitStyles = useSplitStyles(props, staticConfig, theme, themeName, state, styleProps2, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp), isPassthrough = !splitStyles, contextForOverride = staticConfig.context;
+    var splitStyles = useSplitStyles(props, staticConfig, theme, themeName, state2, styleProps2, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp), isPassthrough = !splitStyles, contextForOverride = staticConfig.context;
     if (splitStyles == null ? void 0 : splitStyles.overriddenContextProps) {
       var _staticConfig_parentStaticConfig, contextForProps = staticConfig.context || ((_staticConfig_parentStaticConfig = staticConfig.parentStaticConfig) === null || _staticConfig_parentStaticConfig === void 0 ? void 0 : _staticConfig_parentStaticConfig.context);
       if (contextForProps) {
@@ -11283,7 +11442,7 @@ function createComponent(staticConfig) {
           pendingState && (stateRef.current.nextState = void 0, ogSetStateShallow(pendingState));
           return;
         }
-        var updatedState = stateRef.current.nextState || state, mediaState2 = stateRef.current.nextMedia, nextStyles = getSplitStyles(props, staticConfig, theme, themeName, updatedState, mediaState2 ? __spreadProps(__spreadValues({}, styleProps2), {
+        var updatedState = stateRef.current.nextState || state2, mediaState2 = stateRef.current.nextMedia, nextStyles = getSplitStyles(props, staticConfig, theme, themeName, updatedState, mediaState2 ? __spreadProps(__spreadValues({}, styleProps2), {
           mediaState: mediaState2
         }) : styleProps2, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp);
         useStyleListener((nextStyles == null ? void 0 : nextStyles.style) || {});
@@ -11314,7 +11473,7 @@ function createComponent(staticConfig) {
           }
         }
       }), stateRef.current.setStateShallow = function(nextOrGetNext) {
-        var prev = stateRef.current.nextState || state, next = typeof nextOrGetNext == "function" ? nextOrGetNext(prev) : nextOrGetNext;
+        var prev = stateRef.current.nextState || state2, next = typeof nextOrGetNext == "function" ? nextOrGetNext(prev) : nextOrGetNext;
         if (!(next === prev || isEqualShallow(prev, next))) {
           var canAvoidReRender = Object.keys(next).every(function(key3) {
             return avoidReRenderKeys.has(key3);
@@ -11324,9 +11483,9 @@ function createComponent(staticConfig) {
             updateGroupListeners2(), (_stateRef_current_updateStyleListener = (_stateRef_current = stateRef.current).updateStyleListener) === null || _stateRef_current_updateStyleListener === void 0 || _stateRef_current_updateStyleListener.call(_stateRef_current);
           } else ogSetStateShallow(next);
         }
-      }, setStateShallow = function(state2) {
+      }, setStateShallow = function(state22) {
         var _stateRef_current_setStateShallow, _stateRef_current;
-        (_stateRef_current_setStateShallow = (_stateRef_current = stateRef.current).setStateShallow) === null || _stateRef_current_setStateShallow === void 0 || _stateRef_current_setStateShallow.call(_stateRef_current, state2);
+        (_stateRef_current_setStateShallow = (_stateRef_current = stateRef.current).setStateShallow) === null || _stateRef_current_setStateShallow === void 0 || _stateRef_current_setStateShallow.call(_stateRef_current, state22);
       };
     }
     if (splitStyles) {
@@ -11408,7 +11567,7 @@ function createComponent(staticConfig) {
         styleState: splitStyles,
         useStyleEmitter,
         presence,
-        componentState: state,
+        componentState: state2,
         styleProps: styleProps2,
         theme,
         themeName,
@@ -11416,7 +11575,7 @@ function createComponent(staticConfig) {
         staticConfig,
         stateRef
       });
-      animations && (animations.ref && (animatedRef = animations.ref), isHydrated && animations && (animationStyles = animations.style, viewProps.style = animationStyles, animations.className && (viewProps.className = `${state.unmounted === "should-enter" ? "t_unmounted " : ""}${viewProps.className || ""} ${animations.className}`)));
+      animations && (animations.ref && (animatedRef = animations.ref), isHydrated && animations && (animationStyles = animations.style, viewProps.style = animationStyles, animations.className && (viewProps.className = `${state2.unmounted === "should-enter" ? "t_unmounted " : ""}${viewProps.className || ""} ${animations.className}`)));
     }
     !isPassthrough && groupContext && // avoids onLayout if we don't need it
     props.containerType !== "normal" && (nonTamaguiProps.onLayout = composeEventHandlers(nonTamaguiProps.onLayout, function(e) {
@@ -11436,13 +11595,13 @@ function createComponent(staticConfig) {
       });
     };
     useIsomorphicLayoutEffect(function() {
-      if (state.unmounted === true && hasEnterStyle) {
+      if (state2.unmounted === true && hasEnterStyle) {
         setStateShallow({
           unmounted: "should-enter"
         });
         return;
       }
-      if (state.unmounted) {
+      if (state2.unmounted) {
         if (supportsCSS) {
           var cancelled = false;
           return requestAnimationFrame(function() {
@@ -11463,7 +11622,7 @@ function createComponent(staticConfig) {
         var _stateRef_current_mediaEmitCleanup, _stateRef_current;
         componentSetStates.delete(setState), (_stateRef_current_mediaEmitCleanup = (_stateRef_current = stateRef.current).mediaEmitCleanup) === null || _stateRef_current_mediaEmitCleanup === void 0 || _stateRef_current_mediaEmitCleanup.call(_stateRef_current);
       };
-    }, [state.unmounted, supportsCSS]), useIsomorphicLayoutEffect(function() {
+    }, [state2.unmounted, supportsCSS]), useIsomorphicLayoutEffect(function() {
       if (!disabled && !(!pseudoGroups && !mediaGroups) && allGroupContexts) return subscribeToContextGroup({
         groupContext: allGroupContexts,
         setStateShallow,
@@ -11473,9 +11632,9 @@ function createComponent(staticConfig) {
     }, [allGroupContexts, disabled, pseudoGroups ? objectIdentityKey(pseudoGroups) : 0, mediaGroups ? objectIdentityKey(mediaGroups) : 0]);
     var groupEmitter = stateRef.current.group;
     useIsomorphicLayoutEffect(function() {
-      !groupContext || !groupEmitter || notifyGroupSubscribers(groupContext, groupEmitter, state);
-    }, [groupContext, groupEmitter, state]);
-    var runtimePressStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.pressStyle), runtimeFocusStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.focusStyle), runtimeFocusVisibleStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.focusVisibleStyle), attachFocus = !!(runtimePressStyle || runtimeFocusStyle || runtimeFocusVisibleStyle || onFocus || onBlur || componentContext.setParentFocusState), hasDynamicGroupChildren = !!(groupName && state.hasDynGroupChildren), attachPress = !!(hasDynamicGroupChildren || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick || (pseudos == null ? void 0 : pseudos.focusVisibleStyle)), runtimeHoverStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.hoverStyle), needsHoverState = !!(hasDynamicGroupChildren || runtimeHoverStyle), attachHover = isWeb, shouldAttach = !disabled && !props.asChild && !!(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle), needsPressState = !!(hasDynamicGroupChildren || runtimePressStyle);
+      !groupContext || !groupEmitter || notifyGroupSubscribers(groupContext, groupEmitter, state2);
+    }, [groupContext, groupEmitter, state2]);
+    var runtimePressStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.pressStyle), runtimeFocusStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.focusStyle), runtimeFocusVisibleStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.focusVisibleStyle), attachFocus = !!(runtimePressStyle || runtimeFocusStyle || runtimeFocusVisibleStyle || onFocus || onBlur || componentContext.setParentFocusState), hasDynamicGroupChildren = !!(groupName && state2.hasDynGroupChildren), attachPress = !!(hasDynamicGroupChildren || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick || (pseudos == null ? void 0 : pseudos.focusVisibleStyle)), runtimeHoverStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.hoverStyle), needsHoverState = !!(hasDynamicGroupChildren || runtimeHoverStyle), attachHover = isWeb, shouldAttach = !disabled && !props.asChild && !!(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle), needsPressState = !!(hasDynamicGroupChildren || runtimePressStyle);
     var events = shouldAttach ? __spreadValues(__spreadValues(__spreadProps(__spreadValues({
       onPressOut: attachPress ? function(e) {
         unPress(), onPressOut == null ? void 0 : onPressOut(e), onMouseUp == null ? void 0 : onMouseUp(e);
@@ -11483,7 +11642,7 @@ function createComponent(staticConfig) {
     }, attachPress && {
       onMouseEnter: function(e) {
         var next = {};
-        needsHoverState && true && (next.hover = true), needsPressState && state.pressIn && (next.press = true), setStateShallow(next), onHoverIn == null ? void 0 : onHoverIn(e), onMouseEnter == null ? void 0 : onMouseEnter(e);
+        needsHoverState && true && (next.hover = true), needsPressState && state2.pressIn && (next.press = true), setStateShallow(next), onHoverIn == null ? void 0 : onHoverIn(e), onMouseEnter == null ? void 0 : onMouseEnter(e);
       },
       onMouseLeave: function(e) {
         var next = {};
@@ -11549,7 +11708,7 @@ function createComponent(staticConfig) {
       var renderProps = __spreadProps(__spreadValues({}, viewProps), {
         children: content
       });
-      content = renderProp(renderProps, state);
+      content = renderProp(renderProps, state2);
     } else if (renderProp && (typeof renderProp > "u" ? "undefined" : _type_of$1(renderProp)) === "object" && /* @__PURE__ */ React.isValidElement(renderProp)) {
       var elementProps = renderProp.props || {}, mergedProps = mergeRenderElementProps(elementProps, viewProps, content);
       content = /* @__PURE__ */ React.cloneElement(renderProp, mergedProps);
@@ -12327,13 +12486,13 @@ function usePropsAndStyle(props, opts2) {
       return true;
     }
   }), componentContext = React.useContext(ComponentContext), groupContext = React.useContext(GroupContext), {
-    state,
+    state: state2,
     disabled,
     setStateShallow
   } = useComponentState(props, componentContext.animationDriver, staticConfig, getConfig()), mediaStateNow = (opts2 == null ? void 0 : opts2.noMedia) ? (
     // not safe to use mediaState but really marginal to hit this
     exports.mediaState
-  ) : useMedia(), splitStyles = useSplitStyles(props, staticConfig, theme, (themeState == null ? void 0 : themeState.name) || "", state, __spreadValues({
+  ) : useMedia(), splitStyles = useSplitStyles(props, staticConfig, theme, (themeState == null ? void 0 : themeState.name) || "", state2, __spreadValues({
     isAnimated: false,
     mediaState: mediaStateNow,
     noSkip: true,
@@ -12346,7 +12505,7 @@ function usePropsAndStyle(props, opts2) {
   } = splitStyles || {};
   return useIsomorphicLayoutEffect(function() {
     if (!disabled) {
-      if (state.unmounted) {
+      if (state2.unmounted) {
         setStateShallow({
           unmounted: false
         });