@tamagui/web 1.61.3 → 1.62.0

package/dist/cjs/hooks/useMedia.native.js

@@ -0,0 +1,219 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var useMedia_exports = {};
+__export(useMedia_exports, {
+  configureMedia: () => configureMedia,
+  getInitialMediaState: () => getInitialMediaState,
+  getMedia: () => getMedia,
+  getMediaImportanceIfMoreImportant: () => getMediaImportanceIfMoreImportant,
+  getMediaKeyImportance: () => getMediaKeyImportance,
+  isMediaKey: () => isMediaKey,
+  mediaKeyMatch: () => mediaKeyMatch,
+  mediaKeyToQuery: () => mediaKeyToQuery,
+  mediaKeys: () => mediaKeys,
+  mediaObjectToString: () => mediaObjectToString,
+  mediaQueryConfig: () => mediaQueryConfig,
+  mediaState: () => mediaState,
+  mergeMediaByImportance: () => mergeMediaByImportance,
+  setMediaShouldUpdate: () => setMediaShouldUpdate,
+  setupMediaListeners: () => setupMediaListeners,
+  useMedia: () => useMedia,
+  useMediaListeners: () => useMediaListeners,
+  useMediaPropsActive: () => useMediaPropsActive
+});
+module.exports = __toCommonJS(useMedia_exports);
+var import_constants = require("@tamagui/constants"), import_react = require("react"), import_config = require("../config"), import_createProxy = require("../helpers/createProxy"), import_matchMedia = require("../helpers/matchMedia"), import_propMapper = require("../helpers/propMapper"), import_pseudoDescriptors = require("../helpers/pseudoDescriptors"), import_useTheme = require("./useTheme");
+let mediaState = (
+  // development only safeguard
+  process.env.NODE_ENV === "development" ? (0, import_createProxy.createProxy)(
+    {},
+    {
+      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) => mediaKeys.has(key) || key[0] === "$" && (key.startsWith("$platform-") || key.startsWith("$theme-") || key.startsWith("$group-"));
+let initState;
+const getInitialMediaState = () => ((0, import_config.getConfig)().disableSSR ? mediaState : initState) || {}, defaultMediaImportance = Object.keys(import_pseudoDescriptors.pseudoDescriptors).length;
+let mediaKeysOrdered;
+const getMediaKeyImportance = (key) => {
+  if (process.env.NODE_ENV === "development" && key[0] === "$")
+    throw new Error("use short key");
+  return (0, import_config.getConfig)().settings.mediaPropOrder ? defaultMediaImportance : mediaKeysOrdered.indexOf(key) + 100;
+}, dispose = /* @__PURE__ */ new Set(), configureMedia = (config) => {
+  const { media, mediaQueryDefaultActive } = config;
+  if (media) {
+    for (const key in media)
+      mediaState[key] = mediaQueryDefaultActive?.[key] || !1, mediaKeys.add(`$${key}`);
+    Object.assign(mediaQueryConfig, media), initState = { ...mediaState }, updateCurrentState(), mediaKeysOrdered = Object.keys(media), config.disableSSR && setupMediaListeners();
+  }
+};
+function unlisten() {
+  dispose.forEach((cb) => cb()), dispose.clear();
+}
+let configuredKey = "";
+function setupMediaListeners() {
+  const nextKey = JSON.stringify(mediaQueryConfig);
+  if (nextKey !== configuredKey) {
+    configuredKey = nextKey, unlisten();
+    for (const key in mediaQueryConfig) {
+      let update2 = function() {
+        const next = !!getMatch().matches;
+        next !== mediaState[key] && (mediaState = { ...mediaState, [key]: next }, updateCurrentState());
+      };
+      var update = update2;
+      const str = mediaObjectToString(mediaQueryConfig[key], key), getMatch = () => (0, import_matchMedia.matchMedia)(str), match = getMatch();
+      if (!match)
+        throw new Error("\u26A0\uFE0F No match");
+      match.addListener(update2), dispose.add(() => {
+        match.removeListener(update2);
+      }), update2();
+    }
+  }
+}
+function useMediaListeners(config) {
+  config.disableSSR || (0, import_constants.useIsomorphicLayoutEffect)(() => {
+    setupMediaListeners();
+  }, []);
+}
+const listeners = /* @__PURE__ */ new Set();
+let flushing = !1;
+function updateCurrentState() {
+  flushing || (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) {
+  const internal = (0, import_react.useRef)(), state = (0, import_react.useSyncExternalStore)(
+    subscribe,
+    () => {
+      if (!internal.current)
+        return initState;
+      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);
+    },
+    () => initState
+  );
+  return new Proxy(state, {
+    get(_, key) {
+      return typeof key == "string" && (internal.current ||= { prev: initState }, internal.current.touched ||= /* @__PURE__ */ new Set(), internal.current.touched.add(key)), Reflect.get(state, key);
+    }
+  });
+}
+function useMediaPropsActive(props, opts) {
+  const media = useMedia(), resolveAs = opts?.resolveValues || "none", theme = resolveAs ? (0, import_useTheme.useTheme)() : null, styleState = { theme }, shouldExpandShorthands = opts?.expandShorthands;
+  return (0, import_react.useMemo)(() => {
+    const config = (0, import_config.getConfig)(), next = {}, importancesUsed = {}, propNames = Object.keys(props), len = propNames.length;
+    for (let i = 0; i < len; i++) {
+      let key = propNames[i];
+      const val = props[key];
+      if (key[0] === "$") {
+        const mediaKey = key.slice(1);
+        if (!media[mediaKey])
+          continue;
+        if (val && typeof val == "object") {
+          const subKeys = Object.keys(val);
+          for (let j = subKeys.length; j--; j >= 0) {
+            let subKey = subKeys[j];
+            const value = (0, import_propMapper.getTokenForKey)(subKey, val[subKey], resolveAs, styleState);
+            shouldExpandShorthands && (subKey = config.shorthands[subKey] || subKey), mergeMediaByImportance(next, mediaKey, subKey, value, importancesUsed, !0);
+          }
+        }
+      } else
+        shouldExpandShorthands && (key = config.shorthands[key] || key), mergeMediaByImportance(
+          next,
+          "",
+          key,
+          (0, import_propMapper.getTokenForKey)(key, val, resolveAs, styleState),
+          importancesUsed,
+          !0
+        );
+    }
+    return next;
+  }, [media, props, theme, resolveAs]);
+}
+const getMediaImportanceIfMoreImportant = (mediaKey, key, importancesUsed, isSizeMedia) => {
+  const conf = (0, import_config.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;
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  configureMedia,
+  getInitialMediaState,
+  getMedia,
+  getMediaImportanceIfMoreImportant,
+  getMediaKeyImportance,
+  isMediaKey,
+  mediaKeyMatch,
+  mediaKeyToQuery,
+  mediaKeys,
+  mediaObjectToString,
+  mediaQueryConfig,
+  mediaState,
+  mergeMediaByImportance,
+  setMediaShouldUpdate,
+  setupMediaListeners,
+  useMedia,
+  useMediaListeners,
+  useMediaPropsActive
+});
+//# sourceMappingURL=useMedia.js.map

package/dist/cjs/hooks/useMedia.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useMedia.tsx"],
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAA0C,+BAC1C,eAAsD,kBAEtD,gBAAoC,sBAEpC,qBAA4B,mCAC5B,oBAA2B,kCAC3B,oBAA+B,kCAC/B,2BAAkC,yCAWlC,kBAAwD;AAEjD,IAAI;AAAA;AAAA,EAET,QAAQ,IAAI,aAAa,oBACrB;AAAA,IACE,CAAC;AAAA,IACD;AAAA,MACE,IAAI,QAAQ,KAAK;AACf,YACE,OAAO,OAAQ,YACf,IAAI,CAAC,MAAM;AAAA,QAEX,IAAI,CAAC,MAAM;AAEX,gBAAM,IAAI,MAAM,yCAAyC,GAAG,EAAE;AAEhE,eAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,MAChC;AAAA,IACF;AAAA,EACF,IACC,CAAC;AAAA;AAED,MAAM,mBAAiC,CAAC,GAElC,WAAW,MAAM,YAEjB,YAAY,oBAAI,IAAY,GAE5B,aAAa,CAAC,QACzB,UAAU,IAAI,GAAG,KAChB,IAAI,CAAC,MAAM,QACT,IAAI,WAAW,YAAY,KAC1B,IAAI,WAAW,SAAS,KACxB,IAAI,WAAW,SAAS;AAG9B,IAAI;AACG,MAAM,uBAAuB,WAC1B,yBAAU,EAAE,aAAa,aAAa,cAAc,CAAC,GAIzD,yBAAyB,OAAO,KAAK,0CAAiB,EAAE;AAE9D,IAAI;AAEG,MAAM,wBAAwB,CAAC,QAAgB;AACpD,MAAI,QAAQ,IAAI,aAAa,iBAAiB,IAAI,CAAC,MAAM;AACvD,UAAM,IAAI,MAAM,eAAe;AAIjC,aADa,yBAAU,EACd,SAAS,iBACT,yBAMF,iBAAiB,QAAQ,GAAG,IAAI;AACzC,GAEM,UAAU,oBAAI,IAAc,GAErB,iBAAiB,CAAC,WAAkC;AAC/D,QAAM,EAAE,OAAO,wBAAwB,IAAI;AAC3C,MAAK,OACL;AAAA,eAAW,OAAO;AAChB,iBAAW,GAAG,IAAI,0BAA0B,GAAG,KAAK,IACpD,UAAU,IAAI,IAAI,GAAG,EAAE;AAEzB,WAAO,OAAO,kBAAkB,KAAK,GACrC,YAAY,EAAE,GAAG,WAAW,GAC5B,mBAAmB,GACnB,mBAAmB,OAAO,KAAK,KAAK,GAChC,OAAO,cACT,oBAAoB;AAAA;AAExB;AAEA,SAAS,WAAW;AAClB,UAAQ,QAAQ,CAAC,OAAO,GAAG,CAAC,GAC5B,QAAQ,MAAM;AAChB;AAOA,IAAI,gBAAgB;AACb,SAAS,sBAAsB;AAEpC,QAAM,UAAU,KAAK,UAAU,gBAAgB;AAC/C,MAAI,YAAY,eAChB;AAAA,oBAAgB,SAGhB,SAAS;AAET,eAAW,OAAO,kBAAkB;AAelC,UAASA,UAAT,WAAkB;AAChB,cAAM,OAAO,CAAC,CAAC,SAAS,EAAE;AAC1B,QAAI,SAAS,WAAW,GAAG,MAC3B,aAAa,EAAE,GAAG,YAAY,CAAC,GAAG,GAAG,KAAK,GAC1C,mBAAmB;AAAA,MACrB;AALS,mBAAAA;AAdT,YAAM,MAAM,oBAAoB,iBAAiB,GAAG,GAAG,GAAG,GACpD,WAAW,UAAM,8BAAW,GAAG,GAC/B,QAAQ,SAAS;AACvB,UAAI,CAAC;AACH,cAAM,IAAI,MAAM,uBAAa;AAG/B,YAAM,YAAYA,OAAM,GACxB,QAAQ,IAAI,MAAM;AAChB,cAAM,eAAeA,OAAM;AAAA,MAC7B,CAAC,GAEDA,QAAO;AAAA,IAQT;AAAA;AACF;AAEO,SAAS,kBAAkB,QAA+B;AAC/D,EAAI,OAAO,kBAEX,4CAA0B,MAAM;AAC9B,wBAAoB;AAAA,EACtB,GAAG,CAAC,CAAC;AACP;AAEA,MAAM,YAAY,oBAAI,IAAS;AAC/B,IAAI,WAAW;AACf,SAAS,qBAAqB;AAC5B,EAAI,aACJ,WAAW,IACX,QAAQ,QAAQ,EAAE,KAAK,MAAM;AAC3B,eAAW,IACX,UAAU,QAAQ,CAAC,OAAO,GAAG,UAAU,CAAC;AAAA,EAC1C,CAAC;AACH;AAeA,MAAM,eAAe,oBAAI,QAA0B;AAE5C,SAAS,qBAAqB,KAAU,OAAoB;AACjE,SAAO,aAAa,IAAI,KAAK,KAAK;AACpC;AAOA,SAAS,UAAU,YAAiB;AAClC,mBAAU,IAAI,UAAU,GACjB,MAAM,UAAU,OAAO,UAAU;AAC1C;AAEO,SAAS,SAAS,KAA0B;AACjD,QAAM,eAAW,qBAA0C,GAErD,YAAQ;AAAA,IACZ;AAAA,IACA,MAAM;AACJ,UAAI,CAAC,SAAS;AACZ,eAAO;AAGT,YAAM,EAAE,SAAS,KAAK,IAAI,SAAS,SAC7B,iBAAiB,MAAM,aAAa,IAAI,GAAG,IAAI;AAErD,UAAI,kBAAkB,eAAe,YAAY;AAC/C,eAAO;AAGT,YAAM,WACJ,gBAAgB,UACd,CAAC,kBAAkB,eAAe,YAAY,UAAU,CAAC,GAAG,OAAO,IAAI;AAK3E,aAFE,CAAC,YAAY,UAAU,MAAM,CAAC,QAAQ,WAAW,GAAG,MAAM,KAAK,GAAG,CAAC,IAG5D,QAGT,SAAS,QAAQ,OAAO,YAEjB;AAAA,IACT;AAAA,IACA,MAAM;AAAA,EACR;AAEA,SAAO,IAAI,MAAM,OAAO;AAAA,IACtB,IAAI,GAAG,KAAK;AACV,aAAI,OAAO,OAAQ,aACjB,SAAS,YAAY,EAAE,MAAM,UAAU,GACvC,SAAS,QAAQ,YAAY,oBAAI,IAAI,GACrC,SAAS,QAAQ,QAAQ,IAAI,GAAG,IAE3B,QAAQ,IAAI,OAAO,GAAG;AAAA,IAC/B;AAAA,EACF,CAAC;AACH;AAYO,SAAS,oBACd,OACA,MAOA;AACA,QAAM,QAAQ,SAAS,GACjB,YAAY,MAAM,iBAAiB,QACnC,QAAQ,gBAAY,0BAAS,IAAI,MACjC,aAAa,EAAE,MAAM,GACrB,yBAAyB,MAAM;AAErC,aAAO,sBAAQ,MAAM;AACnB,UAAM,aAAS,yBAAU,GACnB,OAAO,CAAC,GACR,kBAAkB,CAAC,GACnB,YAAY,OAAO,KAAK,KAAK,GAC7B,MAAM,UAAU;AAEtB,aAAS,IAAI,GAAG,IAAI,KAAK,KAAK;AAC5B,UAAI,MAAM,UAAU,CAAC;AACrB,YAAM,MAAM,MAAM,GAAG;AACrB,UAAI,IAAI,CAAC,MAAM,KAAK;AAClB,cAAM,WAAW,IAAI,MAAM,CAAC;AAC5B,YAAI,CAAC,MAAM,QAAQ;AAAG;AACtB,YAAI,OAAO,OAAO,OAAQ,UAAU;AAClC,gBAAM,UAAU,OAAO,KAAK,GAAG;AAC/B,mBAAS,IAAI,QAAQ,QAAQ,KAAK,KAAK,GAAG;AACxC,gBAAI,SAAS,QAAQ,CAAC;AACtB,kBAAM,YAAQ,kCAAe,QAAQ,IAAI,MAAM,GAAG,WAAW,UAAU;AACvE,YAAI,2BACF,SAAS,OAAO,WAAW,MAAM,KAAK,SAExC,uBAAuB,MAAM,UAAU,QAAQ,OAAO,iBAAiB,EAAI;AAAA,UAC7E;AAAA,QACF;AAAA,MACF;AACE,QAAI,2BACF,MAAM,OAAO,WAAW,GAAG,KAAK,MAElC;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,cACA,kCAAe,KAAK,KAAK,WAAW,UAAU;AAAA,UAC9C;AAAA,UACA;AAAA,QACF;AAAA,IAEJ;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,OAAO,OAAO,SAAS,CAAC;AACrC;AAEO,MAAM,oCAAoC,CAC/C,UACA,KACA,iBACA,gBACG;AACH,QAAM,WAAO,yBAAU,GACjB,aACJ,eAAe,CAAC,KAAK,SAAS,iBAC1B,sBAAsB,QAAQ,IAC9B;AACN,SAAO,CAAC,gBAAgB,GAAG,KAAK,aAAa,gBAAgB,GAAG,IAAI,aAAa;AACnF;AAEO,SAAS,uBACd,MACA,UACA,KACA,OACA,iBACA,aACA,gBACA;AACA,MAAI,aAAa;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAIA,SAHI,mBACF,cAAc,cAAc,KAAK,iBAE/B,eAAe,OACV,MAET,gBAAgB,GAAG,IAAI,YACvB,KAAK,GAAG,IAAI,OACL;AACT;AAEA,SAAS,cAAc,KAAa;AAClC,SAAO,IAAI,QAAQ,UAAU,CAAC,MAAM,IAAI,EAAE,YAAY,CAAC,EAAE,EAAE,YAAY;AACzE;AAEA,MAAM,QAAQ,oBAAI,QAAqB,GACjC,wBAAgD,CAAC;AAEhD,SAAS,oBAAoB,OAAkC,KAAc;AAClF,MAAI,OAAO,SAAU;AACnB,WAAO;AAET,MAAI,MAAM,IAAI,KAAK;AACjB,WAAO,MAAM,IAAI,KAAK;AAExB,QAAM,MAAM,OAAO,QAAQ,KAAK,EAC7B,IAAI,CAAC,CAAC,SAAS,KAAK,OACnB,UAAU,cAAc,OAAO,GAC3B,OAAO,SAAU,WACZ,IAAI,OAAO,KAAK,KAAK,OAE1B,OAAO,SAAU,YAAY,kBAAkB,KAAK,OAAO,MAC7D,QAAQ,GAAG,KAAK,OAEX,IAAI,OAAO,KAAK,KAAK,KAC7B,EACA,KAAK,OAAO;AACf,SAAI,QACF,sBAAsB,GAAG,IAAI,MAE/B,MAAM,IAAI,OAAO,GAAG,GACb;AACT;AAEO,SAAS,gBAAgB,KAAa;AAC3C,SAAO,sBAAsB,GAAG,KAAK,oBAAoB,iBAAiB,GAAG,GAAG,GAAG;AACrF;AAEO,SAAS,cACd,KACA,YACA;AACA,QAAM,eAAe,iBAAiB,GAAG;AASzC,SARe,OAAO,KAAK,YAAY,EAAE,MAAM,CAAC,UAAU;AACxD,UAAM,cAAc,CAAC,aAAa,KAAK,GACjC,QAAQ,MAAM,WAAW,KAAK,GAC9B,UAAU,MAAM,SAAS,OAAO,GAChC,WAAW,WAAW,UAAU,UAAU,QAAQ;AAExD,WAAO,QAAQ,WAAW,cAAc,WAAW;AAAA,EACrD,CAAC;AAEH;",
+  "names": ["update"]
+}

package/dist/cjs/hooks/useMemoDebug.js

@@ -1,21 +1,17 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
     for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   return to;
 };
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
 var useMemoDebug_exports = {};
 __export(useMemoDebug_exports, {
   useMemoDebug: () => useMemoDebug
@@ -24,14 +20,8 @@ module.exports = __toCommonJS(useMemoDebug_exports);
 var import_react = require("react");
 const useMemoDebug = (fn, args) => {
   let run = 1;
-  const res = (0, import_react.useMemo)(() => {
-    run = 0;
-    return fn();
-  }, args);
-  if (run === 1) {
-    console.log("saved a run");
-  }
-  return res;
+  const res = (0, import_react.useMemo)(() => (run = 0, fn()), args);
+  return run === 1 && console.log("saved a run"), res;
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/hooks/useMemoDebug.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useMemoDebug.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAwB;AAEjB,MAAM,eAA+B,CAAC,IAAI,SAAS;AACxD,MAAI,MAAM;AAEV,QAAM,UAAM,sBAAQ,MAAM;AACxB,UAAM;AACN,WAAO,GAAG;AAAA,EACZ,GAAG,IAAI;AAEP,MAAI,QAAQ,GAAG;AAEb,YAAQ,IAAI,aAAa;AAAA,EAC3B;AAEA,SAAO;AACT;",
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAwB;AAEjB,MAAM,eAA+B,CAAC,IAAI,SAAS;AACxD,MAAI,MAAM;AAEV,QAAM,UAAM,sBAAQ,OAClB,MAAM,GACC,GAAG,IACT,IAAI;AAEP,SAAI,QAAQ,KAEV,QAAQ,IAAI,aAAa,GAGpB;AACT;",
   "names": []
 }

package/dist/cjs/hooks/useMemoDebug.native.js

@@ -0,0 +1,31 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var useMemoDebug_exports = {};
+__export(useMemoDebug_exports, {
+  useMemoDebug: () => useMemoDebug
+});
+module.exports = __toCommonJS(useMemoDebug_exports);
+var import_react = require("react");
+const useMemoDebug = (fn, args) => {
+  let run = 1;
+  const res = (0, import_react.useMemo)(() => (run = 0, fn()), args);
+  return run === 1 && console.log("saved a run"), res;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useMemoDebug
+});
+//# sourceMappingURL=useMemoDebug.js.map

package/dist/cjs/hooks/useMemoDebug.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useMemoDebug.tsx"],
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAwB;AAEjB,MAAM,eAA+B,CAAC,IAAI,SAAS;AACxD,MAAI,MAAM;AAEV,QAAM,UAAM,sBAAQ,OAClB,MAAM,GACC,GAAG,IACT,IAAI;AAEP,SAAI,QAAQ,KAEV,QAAQ,IAAI,aAAa,GAGpB;AACT;",
+  "names": []
+}

package/dist/cjs/hooks/useProps.js

@@ -1,21 +1,17 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
     for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   return to;
 };
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
 var useProps_exports = {};
 __export(useProps_exports, {
   useProps: () => useProps
@@ -24,8 +20,8 @@ module.exports = __toCommonJS(useProps_exports);
 var import_useMedia = require("./useMedia");
 function useProps(props, opts) {
   return (0, import_useMedia.useMediaPropsActive)(props, {
-    expandShorthands: !(opts == null ? void 0 : opts.disableExpandShorthands),
-    resolveValues: opts == null ? void 0 : opts.resolveValues
+    expandShorthands: !opts?.disableExpandShorthands,
+    resolveValues: opts?.resolveValues
   });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/cjs/hooks/useProps.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useProps.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,sBAAoC;AAQ7B,SAAS,SACd,OACA,MAOA;AACA,aAAO,qCAAoB,OAAO;AAAA,IAChC,kBAAkB,EAAC,6BAAM;AAAA,IACzB,eAAe,6BAAM;AAAA,EACvB,CAAC;AACH;",
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,sBAAoC;AAQ7B,SAAS,SACd,OACA,MAOA;AACA,aAAO,qCAAoB,OAAO;AAAA,IAChC,kBAAkB,CAAC,MAAM;AAAA,IACzB,eAAe,MAAM;AAAA,EACvB,CAAC;AACH;",
   "names": []
 }

package/dist/cjs/hooks/useProps.native.js

@@ -0,0 +1,32 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var useProps_exports = {};
+__export(useProps_exports, {
+  useProps: () => useProps
+});
+module.exports = __toCommonJS(useProps_exports);
+var import_useMedia = require("./useMedia");
+function useProps(props, opts) {
+  return (0, import_useMedia.useMediaPropsActive)(props, {
+    expandShorthands: !opts?.disableExpandShorthands,
+    resolveValues: opts?.resolveValues
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useProps
+});
+//# sourceMappingURL=useProps.js.map

package/dist/cjs/hooks/useProps.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useProps.tsx"],
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,sBAAoC;AAQ7B,SAAS,SACd,OACA,MAOA;AACA,aAAO,qCAAoB,OAAO;AAAA,IAChC,kBAAkB,CAAC,MAAM;AAAA,IACzB,eAAe,MAAM;AAAA,EACvB,CAAC;AACH;",
+  "names": []
+}

package/dist/cjs/hooks/useStyle.js

@@ -1,38 +1,25 @@
-"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
     for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   return to;
 };
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
 var useStyle_exports = {};
 __export(useStyle_exports, {
   useStyle: () => useStyle
 });
 module.exports = __toCommonJS(useStyle_exports);
-var import_react = require("react");
-var import_ComponentContext = require("../contexts/ComponentContext");
-var import_createComponent = require("../createComponent");
-var import_getSplitStyles = require("../helpers/getSplitStyles");
-var import_useMedia = require("./useMedia");
-var import_useTheme = require("./useTheme");
+var import_react = require("react"), import_ComponentContext = require("../contexts/ComponentContext"), import_createComponent = require("../createComponent"), import_getSplitStyles = require("../helpers/getSplitStyles"), import_useMedia = require("./useMedia"), import_useTheme = require("./useTheme");
 function useStyle(base, style, options) {
-  const isText = base.staticConfig.isText;
-  const componentContext = (0, import_react.useContext)(import_ComponentContext.ComponentContext);
-  const [themeState] = (0, import_useTheme.useThemeWithState)({});
-  const media = (0, import_useMedia.useMedia)();
-  const out = (0, import_getSplitStyles.useSplitStyles)(
+  const isText = base.staticConfig.isText, componentContext = (0, import_react.useContext)(import_ComponentContext.ComponentContext), [themeState] = (0, import_useTheme.useThemeWithState)({}), media = (0, import_useMedia.useMedia)(), out = (0, import_getSplitStyles.useSplitStyles)(
     style,
     base.staticConfig,
     themeState.state.theme,
@@ -46,7 +33,7 @@ function useStyle(base, style, options) {
     null,
     componentContext,
     isText ? "span" : "div",
-    options == null ? void 0 : options.debug
+    options?.debug
   );
   return {
     style: Object.keys(out.style).length ? out.style : null,

package/dist/cjs/hooks/useStyle.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useStyle.tsx"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2B;AAE3B,8BAAiC;AACjC,6BAAsC;AACtC,4BAA+B;AAQ/B,sBAAyB;AACzB,sBAAkC;AAE3B,SAAS,SAId,MACA,OACA,SACA;AACA,QAAM,SAAS,KAAK,aAAa;AACjC,QAAM,uBAAmB,yBAAW,wCAAgB;AACpD,QAAM,CAAC,UAAU,QAAI,mCAAkB,CAAC,CAAC;AACzC,QAAM,YAAQ,0BAAS;AACvB,QAAM,UAAM;AAAA,IACV;AAAA,IACA,KAAK;AAAA,IACL,WAAW,MAAM;AAAA,IACjB,WAAW,MAAM;AAAA,IACjB;AAAA,IACA;AAAA,MACE,GAAI;AAAA,MACJ,YAAY;AAAA,MACZ,oBAAoB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,SAAS;AAAA,IAClB,mCAAS;AAAA,EACX;AACA,SAAO;AAAA,IACL,OAAO,OAAO,KAAK,IAAI,KAAK,EAAE,SAAS,IAAI,QAAQ;AAAA,IACnD,YAAY,IAAI;AAAA,EAClB;AACF;",
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2B,kBAE3B,0BAAiC,yCACjC,yBAAsC,+BACtC,wBAA+B,sCAQ/B,kBAAyB,uBACzB,kBAAkC;AAE3B,SAAS,SAId,MACA,OACA,SACA;AACA,QAAM,SAAS,KAAK,aAAa,QAC3B,uBAAmB,yBAAW,wCAAgB,GAC9C,CAAC,UAAU,QAAI,mCAAkB,CAAC,CAAC,GACnC,YAAQ,0BAAS,GACjB,UAAM;AAAA,IACV;AAAA,IACA,KAAK;AAAA,IACL,WAAW,MAAM;AAAA,IACjB,WAAW,MAAM;AAAA,IACjB;AAAA,IACA;AAAA,MACE,GAAI;AAAA,MACJ,YAAY;AAAA,MACZ,oBAAoB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,SAAS;AAAA,IAClB,SAAS;AAAA,EACX;AACA,SAAO;AAAA,IACL,OAAO,OAAO,KAAK,IAAI,KAAK,EAAE,SAAS,IAAI,QAAQ;AAAA,IACnD,YAAY,IAAI;AAAA,EAClB;AACF;",
   "names": []
 }

package/dist/cjs/hooks/useStyle.native.js

@@ -0,0 +1,48 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var useStyle_exports = {};
+__export(useStyle_exports, {
+  useStyle: () => useStyle
+});
+module.exports = __toCommonJS(useStyle_exports);
+var import_react = require("react"), import_ComponentContext = require("../contexts/ComponentContext"), import_createComponent = require("../createComponent"), import_getSplitStyles = require("../helpers/getSplitStyles"), import_useMedia = require("./useMedia"), import_useTheme = require("./useTheme");
+function useStyle(base, style, options) {
+  const isText = base.staticConfig.isText, componentContext = (0, import_react.useContext)(import_ComponentContext.ComponentContext), [themeState] = (0, import_useTheme.useThemeWithState)({}), media = (0, import_useMedia.useMedia)(), out = (0, import_getSplitStyles.useSplitStyles)(
+    style,
+    base.staticConfig,
+    themeState.state.theme,
+    themeState.state.name,
+    import_createComponent.defaultComponentState,
+    {
+      ...options,
+      mediaState: media,
+      resolveVariablesAs: "auto"
+    },
+    null,
+    componentContext,
+    isText ? "span" : "div",
+    options?.debug
+  );
+  return {
+    style: Object.keys(out.style).length ? out.style : null,
+    classNames: out.classNames
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useStyle
+});
+//# sourceMappingURL=useStyle.js.map

package/dist/cjs/hooks/useStyle.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/useStyle.tsx"],
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2B,kBAE3B,0BAAiC,yCACjC,yBAAsC,+BACtC,wBAA+B,sCAQ/B,kBAAyB,uBACzB,kBAAkC;AAE3B,SAAS,SAId,MACA,OACA,SACA;AACA,QAAM,SAAS,KAAK,aAAa,QAC3B,uBAAmB,yBAAW,wCAAgB,GAC9C,CAAC,UAAU,QAAI,mCAAkB,CAAC,CAAC,GACnC,YAAQ,0BAAS,GACjB,UAAM;AAAA,IACV;AAAA,IACA,KAAK;AAAA,IACL,WAAW,MAAM;AAAA,IACjB,WAAW,MAAM;AAAA,IACjB;AAAA,IACA;AAAA,MACE,GAAI;AAAA,MACJ,YAAY;AAAA,MACZ,oBAAoB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,SAAS;AAAA,IAClB,SAAS;AAAA,EACX;AACA,SAAO;AAAA,IACL,OAAO,OAAO,KAAK,IAAI,KAAK,EAAE,SAAS,IAAI,QAAQ;AAAA,IACnD,YAAY,IAAI;AAAA,EAClB;AACF;",
+  "names": []
+}