@hanzogui/web 8.3.0 → 8.3.2

package/dist/cjs/helpers/getSplitStyles.js

@@ -0,0 +1,1570 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSplitStyles = exports.getSubStyle = exports.getSplitStyles = exports.PROP_SPLIT = exports.STYLE_TOKEN_PROVENANCE_KEY = exports.getStyleTokenProvenance = exports.styleOriginalValues = void 0;
+const tslib_1 = require("tslib");
+const constants_1 = require("@hanzogui/constants");
+const helpers_1 = require("@hanzogui/helpers");
+const react_1 = tslib_1.__importDefault(require("react"));
+const config_ts_1 = require("../config.js");
+const isDevTools_ts_1 = require("../constants/isDevTools.js");
+const useMedia_tsx_1 = require("../hooks/useMedia.js");
+const mediaState_ts_1 = require("./mediaState.js");
+const createMediaStyle_ts_1 = require("./createMediaStyle.js");
+const expandStyles_ts_1 = require("./expandStyles.js");
+const getCSSStylesAtomic_ts_1 = require("./getCSSStylesAtomic.js");
+const getDefaultProps_ts_1 = require("./getDefaultProps.js");
+const getDynamicVal_ts_1 = require("./getDynamicVal.js");
+const getGroupPropParts_ts_1 = require("./getGroupPropParts.js");
+const insertStyleRule_tsx_1 = require("./insertStyleRule.js");
+const isActivePlatform_ts_1 = require("./isActivePlatform.js");
+const isActiveTheme_ts_1 = require("./isActiveTheme.js");
+const log_ts_1 = require("./log.js");
+const normalizeValueWithProperty_ts_1 = require("./normalizeValueWithProperty.js");
+const propMapper_ts_1 = require("./propMapper.js");
+const pseudoDescriptors_ts_1 = require("./pseudoDescriptors.js");
+const skipProps_ts_1 = require("./skipProps.js");
+const sortString_ts_1 = require("./sortString.js");
+const styleOriginalValues_ts_1 = require("./styleOriginalValues.js");
+Object.defineProperty(exports, "styleOriginalValues", { enumerable: true, get: function () { return styleOriginalValues_ts_1.styleOriginalValues; } });
+const styleProvenance_ts_1 = require("./styleProvenance.js");
+const transformsToString_ts_1 = require("./transformsToString.js");
+var styleProvenance_ts_2 = require("./styleProvenance.js");
+Object.defineProperty(exports, "getStyleTokenProvenance", { enumerable: true, get: function () { return styleProvenance_ts_2.getStyleTokenProvenance; } });
+Object.defineProperty(exports, "STYLE_TOKEN_PROVENANCE_KEY", { enumerable: true, get: function () { return styleProvenance_ts_2.STYLE_TOKEN_PROVENANCE_KEY; } });
+const shouldTrackStyleTokenProvenance = process.env.NODE_ENV === 'development' &&
+    process.env.GUI_ENABLE_STYLE_TOKEN_PROVENANCE === '1';
+let conf;
+exports.PROP_SPLIT = '-';
+// Normalize group keys like $group-press to $group-true-press when the group name
+// doesn't exist in context (defaults to the unnamed 'true' group)
+function normalizeGroupKey(key, groupContext) {
+    const parts = key.split('-');
+    const plen = parts.length;
+    if (
+    // check if its actually a simple group selector to avoid breaking selectors
+    plen === 2 ||
+        (plen === 3 && pseudoDescriptors_ts_1.pseudoPriorities[parts[parts.length - 1]])) {
+        const name = parts[1];
+        if (name !== 'true' && groupContext && !groupContext[name]) {
+            return key.replace('$group-', '$group-true-');
+        }
+    }
+    return key;
+}
+// if you need and easier way to test performance, you can do something like this
+// add this early return somewhere in this file and you can see roughly where it slows down:
+// return {
+//   space,
+//   hasMedia,
+//   fontFamily: styleState.fontFamily,
+//   viewProps: {
+//     children: props.children,
+//   },
+//   style: {
+//     borderColor: props.borderColor,
+//     borderWidth: props.borderWidth,
+//     padding: props.padding,
+//   },
+//   pseudos,
+//   classNames,
+//   rulesToInsert,
+//   dynamicThemeAccess,
+// }
+function isValidStyleKey(key, validStyles, accept) {
+    return key in validStyles ? true : accept && key in accept;
+}
+function shouldSkipNativeHoverProp(key, isMedia) {
+    if ("web" !== 'native')
+        return false;
+    if ((0, constants_1.getPlatformDriver)()?.pseudo)
+        return false;
+    if (key === 'hoverStyle')
+        return true;
+    if (isMedia === 'group') {
+        return (0, getGroupPropParts_ts_1.getGroupPropParts)(key.slice(1)).pseudo === 'hover';
+    }
+    return false;
+}
+const getSplitStyles = (props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, componentContext, groupContext, elementType, startedUnhydrated, debug, animationDriver) => {
+    conf = conf || (0, config_ts_1.getConfig)();
+    // use passed animationDriver or fall back to context/config
+    const driver = animationDriver ||
+        componentContext?.animationDriver ||
+        conf.animations;
+    if (props.passThrough) {
+        return null;
+    }
+    // a bit icky, we need no normalize but not fully
+    if (constants_1.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 || mediaState_ts_1.mediaState;
+    const shouldDoClasses = acceptsClassName && constants_1.isWeb && !styleProps.noClass;
+    const rulesToInsert = "web" === 'native' ? undefined : {};
+    const classNames = {};
+    let space = props.space;
+    let pseudos = null;
+    let hasMedia = false;
+    let dynamicThemeAccess;
+    let pseudoGroups;
+    let mediaGroups;
+    let className = props.className || ''; // existing classNames
+    let mediaStylesSeen = 0;
+    const validStyles = staticConfig.validStyles ||
+        (staticConfig.isText || staticConfig.isInput ? helpers_1.stylePropsText : helpers_1.validStyles);
+    if (process.env.NODE_ENV === 'development' &&
+        (debug === 'profile' || globalThis.time)) {
+        // @ts-expect-error
+        time `split-styles-setup`;
+    }
+    /**
+     * Not the biggest fan of creating an object but it is a nice API
+     */
+    const styleState = {
+        classNames,
+        conf,
+        props,
+        styleProps,
+        componentState,
+        staticConfig,
+        style: null,
+        theme,
+        usedKeys: {},
+        viewProps,
+        context: componentContext,
+        debug,
+        // resolved animation driver (respects animatedBy prop)
+        animationDriver: driver,
+    };
+    // only used by compiler
+    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)) {
+        // @ts-expect-error
+        time `style-state`;
+    }
+    if (process.env.NODE_ENV === 'development' && debug === 'verbose' && constants_1.isClient) {
+        if (isDevTools_ts_1.isDevTools) {
+            console.groupCollapsed('🔹 getSplitStyles 👇');
+            (0, log_ts_1.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;
+        }
+        // native: data-* attributes never become native props (they're stripped
+        // further down anyway), and the compiler-emitted data-disable-theme/-media
+        // flags are already consumed in createComponent. skip them before any per-prop
+        // work so they don't pay the isValidStyleKey + handling cost on the hot path.
+        if ("web" === 'native' &&
+            keyInit[0] === 'd' &&
+            keyInit.startsWith('data-')) {
+            continue;
+        }
+        if (process.env.NODE_ENV === 'development' &&
+            (debug === 'profile' || globalThis.time)) {
+            // @ts-expect-error
+            time `before-prop-${keyInit}`;
+        }
+        if (process.env.NODE_ENV === 'test' && keyInit === 'jestAnimatedStyle') {
+            continue;
+        }
+        // for custom accept sub-styles
+        if (accept) {
+            const accepted = accept[keyInit];
+            if ((accepted === 'style' || accepted === 'textStyle') &&
+                valInit &&
+                typeof valInit === 'object') {
+                viewProps[keyInit] = (0, exports.getSubStyle)(styleState, keyInit, valInit, styleProps.noClass);
+                continue;
+            }
+        }
+        // normalize shorthands up front
+        if (!disableExpandShorthands) {
+            if (keyInit in shorthands) {
+                keyInit = shorthands[keyInit];
+            }
+        }
+        if (keyInit === 'className')
+            continue; // handled above first
+        // when asChild, skip default props - they shouldn't be passed down to children
+        if (asChild) {
+            const defaults = (0, getDefaultProps_ts_1.getDefaultProps)(staticConfig);
+            if (defaults) {
+                // check both original key and expanded key (after shorthand expansion)
+                const defaultVal = defaults[keyOg] ?? defaults[keyInit];
+                if (defaultVal !== undefined && valInit === defaultVal) {
+                    continue;
+                }
+            }
+        }
+        // keyInit === 'style' is handled in skipProps
+        if (keyInit in skipProps_ts_1.skipProps && !noSkip && !isHOC) {
+            if (keyInit === 'group') {
+                if ("web" === 'web') {
+                    // add container style
+                    const identifier = `t_group_${valInit}`;
+                    const containerType = webContainerType || 'inline-size';
+                    const containerCSS = [
+                        'container',
+                        undefined,
+                        identifier,
+                        undefined,
+                        [
+                            `.${identifier} { container-name: ${valInit}; container-type: ${containerType}; }`,
+                        ],
+                    ];
+                    addStyleToInsertRules(rulesToInsert, containerCSS);
+                }
+            }
+            if (keyInit === 'transition' && typeof valInit === 'string') {
+                const animationConfig = driver?.animations?.[valInit];
+                if (animationConfig &&
+                    driver?.outputStyle === 'css' &&
+                    process.env.IS_STATIC === 'is_static') {
+                    // css output needs no runtime component: lower its named transition
+                    // to ordinary css so the compiler can keep flattening.
+                    valInit = `all ${animationConfig}`;
+                }
+                else if (animationConfig) {
+                    continue;
+                }
+                // unknown names are raw CSS transition values and pass through.
+            }
+            else {
+                continue;
+            }
+        }
+        let isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles, accept);
+        // this is all for partially optimized (not flattened)... maybe worth removing?
+        if ("web" === 'web') {
+            // react-native-web ignores data-* attributes, fixes passing them to animated views
+            if (staticConfig.isReactNative && keyInit.startsWith('data-')) {
+                keyInit = keyInit.replace('data-', '');
+                viewProps['dataSet'] || (viewProps['dataSet'] = {});
+                viewProps['dataSet'][keyInit] = valInit;
+                continue;
+            }
+        }
+        if ("web" === 'native') {
+            if (!isValidStyleKeyInit) {
+                if (!constants_1.isAndroid) {
+                    // only works in android
+                    if (keyInit === 'elevationAndroid')
+                        continue;
+                }
+                // map userSelect to native prop
+                if (keyInit === 'userSelect') {
+                    keyInit = 'selectable';
+                    valInit = valInit !== 'none';
+                }
+                else if (keyInit.startsWith('data-')) {
+                    continue;
+                }
+            }
+        }
+        if ("web" === 'web') {
+            if (!noExpand) {
+                /**
+                 * Copying in the accessibility/prop handling from react-native-web here
+                 * Keeps it in a single loop, avoids dup de-structuring to avoid bundle size
+                 */
+                if (keyInit === 'disabled' && valInit === true) {
+                    viewProps['aria-disabled'] = true;
+                    // isInput: Input/TextArea wrap the real <input>/<textarea> in a styleable, so
+                    // elementType is the wrapper here - forward disabled down or it never reaches it
+                    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;
+                        // also keep testID when using RN animation driver (Animated.View
+                        // from react-native-web only forwards testID, not data-testid)
+                        if (styleProps.isAnimated && driver?.isReactNative) {
+                            viewProps.testID = valInit;
+                        }
+                    }
+                    continue;
+                }
+                if (keyInit === 'id') {
+                    viewProps.id = valInit;
+                    continue;
+                }
+            }
+        }
+        /**
+         * There's (some) reason to this madness: we want to allow returning media/pseudo from variants
+         * Say you have a variant hoverable: { true: { hoverStyle: {} } }
+         * We run propMapper first to expand variant, then we run the inner loop and look again
+         * for if there's a pseudo/media returned from it.
+         */
+        let isVariant = !isValidStyleKeyInit && variants && keyInit in variants;
+        const isStyleLikeKey = isValidStyleKeyInit || isVariant;
+        let isPseudo = keyInit in helpers_1.validPseudoKeys;
+        let isMedia = !isStyleLikeKey && !isPseudo ? (0, useMedia_tsx_1.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) ||
+            // is in parent variants
+            (isHOC && parentVariants && keyInit in parentVariants) ||
+            inlineProps?.has(keyInit);
+        const parentVariant = parentVariants?.[keyInit];
+        const isHOCShouldPassThrough = Boolean(isHOC &&
+            (isValidStyleKeyInit || isMediaOrPseudo || parentVariant || keyInit in skipProps_ts_1.skipProps));
+        const shouldPassThrough = shouldPassProp || isHOCShouldPassThrough;
+        if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+            // console.groupEnd() // react native was not nesting right
+            console.groupCollapsed(`  🔑 ${keyOg}${keyInit !== keyOg ? ` (shorthand for ${keyInit})` : ''} ${shouldPassThrough ? '(pass)' : ''}`);
+            (0, log_ts_1.log)({ isVariant, valInit, shouldPassProp });
+            if (constants_1.isClient) {
+                (0, log_ts_1.log)({
+                    variants,
+                    variant: variants?.[keyInit],
+                    isVariant,
+                    isHOCShouldPassThrough,
+                    usedKeys: { ...styleState.usedKeys },
+                    parentStaticConfig,
+                });
+            }
+        }
+        if (shouldPassThrough) {
+            // // TODO bring this back but probably improve it?
+            // if (isPseudo) {
+            //   // this is a lot... but we need to track sub-keys so we don't override them in future things that aren't passed down
+            //   // like our own variants that aren't in parent
+            //   const pseudoStyleObject = getSubStyle(
+            //     styleState,
+            //     keyInit,
+            //     valInit,
+            //     fontFamily,
+            //     true,
+            //     state.noClass
+            //   )
+            //   const descriptor = pseudoDescriptors[keyInit]
+            //   for (const key in pseudoStyleObject) {
+            //     debugger
+            //   }
+            // }
+            passDownProp(viewProps, keyInit, valInit, isMediaOrPseudo);
+            if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+                console.groupEnd();
+            }
+            // if it's a variant here, we have a two layer variant...
+            // aka styled(Input, { unstyled: true, variants: { unstyled: {} } })
+            // which now has it's own unstyled + the child unstyled...
+            // so *don't* skip applying the styles if its different from the parent one
+            if (!isVariant) {
+                continue;
+            }
+        }
+        // after shouldPassThrough
+        if (!noSkip) {
+            if (keyInit in skipProps_ts_1.skipProps &&
+                !(keyInit === 'transition' &&
+                    typeof valInit === 'string' &&
+                    !driver?.animations?.[valInit])) {
+                if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+                    console.groupEnd();
+                }
+                continue;
+            }
+        }
+        // we sort of have to update fontFamily all the time: before variants run, after each variant
+        if (isText || isInput) {
+            if (valInit &&
+                (keyInit === 'fontFamily' || keyInit === shorthands['fontFamily']) &&
+                valInit in conf.fontsParsed) {
+                styleState.fontFamily = valInit;
+            }
+        }
+        const disablePropMap = isMediaOrPseudo || !isStyleLikeKey;
+        (0, propMapper_ts_1.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, log_ts_1.log)(val);
+                console.groupEnd();
+            }
+            if (val == null)
+                return;
+            if ("web" === 'native') {
+                if (key === 'pointerEvents') {
+                    viewProps[key] = val;
+                    return;
+                }
+            }
+            if ((!isHOC && isValidStyleKey(key, validStyles, accept)) ||
+                ("web" === 'native' && constants_1.isAndroid && key === 'elevation')) {
+                mergeStyle(styleState, key, val, 1, false, originalVal);
+                return;
+            }
+            // re-run with expanded key
+            isPseudo = key in helpers_1.validPseudoKeys;
+            isMedia = isPseudo ? false : (0, useMedia_tsx_1.getMediaKey)(key);
+            isMediaOrPseudo = Boolean(isMedia || isPseudo);
+            isVariant = variants && key in variants;
+            // handle group key transformation for variant-expanded keys (issue #3613)
+            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;
+            }
+            // have to run this logic again here because expansions may need to be passed down
+            // see StyledButtonVariantPseudoMerge test
+            const shouldPassThrough = (styleProps.noExpand && isPseudo) ||
+                (isHOC && (isMediaOrPseudo || parentStaticConfig?.variants?.[keyInit]));
+            if (shouldPassThrough) {
+                passDownProp(viewProps, key, val, isMediaOrPseudo);
+                if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+                    console.groupCollapsed(` - passing down prop ${key}`);
+                    (0, log_ts_1.log)({ val, after: { ...viewProps[key] } });
+                    console.groupEnd();
+                }
+                return;
+            }
+            if (isPseudo) {
+                if (!val)
+                    return;
+                // TODO can avoid processing this if !shouldDoClasses + state is off
+                // (note: can't because we need to set defaults on enter/exit or else enforce that they should)
+                const pseudoStyleObject = (0, exports.getSubStyle)(styleState, key, val, styleProps.noClass && !(process.env.IS_STATIC === 'is_static'));
+                if (!shouldDoClasses || process.env.IS_STATIC === 'is_static') {
+                    pseudos || (pseudos = {});
+                    pseudos[key] || (pseudos[key] = {});
+                    // if compiler we can just set this and continue on our way
+                    if (process.env.IS_STATIC === 'is_static') {
+                        Object.assign(pseudos[key], pseudoStyleObject);
+                        return;
+                    }
+                }
+                const descriptor = pseudoDescriptors_ts_1.pseudoDescriptors[key];
+                const isEnter = key === 'enterStyle';
+                const isExit = key === 'exitStyle';
+                // don't continue here on isEnter && !state.unmounted because we need to merge defaults
+                if (!descriptor) {
+                    return;
+                }
+                // on server only generate classes for enterStyle
+                if (shouldDoClasses && !isExit) {
+                    const pseudoStyles = (0, getCSSStylesAtomic_ts_1.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[helpers_1.StyleObjectProperty]}${exports.PROP_SPLIT}${descriptor.name}`;
+                        addStyleToInsertRules(rulesToInsert, psuedoStyle);
+                        classNames[fullKey] = psuedoStyle[helpers_1.StyleObjectIdentifier];
+                    }
+                }
+                if (!shouldDoClasses || isExit || isEnter) {
+                    // we don't skip this if disabled because we need to animate to default states that aren't even set:
+                    // so if we have <Stack enterStyle={{ opacity: 0 }} />
+                    // we need to animate from 0 => 1 once enter is finished
+                    // see the if (isDisabled) block below which loops through animatableDefaults
+                    const descriptorKey = descriptor.stateKey || descriptor.name;
+                    let isDisabled = componentState[descriptorKey] === 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, log_ts_1.log)({ pseudoStyleObject, isDisabled, descriptor, componentState });
+                        console.groupEnd();
+                    }
+                    const importance = descriptor.priority;
+                    const pseudoOriginalValues = styleOriginalValues_ts_1.styleOriginalValues.get(pseudoStyleObject);
+                    for (const pkey in pseudoStyleObject) {
+                        const val = pseudoStyleObject[pkey];
+                        // when disabled ensure the default value is set for future animations to align
+                        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 = {});
+                                    pseudos[key] || (pseudos[key] = {});
+                                    pseudos[key][pkey] = val;
+                                }
+                                mergeStyle(styleState, pkey, val, importance, false, pseudoOriginalValues?.[pkey]);
+                            }
+                            if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+                                (0, log_ts_1.log)('    subKey', pkey, shouldMerge, {
+                                    importance,
+                                    curImportance,
+                                    pkey,
+                                    val,
+                                });
+                            }
+                        }
+                    }
+                    // set this after the loop over pseudoStyleObject so it applies before setting usedKeys
+                    if (!isDisabled) {
+                        // mark usedKeys based on pseudoStyleObject
+                        for (const key in val) {
+                            const k = shorthands[key] || key;
+                            styleState.usedKeys[k] = Math.max(importance, styleState.usedKeys[k] || 0);
+                        }
+                    }
+                }
+                return;
+            }
+            // media
+            if (isMedia) {
+                if (!val)
+                    return;
+                // for some reason 'space' in val upsetting next ssr during prod build
+                // technically i guess this also will not apply if 0 space which makes sense?
+                const mediaKeyShort = key.slice(isMedia == 'theme' ? 7 : 1);
+                hasMedia || (hasMedia = true);
+                const hasSpace = val['space'];
+                if (hasSpace || !shouldDoClasses || styleProps.willBeAnimated) {
+                    if (!hasMedia || typeof hasMedia === 'boolean') {
+                        hasMedia = new Set();
+                    }
+                    hasMedia.add(mediaKeyShort);
+                }
+                // can bail early
+                if (isMedia === 'platform') {
+                    if (!(0, isActivePlatform_ts_1.isActivePlatform)(key)) {
+                        return;
+                    }
+                }
+                if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+                    (0, log_ts_1.log)(`  📺 ${key}`, {
+                        key,
+                        val,
+                        props,
+                        shouldDoClasses,
+                        acceptsClassName,
+                        componentState,
+                        mediaState,
+                    });
+                }
+                const priority = mediaStylesSeen;
+                mediaStylesSeen += 1;
+                // for theme media ($theme-light, $theme-dark), generate CSS classes for proper SSR
+                // when noClass is set (inline animation drivers), de-opt to inline styles so the
+                if (shouldDoClasses) {
+                    const mediaStyle = (0, exports.getSubStyle)(styleState, key, val, false);
+                    const mediaStyles = (0, getCSSStylesAtomic_ts_1.getCSSStylesAtomic)(mediaStyle);
+                    for (const style of mediaStyles) {
+                        // handle nested media:
+                        // for now we're doing weird stuff, getCSSStylesAtomic will put the
+                        // $platform-web into property so we can check it here
+                        const property = style[helpers_1.StyleObjectProperty];
+                        const isSubStyle = property[0] === '$';
+                        if (isSubStyle && !(0, isActivePlatform_ts_1.isActivePlatform)(property)) {
+                            continue;
+                        }
+                        const out = (0, createMediaStyle_ts_1.createMediaStyle)(style, mediaKeyShort, mediaState_ts_1.mediaQueryConfig, isMedia, false, priority);
+                        if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+                            (0, log_ts_1.log)(`📺 media style:`, out);
+                        }
+                        // this is imperfect it should be fixed further down, we mess up property when dealing with
+                        // media-sub-style, like $sm={{ $platform-web: {} }}
+                        // property is just $platform-web, it should br $platform-web-bg, so we add extra info from style
+                        // but that info includes the value too
+                        const subKey = isSubStyle ? style[2] : '';
+                        const fullKey = `${style[helpers_1.StyleObjectProperty]}${subKey}${exports.PROP_SPLIT}${mediaKeyShort}${style[helpers_1.StyleObjectPseudo] || ''}`;
+                        addStyleToInsertRules(rulesToInsert, out);
+                        classNames[fullKey] = out[helpers_1.StyleObjectIdentifier];
+                    }
+                }
+                else {
+                    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, log_ts_1.log)(`  📺 ❌ DISABLED ${mediaKeyShort}`);
+                            }
+                            return;
+                        }
+                        if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+                            (0, log_ts_1.log)(`  📺 ✅ ENABLED ${mediaKeyShort}`);
+                        }
+                    }
+                    const mediaStyle = (0, exports.getSubStyle)(styleState, key, val, true);
+                    let importanceBump = 0;
+                    if (isThemeMedia) {
+                        if ("web" === 'native' &&
+                            constants_1.supportsDynamicColorIOS &&
+                            (0, config_ts_1.getSetting)('fastSchemeChange')) {
+                            // iOS will use https://reactnative.dev/docs/dynamiccolorios
+                            // so need to predefine the dynamic color before merging the styles
+                            // for example: <StyledYStack $theme-dark={{borderColor: '$red10'}} $theme-light={{borderColor: '$green10'}}> => {borderColor: {dynamic: {dark: '$red10', light: '$green10'}}}
+                            styleState.style || (styleState.style = {});
+                            const scheme = mediaKeyShort;
+                            const oppositeScheme = (0, getDynamicVal_ts_1.getOppositeScheme)(mediaKeyShort);
+                            const themeOriginalValues = styleOriginalValues_ts_1.styleOriginalValues.get(mediaStyle);
+                            const isCurrentScheme = themeName === scheme || themeName.startsWith(scheme);
+                            for (const subKey in mediaStyle) {
+                                const val = (0, getDynamicVal_ts_1.extractValueFromDynamic)(mediaStyle[subKey], scheme);
+                                const existing = styleState.style[subKey];
+                                // Only color properties support DynamicColorIOS - non-color properties
+                                // like opacity, dimensions, etc. will crash if wrapped with {dynamic: {...}}
+                                // See: https://github.com/hanzoai/gui/issues/3096
+                                // See: https://github.com/hanzoai/gui/issues/2980
+                                if (!(0, getDynamicVal_ts_1.isColorStyleKey)(subKey)) {
+                                    // non-color properties require re-render to update
+                                    dynamicThemeAccess = true;
+                                    // only apply if this is the current theme
+                                    if (isCurrentScheme) {
+                                        // update mediaStyle so the later merge loop uses correct value
+                                        mediaStyle[subKey] = val;
+                                    }
+                                    else {
+                                        // remove from mediaStyle so it doesn't get merged with wrong theme's value
+                                        delete mediaStyle[subKey];
+                                    }
+                                    continue;
+                                }
+                                // if there's already a dynamic object from the other theme pseudo prop,
+                                // merge directly to avoid importance conflicts between $theme-dark and $theme-light
+                                if (existing?.dynamic) {
+                                    existing.dynamic[scheme] = val;
+                                    mediaStyle[subKey] = existing;
+                                }
+                                else {
+                                    const oppositeVal = (0, getDynamicVal_ts_1.extractValueFromDynamic)(existing, oppositeScheme);
+                                    mediaStyle[subKey] = (0, getDynamicVal_ts_1.getDynamicVal)({
+                                        scheme,
+                                        val,
+                                        oppositeVal,
+                                    });
+                                    mergeStyle(styleState, subKey, mediaStyle[subKey], priority, false, themeOriginalValues?.[subKey]);
+                                }
+                            }
+                        }
+                        else {
+                            // non-ios or no fastschemechange - need re-renders for theme changes
+                            dynamicThemeAccess = true;
+                            if (!(themeName === mediaKeyShort || themeName.startsWith(mediaKeyShort))) {
+                                return;
+                            }
+                        }
+                    }
+                    else if (isGroupMedia) {
+                        const groupInfo = (0, getGroupPropParts_ts_1.getGroupPropParts)(mediaKeyShort);
+                        const groupName = groupInfo.name;
+                        // $group-x
+                        const groupState = groupContext?.[groupName]?.state;
+                        const groupPseudoKey = groupInfo.pseudo;
+                        const groupMediaKey = groupInfo.media;
+                        if ("web" === 'native' && groupPseudoKey === 'hover') {
+                            return;
+                        }
+                        if (!groupState) {
+                            if (process.env.NODE_ENV === 'development' && debug) {
+                                (0, log_ts_1.log)(`No parent with group prop, skipping styles: ${groupName}`);
+                            }
+                            // we still want to indicate we should listen! this is how subscribeToGroupContext knows to run
+                            pseudoGroups || (pseudoGroups = new Set());
+                            return;
+                        }
+                        const componentGroupState = componentState.group?.[groupName];
+                        if (groupMediaKey) {
+                            mediaGroups || (mediaGroups = new Set());
+                            mediaGroups.add(groupMediaKey);
+                            const mediaState = componentGroupState?.media;
+                            let isActive = mediaState?.[groupMediaKey];
+                            // use parent styles if width and height hardcoded we can do an inline media match and avoid double render
+                            if (!mediaState && groupState.layout) {
+                                isActive = (0, useMedia_tsx_1.mediaKeyMatch)(groupMediaKey, groupState.layout);
+                            }
+                            if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+                                (0, log_ts_1.log)(` 🏘️ GROUP media ${groupMediaKey} active? ${isActive}`, {
+                                    ...mediaState,
+                                    usedKeys: { ...styleState.usedKeys },
+                                });
+                            }
+                            if (!isActive) {
+                                // ensure we set the defaults so animations work
+                                for (const pkey in mediaStyle) {
+                                    applyDefaultStyle(pkey, styleState);
+                                }
+                                return;
+                            }
+                            importanceBump = 2;
+                        }
+                        if (groupPseudoKey) {
+                            pseudoGroups || (pseudoGroups = new Set());
+                            pseudoGroups.add(groupName);
+                            const componentGroupPseudoState = (componentGroupState ||
+                                // fallback to context initially
+                                groupContext?.[groupName].state)?.pseudo;
+                            const isActive = componentGroupPseudoState?.[groupPseudoKey];
+                            const priority = pseudoDescriptors_ts_1.pseudoPriorities[groupPseudoKey];
+                            if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+                                (0, log_ts_1.log)(` 🏘️ GROUP pseudo ${groupMediaKey} active? ${isActive}, priority ${priority}`, {
+                                    componentGroupPseudoState: { ...componentGroupPseudoState },
+                                    usedKeys: { ...styleState.usedKeys },
+                                });
+                            }
+                            if (!isActive) {
+                                // ensure we set the defaults so animations work
+                                for (const pkey in mediaStyle) {
+                                    applyDefaultStyle(pkey, styleState);
+                                }
+                                return;
+                            }
+                            importanceBump = priority;
+                        }
+                    }
+                    else if (isPlatformMedia) {
+                        // Platform styles use specificity-based importance bumps so that more
+                        // specific platform selectors reliably win over broader ones regardless
+                        // of prop declaration order (e.g. $platform-tv always overrides
+                        // $platform-native for the same property, even if tv is listed first).
+                        importanceBump = (0, isActivePlatform_ts_1.getPlatformSpecificityBump)(mediaKeyShort);
+                    }
+                    const mediaOriginalValues = styleOriginalValues_ts_1.styleOriginalValues.get(mediaStyle);
+                    // extract transition from group pseudo styles (e.g., $group-scenario4-hover.transition)
+                    if (isGroupMedia && mediaStyle.transition) {
+                        styleState.pseudoTransitions || (styleState.pseudoTransitions = {});
+                        styleState.pseudoTransitions[`$${mediaKeyShort}`] = mediaStyle.transition;
+                    }
+                    function mergeMediaStyle(key, val, originalVal) {
+                        // on native, non-style keys from media queries (like numberOfLines)
+                        // need to go to viewProps, not style
+                        if ("web" === 'native') {
+                            if (!isValidStyleKey(key, validStyles, accept)) {
+                                viewProps[key] = val;
+                                return;
+                            }
+                        }
+                        styleState.style || (styleState.style = {});
+                        const didMerge = mergeMediaByImportance(styleState, mediaKeyShort, key, val, mediaState[mediaKeyShort], importanceBump, debug, originalVal);
+                        if (didMerge && key === 'fontFamily') {
+                            styleState.fontFamily = mediaStyle.fontFamily;
+                        }
+                    }
+                    for (const subKey in mediaStyle) {
+                        if (subKey === 'space') {
+                            continue;
+                        }
+                        if (subKey[0] === '$') {
+                            const subMediaType = (0, useMedia_tsx_1.getMediaKey)(subKey);
+                            if (subMediaType === 'platform') {
+                                if (!(0, isActivePlatform_ts_1.isActivePlatform)(subKey))
+                                    continue;
+                            }
+                            else if (subMediaType === 'theme') {
+                                if (!(0, isActiveTheme_ts_1.isActiveTheme)(subKey, themeName))
+                                    continue;
+                            }
+                            else if (subMediaType === true) {
+                                // regular media query nested inside platform/theme/media
+                                const subKeyShort = subKey.slice(1);
+                                if (!mediaState[subKeyShort])
+                                    continue;
+                            }
+                            const nestedVal = mediaStyle[subKey];
+                            const subOriginalValues = styleOriginalValues_ts_1.styleOriginalValues.get(nestedVal);
+                            // Nested styles are more specific than their outer context because
+                            // they require both conditions to be true. Calculate an importance
+                            // that is the sum of both the outer and inner importances so that:
+                            //   1) nested always beats non-nested
+                            //   2) $xs={{ $platform-android: ... }} and
+                            //      $platform-android={{ $xs: ... }} produce identical importance
+                            //      (last-declared wins for the same property)
+                            const isSizeMediaKey = !!mediaState[mediaKeyShort];
+                            const outerBase = isSizeMediaKey
+                                ? (0, useMedia_tsx_1.getMediaKeyImportance)(mediaKeyShort)
+                                : pseudoDescriptors_ts_1.defaultMediaImportance;
+                            let innerBase;
+                            if (subMediaType === 'platform') {
+                                innerBase =
+                                    pseudoDescriptors_ts_1.defaultMediaImportance + (0, isActivePlatform_ts_1.getPlatformSpecificityBump)(subKey.slice(1));
+                            }
+                            else if (subMediaType === true) {
+                                innerBase = (0, useMedia_tsx_1.getMediaKeyImportance)(subKey.slice(1));
+                            }
+                            else {
+                                innerBase = pseudoDescriptors_ts_1.defaultMediaImportance;
+                            }
+                            const nestedImportance = outerBase + importanceBump + innerBase + 1;
+                            for (const subSubKey in nestedVal) {
+                                // expand shorthands, getSubStyle doesn't expand keys
+                                // inside nested $ objects (they pass through propMapper as-is)
+                                const expandedKey = shorthands[subSubKey] || subSubKey;
+                                const { usedKeys } = styleState;
+                                if (usedKeys[expandedKey] && usedKeys[expandedKey] > nestedImportance) {
+                                    continue;
+                                }
+                                styleState.style || (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; // end media
+            }
+            // pass to view props
+            if (!isVariant) {
+                if (isStyledContextProp) {
+                    return;
+                }
+                viewProps[key] = val;
+            }
+        });
+        if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+            try {
+                (0, log_ts_1.log)(` ✔️ expand complete`, keyInit);
+                (0, log_ts_1.log)('style', { ...styleState.style });
+                (0, log_ts_1.log)('viewProps', { ...viewProps });
+                (0, log_ts_1.log)('transforms', { ...styleState.flatTransforms });
+            }
+            catch {
+                // RN can run into PayloadTooLargeError: request entity too large
+            }
+            console.groupEnd();
+        }
+    } // end prop loop
+    if (process.env.NODE_ENV === 'development' &&
+        (debug === 'profile' || globalThis.time)) {
+        // @ts-expect-error
+        time `split-styles-propsend`;
+    }
+    // style prop after:
+    const avoidNormalize = styleProps.noNormalize === false;
+    if (!avoidNormalize) {
+        if (styleState.style) {
+            (0, expandStyles_ts_1.fixStyles)(styleState.style);
+            if (!styleProps.noExpand && !styleProps.noMergeStyle) {
+                // shouldn't this be better? but breaks some tests weirdly, need to check
+                if (constants_1.isWeb && (isReactNative ? driver?.inputStyle !== 'css' : true)) {
+                    (0, getCSSStylesAtomic_ts_1.styleToCSS)(styleState.style);
+                }
+            }
+        }
+        // these are only the flat transforms
+        // always do this at the very end to preserve the order strictly (animations, origin)
+        // and allow proper merging of all pseudos before applying
+        if (styleState.flatTransforms) {
+            // we need to match the order for animations to work because it needs consistent order
+            // was thinking of having something like `state.prevTransformsOrder = ['y', 'x', ...]
+            // but if we just handle it here its not a big cost and avoids having stateful things
+            // so the strategy is: always sort by a consistent order, until you run into a "duplicate"
+            // because you can have something like:
+            //   [{ translateX: 0 }, { scale: 1 }, { translateX: 10 }]
+            // so basically we sort until we get to a duplicate... we could sort even smarter but
+            // this should work for most (all?) of our cases since the order preservation really only needs to apply
+            // to the "flat" transform props
+            styleState.style || (styleState.style = {});
+            mergeFlatTransforms(styleState.style, styleState.flatTransforms);
+        }
+        // add in defaults if not set:
+        if (parentSplitStyles) {
+            if ("web" === 'web') {
+                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 = {});
+                    styleState.style[key] = parentSplitStyles.style[key];
+                }
+            }
+        }
+    }
+    // Button for example uses disableClassName: true but renders to a 'button' element, so needs this
+    if ("web" === 'web') {
+        const shouldStringifyTransforms = !styleProps.noNormalize &&
+            !staticConfig.isReactNative &&
+            !staticConfig.isHOC &&
+            (!styleProps.isAnimated || driver?.inputStyle === 'css');
+        if (shouldStringifyTransforms && Array.isArray(styleState.style?.transform)) {
+            styleState.style.transform = (0, transformsToString_ts_1.transformsToString)(styleState.style.transform);
+        }
+    }
+    if ("web" === 'web') {
+        if (!styleProps.noMergeStyle && styleState.style && shouldDoClasses) {
+            let retainedStyles;
+            let shouldRetain = false;
+            if (styleState.style['$$css']) {
+                // avoid re-processing for rnw
+            }
+            else {
+                const atomic = (0, getCSSStylesAtomic_ts_1.getCSSStylesAtomic)(styleState.style);
+                for (const atomicStyle of atomic) {
+                    const [key, value, identifier] = atomicStyle;
+                    const isAnimatedAndTransitionOnly = styleProps.isAnimated &&
+                        styleProps.noClass &&
+                        props.animateOnly?.includes(key);
+                    // animateOnly properties should always use className on server and initial
+                    // client render to avoid hydration mismatch (server has isAnimated=false but
+                    // client has isAnimated=true for CSS driver, causing different style output)
+                    const nonAnimatedTransitionOnly = !isAnimatedAndTransitionOnly &&
+                        !styleProps.isAnimated &&
+                        constants_1.isClient &&
+                        driver?.outputStyle === 'css' &&
+                        props.animateOnly?.includes(key);
+                    if (isAnimatedAndTransitionOnly) {
+                        retainedStyles || (retainedStyles = {});
+                        retainedStyles[key] = styleState.style[key];
+                    }
+                    else if (nonAnimatedTransitionOnly) {
+                        retainedStyles || (retainedStyles = {});
+                        retainedStyles[key] = value;
+                        shouldRetain = true;
+                    }
+                    else {
+                        addStyleToInsertRules(rulesToInsert, atomicStyle);
+                        classNames[key] = identifier;
+                    }
+                }
+                if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') {
+                    // console.groupEnd() // ensure group ended from loop above
+                    console.groupCollapsed(`🔹 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 || {};
+                }
+            }
+        }
+        // when noClass is true (inline animation driver) extract non-animatable
+        // base styles to atomic CSS classNames so the driver doesn't manage them
+        // skip for RNW animation drivers since their AnimatedView doesn't forward classNames
+        if (!styleProps.noMergeStyle &&
+            styleState.style &&
+            !shouldDoClasses &&
+            styleProps.isAnimated &&
+            !driver?.isReactNative) {
+            if (!styleState.style['$$css']) {
+                const toConvert = {};
+                let hasProps = false;
+                const animateOnly = props.animateOnly;
+                for (const key in styleState.style) {
+                    if (key in helpers_1.nonAnimatableStyleProps) {
+                        toConvert[key] = styleState.style[key];
+                        delete styleState.style[key];
+                        hasProps = true;
+                    }
+                }
+                if (hasProps) {
+                    const atomic = (0, getCSSStylesAtomic_ts_1.getCSSStylesAtomic)(toConvert);
+                    for (const atomicStyle of atomic) {
+                        addStyleToInsertRules(rulesToInsert, atomicStyle);
+                        classNames[atomicStyle[helpers_1.StyleObjectProperty]] =
+                            atomicStyle[helpers_1.StyleObjectIdentifier];
+                    }
+                }
+            }
+        }
+    }
+    // merge after the prop loop - and always keep it on style dont turn into className except if RN gives us
+    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 || (styleState.style = {});
+                        const normalized = normalizeStyle(style);
+                        Object.assign(styleState.style, normalized);
+                        if (shouldTrackStyleTokenProvenance) {
+                            // the literal style prop is merged last and wins: carry its own
+                            // token provenance forward, and clear a prior token wherever it
+                            // supplies a literal (e.g. style={{ color: '#fff' }} over
+                            // color="$color9" must stay a literal).
+                            const styleOriginals = styleOriginalValues_ts_1.styleOriginalValues.get(normalized);
+                            for (const k in normalized) {
+                                recordStyleTokenProvenance(styleState, k, styleOriginals?.[k]);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    // native: swap out the right family based on weight/style
+    if ("web" === 'native') {
+        // set accessible when tabIndex is 0 (issue #3350)
+        if (viewProps.tabIndex === 0) {
+            viewProps.accessible ?? (viewProps.accessible = true);
+        }
+        const style = styleState.style;
+        if (style?.fontFamily) {
+            const faceInfo = (0, config_ts_1.getFont)(style.fontFamily)?.face;
+            if (faceInfo) {
+                const overrideFace = faceInfo[style.fontWeight]?.[style.fontStyle || 'normal']?.val;
+                if (overrideFace) {
+                    style.fontFamily = overrideFace;
+                    styleState.fontFamily = overrideFace;
+                    // If we pass both font family (e.g. InterBold) and a font weight (e.g. 900), android gets confused and just shows the default font, so we remove these:
+                    delete style.fontWeight;
+                    delete style.fontStyle;
+                }
+            }
+            if (process.env.NODE_ENV === 'development' && debug && debug !== 'profile') {
+                (0, log_ts_1.log)(`Found fontFamily native: ${style.fontFamily}`, faceInfo);
+            }
+        }
+    }
+    if (process.env.NODE_ENV === 'development' &&
+        (debug === 'profile' || globalThis.time)) {
+        // @ts-expect-error
+        time `split-styles-pre-result`;
+    }
+    // stamp exact token provenance onto the final winning style object. on native
+    // (and non-className web) this is the same identity assigned to viewProps.style,
+    // so a consumer inspecting the host node's style can recover the token + theme
+    // behind each resolved value without any enumerable-key or RN-output change.
+    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, styleProvenance_ts_1.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;
+            if ("web" === 'web') {
+                // merge className and style back into viewProps:
+                // only emit font class if fontFamily was explicitly in props (not from defaults)
+                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);
+                // is_View gets base flex styles + font reset, is_Text gets base text styles
+                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(' ');
+                // use $$css for RNW components OR when animated with RNW driver
+                // (driver's AnimatedView doesn't forward className)
+                const needsCssStyles = isReactNative || (styleProps.isAnimated && driver?.isReactNative);
+                if (styleProps.isAnimated && driver?.inputStyle === 'css') {
+                    // CSS animation driver uses className directly
+                    viewProps.className = finalClassName;
+                    if (style) {
+                        viewProps.style = style;
+                    }
+                }
+                else if (needsCssStyles) {
+                    // RNW or RNW-animated: apply classNames via $$css
+                    let cnStyles;
+                    for (const name of finalClassName.split(' ')) {
+                        cnStyles || (cnStyles = { $$css: true });
+                        cnStyles[name] = name;
+                    }
+                    viewProps.style = cnStyles
+                        ? [...(Array.isArray(style) ? style : [style]), cnStyles]
+                        : [style];
+                }
+                else {
+                    // regular web: use className directly
+                    if (finalClassName) {
+                        viewProps.className = finalClassName;
+                    }
+                    if (style) {
+                        viewProps.style = style;
+                    }
+                }
+            }
+            else {
+                if (style) {
+                    // native assign styles
+                    viewProps.style = style;
+                }
+            }
+        }
+    }
+    if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+        if (constants_1.isClient && isDevTools_ts_1.isDevTools) {
+            // end collapsed log above
+            console.groupEnd();
+            console.groupCollapsed('🔹 getSplitStyles ===>');
+            try {
+                // prettier-ignore
+                const logs = {
+                    ...result,
+                    className,
+                    componentState,
+                    viewProps,
+                    rulesToInsert,
+                    parentSplitStyles,
+                };
+                for (const key in logs) {
+                    (0, log_ts_1.log)(key, logs[key]);
+                }
+            }
+            catch {
+                // RN can run into PayloadTooLargeError: request entity too large
+            }
+            console.groupEnd();
+        }
+    }
+    if (process.env.NODE_ENV === 'development' &&
+        (debug === 'profile' || globalThis.time)) {
+        // @ts-expect-error
+        time `split-styles-done`;
+    }
+    return result;
+};
+exports.getSplitStyles = getSplitStyles;
+function mergeFlatTransforms(target, flatTransforms) {
+    Object.entries(flatTransforms)
+        .sort(([a], [b]) => (0, sortString_ts_1.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;
+    const existingImportance = usedKeys[key] || 0;
+    if (existingImportance > importance) {
+        return;
+    }
+    // track context overrides for pseudo/media styles (issues #3670, #3676)
+    // when a style sets a key that's in context props, update overriddenContextProps
+    // so it propagates to children. use the original token value (like '$8')
+    // instead of the resolved CSS variable (like 'var(--t-space-8)')
+    // so children's functional variants can look up token values.
+    const contextProps = staticConfig.context?.props || staticConfig.parentStaticConfig?.context?.props;
+    if (contextProps && key in contextProps) {
+        styleState.overriddenContextProps || (styleState.overriddenContextProps = {});
+        // Priority: 1) originalVal from propMapper, 2) tracked original from variant resolution, 3) val
+        const originalFromState = styleState.originalContextPropValues?.[key];
+        styleState.overriddenContextProps[key] = originalVal ?? originalFromState ?? val;
+    }
+    if (key in helpers_1.stylePropsTransform) {
+        styleState.flatTransforms || (styleState.flatTransforms = {});
+        usedKeys[key] = importance;
+        styleState.flatTransforms[key] = val;
+    }
+    else {
+        const shouldNormalize = constants_1.isWeb && !disableNormalize && !styleProps.noNormalize;
+        const out = shouldNormalize ? (0, normalizeValueWithProperty_ts_1.normalizeValueWithProperty)(val, key) : val;
+        if (
+        // accept is for props not styles
+        staticConfig.accept &&
+            key in staticConfig.accept) {
+            viewProps[key] = out;
+        }
+        else {
+            styleState.style || (styleState.style = {});
+            usedKeys[key] = importance;
+            styleState.style[key] =
+                // if you dont do this you'll be passing props.transform arrays directly here and then mutating them
+                // if theres any flatTransforms later, causing issues (mutating props is bad, in strict mode styles get borked)
+                key === 'transform' && Array.isArray(out) ? [...out] : out;
+            if (shouldTrackStyleTokenProvenance) {
+                // dev-tools token provenance: this write is the current winner for `key`
+                // (importance-gated above), so record the token that produced it, or clear
+                // a prior token when a literal wins, keeping literal-over-token exact.
+                recordStyleTokenProvenance(styleState, key, originalVal);
+            }
+        }
+    }
+}
+// track which token produced the winning value for a style key so the final
+// style object can expose exact provenance. only the base (painted) style is
+// tracked — pseudo/media writes flow through mergeStyle at their real importance,
+// and a literal override clears any earlier token for that key.
+function recordStyleTokenProvenance(styleState, key, originalVal) {
+    if (typeof originalVal === 'string' && originalVal[0] === '$') {
+        ;
+        (styleState.tokenProvenance || (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, styleProps } = styleState;
+    const styleOut = {};
+    let originalValues;
+    const styleInOriginalValues = styleOriginalValues_ts_1.styleOriginalValues.get(styleIn);
+    const parentProps = styleState.props;
+    styleState.props = { ...parentProps, ...styleIn };
+    try {
+        for (let key in styleIn) {
+            const val = styleIn[key];
+            key = conf.shorthands[key] || key;
+            // extract transition from pseudo-style props (e.g., hoverStyle.transition)
+            // store it separately for animation drivers to use for enter/exit timing
+            if (key === 'transition') {
+                styleState.pseudoTransitions || (styleState.pseudoTransitions = {});
+                styleState.pseudoTransitions[subKey] = val;
+                // for CSS driver, also add transition to CSS output so native CSS transitions work
+                // group styles ($group-*) need !important to override inline base transition
+                const driver = styleState.animationDriver;
+                if (driver?.outputStyle === 'css') {
+                    const animationConfig = driver.animations?.[val];
+                    if (animationConfig) {
+                        const important = subKey[0] === '$' ? ' !important' : '';
+                        styleOut['transition'] = `all ${animationConfig}${important}`;
+                    }
+                }
+                // not a known animation name, pass through as raw CSS
+                if (!styleOut['transition'] &&
+                    typeof val === 'string' &&
+                    !driver?.animations?.[val]) {
+                    styleOut['transition'] = val;
+                }
+                continue;
+            }
+            const shouldSkip = !staticConfig.isHOC && key in skipProps_ts_1.skipProps && !styleProps.noSkip;
+            if (shouldSkip) {
+                continue;
+            }
+            (0, propMapper_ts_1.propMapper)(key, val, styleState, false, (skey, sval, originalVal) => {
+                // track original values for context prop propagation
+                const trackedOriginalVal = styleInOriginalValues?.[skey] ?? originalVal;
+                if (trackedOriginalVal !== undefined) {
+                    originalValues || (originalValues = {});
+                    originalValues[skey] = trackedOriginalVal;
+                }
+                // pseudo inside media
+                if (skey in helpers_1.validPseudoKeys) {
+                    sval = (0, exports.getSubStyle)(styleState, skey, sval, avoidMergeTransform);
+                }
+                if (!avoidMergeTransform && skey in helpers_1.stylePropsTransform) {
+                    mergeTransform(styleOut, skey, sval);
+                }
+                else {
+                    styleOut[skey] = styleProps.noNormalize
+                        ? sval
+                        : (0, normalizeValueWithProperty_ts_1.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) {
+            // Inline conflict check - faster than building lookup object for small arrays
+            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, expandStyles_ts_1.fixStyles)(styleOut);
+    }
+    // Store original values in WeakMap instead of on the object itself
+    if (originalValues && Object.keys(originalValues).length) {
+        styleOriginalValues_ts_1.styleOriginalValues.set(styleOut, originalValues);
+    }
+    return styleOut;
+};
+exports.getSubStyle = getSubStyle;
+// on native no need to insert any css
+const useInsertEffectCompat = constants_1.isWeb
+    ? react_1.default.useInsertionEffect || constants_1.useIsomorphicLayoutEffect
+    : () => { };
+// perf: ...args a bit expensive on native
+const useSplitStyles = (a, b, c, d, e, f, g, h, i, j, k, l, m) => {
+    'use no memo';
+    const res = (0, exports.getSplitStyles)(a, b, c, d, e, f, g, h, i, j, k, l, m);
+    if ("web" !== 'native') {
+        useInsertEffectCompat(() => {
+            if (res) {
+                (0, insertStyleRule_tsx_1.insertStyleRules)(res.rulesToInsert);
+            }
+        }, [res?.rulesToInsert]);
+    }
+    return res;
+};
+exports.useSplitStyles = useSplitStyles;
+function addStyleToInsertRules(rulesToInsert, styleObject) {
+    if ("web" === 'web') {
+        const identifier = styleObject[helpers_1.StyleObjectIdentifier];
+        if ((0, insertStyleRule_tsx_1.shouldInsertStyleRules)(identifier)) {
+            (0, insertStyleRule_tsx_1.updateRules)(identifier, styleObject[helpers_1.StyleObjectRules]);
+            rulesToInsert[identifier] = styleObject;
+        }
+    }
+}
+const defaultColor = process.env.GUI_DEFAULT_COLOR || 'rgba(0,0,0,0)';
+const animatableDefaults = {
+    ...Object.fromEntries(Object.entries(helpers_1.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 = []);
+    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,
+        };
+        // need to re-insert it at current position
+        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, useMedia_tsx_1.getMediaImportanceIfMoreImportant)(mediaKey, key, styleState, isSizeMedia);
+    if (importanceBump) {
+        // With a specificity bump, the effective importance is always
+        // defaultMediaImportance + bump. This lets higher-specificity styles
+        // (e.g. $platform-tv > $platform-native) override lower-specificity ones
+        // regardless of prop declaration order, even when getMediaImportanceIfMoreImportant
+        // returns null (meaning the same base importance was already applied).
+        //
+        // We must re-check `usedKeys[key]` here (rather than relying on the null
+        // returned by getMediaImportanceIfMoreImportant) because that function only
+        // compares against `defaultMediaImportance`, which equals our base before
+        // the bump. We need to compare against the *bumped* value to correctly
+        // allow a more-specific style to win.
+        const bumpedImportance = pseudoDescriptors_ts_1.defaultMediaImportance + importanceBump;
+        importance =
+            !usedKeys[key] || bumpedImportance > usedKeys[key] ? bumpedImportance : null;
+    }
+    if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
+        (0, log_ts_1.log)(`mergeMediaByImportance ${key} importance usedKey ${usedKeys[key]} next ${importance}`);
+    }
+    if (importance === null) {
+        return false;
+    }
+    if (key in pseudoDescriptors_ts_1.pseudoDescriptors) {
+        const descriptor = pseudoDescriptors_ts_1.pseudoDescriptors[key];
+        const descriptorKey = descriptor.stateKey || descriptor.name;
+        const isDisabled = styleState.componentState[descriptorKey] === false;
+        if (isDisabled) {
+            return false;
+        }
+        // For pseudo inside media, value is an object with subkeys
+        const pseudoOriginalValues = styleOriginalValues_ts_1.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 helpers_1.stylePropsTransform) {
+            mergeTransform(out, key, val);
+        }
+        else {
+            out[key] = (0, normalizeValueWithProperty_ts_1.normalizeValueWithProperty)(val, key);
+        }
+    }
+    if (constants_1.isWeb && Array.isArray(out.transform)) {
+        out.transform = (0, transformsToString_ts_1.transformsToString)(out.transform);
+    }
+    (0, expandStyles_ts_1.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);
+    }
+}
+//# sourceMappingURL=getSplitStyles.js.map