@tamagui/web 1.88.13 → 1.89.0-1706308641099

package/dist/esm/helpers/normalizeStyle.mjs

@@ -0,0 +1,23 @@
+import { expandStyle } from "./expandStyle.mjs";
+import { fixStyles } from "./expandStyles.mjs";
+import { isObj } from "./isObj.mjs";
+import { normalizeValueWithProperty } from "./normalizeValueWithProperty.mjs";
+import { pseudoDescriptors } from "./pseudoDescriptors.mjs";
+function normalizeStyle(style, disableNormalize = !1) {
+  const res = {};
+  for (let key in style) {
+    const prop = style[key];
+    if (prop == null) continue;
+    if (key in pseudoDescriptors ||
+    // this should capture all parent-based styles like media, group, etc
+    key[0] === "$" && isObj(prop)) {
+      res[key] = normalizeStyle(prop, disableNormalize);
+      continue;
+    }
+    const value = disableNormalize ? prop : normalizeValueWithProperty(prop, key),
+      out = expandStyle(key, value);
+    out ? Object.assign(res, Object.fromEntries(out)) : res[key] = value;
+  }
+  return fixStyles(res), res;
+}
+export { normalizeStyle };

package/dist/esm/helpers/normalizeStylePropKeys.mjs

@@ -0,0 +1,2 @@
+const normalizeStylePropKeys = {};
+export { normalizeStylePropKeys };

package/dist/esm/helpers/normalizeValueWithProperty.mjs

@@ -0,0 +1,32 @@
+import { isWeb } from "@tamagui/constants";
+import { stylePropsAll, stylePropsUnitless } from "@tamagui/helpers";
+import { getAllSelectors } from "./insertStyleRule.mjs";
+const stylePropsAllPlusTransforms = {
+  ...stylePropsAll,
+  translateX: !0,
+  translateY: !0
+};
+function normalizeValueWithProperty(value, property = "") {
+  if (!isWeb || stylePropsUnitless[property] || property && !stylePropsAllPlusTransforms[property] || typeof value == "boolean") return value;
+  let res = value;
+  return value && typeof value == "object" ? value : (typeof value == "number" ? res = `${value}px` : property && (res = `${res}`), res);
+}
+const rcache = {};
+function reverseMapClassNameToValue(key, className) {
+  const cssRule = getAllSelectors()[className];
+  if (rcache[cssRule]) return rcache[cssRule];
+  if (!cssRule) {
+    process.env.NODE_ENV === "development" && console.warn(`No CSS rule found for ${key} looking for selector ".${className}", you may not be injecting extracted CSS`);
+    return;
+  }
+  const cssVal = cssRule.replace(/.*:/, "").replace(/;.*/, "").trim();
+  let res;
+  return cssVal.startsWith("var(") ? res = cssVal : stylePropsUnitless[key] ? res = +cssVal : cssVal.endsWith("px") ? res = +cssVal.replace("px", "") : res = cssVal, rcache[cssRule] = res, process.env.NODE_ENV === "development" && typeof res == "number" && Number.isNaN(res) && console.info("Tamagui invalid parsed value, NaN:", {
+    res,
+    cssVal,
+    cssRule,
+    key,
+    className
+  }), res;
+}
+export { normalizeValueWithProperty, reverseMapClassNameToValue };

package/dist/esm/helpers/objectIdentityKey.mjs

@@ -0,0 +1,15 @@
+function objectIdentityKey(obj) {
+  let k = "";
+  for (const key in obj) {
+    k += key;
+    const arg = obj[key];
+    let type = typeof arg;
+    if (!arg || type !== "object" && type !== "function") k += type + arg;else if (cache.has(arg)) k += cache.get(arg);else {
+      let v = Math.random();
+      cache.set(arg, v), k += v;
+    }
+  }
+  return k;
+}
+const cache = /* @__PURE__ */new WeakMap();
+export { objectIdentityKey };

package/dist/esm/helpers/propMapper.mjs

@@ -0,0 +1,239 @@
+import "@tamagui/constants";
+import { tokenCategories } from "@tamagui/helpers";
+import { getConfig } from "../config.mjs";
+import { isDevTools } from "../constants/isDevTools.mjs";
+import { getVariableValue, isVariable } from "../createVariable.mjs";
+import { expandStyle } from "./expandStyle.mjs";
+import { normalizeStyle } from "./normalizeStyle.mjs";
+import { getFontsForLanguage, getVariantExtras } from "./getVariantExtras.mjs";
+import { isObj } from "./isObj.mjs";
+import { pseudoDescriptors } from "./pseudoDescriptors.mjs";
+const propMapper = (key, value, styleStateIn, subPropsIn) => {
+    if (lastFontFamilyToken = null, key === "elevationAndroid") return;
+    if (value === "unset") {
+      const unsetVal = styleStateIn.conf.unset?.[key];
+      if (unsetVal != null) value = unsetVal;else return;
+    }
+    const subProps = styleStateIn.styleProps.fallbackProps || subPropsIn,
+      styleState = subProps ? new Proxy(styleStateIn, {
+        get(_, k) {
+          return k === "curProps" ? subProps : Reflect.get(_, k);
+        }
+      }) : styleStateIn,
+      {
+        conf,
+        styleProps,
+        fontFamily,
+        staticConfig
+      } = styleState,
+      {
+        variants
+      } = staticConfig;
+    if (process.env.NODE_ENV === "development" && fontFamily && fontFamily[0] === "$" && !(fontFamily in conf.fontsParsed) && console.warn(`Warning: no fontFamily "${fontFamily}" found in config: ${Object.keys(conf.fontsParsed).join(", ")}`), !styleProps.noExpand && variants && key in variants) {
+      styleState.curProps[key] = value;
+      const variantValue = resolveVariants(key, value, styleProps, styleState, "");
+      if (variantValue) return variantValue;
+    }
+    let shouldReturn = !1;
+    if (styleProps.disableExpandShorthands || key in conf.shorthands && (shouldReturn = !0, key = conf.shorthands[key]), value && (value[0] === "$" ? value = getTokenForKey(key, value, styleProps.resolveValues, styleState) : isVariable(value) && (value = resolveVariableValue(key, value, styleProps.resolveValues))), shouldReturn || value != null) {
+      const result = (styleProps.noExpand ? null : expandStyle(key, value)) || [[key, value]];
+      return key === "fontFamily" && lastFontFamilyToken && fontFamilyCache.set(result, lastFontFamilyToken), result;
+    }
+  },
+  resolveVariants = (key, value, styleProps, styleState, parentVariantKey) => {
+    const {
+        staticConfig,
+        conf,
+        debug
+      } = styleState,
+      {
+        variants
+      } = staticConfig;
+    if (!variants) return;
+    let variantValue = getVariantDefinition(variants[key], value, conf);
+    if (process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(`\u2666\uFE0F\u2666\uFE0F\u2666\uFE0F resolve variant ${key}`), console.info({
+      key,
+      value,
+      variantValue,
+      variants,
+      curProps: {
+        ...styleState.curProps
+      }
+    }), console.groupEnd()), !variantValue) {
+      if (process.env.TAMAGUI_WARN_ON_MISSING_VARIANT === "1" && typeof value != "boolean") {
+        const name = staticConfig.componentName || "[UnnamedComponent]";
+        console.warn(`No variant found: ${name} has variant "${key}", but no matching value "${value}"`);
+      }
+      return;
+    }
+    if (typeof variantValue == "function") {
+      const fn = variantValue,
+        extras = getVariantExtras(styleState);
+      variantValue = fn(value, extras), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("   expanded functional variant", key), console.info({
+        fn,
+        variantValue,
+        extras
+      }), console.groupEnd());
+    }
+    let fontFamilyResult;
+    if (isObj(variantValue)) {
+      const fontFamilyUpdate = variantValue.fontFamily || variantValue[conf.inverseShorthands.fontFamily];
+      fontFamilyUpdate && (fontFamilyResult = getFontFamilyFromNameOrVariable(fontFamilyUpdate, conf), styleState.fontFamily = fontFamilyResult, process.env.NODE_ENV === "development" && debug === "verbose" && console.info("   updating font family", fontFamilyResult)), variantValue = resolveTokensAndVariants(key, variantValue, styleProps, styleState, parentVariantKey);
+    }
+    if (variantValue) {
+      const expanded = normalizeStyle(variantValue, !!styleProps.noNormalize);
+      process.env.NODE_ENV === "development" && debug === "verbose" && console.info("   expanding styles from ", variantValue, "to", expanded);
+      const next = Object.entries(expanded);
+      return fontFamilyResult && fontFamilyResult[0] === "$" && fontFamilyCache.set(next, getVariableValue(fontFamilyResult)), next;
+    }
+  };
+function getFontFamilyFromNameOrVariable(input, conf) {
+  if (isVariable(input)) {
+    const val = variableToFontNameCache.get(input);
+    if (val) return val;
+    for (const key in conf.fontsParsed) {
+      const familyVariable = conf.fontsParsed[key].family;
+      if (isVariable(familyVariable) && (variableToFontNameCache.set(familyVariable, key), familyVariable === input)) return key;
+    }
+  } else if (typeof input == "string" && input[0] === "$") return input;
+}
+const variableToFontNameCache = /* @__PURE__ */new WeakMap(),
+  fontFamilyCache = /* @__PURE__ */new WeakMap(),
+  getPropMappedFontFamily = expanded => expanded && fontFamilyCache.get(expanded),
+  resolveTokensAndVariants = (key, value, styleProps, styleState, parentVariantKey) => {
+    const {
+        conf,
+        staticConfig,
+        debug,
+        theme
+      } = styleState,
+      {
+        variants
+      } = staticConfig,
+      res = {};
+    process.env.NODE_ENV === "development" && debug === "verbose" && console.info("   - resolveTokensAndVariants", key, value);
+    for (const _key in value) {
+      const subKey = conf.shorthands[_key] || _key,
+        val = value[_key];
+      if (styleProps.noExpand) res[subKey] = val;else if (variants && subKey in variants) {
+        if (styleState.curProps[subKey] = val, parentVariantKey && parentVariantKey === key) res[subKey] =
+        // SYNC WITH *1
+        val[0] === "$" ? getTokenForKey(subKey, val, styleProps.resolveValues, styleState) : val;else {
+          const variantOut = resolveVariants(subKey, val, styleProps, styleState, key);
+          if (variantOut) for (const [key2, val2] of variantOut) val2 != null && (key2 in pseudoDescriptors ? (res[key2] ??= {}, Object.assign(res[key2], val2)) : res[key2] = val2);
+        }
+        continue;
+      }
+      if (isVariable(val)) {
+        res[subKey] = resolveVariableValue(subKey, val, styleProps.resolveValues), process.env.NODE_ENV === "development" && debug === "verbose" && console.info("variable", subKey, res[subKey]);
+        continue;
+      }
+      if (typeof val == "string") {
+        const fVal =
+        // SYNC WITH *1
+        val[0] === "$" ? getTokenForKey(subKey, val, styleProps.resolveValues, styleState) : val;
+        res[subKey] = fVal;
+        continue;
+      }
+      if (isObj(val)) {
+        const subObject = resolveTokensAndVariants(subKey, val, styleProps, styleState, key);
+        process.env.NODE_ENV === "development" && debug === "verbose" && console.info("object", subKey, subObject), res[subKey] ??= {}, Object.assign(res[subKey], subObject);
+      } else res[subKey] = val;
+      process.env.NODE_ENV === "development" && debug && res[subKey]?.[0] === "$" && console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, subKey, res[subKey], theme);
+    }
+    return res;
+  },
+  tokenCats = ["size", "color", "radius", "space", "zIndex"].map(name => ({
+    name,
+    spreadName: `...${name}`
+  }));
+function getVariantDefinition(variant, value, conf) {
+  if (typeof variant == "function") return variant;
+  const exact = variant[value];
+  if (exact) return exact;
+  if (value != null) {
+    const {
+      tokensParsed
+    } = conf;
+    for (const {
+      name,
+      spreadName
+    } of tokenCats) if (spreadName in variant && value in tokensParsed[name]) return variant[spreadName];
+    const fontSizeVariant = variant["...fontSize"];
+    if (fontSizeVariant && conf.fontSizeTokens.has(value)) return fontSizeVariant;
+  }
+  return variant[`:${typeof value}`] || variant["..."];
+}
+const fontShorthand = {
+  fontSize: "size",
+  fontWeight: "weight"
+};
+let lastFontFamilyToken = null;
+const getTokenForKey = (key, value, resolveAs = "none", styleState) => {
+  if (resolveAs === "none") return value;
+  const {
+      theme,
+      conf = getConfig(),
+      context,
+      fontFamily,
+      staticConfig
+    } = styleState,
+    tokensParsed = conf.tokensParsed;
+  let valOrVar,
+    hasSet = !1;
+  if (theme && value in theme) valOrVar = theme[value], process.env.NODE_ENV === "development" && styleState.debug === "verbose" && console.info(` - resolving ${key} to theme value ${value}: ${valOrVar?.get?.()}`), hasSet = !0;else if (value in conf.specificTokens) hasSet = !0, valOrVar = conf.specificTokens[value];else {
+    const customTokenAccept = staticConfig?.acceptTokens?.[key];
+    if (customTokenAccept) {
+      const val = tokensParsed[customTokenAccept][value];
+      val && (valOrVar = val, hasSet = !0);
+    } else {
+      switch (key) {
+        case "fontFamily":
+          {
+            valOrVar = (context?.language ? getFontsForLanguage(conf.fontsParsed, context.language) : conf.fontsParsed)[value]?.family || value, lastFontFamilyToken = value, hasSet = !0;
+            break;
+          }
+        case "fontSize":
+        case "lineHeight":
+        case "letterSpacing":
+        case "fontWeight":
+          {
+            const defaultFont = conf.defaultFont || "$body",
+              fam = fontFamily || defaultFont;
+            if (fam) {
+              const fontsParsed = context?.language ? getFontsForLanguage(conf.fontsParsed, context.language) : conf.fontsParsed;
+              valOrVar = (fontsParsed[fam] || fontsParsed[defaultFont])?.[fontShorthand[key] || key]?.[value] || value, hasSet = !0;
+            }
+            break;
+          }
+      }
+      for (const cat in tokenCategories) if (key in tokenCategories[cat]) {
+        const res = tokensParsed[cat][value];
+        res != null && (valOrVar = res, hasSet = !0);
+      }
+    }
+    if (!hasSet) {
+      const spaceVar = tokensParsed.space[value];
+      spaceVar != null && (valOrVar = spaceVar, hasSet = !0);
+    }
+  }
+  if (hasSet) {
+    const out = resolveVariableValue(key, valOrVar, resolveAs);
+    return process.env.NODE_ENV === "development" && styleState.debug === "verbose" && console.info("resolved", resolveAs, valOrVar, out), out;
+  }
+  return process.env.NODE_ENV === "development" && isDevTools && styleState.debug === "verbose" && (console.groupCollapsed("  \uFE52 propMap (val)", key, value), console.info({
+    valOrVar,
+    theme,
+    hasSet
+  }, theme ? theme[key] : ""), console.groupEnd()), value;
+};
+function resolveVariableValue(key, valOrVar, resolveValues) {
+  if (resolveValues === "none") return valOrVar;
+  if (isVariable(valOrVar)) {
+    if (resolveValues === "value") return valOrVar.val;
+    const get = valOrVar?.get;
+    return typeof get == "function" ? get(resolveValues === "web" ? "web" : void 0) : valOrVar.variable;
+  }
+  return valOrVar;
+}
+export { getFontFamilyFromNameOrVariable, getPropMappedFontFamily, getTokenForKey, propMapper };

package/dist/esm/helpers/proxyThemeToParents.mjs

@@ -0,0 +1,36 @@
+import { getTokenObject } from "../config.mjs";
+const themesRaw = {};
+function proxyThemesToParents(dedupedThemes) {
+  for (const {
+    names,
+    theme
+  } of dedupedThemes) for (const name of names) themesRaw[name] = theme;
+  const themes = {};
+  for (const {
+    names,
+    theme
+  } of dedupedThemes) for (const themeName of names) {
+    const proxiedTheme = proxyThemeToParents(themeName, theme);
+    themes[themeName] = proxiedTheme;
+  }
+  return themes;
+}
+function proxyThemeToParents(themeName, theme) {
+  const cur = [],
+    parents = themeName.split("_").slice(0, -1).map(part => (cur.push(part), cur.join("_"))),
+    numParents = parents.length;
+  return new Proxy(theme, {
+    get(target, key) {
+      if (!key ||
+      // dont ask me, idk why but on hermes you can see that useTheme()[undefined] passes in STRING undefined to proxy
+      // if someone is crazy enough to use "undefined" as a theme key then this not working is on them
+      key == "undefined" || Reflect.has(target, key)) return Reflect.get(target, key);
+      for (let i = numParents - 1; i >= 0; i--) {
+        const parent = themesRaw[parents[i]];
+        if (parent && Reflect.has(parent, key)) return Reflect.get(parent, key);
+      }
+      return getTokenObject(key);
+    }
+  });
+}
+export { proxyThemeToParents, proxyThemesToParents };

package/dist/esm/helpers/proxyThemeVariables.mjs

@@ -0,0 +1,12 @@
+function proxyThemeVariables(obj) {
+  return new Proxy(obj || {}, {
+    has(target, key) {
+      return Reflect.has(target, removeStarting$(key));
+    },
+    get(target, key) {
+      return Reflect.get(target, removeStarting$(key));
+    }
+  });
+}
+const removeStarting$ = str => typeof str == "string" && str[0] === "$" ? str.slice(1) : str;
+export { proxyThemeVariables };

package/dist/esm/helpers/pseudoDescriptors.mjs

@@ -0,0 +1,34 @@
+const pseudoDescriptorsBase = {
+    // order of keys here important! in priority order
+    hoverStyle: {
+      name: "hover",
+      priority: 1
+    },
+    pressStyle: {
+      name: "active",
+      stateKey: "press",
+      priority: 2
+    },
+    focusStyle: {
+      name: "focus",
+      priority: 3
+    }
+  },
+  pseudoPriorities = {
+    hover: 1,
+    press: 2,
+    focus: 3
+  },
+  pseudoDescriptors = {
+    ...pseudoDescriptorsBase,
+    enterStyle: {
+      name: "enter",
+      selector: ".t_unmounted",
+      priority: 4
+    },
+    exitStyle: {
+      name: "exit",
+      priority: 5
+    }
+  };
+export { pseudoDescriptors, pseudoDescriptorsBase, pseudoPriorities };

package/dist/esm/helpers/registerCSSVariable.mjs

@@ -0,0 +1,7 @@
+import { createCSSVariable, getVariableValue } from "../createVariable.mjs";
+const registerCSSVariable = v => {
+    tokensValueToVariable.set(getVariableValue(v), v);
+  },
+  variableToCSS = (v, unitless = !1) => `--${createCSSVariable(v.name, !1)}:${!unitless && typeof v.val == "number" ? `${v.val}px` : v.val}`,
+  tokensValueToVariable = /* @__PURE__ */new Map();
+export { registerCSSVariable, tokensValueToVariable, variableToCSS };

package/dist/esm/helpers/themeable.mjs

@@ -0,0 +1,33 @@
+import { forwardRef } from "react";
+import { Theme } from "../views/Theme.mjs";
+import { jsx } from "react/jsx-runtime";
+function themeable(Component, staticConfig) {
+  const withTheme = forwardRef(function (props, ref) {
+    const {
+        themeInverse,
+        theme,
+        componentName,
+        themeReset,
+        ...rest
+      } = props,
+      element =
+      // @ts-expect-error its ok
+      /* @__PURE__ */
+      jsx(Component, {
+        ref,
+        ...rest,
+        "data-disable-theme": !0
+      });
+    return /* @__PURE__ */jsx(Theme, {
+      componentName: componentName || staticConfig?.componentName,
+      name: theme,
+      "disable-child-theme": !0,
+      debug: props.debug,
+      inverse: themeInverse,
+      reset: themeReset,
+      children: element
+    });
+  });
+  return withTheme.displayName = `Themed(${Component?.displayName || Component?.name || "Anonymous"})`, withTheme;
+}
+export { themeable };

package/dist/esm/helpers/themes.mjs

@@ -0,0 +1,14 @@
+import { createVariable, isVariable } from "../createVariable.mjs";
+function ensureThemeVariable(theme, key) {
+  const val = theme[key];
+  isVariable(val) ? val.name !== key && (theme[key] = createVariable({
+    key: val.name,
+    name: key,
+    val: val.val
+  })) : theme[key] = createVariable({
+    key,
+    name: key,
+    val
+  });
+}
+export { ensureThemeVariable };

package/dist/esm/helpers/timer.mjs

@@ -0,0 +1,8 @@
+const timer = require("@tamagui/timer").timer();
+setTimeout(() => {
+  timer.print();
+}, 2e3);
+const time = timer.start({
+  quiet: !0
+});
+export { time };

package/dist/esm/hooks/useConfiguration.mjs

@@ -0,0 +1,20 @@
+import { useContext } from "react";
+import { getConfig } from "../config.mjs";
+import { ComponentContext } from "../contexts/ComponentContext.mjs";
+const useConfiguration = () => {
+  const {
+      groups,
+      animationDriver,
+      ...restComponentConfig
+    } = useContext(ComponentContext),
+    {
+      animations,
+      ...restConfig
+    } = getConfig();
+  return {
+    ...restConfig,
+    ...restComponentConfig,
+    animationDriver: animationDriver ?? getConfig().animations
+  };
+};
+export { useConfiguration };

package/dist/esm/hooks/useDisableSSR.mjs

@@ -0,0 +1,5 @@
+import { getConfig } from "../config.mjs";
+function getDisableSSR(componentContext) {
+  return componentContext?.disableSSR ?? getConfig().disableSSR;
+}
+export { getDisableSSR };

package/dist/esm/hooks/useIsTouchDevice.mjs

@@ -0,0 +1,4 @@
+import { isTouchable, isWeb } from "@tamagui/constants";
+import { useDidFinishSSR } from "@tamagui/use-did-finish-ssr";
+const useIsTouchDevice = () => isWeb ? useDidFinishSSR() ? isTouchable : !1 : !0;
+export { useIsTouchDevice };

package/dist/esm/hooks/useMedia.mjs

@@ -0,0 +1,146 @@
+import { isServer, isWeb } from "@tamagui/constants";
+import { useRef, useSyncExternalStore } from "react";
+import { getConfig } from "../config.mjs";
+import { matchMedia } from "../helpers/matchMedia.mjs";
+import { pseudoDescriptors } from "../helpers/pseudoDescriptors.mjs";
+import { getDisableSSR } from "./useDisableSSR.mjs";
+let mediaState =
+// development only safeguard
+process.env.NODE_ENV === "development" ? new Proxy({}, {
+  get(target, key) {
+    if (typeof key == "string" && key[0] === "$" &&
+    // dont error on $$typeof
+    key[1] !== "$") throw new Error(`Access mediaState should not use "$": ${key}`);
+    return Reflect.get(target, key);
+  }
+}) : {};
+const mediaQueryConfig = {},
+  getMedia = () => mediaState,
+  mediaKeys = /* @__PURE__ */new Set(),
+  isMediaKey = key => {
+    if (mediaKeys.has(key)) return !0;
+    if (key[0] === "$") {
+      if (key.startsWith("$platform-")) return "platform";
+      if (key.startsWith("$theme-")) return "theme";
+      if (key.startsWith("$group-")) return "group";
+    }
+    return !1;
+  };
+let initState;
+const defaultMediaImportance = Object.keys(pseudoDescriptors).length;
+let mediaKeysOrdered;
+const getMediaKeyImportance = key => {
+    if (process.env.NODE_ENV === "development" && key[0] === "$") throw new Error("use short key");
+    return getConfig().settings.mediaPropOrder ? defaultMediaImportance : mediaKeysOrdered.indexOf(key) + 100;
+  },
+  dispose = /* @__PURE__ */new Set();
+let mediaVersion = 0;
+const configureMedia = config => {
+  const {
+    media,
+    mediaQueryDefaultActive
+  } = config;
+  if (media) {
+    mediaVersion++;
+    for (const key in media) mediaState[key] = mediaQueryDefaultActive?.[key] || !1, mediaKeys.add(`$${key}`);
+    Object.assign(mediaQueryConfig, media), initState = {
+      ...mediaState
+    }, mediaKeysOrdered = Object.keys(media), config.disableSSR ? setupMediaListeners() : updateCurrentState();
+  }
+};
+function unlisten() {
+  dispose.forEach(cb => cb()), dispose.clear();
+}
+let setupVersion = -1;
+function setupMediaListeners() {
+  if (!(isWeb && isServer) && setupVersion !== mediaVersion) {
+    setupVersion = mediaVersion, unlisten();
+    for (const key in mediaQueryConfig) {
+      let update = function () {
+        const next = !!getMatch().matches;
+        next !== mediaState[key] && (mediaState = {
+          ...mediaState,
+          [key]: next
+        }, updateCurrentState());
+      };
+      const str = mediaObjectToString(mediaQueryConfig[key], key),
+        getMatch = () => matchMedia(str),
+        match = getMatch();
+      if (!match) throw new Error("\u26A0\uFE0F No match");
+      match.addListener(update), dispose.add(() => {
+        match.removeListener(update);
+      }), update();
+    }
+  }
+}
+const listeners = /* @__PURE__ */new Set();
+let flushing = !1,
+  flushVersion = -1;
+function updateCurrentState() {
+  flushing && flushVersion === mediaVersion || (flushVersion = mediaVersion, flushing = !0, Promise.resolve().then(() => {
+    flushing = !1, listeners.forEach(cb => cb(mediaState));
+  }));
+}
+const shouldUpdate = /* @__PURE__ */new WeakMap();
+function setMediaShouldUpdate(ref, props) {
+  return shouldUpdate.set(ref, props);
+}
+function subscribe(subscriber) {
+  return listeners.add(subscriber), () => listeners.delete(subscriber);
+}
+function useMedia(uid, componentContext) {
+  const internal = useRef(),
+    initialState = (getDisableSSR(componentContext) || !isWeb ? mediaState : initState) || {},
+    state = useSyncExternalStore(subscribe, () => {
+      if (!internal.current) return initialState;
+      const {
+          touched,
+          prev
+        } = internal.current,
+        componentState = uid ? shouldUpdate.get(uid) : void 0;
+      if (componentState && componentState.enabled === !1) return prev;
+      const testKeys = componentState?.keys ?? ((!componentState || componentState.enabled) && touched ? [...touched] : null);
+      return !testKeys || testKeys?.every(key => mediaState[key] === prev[key]) ? prev : (internal.current.prev = mediaState, mediaState);
+    }, () => initialState);
+  return new Proxy(state, {
+    get(_, key) {
+      return typeof key == "string" && (internal.current ||= {
+        prev: initialState
+      }, internal.current.touched ||= /* @__PURE__ */new Set(), internal.current.touched.add(key)), Reflect.get(state, key);
+    }
+  });
+}
+const getMediaImportanceIfMoreImportant = (mediaKey, key, importancesUsed, isSizeMedia) => {
+  const conf = getConfig(),
+    importance = isSizeMedia && !conf.settings.mediaPropOrder ? getMediaKeyImportance(mediaKey) : defaultMediaImportance;
+  return !importancesUsed[key] || importance > importancesUsed[key] ? importance : null;
+};
+function mergeMediaByImportance(onto, mediaKey, key, value, importancesUsed, isSizeMedia, importanceBump) {
+  let importance = getMediaImportanceIfMoreImportant(mediaKey, key, importancesUsed, isSizeMedia);
+  return importanceBump && (importance = (importance || 0) + importanceBump), importance === null ? !1 : (importancesUsed[key] = importance, onto[key] = value, !0);
+}
+function camelToHyphen(str) {
+  return str.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`).toLowerCase();
+}
+const cache = /* @__PURE__ */new WeakMap(),
+  cachedMediaKeyToQuery = {};
+function mediaObjectToString(query, key) {
+  if (typeof query == "string") return query;
+  if (cache.has(query)) return cache.get(query);
+  const res = Object.entries(query).map(([feature, value]) => (feature = camelToHyphen(feature), typeof value == "string" ? `(${feature}: ${value})` : (typeof value == "number" && /[height|width]$/.test(feature) && (value = `${value}px`), `(${feature}: ${value})`))).join(" and ");
+  return key && (cachedMediaKeyToQuery[key] = res), cache.set(query, res), res;
+}
+function mediaKeyToQuery(key) {
+  return cachedMediaKeyToQuery[key] || mediaObjectToString(mediaQueryConfig[key], key);
+}
+function mediaKeyMatch(key, dimensions) {
+  const mediaQueries = mediaQueryConfig[key];
+  return Object.keys(mediaQueries).every(query => {
+    const expectedVal = +mediaQueries[query],
+      isMax = query.startsWith("max"),
+      isWidth = query.endsWith("Width"),
+      givenVal = dimensions[isWidth ? "width" : "height"];
+    return isMax ? givenVal < expectedVal : givenVal > expectedVal;
+  });
+}
+export { configureMedia, getMedia, getMediaImportanceIfMoreImportant, getMediaKeyImportance, isMediaKey, mediaKeyMatch, mediaKeyToQuery, mediaKeys, mediaObjectToString, mediaQueryConfig, mediaState, mergeMediaByImportance, setMediaShouldUpdate, setupMediaListeners, useMedia };