@hanzogui/web 7.3.2 → 8.0.0

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

@@ -36,9 +36,11 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 var getSplitStyles_exports = {};
 __export(getSplitStyles_exports, {
   PROP_SPLIT: () => PROP_SPLIT,
+  STYLE_TOKEN_PROVENANCE_KEY: () => import_styleProvenance2.STYLE_TOKEN_PROVENANCE_KEY,
   getSplitStyles: () => getSplitStyles,
+  getStyleTokenProvenance: () => import_styleProvenance2.getStyleTokenProvenance,
   getSubStyle: () => getSubStyle,
-  styleOriginalValues: () => styleOriginalValues,
+  styleOriginalValues: () => import_styleOriginalValues.styleOriginalValues,
   useSplitStyles: () => useSplitStyles
 });
 module.exports = __toCommonJS(getSplitStyles_exports);
@@ -64,14 +66,17 @@ var import_propMapper = require("./propMapper.native.js");
 var import_pseudoDescriptors = require("./pseudoDescriptors.native.js");
 var import_skipProps = require("./skipProps.native.js");
 var import_sortString = require("./sortString.native.js");
+var import_styleOriginalValues = require("./styleOriginalValues.native.js");
+var import_styleProvenance = require("./styleProvenance.native.js");
 var import_transformsToString = require("./transformsToString.native.js");
+var import_styleProvenance2 = require("./styleProvenance.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("-");
@@ -85,6 +90,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 = (0, import_constants.getPlatformDriver)()) === null || _getPlatformDriver === void 0 ? void 0 : _getPlatformDriver.pseudo) return false;
+  if (key === "hoverStyle") return true;
+  if (isMedia === "group") return (0, import_getGroupPropParts.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;
@@ -93,6 +105,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) {
@@ -115,9 +128,12 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
       }
     }
     if (keyInit in import_skipProps.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);
     if (!isValidStyleKeyInit) {
@@ -136,6 +152,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];
@@ -175,44 +192,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;
-    (0, import_propMapper.propMapper)(keyInit, valInit, styleState, disablePropMap, function (key5, val2, originalVal) {
+    (0, import_propMapper.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);
         (0, import_log.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) || import_constants.isAndroid && key5 === "elevation") {
-        mergeStyle(styleState, key5, val2, 1, false, originalVal);
+      if (!isHOC && isValidStyleKey(key6, validStyles, accept) || import_constants.isAndroid && key6 === "elevation") {
+        mergeStyle(styleState, key6, val2, 1, false, originalVal);
         return;
       }
-      isPseudo = key5 in import_helpers.validPseudoKeys;
-      isMedia = isPseudo ? false : (0, import_useMedia.getMediaKey)(key5);
+      isPseudo = key6 in import_helpers.validPseudoKeys;
+      isMedia = isPseudo ? false : (0, import_useMedia.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}`);
           (0, import_log.log)({
             val: val2,
             after: {
-              ...viewProps[key5]
+              ...viewProps[key6]
             }
           });
           console.groupEnd();
@@ -221,23 +239,23 @@ 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 = import_pseudoDescriptors.pseudoDescriptors[key5];
-        var isEnter = key5 === "enterStyle";
-        var isExit = key5 === "exitStyle";
+        var descriptor = import_pseudoDescriptors.pseudoDescriptors[key6];
+        var isEnter = key6 === "enterStyle";
+        var isExit = key6 === "exitStyle";
         if (!descriptor) return;
         if (shouldDoClasses && !isExit) {
           var pseudoStyles = (0, import_getCSSStylesAtomic.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;
@@ -264,7 +282,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
             });
             (0, import_log.log)({
@@ -276,7 +294,7 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
             console.groupEnd();
           }
           var importance = descriptor.priority;
-          var pseudoOriginalValues = styleOriginalValues.get(pseudoStyleObject);
+          var pseudoOriginalValues = import_styleOriginalValues.styleOriginalValues.get(pseudoStyleObject);
           for (var pkey in pseudoStyleObject) {
             var _$val = pseudoStyleObject[pkey];
             if (isDisabled) applyDefaultStyle(pkey, styleState);else {
@@ -286,8 +304,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]);
               }
@@ -300,25 +318,25 @@ 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 (!(0, import_isActivePlatform.isActivePlatform)(key5)) return;
+          if (!(0, import_isActivePlatform.isActivePlatform)(key6)) return;
         }
-        if (process.env.NODE_ENV === "development" && debug === "verbose") (0, import_log.log)(`  \u{1F4FA} ${key5}`, {
-          key: key5,
+        if (process.env.NODE_ENV === "development" && debug === "verbose") (0, import_log.log)(`  \u{1F4FA} ${key6}`, {
+          key: key6,
           val: val2,
           props,
           shouldDoClasses,
@@ -329,7 +347,7 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
         var priority = mediaStylesSeen;
         mediaStylesSeen += 1;
         if (shouldDoClasses) {
-          var mediaStyle = getSubStyle(styleState, key5, val2, false);
+          var mediaStyle = getSubStyle(styleState, key6, val2, false);
           var mediaStyles = (0, import_getCSSStylesAtomic.getCSSStylesAtomic)(mediaStyle);
           var _iteratorNormalCompletion12 = true,
             _didIteratorError12 = false,
@@ -358,14 +376,14 @@ 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, 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[mediaKeyShort], importanceBump, debug, originalVal2) && key7 === "fontFamily") styleState.fontFamily = mediaStyle1.fontFamily;
           };
           var isThemeMedia = isMedia === "theme";
           var isGroupMedia = isMedia === "group";
@@ -377,15 +395,15 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
             }
             if (process.env.NODE_ENV === "development" && debug === "verbose") (0, import_log.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 (import_constants.isIos && (0, import_config.getSetting)("fastSchemeChange")) {
+            if (import_constants.supportsDynamicColorIOS && (0, import_config.getSetting)("fastSchemeChange")) {
               var _styleState3;
               (_styleState3 = styleState).style || (_styleState3.style = {});
               var scheme = mediaKeyShort;
               var oppositeScheme = (0, import_getDynamicVal.getOppositeScheme)(mediaKeyShort);
-              var themeOriginalValues = styleOriginalValues.get(mediaStyle1);
+              var themeOriginalValues = import_styleOriginalValues.styleOriginalValues.get(mediaStyle1);
               var isCurrentScheme = themeName === scheme || themeName.startsWith(scheme);
               for (var subKey1 in mediaStyle1) {
                 var _$val1 = (0, import_getDynamicVal.extractValueFromDynamic)(mediaStyle1[subKey1], scheme);
@@ -419,6 +437,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) (0, import_log.log)(`No parent with group prop, skipping styles: ${groupName}`);
               pseudoGroups || (pseudoGroups = /* @__PURE__ */new Set());
@@ -465,7 +484,7 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
               importanceBump = priority1;
             }
           } else if (isPlatformMedia) importanceBump = (0, import_isActivePlatform.getPlatformSpecificityBump)(mediaKeyShort);
-          var mediaOriginalValues = styleOriginalValues.get(mediaStyle1);
+          var mediaOriginalValues = import_styleOriginalValues.styleOriginalValues.get(mediaStyle1);
           if (isGroupMedia && mediaStyle1.transition) {
             var _styleState12;
             (_styleState12 = styleState).pseudoTransitions || (_styleState12.pseudoTransitions = {});
@@ -483,7 +502,7 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
                 if (!mediaState[subKey2.slice(1)]) continue;
               }
               var nestedVal = mediaStyle1[subKey2];
-              var subOriginalValues = styleOriginalValues.get(nestedVal);
+              var subOriginalValues = import_styleOriginalValues.styleOriginalValues.get(nestedVal);
               var outerBase = !!mediaState[mediaKeyShort] ? (0, import_useMedia.getMediaKeyImportance)(mediaKeyShort) : import_pseudoDescriptors.defaultMediaImportance;
               var innerBase = void 0;
               if (subMediaType === "platform") innerBase = import_pseudoDescriptors.defaultMediaImportance + (0, import_isActivePlatform.getPlatformSpecificityBump)(subKey2.slice(1));else if (subMediaType === true) innerBase = (0, import_useMedia.getMediaKeyImportance)(subKey2.slice(1));else innerBase = import_pseudoDescriptors.defaultMediaImportance;
@@ -506,7 +525,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") {
@@ -578,9 +597,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);
       }
     });
   }
@@ -650,7 +669,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 = import_styleOriginalValues.styleOriginalValues.get(normalized);
+          for (var k in normalized) recordStyleTokenProvenance(styleState, k, styleOriginals === null || styleOriginals === void 0 ? void 0 : styleOriginals[k]);
+        }
       }
     }
   }
@@ -676,6 +700,18 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
     if (process.env.NODE_ENV === "development" && debug && debug !== "profile") (0, import_log.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) (0, import_styleProvenance.setStyleTokenProvenance)(styleState.style, provenance);
+  }
   var result = {
     hasMedia,
     fontFamily: styleState.fontFamily,
@@ -710,7 +746,7 @@ var getSplitStyles = function (props, staticConfig, theme, themeName, componentS
           rulesToInsert,
           parentSplitStyles
         };
-        for (var key4 in logs) (0, import_log.log)(key4, logs[key4]);
+        for (var key5 in logs) (0, import_log.log)(key5, logs[key5]);
       } catch (e) {}
       console.groupEnd();
     }
@@ -760,38 +796,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 import_skipProps.skipProps && !styleProps.noSkip) return key = key1, "continue";
-    (0, import_propMapper.propMapper)(key1, val, styleState, false, function (skey, sval, originalVal) {
-      if (originalVal !== void 0) {
-        originalValues || (originalValues = {});
-        originalValues[skey] = originalVal;
-      }
-      if (skey in import_helpers.validPseudoKeys) sval = getSubStyle(styleState, skey, sval, avoidMergeTransform);
-      if (!avoidMergeTransform && skey in import_helpers.stylePropsTransform) mergeTransform(styleOut, skey, sval);else styleOut[skey] = styleProps.noNormalize ? sval : (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(sval, key1);
-    });
-    key = key1;
-  };
   var {
     staticConfig,
     conf: conf2,
@@ -799,7 +814,47 @@ var getSubStyle = function (styleState, subKey, styleIn, avoidMergeTransform) {
   } = styleState;
   var styleOut = {};
   var originalValues;
-  for (var key in styleIn) _loop(key);
+  var styleInOriginalValues = import_styleOriginalValues.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 import_skipProps.skipProps && !styleProps.noSkip) return key = key1, "continue";
+      (0, import_propMapper.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 import_helpers.validPseudoKeys) sval = getSubStyle(styleState, skey, sval, avoidMergeTransform);
+        if (!avoidMergeTransform && skey in import_helpers.stylePropsTransform) mergeTransform(styleOut, skey, sval);else styleOut[skey] = styleProps.noNormalize ? sval : (0, import_normalizeValueWithProperty.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;
@@ -834,7 +889,7 @@ var getSubStyle = function (styleState, subKey, styleIn, avoidMergeTransform) {
     } else if (flatTransforms) mergeFlatTransforms(styleOut, flatTransforms);
   }
   if (!styleProps.noNormalize) (0, import_expandStyles.fixStyles)(styleOut);
-  if (originalValues) styleOriginalValues.set(styleOut, originalValues);
+  if (originalValues && Object.keys(originalValues).length) import_styleOriginalValues.styleOriginalValues.set(styleOut, originalValues);
   return styleOut;
 };
 import_constants.isWeb && (import_react.default.useInsertionEffect || import_constants.useIsomorphicLayoutEffect);
@@ -900,7 +955,7 @@ function mergeMediaByImportance(styleState, mediaKey, key, value, isSizeMedia, i
     var descriptor = import_pseudoDescriptors.pseudoDescriptors[key];
     var descriptorKey = descriptor.stateKey || descriptor.name;
     if (styleState.componentState[descriptorKey] === false) return false;
-    var pseudoOriginalValues = styleOriginalValues.get(value);
+    var pseudoOriginalValues = import_styleOriginalValues.styleOriginalValues.get(value);
     for (var subKey in value) mergeStyle(styleState, subKey, value[subKey], importance, false, pseudoOriginalValues === null || pseudoOriginalValues === void 0 ? void 0 : pseudoOriginalValues[subKey]);
   } else mergeStyle(styleState, key, value, importance, false, originalVal);
   return true;