@hanzogui/web 7.3.2 → 8.0.0

package/dist/esm/helpers/getSplitStyles.native.js

@@ -1,33 +1,34 @@
-import { isAndroid, isClient, isIos, isWeb, useIsomorphicLayoutEffect } from "@hanzogui/constants";
-import { StyleObjectIdentifier, StyleObjectProperty, StyleObjectPseudo, StyleObjectRules, nonAnimatableStyleProps, stylePropsText, stylePropsTransform, tokenCategories, validPseudoKeys, validStyles as validStylesView } from "@hanzogui/helpers";
+import { getPlatformDriver, isAndroid, isClient, isWeb, supportsDynamicColorIOS } from "@hanzogui/constants";
+import { StyleObjectIdentifier, StyleObjectProperty, StyleObjectPseudo, stylePropsText, stylePropsTransform, tokenCategories, validPseudoKeys, validStyles } from "@hanzogui/helpers";
 import React from "react";
 import { getConfig, getFont, getSetting } from "../config.native.js";
 import { isDevTools } from "../constants/isDevTools.native.js";
 import { getMediaImportanceIfMoreImportant, getMediaKey, getMediaKeyImportance, mediaKeyMatch } from "../hooks/useMedia.native.js";
-import { mediaState as globalMediaState, mediaQueryConfig } from "./mediaState.native.js";
+import { mediaQueryConfig, mediaState } from "./mediaState.native.js";
 import { createMediaStyle } from "./createMediaStyle.native.js";
 import { fixStyles } from "./expandStyles.native.js";
 import { getCSSStylesAtomic, getStyleAtomic, styleToCSS } from "./getCSSStylesAtomic.native.js";
 import { getDefaultProps } from "./getDefaultProps.native.js";
 import { extractValueFromDynamic, getDynamicVal, getOppositeScheme, isColorStyleKey } from "./getDynamicVal.native.js";
 import { getGroupPropParts } from "./getGroupPropParts.native.js";
-import { insertStyleRules, shouldInsertStyleRules, updateRules } from "./insertStyleRule.native.js";
-import { isActivePlatform, getPlatformSpecificityBump } from "./isActivePlatform.native.js";
+import { getPlatformSpecificityBump, isActivePlatform } from "./isActivePlatform.native.js";
 import { isActiveTheme } from "./isActiveTheme.native.js";
 import { log } from "./log.native.js";
 import { normalizeValueWithProperty } from "./normalizeValueWithProperty.native.js";
 import { propMapper } from "./propMapper.native.js";
-import { pseudoDescriptors, pseudoPriorities, defaultMediaImportance } from "./pseudoDescriptors.native.js";
+import { defaultMediaImportance, pseudoDescriptors, pseudoPriorities } from "./pseudoDescriptors.native.js";
 import { skipProps } from "./skipProps.native.js";
 import { sortString } from "./sortString.native.js";
+import { styleOriginalValues } from "./styleOriginalValues.native.js";
+import { STYLE_TOKEN_PROVENANCE_KEY, getStyleTokenProvenance, setStyleTokenProvenance } from "./styleProvenance.native.js";
 import { transformsToString } from "./transformsToString.native.js";
 function _type_of(obj) {
   "@swc/helpers - typeof";
 
   return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
+var shouldTrackStyleTokenProvenance = process.env.NODE_ENV === "development" && process.env.GUI_ENABLE_STYLE_TOKEN_PROVENANCE === "1";
 var conf;
-var styleOriginalValues = /* @__PURE__ */new WeakMap();
 var PROP_SPLIT = "-";
 function normalizeGroupKey(key, groupContext) {
   var parts = key.split("-");
@@ -41,6 +42,13 @@ function normalizeGroupKey(key, groupContext) {
 function isValidStyleKey(key, validStyles, accept) {
   return key in validStyles ? true : accept && key in accept;
 }
+function shouldSkipNativeHoverProp(key, isMedia) {
+  var _getPlatformDriver;
+  if ((_getPlatformDriver = getPlatformDriver()) === null || _getPlatformDriver === void 0 ? void 0 : _getPlatformDriver.pseudo) return false;
+  if (key === "hoverStyle") return true;
+  if (isMedia === "group") return getGroupPropParts(key.slice(1)).pseudo === "hover";
+  return false;
+}
 var getSplitStyles = function (props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, componentContext, groupContext, elementType, startedUnhydrated, debug, animationDriver) {
   var _loop = function (keyOg2) {
     var keyInit = keyOg2;
@@ -49,6 +57,7 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
       viewProps[keyInit] = valInit;
       return "continue";
     }
+    if (keyInit[0] === "d" && keyInit.startsWith("data-")) return "continue";
     if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`before-prop-${keyInit}`;
     if (process.env.NODE_ENV === "test" && keyInit === "jestAnimatedStyle") return "continue";
     if (accept) {
@@ -71,11 +80,14 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
       }
     }
     if (keyInit in skipProps && !noSkip && !isHOC) {
-      var _driver_animations;
       if (keyInit === "group") ;
-      if (keyInit === "transition" && typeof valInit === "string" && !(driver === null || driver === void 0 ? void 0 : (_driver_animations = driver.animations) === null || _driver_animations === void 0 ? void 0 : _driver_animations[valInit])) {} else return "continue";
+      if (keyInit === "transition" && typeof valInit === "string") {
+        var _driver_animations;
+        var animationConfig = driver === null || driver === void 0 ? void 0 : (_driver_animations = driver.animations) === null || _driver_animations === void 0 ? void 0 : _driver_animations[valInit];
+        if (animationConfig && (driver === null || driver === void 0 ? void 0 : driver.outputStyle) === "css" && process.env.IS_STATIC === "is_static") valInit = `all ${animationConfig}`;else if (animationConfig) return "continue";
+      } else return "continue";
     }
-    var isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles, accept);
+    var isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles$1, accept);
     if (!isValidStyleKeyInit) {
       if (!isAndroid) {
         if (keyInit === "elevationAndroid") return "continue";
@@ -92,6 +104,7 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
     var isMediaOrPseudo = Boolean(isMedia || isPseudo);
     if (isMediaOrPseudo && isMedia === "group") keyInit = normalizeGroupKey(keyInit, groupContext);
     var isStyleProp = isValidStyleKeyInit || isMediaOrPseudo || isVariant && !noExpand;
+    if (shouldSkipNativeHoverProp(keyInit, isMedia)) return "continue";
     if (isStyleProp && (asChild === "except-style" || asChild === "except-style-web")) return "continue";
     var shouldPassProp = !isStyleProp && isHOC || isHOC && parentVariants && keyInit in parentVariants || (inlineProps === null || inlineProps === void 0 ? void 0 : inlineProps.has(keyInit));
     var parentVariant = parentVariants === null || parentVariants === void 0 ? void 0 : parentVariants[keyInit];
@@ -131,44 +144,45 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
       if (valInit && (keyInit === "fontFamily" || keyInit === shorthands["fontFamily"]) && valInit in conf.fontsParsed) styleState.fontFamily = valInit;
     }
     var disablePropMap = isMediaOrPseudo || !isStyleLikeKey;
-    propMapper(keyInit, valInit, styleState, disablePropMap, function (key5, val2, originalVal) {
+    propMapper(keyInit, valInit, styleState, disablePropMap, function (key6, val2, originalVal) {
       var _parentStaticConfig_variants;
-      var isStyledContextProp = styledContext && key5 in styledContext;
+      var isStyledContextProp = styledContext && key6 in styledContext;
       if (!isHOC && disablePropMap && !isStyledContextProp && !isMediaOrPseudo) {
-        viewProps[key5] = val2;
+        viewProps[key6] = val2;
         return;
       }
       if (process.env.NODE_ENV === "development" && debug === "verbose") {
-        console.groupCollapsed("  💠 expanded", keyInit, "=>", key5);
+        console.groupCollapsed("  💠 expanded", keyInit, "=>", key6);
         log(val2);
         console.groupEnd();
       }
       if (val2 == null) return;
-      if (key5 === "pointerEvents") {
-        viewProps[key5] = val2;
+      if (key6 === "pointerEvents") {
+        viewProps[key6] = val2;
         return;
       }
-      if (!isHOC && isValidStyleKey(key5, validStyles, accept) || isAndroid && key5 === "elevation") {
-        mergeStyle(styleState, key5, val2, 1, false, originalVal);
+      if (!isHOC && isValidStyleKey(key6, validStyles$1, accept) || isAndroid && key6 === "elevation") {
+        mergeStyle(styleState, key6, val2, 1, false, originalVal);
         return;
       }
-      isPseudo = key5 in validPseudoKeys;
-      isMedia = isPseudo ? false : getMediaKey(key5);
+      isPseudo = key6 in validPseudoKeys;
+      isMedia = isPseudo ? false : getMediaKey(key6);
       isMediaOrPseudo = Boolean(isMedia || isPseudo);
-      isVariant = variants && key5 in variants;
-      if (isMedia === "group") key5 = normalizeGroupKey(key5, groupContext);
-      if ((inlineProps === null || inlineProps === void 0 ? void 0 : inlineProps.has(key5)) || process.env.IS_STATIC === "is_static" && (inlineWhenUnflattened === null || inlineWhenUnflattened === void 0 ? void 0 : inlineWhenUnflattened.has(key5))) {
+      isVariant = variants && key6 in variants;
+      if (isMedia === "group") key6 = normalizeGroupKey(key6, groupContext);
+      if (shouldSkipNativeHoverProp(key6, isMedia)) return;
+      if ((inlineProps === null || inlineProps === void 0 ? void 0 : inlineProps.has(key6)) || process.env.IS_STATIC === "is_static" && (inlineWhenUnflattened === null || inlineWhenUnflattened === void 0 ? void 0 : inlineWhenUnflattened.has(key6))) {
         var _props_key;
-        viewProps[key5] = (_props_key = props[key5]) !== null && _props_key !== void 0 ? _props_key : val2;
+        viewProps[key6] = (_props_key = props[key6]) !== null && _props_key !== void 0 ? _props_key : val2;
       }
       if (styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo || (parentStaticConfig === null || parentStaticConfig === void 0 ? void 0 : (_parentStaticConfig_variants = parentStaticConfig.variants) === null || _parentStaticConfig_variants === void 0 ? void 0 : _parentStaticConfig_variants[keyInit]))) {
-        passDownProp(viewProps, key5, val2, isMediaOrPseudo);
+        passDownProp(viewProps, key6, val2, isMediaOrPseudo);
         if (process.env.NODE_ENV === "development" && debug === "verbose") {
-          console.groupCollapsed(` - passing down prop ${key5}`);
+          console.groupCollapsed(` - passing down prop ${key6}`);
           log({
             val: val2,
             after: {
-              ...viewProps[key5]
+              ...viewProps[key6]
             }
           });
           console.groupEnd();
@@ -177,31 +191,30 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
       }
       if (isPseudo) {
         if (!val2) return;
-        var pseudoStyleObject = getSubStyle(styleState, key5, val2, styleProps.noClass && !(process.env.IS_STATIC === "is_static"));
+        var pseudoStyleObject = getSubStyle(styleState, key6, val2, styleProps.noClass && !(process.env.IS_STATIC === "is_static"));
         if (!shouldDoClasses || process.env.IS_STATIC === "is_static") {
           var _pseudos, _key;
           pseudos || (pseudos = {});
-          (_pseudos = pseudos)[_key = key5] || (_pseudos[_key] = {});
+          (_pseudos = pseudos)[_key = key6] || (_pseudos[_key] = {});
           if (process.env.IS_STATIC === "is_static") {
-            Object.assign(pseudos[key5], pseudoStyleObject);
+            Object.assign(pseudos[key6], pseudoStyleObject);
             return;
           }
         }
-        var descriptor = pseudoDescriptors[key5];
-        var isEnter = key5 === "enterStyle";
-        var isExit = key5 === "exitStyle";
+        var descriptor = pseudoDescriptors[key6];
+        var isEnter = key6 === "enterStyle";
+        var isExit = key6 === "exitStyle";
         if (!descriptor) return;
         if (shouldDoClasses && !isExit) {
           var pseudoStyles = getStyleAtomic(pseudoStyleObject, descriptor);
-          if (process.env.NODE_ENV === "development" && debug === "verbose") console.info("pseudo:", key5, pseudoStyleObject, pseudoStyles);
+          if (process.env.NODE_ENV === "development" && debug === "verbose") console.info("pseudo:", key6, pseudoStyleObject, pseudoStyles);
           var _iteratorNormalCompletion3 = true,
             _didIteratorError3 = false,
             _iteratorError3 = void 0;
           try {
             for (var _iterator3 = pseudoStyles[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
               var psuedoStyle = _step3.value;
-              var fullKey = `${psuedoStyle[StyleObjectProperty]}${PROP_SPLIT}${descriptor.name}`;
-              addStyleToInsertRules(rulesToInsert, psuedoStyle);
+              var fullKey = `${psuedoStyle[StyleObjectProperty]}${"-"}${descriptor.name}`;
               classNames[fullKey] = psuedoStyle[StyleObjectIdentifier];
             }
           } catch (err) {
@@ -220,7 +233,7 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
           if (isExit) isDisabled = !styleProps.isExiting;
           if (isEnter && componentState.unmounted === false) isDisabled = true;
           if (process.env.NODE_ENV === "development" && debug === "verbose") {
-            console.groupCollapsed("pseudo", key5, {
+            console.groupCollapsed("pseudo", key6, {
               isDisabled
             });
             log({
@@ -242,8 +255,8 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
                 if (process.env.IS_STATIC === "is_static") {
                   var _pseudos1, _key1;
                   pseudos || (pseudos = {});
-                  (_pseudos1 = pseudos)[_key1 = key5] || (_pseudos1[_key1] = {});
-                  pseudos[key5][pkey] = _$val;
+                  (_pseudos1 = pseudos)[_key1 = key6] || (_pseudos1[_key1] = {});
+                  pseudos[key6][pkey] = _$val;
                 }
                 mergeStyle(styleState, pkey, _$val, importance, false, pseudoOriginalValues === null || pseudoOriginalValues === void 0 ? void 0 : pseudoOriginalValues[pkey]);
               }
@@ -256,36 +269,36 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
             }
           }
           if (!isDisabled) for (var _$key in val2) {
-            var k = shorthands[_$key] || _$key;
-            styleState.usedKeys[k] = Math.max(importance, styleState.usedKeys[k] || 0);
+            var k2 = shorthands[_$key] || _$key;
+            styleState.usedKeys[k2] = Math.max(importance, styleState.usedKeys[k2] || 0);
           }
         }
         return;
       }
       if (isMedia) {
         if (!val2) return;
-        var mediaKeyShort = key5.slice(isMedia == "theme" ? 7 : 1);
+        var mediaKeyShort = key6.slice(isMedia == "theme" ? 7 : 1);
         hasMedia || (hasMedia = true);
         if (val2["space"] || !shouldDoClasses || styleProps.willBeAnimated) {
           if (!hasMedia || typeof hasMedia === "boolean") hasMedia = /* @__PURE__ */new Set();
           hasMedia.add(mediaKeyShort);
         }
         if (isMedia === "platform") {
-          if (!isActivePlatform(key5)) return;
+          if (!isActivePlatform(key6)) return;
         }
-        if (process.env.NODE_ENV === "development" && debug === "verbose") log(`  \u{1F4FA} ${key5}`, {
-          key: key5,
+        if (process.env.NODE_ENV === "development" && debug === "verbose") log(`  \u{1F4FA} ${key6}`, {
+          key: key6,
           val: val2,
           props,
           shouldDoClasses,
           acceptsClassName,
           componentState,
-          mediaState
+          mediaState: mediaState$1
         });
         var priority = mediaStylesSeen;
         mediaStylesSeen += 1;
         if (shouldDoClasses) {
-          var mediaStyles = getCSSStylesAtomic(getSubStyle(styleState, key5, val2, false));
+          var mediaStyles = getCSSStylesAtomic(getSubStyle(styleState, key6, val2, false));
           var _iteratorNormalCompletion12 = true,
             _didIteratorError12 = false,
             _iteratorError12 = void 0;
@@ -298,8 +311,7 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
               var out = createMediaStyle(style3, mediaKeyShort, mediaQueryConfig, isMedia, false, priority);
               if (process.env.NODE_ENV === "development" && debug === "verbose") log(`\u{1F4FA} media style:`, out);
               var subKey = isSubStyle ? style3[2] : "";
-              var fullKey1 = `${style3[StyleObjectProperty]}${subKey}${PROP_SPLIT}${mediaKeyShort}${style3[StyleObjectPseudo] || ""}`;
-              addStyleToInsertRules(rulesToInsert, out);
+              var fullKey1 = `${style3[StyleObjectProperty]}${subKey}${"-"}${mediaKeyShort}${style3[StyleObjectPseudo] || ""}`;
               classNames[fullKey1] = out[StyleObjectIdentifier];
             }
           } catch (err) {
@@ -313,29 +325,29 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
             }
           }
         } else {
-          let mergeMediaStyle2 = function (key6, val3, originalVal2) {
+          let mergeMediaStyle2 = function (key7, val3, originalVal2) {
             var _styleState4;
-            if (!isValidStyleKey(key6, validStyles, accept)) {
-              viewProps[key6] = val3;
+            if (!isValidStyleKey(key7, validStyles$1, accept)) {
+              viewProps[key7] = val3;
               return;
             }
             (_styleState4 = styleState).style || (_styleState4.style = {});
-            if (mergeMediaByImportance(styleState, mediaKeyShort, key6, val3, mediaState[mediaKeyShort], importanceBump, debug, originalVal2) && key6 === "fontFamily") styleState.fontFamily = mediaStyle1.fontFamily;
+            if (mergeMediaByImportance(styleState, mediaKeyShort, key7, val3, mediaState$1[mediaKeyShort], importanceBump, debug, originalVal2) && key7 === "fontFamily") styleState.fontFamily = mediaStyle1.fontFamily;
           };
           var isThemeMedia = isMedia === "theme";
           var isGroupMedia = isMedia === "group";
           var isPlatformMedia = isMedia === "platform";
           if (!isThemeMedia && !isPlatformMedia && !isGroupMedia) {
-            if (!mediaState[mediaKeyShort]) {
+            if (!mediaState$1[mediaKeyShort]) {
               if (process.env.NODE_ENV === "development" && debug === "verbose") log(`  \u{1F4FA} \u274C DISABLED ${mediaKeyShort}`);
               return;
             }
             if (process.env.NODE_ENV === "development" && debug === "verbose") log(`  \u{1F4FA} \u2705 ENABLED ${mediaKeyShort}`);
           }
-          var mediaStyle1 = getSubStyle(styleState, key5, val2, true);
+          var mediaStyle1 = getSubStyle(styleState, key6, val2, true);
           var importanceBump = 0;
           if (isThemeMedia) {
-            if (isIos && getSetting("fastSchemeChange")) {
+            if (supportsDynamicColorIOS && getSetting("fastSchemeChange")) {
               var _styleState3;
               (_styleState3 = styleState).style || (_styleState3.style = {});
               var scheme = mediaKeyShort;
@@ -373,6 +385,7 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
             var groupState = groupContext === null || groupContext === void 0 ? void 0 : (_groupContext_groupName = groupContext[groupName]) === null || _groupContext_groupName === void 0 ? void 0 : _groupContext_groupName.state;
             var groupPseudoKey = groupInfo.pseudo;
             var groupMediaKey = groupInfo.media;
+            if (groupPseudoKey === "hover") return;
             if (!groupState) {
               if (process.env.NODE_ENV === "development" && debug) log(`No parent with group prop, skipping styles: ${groupName}`);
               pseudoGroups || (pseudoGroups = /* @__PURE__ */new Set());
@@ -434,11 +447,11 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
               } else if (subMediaType === "theme") {
                 if (!isActiveTheme(subKey2, themeName)) continue;
               } else if (subMediaType === true) {
-                if (!mediaState[subKey2.slice(1)]) continue;
+                if (!mediaState$1[subKey2.slice(1)]) continue;
               }
               var nestedVal = mediaStyle1[subKey2];
               var subOriginalValues = styleOriginalValues.get(nestedVal);
-              var outerBase = !!mediaState[mediaKeyShort] ? getMediaKeyImportance(mediaKeyShort) : defaultMediaImportance;
+              var outerBase = !!mediaState$1[mediaKeyShort] ? getMediaKeyImportance(mediaKeyShort) : defaultMediaImportance;
               var innerBase = void 0;
               if (subMediaType === "platform") innerBase = defaultMediaImportance + getPlatformSpecificityBump(subKey2.slice(1));else if (subMediaType === true) innerBase = getMediaKeyImportance(subKey2.slice(1));else innerBase = defaultMediaImportance;
               var nestedImportance = outerBase + importanceBump + innerBase + 1;
@@ -460,7 +473,7 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
       }
       if (!isVariant) {
         if (isStyledContextProp) return;
-        viewProps[key5] = val2;
+        viewProps[key6] = val2;
       }
     });
     if (process.env.NODE_ENV === "development" && debug === "verbose") {
@@ -498,7 +511,7 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
     acceptsClassName
   } = staticConfig;
   var viewProps = {};
-  var mediaState = styleProps.mediaState || globalMediaState;
+  var mediaState$1 = styleProps.mediaState || mediaState;
   var shouldDoClasses = acceptsClassName && isWeb && !styleProps.noClass;
   var rulesToInsert = void 0;
   var classNames = {};
@@ -510,7 +523,7 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
   var mediaGroups;
   var className = props.className || "";
   var mediaStylesSeen = 0;
-  var validStyles = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? stylePropsText : validStylesView);
+  var validStyles$1 = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? stylePropsText : validStyles);
   if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-setup`;
   var styleState = {
     classNames,
@@ -532,9 +545,9 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
       fallbackProps
     } = styleProps;
     if (fallbackProps) styleState.props = new Proxy(props, {
-      get(_, key5, val2) {
-        if (!Reflect.has(props, key5)) return Reflect.get(fallbackProps, key5);
-        return Reflect.get(props, key5);
+      get(_, key6, val2) {
+        if (!Reflect.has(props, key6)) return Reflect.get(fallbackProps, key6);
+        return Reflect.get(props, key6);
       }
     });
   }
@@ -604,7 +617,12 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
       if (style) if (style["$$css"]) Object.assign(styleState.classNames, style);else {
         var _styleState2;
         (_styleState2 = styleState).style || (_styleState2.style = {});
-        Object.assign(styleState.style, normalizeStyle(style));
+        var normalized = normalizeStyle(style);
+        Object.assign(styleState.style, normalized);
+        if (shouldTrackStyleTokenProvenance) {
+          var styleOriginals = styleOriginalValues.get(normalized);
+          for (var k in normalized) recordStyleTokenProvenance(styleState, k, styleOriginals === null || styleOriginals === void 0 ? void 0 : styleOriginals[k]);
+        }
       }
     }
   }
@@ -630,6 +648,18 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
     if (process.env.NODE_ENV === "development" && debug && debug !== "profile") log(`Found fontFamily native: ${style1.fontFamily}`, faceInfo);
   }
   if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-pre-result`;
+  if (shouldTrackStyleTokenProvenance && styleState.style && styleState.tokenProvenance) {
+    var provenance = {};
+    var hasProvenance = false;
+    for (var key4 in styleState.tokenProvenance) {
+      provenance[key4] = {
+        token: styleState.tokenProvenance[key4],
+        theme: themeName
+      };
+      hasProvenance = true;
+    }
+    if (hasProvenance) setStyleTokenProvenance(styleState.style, provenance);
+  }
   var result = {
     hasMedia,
     fontFamily: styleState.fontFamily,
@@ -664,7 +694,7 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
           rulesToInsert,
           parentSplitStyles
         };
-        for (var key4 in logs) log(key4, logs[key4]);
+        for (var key5 in logs) log(key5, logs[key5]);
       } catch (e) {}
       console.groupEnd();
     }
@@ -714,38 +744,17 @@ function mergeStyle(styleState, key, val, importance) {
       (_styleState2 = styleState).style || (_styleState2.style = {});
       usedKeys[key] = importance;
       styleState.style[key] = key === "transform" && Array.isArray(out) ? [...out] : out;
+      if (shouldTrackStyleTokenProvenance) recordStyleTokenProvenance(styleState, key, originalVal);
     }
   }
 }
+function recordStyleTokenProvenance(styleState, key, originalVal) {
+  if (typeof originalVal === "string" && originalVal[0] === "$") {
+    var _styleState;
+    ((_styleState = styleState).tokenProvenance || (_styleState.tokenProvenance = {}))[key] = originalVal;
+  } else if (styleState.tokenProvenance && key in styleState.tokenProvenance) delete styleState.tokenProvenance[key];
+}
 var getSubStyle = function (styleState, subKey, styleIn, avoidMergeTransform) {
-  var _loop = function (key1) {
-    var val = styleIn[key1];
-    key1 = conf2.shorthands[key1] || key1;
-    if (key1 === "transition") {
-      var _driver_animations;
-      var _styleState;
-      (_styleState = styleState).pseudoTransitions || (_styleState.pseudoTransitions = {});
-      styleState.pseudoTransitions[subKey] = val;
-      var driver = styleState.animationDriver;
-      if ((driver === null || driver === void 0 ? void 0 : driver.outputStyle) === "css") {
-        var _driver_animations1;
-        var animationConfig = (_driver_animations1 = driver.animations) === null || _driver_animations1 === void 0 ? void 0 : _driver_animations1[val];
-        if (animationConfig) styleOut["transition"] = `all ${animationConfig}${subKey[0] === "$" ? " !important" : ""}`;
-      }
-      if (!styleOut["transition"] && typeof val === "string" && !(driver === null || driver === void 0 ? void 0 : (_driver_animations = driver.animations) === null || _driver_animations === void 0 ? void 0 : _driver_animations[val])) styleOut["transition"] = val;
-      return key = key1, "continue";
-    }
-    if (!staticConfig.isHOC && key1 in skipProps && !styleProps.noSkip) return key = key1, "continue";
-    propMapper(key1, val, styleState, false, function (skey, sval, originalVal) {
-      if (originalVal !== void 0) {
-        originalValues || (originalValues = {});
-        originalValues[skey] = originalVal;
-      }
-      if (skey in validPseudoKeys) sval = getSubStyle(styleState, skey, sval, avoidMergeTransform);
-      if (!avoidMergeTransform && skey in stylePropsTransform) mergeTransform(styleOut, skey, sval);else styleOut[skey] = styleProps.noNormalize ? sval : normalizeValueWithProperty(sval, key1);
-    });
-    key = key1;
-  };
   var {
     staticConfig,
     conf: conf2,
@@ -753,7 +762,47 @@ var getSubStyle = function (styleState, subKey, styleIn, avoidMergeTransform) {
   } = styleState;
   var styleOut = {};
   var originalValues;
-  for (var key in styleIn) _loop(key);
+  var styleInOriginalValues = styleOriginalValues.get(styleIn);
+  var parentProps = styleState.props;
+  styleState.props = {
+    ...parentProps,
+    ...styleIn
+  };
+  try {
+    var _loop = function (key1) {
+      var val = styleIn[key1];
+      key1 = conf2.shorthands[key1] || key1;
+      if (key1 === "transition") {
+        var _driver_animations;
+        var _styleState;
+        (_styleState = styleState).pseudoTransitions || (_styleState.pseudoTransitions = {});
+        styleState.pseudoTransitions[subKey] = val;
+        var driver = styleState.animationDriver;
+        if ((driver === null || driver === void 0 ? void 0 : driver.outputStyle) === "css") {
+          var _driver_animations1;
+          var animationConfig = (_driver_animations1 = driver.animations) === null || _driver_animations1 === void 0 ? void 0 : _driver_animations1[val];
+          if (animationConfig) styleOut["transition"] = `all ${animationConfig}${subKey[0] === "$" ? " !important" : ""}`;
+        }
+        if (!styleOut["transition"] && typeof val === "string" && !(driver === null || driver === void 0 ? void 0 : (_driver_animations = driver.animations) === null || _driver_animations === void 0 ? void 0 : _driver_animations[val])) styleOut["transition"] = val;
+        return key = key1, "continue";
+      }
+      if (!staticConfig.isHOC && key1 in skipProps && !styleProps.noSkip) return key = key1, "continue";
+      propMapper(key1, val, styleState, false, function (skey, sval, originalVal) {
+        var _styleInOriginalValues_skey;
+        var trackedOriginalVal = (_styleInOriginalValues_skey = styleInOriginalValues === null || styleInOriginalValues === void 0 ? void 0 : styleInOriginalValues[skey]) !== null && _styleInOriginalValues_skey !== void 0 ? _styleInOriginalValues_skey : originalVal;
+        if (trackedOriginalVal !== void 0) {
+          originalValues || (originalValues = {});
+          originalValues[skey] = trackedOriginalVal;
+        }
+        if (skey in validPseudoKeys) sval = getSubStyle(styleState, skey, sval, avoidMergeTransform);
+        if (!avoidMergeTransform && skey in stylePropsTransform) mergeTransform(styleOut, skey, sval);else styleOut[skey] = styleProps.noNormalize ? sval : normalizeValueWithProperty(sval, key1);
+      });
+      key = key1;
+    };
+    for (var key in styleIn) _loop(key);
+  } finally {
+    styleState.props = parentProps;
+  }
   if (!avoidMergeTransform) {
     var _styleState_style;
     var parentTransform = (_styleState_style = styleState.style) === null || _styleState_style === void 0 ? void 0 : _styleState_style.transform;
@@ -788,7 +837,7 @@ var getSubStyle = function (styleState, subKey, styleIn, avoidMergeTransform) {
     } else if (flatTransforms) mergeFlatTransforms(styleOut, flatTransforms);
   }
   if (!styleProps.noNormalize) fixStyles(styleOut);
-  if (originalValues) styleOriginalValues.set(styleOut, originalValues);
+  if (originalValues && Object.keys(originalValues).length) styleOriginalValues.set(styleOut, originalValues);
   return styleOut;
 };
 isWeb && React.useInsertionEffect;
@@ -797,7 +846,6 @@ var useSplitStyles = function (a, b, c, d, e, f, g, h, i, j, k, l, m) {
 
   return getSplitStyles(a, b, c, d, e, f, g, h, i, j, k, l, m);
 };
-function addStyleToInsertRules(rulesToInsert, styleObject) {}
 var defaultColor = process.env.GUI_DEFAULT_COLOR || "rgba(0,0,0,0)";
 var animatableDefaults = {
   ...Object.fromEntries(Object.entries(tokenCategories.color).map(function (param) {
@@ -873,5 +921,5 @@ function applyDefaultStyle(pkey, styleState) {
   var defaultValues = animatableDefaults[pkey];
   if (defaultValues != null && !(pkey in styleState.usedKeys) && (!styleState.style || !(pkey in styleState.style))) mergeStyle(styleState, pkey, defaultValues, 1);
 }
-export { PROP_SPLIT, getSplitStyles, getSubStyle, styleOriginalValues, useSplitStyles };
+export { PROP_SPLIT, STYLE_TOKEN_PROVENANCE_KEY, getSplitStyles, getStyleTokenProvenance, getSubStyle, styleOriginalValues, useSplitStyles };
 //# sourceMappingURL=getSplitStyles.native.js.map