@hanzogui/web 2.0.0-rc.41-hanzoai.5

package/dist/cjs/helpers/getSplitStyles.cjs

@@ -0,0 +1,900 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var getSplitStyles_exports = {};
+__export(getSplitStyles_exports, {
+  PROP_SPLIT: () => PROP_SPLIT,
+  getSplitStyles: () => getSplitStyles,
+  getSubStyle: () => getSubStyle,
+  styleOriginalValues: () => styleOriginalValues,
+  useSplitStyles: () => useSplitStyles
+});
+module.exports = __toCommonJS(getSplitStyles_exports);
+var import_constants = require("@hanzogui/constants");
+var import_helpers = require("@hanzogui/helpers");
+var import_react = __toESM(require("react"), 1);
+var import_config = require("../config.cjs");
+var import_isDevTools = require("../constants/isDevTools.cjs");
+var import_useMedia = require("../hooks/useMedia.cjs");
+var import_mediaState = require("./mediaState.cjs");
+var import_createMediaStyle = require("./createMediaStyle.cjs");
+var import_expandStyles = require("./expandStyles.cjs");
+var import_getCSSStylesAtomic = require("./getCSSStylesAtomic.cjs");
+var import_getDefaultProps = require("./getDefaultProps.cjs");
+require("./getDynamicVal.cjs");
+var import_getGroupPropParts = require("./getGroupPropParts.cjs");
+var import_insertStyleRule = require("./insertStyleRule.cjs");
+var import_isActivePlatform = require("./isActivePlatform.cjs");
+var import_isActiveTheme = require("./isActiveTheme.cjs");
+var import_log = require("./log.cjs");
+var import_normalizeValueWithProperty = require("./normalizeValueWithProperty.cjs");
+var import_propMapper = require("./propMapper.cjs");
+var import_pseudoDescriptors = require("./pseudoDescriptors.cjs");
+var import_skipProps = require("./skipProps.cjs");
+var import_sortString = require("./sortString.cjs");
+var import_transformsToString = require("./transformsToString.cjs");
+let conf;
+const styleOriginalValues = /* @__PURE__ */new WeakMap();
+const PROP_SPLIT = "-";
+function normalizeGroupKey(key, groupContext) {
+  const parts = key.split("-");
+  const plen = parts.length;
+  if (plen === 2 || plen === 3 && import_pseudoDescriptors.pseudoPriorities[parts[parts.length - 1]]) {
+    const name = parts[1];
+    if (name !== "true" && groupContext && !groupContext[name]) return key.replace("$group-", "$group-true-");
+  }
+  return key;
+}
+function isValidStyleKey(key, validStyles, accept) {
+  return key in validStyles ? true : accept && key in accept;
+}
+const getSplitStyles = (props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, componentContext, groupContext, elementType, startedUnhydrated, debug, animationDriver) => {
+  conf = conf || (0, import_config.getConfig)();
+  const driver = animationDriver || componentContext?.animationDriver || conf.animations;
+  if (props.passThrough) return null;
+  if (import_constants.isWeb && styleProps.isAnimated && driver?.isReactNative && !styleProps.noNormalize) styleProps.noNormalize = "values";
+  const {
+    shorthands
+  } = conf;
+  const {
+    isHOC,
+    isText,
+    isInput,
+    variants,
+    isReactNative,
+    inlineProps,
+    inlineWhenUnflattened,
+    parentStaticConfig,
+    acceptsClassName
+  } = staticConfig;
+  const viewProps = {};
+  const mediaState = styleProps.mediaState || import_mediaState.mediaState;
+  const shouldDoClasses = acceptsClassName && import_constants.isWeb && !styleProps.noClass;
+  const rulesToInsert = {};
+  const classNames = {};
+  props.space;
+  let pseudos = null;
+  let hasMedia = false;
+  let dynamicThemeAccess;
+  let pseudoGroups;
+  let mediaGroups;
+  let className = props.className || "";
+  let mediaStylesSeen = 0;
+  const validStyles = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? import_helpers.stylePropsText : import_helpers.validStyles);
+  if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-setup`;
+  const styleState = {
+    classNames,
+    conf,
+    props,
+    styleProps,
+    componentState,
+    staticConfig,
+    style: null,
+    theme,
+    usedKeys: {},
+    viewProps,
+    context: componentContext,
+    debug,
+    animationDriver: driver
+  };
+  if (process.env.IS_STATIC === "is_static") {
+    const {
+      fallbackProps
+    } = styleProps;
+    if (fallbackProps) styleState.props = new Proxy(props, {
+      get(_, key, val) {
+        if (!Reflect.has(props, key)) return Reflect.get(fallbackProps, key);
+        return Reflect.get(props, key);
+      }
+    });
+  }
+  if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`style-state`;
+  if (process.env.NODE_ENV === "development" && debug === "verbose" && import_constants.isClient) {
+    if (import_isDevTools.isDevTools) {
+      console.groupCollapsed("🔹 getSplitStyles 👇");
+      (0, import_log.log)({
+        props,
+        staticConfig,
+        shouldDoClasses,
+        styleProps,
+        rulesToInsert,
+        componentState,
+        styleState,
+        theme: {
+          ...theme
+        }
+      });
+    }
+  }
+  const {
+    asChild
+  } = props;
+  const {
+    accept
+  } = staticConfig;
+  const {
+    noSkip,
+    disableExpandShorthands,
+    noExpand,
+    styledContext
+  } = styleProps;
+  const {
+    webContainerType
+  } = conf.settings;
+  const parentVariants = parentStaticConfig?.variants;
+  for (const keyOg in props) {
+    let keyInit = keyOg;
+    let valInit = props[keyInit];
+    if (keyInit === "children") {
+      viewProps[keyInit] = valInit;
+      continue;
+    }
+    if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`before-prop-${keyInit}`;
+    if (process.env.NODE_ENV === "test" && keyInit === "jestAnimatedStyle") continue;
+    if (accept) {
+      const accepted = accept[keyInit];
+      if ((accepted === "style" || accepted === "textStyle") && valInit && typeof valInit === "object") {
+        viewProps[keyInit] = getSubStyle(styleState, keyInit, valInit, styleProps.noClass);
+        continue;
+      }
+    }
+    if (!disableExpandShorthands) {
+      if (keyInit in shorthands) keyInit = shorthands[keyInit];
+    }
+    if (keyInit === "className") continue;
+    if (asChild) {
+      const defaults = (0, import_getDefaultProps.getDefaultProps)(staticConfig);
+      if (defaults) {
+        const defaultVal = defaults[keyOg] ?? defaults[keyInit];
+        if (defaultVal !== void 0 && valInit === defaultVal) continue;
+      }
+    }
+    if (keyInit in import_skipProps.skipProps && !noSkip && !isHOC) {
+      if (keyInit === "group") {
+        const identifier = `t_group_${valInit}`;
+        addStyleToInsertRules(rulesToInsert, ["container", void 0, identifier, void 0, [`.${identifier} { container-name: ${valInit}; container-type: ${webContainerType || "inline-size"}; }`]]);
+      }
+      if (keyInit === "transition" && typeof valInit === "string" && !driver?.animations?.[valInit]) {} else continue;
+    }
+    let isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles, accept);
+    if (staticConfig.isReactNative && keyInit.startsWith("data-")) {
+      keyInit = keyInit.replace("data-", "");
+      viewProps["dataSet"] ||= {};
+      viewProps["dataSet"][keyInit] = valInit;
+      continue;
+    }
+    if (!noExpand) {
+      if (keyInit === "disabled" && valInit === true) {
+        viewProps["aria-disabled"] = true;
+        if (elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") viewProps.disabled = true;
+        if (!variants?.disabled) continue;
+      }
+      if (keyInit === "testID") {
+        if (isReactNative) viewProps.testID = valInit;else {
+          viewProps["data-testid"] = valInit;
+          if (styleProps.isAnimated && driver?.isReactNative) viewProps.testID = valInit;
+        }
+        continue;
+      }
+      if (keyInit === "id") {
+        viewProps.id = valInit;
+        continue;
+      }
+    }
+    let isVariant = !isValidStyleKeyInit && variants && keyInit in variants;
+    const isStyleLikeKey = isValidStyleKeyInit || isVariant;
+    let isPseudo = keyInit in import_helpers.validPseudoKeys;
+    let isMedia = !isStyleLikeKey && !isPseudo ? (0, import_useMedia.getMediaKey)(keyInit) : false;
+    let isMediaOrPseudo = Boolean(isMedia || isPseudo);
+    if (isMediaOrPseudo && isMedia === "group") keyInit = normalizeGroupKey(keyInit, groupContext);
+    const isStyleProp = isValidStyleKeyInit || isMediaOrPseudo || isVariant && !noExpand;
+    if (isStyleProp && (asChild === "except-style" || asChild === "except-style-web")) continue;
+    const shouldPassProp = !isStyleProp && isHOC || isHOC && parentVariants && keyInit in parentVariants || inlineProps?.has(keyInit);
+    const parentVariant = parentVariants?.[keyInit];
+    const isHOCShouldPassThrough = Boolean(isHOC && (isValidStyleKeyInit || isMediaOrPseudo || parentVariant || keyInit in import_skipProps.skipProps));
+    const shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
+    if (process.env.NODE_ENV === "development" && debug === "verbose") {
+      console.groupCollapsed(`  \u{1F511} ${keyOg}${keyInit !== keyOg ? ` (shorthand for ${keyInit})` : ""} ${shouldPassThrough ? "(pass)" : ""}`);
+      (0, import_log.log)({
+        isVariant,
+        valInit,
+        shouldPassProp
+      });
+      if (import_constants.isClient) (0, import_log.log)({
+        variants,
+        variant: variants?.[keyInit],
+        isVariant,
+        isHOCShouldPassThrough,
+        usedKeys: {
+          ...styleState.usedKeys
+        },
+        parentStaticConfig
+      });
+    }
+    if (shouldPassThrough) {
+      passDownProp(viewProps, keyInit, valInit, isMediaOrPseudo);
+      if (process.env.NODE_ENV === "development" && debug === "verbose") console.groupEnd();
+      if (!isVariant) continue;
+    }
+    if (!noSkip) {
+      if (keyInit in import_skipProps.skipProps && !(keyInit === "transition" && typeof valInit === "string" && !driver?.animations?.[valInit])) {
+        if (process.env.NODE_ENV === "development" && debug === "verbose") console.groupEnd();
+        continue;
+      }
+    }
+    if (isText || isInput) {
+      if (valInit && (keyInit === "fontFamily" || keyInit === shorthands["fontFamily"]) && valInit in conf.fontsParsed) styleState.fontFamily = valInit;
+    }
+    const disablePropMap = isMediaOrPseudo || !isStyleLikeKey;
+    (0, import_propMapper.propMapper)(keyInit, valInit, styleState, disablePropMap, (key, val, originalVal) => {
+      const isStyledContextProp = styledContext && key in styledContext;
+      if (!isHOC && disablePropMap && !isStyledContextProp && !isMediaOrPseudo) {
+        viewProps[key] = val;
+        return;
+      }
+      if (process.env.NODE_ENV === "development" && debug === "verbose") {
+        console.groupCollapsed("  💠 expanded", keyInit, "=>", key);
+        (0, import_log.log)(val);
+        console.groupEnd();
+      }
+      if (val == null) return;
+      if (!isHOC && isValidStyleKey(key, validStyles, accept) || false) {
+        mergeStyle(styleState, key, val, 1, false, originalVal);
+        return;
+      }
+      isPseudo = key in import_helpers.validPseudoKeys;
+      isMedia = isPseudo ? false : (0, import_useMedia.getMediaKey)(key);
+      isMediaOrPseudo = Boolean(isMedia || isPseudo);
+      isVariant = variants && key in variants;
+      if (isMedia === "group") key = normalizeGroupKey(key, groupContext);
+      if (inlineProps?.has(key) || process.env.IS_STATIC === "is_static" && inlineWhenUnflattened?.has(key)) viewProps[key] = props[key] ?? val;
+      if (styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo || parentStaticConfig?.variants?.[keyInit])) {
+        passDownProp(viewProps, key, val, isMediaOrPseudo);
+        if (process.env.NODE_ENV === "development" && debug === "verbose") {
+          console.groupCollapsed(` - passing down prop ${key}`);
+          (0, import_log.log)({
+            val,
+            after: {
+              ...viewProps[key]
+            }
+          });
+          console.groupEnd();
+        }
+        return;
+      }
+      if (isPseudo) {
+        if (!val) return;
+        const pseudoStyleObject = getSubStyle(styleState, key, val, styleProps.noClass && !(process.env.IS_STATIC === "is_static"));
+        if (!shouldDoClasses || process.env.IS_STATIC === "is_static") {
+          pseudos ||= {};
+          pseudos[key] ||= {};
+          if (process.env.IS_STATIC === "is_static") {
+            Object.assign(pseudos[key], pseudoStyleObject);
+            return;
+          }
+        }
+        const descriptor = import_pseudoDescriptors.pseudoDescriptors[key];
+        const isEnter = key === "enterStyle";
+        const isExit = key === "exitStyle";
+        if (!descriptor) return;
+        if (shouldDoClasses && !isExit) {
+          const pseudoStyles = (0, import_getCSSStylesAtomic.getStyleAtomic)(pseudoStyleObject, descriptor);
+          if (process.env.NODE_ENV === "development" && debug === "verbose") console.info("pseudo:", key, pseudoStyleObject, pseudoStyles);
+          for (const psuedoStyle of pseudoStyles) {
+            const fullKey = `${psuedoStyle[import_helpers.StyleObjectProperty]}${PROP_SPLIT}${descriptor.name}`;
+            addStyleToInsertRules(rulesToInsert, psuedoStyle);
+            classNames[fullKey] = psuedoStyle[import_helpers.StyleObjectIdentifier];
+          }
+        }
+        if (!shouldDoClasses || isExit || isEnter) {
+          let isDisabled = componentState[descriptor.stateKey || descriptor.name] === false;
+          if (isExit) isDisabled = !styleProps.isExiting;
+          if (isEnter && componentState.unmounted === false) isDisabled = true;
+          if (process.env.NODE_ENV === "development" && debug === "verbose") {
+            console.groupCollapsed("pseudo", key, {
+              isDisabled
+            });
+            (0, import_log.log)({
+              pseudoStyleObject,
+              isDisabled,
+              descriptor,
+              componentState
+            });
+            console.groupEnd();
+          }
+          const importance = descriptor.priority;
+          const pseudoOriginalValues = styleOriginalValues.get(pseudoStyleObject);
+          for (const pkey in pseudoStyleObject) {
+            const val2 = pseudoStyleObject[pkey];
+            if (isDisabled) applyDefaultStyle(pkey, styleState);else {
+              const curImportance = styleState.usedKeys[pkey] || 0;
+              const shouldMerge = importance >= curImportance;
+              if (shouldMerge) {
+                if (process.env.IS_STATIC === "is_static") {
+                  pseudos ||= {};
+                  pseudos[key] ||= {};
+                  pseudos[key][pkey] = val2;
+                }
+                mergeStyle(styleState, pkey, val2, importance, false, pseudoOriginalValues?.[pkey]);
+              }
+              if (process.env.NODE_ENV === "development" && debug === "verbose") (0, import_log.log)("    subKey", pkey, shouldMerge, {
+                importance,
+                curImportance,
+                pkey,
+                val: val2
+              });
+            }
+          }
+          if (!isDisabled) for (const key2 in val) {
+            const k = shorthands[key2] || key2;
+            styleState.usedKeys[k] = Math.max(importance, styleState.usedKeys[k] || 0);
+          }
+        }
+        return;
+      }
+      if (isMedia) {
+        if (!val) return;
+        const mediaKeyShort = key.slice(isMedia == "theme" ? 7 : 1);
+        hasMedia ||= true;
+        if (val["space"] || !shouldDoClasses || styleProps.willBeAnimated) {
+          if (!hasMedia || typeof hasMedia === "boolean") hasMedia = /* @__PURE__ */new Set();
+          hasMedia.add(mediaKeyShort);
+        }
+        if (isMedia === "platform") {
+          if (!(0, import_isActivePlatform.isActivePlatform)(key)) return;
+        }
+        if (process.env.NODE_ENV === "development" && debug === "verbose") (0, import_log.log)(`  \u{1F4FA} ${key}`, {
+          key,
+          val,
+          props,
+          shouldDoClasses,
+          acceptsClassName,
+          componentState,
+          mediaState
+        });
+        const priority = mediaStylesSeen;
+        mediaStylesSeen += 1;
+        if (shouldDoClasses) {
+          const mediaStyle = getSubStyle(styleState, key, val, false);
+          const mediaStyles = (0, import_getCSSStylesAtomic.getCSSStylesAtomic)(mediaStyle);
+          for (const style of mediaStyles) {
+            const property = style[import_helpers.StyleObjectProperty];
+            const isSubStyle = property[0] === "$";
+            if (isSubStyle && !(0, import_isActivePlatform.isActivePlatform)(property)) continue;
+            const out = (0, import_createMediaStyle.createMediaStyle)(style, mediaKeyShort, import_mediaState.mediaQueryConfig, isMedia, false, priority);
+            if (process.env.NODE_ENV === "development" && debug === "verbose") (0, import_log.log)(`\u{1F4FA} media style:`, out);
+            const subKey = isSubStyle ? style[2] : "";
+            const fullKey = `${style[import_helpers.StyleObjectProperty]}${subKey}${PROP_SPLIT}${mediaKeyShort}${style[import_helpers.StyleObjectPseudo] || ""}`;
+            addStyleToInsertRules(rulesToInsert, out);
+            classNames[fullKey] = out[import_helpers.StyleObjectIdentifier];
+          }
+        } else {
+          let mergeMediaStyle = function (key2, val2, originalVal2) {
+            styleState.style ||= {};
+            if (mergeMediaByImportance(styleState, mediaKeyShort, key2, val2, mediaState[mediaKeyShort], importanceBump, debug, originalVal2) && key2 === "fontFamily") styleState.fontFamily = mediaStyle.fontFamily;
+          };
+          const isThemeMedia = isMedia === "theme";
+          const isGroupMedia = isMedia === "group";
+          const isPlatformMedia = isMedia === "platform";
+          if (!isThemeMedia && !isPlatformMedia && !isGroupMedia) {
+            if (!mediaState[mediaKeyShort]) {
+              if (process.env.NODE_ENV === "development" && debug === "verbose") (0, import_log.log)(`  \u{1F4FA} \u274C DISABLED ${mediaKeyShort}`);
+              return;
+            }
+            if (process.env.NODE_ENV === "development" && debug === "verbose") (0, import_log.log)(`  \u{1F4FA} \u2705 ENABLED ${mediaKeyShort}`);
+          }
+          const mediaStyle = getSubStyle(styleState, key, val, true);
+          let importanceBump = 0;
+          if (isThemeMedia) {
+            dynamicThemeAccess = true;
+            if (!(themeName === mediaKeyShort || themeName.startsWith(mediaKeyShort))) return;
+          } else if (isGroupMedia) {
+            const groupInfo = (0, import_getGroupPropParts.getGroupPropParts)(mediaKeyShort);
+            const groupName = groupInfo.name;
+            const groupState = groupContext?.[groupName]?.state;
+            const groupPseudoKey = groupInfo.pseudo;
+            const groupMediaKey = groupInfo.media;
+            if (!groupState) {
+              if (process.env.NODE_ENV === "development" && debug) (0, import_log.log)(`No parent with group prop, skipping styles: ${groupName}`);
+              pseudoGroups ||= /* @__PURE__ */new Set();
+              return;
+            }
+            const componentGroupState = componentState.group?.[groupName];
+            if (groupMediaKey) {
+              mediaGroups ||= /* @__PURE__ */new Set();
+              mediaGroups.add(groupMediaKey);
+              const mediaState2 = componentGroupState?.media;
+              let isActive = mediaState2?.[groupMediaKey];
+              if (!mediaState2 && groupState.layout) isActive = (0, import_useMedia.mediaKeyMatch)(groupMediaKey, groupState.layout);
+              if (process.env.NODE_ENV === "development" && debug === "verbose") (0, import_log.log)(` \u{1F3D8}\uFE0F GROUP media ${groupMediaKey} active? ${isActive}`, {
+                ...mediaState2,
+                usedKeys: {
+                  ...styleState.usedKeys
+                }
+              });
+              if (!isActive) {
+                for (const pkey in mediaStyle) applyDefaultStyle(pkey, styleState);
+                return;
+              }
+              importanceBump = 2;
+            }
+            if (groupPseudoKey) {
+              pseudoGroups ||= /* @__PURE__ */new Set();
+              pseudoGroups.add(groupName);
+              const componentGroupPseudoState = (componentGroupState || groupContext?.[groupName].state)?.pseudo;
+              const isActive = componentGroupPseudoState?.[groupPseudoKey];
+              const priority2 = import_pseudoDescriptors.pseudoPriorities[groupPseudoKey];
+              if (process.env.NODE_ENV === "development" && debug === "verbose") (0, import_log.log)(` \u{1F3D8}\uFE0F GROUP pseudo ${groupMediaKey} active? ${isActive}, priority ${priority2}`, {
+                componentGroupPseudoState: {
+                  ...componentGroupPseudoState
+                },
+                usedKeys: {
+                  ...styleState.usedKeys
+                }
+              });
+              if (!isActive) {
+                for (const pkey in mediaStyle) applyDefaultStyle(pkey, styleState);
+                return;
+              }
+              importanceBump = priority2;
+            }
+          } else if (isPlatformMedia) importanceBump = (0, import_isActivePlatform.getPlatformSpecificityBump)(mediaKeyShort);
+          const mediaOriginalValues = styleOriginalValues.get(mediaStyle);
+          if (isGroupMedia && mediaStyle.transition) {
+            styleState.pseudoTransitions ||= {};
+            styleState.pseudoTransitions[`$${mediaKeyShort}`] = mediaStyle.transition;
+          }
+          for (const subKey in mediaStyle) {
+            if (subKey === "space") continue;
+            if (subKey[0] === "$") {
+              const subMediaType = (0, import_useMedia.getMediaKey)(subKey);
+              if (subMediaType === "platform") {
+                if (!(0, import_isActivePlatform.isActivePlatform)(subKey)) continue;
+              } else if (subMediaType === "theme") {
+                if (!(0, import_isActiveTheme.isActiveTheme)(subKey, themeName)) continue;
+              } else if (subMediaType === true) {
+                if (!mediaState[subKey.slice(1)]) continue;
+              }
+              const nestedVal = mediaStyle[subKey];
+              const subOriginalValues = styleOriginalValues.get(nestedVal);
+              const outerBase = !!mediaState[mediaKeyShort] ? (0, import_useMedia.getMediaKeyImportance)(mediaKeyShort) : import_pseudoDescriptors.defaultMediaImportance;
+              let innerBase;
+              if (subMediaType === "platform") innerBase = import_pseudoDescriptors.defaultMediaImportance + (0, import_isActivePlatform.getPlatformSpecificityBump)(subKey.slice(1));else if (subMediaType === true) innerBase = (0, import_useMedia.getMediaKeyImportance)(subKey.slice(1));else innerBase = import_pseudoDescriptors.defaultMediaImportance;
+              const nestedImportance = outerBase + importanceBump + innerBase + 1;
+              for (const subSubKey in nestedVal) {
+                const expandedKey = shorthands[subSubKey] || subSubKey;
+                const {
+                  usedKeys
+                } = styleState;
+                if (usedKeys[expandedKey] && usedKeys[expandedKey] > nestedImportance) continue;
+                styleState.style ||= {};
+                mergeStyle(styleState, expandedKey, nestedVal[subSubKey], nestedImportance, false, subOriginalValues?.[subSubKey]);
+                if (expandedKey === "fontFamily") styleState.fontFamily = nestedVal[subSubKey];
+              }
+            } else mergeMediaStyle(subKey, mediaStyle[subKey], mediaOriginalValues?.[subKey]);
+          }
+        }
+        return;
+      }
+      if (!isVariant) {
+        if (isStyledContextProp) return;
+        viewProps[key] = val;
+      }
+    });
+    if (process.env.NODE_ENV === "development" && debug === "verbose") {
+      try {
+        (0, import_log.log)(` \u2714\uFE0F expand complete`, keyInit);
+        (0, import_log.log)("style", {
+          ...styleState.style
+        });
+        (0, import_log.log)("viewProps", {
+          ...viewProps
+        });
+        (0, import_log.log)("transforms", {
+          ...styleState.flatTransforms
+        });
+      } catch {}
+      console.groupEnd();
+    }
+  }
+  if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-propsend`;
+  if (!(styleProps.noNormalize === false)) {
+    if (styleState.style) {
+      (0, import_expandStyles.fixStyles)(styleState.style);
+      if (!styleProps.noExpand && !styleProps.noMergeStyle) {
+        if (import_constants.isWeb && (isReactNative ? driver?.inputStyle !== "css" : true)) (0, import_getCSSStylesAtomic.styleToCSS)(styleState.style);
+      }
+    }
+    if (styleState.flatTransforms) {
+      styleState.style ||= {};
+      mergeFlatTransforms(styleState.style, styleState.flatTransforms);
+    }
+    if (parentSplitStyles) {
+      if (shouldDoClasses) for (const key in parentSplitStyles.classNames) {
+        const val = parentSplitStyles.classNames[key];
+        if (styleState.style && key in styleState.style || key in classNames) continue;
+        classNames[key] = val;
+      }
+      if (!shouldDoClasses) for (const key in parentSplitStyles.style) {
+        if (key in classNames || styleState.style && key in styleState.style) continue;
+        styleState.style ||= {};
+        styleState.style[key] = parentSplitStyles.style[key];
+      }
+    }
+  }
+  if (!styleProps.noNormalize && !staticConfig.isReactNative && !staticConfig.isHOC && (!styleProps.isAnimated || driver?.inputStyle === "css") && Array.isArray(styleState.style?.transform)) styleState.style.transform = (0, import_transformsToString.transformsToString)(styleState.style.transform);
+  if (!styleProps.noMergeStyle && styleState.style && shouldDoClasses) {
+    let retainedStyles;
+    let shouldRetain = false;
+    if (styleState.style["$$css"]) {} else {
+      const atomic = (0, import_getCSSStylesAtomic.getCSSStylesAtomic)(styleState.style);
+      for (const atomicStyle of atomic) {
+        const [key, value, identifier] = atomicStyle;
+        const isAnimatedAndTransitionOnly = styleProps.isAnimated && styleProps.noClass && props.animateOnly?.includes(key);
+        const nonAnimatedTransitionOnly = !isAnimatedAndTransitionOnly && !styleProps.isAnimated && import_constants.isClient && driver?.outputStyle === "css" && props.animateOnly?.includes(key);
+        if (isAnimatedAndTransitionOnly) {
+          retainedStyles ||= {};
+          retainedStyles[key] = styleState.style[key];
+        } else if (nonAnimatedTransitionOnly) {
+          retainedStyles ||= {};
+          retainedStyles[key] = value;
+          shouldRetain = true;
+        } else {
+          addStyleToInsertRules(rulesToInsert, atomicStyle);
+          classNames[key] = identifier;
+        }
+      }
+      if (process.env.NODE_ENV === "development" && props.debug === "verbose") {
+        console.groupCollapsed(`\u{1F539} getSplitStyles final style object`);
+        console.info(styleState.style);
+        console.info(`retainedStyles`, retainedStyles);
+        console.groupEnd();
+      }
+      if (shouldRetain || !(process.env.IS_STATIC === "is_static")) styleState.style = retainedStyles || {};
+    }
+  }
+  if (!styleProps.noMergeStyle && styleState.style && !shouldDoClasses && styleProps.isAnimated && !driver?.isReactNative) {
+    if (!styleState.style["$$css"]) {
+      const toConvert = {};
+      let hasProps = false;
+      props.animateOnly;
+      for (const key in styleState.style) if (key in import_helpers.nonAnimatableStyleProps) {
+        toConvert[key] = styleState.style[key];
+        delete styleState.style[key];
+        hasProps = true;
+      }
+      if (hasProps) {
+        const atomic = (0, import_getCSSStylesAtomic.getCSSStylesAtomic)(toConvert);
+        for (const atomicStyle of atomic) {
+          addStyleToInsertRules(rulesToInsert, atomicStyle);
+          classNames[atomicStyle[import_helpers.StyleObjectProperty]] = atomicStyle[import_helpers.StyleObjectIdentifier];
+        }
+      }
+    }
+  }
+  const styleProp = props.style;
+  if (!styleProps.noMergeStyle && styleProp) if (isHOC) viewProps.style = normalizeStyle(styleProp);else {
+    const isArray = Array.isArray(styleProp);
+    const len = isArray ? styleProp.length : 1;
+    for (let i = 0; i < len; i++) {
+      const style = isArray ? styleProp[i] : styleProp;
+      if (style) if (style["$$css"]) Object.assign(styleState.classNames, style);else {
+        styleState.style ||= {};
+        Object.assign(styleState.style, normalizeStyle(style));
+      }
+    }
+  }
+  if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-pre-result`;
+  const result = {
+    hasMedia,
+    fontFamily: styleState.fontFamily,
+    viewProps,
+    style: styleState.style,
+    pseudos,
+    classNames,
+    rulesToInsert,
+    dynamicThemeAccess,
+    pseudoGroups,
+    mediaGroups,
+    overriddenContextProps: styleState.overriddenContextProps,
+    pseudoTransitions: styleState.pseudoTransitions
+  };
+  const asChildExceptStyleLike = asChild === "except-style" || asChild === "except-style-web";
+  if (!styleProps.noMergeStyle) {
+    if (!asChildExceptStyleLike) {
+      const style = styleState.style;
+      {
+        let fontFamily = isText || isInput ? styleState.fontFamily : null;
+        if (fontFamily && fontFamily[0] === "$") fontFamily = fontFamily.slice(1);
+        const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : "";
+        const groupClassName = props.group ? `t_group_${props.group}` : "";
+        const componentNameFinal = props.componentName || staticConfig.componentName;
+        const componentNameClassName = props.asChild || !componentNameFinal || componentNameFinal === "Text" ? "" : `is_${componentNameFinal}`;
+        let classList = [];
+        if (componentNameClassName) classList.push(componentNameClassName);
+        if (!isText) classList.push("is_View");else classList.push("is_Text");
+        if (fontFamilyClassName) classList.push(fontFamilyClassName);
+        if (classNames) classList.push(Object.values(classNames).join(" "));
+        if (groupClassName) classList.push(groupClassName);
+        if (props.className) classList.push(props.className);
+        const finalClassName = classList.join(" ");
+        const needsCssStyles = isReactNative || styleProps.isAnimated && driver?.isReactNative;
+        if (styleProps.isAnimated && driver?.inputStyle === "css") {
+          viewProps.className = finalClassName;
+          if (style) viewProps.style = style;
+        } else if (needsCssStyles) {
+          let cnStyles;
+          for (const name of finalClassName.split(" ")) {
+            cnStyles ||= {
+              $$css: true
+            };
+            cnStyles[name] = name;
+          }
+          viewProps.style = cnStyles ? [...(Array.isArray(style) ? style : [style]), cnStyles] : [style];
+        } else {
+          if (finalClassName) viewProps.className = finalClassName;
+          if (style) viewProps.style = style;
+        }
+      }
+    }
+  }
+  if (process.env.NODE_ENV === "development" && debug === "verbose") {
+    if (import_constants.isClient && import_isDevTools.isDevTools) {
+      console.groupEnd();
+      console.groupCollapsed("🔹 getSplitStyles ===>");
+      try {
+        const logs = {
+          ...result,
+          className,
+          componentState,
+          viewProps,
+          rulesToInsert,
+          parentSplitStyles
+        };
+        for (const key in logs) (0, import_log.log)(key, logs[key]);
+      } catch {}
+      console.groupEnd();
+    }
+  }
+  if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-done`;
+  return result;
+};
+function mergeFlatTransforms(target, flatTransforms) {
+  Object.entries(flatTransforms).sort(([a], [b]) => (0, import_sortString.sortString)(a, b)).forEach(([key, val]) => {
+    mergeTransform(target, key, val, true);
+  });
+}
+function mergeStyle(styleState, key, val, importance, disableNormalize = false, originalVal) {
+  const {
+    viewProps,
+    styleProps,
+    staticConfig,
+    usedKeys
+  } = styleState;
+  if ((usedKeys[key] || 0) > importance) return;
+  const contextProps = staticConfig.context?.props || staticConfig.parentStaticConfig?.context?.props;
+  if (contextProps && key in contextProps) {
+    styleState.overriddenContextProps ||= {};
+    const originalFromState = styleState.originalContextPropValues?.[key];
+    styleState.overriddenContextProps[key] = originalVal ?? originalFromState ?? val;
+  }
+  if (key in import_helpers.stylePropsTransform) {
+    styleState.flatTransforms ||= {};
+    usedKeys[key] = importance;
+    styleState.flatTransforms[key] = val;
+  } else {
+    const out = import_constants.isWeb && !disableNormalize && !styleProps.noNormalize ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
+    if (staticConfig.accept && key in staticConfig.accept) viewProps[key] = out;else {
+      styleState.style ||= {};
+      usedKeys[key] = importance;
+      styleState.style[key] = key === "transform" && Array.isArray(out) ? [...out] : out;
+    }
+  }
+}
+const getSubStyle = (styleState, subKey, styleIn, avoidMergeTransform) => {
+  const {
+    staticConfig,
+    conf: conf2,
+    styleProps
+  } = styleState;
+  const styleOut = {};
+  let originalValues;
+  for (let key in styleIn) {
+    const val = styleIn[key];
+    key = conf2.shorthands[key] || key;
+    if (key === "transition") {
+      styleState.pseudoTransitions ||= {};
+      styleState.pseudoTransitions[subKey] = val;
+      const driver = styleState.animationDriver;
+      if (driver?.outputStyle === "css") {
+        const animationConfig = driver.animations?.[val];
+        if (animationConfig) styleOut["transition"] = `all ${animationConfig}${subKey[0] === "$" ? " !important" : ""}`;
+      }
+      if (!styleOut["transition"] && typeof val === "string" && !driver?.animations?.[val]) styleOut["transition"] = val;
+      continue;
+    }
+    if (!staticConfig.isHOC && key in import_skipProps.skipProps && !styleProps.noSkip) continue;
+    (0, import_propMapper.propMapper)(key, val, styleState, false, (skey, sval, originalVal) => {
+      if (originalVal !== void 0) {
+        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, key);
+    });
+  }
+  if (!avoidMergeTransform) {
+    const parentTransform = styleState.style?.transform;
+    const flatTransforms = styleState.flatTransforms;
+    const styleOutTransform = styleOut.transform;
+    if (Array.isArray(styleOutTransform) && styleOutTransform.length) {
+      const len = styleOutTransform.length;
+      if (Array.isArray(parentTransform)) {
+        const merged = [];
+        outer: for (let i = 0; i < parentTransform.length; i++) {
+          const pt = parentTransform[i];
+          for (const pk in pt) {
+            for (let j = 0; j < len; j++) for (const sk in styleOutTransform[j]) {
+              if (pk === sk) continue outer;
+              break;
+            }
+            merged.push(pt);
+            break;
+          }
+        }
+        for (let i = 0; i < len; i++) merged.push(styleOutTransform[i]);
+        styleOut.transform = merged;
+      }
+      if (flatTransforms) outer: for (const fk in flatTransforms) {
+        const ck = fk === "x" ? "translateX" : fk === "y" ? "translateY" : fk;
+        for (let j = 0; j < len; j++) for (const sk in styleOutTransform[j]) {
+          if (ck === sk) continue outer;
+          break;
+        }
+        mergeTransform(styleOut, fk, flatTransforms[fk]);
+      }
+    } else if (flatTransforms) mergeFlatTransforms(styleOut, flatTransforms);
+  }
+  if (!styleProps.noNormalize) (0, import_expandStyles.fixStyles)(styleOut);
+  if (originalValues) styleOriginalValues.set(styleOut, originalValues);
+  return styleOut;
+};
+const useInsertEffectCompat = import_constants.isWeb ? import_react.default.useInsertionEffect || import_constants.useIsomorphicLayoutEffect : () => {};
+const useSplitStyles = (a, b, c, d, e, f, g, h, i, j, k, l, m) => {
+  "use no memo";
+
+  const res = getSplitStyles(a, b, c, d, e, f, g, h, i, j, k, l, m);
+  useInsertEffectCompat(() => {
+    if (res) (0, import_insertStyleRule.insertStyleRules)(res.rulesToInsert);
+  }, [res?.rulesToInsert]);
+  return res;
+};
+function addStyleToInsertRules(rulesToInsert, styleObject) {
+  {
+    const identifier = styleObject[import_helpers.StyleObjectIdentifier];
+    if ((0, import_insertStyleRule.shouldInsertStyleRules)(identifier)) {
+      (0, import_insertStyleRule.updateRules)(identifier, styleObject[import_helpers.StyleObjectRules]);
+      rulesToInsert[identifier] = styleObject;
+    }
+  }
+}
+const defaultColor = process.env.TAMAGUI_DEFAULT_COLOR || "rgba(0,0,0,0)";
+const animatableDefaults = {
+  ...Object.fromEntries(Object.entries(import_helpers.tokenCategories.color).map(([k, v]) => [k, defaultColor])),
+  opacity: 1,
+  scale: 1,
+  scaleX: 1,
+  scaleY: 1,
+  rotate: "0deg",
+  rotateX: "0deg",
+  rotateY: "0deg",
+  rotateZ: "0deg",
+  skewX: "0deg",
+  skewY: "0deg",
+  x: 0,
+  y: 0,
+  borderRadius: 0
+};
+const mergeTransform = (obj, key, val, backwards = false) => {
+  if (typeof obj.transform === "string") return;
+  obj.transform ||= [];
+  obj.transform[backwards ? "unshift" : "push"]({
+    [mapTransformKeys[key] || key]: val
+  });
+};
+const mapTransformKeys = {
+  x: "translateX",
+  y: "translateY"
+};
+function passDownProp(viewProps, key, val, shouldMergeObject = false) {
+  if (shouldMergeObject) {
+    const next = {
+      ...viewProps[key],
+      ...val
+    };
+    delete viewProps[key];
+    viewProps[key] = next;
+  } else viewProps[key] = val;
+}
+function mergeMediaByImportance(styleState, mediaKey, key, value, isSizeMedia, importanceBump, debugProp, originalVal) {
+  const usedKeys = styleState.usedKeys;
+  let importance = (0, import_useMedia.getMediaImportanceIfMoreImportant)(mediaKey, key, styleState, isSizeMedia);
+  if (importanceBump) {
+    const bumpedImportance = import_pseudoDescriptors.defaultMediaImportance + importanceBump;
+    importance = !usedKeys[key] || bumpedImportance > usedKeys[key] ? bumpedImportance : null;
+  }
+  if (process.env.NODE_ENV === "development" && debugProp === "verbose") (0, import_log.log)(`mergeMediaByImportance ${key} importance usedKey ${usedKeys[key]} next ${importance}`);
+  if (importance === null) return false;
+  if (key in import_pseudoDescriptors.pseudoDescriptors) {
+    const descriptor = import_pseudoDescriptors.pseudoDescriptors[key];
+    const descriptorKey = descriptor.stateKey || descriptor.name;
+    if (styleState.componentState[descriptorKey] === false) return false;
+    const pseudoOriginalValues = styleOriginalValues.get(value);
+    for (const subKey in value) mergeStyle(styleState, subKey, value[subKey], importance, false, pseudoOriginalValues?.[subKey]);
+  } else mergeStyle(styleState, key, value, importance, false, originalVal);
+  return true;
+}
+function normalizeStyle(style) {
+  const out = {};
+  for (const key in style) {
+    const val = style[key];
+    if (key in import_helpers.stylePropsTransform) mergeTransform(out, key, val);else out[key] = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key);
+  }
+  if (import_constants.isWeb && Array.isArray(out.transform)) out.transform = (0, import_transformsToString.transformsToString)(out.transform);
+  (0, import_expandStyles.fixStyles)(out);
+  return out;
+}
+function applyDefaultStyle(pkey, styleState) {
+  const defaultValues = animatableDefaults[pkey];
+  if (defaultValues != null && !(pkey in styleState.usedKeys) && (!styleState.style || !(pkey in styleState.style))) mergeStyle(styleState, pkey, defaultValues, 1);
+}