@tamagui/web - npm Package Compare versions

Comparing version 1.105.5 to 1.105.6

dist/cjs/createComponent.js

		@@ -102,3 +102,7 @@ var __create = Object.create;
		const { disableClassName } = props, isAnimatedAndHydrated = isAnimated && !supportsCSSVars && didHydrateOnce && !import_constants.isServer, isClassNameDisabled = !staticConfig.acceptsClassName && (config.disableSSR \|\| didHydrateOnce), isDisabledManually = disableClassName && !import_constants.isServer && didHydrateOnce && state.unmounted === !0;
		(isAnimatedAndHydrated \|\| isDisabledManually \|\| isClassNameDisabled) && (shouldAvoidClasses = !0);
		(isAnimatedAndHydrated \|\| isDisabledManually \|\| isClassNameDisabled) && (shouldAvoidClasses = !0, process.env.NODE_ENV === "development" && props.debug && (0, import_log.log)("avoiding className", {
		isAnimatedAndHydrated,
		isDisabledManually,
		isClassNameDisabled
		}));
		}
		@@ -105,0 +109,0 @@ const groupName = props.group;

dist/cjs/createComponent.native.js

		@@ -398,3 +398,7 @@ "use strict";
		var disableClassName = props.disableClassName, isAnimatedAndHydrated = isAnimated && !supportsCSSVars && didHydrateOnce && !import_constants.isServer, isClassNameDisabled = !staticConfig.acceptsClassName && (config.disableSSR \|\| didHydrateOnce), isDisabledManually = disableClassName && !import_constants.isServer && didHydrateOnce && state.unmounted === !0;
		(isAnimatedAndHydrated \|\| isDisabledManually \|\| isClassNameDisabled) && (shouldAvoidClasses = !0);
		(isAnimatedAndHydrated \|\| isDisabledManually \|\| isClassNameDisabled) && (shouldAvoidClasses = !0, process.env.NODE_ENV === "development" && props.debug && (0, import_log.log)("avoiding className", {
		isAnimatedAndHydrated,
		isDisabledManually,
		isClassNameDisabled
		}));
		}
		@@ -401,0 +405,0 @@ var groupName = props.group;

dist/cjs/helpers/createMediaStyle.js

		@@ -26,11 +26,13 @@ var __defProp = Object.defineProperty;
		press: "active"
		}, createMediaStyle = (styleObject, mediaKeyIn, mediaQueries, type, negate, priority) => {
		}, specifities = new Array(5).fill(0).map((_, i) => new Array(i).fill(":root").join("")), createMediaStyle = (styleObject, mediaKeyIn, mediaQueries, type, negate, priority) => {
		const [property, _value, identifier, _pseudo, rules] = styleObject, conf = (0, import_config.getConfig)(), enableMediaPropOrder = conf.settings.mediaPropOrder, isTheme = type === "theme", isPlatform = type === "platform", isGroup = type === "group", isNonWindowMedia = isTheme \|\| isPlatform \|\| isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id = `${ogPrefix}${MEDIA_SEP}${mediaKeyIn.replace("-", "")}${negKey}${MEDIA_SEP}`;
		let styleRule = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map((rule) => rule.replace(identifier, nextIdentifier)).join(";");
		let styleRule = "", groupPriority = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map((rule) => rule.replace(identifier, nextIdentifier)).join(";"), isHover = !1;
		if (isNonWindowMedia) {
		const precedenceImportancePrefix = new Array((priority \|\| 0) + (isGroup ? 1 : 0)).fill(":root").join("");
		let specificity = (priority \|\| 0) + (isGroup ? 1 : 0);
		if (isTheme \|\| isGroup) {
		const groupInfo = (0, import_getGroupPropParts.getGroupPropParts)(mediaKeyIn), mediaName = groupInfo?.name;
		groupMediaKey = groupInfo?.media, isGroup && (containerName = mediaName);
		const name = (isGroup ? "group_" : "") + mediaName, selectorStart = styleInner.indexOf(":root"), selectorEnd = styleInner.lastIndexOf("{"), selector = styleInner.slice(selectorStart, selectorEnd), precedenceSpace = (0, import_config.getSetting)("themeClassNameOnRoot") && isTheme ? "" : " ", pseudoSelectorName = groupInfo.pseudo ? groupPseudoToPseudoCSSMap[groupInfo.pseudo] \|\| groupInfo.pseudo : void 0, pseudoSelector = pseudoSelectorName ? `:${pseudoSelectorName}` : "", presedencePrefix = `:root${precedenceImportancePrefix}${precedenceSpace}`, mediaSelector = `.t_${name}${pseudoSelector}`, nextSelector = `${presedencePrefix}${mediaSelector} ${selector.replace(
		const { name, media, pseudo } = (0, import_getGroupPropParts.getGroupPropParts)(mediaKeyIn);
		groupMediaKey = media, isGroup && (containerName = name);
		const groupClassName = (isGroup ? "group_" : "") + name, selectorStart = styleInner.indexOf(":root"), selectorEnd = styleInner.lastIndexOf("{"), selector = styleInner.slice(selectorStart, selectorEnd), precedenceSpace = (0, import_config.getSetting)("themeClassNameOnRoot") && isTheme ? "" : " ", pseudoSelectorName = pseudo ? groupPseudoToPseudoCSSMap[pseudo] \|\| pseudo : void 0;
		pseudo === "press" && (specificity += 2), pseudo === "hover" && (isHover = !0);
		const pseudoSelector = pseudoSelectorName ? `:${pseudoSelectorName}` : "", presedencePrefix = `:root${specifities[specificity]}${precedenceSpace}`, mediaSelector = `.t_${groupClassName}${pseudoSelector}`, nextSelector = `${presedencePrefix}${mediaSelector} ${selector.replace(
		":root",
		@@ -41,3 +43,3 @@ ""
		} else
		styleRule = `${precedenceImportancePrefix}${styleInner}`;
		styleRule = `${specifities[specificity]}${styleInner}`;
		}
		@@ -53,5 +55,5 @@ if (!isNonWindowMedia \|\| groupMediaKey) {
		}
		const mediaKey = groupMediaKey \|\| mediaKeyIn, mediaSelector = selectors[mediaKey], mediaQuery = `${negate ? "not all and " : ""}${mediaSelector}`, precedenceImportancePrefix = groupMediaKey ? "" : enableMediaPropOrder ? (
		const mediaKey = groupMediaKey \|\| mediaKeyIn, mediaSelector = selectors[mediaKey], mediaQuery = `${negate ? "not all and " : ""}${mediaSelector}`, precedenceImportancePrefix = groupMediaKey ? groupPriority : enableMediaPropOrder && priority ? (
		// this new array should be cached
		new Array(priority).fill(":root").join("")
		specifities[priority]
		) : (
		@@ -63,4 +65,4 @@ // @ts-ignore
		}
		return [property, void 0, nextIdentifier, void 0, [styleRule]];
		return isHover && (styleRule = `@media (hover:hover){${styleRule}}`), [property, void 0, nextIdentifier, void 0, [styleRule]];
		};
		//# sourceMappingURL=createMediaStyle.js.map

dist/cjs/helpers/createMediaStyle.native.js

		@@ -66,15 +66,19 @@ "use strict";
		press: "active"
		}, createMediaStyle = function(styleObject, mediaKeyIn, mediaQueries, type, negate, priority) {
		var _styleObject = _sliced_to_array(styleObject, 5), property = _styleObject[0], _value = _styleObject[1], identifier = _styleObject[2], _pseudo = _styleObject[3], rules = _styleObject[4], conf = (0, import_config.getConfig)(), enableMediaPropOrder = conf.settings.mediaPropOrder, isTheme = type === "theme", isPlatform = type === "platform", isGroup = type === "group", isNonWindowMedia = isTheme \|\| isPlatform \|\| isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id = "".concat(ogPrefix).concat(MEDIA_SEP).concat(mediaKeyIn.replace("-", "")).concat(negKey).concat(MEDIA_SEP), styleRule = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map(function(rule) {
		}, specifities = new Array(5).fill(0).map(function(_, i) {
		return new Array(i).fill(":root").join("");
		}), createMediaStyle = function(styleObject, mediaKeyIn, mediaQueries, type, negate, priority) {
		var _styleObject = _sliced_to_array(styleObject, 5), property = _styleObject[0], _value = _styleObject[1], identifier = _styleObject[2], _pseudo = _styleObject[3], rules = _styleObject[4], conf = (0, import_config.getConfig)(), enableMediaPropOrder = conf.settings.mediaPropOrder, isTheme = type === "theme", isPlatform = type === "platform", isGroup = type === "group", isNonWindowMedia = isTheme \|\| isPlatform \|\| isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id = "".concat(ogPrefix).concat(MEDIA_SEP).concat(mediaKeyIn.replace("-", "")).concat(negKey).concat(MEDIA_SEP), styleRule = "", groupPriority = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map(function(rule) {
		return rule.replace(identifier, nextIdentifier);
		}).join(";");
		}).join(";"), isHover = !1;
		if (isNonWindowMedia) {
		var precedenceImportancePrefix = new Array((priority \|\| 0) + (isGroup ? 1 : 0)).fill(":root").join("");
		var specificity = (priority \|\| 0) + (isGroup ? 1 : 0);
		if (isTheme \|\| isGroup) {
		var groupInfo = (0, import_getGroupPropParts.getGroupPropParts)(mediaKeyIn), mediaName = groupInfo == null ? void 0 : groupInfo.name;
		groupMediaKey = groupInfo == null ? void 0 : groupInfo.media, isGroup && (containerName = mediaName);
		var name = (isGroup ? "group_" : "") + mediaName, selectorStart = styleInner.indexOf(":root"), selectorEnd = styleInner.lastIndexOf("{"), selector = styleInner.slice(selectorStart, selectorEnd), precedenceSpace = (0, import_config.getSetting)("themeClassNameOnRoot") && isTheme ? "" : " ", pseudoSelectorName = groupInfo.pseudo ? groupPseudoToPseudoCSSMap[groupInfo.pseudo] \|\| groupInfo.pseudo : void 0, pseudoSelector = pseudoSelectorName ? ":".concat(pseudoSelectorName) : "", presedencePrefix = ":root".concat(precedenceImportancePrefix).concat(precedenceSpace), mediaSelector = ".t_".concat(name).concat(pseudoSelector), nextSelector = "".concat(presedencePrefix).concat(mediaSelector, " ").concat(selector.replace(":root", ""));
		var _getGroupPropParts = (0, import_getGroupPropParts.getGroupPropParts)(mediaKeyIn), name = _getGroupPropParts.name, media = _getGroupPropParts.media, pseudo = _getGroupPropParts.pseudo;
		groupMediaKey = media, isGroup && (containerName = name);
		var groupClassName = (isGroup ? "group_" : "") + name, selectorStart = styleInner.indexOf(":root"), selectorEnd = styleInner.lastIndexOf("{"), selector = styleInner.slice(selectorStart, selectorEnd), precedenceSpace = (0, import_config.getSetting)("themeClassNameOnRoot") && isTheme ? "" : " ", pseudoSelectorName = pseudo ? groupPseudoToPseudoCSSMap[pseudo] \|\| pseudo : void 0;
		pseudo === "press" && (specificity += 2), pseudo === "hover" && (isHover = !0);
		var pseudoSelector = pseudoSelectorName ? ":".concat(pseudoSelectorName) : "", presedencePrefix = ":root".concat(specifities[specificity]).concat(precedenceSpace), mediaSelector = ".t_".concat(groupClassName).concat(pseudoSelector), nextSelector = "".concat(presedencePrefix).concat(mediaSelector, " ").concat(selector.replace(":root", ""));
		styleRule = styleInner.replace(selector, nextSelector);
		} else
		styleRule = "".concat(precedenceImportancePrefix).concat(styleInner);
		styleRule = "".concat(specifities[specificity]).concat(styleInner);
		}
		@@ -96,5 +100,5 @@ if (!isNonWindowMedia \|\| groupMediaKey) {
		}
		var mediaKey = groupMediaKey \|\| mediaKeyIn, mediaSelector1 = selectors[mediaKey], screenStr = negate ? "not all and " : "", mediaQuery = "".concat(screenStr).concat(mediaSelector1), precedenceImportancePrefix1 = groupMediaKey ? "" : enableMediaPropOrder ? (
		var mediaKey = groupMediaKey \|\| mediaKeyIn, mediaSelector1 = selectors[mediaKey], screenStr = negate ? "not all and " : "", mediaQuery = "".concat(screenStr).concat(mediaSelector1), precedenceImportancePrefix = groupMediaKey ? groupPriority : enableMediaPropOrder && priority ? (
		// this new array should be cached
		new Array(priority).fill(":root").join("")
		specifities[priority]
		) : (
		@@ -104,5 +108,5 @@ // @ts-ignore
		), prefix = groupMediaKey ? "@container ".concat(containerName) : "@media";
		groupMediaKey && (styleInner = styleRule), styleInner.includes(prefix) ? styleRule = styleInner.replace("{", " and ".concat(mediaQuery, " {")).replace("and screen and", "and") : styleRule = "".concat(prefix, " ").concat(mediaQuery, "{").concat(precedenceImportancePrefix1).concat(styleInner, "}"), groupMediaKey && (styleRule = "@supports (contain: ".concat(conf.settings.webContainerType \|\| "inline-size", ") {").concat(styleRule, "}"));
		groupMediaKey && (styleInner = styleRule), styleInner.includes(prefix) ? styleRule = styleInner.replace("{", " and ".concat(mediaQuery, " {")).replace("and screen and", "and") : styleRule = "".concat(prefix, " ").concat(mediaQuery, "{").concat(precedenceImportancePrefix).concat(styleInner, "}"), groupMediaKey && (styleRule = "@supports (contain: ".concat(conf.settings.webContainerType \|\| "inline-size", ") {").concat(styleRule, "}"));
		}
		return [
		return isHover && (styleRule = "@media (hover:hover){".concat(styleRule, "}")), [
		property,
		@@ -109,0 +113,0 @@ void 0,

dist/cjs/styled.js

		@@ -50,3 +50,3 @@ var __defProp = Object.defineProperty;
		}), parentStaticConfig?.isHOC && name && (defaultProps.componentName = name);
		const isText = !!(staticExtractionOptions?.isText \|\| parentStaticConfig?.isText), acceptsClassName = acceptsClassNameProp ?? (isPlainStyledComponent \|\| isReactNative \|\| parentStaticConfig?.isHOC && parentStaticConfig?.acceptsClassName), conf = {
		const isText = !!(staticExtractionOptions?.isText \|\| parentStaticConfig?.isText), acceptsClassName = staticExtractionOptions?.acceptsClassName ?? acceptsClassNameProp ?? (isPlainStyledComponent \|\| isReactNative \|\| parentStaticConfig?.isHOC && parentStaticConfig?.acceptsClassName), conf = {
		...parentStaticConfig,
		@@ -53,0 +53,0 @@ ...staticExtractionOptions,

dist/cjs/styled.native.js

		@@ -97,3 +97,3 @@ "use strict";
		(parentDefaultProps \|\| defaultVariants \|\| parentDefaultVariants) && (defaultProps = _object_spread({}, parentDefaultProps, parentDefaultVariants, defaultProps, defaultVariants)), parentStaticConfig != null && parentStaticConfig.isHOC && name && (defaultProps.componentName = name);
		var isText = !!(staticExtractionOptions != null && staticExtractionOptions.isText \|\| parentStaticConfig != null && parentStaticConfig.isText), acceptsClassName = acceptsClassNameProp ?? (isPlainStyledComponent \|\| isReactNative \|\| (parentStaticConfig == null ? void 0 : parentStaticConfig.isHOC) && (parentStaticConfig == null ? void 0 : parentStaticConfig.acceptsClassName)), conf = _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, parentStaticConfig, staticExtractionOptions, !isPlainStyledComponent && {
		var isText = !!(staticExtractionOptions != null && staticExtractionOptions.isText \|\| parentStaticConfig != null && parentStaticConfig.isText), _staticExtractionOptions_acceptsClassName, _ref, acceptsClassName = (_ref = (_staticExtractionOptions_acceptsClassName = staticExtractionOptions == null ? void 0 : staticExtractionOptions.acceptsClassName) !== null && _staticExtractionOptions_acceptsClassName !== void 0 ? _staticExtractionOptions_acceptsClassName : acceptsClassNameProp) !== null && _ref !== void 0 ? _ref : isPlainStyledComponent \|\| isReactNative \|\| (parentStaticConfig == null ? void 0 : parentStaticConfig.isHOC) && (parentStaticConfig == null ? void 0 : parentStaticConfig.acceptsClassName), conf = _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, parentStaticConfig, staticExtractionOptions, !isPlainStyledComponent && {
		Component
		@@ -100,0 +100,0 @@ }), {

dist/esm/createComponent.js

		@@ -120,3 +120,7 @@ import { composeRefs } from "@tamagui/compose-refs";
		const { disableClassName } = props, isAnimatedAndHydrated = isAnimated && !supportsCSSVars && didHydrateOnce && !isServer, isClassNameDisabled = !staticConfig.acceptsClassName && (config.disableSSR \|\| didHydrateOnce), isDisabledManually = disableClassName && !isServer && didHydrateOnce && state.unmounted === !0;
		(isAnimatedAndHydrated \|\| isDisabledManually \|\| isClassNameDisabled) && (shouldAvoidClasses = !0);
		(isAnimatedAndHydrated \|\| isDisabledManually \|\| isClassNameDisabled) && (shouldAvoidClasses = !0, process.env.NODE_ENV === "development" && props.debug && log("avoiding className", {
		isAnimatedAndHydrated,
		isDisabledManually,
		isClassNameDisabled
		}));
		}
		@@ -123,0 +127,0 @@ const groupName = props.group;

dist/esm/createComponent.native.js

		@@ -387,3 +387,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
		var disableClassName = props.disableClassName, isAnimatedAndHydrated = isAnimated && !supportsCSSVars && didHydrateOnce && !isServer, isClassNameDisabled = !staticConfig.acceptsClassName && (config.disableSSR \|\| didHydrateOnce), isDisabledManually = disableClassName && !isServer && didHydrateOnce && state.unmounted === !0;
		(isAnimatedAndHydrated \|\| isDisabledManually \|\| isClassNameDisabled) && (shouldAvoidClasses = !0);
		(isAnimatedAndHydrated \|\| isDisabledManually \|\| isClassNameDisabled) && (shouldAvoidClasses = !0, process.env.NODE_ENV === "development" && props.debug && log("avoiding className", {
		isAnimatedAndHydrated,
		isDisabledManually,
		isClassNameDisabled
		}));
		}
		@@ -390,0 +394,0 @@ var groupName = props.group;

dist/esm/helpers/createMediaStyle.js

		@@ -8,11 +8,13 @@ import { getConfig, getSetting } from "../config";
		press: "active"
		}, createMediaStyle = (styleObject, mediaKeyIn, mediaQueries, type, negate, priority) => {
		}, specifities = new Array(5).fill(0).map((_, i) => new Array(i).fill(":root").join("")), createMediaStyle = (styleObject, mediaKeyIn, mediaQueries, type, negate, priority) => {
		const [property, _value, identifier, _pseudo, rules] = styleObject, conf = getConfig(), enableMediaPropOrder = conf.settings.mediaPropOrder, isTheme = type === "theme", isPlatform = type === "platform", isGroup = type === "group", isNonWindowMedia = isTheme \|\| isPlatform \|\| isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id = `${ogPrefix}${MEDIA_SEP}${mediaKeyIn.replace("-", "")}${negKey}${MEDIA_SEP}`;
		let styleRule = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map((rule) => rule.replace(identifier, nextIdentifier)).join(";");
		let styleRule = "", groupPriority = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map((rule) => rule.replace(identifier, nextIdentifier)).join(";"), isHover = !1;
		if (isNonWindowMedia) {
		const precedenceImportancePrefix = new Array((priority \|\| 0) + (isGroup ? 1 : 0)).fill(":root").join("");
		let specificity = (priority \|\| 0) + (isGroup ? 1 : 0);
		if (isTheme \|\| isGroup) {
		const groupInfo = getGroupPropParts(mediaKeyIn), mediaName = groupInfo?.name;
		groupMediaKey = groupInfo?.media, isGroup && (containerName = mediaName);
		const name = (isGroup ? "group_" : "") + mediaName, selectorStart = styleInner.indexOf(":root"), selectorEnd = styleInner.lastIndexOf("{"), selector = styleInner.slice(selectorStart, selectorEnd), precedenceSpace = getSetting("themeClassNameOnRoot") && isTheme ? "" : " ", pseudoSelectorName = groupInfo.pseudo ? groupPseudoToPseudoCSSMap[groupInfo.pseudo] \|\| groupInfo.pseudo : void 0, pseudoSelector = pseudoSelectorName ? `:${pseudoSelectorName}` : "", presedencePrefix = `:root${precedenceImportancePrefix}${precedenceSpace}`, mediaSelector = `.t_${name}${pseudoSelector}`, nextSelector = `${presedencePrefix}${mediaSelector} ${selector.replace(
		const { name, media, pseudo } = getGroupPropParts(mediaKeyIn);
		groupMediaKey = media, isGroup && (containerName = name);
		const groupClassName = (isGroup ? "group_" : "") + name, selectorStart = styleInner.indexOf(":root"), selectorEnd = styleInner.lastIndexOf("{"), selector = styleInner.slice(selectorStart, selectorEnd), precedenceSpace = getSetting("themeClassNameOnRoot") && isTheme ? "" : " ", pseudoSelectorName = pseudo ? groupPseudoToPseudoCSSMap[pseudo] \|\| pseudo : void 0;
		pseudo === "press" && (specificity += 2), pseudo === "hover" && (isHover = !0);
		const pseudoSelector = pseudoSelectorName ? `:${pseudoSelectorName}` : "", presedencePrefix = `:root${specifities[specificity]}${precedenceSpace}`, mediaSelector = `.t_${groupClassName}${pseudoSelector}`, nextSelector = `${presedencePrefix}${mediaSelector} ${selector.replace(
		":root",
		@@ -23,3 +25,3 @@ ""
		} else
		styleRule = `${precedenceImportancePrefix}${styleInner}`;
		styleRule = `${specifities[specificity]}${styleInner}`;
		}
		@@ -35,5 +37,5 @@ if (!isNonWindowMedia \|\| groupMediaKey) {
		}
		const mediaKey = groupMediaKey \|\| mediaKeyIn, mediaSelector = selectors[mediaKey], mediaQuery = `${negate ? "not all and " : ""}${mediaSelector}`, precedenceImportancePrefix = groupMediaKey ? "" : enableMediaPropOrder ? (
		const mediaKey = groupMediaKey \|\| mediaKeyIn, mediaSelector = selectors[mediaKey], mediaQuery = `${negate ? "not all and " : ""}${mediaSelector}`, precedenceImportancePrefix = groupMediaKey ? groupPriority : enableMediaPropOrder && priority ? (
		// this new array should be cached
		new Array(priority).fill(":root").join("")
		specifities[priority]
		) : (
		@@ -45,3 +47,3 @@ // @ts-ignore
		}
		return [property, void 0, nextIdentifier, void 0, [styleRule]];
		return isHover && (styleRule = `@media (hover:hover){${styleRule}}`), [property, void 0, nextIdentifier, void 0, [styleRule]];
		};
		@@ -48,0 +50,0 @@ export {

dist/esm/helpers/createMediaStyle.native.js

		@@ -47,15 +47,19 @@ import { getConfig, getSetting } from "../config";
		press: "active"
		}, createMediaStyle = function(styleObject, mediaKeyIn, mediaQueries, type, negate, priority) {
		var _styleObject = _sliced_to_array(styleObject, 5), property = _styleObject[0], _value = _styleObject[1], identifier = _styleObject[2], _pseudo = _styleObject[3], rules = _styleObject[4], conf = getConfig(), enableMediaPropOrder = conf.settings.mediaPropOrder, isTheme = type === "theme", isPlatform = type === "platform", isGroup = type === "group", isNonWindowMedia = isTheme \|\| isPlatform \|\| isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id = "".concat(ogPrefix).concat(MEDIA_SEP).concat(mediaKeyIn.replace("-", "")).concat(negKey).concat(MEDIA_SEP), styleRule = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map(function(rule) {
		}, specifities = new Array(5).fill(0).map(function(_, i) {
		return new Array(i).fill(":root").join("");
		}), createMediaStyle = function(styleObject, mediaKeyIn, mediaQueries, type, negate, priority) {
		var _styleObject = _sliced_to_array(styleObject, 5), property = _styleObject[0], _value = _styleObject[1], identifier = _styleObject[2], _pseudo = _styleObject[3], rules = _styleObject[4], conf = getConfig(), enableMediaPropOrder = conf.settings.mediaPropOrder, isTheme = type === "theme", isPlatform = type === "platform", isGroup = type === "group", isNonWindowMedia = isTheme \|\| isPlatform \|\| isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id = "".concat(ogPrefix).concat(MEDIA_SEP).concat(mediaKeyIn.replace("-", "")).concat(negKey).concat(MEDIA_SEP), styleRule = "", groupPriority = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map(function(rule) {
		return rule.replace(identifier, nextIdentifier);
		}).join(";");
		}).join(";"), isHover = !1;
		if (isNonWindowMedia) {
		var precedenceImportancePrefix = new Array((priority \|\| 0) + (isGroup ? 1 : 0)).fill(":root").join("");
		var specificity = (priority \|\| 0) + (isGroup ? 1 : 0);
		if (isTheme \|\| isGroup) {
		var groupInfo = getGroupPropParts(mediaKeyIn), mediaName = groupInfo == null ? void 0 : groupInfo.name;
		groupMediaKey = groupInfo == null ? void 0 : groupInfo.media, isGroup && (containerName = mediaName);
		var name = (isGroup ? "group_" : "") + mediaName, selectorStart = styleInner.indexOf(":root"), selectorEnd = styleInner.lastIndexOf("{"), selector = styleInner.slice(selectorStart, selectorEnd), precedenceSpace = getSetting("themeClassNameOnRoot") && isTheme ? "" : " ", pseudoSelectorName = groupInfo.pseudo ? groupPseudoToPseudoCSSMap[groupInfo.pseudo] \|\| groupInfo.pseudo : void 0, pseudoSelector = pseudoSelectorName ? ":".concat(pseudoSelectorName) : "", presedencePrefix = ":root".concat(precedenceImportancePrefix).concat(precedenceSpace), mediaSelector = ".t_".concat(name).concat(pseudoSelector), nextSelector = "".concat(presedencePrefix).concat(mediaSelector, " ").concat(selector.replace(":root", ""));
		var _getGroupPropParts = getGroupPropParts(mediaKeyIn), name = _getGroupPropParts.name, media = _getGroupPropParts.media, pseudo = _getGroupPropParts.pseudo;
		groupMediaKey = media, isGroup && (containerName = name);
		var groupClassName = (isGroup ? "group_" : "") + name, selectorStart = styleInner.indexOf(":root"), selectorEnd = styleInner.lastIndexOf("{"), selector = styleInner.slice(selectorStart, selectorEnd), precedenceSpace = getSetting("themeClassNameOnRoot") && isTheme ? "" : " ", pseudoSelectorName = pseudo ? groupPseudoToPseudoCSSMap[pseudo] \|\| pseudo : void 0;
		pseudo === "press" && (specificity += 2), pseudo === "hover" && (isHover = !0);
		var pseudoSelector = pseudoSelectorName ? ":".concat(pseudoSelectorName) : "", presedencePrefix = ":root".concat(specifities[specificity]).concat(precedenceSpace), mediaSelector = ".t_".concat(groupClassName).concat(pseudoSelector), nextSelector = "".concat(presedencePrefix).concat(mediaSelector, " ").concat(selector.replace(":root", ""));
		styleRule = styleInner.replace(selector, nextSelector);
		} else
		styleRule = "".concat(precedenceImportancePrefix).concat(styleInner);
		styleRule = "".concat(specifities[specificity]).concat(styleInner);
		}
		@@ -77,5 +81,5 @@ if (!isNonWindowMedia \|\| groupMediaKey) {
		}
		var mediaKey = groupMediaKey \|\| mediaKeyIn, mediaSelector1 = selectors[mediaKey], screenStr = negate ? "not all and " : "", mediaQuery = "".concat(screenStr).concat(mediaSelector1), precedenceImportancePrefix1 = groupMediaKey ? "" : enableMediaPropOrder ? (
		var mediaKey = groupMediaKey \|\| mediaKeyIn, mediaSelector1 = selectors[mediaKey], screenStr = negate ? "not all and " : "", mediaQuery = "".concat(screenStr).concat(mediaSelector1), precedenceImportancePrefix = groupMediaKey ? groupPriority : enableMediaPropOrder && priority ? (
		// this new array should be cached
		new Array(priority).fill(":root").join("")
		specifities[priority]
		) : (
		@@ -85,5 +89,5 @@ // @ts-ignore
		), prefix = groupMediaKey ? "@container ".concat(containerName) : "@media";
		groupMediaKey && (styleInner = styleRule), styleInner.includes(prefix) ? styleRule = styleInner.replace("{", " and ".concat(mediaQuery, " {")).replace("and screen and", "and") : styleRule = "".concat(prefix, " ").concat(mediaQuery, "{").concat(precedenceImportancePrefix1).concat(styleInner, "}"), groupMediaKey && (styleRule = "@supports (contain: ".concat(conf.settings.webContainerType \|\| "inline-size", ") {").concat(styleRule, "}"));
		groupMediaKey && (styleInner = styleRule), styleInner.includes(prefix) ? styleRule = styleInner.replace("{", " and ".concat(mediaQuery, " {")).replace("and screen and", "and") : styleRule = "".concat(prefix, " ").concat(mediaQuery, "{").concat(precedenceImportancePrefix).concat(styleInner, "}"), groupMediaKey && (styleRule = "@supports (contain: ".concat(conf.settings.webContainerType \|\| "inline-size", ") {").concat(styleRule, "}"));
		}
		return [
		return isHover && (styleRule = "@media (hover:hover){".concat(styleRule, "}")), [
		property,
		@@ -90,0 +94,0 @@ void 0,

dist/esm/styled.js

		@@ -33,3 +33,3 @@ import { createComponent } from "./createComponent";
		}), parentStaticConfig?.isHOC && name && (defaultProps.componentName = name);
		const isText = !!(staticExtractionOptions?.isText \|\| parentStaticConfig?.isText), acceptsClassName = acceptsClassNameProp ?? (isPlainStyledComponent \|\| isReactNative \|\| parentStaticConfig?.isHOC && parentStaticConfig?.acceptsClassName), conf = {
		const isText = !!(staticExtractionOptions?.isText \|\| parentStaticConfig?.isText), acceptsClassName = staticExtractionOptions?.acceptsClassName ?? acceptsClassNameProp ?? (isPlainStyledComponent \|\| isReactNative \|\| parentStaticConfig?.isHOC && parentStaticConfig?.acceptsClassName), conf = {
		...parentStaticConfig,
		@@ -36,0 +36,0 @@ ...staticExtractionOptions,

dist/esm/styled.native.js

		@@ -79,3 +79,3 @@ import { createComponent } from "./createComponent";
		(parentDefaultProps \|\| defaultVariants \|\| parentDefaultVariants) && (defaultProps = _object_spread({}, parentDefaultProps, parentDefaultVariants, defaultProps, defaultVariants)), parentStaticConfig != null && parentStaticConfig.isHOC && name && (defaultProps.componentName = name);
		var isText = !!(staticExtractionOptions != null && staticExtractionOptions.isText \|\| parentStaticConfig != null && parentStaticConfig.isText), acceptsClassName = acceptsClassNameProp ?? (isPlainStyledComponent \|\| isReactNative \|\| (parentStaticConfig == null ? void 0 : parentStaticConfig.isHOC) && (parentStaticConfig == null ? void 0 : parentStaticConfig.acceptsClassName)), conf = _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, parentStaticConfig, staticExtractionOptions, !isPlainStyledComponent && {
		var isText = !!(staticExtractionOptions != null && staticExtractionOptions.isText \|\| parentStaticConfig != null && parentStaticConfig.isText), _staticExtractionOptions_acceptsClassName, _ref, acceptsClassName = (_ref = (_staticExtractionOptions_acceptsClassName = staticExtractionOptions == null ? void 0 : staticExtractionOptions.acceptsClassName) !== null && _staticExtractionOptions_acceptsClassName !== void 0 ? _staticExtractionOptions_acceptsClassName : acceptsClassNameProp) !== null && _ref !== void 0 ? _ref : isPlainStyledComponent \|\| isReactNative \|\| (parentStaticConfig == null ? void 0 : parentStaticConfig.isHOC) && (parentStaticConfig == null ? void 0 : parentStaticConfig.acceptsClassName), conf = _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, parentStaticConfig, staticExtractionOptions, !isPlainStyledComponent && {
		Component
		@@ -82,0 +82,0 @@ }), {

package.json

		{
		"name": "@tamagui/web",
		"version": "1.105.5",
		"version": "1.105.6",
		"source": "src/index.ts",
		@@ -30,14 +30,14 @@ "main": "dist/cjs",
		"dependencies": {
		"@tamagui/compose-refs": "1.105.5",
		"@tamagui/constants": "1.105.5",
		"@tamagui/helpers": "1.105.5",
		"@tamagui/normalize-css-color": "1.105.5",
		"@tamagui/timer": "1.105.5",
		"@tamagui/types": "1.105.5",
		"@tamagui/use-did-finish-ssr": "1.105.5",
		"@tamagui/use-event": "1.105.5",
		"@tamagui/use-force-update": "1.105.5"
		"@tamagui/compose-refs": "1.105.6",
		"@tamagui/constants": "1.105.6",
		"@tamagui/helpers": "1.105.6",
		"@tamagui/normalize-css-color": "1.105.6",
		"@tamagui/timer": "1.105.6",
		"@tamagui/types": "1.105.6",
		"@tamagui/use-did-finish-ssr": "1.105.6",
		"@tamagui/use-event": "1.105.6",
		"@tamagui/use-force-update": "1.105.6"
		},
		"devDependencies": {
		"@tamagui/build": "1.105.5",
		"@tamagui/build": "1.105.6",
		"@testing-library/react": "^14.0.0",
		@@ -44,0 +44,0 @@ "csstype": "^3.0.10",

src/helpers/createMediaStyle.ts

		@@ -17,2 +17,6 @@ import { getConfig, getSetting } from '../config'

		const specifities = new Array(5)
		.fill(0)
		.map((_, i) => new Array(i).fill(':root').join(''))

		export const createMediaStyle = (
		@@ -38,2 +42,3 @@ styleObject: StyleObject,
		let styleRule = ''
		let groupPriority = ''
		let groupMediaKey: string \| undefined
		@@ -43,17 +48,14 @@ let containerName: string \| undefined
		let styleInner = rules.map((rule) => rule.replace(identifier, nextIdentifier)).join(';')
		let isHover = false

		if (isNonWindowMedia) {
		const precedenceImportancePrefix = new Array((priority \|\| 0) + (isGroup ? 1 : 0))
		.fill(':root')
		.join('')
		let specificity = (priority \|\| 0) + (isGroup ? 1 : 0)

		if (isTheme \|\| isGroup) {
		const groupInfo = getGroupPropParts(mediaKeyIn)
		const mediaName = groupInfo?.name
		groupMediaKey = groupInfo?.media
		const { name, media, pseudo } = getGroupPropParts(mediaKeyIn)
		groupMediaKey = media
		if (isGroup) {
		containerName = mediaName
		containerName = name
		}
		const name = (isGroup ? 'group_' : '') + mediaName

		const groupClassName = (isGroup ? 'group_' : '') + name
		const selectorStart = styleInner.indexOf(':root')
		@@ -63,9 +65,14 @@ const selectorEnd = styleInner.lastIndexOf('{')
		const precedenceSpace = getSetting('themeClassNameOnRoot') && isTheme ? '' : ' '
		const pseudoSelectorName = groupInfo.pseudo
		? groupPseudoToPseudoCSSMap[groupInfo.pseudo] \|\| groupInfo.pseudo
		const pseudoSelectorName = pseudo
		? groupPseudoToPseudoCSSMap[pseudo] \|\| pseudo
		: undefined

		if (pseudo === 'press') {
		specificity += 2
		}
		if (pseudo === 'hover') {
		isHover = true
		}
		const pseudoSelector = pseudoSelectorName ? `:${pseudoSelectorName}` : ''
		const presedencePrefix = `:root${precedenceImportancePrefix}${precedenceSpace}`
		const mediaSelector = `.t_${name}${pseudoSelector}`
		const presedencePrefix = `:root${specifities[specificity]}${precedenceSpace}`
		const mediaSelector = `.t_${groupClassName}${pseudoSelector}`
		const nextSelector = `${presedencePrefix}${mediaSelector} ${selector.replace(
		@@ -79,3 +86,3 @@ ':root',
		} else {
		styleRule = `${precedenceImportancePrefix}${styleInner}`
		styleRule = `${specifities[specificity]}${styleInner}`
		}
		@@ -104,8 +111,6 @@ }
		const precedenceImportancePrefix = groupMediaKey
		? ''
		: enableMediaPropOrder
		? groupPriority
		: enableMediaPropOrder && priority
		? // this new array should be cached
		new Array(priority)
		.fill(':root')
		.join('')
		specifities[priority]
		: // @ts-ignore
		@@ -138,3 +143,7 @@ prefixes[mediaKey]

		if (isHover) {
		styleRule = `@media (hover:hover){${styleRule}}`
		}

		return [property, undefined, nextIdentifier, undefined, [styleRule]]
		}

src/helpers/getGroupPropParts.ts

		@@ -6,10 +6,10 @@ import { getMedia } from '../hooks/useMedia'
		const [_, name, part3, part4] = groupProp.split('-')
		let pseudo: string \| undefined
		let pseudo: 'focus' \| 'press' \| 'hover' \| 'disabled' \| undefined
		const media = part3 in mediaQueries ? part3 : undefined
		if (!media) {
		pseudo = part3
		pseudo = part3 as any
		} else {
		pseudo = part4
		pseudo = part4 as any
		}
		return { name, pseudo, media }
		}

types/helpers/getGroupPropParts.d.ts

		export declare function getGroupPropParts(groupProp: string): {
		name: string;
		pseudo: string;
		pseudo: "hover" \| "press" \| "focus" \| "disabled" \| undefined;
		media: string \| undefined;
		};
		//# sourceMappingURL=getGroupPropParts.d.ts.map

types/styled.d.ts

		@@ -15,2 +15,3 @@ import type { StyledContext } from './helpers/createStyledContext';
		context?: StyledContext;
		/** @deprecated pass in instead as the third argument to styled() */
		acceptsClassName?: boolean;
		@@ -17,0 +18,0 @@ }, staticExtractionOptions?: StyledStaticConfig): TamaguiComponent<TamaDefer, GetRef<ParentComponent>, GetNonStyledProps<ParentComponent>, StyledStaticConfig["accept"] extends Record<string, any> ? GetBaseStyles<ParentComponent, StyledStaticConfig> & (StyledStaticConfig["accept"] extends Record<string, any> ? { [Key in keyof StyledStaticConfig["accept"]]?: (Key extends keyof GetBaseStyles<ParentComponent, StyledStaticConfig> ? GetBaseStyles<ParentComponent, StyledStaticConfig>[Key] : never) \| (StyledStaticConfig["accept"][Key] extends "style" ? Partial<InferStyledProps<ParentComponent, StyledStaticConfig>> : StyledStaticConfig["accept"][Key] extends "textStyle" ? Partial<import("./types").TextProps> : Omit<ThemeValueGet<StyledStaticConfig["accept"][Key]>, "unset">) \| undefined; } : {}) : GetBaseStyles<ParentComponent, StyledStaticConfig>, AreVariantsUndefined<Variants> extends true ? GetStyledVariants<ParentComponent> : AreVariantsUndefined<GetStyledVariants<ParentComponent>> extends true ? Omit<AreVariantsUndefined<Variants> extends true ? {} : GetVariantAcceptedValues<Variants>, "_isEmpty"> : { [Key_1 in Exclude<keyof GetStyledVariants<ParentComponent>, "_isEmpty"> \| Exclude<keyof (AreVariantsUndefined<Variants> extends true ? {} : GetVariantAcceptedValues<Variants>), "_isEmpty">]?: (Key_1 extends keyof GetStyledVariants<ParentComponent> ? GetStyledVariants<ParentComponent>[Key_1] : undefined) \| (Key_1 extends keyof (AreVariantsUndefined<Variants> extends true ? {} : GetVariantAcceptedValues<Variants>) ? (AreVariantsUndefined<Variants> extends true ? {} : GetVariantAcceptedValues<Variants>)[Key_1] : undefined) \| undefined; }, GetStaticConfig<ParentComponent, StyledStaticConfig>>;

dist/cjs/createComponent.js.map