@tamagui/core 1.143.0 → 2.0.0-1

package/dist/native.cjs

@@ -278,7 +278,8 @@ var ComponentContext = createStyledContext({
   inText: false,
   language: null,
   animationDriver: null,
-  setParentFocusState: null
+  setParentFocusState: null,
+  insets: null
 }), useConfiguration = function() {
   return React.useContext(ComponentContext);
 };
@@ -987,7 +988,7 @@ function getTouchFromResponderEvent(event) {
   var _event$nativeEvent = event.nativeEvent, changedTouches = _event$nativeEvent.changedTouches, touches = _event$nativeEvent.touches;
   return touches != null && touches.length > 0 ? touches[0] : changedTouches != null && changedTouches.length > 0 ? changedTouches[0] : event.nativeEvent;
 }
-function usePressEvents(_, config) {
+function usePressEvents(_2, config) {
   var pressResponderRef = React.useRef(null);
   pressResponderRef.current == null && (pressResponderRef.current = new PressResponder(config));
   var pressResponder = pressResponderRef.current;
@@ -5982,7 +5983,7 @@ const Image$1 = React__namespace.forwardRef((props, ref) => {
   }, [uri, requestRef, updateState, onError, onLoad, onLoadEnd, onLoadStart]), /* @__PURE__ */ jsxRuntimeExports.jsxs(
     View$3,
     __spreadProps(__spreadValues({}, rest), {
-      accessibilityLabel,
+      "aria-label": accessibilityLabel,
       onLayout: handleLayout,
       pointerEvents,
       ref,
@@ -7159,7 +7160,7 @@ const Image = React__namespace.forwardRef((props, ref) => {
     }
     return abortPendingRequest;
   }, [uri, requestRef, updateState, onError, onLoad, onLoadEnd, onLoadStart]), /* @__PURE__ */ jsxRuntimeExports.jsxs(View$2, __spreadProps(__spreadValues({}, rest), {
-    accessibilityLabel,
+    "aria-label": accessibilityLabel,
     onLayout: handleLayout,
     pointerEvents,
     ref,
@@ -8368,7 +8369,6 @@ var THEME_NAME_SEPARATOR = "_", THEME_CLASSNAME_PREFIX = "t_", FONT_DATA_ATTRIBU
   flexDirection: "column",
   flexBasis: "auto",
   boxSizing: "border-box",
-  position: process.env.TAMAGUI_POSITION_STATIC === "1" ? "static" : "relative",
   minHeight: 0,
   minWidth: 0,
   flexShrink: 0
@@ -8394,8 +8394,8 @@ var conf$1, getConfigFromGlobalOrLocal = function() {
 }, getConfigMaybe = function() {
   return getConfigFromGlobalOrLocal();
 }, tokensMerged;
-function setTokens(_) {
-  tokensMerged = _;
+function setTokens(_2) {
+  tokensMerged = _2;
 }
 var getTokens = function() {
   var {
@@ -8520,6 +8520,79 @@ function resolvePlatformNames(nativeProp) {
   ) : Array.isArray(nativeProp) ? nativeProp : [nativeProp], set = new Set(platforms2);
   return set.has("mobile") && (set.add("android"), set.add("ios"), set.delete("mobile")), set;
 }
+var webOnlyStylePropsView = {
+  transition: true,
+  textWrap: true,
+  backdropFilter: true,
+  WebkitBackdropFilter: true,
+  // These background-* props are web-only CSS, but NOT backgroundColor
+  background: true,
+  backgroundAttachment: true,
+  backgroundBlendMode: true,
+  backgroundClip: true,
+  backgroundImage: true,
+  backgroundOrigin: true,
+  backgroundPosition: true,
+  backgroundRepeat: true,
+  backgroundSize: true,
+  borderBottomStyle: true,
+  borderImage: true,
+  borderLeftStyle: true,
+  borderRightStyle: true,
+  borderTopStyle: true,
+  boxSizing: true,
+  caretColor: true,
+  clipPath: true,
+  contain: true,
+  containerType: true,
+  content: true,
+  cursor: true,
+  float: true,
+  mask: true,
+  maskBorder: true,
+  maskBorderMode: true,
+  maskBorderOutset: true,
+  maskBorderRepeat: true,
+  maskBorderSlice: true,
+  maskBorderSource: true,
+  maskBorderWidth: true,
+  maskClip: true,
+  maskComposite: true,
+  maskImage: true,
+  maskMode: true,
+  maskOrigin: true,
+  maskPosition: true,
+  maskRepeat: true,
+  maskSize: true,
+  maskType: true,
+  mixBlendMode: true,
+  objectFit: true,
+  objectPosition: true,
+  outlineOffset: true,
+  outlineStyle: true,
+  outlineWidth: true,
+  outlineColor: true,
+  overflowBlock: true,
+  overflowInline: true,
+  overflowX: true,
+  overflowY: true,
+  // NOTE: pointerEvents is NOT web-only - it's a core React Native View prop (not a style)
+  pointerEvents: true,
+  scrollbarWidth: true,
+  textEmphasis: true,
+  touchAction: true,
+  transformStyle: true,
+  userSelect: true,
+  willChange: true
+}, webOnlyStylePropsText = {
+  whiteSpace: true,
+  wordWrap: true,
+  textOverflow: true,
+  textDecorationDistance: true,
+  cursor: true,
+  WebkitLineClamp: true,
+  WebkitBoxOrient: true
+};
 var textColors = {
   color: true,
   textDecorationColor: true,
@@ -8623,7 +8696,7 @@ var textColors = {
   rotateY: true,
   rotateX: true,
   rotateZ: true
-}, stylePropsView = __spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+}, stylePropsView = __spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
   backfaceVisibility: true,
   borderBottomEndRadius: true,
   borderBottomStartRadius: true,
@@ -8709,7 +8782,9 @@ var textColors = {
   direction: true,
   shadowOffset: true,
   shadowRadius: true
-}, tokenCategories.color), tokenCategories.radius), tokenCategories.size), tokenCategories.radius), stylePropsTransform), stylePropsUnitless), {
+}, tokenCategories.color), tokenCategories.radius), tokenCategories.size), tokenCategories.radius), stylePropsTransform), stylePropsUnitless), isAndroid ? {
+  elevationAndroid: true
+} : {}), {
   boxShadow: true,
   filter: true
 }), !process.env.REACT_NATIVE_PRE_77 && {
@@ -8719,9 +8794,7 @@ var textColors = {
   outlineSpread: true,
   outlineStyle: true,
   outlineWidth: true
-}), isAndroid ? {
-  elevationAndroid: true
-} : {}), stylePropsFont = {
+}), stylePropsFont = {
   fontFamily: true,
   fontSize: true,
   fontStyle: true,
@@ -8738,7 +8811,6 @@ var textColors = {
   textShadowOffset: true,
   textShadowRadius: true,
   userSelect: true,
-  selectable: true,
   verticalAlign: true
 }), stylePropsText = __spreadValues(__spreadValues({}, stylePropsView), stylePropsTextOnly), stylePropsAll = stylePropsText, validPseudoKeys = {
   enterStyle: true,
@@ -8756,14 +8828,14 @@ function _type_of$6(obj) {
 var Decorated = Symbol(), withStaticProperties = function(component, staticProps) {
   var next = (function() {
     if (component[Decorated]) {
-      var _ = /* @__PURE__ */ React.forwardRef(function(props, ref) {
+      var _2 = /* @__PURE__ */ React.forwardRef(function(props, ref) {
         return /* @__PURE__ */ React.createElement(component, __spreadProps(__spreadValues({}, props), {
           ref
         }));
       });
       for (var key in component) {
         var v = component[key];
-        _[key] = v && (typeof v > "u" ? "undefined" : _type_of$6(v)) === "object" ? __spreadValues({}, v) : v;
+        _2[key] = v && (typeof v > "u" ? "undefined" : _type_of$6(v)) === "object" ? __spreadValues({}, v) : v;
       }
     }
     return component;
@@ -8871,8 +8943,7 @@ var ThemeStateContext = React.createContext(""), allListeners = /* @__PURE__ */
   if (disable) return states.get(parentId) || {
     id: "",
     name: "light",
-    theme: getConfig().themes.light,
-    inverses: 0
+    theme: getConfig().themes.light
   };
   var id2 = React.useId(), subscribe2 = React.useCallback(function(cb) {
     var _listenersByParent, _parentId;
@@ -8918,14 +8989,14 @@ var ThemeStateContext = React.createContext(""), allListeners = /* @__PURE__ */
     }
     return [false, next];
   }
-  var scheme = getScheme(name), _parentState_inverses, parentInverses = (_parentState_inverses = parentState == null ? void 0 : parentState.inverses) !== null && _parentState_inverses !== void 0 ? _parentState_inverses : 0, isInverse = parentState && scheme !== parentState.scheme, inverses = parentInverses + (isInverse ? 1 : 0), nextState = {
+  var scheme = getScheme(name), isInverse = parentState && scheme !== parentState.scheme, nextState = {
     id: id2,
     name,
     theme: themes[name],
     scheme,
     parentId,
     parentName: parentState == null ? void 0 : parentState.name,
-    inverses,
+    // inverses,
     isInverse,
     isNew: true
   };
@@ -8971,7 +9042,6 @@ function getNewThemeName() {
     name,
     reset,
     componentName,
-    inverse,
     debug
   } = arguments.length > 1 ? arguments[1] : void 0, forceUpdate = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
   if (name && reset) throw new Error("❌004");
@@ -9057,11 +9127,6 @@ function getNewThemeName() {
     }
     if (found) break;
   }
-  if (inverse) {
-    found || (found = parentName);
-    var scheme1 = found.split("_")[0];
-    found = found.replace(new RegExp(`^${scheme1}`), scheme1 === "light" ? "dark" : "light");
-  }
   return !forceUpdate && found === parentName && // if its a scheme only sub-theme, we always consider it "new" because it likely inverses
   // and we want to avoid reparenting
   !validSchemes[found] ? null : found;
@@ -9070,13 +9135,12 @@ var getPropsKey = function(param) {
   var {
     name,
     reset,
-    inverse,
     forceClassName,
     componentName
   } = param;
-  return `${name || ""}${inverse || ""}${reset || ""}${forceClassName || ""}${componentName || ""}`;
+  return `${name || ""}${reset || ""}${forceClassName || ""}${componentName || ""}`;
 }, hasThemeUpdatingProps = function(props) {
-  return "inverse" in props || "name" in props || "reset" in props || "forceClassName" in props;
+  return "name" in props || "reset" in props || "forceClassName" in props;
 };
 function doesRootSchemeMatchSystem() {
   var _getRootThemeState;
@@ -9102,9 +9166,8 @@ function getThemeProxied(_props, _state, _keys) {
         if (curState) {
           var outVal = getVariable(value), {
             name,
-            scheme,
-            inverses
-          } = curState, shouldOptimize = scheme && platform !== "web" && isIos && !curProps.deopt && getSetting("fastSchemeChange") && inverses === 0 && doesRootSchemeMatchSystem();
+            scheme
+          } = curState, shouldOptimize = scheme && platform !== "web" && isIos && !curProps.deopt && getSetting("fastSchemeChange") && doesRootSchemeMatchSystem();
           if (shouldOptimize) {
             var _config_themes_name, _config_themes_oppositeName, oppositeScheme = scheme === "dark" ? "light" : "dark", oppositeName = name.replace(scheme, oppositeScheme), color = getVariable((_config_themes_name = config.themes[name]) === null || _config_themes_name === void 0 ? void 0 : _config_themes_name[key]), oppositeColor = getVariable((_config_themes_oppositeName = config.themes[oppositeName]) === null || _config_themes_oppositeName === void 0 ? void 0 : _config_themes_oppositeName[key]), dynamicVal = getDynamicVal({
               scheme,
@@ -9121,8 +9184,8 @@ function getThemeProxied(_props, _state, _keys) {
   }));
   return cache$3.set(_state.theme, proxied1), proxied1;
 }
-var useTheme = function() {
-  var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, [theme] = useThemeWithState(props), res = theme;
+var EMPTY = {}, useTheme = function() {
+  var [theme] = useThemeWithState(EMPTY), res = theme;
   return res;
 }, useThemeWithState = function(props) {
   var isRoot = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false, keys = React.useRef(null), themeState = useThemeState(props, isRoot, keys);
@@ -9187,8 +9250,8 @@ function matchMediaFallback(query2) {
     matches: false
   };
 }
-function setupMatchMedia(_) {
-  matchMediaImpl = _, globalThis.matchMedia = _;
+function setupMatchMedia(_2) {
+  matchMediaImpl = _2, globalThis.matchMedia = _2;
 }
 exports.mediaState = // development only safeguard
 {};
@@ -9200,8 +9263,7 @@ var mediaQueryConfig = {}, getMedia = function() {
   var match = key.match(mediaKeyRegex);
   return match ? match[1] : false;
 }, initState, mediaKeysOrdered, getMediaKeyImportance = function(key) {
-  var conf2 = getConfig();
-  return conf2.settings.mediaPropOrder ? defaultMediaImportance : mediaKeysOrdered.indexOf(key) + 100;
+  return mediaKeysOrdered.indexOf(key) + 100;
 }, dispose = /* @__PURE__ */ new Set(), mediaVersion = 0, configureMedia = function(config) {
   var {
     media
@@ -9293,7 +9355,7 @@ function useMedia(componentContext, debug) {
     return lastState;
   }, getServerSnapshot);
   return new Proxy(state, {
-    get(_, key) {
+    get(_2, key) {
       return !disableMediaTouch && typeof key == "string" && keys.add(key), Reflect.get(state, key);
     }
   });
@@ -9317,7 +9379,7 @@ function getMediaState(mediaGroups, layout) {
   return res;
 }
 var getMediaImportanceIfMoreImportant = function(mediaKey, key, styleState, isSizeMedia) {
-  var importance = isSizeMedia && !getSetting("mediaPropOrder") ? getMediaKeyImportance(mediaKey) : defaultMediaImportance, usedKeys = styleState.usedKeys;
+  var importance = isSizeMedia ? getMediaKeyImportance(mediaKey) : defaultMediaImportance, usedKeys = styleState.usedKeys;
   return !usedKeys[key] || importance > usedKeys[key] ? importance : null;
 };
 function camelToHyphen(str) {
@@ -9343,7 +9405,7 @@ function mediaKeyMatch(key, dimensions2) {
   return result;
 }
 function getGroupPropParts(groupProp) {
-  var mediaQueries = getMedia(), [_, name, part3, part4] = groupProp.split("-"), pseudo, media = part3 in mediaQueries ? part3 : void 0;
+  var mediaQueries = getMedia(), [_2, name, part3, part4] = groupProp.split("-"), pseudo, media = part3 in mediaQueries ? part3 : void 0;
   return media ? pseudo = part4 : pseudo = part3, {
     name,
     pseudo,
@@ -9354,15 +9416,15 @@ var MEDIA_SEP = "_", prefixes = null, selectors = null, groupPseudoToPseudoCSSMa
   press: "active",
   focusVisible: "focus-visible",
   focusWithin: "focus-within"
-}, specificities = new Array(5).fill(0).map(function(_, i) {
+}, specificities = new Array(5).fill(0).map(function(_2, i) {
   return new Array(i).fill(":root").join("");
 });
 function getThemeOrGroupSelector(name, styleInner, isGroup, groupParts) {
-  var isTheme = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : false, precedenceImportancePrefix = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : "", selectorStart = styleInner.lastIndexOf(":root") + 5, selectorEnd = styleInner.lastIndexOf("{"), selector = styleInner.slice(selectorStart, selectorEnd), precedenceSpace = getSetting("themeClassNameOnRoot") && isTheme ? "" : " ", pseudoSelectorName = groupParts.pseudo ? groupPseudoToPseudoCSSMap[groupParts.pseudo] || groupParts.pseudo : void 0, pseudoSelector = pseudoSelectorName ? `:${pseudoSelectorName}` : "", presedencePrefix = `:root${precedenceImportancePrefix}${precedenceSpace}`, mediaSelector = `.t_${isGroup ? "group_" : ""}${name}${pseudoSelector}`;
+  var isTheme = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : false, precedenceImportancePrefix = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : "", selectorStart = styleInner.lastIndexOf(":root") + 5, selectorEnd = styleInner.lastIndexOf("{"), selector = styleInner.slice(selectorStart, selectorEnd), precedenceSpace = getSetting("addThemeClassName") !== false && isTheme ? "" : " ", pseudoSelectorName = groupParts.pseudo ? groupPseudoToPseudoCSSMap[groupParts.pseudo] || groupParts.pseudo : void 0, pseudoSelector = pseudoSelectorName ? `:${pseudoSelectorName}` : "", presedencePrefix = `:root${precedenceImportancePrefix}${precedenceSpace}`, mediaSelector = `.t_${isGroup ? "group_" : ""}${name}${pseudoSelector}`;
   return [selector, `${presedencePrefix}${mediaSelector} ${selector.replaceAll(":root", "")}`];
 }
 var createMediaStyle = function(styleObject, mediaKeyIn, mediaQueries, type, negate, priority) {
-  var [propertyIn, , identifier, pseudoIn, rules] = styleObject, property = propertyIn, enableMediaPropOrder = getSetting("mediaPropOrder"), isTheme = type === "theme", isPlatform = type === "platform", isGroup = type === "group", isNonWindowMedia = isTheme || isPlatform || isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id2 = `${ogPrefix}${MEDIA_SEP}${mediaKeyIn.replace("-", "")}${negKey}${MEDIA_SEP}`, styleRule = "", groupPriority = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id2), styleInner = rules.map(function(rule) {
+  var [property, , identifier, pseudoIn, rules] = styleObject, isTheme = type === "theme", isPlatform = type === "platform", isGroup = type === "group", isNonWindowMedia = isTheme || isPlatform || isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id2 = `${ogPrefix}${MEDIA_SEP}${mediaKeyIn.replace("-", "")}${negKey}${MEDIA_SEP}`, styleRule = "", groupPriority = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id2), styleInner = rules.map(function(rule) {
     return rule.replace(identifier, nextIdentifier);
   }).join(";"), isHover = false;
   if (isNonWindowMedia) {
@@ -9383,17 +9445,11 @@ var createMediaStyle = function(styleObject, mediaKeyIn, mediaQueries, type, neg
       var mediaKeys2 = Object.keys(mediaQueries);
       selectors = Object.fromEntries(mediaKeys2.map(function(key) {
         return [key, mediaObjectToString(mediaQueries[key])];
-      })), enableMediaPropOrder || (prefixes = Object.fromEntries(mediaKeys2.map(function(k, index2) {
+      })), prefixes = Object.fromEntries(mediaKeys2.map(function(k, index2) {
         return [k, new Array(index2 + 1).fill(":root").join("")];
-      })));
+      }));
     }
-    var mediaKey = groupMediaKey || mediaKeyIn, mediaSelector = selectors[mediaKey], screenStr = negate ? "not all and " : "", mediaQuery = `${screenStr}${mediaSelector}`, precedenceImportancePrefix = groupMediaKey ? groupPriority : enableMediaPropOrder && priority ? (
-      // this new array should be cached
-      specificities[priority]
-    ) : (
-      // @ts-ignore
-      prefixes[mediaKey]
-    ), prefix = groupMediaKey ? `@container ${containerName}` : "@media";
+    var mediaKey = groupMediaKey || mediaKeyIn, mediaSelector = selectors[mediaKey], screenStr = negate ? "not all and " : "", mediaQuery = `${screenStr}${mediaSelector}`, precedenceImportancePrefix = groupMediaKey ? groupPriority : prefixes[mediaKey], prefix = groupMediaKey ? `@container ${containerName}` : "@media";
     groupMediaKey && (styleInner = styleRule), styleInner.includes(prefix) ? styleRule = styleInner.replace("{", ` and ${mediaQuery} {`).replace("and screen and", "and") : styleRule = `${prefix} ${mediaQuery}{${precedenceImportancePrefix}${styleInner}}`, groupMediaKey && (styleRule = `@supports (contain: ${getSetting("webContainerType") || "inline-size"}) {${styleRule}}`);
   }
   return isHover && (styleRule = `@media (hover:hover){${styleRule}}`), [property, void 0, nextIdentifier, void 0, [styleRule]];
@@ -9460,7 +9516,7 @@ var empty = function() {
 function scanAllSheets() {
 }
 process.env.TAMAGUI_BAIL_AFTER_SCANNING_X_CSS_RULES;
-function setNonce(_) {
+function setNonce(_2) {
 }
 function insertStyleRules(rulesToInsert) {
 }
@@ -9587,15 +9643,13 @@ var cache$1 = /* @__PURE__ */ new WeakMap(), getVariantExtras = function(styleSt
     props,
     conf: conf2,
     context,
-    theme,
-    styleProps: styleProps2
+    theme
   } = styleState, fonts = conf2.fontsParsed;
   (context == null ? void 0 : context.language) && (fonts = getFontsForLanguage(conf2.fontsParsed, context.language));
   var next = {
     fonts,
     tokens: conf2.tokensParsed,
     theme,
-    context: styleProps2 == null ? void 0 : styleProps2.styledContext,
     get fontFamily() {
       return getVariableValue(styleState.fontFamily || styleState.props.fontFamily) || props.fontFamily || getVariableValue(getSetting("defaultFont"));
     },
@@ -9639,58 +9693,66 @@ function normalizeStyle$1(style) {
   }
   return fixStyles(res), res;
 }
-var webPropsToSkip = {
-  whiteSpace: 1,
-  wordWrap: 1,
-  textOverflow: 1,
-  textDecorationDistance: 1,
-  cursor: 1,
-  contain: 1,
-  boxSizing: 1,
-  touchAction: 1,
-  outlineStyle: 1,
-  outlineOffset: 1,
-  outlineWidth: 1,
-  outlineColor: 1,
-  backdropFilter: 1,
-  backgroundImage: 1,
-  mixBlendMode: 1,
-  scrollbarWidth: 1,
-  backgroundOrigin: 1,
-  backgroundPosition: 1,
-  backgroundRepeat: 1,
-  backgroundSize: 1,
-  backgroundClip: 1,
-  backgroundBlendMode: 1,
-  backgroundAttachment: 1,
-  background: 1,
-  clipPath: 1,
-  caretColor: 1,
-  transformStyle: 1,
-  mask: 1,
-  maskImage: 1,
-  textEmphasis: 1,
-  borderImage: 1,
-  float: 1,
-  content: 1,
-  overflowBlock: 1,
-  overflowInline: 1,
-  maskBorder: 1,
-  maskBorderMode: 1,
-  maskBorderOutset: 1,
-  maskBorderRepeat: 1,
-  maskBorderSlice: 1,
-  maskBorderSource: 1,
-  maskBorderWidth: 1,
-  maskClip: 1,
-  maskComposite: 1,
-  maskMode: 1,
-  maskOrigin: 1,
-  maskPosition: 1,
-  maskRepeat: 1,
-  maskSize: 1,
-  maskType: 1
-};
+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;
+  if (value.endsWith("rem") && !value.includes(" ")) {
+    var numericValue = Number.parseFloat(value);
+    if (!Number.isNaN(numericValue)) return PixelRatio2.getFontScale() * baseFontSize * numericValue;
+  }
+  for (var result = 0, match; (match = remRegex.exec(value)) !== null; ) {
+    var numericValue1 = Number.parseFloat(match[1]);
+    Number.isNaN(numericValue1) || (result += PixelRatio2.getFontScale() * baseFontSize * numericValue1);
+  }
+  return remRegex.lastIndex = 0, result;
+}
+function isRemValue(value) {
+  return typeof value == "string" && value.includes("rem");
+}
+var _c = webOnlyStylePropsView, {
+  pointerEvents: _
+} = _c, webOnlyStylePropsViewWithoutPointerEvents = __objRest(_c, [
+  "pointerEvents"
+]), webPropsToSkip = __spreadProps(__spreadValues(__spreadValues({}, webOnlyStylePropsViewWithoutPointerEvents), webOnlyStylePropsText), {
+  // Web-only event handlers
+  onClick: 1,
+  onDoubleClick: 1,
+  onContextMenu: 1,
+  onMouseEnter: 1,
+  onMouseLeave: 1,
+  onMouseMove: 1,
+  onMouseOver: 1,
+  onMouseOut: 1,
+  onMouseDown: 1,
+  onMouseUp: 1,
+  onWheel: 1,
+  onKeyDown: 1,
+  onKeyUp: 1,
+  onKeyPress: 1,
+  onPointerDown: 1,
+  onPointerMove: 1,
+  onPointerUp: 1,
+  onPointerCancel: 1,
+  onPointerEnter: 1,
+  onPointerLeave: 1,
+  onDrag: 1,
+  onDragStart: 1,
+  onDragEnd: 1,
+  onDragEnter: 1,
+  onDragLeave: 1,
+  onDragOver: 1,
+  onDrop: 1,
+  onChange: 1,
+  onInput: 1,
+  onBeforeInput: 1,
+  onScroll: 1,
+  onCopy: 1,
+  onCut: 1,
+  onPaste: 1,
+  // Other web-only props
+  htmlFor: 1,
+  dangerouslySetInnerHTML: 1
+});
 var skipProps = {
   untilMeasured: 1,
   animation: 1,
@@ -9704,7 +9766,6 @@ var skipProps = {
   style: 1,
   // handled after loop so pseudos set usedKeys and override it if necessary
   group: 1,
-  themeInverse: 1,
   animatePresence: 1
 };
 Object.assign(skipProps, webPropsToSkip);
@@ -9740,7 +9801,7 @@ var propMapper = function(key, value, styleState, disabled, map) {
     }
     styleProps2.disableExpandShorthands || key in conf2.shorthands && (key = conf2.shorthands[key]);
     var originalValue = value;
-    if (value != null && (value[0] === "$" ? value = getTokenForKey(key, value, styleProps2, styleState) : isVariable(value) && (value = resolveVariableValue(key, value, styleProps2.resolveValues))), value != null) {
+    if (value != null && (value[0] === "$" ? value = getTokenForKey(key, value, styleProps2, styleState) : isVariable(value) ? value = resolveVariableValue(key, value, styleProps2.resolveValues) : isRemValue(value) && (value = resolveRem(value))), 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++) {
@@ -9824,8 +9885,8 @@ var variableToFontNameCache = /* @__PURE__ */ new WeakMap(), resolveTokensAndVar
               for (var _iterator = variantOut[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
                 var [_$key, val1] = _step.value;
                 if (val1 != null) if (_$key in pseudoDescriptors) {
-                  var _res, _key1, _;
-                  (_ = (_res = res)[_key1 = _$key]) !== null && _ !== void 0 || (_res[_key1] = {}), Object.assign(res[_$key], val1);
+                  var _res, _key1, _2;
+                  (_2 = (_res = res)[_key1 = _$key]) !== null && _2 !== void 0 || (_res[_key1] = {}), Object.assign(res[_$key], val1);
                 } else res[_$key] = val1;
               }
             } catch (err) {
@@ -9846,10 +9907,7 @@ var variableToFontNameCache = /* @__PURE__ */ new WeakMap(), resolveTokensAndVar
         continue;
       }
       if (typeof val == "string") {
-        var fVal = (
-          // SYNC WITH *1
-          val[0] === "$" ? getTokenForKey(subKey, val, styleProps2, styleState) : val
-        );
+        var fVal = val[0] === "$" ? getTokenForKey(subKey, val, styleProps2, styleState) : isRemValue(val) ? resolveRem(val) : val;
         res[subKey] = fVal;
         continue;
       }
@@ -10020,10 +10078,6 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
       if (keyInit === "userSelect") keyInit = "selectable", valInit = valInit !== "none";
       else if (keyInit.startsWith("data-")) return "continue";
     }
-    if (keyInit === "dataSet") {
-      for (var keyInit1 in valInit) viewProps[`data-${hyphenate(keyInit1)}`] = valInit[keyInit1];
-      return "continue";
-    }
     var isVariant = !isValidStyleKeyInit && variants && keyInit in variants, isStyleLikeKey = isValidStyleKeyInit || isVariant, isPseudo = keyInit in validPseudoKeys, isMedia = !isStyleLikeKey && !isPseudo ? getMediaKey(keyInit) : false, isMediaOrPseudo = !!(isMedia || isPseudo);
     isMediaOrPseudo && isMedia === "group" && (keyInit = normalizeGroupKey(keyInit, groupContext));
     var isStyleProp = isValidStyleKeyInit || isMediaOrPseudo || isVariant && !noExpand;
@@ -10097,9 +10151,10 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
         }
         if (isMedia) {
           if (!val2) return;
-          val2.space;
           var mediaKeyShort = key4.slice(isMedia == "theme" ? 7 : 1);
-          if (hasMedia || (hasMedia = true), (!hasMedia || typeof hasMedia == "boolean") && (hasMedia = /* @__PURE__ */ new Set()), hasMedia.add(mediaKeyShort), isMedia === "platform" && !isActivePlatform(key4)) return;
+          hasMedia || (hasMedia = true);
+          val2.space;
+          if ((!hasMedia || typeof hasMedia == "boolean") && (hasMedia = /* @__PURE__ */ new Set()), hasMedia.add(mediaKeyShort), isMedia === "platform" && !isActivePlatform(key4)) return;
           var priority = mediaStylesSeen;
           if (mediaStylesSeen += 1, shouldDoClasses) ;
           else {
@@ -10122,12 +10177,16 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
                 (_styleState3 = styleState).style || (_styleState3.style = {});
                 var scheme = mediaKeyShort, oppositeScheme = getOppositeScheme(mediaKeyShort), themeOriginalValues = styleOriginalValues.get(mediaStyle1);
                 for (var subKey1 in mediaStyle1) {
-                  var _$val1 = extractValueFromDynamic(mediaStyle1[subKey1], scheme), oppositeVal = extractValueFromDynamic(styleState.style[subKey1], oppositeScheme);
-                  mediaStyle1[subKey1] = getDynamicVal({
-                    scheme,
-                    val: _$val1,
-                    oppositeVal
-                  }), mergeStyle(styleState, subKey1, mediaStyle1[subKey1], priority, false, themeOriginalValues == null ? void 0 : themeOriginalValues[subKey1]);
+                  var _$val1 = extractValueFromDynamic(mediaStyle1[subKey1], scheme), existing = styleState.style[subKey1];
+                  if (existing == null ? void 0 : existing.dynamic) existing.dynamic[scheme] = _$val1, mediaStyle1[subKey1] = existing;
+                  else {
+                    var oppositeVal = extractValueFromDynamic(existing, oppositeScheme);
+                    mediaStyle1[subKey1] = getDynamicVal({
+                      scheme,
+                      val: _$val1,
+                      oppositeVal
+                    }), mergeStyle(styleState, subKey1, mediaStyle1[subKey1], priority, false, themeOriginalValues == null ? void 0 : themeOriginalValues[subKey1]);
+                  }
                 }
               } else if (!(themeName === mediaKeyShort || themeName.startsWith(mediaKeyShort))) return;
             } else if (isGroupMedia) {
@@ -10158,17 +10217,11 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
               }
             }
             var mediaOriginalValues = styleOriginalValues.get(mediaStyle1);
-            for (var subKey2 in mediaStyle1) {
-              if (subKey2 === "space") {
-                space = valInit.space;
-                continue;
-              }
-              if (subKey2[0] === "$") {
-                if (!isActivePlatform(subKey2) || !isActiveTheme(subKey2, themeName)) continue;
-                var subOriginalValues = styleOriginalValues.get(mediaStyle1[subKey2]);
-                for (var subSubKey in mediaStyle1[subKey2]) mergeMediaStyle2(subSubKey, mediaStyle1[subKey2][subSubKey], subOriginalValues == null ? void 0 : subOriginalValues[subSubKey]);
-              } else mergeMediaStyle2(subKey2, mediaStyle1[subKey2], mediaOriginalValues == null ? void 0 : mediaOriginalValues[subKey2]);
-            }
+            for (var subKey2 in mediaStyle1) if (subKey2 !== "space") if (subKey2[0] === "$") {
+              if (!isActivePlatform(subKey2) || !isActiveTheme(subKey2, themeName)) continue;
+              var subOriginalValues = styleOriginalValues.get(mediaStyle1[subKey2]);
+              for (var subSubKey in mediaStyle1[subKey2]) mergeMediaStyle2(subSubKey, mediaStyle1[subKey2][subSubKey], subOriginalValues == null ? void 0 : subOriginalValues[subSubKey]);
+            } else mergeMediaStyle2(subKey2, mediaStyle1[subKey2], mediaOriginalValues == null ? void 0 : mediaOriginalValues[subKey2]);
           }
           return;
         }
@@ -10194,7 +10247,9 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
     inlineWhenUnflattened,
     parentStaticConfig,
     acceptsClassName
-  } = staticConfig, viewProps = {}, mediaState = styleProps2.mediaState || exports.mediaState, shouldDoClasses = acceptsClassName && isWeb, rulesToInsert = void 0, classNames = {}, pseudos = null, space = props.space, hasMedia = false, dynamicThemeAccess, pseudoGroups, mediaGroups;
+  } = staticConfig, viewProps = {}, mediaState = styleProps2.mediaState || exports.mediaState, shouldDoClasses = acceptsClassName && isWeb, rulesToInsert = void 0, classNames = {}, pseudos = null;
+  props.space;
+  var hasMedia = false, dynamicThemeAccess, pseudoGroups, mediaGroups;
   props.className || "";
   var mediaStylesSeen = 0, validStyles$1 = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? stylePropsText : validStyles);
   var styleState = {
@@ -10216,7 +10271,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
       fallbackProps
     } = styleProps2;
     fallbackProps && (styleState.props = new Proxy(props, {
-      get(_, key4, val2) {
+      get(_2, key4, val2) {
         return Reflect.has(props, key4) ? Reflect.get(props, key4) : Reflect.get(fallbackProps, key4);
       }
     }));
@@ -10258,8 +10313,8 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
     }
   }
   if (viewProps.tabIndex === 0) {
-    var _viewProps1, _accessible1;
-    (_accessible1 = (_viewProps1 = viewProps).accessible) !== null && _accessible1 !== void 0 || (_viewProps1.accessible = true);
+    var _viewProps, _accessible;
+    (_accessible = (_viewProps = viewProps).accessible) !== null && _accessible !== void 0 || (_viewProps.accessible = true);
   }
   var style1 = styleState.style;
   if (style1 == null ? void 0 : style1.fontFamily) {
@@ -10270,7 +10325,6 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentSt
     }
   }
   var result = {
-    space,
     hasMedia,
     fontFamily: styleState.fontFamily,
     viewProps,
@@ -10370,11 +10424,8 @@ var defaultColor = process.env.TAMAGUI_DEFAULT_COLOR || "rgba(0,0,0,0)", animata
   x: 0,
   y: 0,
   borderRadius: 0
-}), lowercaseHyphenate = function(match) {
-  return `-${match.toLowerCase()}`;
-}, hyphenate = function(str) {
-  return str.replace(/[A-Z]/g, lowercaseHyphenate);
-}, mergeTransform = function(obj, key, val) {
+});
+var mergeTransform = function(obj, key, val) {
   var backwards = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false, _obj;
   typeof obj.transform != "string" && ((_obj = obj).transform || (_obj.transform = []), obj.transform[backwards ? "unshift" : "push"]({
     [mapTransformKeys[key] || key]: val
@@ -10488,7 +10539,7 @@ var Theme = /* @__PURE__ */ React.forwardRef(function(props, ref) {
   if (props.disable) return props.children;
   var {
     passThrough
-  } = props, isRoot = !!props._isRoot, [_, themeState] = useThemeWithState(props, isRoot), disableDirectChildTheme = props["disable-child-theme"], finalChildren = disableDirectChildTheme ? React.Children.map(props.children, function(child) {
+  } = props, isRoot = !!props._isRoot, [_2, themeState] = useThemeWithState(props, isRoot), disableDirectChildTheme = props["disable-child-theme"], finalChildren = disableDirectChildTheme ? React.Children.map(props.children, function(child) {
     return passThrough ? child : /* @__PURE__ */ React.cloneElement(child, {
       "data-disable-theme": true
     });
@@ -10537,12 +10588,10 @@ function getThemedChildren(themeState, children, props) {
 function themeable(Component, staticConfig) {
   var optimize = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false, withThemeComponent = /* @__PURE__ */ React.forwardRef(function(props, ref) {
     var _a = props, {
-      themeInverse,
       theme,
       componentName,
       themeReset
     } = _a, rest = __objRest(_a, [
-      "themeInverse",
       "theme",
       "componentName",
       "themeReset"
@@ -10559,7 +10608,7 @@ function themeable(Component, staticConfig) {
         "data-disable-theme": true
       }))
     ), filteredProps = null, compName = componentName || (staticConfig == null ? void 0 : staticConfig.componentName);
-    if (compName && (filteredProps || (filteredProps = {}), filteredProps.componentName = compName), "debug" in props && (filteredProps || (filteredProps = {}), filteredProps.debug = props.debug), "theme" in props && (filteredProps || (filteredProps = {}), filteredProps.name = props.theme), "themeInverse" in props && (filteredProps || (filteredProps = {}), filteredProps.inverse = props.themeInverse), "themeReset" in props && (filteredProps || (filteredProps = {}), filteredProps.reset = themeReset), optimize && !filteredProps) return element;
+    if (compName && (filteredProps || (filteredProps = {}), filteredProps.componentName = compName), "debug" in props && (filteredProps || (filteredProps = {}), filteredProps.debug = props.debug), "theme" in props && (filteredProps || (filteredProps = {}), filteredProps.name = props.theme), "themeReset" in props && (filteredProps || (filteredProps = {}), filteredProps.reset = themeReset), optimize && !filteredProps) return element;
     var contents = /* @__PURE__ */ jsxRuntimeExports.jsx(Theme, __spreadProps(__spreadValues({
       "disable-child-theme": true
     }, filteredProps), {
@@ -10635,7 +10684,7 @@ var useComponentState = function(props, animationDriver, staticConfig, config) {
   var states2 = React.useState(initialState), state = 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(_) {
+  disabled !== state.disabled && (disabled && Object.assign(state, defaultComponentStateMounted), state.disabled = disabled, setState(function(_2) {
     return __spreadValues({}, state);
   }));
   var groupName = props.group, setStateShallow = useCreateShallowSetState(setState, props.debug);
@@ -10831,9 +10880,9 @@ function createComponent(staticConfig) {
       shallow: stateRef.current.themeShallow,
       debug: debugProp
     };
-    if ("themeInverse" in props && (themeStateProps.inverse = props.themeInverse), "theme" in props && (themeStateProps.name = props.theme), typeof stateRef.current.isListeningToTheme == "boolean" && (themeStateProps.needsUpdate = function() {
+    if ("theme" in props && (themeStateProps.name = props.theme), themeStateProps.needsUpdate = function() {
       return !!stateRef.current.isListeningToTheme;
-    }), themeStateProps.deopt = willBeAnimated, false) ;
+    }, themeStateProps.deopt = willBeAnimated, false) ;
     var [theme, themeState] = useThemeWithState(themeStateProps);
     elementType = Component || elementType;
     var mediaState = useMedia(componentContext);
@@ -11063,7 +11112,7 @@ function createComponent(staticConfig) {
     }, attachPress && {
       onMouseEnter: function(e2) {
         var next = {};
-        needsHoverState && (next.hover = true), needsPressState && state.pressIn && (next.press = true), setStateShallow(next), onHoverIn == null ? void 0 : onHoverIn(e2), onMouseEnter == null ? void 0 : onMouseEnter(e2);
+        needsHoverState && true && (next.hover = true), needsPressState && state.pressIn && (next.press = true), setStateShallow(next), onHoverIn == null ? void 0 : onHoverIn(e2), onMouseEnter == null ? void 0 : onMouseEnter(e2);
       },
       onMouseLeave: function(e2) {
         var next = {};
@@ -11112,14 +11161,7 @@ function createComponent(staticConfig) {
       });
     }
     (_hooks_useEvents = hooks.useEvents) === null || _hooks_useEvents === void 0 || _hooks_useEvents.call(hooks, viewProps, events, splitStyles, setStateShallow, staticConfig);
-    var direction = props.spaceDirection || "both";
-    var content = !children || asChild || !splitStyles ? children : spacedChildren({
-      separator,
-      children,
-      space,
-      direction,
-      isZStack
-    });
+    var content = children;
     if (asChild) if (elementType = Slot, 0) ;
     else Object.assign(viewProps, {
       onPress,
@@ -11176,153 +11218,13 @@ function createComponent(staticConfig) {
       isStyledHOC: false
     });
   }
-  function extractable(Component2, extended) {
-    return Component2.staticConfig = extendStyledConfig(extended), Component2.styleable = styleable, Component2;
-  }
   function styleable(Component2, options) {
     var _Component_render, skipForwardRef = IS_REACT_19 && typeof Component2 == "function" && Component2.length === 1 || ((_Component_render = Component2.render) === null || _Component_render === void 0 ? void 0 : _Component_render.length) === 2, out = skipForwardRef ? Component2 : /* @__PURE__ */ React.forwardRef(Component2), extendedConfig = extendStyledConfig(options == null ? void 0 : options.staticConfig);
     return out = (options == null ? void 0 : options.disableTheme) ? out : themeable(out, extendedConfig, true), (extendedConfig.memo || process.env.TAMAGUI_MEMOIZE_STYLEABLE) && (out = /* @__PURE__ */ React.memo(out)), out.staticConfig = extendedConfig, out.styleable = styleable, out;
   }
-  return res.extractable = extractable, res.styleable = styleable, res;
-}
-function Unspaced(props) {
-  return props.children;
+  return res.styleable = styleable, res;
 }
-Unspaced.isUnspaced = true;
-var getSpacerSize = function(size, param) {
-  var {
-    tokens
-  } = param;
-  size = size === false ? 0 : size === true ? "$true" : 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,
-    minWidth: sizePx,
-    minHeight: sizePx
-  };
-}, Spacer = createComponent({
-  acceptsClassName: true,
-  memo: true,
-  componentName: "Spacer",
-  validStyles,
-  defaultProps: __spreadProps(__spreadValues({}, stackDefaultStyles), {
-    // avoid nesting issues
-    tag: "span",
-    size: true,
-    pointerEvents: "none"
-  }),
-  variants: {
-    size: {
-      "...": getSpacerSize
-    },
-    flex: {
-      true: {
-        flexGrow: 1
-      }
-    },
-    direction: {
-      horizontal: {
-        height: 0,
-        minHeight: 0
-      },
-      vertical: {
-        width: 0,
-        minWidth: 0
-      },
-      both: {}
-    }
-  }
-});
-function spacedChildren(props) {
-  var _childrenList__type, _childrenList_, {
-    isZStack,
-    children,
-    space,
-    direction,
-    spaceFlex,
-    separator,
-    ensureKeys
-  } = props, hasSpace = !!(space || spaceFlex), hasSeparator = separator != null, areChildrenArray = Array.isArray(children);
-  if (!ensureKeys && !(hasSpace || hasSeparator || isZStack)) return children;
-  var childrenList = areChildrenArray ? children : React.Children.toArray(children), len = childrenList.length;
-  if (len <= 1 && !isZStack && !(!((_childrenList_ = childrenList[0]) === null || _childrenList_ === void 0 || (_childrenList__type = _childrenList_.type) === null || _childrenList__type === void 0) && _childrenList__type.shouldForwardSpace)) return children;
-  var final = [], _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
-  try {
-    for (var _iterator = childrenList.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-      var [index2, child] = _step.value, _child_type, isEmpty = child == null || Array.isArray(child) && child.length === 0;
-      if (!isEmpty && /* @__PURE__ */ React.isValidElement(child) && !((_child_type = child.type) === null || _child_type === void 0) && _child_type.shouldForwardSpace && (child = /* @__PURE__ */ React.cloneElement(child, {
-        // @ts-expect-error we explicitly know with shouldForwardSpace
-        space,
-        spaceFlex,
-        separator,
-        key: child.key
-      })), isEmpty || !child || child.key && !isZStack ? final.push(child) : final.push(/* @__PURE__ */ jsxRuntimeExports.jsx(React.Fragment, {
-        children: isZStack ? /* @__PURE__ */ jsxRuntimeExports.jsx(AbsoluteFill, {
-          children: child
-        }) : child
-      }, `${index2}0t`)), !(isUnspaced(child) && index2 === 0) && !isZStack) {
-        var next = childrenList[index2 + 1];
-        next && !isEmpty && !isUnspaced(next) && (separator ? (hasSpace && final.push(createSpacer({
-          key: `_${index2}_00t`,
-          direction,
-          space,
-          spaceFlex
-        })), final.push(/* @__PURE__ */ jsxRuntimeExports.jsx(React.Fragment, {
-          children: separator
-        }, `${index2}03t`)), hasSpace && final.push(createSpacer({
-          key: `_${index2}01t`,
-          direction,
-          space,
-          spaceFlex
-        }))) : final.push(createSpacer({
-          key: `_${index2}02t`,
-          direction,
-          space,
-          spaceFlex
-        })));
-      }
-    }
-  } catch (err) {
-    _didIteratorError = true, _iteratorError = err;
-  } finally {
-    try {
-      !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
-    } finally {
-      if (_didIteratorError) throw _iteratorError;
-    }
-  }
-  return final;
-}
-function createSpacer(param) {
-  var {
-    key,
-    direction,
-    space,
-    spaceFlex
-  } = param;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer, __spreadValues({
-    size: space,
-    direction
-  }, typeof spaceFlex < "u" && {
-    flex: spaceFlex === true ? 1 : spaceFlex === false ? 0 : spaceFlex
-  }), key);
-}
-function isUnspaced(child) {
-  var t2 = child == null ? void 0 : child.type;
-  return (t2 == null ? void 0 : t2.isVisuallyHidden) || (t2 == null ? void 0 : t2.isUnspaced);
-}
-var AbsoluteFill = createComponent({
-  defaultProps: __spreadProps(__spreadValues({}, stackDefaultStyles), {
-    flexDirection: "column",
-    position: "absolute",
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    pointerEvents: "box-none"
-  })
-}), fromPx = function(val) {
+var fromPx = function(val) {
   return typeof val == "number" ? val : typeof val == "string" ? +val.replace("px", "") : 0;
 };
 function getExpandedShorthands(props) {
@@ -11598,7 +11500,7 @@ function shouldTokenCategoryHaveUnits(category) {
   return UNIT_CATEGORIES.has(category);
 }
 function createTamagui$1(configIn) {
-  var _configIn_settings, existingConfig = getConfigMaybe();
+  var _configIn_settings, _configIn_settings1, existingConfig = getConfigMaybe();
   existingConfig && (configIn = __spreadValues(__spreadValues({}, existingConfig), configIn));
   var tokensParsed = {}, tokens = createVariables(configIn.tokens || {});
   if (configIn.tokens) {
@@ -11677,10 +11579,12 @@ function createTamagui$1(configIn) {
     return "";
   }, getNewCSS = function(opts2) {
     return getCSS(__spreadValues({}, opts2));
-  }, _configIn_settings_defaultFont, defaultFontSetting = (_configIn_settings_defaultFont = (_configIn_settings = configIn.settings) === null || _configIn_settings === void 0 ? void 0 : _configIn_settings.defaultFont) !== null && _configIn_settings_defaultFont !== void 0 ? _configIn_settings_defaultFont : configIn.defaultFont, defaultFont = (function() {
+  }, defaultFontSetting = (_configIn_settings = configIn.settings) === null || _configIn_settings === void 0 ? void 0 : _configIn_settings.defaultFont, defaultFont = (function() {
     var val2 = defaultFontSetting;
     return (val2 == null ? void 0 : val2[0]) === "$" && (val2 = val2.slice(1)), val2;
-  })(), defaultFontToken = defaultFont ? `$${defaultFont}` : "", unset = __spreadValues({}, configIn.unset);
+  })();
+  ((_configIn_settings1 = configIn.settings) === null || _configIn_settings1 === void 0 ? void 0 : _configIn_settings1.defaultPosition) || "static";
+  var defaultProps2 = configIn.defaultProps || {}, defaultFontToken = defaultFont ? `$${defaultFont}` : "", unset = __spreadValues({}, configIn.unset);
   !unset.fontFamily && defaultFont && (unset.fontFamily = defaultFontToken);
   var config = __spreadProps(__spreadValues({
     fonts: {},
@@ -11689,17 +11593,9 @@ function createTamagui$1(configIn) {
     animations: defaultAnimationDriver,
     media: {}
   }, configIn), {
+    defaultProps: defaultProps2,
     unset,
     settings: __spreadValues({
-      // move deprecated settings here so we can reference them all using `getSetting`
-      // TODO remove this on v2
-      disableSSR: configIn.disableSSR,
-      defaultFont: configIn.defaultFont,
-      disableRootThemeClass: configIn.disableRootThemeClass,
-      onlyAllowShorthands: configIn.onlyAllowShorthands,
-      mediaQueryDefaultActive: configIn.mediaQueryDefaultActive,
-      themeClassNameOnRoot: configIn.themeClassNameOnRoot,
-      cssStyleSeparator: configIn.cssStyleSeparator,
       webContainerType: "inline-size"
     }, configIn.settings),
     tokens,
@@ -11795,9 +11691,6 @@ var builtinShorthands = {
   ox: "overflowX",
   oy: "overflowY"
 };
-var createTheme = function(theme) {
-  return theme;
-};
 function createTokens(tokens) {
   var _process_env_TAMAGUI_TOKEN_PREFIX;
   return createVariables(tokens, (_process_env_TAMAGUI_TOKEN_PREFIX = process.env.TAMAGUI_TOKEN_PREFIX) !== null && _process_env_TAMAGUI_TOKEN_PREFIX !== void 0 ? _process_env_TAMAGUI_TOKEN_PREFIX : "t");
@@ -11826,8 +11719,6 @@ var RNConfigs = {
     isReactNative: true
   }
 };
-function setupReactNative(rnExports) {
-}
 var mergeVariants = function(parentVariants, ourVariants) {
   var level = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 0, variants = {};
   for (var key in ourVariants) {
@@ -11842,13 +11733,11 @@ function styled(ComponentIn, options, config) {
       variants,
       name,
       defaultVariants,
-      acceptsClassName: acceptsClassNameProp,
       context
     } = _a, defaultProps2 = __objRest(_a, [
       "variants",
       "name",
       "defaultVariants",
-      "acceptsClassName",
       "context"
     ]), parentDefaultVariants, parentDefaultProps;
     if (parentStaticConfig) {
@@ -11863,7 +11752,7 @@ function styled(ComponentIn, options, config) {
       }
     }
     (parentDefaultProps || defaultVariants || parentDefaultVariants) && (defaultProps2 = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, parentDefaultProps), parentDefaultVariants), defaultProps2), defaultVariants)), (parentStaticConfig == null ? void 0 : parentStaticConfig.isHOC) && name && (defaultProps2.componentName = name);
-    var isText = !!((config == null ? void 0 : config.isText) || (parentStaticConfig == null ? void 0 : parentStaticConfig.isText)), _config_acceptsClassName, _ref, acceptsClassName = (_ref = (_config_acceptsClassName = config == null ? void 0 : config.acceptsClassName) !== null && _config_acceptsClassName !== void 0 ? _config_acceptsClassName : acceptsClassNameProp) !== null && _ref !== void 0 ? _ref : isPlainStyledComponent || isReactNative || (parentStaticConfig == null ? void 0 : parentStaticConfig.isHOC) && (parentStaticConfig == null ? void 0 : parentStaticConfig.acceptsClassName), conf2 = __spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, parentStaticConfig), config), !isPlainStyledComponent && {
+    var isText = !!((config == null ? void 0 : config.isText) || (parentStaticConfig == null ? void 0 : parentStaticConfig.isText)), _config_acceptsClassName, acceptsClassName = (_config_acceptsClassName = config == null ? void 0 : config.acceptsClassName) !== null && _config_acceptsClassName !== void 0 ? _config_acceptsClassName : isPlainStyledComponent || isReactNative || (parentStaticConfig == null ? void 0 : parentStaticConfig.isHOC) && (parentStaticConfig == null ? void 0 : parentStaticConfig.acceptsClassName), conf2 = __spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, parentStaticConfig), config), !isPlainStyledComponent && {
       Component
     }), {
       // @ts-expect-error
@@ -11888,6 +11777,7 @@ var useIsTouchDevice = function() {
   return true;
 };
 var Stack$1 = createComponent({
+  componentName: "Stack",
   acceptsClassName: true,
   defaultProps: stackDefaultStyles,
   validStyles
@@ -11908,7 +11798,6 @@ function usePropsAndStyle(props, opts2) {
   var _opts_forComponent, _opts_forComponent_staticConfig, staticConfig = (_opts_forComponent_staticConfig = opts2 == null || (_opts_forComponent = opts2.forComponent) === null || _opts_forComponent === void 0 ? void 0 : _opts_forComponent.staticConfig) !== null && _opts_forComponent_staticConfig !== void 0 ? _opts_forComponent_staticConfig : Stack$1.staticConfig, [theme, themeState] = useThemeWithState({
     componentName: staticConfig.componentName,
     name: "theme" in props ? props.theme : void 0,
-    inverse: "themeInverse" in props ? props.themeInverse : void 0,
     needsUpdate() {
       return true;
     }
@@ -11981,12 +11870,12 @@ function FontLanguage(param) {
   }));
 }
 var ThemeProvider = function(props) {
-  var _props_disableRootThemeClass, disableRootThemeClass = (_props_disableRootThemeClass = props.disableRootThemeClass) !== null && _props_disableRootThemeClass !== void 0 ? _props_disableRootThemeClass : getSetting("disableRootThemeClass"), _props_themeClassNameOnRoot, themeClassNameOnRoot = (_props_themeClassNameOnRoot = props.themeClassNameOnRoot) !== null && _props_themeClassNameOnRoot !== void 0 ? _props_themeClassNameOnRoot : getSetting("themeClassNameOnRoot");
+  var addThemeClassName = getSetting("addThemeClassName");
+  var forceClassName = addThemeClassName === void 0;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Theme, {
     className: props.className,
     name: props.defaultTheme,
-    // if root class disabled, force class here
-    forceClassName: !disableRootThemeClass && !themeClassNameOnRoot,
+    forceClassName,
     // @ts-expect-error
     _isRoot: React.useId,
     children: props.children
@@ -11999,20 +11888,20 @@ function TamaguiProvider$1(param) {
     config,
     className,
     defaultTheme,
-    disableRootThemeClass,
     reset,
-    themeClassNameOnRoot
+    insets
   } = param;
   useIsomorphicLayoutEffect(function() {
     updateMediaListeners();
   }, []);
-  var contents = /* @__PURE__ */ jsxRuntimeExports.jsx(UnmountedClassName, {
+  var memoizedInsets = React.useMemo(function() {
+    return insets;
+  }, [insets == null ? void 0 : insets.top, insets == null ? void 0 : insets.right, insets == null ? void 0 : insets.bottom, insets == null ? void 0 : insets.left]), contents = /* @__PURE__ */ jsxRuntimeExports.jsx(UnmountedClassName, {
     children: /* @__PURE__ */ jsxRuntimeExports.jsx(ComponentContext.Provider, {
       animationDriver: config == null ? void 0 : config.animations,
+      insets: memoizedInsets,
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeProvider, {
-        themeClassNameOnRoot: themeClassNameOnRoot != null ? themeClassNameOnRoot : getSetting("themeClassNameOnRoot"),
-        disableRootThemeClass: disableRootThemeClass != null ? disableRootThemeClass : getSetting("disableRootThemeClass"),
-        defaultTheme: defaultTheme != null ? defaultTheme : config ? Object.keys(config.themes)[0] : "",
+        defaultTheme,
         reset,
         className,
         children
@@ -12041,16 +11930,11 @@ var ellipsisStyle = {
   isText: true,
   defaultProps: {
     fontFamily: "unset",
+    position: "static",
     suppressHighlighting: true
   },
   inlineWhenUnflattened: /* @__PURE__ */ new Set(["fontFamily"]),
   variants: {
-    /**
-    * @deprecated Use ellipsis instead
-    */
-    ellipse: {
-      true: ellipsisStyle
-    },
     ellipsis: {
       true: ellipsisStyle
     }
@@ -12059,6 +11943,7 @@ var ellipsisStyle = {
 });
 Text$1.displayName = "Text";
 var View$1 = createComponent({
+  componentName: "View",
   acceptsClassName: true,
   defaultProps: stackDefaultStyles,
   validStyles
@@ -12603,7 +12488,6 @@ exports.MISSING_THEME_MESSAGE = MISSING_THEME_MESSAGE;
 exports.PROP_SPLIT = PROP_SPLIT;
 exports.Slot = Slot;
 exports.Slottable = Slottable;
-exports.Spacer = Spacer;
 exports.Stack = Stack;
 exports.StyleObjectIdentifier = StyleObjectIdentifier;
 exports.StyleObjectProperty = StyleObjectProperty;
@@ -12617,7 +12501,6 @@ exports.TamaguiProvider = TamaguiProvider;
 exports.Text = Text;
 exports.Theme = Theme;
 exports.ThemeProvider = ThemeProvider;
-exports.Unspaced = Unspaced;
 exports.View = View;
 exports._disableMediaTouch = _disableMediaTouch;
 exports._withStableStyle = _withStableStyle;
@@ -12633,7 +12516,6 @@ exports.createMediaStyle = createMediaStyle;
 exports.createShorthands = createShorthands;
 exports.createStyledContext = createStyledContext;
 exports.createTamagui = createTamagui;
-exports.createTheme = createTheme;
 exports.createTokens = createTokens;
 exports.createVariable = createVariable;
 exports.createVariables = createVariables;
@@ -12717,10 +12599,8 @@ exports.setRef = setRef;
 exports.setupDev = setupDev;
 exports.setupHooks = setupHooks;
 exports.setupMatchMedia = setupMatchMedia;
-exports.setupReactNative = setupReactNative;
 exports.shouldRenderNativePlatform = shouldRenderNativePlatform;
 exports.simpleHash = simpleHash;
-exports.spacedChildren = spacedChildren;
 exports.stackDefaultStyles = stackDefaultStyles;
 exports.styleOriginalValues = styleOriginalValues;
 exports.stylePropsAll = stylePropsAll;
@@ -12757,5 +12637,7 @@ exports.useThemeWithState = useThemeWithState;
 exports.validPseudoKeys = validPseudoKeys;
 exports.validStyles = validStyles;
 exports.variableToString = variableToString;
+exports.webOnlyStylePropsText = webOnlyStylePropsText;
+exports.webOnlyStylePropsView = webOnlyStylePropsView;
 exports.webViewFlexCompatStyles = webViewFlexCompatStyles;
 exports.withStaticProperties = withStaticProperties;