@tamagui/web 1.88.13 → 1.89.0-1706308641099

package/dist/esm/createFont.mjs

@@ -0,0 +1,18 @@
+const fontWeights = ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+  processSection = (section, keys, defaultValue) => {
+    if (typeof section == "string") return section;
+    const sectionKeys = Object.keys(section);
+    let fillValue = section[sectionKeys[0]];
+    return Object.fromEntries([... /* @__PURE__ */new Set([...keys, ...sectionKeys])].map(key => {
+      const value = section[key] ?? defaultValue ?? fillValue;
+      return fillValue = value, defaultValue = value, [key, value];
+    }));
+  },
+  createFont = font => {
+    const sizeKeys = Object.keys(font.size),
+      processedFont = Object.fromEntries(Object.entries(font).map(([key, section]) => [key, processSection(section, key === "face" ? fontWeights : sizeKeys, key === "face" ? {
+        normal: font.family
+      } : void 0)]));
+    return Object.freeze(processedFont);
+  };
+export { createFont };

package/dist/esm/createShorthands.mjs

@@ -0,0 +1,4 @@
+function createShorthands(shorthands) {
+  return Object.freeze(shorthands);
+}
+export { createShorthands };

package/dist/esm/createTamagui.mjs

@@ -0,0 +1,206 @@
+import { isWeb } from "@tamagui/constants";
+import { configListeners, setConfig, setTokens } from "./config.mjs";
+import { createVariables } from "./createVariables.mjs";
+import { getThemeCSSRules } from "./helpers/getThemeCSSRules.mjs";
+import { getAllRules, listenForSheetChanges, scanAllSheets } from "./helpers/insertStyleRule.mjs";
+import { proxyThemesToParents } from "./helpers/proxyThemeToParents.mjs";
+import { registerCSSVariable, variableToCSS } from "./helpers/registerCSSVariable.mjs";
+import { ensureThemeVariable } from "./helpers/themes.mjs";
+import { configureMedia } from "./hooks/useMedia.mjs";
+import { parseFont, registerFontVariables } from "./insertFont.mjs";
+import { Tamagui } from "./Tamagui.mjs";
+const createdConfigs = /* @__PURE__ */new WeakMap();
+function createTamagui(configIn) {
+  if (createdConfigs.has(configIn)) return configIn;
+  const tokensParsed = {},
+    tokens = createVariables(configIn.tokens || {});
+  if (configIn.tokens) {
+    const tokensMerged = {};
+    for (const cat in tokens) {
+      tokensParsed[cat] = {}, tokensMerged[cat] = {};
+      const tokenCat = tokens[cat];
+      for (const key in tokenCat) {
+        const val = tokenCat[key],
+          prefixedKey = `$${key}`;
+        tokensParsed[cat][prefixedKey] = val, tokensMerged[cat][prefixedKey] = val, tokensMerged[cat][key] = val;
+      }
+    }
+    setTokens(tokensMerged);
+  }
+  let foundThemes;
+  if (configIn.themes) {
+    const noThemes = Object.keys(configIn.themes).length === 0;
+    foundThemes = scanAllSheets(noThemes, tokensParsed);
+  }
+  listenForSheetChanges();
+  let fontSizeTokens = null,
+    fontsParsed;
+  if (configIn.fonts) {
+    const fontTokens = Object.fromEntries(Object.entries(configIn.fonts).map(([k, v]) => [k, createVariables(v, "f", !0)]));
+    fontsParsed = (() => {
+      const res = {};
+      for (const familyName in fontTokens) {
+        const font = fontTokens[familyName],
+          fontParsed = parseFont(font);
+        res[`$${familyName}`] = fontParsed, !fontSizeTokens && fontParsed.size && (fontSizeTokens = new Set(Object.keys(fontParsed.size)));
+      }
+      return res;
+    })();
+  }
+  const specificTokens = {},
+    themeConfig = (() => {
+      const cssRuleSets = [];
+      if (process.env.TAMAGUI_DOES_SSR_CSS !== "true" &&
+      // we can leave this out if mutating, only need the js for getThemeCSSRules
+      process.env.TAMAGUI_DOES_SSR_CSS !== "mutates-themes") {
+        const declarations = [],
+          fontDeclarations = {};
+        for (const key in tokens) for (const skey in tokens[key]) {
+          const variable = tokens[key][skey];
+          if (specificTokens[`$${key}.${skey}`] = variable, process.env.NODE_ENV === "development" && typeof variable > "u") throw new Error(`No value for tokens.${key}.${skey}:
+${JSON.stringify(variable, null, 2)}`);
+          isWeb && (registerCSSVariable(variable), declarations.push(variableToCSS(variable, key === "zIndex")));
+        }
+        if (isWeb) {
+          let declarationsToRuleSet = function (decs, selector = "") {
+            return `:root${selector} {${sep}${[...decs].join(`;${sep}`)}${sep}}`;
+          };
+          for (const key in fontsParsed) {
+            const fontParsed = fontsParsed[key],
+              [name, language] = key.includes("_") ? key.split("_") : [key],
+              fontVars = registerFontVariables(fontParsed);
+            fontDeclarations[key] = {
+              name: name.slice(1),
+              declarations: fontVars,
+              language
+            };
+          }
+          const sep = process.env.NODE_ENV === "development" ? configIn.cssStyleSeparator || " " : "";
+          if (cssRuleSets.push(declarationsToRuleSet(declarations)), fontDeclarations) for (const key in fontDeclarations) {
+            const {
+                name,
+                declarations: declarations2,
+                language = "default"
+              } = fontDeclarations[key],
+              fontSelector = `.font_${name}`,
+              langSelector = `:root .t_lang-${name}-${language} ${fontSelector}`,
+              selectors = language === "default" ? ` ${fontSelector}, ${langSelector}` : langSelector,
+              specificRuleSet = declarationsToRuleSet(declarations2, selectors);
+            cssRuleSets.push(specificRuleSet);
+          }
+        }
+      }
+      const themesIn = {
+          ...configIn.themes
+        },
+        dedupedThemes = foundThemes ?? getThemesDeduped(themesIn);
+      return {
+        themes: proxyThemesToParents(dedupedThemes),
+        cssRuleSets,
+        getThemeRulesSets() {
+          let themeRuleSets = [];
+          if (isWeb) for (const {
+            names,
+            theme
+          } of dedupedThemes) {
+            const nextRules = getThemeCSSRules({
+              config: configIn,
+              themeName: names[0],
+              names,
+              theme
+            });
+            themeRuleSets = [...themeRuleSets, ...nextRules];
+          }
+          return themeRuleSets;
+        }
+      };
+    })(),
+    shorthands = configIn.shorthands || {};
+  let lastCSSInsertedRulesIndex = -1;
+  const getCSS = ({
+      separator = `
+`,
+      sinceLastCall,
+      exclude
+    } = {}) => {
+      if (sinceLastCall && lastCSSInsertedRulesIndex >= 0) {
+        const rules = getAllRules();
+        return lastCSSInsertedRulesIndex = rules.length, rules.slice(lastCSSInsertedRulesIndex).join(separator);
+      }
+      lastCSSInsertedRulesIndex = 0;
+      const runtimeStyles = getAllRules().join(separator);
+      return exclude === "design-system" ? runtimeStyles : `${`._ovs-contain {overscroll-behavior:contain;}
+.is_Text .is_Text {display:inline-flex;}
+._dsp_contents {display:contents;}
+${themeConfig.cssRuleSets.join(separator)}`}
+${exclude ? "" : themeConfig.getThemeRulesSets().join(separator)}
+${runtimeStyles}`;
+    },
+    getNewCSS = opts => getCSS({
+      ...opts,
+      sinceLastCall: !0
+    });
+  let defaultFontName = configIn.defaultFont ||
+  // uses font named "body" if present for compat
+  configIn.fonts && ("body" in configIn.fonts ? "body" : "");
+  !defaultFontName && configIn.fonts && (defaultFontName = Object.keys(configIn.fonts)[0]), defaultFontName?.[0] === "$" && (defaultFontName = defaultFontName.slice(1));
+  const defaultFont = `$${defaultFontName}`,
+    config = {
+      fonts: {},
+      onlyAllowShorthands: !1,
+      fontLanguages: [],
+      animations: {},
+      media: {},
+      ...configIn,
+      unset: {
+        fontFamily: configIn.defaultFont ? defaultFont : void 0,
+        ...configIn.unset
+      },
+      settings: {
+        webContainerType: "inline-size",
+        ...configIn.settings
+      },
+      tokens,
+      // vite made this into a function if it wasn't set
+      shorthands,
+      inverseShorthands: shorthands ? Object.fromEntries(Object.entries(shorthands).map(([k, v]) => [v, k])) : {},
+      themes: themeConfig.themes,
+      fontsParsed: fontsParsed || {},
+      themeConfig,
+      tokensParsed,
+      parsed: !0,
+      getNewCSS,
+      getCSS,
+      defaultFont,
+      fontSizeTokens: fontSizeTokens || /* @__PURE__ */new Set(),
+      specificTokens
+      // const tokens = [...getToken(tokens.size[0])]
+      // .spacer-sm + ._dsp_contents._dsp-sm-hidden { margin-left: -var(--${}) }
+    };
+
+  return configureMedia(config), setConfig(config), createdConfigs.set(config, !0), configListeners.size && (configListeners.forEach(cb => cb(config)), configListeners.clear()), process.env.NODE_ENV === "development" && (process.env.DEBUG?.startsWith("tamagui") && console.info("Tamagui config:", config), globalThis.Tamagui || (globalThis.Tamagui = Tamagui)), config;
+}
+function getThemesDeduped(themes) {
+  const dedupedThemes = [],
+    existing = /* @__PURE__ */new Map();
+  for (const themeName in themes) {
+    const darkOrLightSpecificPrefix = themeName.startsWith("dark") ? "dark" : themeName.startsWith("light") ? "light" : "",
+      rawTheme = themes[themeName],
+      key = darkOrLightSpecificPrefix + JSON.stringify(Object.entries(rawTheme).sort((a, b) => a[0] > b[0] ? -1 : 1));
+    if (existing.has(key)) {
+      existing.get(key).names.push(themeName);
+      continue;
+    }
+    const theme = {
+      ...rawTheme
+    };
+    for (const key2 in theme) ensureThemeVariable(theme, key2);
+    const deduped = {
+      names: [themeName],
+      theme
+    };
+    dedupedThemes.push(deduped), existing.set(key, deduped);
+  }
+  return dedupedThemes;
+}
+export { createTamagui };

package/dist/esm/createTheme.mjs

@@ -0,0 +1,2 @@
+const createTheme = theme => theme;
+export { createTheme };

package/dist/esm/createTokens.mjs

@@ -0,0 +1,5 @@
+import { createVariables } from "./createVariables.mjs";
+function createTokens(tokens) {
+  return createVariables(tokens);
+}
+export { createTokens };

package/dist/esm/createVariable.mjs

@@ -0,0 +1,48 @@
+import { isWeb } from "@tamagui/constants";
+import { simpleHash } from "@tamagui/helpers";
+import { getConfig } from "./config.mjs";
+const IS_VAR = "isVar",
+  createVariable = (props, skipHash = !1) => {
+    if (!skipHash && isVariable(props)) return props;
+    const {
+      key,
+      name,
+      val
+    } = props;
+    return {
+      [IS_VAR]: !0,
+      key,
+      name: skipHash ? "" : simpleHash(name, 40),
+      val,
+      variable: isWeb ? skipHash ? `var(--${name})` : createCSSVariable(name) : ""
+    };
+  };
+function variableToString(vrble, getValue = !1) {
+  return isVariable(vrble) ? !getValue && isWeb && vrble.variable ? vrble.variable : `${vrble.val}` : `${vrble || ""}`;
+}
+function isVariable(v) {
+  return v && typeof v == "object" && IS_VAR in v;
+}
+function getVariable(nameOrVariable) {
+  if (setDidGetVariableValue(!0), isVariable(nameOrVariable)) return variableToString(nameOrVariable);
+  const tokens = getConfig().tokensParsed;
+  return variableToString(tokens[nameOrVariable] ?? nameOrVariable);
+}
+let accessed = !1;
+const setDidGetVariableValue = val => accessed = val,
+  didGetVariableValue = () => accessed;
+function getVariableValue(v) {
+  return isVariable(v) ? (setDidGetVariableValue(!0), v.val) : v;
+}
+function getVariableName(v) {
+  return isVariable(v) ? v.name : v;
+}
+function getVariableVariable(v) {
+  return isVariable(v) ? v.variable : v;
+}
+const createCSSVariable = (nameProp, includeVar = !0) => {
+  if (process.env.NODE_ENV === "development" && (!nameProp || typeof nameProp != "string")) throw new Error(`createCSSVariable expected string, got: ${nameProp}`);
+  const name = simpleHash(nameProp, 60);
+  return includeVar ? `var(--${name})` : name;
+};
+export { createCSSVariable, createVariable, didGetVariableValue, getVariable, getVariableName, getVariableValue, getVariableVariable, isVariable, setDidGetVariableValue, variableToString };

package/dist/esm/createVariables.mjs

@@ -0,0 +1,35 @@
+import { simpleHash } from "@tamagui/helpers";
+import { createVariable, isVariable } from "./createVariable.mjs";
+const cache = /* @__PURE__ */new WeakMap(),
+  createVariables = (tokens, parentPath = "", isFont = !1) => {
+    if (cache.has(tokens)) return tokens;
+    const res = {};
+    let i = 0;
+    for (let keyIn in tokens) {
+      i++;
+      const val = tokens[keyIn],
+        isPrefixed = keyIn[0] === "$",
+        keyWithPrefix = isPrefixed ? keyIn : `$${keyIn}`,
+        key = isPrefixed ? keyWithPrefix.slice(1) : keyIn;
+      if (isVariable(val)) {
+        res[key] = val;
+        continue;
+      }
+      const niceKey = simpleHash(key);
+      let name = isFont ? niceKey.slice(0, 2) : i;
+      if (name = parentPath ? `${parentPath}-${name}` : niceKey, val && typeof val == "object") {
+        res[key] = createVariables(tokens[key], name, !1
+        /* note: don't pass isFont down, we want to avoid it past the first level */);
+
+        continue;
+      }
+      const finalValue = isVariable(val) ? val : createVariable({
+        val,
+        name,
+        key: keyWithPrefix
+      });
+      res[key] = finalValue;
+    }
+    return cache.set(res, !0), res;
+  };
+export { createVariables };

package/dist/esm/defaultComponentState.mjs

@@ -0,0 +1,16 @@
+const defaultComponentState = {
+    hover: !1,
+    press: !1,
+    pressIn: !1,
+    focus: !1,
+    unmounted: !0
+  },
+  defaultComponentStateMounted = {
+    ...defaultComponentState,
+    unmounted: !1
+  },
+  defaultComponentStateShouldEnter = {
+    ...defaultComponentState,
+    unmounted: "should-enter"
+  };
+export { defaultComponentState, defaultComponentStateMounted, defaultComponentStateShouldEnter };

package/dist/esm/helpers/ThemeManager.mjs

@@ -0,0 +1,156 @@
+import { isWeb } from "@tamagui/constants";
+import { getThemes } from "../config.mjs";
+import { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from "../constants/constants.mjs";
+const emptyState = {
+  name: ""
+};
+function getHasThemeUpdatingProps(props) {
+  return !!(props.name || props.componentName || props.inverse || props.reset);
+}
+let uid = 0;
+class ThemeManager {
+  constructor(props = {}, parentManager) {
+    this.props = props;
+    if (uid = (uid + 1) % Number.MAX_VALUE, this.id = uid, parentManager === "root") {
+      this.updateStateFromProps(props, !1);
+      return;
+    }
+    if (!parentManager) throw process.env.NODE_ENV !== "production" ? new Error("No parent manager given, this is likely due to duplicated Tamagui dependencies. Check your lockfile for mis-matched versions. It could also be from an error somewhere else in your stack causing Tamagui to recieve undefined context, you can try putting some ErrorBoundary components around other areas of your app, or a Suspense boundary.") : "\u274C 000";
+    if (this.parentManager = parentManager, !this.updateStateFromProps(props, !1)) return parentManager;
+  }
+  id = 0;
+  themeListeners = /* @__PURE__ */new Set();
+  parentManager = null;
+  state = emptyState;
+  updateStateFromProps(props = this.props || {}, shouldNotify = !0) {
+    if (this.props = props, props.forceTheme) return this.state.theme = props.forceTheme, this.state.name = props.name || "", this.updateState(this.state, !0), this.state;
+    const nextState = this.getStateIfChanged(props);
+    if (nextState) return this.updateState(nextState, shouldNotify), nextState;
+  }
+  updateState(nextState, shouldNotify = !0) {
+    this.state = nextState, this._allKeys = null, shouldNotify && queueMicrotask(() => {
+      this.notify();
+    });
+  }
+  getStateIfChanged(props = this.props, state = this.state, parentManager = this.parentManager) {
+    const _ = this.getState(props, parentManager);
+    if (state && state !== emptyState && !_) return parentManager?.state;
+    if (this.getStateShouldChange(_, state)) return _;
+  }
+  getStateShouldChange(nextState, state = this.state) {
+    return !(!nextState?.theme || nextState.theme === state?.theme);
+  }
+  getState(props = this.props, parentManager = this.parentManager) {
+    return getState(props, parentManager) || null;
+  }
+  _allKeys = null;
+  get allKeys() {
+    return this._allKeys ||= /* @__PURE__ */new Set([...(this.parentManager?.allKeys || []), ...Object.keys(this.state.theme || {})]), this._allKeys;
+  }
+  notify(forced = !1) {
+    this.themeListeners.forEach(cb => cb(this.state.name, this, forced)), process.env.NODE_ENV !== "production" && (this._numChangeEventsSent ??= 0, this._numChangeEventsSent++);
+  }
+  onChangeTheme(cb, debugId) {
+    return process.env.NODE_ENV !== "production" && debugId && (this._listeningIds ??= /* @__PURE__ */new Set(), this._listeningIds.add(debugId)), this.themeListeners.add(cb), () => {
+      this.themeListeners.delete(cb);
+    };
+  }
+}
+function getState(props, manager) {
+  if (props.name && props.reset) throw new Error(process.env.NODE_ENV === "production" ? "\u274C004" : "Cannot reset and set a new name at the same time.");
+  if (!getHasThemeUpdatingProps(props)) return null;
+  const themes = getThemes(),
+    [allManagers, componentManagers] = getManagers(manager),
+    isDirectParentAComponentTheme = !!manager?.state.isComponent,
+    startIndex = props.reset && !isDirectParentAComponentTheme ? 1 : 0;
+  let baseManager = allManagers[startIndex],
+    parentManager = allManagers[startIndex + 1];
+  if (!baseManager && props.reset) return process.env.NODE_ENV !== "production" && console.warn("Cannot reset, no parent theme exists"), null;
+  const {
+    componentName
+  } = props;
+  let result = null,
+    baseName = baseManager?.state.name || "";
+  baseManager?.state.isComponent && (baseName = baseName.replace(/_[A-Z][A-Za-z]+/, ""));
+  const nextName = props.reset ? baseName : props.name || "",
+    allComponentThemes = componentManagers.map(x => x?.state.name || "");
+  isDirectParentAComponentTheme && allComponentThemes.shift();
+  const base = baseName.split(THEME_NAME_SEPARATOR),
+    max = base.length,
+    min = props.componentName && !nextName ? max : 0;
+  for (let i = max; i >= min; i--) {
+    let prefix = base.slice(0, i).join(THEME_NAME_SEPARATOR);
+    props.inverse && (prefix = inverseThemeName(prefix));
+    let potentials = [];
+    if (prefix && prefix !== baseName && potentials.push(prefix), nextName && potentials.unshift(prefix ? `${prefix}_${nextName}` : nextName), i === 1) {
+      const lastSegment = potentials.findIndex(x => !x.includes("_"));
+      lastSegment > 0 && potentials.splice(lastSegment, 0, nextName);
+    }
+    if (componentName && !props.reset) {
+      const baseLen = base.length;
+      let componentPotentials = [];
+      if (nextName && baseLen > 1) {
+        const beforeSeparator = base[0];
+        componentPotentials.push(`${beforeSeparator}_${nextName}_${componentName}`);
+      }
+      if (componentPotentials.push(`${prefix}_${componentName}`), nextName) {
+        if (i > baseLen) {
+          const prefixLessOne = base.slice(0, i - 1).join(THEME_NAME_SEPARATOR);
+          if (prefixLessOne) {
+            const lessSpecific = `${prefixLessOne}_${nextName}_${componentName}`;
+            componentPotentials.unshift(lessSpecific);
+          }
+        }
+        const moreSpecific = `${prefix}_${nextName}_${componentName}`;
+        componentPotentials.unshift(moreSpecific);
+      }
+      potentials = [...componentPotentials, ...potentials, ...allComponentThemes];
+    }
+    const found = potentials.find(t => t in themes);
+    if (process.env.NODE_ENV !== "production" && typeof props.debug == "string" && console.info(" getState ", {
+      props,
+      found,
+      potentials,
+      baseManager,
+      nextName,
+      baseName,
+      prefix
+    }), found) {
+      const names = found.split("_"),
+        [firstName, ...restNames] = names,
+        lastName = names[names.length - 1],
+        isComponent = lastName[0] === lastName[0].toUpperCase(),
+        scheme = firstName === "light" ? "light" : firstName === "dark" ? "dark" : void 0,
+        pre = THEME_CLASSNAME_PREFIX,
+        className = isWeb ? `${pre}sub_theme ${pre}${!scheme || !restNames.length ? firstName : restNames.join("_")}` : "",
+        parentName = (baseManager || parentManager)?.state?.name;
+      result = {
+        name: found,
+        parentName,
+        theme: themes[found],
+        className,
+        isComponent,
+        scheme
+      };
+      break;
+    }
+  }
+  return process.env.NODE_ENV !== "production" && props.debug === "verbose" && typeof window < "u" && (console.groupCollapsed("ThemeManager.getState()"), console.info({
+    props,
+    baseName,
+    base,
+    min,
+    max
+  }), console.warn("result", {
+    result
+  }), console.trace(), console.groupEnd()), result;
+}
+const inverseThemeName = themeName => themeName.startsWith("light") ? themeName.replace(/^light/, "dark") : themeName.replace(/^dark/, "light");
+function getManagers(themeManager) {
+  const comp = [],
+    all = [];
+  let cur = themeManager;
+  for (; cur;) all.push(cur), cur.state.isComponent && comp.push(cur), cur = cur.parentManager;
+  return [all, comp];
+}
+export { ThemeManager, getHasThemeUpdatingProps, getManagers };

package/dist/esm/helpers/ThemeManagerContext.mjs

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+const ThemeManagerIDContext = createContext(1);
+export { ThemeManagerIDContext };

package/dist/esm/helpers/createMediaStyle.mjs

@@ -0,0 +1,71 @@
+import { getConfig } from "../config.mjs";
+import { mediaObjectToString } from "../hooks/useMedia.mjs";
+import { getGroupPropParts } from "./getGroupPropParts.mjs";
+const MEDIA_SEP = "_";
+let prefixes = null,
+  selectors = null;
+const groupPseudoToPseudoCSSMap = {
+    press: "active"
+  },
+  createMediaStyle = (styleObject, mediaKeyIn, mediaQueries, type, negate, priority) => {
+    const {
+        property,
+        identifier,
+        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(";");
+    if (isNonWindowMedia) {
+      const precedenceImportancePrefix = new Array((priority || 0) + (isGroup ? 1 : 0)).fill(":root").join("");
+      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 = conf.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(":root", "")}`;
+        styleRule = styleInner.replace(selector, nextSelector);
+      } else styleRule = `${precedenceImportancePrefix}${styleInner}`;
+    }
+    if (!isNonWindowMedia || groupMediaKey) {
+      if (!selectors) {
+        const mediaKeys = Object.keys(mediaQueries);
+        selectors = Object.fromEntries(mediaKeys.map(key => [key, mediaObjectToString(mediaQueries[key])])), enableMediaPropOrder || (prefixes = Object.fromEntries(mediaKeys.map((k, index) => [k, new Array(index + 1).fill(":root").join("")])));
+      }
+      const mediaKey = groupMediaKey || mediaKeyIn,
+        mediaSelector = selectors[mediaKey],
+        mediaQuery = `${negate ? "not all and " : ""}${mediaSelector}`,
+        precedenceImportancePrefix = groupMediaKey ? "" : enableMediaPropOrder ?
+        // this new array should be cached
+        new Array(priority).fill(":root").join("") :
+        // @ts-ignore
+        prefixes[mediaKey],
+        prefix = groupMediaKey ? `@container ${containerName}` : "@media";
+      groupMediaKey && (styleInner = styleRule), styleInner.includes(prefix) ? styleRule = styleInner.replace("{", ` and ${mediaQuery} {`).replace("and screen and", "and") : styleRule = `${prefix} ${mediaQuery}{${precedenceImportancePrefix}${styleInner}}`, groupMediaKey && (styleRule = `@supports (contain: ${conf.settings.webContainerType || "inline-size"}) {${styleRule}}`);
+    }
+    return {
+      property,
+      rules: [styleRule],
+      identifier: nextIdentifier
+    };
+  };
+export { MEDIA_SEP, createMediaStyle };

package/dist/esm/helpers/createShallowSetState.mjs

@@ -0,0 +1,17 @@
+function createShallowSetState(setter, debug) {
+  return next => setter(prev => mergeIfNotShallowEqual(prev, next, debug));
+}
+function mergeIfNotShallowEqual(prev, next, debug) {
+  return isEqualShallow(prev, next) ? prev : (process.env.NODE_ENV === "development" && debug && console.warn("setStateShallow CHANGE", {
+    prev,
+    next
+  }), {
+    ...prev,
+    ...next
+  });
+}
+function isEqualShallow(prev, next) {
+  for (const key in next) if (prev[key] !== next[key]) return !1;
+  return !0;
+}
+export { createShallowSetState, isEqualShallow, mergeIfNotShallowEqual };

package/dist/esm/helpers/createStyledContext.mjs

@@ -0,0 +1,35 @@
+import { createContext, useContext, useMemo } from "react";
+import { objectIdentityKey } from "./objectIdentityKey.mjs";
+import { jsx } from "react/jsx-runtime";
+function createStyledContext(defaultValues) {
+  const OGContext = createContext(defaultValues),
+    OGProvider = OGContext.Provider,
+    Context = OGContext,
+    scopedContexts = /* @__PURE__ */new Map(),
+    Provider = ({
+      children,
+      scope,
+      ...values
+    }) => {
+      const next = useMemo(() => ({
+        // this ! is a workaround for ts error
+        ...defaultValues,
+        ...values
+      }), [objectIdentityKey(values)]);
+      let Provider2 = OGProvider;
+      if (scope) {
+        let ScopedContext = scopedContexts.get(scope);
+        ScopedContext || (ScopedContext = createContext(defaultValues), scopedContexts.set(scope, ScopedContext)), Provider2 = ScopedContext.Provider;
+      }
+      return /* @__PURE__ */jsx(Provider2, {
+        value: next,
+        children
+      });
+    },
+    useStyledContext = scope => {
+      const context = scope ? scopedContexts.get(scope) : OGContext;
+      return useContext(context);
+    };
+  return Context.Provider = Provider, Context.props = defaultValues, Context.context = OGContext, Context.useStyledContext = useStyledContext, Context;
+}
+export { createStyledContext };

package/dist/esm/helpers/defaultOffset.mjs

@@ -0,0 +1,5 @@
+const defaultOffset = {
+  height: 0,
+  width: 0
+};
+export { defaultOffset };