@hanzogui/web 8.3.0 → 8.3.2

package/dist/cjs/helpers/getSplitStyles.cjs

@@ -1,945 +0,0 @@
-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,
-  STYLE_TOKEN_PROVENANCE_KEY: () => import_styleProvenance2.STYLE_TOKEN_PROVENANCE_KEY,
-  getSplitStyles: () => getSplitStyles,
-  getStyleTokenProvenance: () => import_styleProvenance2.getStyleTokenProvenance,
-  getSubStyle: () => getSubStyle,
-  styleOriginalValues: () => import_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_styleOriginalValues = require("./styleOriginalValues.cjs");
-var import_styleProvenance = require("./styleProvenance.cjs");
-var import_transformsToString = require("./transformsToString.cjs");
-var import_styleProvenance2 = require("./styleProvenance.cjs");
-const shouldTrackStyleTokenProvenance = process.env.NODE_ENV === "development" && process.env.GUI_ENABLE_STYLE_TOKEN_PROVENANCE === "1";
-let conf;
-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;
-}
-function shouldSkipNativeHoverProp(key, isMedia) {
-  return false;
-}
-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") {
-        const animationConfig = driver?.animations?.[valInit];
-        if (animationConfig && driver?.outputStyle === "css" && process.env.IS_STATIC === "is_static") valInit = `all ${animationConfig}`;else if (animationConfig) continue;
-      } 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 (isInput || 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 (shouldSkipNativeHoverProp(keyInit, isMedia)) continue;
-    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 (shouldSkipNativeHoverProp(key, isMedia)) return;
-      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 = import_styleOriginalValues.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 = import_styleOriginalValues.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 = import_styleOriginalValues.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 ||= {};
-        const normalized = normalizeStyle(style);
-        Object.assign(styleState.style, normalized);
-        if (shouldTrackStyleTokenProvenance) {
-          const styleOriginals = import_styleOriginalValues.styleOriginalValues.get(normalized);
-          for (const k in normalized) recordStyleTokenProvenance(styleState, k, styleOriginals?.[k]);
-        }
-      }
-    }
-  }
-  if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-pre-result`;
-  if (shouldTrackStyleTokenProvenance && styleState.style && styleState.tokenProvenance) {
-    const provenance = {};
-    let hasProvenance = false;
-    for (const key in styleState.tokenProvenance) {
-      provenance[key] = {
-        token: styleState.tokenProvenance[key],
-        theme: themeName
-      };
-      hasProvenance = true;
-    }
-    if (hasProvenance) (0, import_styleProvenance.setStyleTokenProvenance)(styleState.style, provenance);
-  }
-  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;
-      if (shouldTrackStyleTokenProvenance) recordStyleTokenProvenance(styleState, key, originalVal);
-    }
-  }
-}
-function recordStyleTokenProvenance(styleState, key, originalVal) {
-  if (typeof originalVal === "string" && originalVal[0] === "$") (styleState.tokenProvenance ||= {})[key] = originalVal;else if (styleState.tokenProvenance && key in styleState.tokenProvenance) delete styleState.tokenProvenance[key];
-}
-const getSubStyle = (styleState, subKey, styleIn, avoidMergeTransform) => {
-  const {
-    staticConfig,
-    conf: conf2,
-    styleProps
-  } = styleState;
-  const styleOut = {};
-  let originalValues;
-  const styleInOriginalValues = import_styleOriginalValues.styleOriginalValues.get(styleIn);
-  const parentProps = styleState.props;
-  styleState.props = {
-    ...parentProps,
-    ...styleIn
-  };
-  try {
-    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) => {
-        const trackedOriginalVal = styleInOriginalValues?.[skey] ?? originalVal;
-        if (trackedOriginalVal !== void 0) {
-          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, key);
-      });
-    }
-  } finally {
-    styleState.props = parentProps;
-  }
-  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 && Object.keys(originalValues).length) import_styleOriginalValues.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.GUI_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 = import_styleOriginalValues.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);
-}