@tamagui/core 1.0.0-alpha.38 → 1.0.0-alpha.39

package/dist/index.cjs

@@ -1,1837 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var __export = (target, all) => {
-  __markAsModule(target);
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-
-// src/index.ts
-__export(exports, {
-  AnimatedStack: () => AnimatedStack,
-  GET_DEFAULT_THEME: () => GET_DEFAULT_THEME,
-  Spacer: () => Spacer,
-  Stack: () => Stack,
-  Text: () => Text2,
-  TextAncestorContext: () => TextAncestorContext,
-  TextAncestorProvider: () => TextAncestorProvider,
-  Theme: () => Theme,
-  ThemeInverse: () => ThemeInverse,
-  ThemeProvider: () => ThemeProvider,
-  Variable: () => Variable,
-  addMediaQueryListener: () => addMediaQueryListener,
-  configureMedia: () => configureMedia,
-  createComponent: () => createComponent,
-  createShorthands: () => createShorthands,
-  createTamagui: () => createTamagui,
-  createTokens: () => createTokens,
-  createVariable: () => createVariable,
-  cssText: () => cssText,
-  cssTextStyles: () => cssTextStyles,
-  disabledStyle: () => disabledStyle,
-  extendStaticConfig: () => extendStaticConfig,
-  getHasConfigured: () => getHasConfigured,
-  getMedia: () => getMedia,
-  getTamaguiConfig: () => getTamaguiConfig,
-  getThemeParentClassName: () => getThemeParentClassName,
-  isChrome: () => isChrome,
-  isSSR: () => isSSR,
-  isTouchDevice: () => isTouchDevice,
-  isVariable: () => isVariable,
-  isWeb: () => isWeb,
-  isWebIOS: () => isWebIOS,
-  matchMedia: () => matchMedia,
-  mediaObjectToString: () => mediaObjectToString,
-  mediaQueryConfig: () => mediaQueryConfig,
-  mediaState: () => mediaState,
-  mouseUps: () => mouseUps,
-  onConfiguredOnce: () => onConfiguredOnce,
-  parseStaticConfig: () => parseStaticConfig,
-  removeMediaQueryListener: () => removeMediaQueryListener,
-  rnw: () => rnw,
-  setIfChanged: () => setIfChanged,
-  setThemeInversions: () => setThemeInversions,
-  spacedChildren: () => spacedChildren,
-  stackDefaultStyles: () => stackDefaultStyles,
-  styled: () => styled,
-  supportsTouchWeb: () => supportsTouchWeb,
-  textStyles: () => textStyles,
-  themeable: () => themeable,
-  useConstant: () => useConstant,
-  useDefaultThemeName: () => useDefaultThemeName,
-  useForceUpdate: () => useForceUpdate,
-  useIsomorphicLayoutEffect: () => useIsomorphicLayoutEffect,
-  useMedia: () => useMedia,
-  useTheme: () => useTheme,
-  useThemeName: () => useThemeName,
-  validStylesText: () => validStylesText,
-  viewStyles: () => viewStyles,
-  webOnlySpecificStyleKeys: () => webOnlySpecificStyleKeys
-});
-
-// src/createComponent.tsx
-var import_helpers4 = __toModule(require("@tamagui/helpers"));
-var import_react11 = __toModule(require("react"));
-var import_react_native5 = __toModule(require("react-native"));
-
-// src/constants/constants.ts
-var import_helpers = __toModule(require("@tamagui/helpers"));
-
-// src/constants/platform.ts
-var import_react = __toModule(require("react"));
-var import_react_native = __toModule(require("react-native"));
-var isWeb = process.env.TARGET !== "native" || import_react_native.Platform.OS === "web";
-var isSSR = isWeb && typeof window === "undefined";
-var useIsomorphicLayoutEffect = isSSR ? import_react.useEffect : import_react.useLayoutEffect;
-var isWebIOS = isWeb && typeof window !== "undefined" && (/iPad|iPhone|iPod/.test(navigator.platform) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) && !window["MSStream"];
-var isChrome = typeof navigator !== "undefined" && /Chrome/.test(navigator.userAgent || "");
-var supportsTouchWeb = typeof window !== "undefined" && "ontouchstart" in window;
-var isTouchDevice = !isWeb || supportsTouchWeb;
-
-// src/constants/constants.ts
-var webOnlySpecificStyleKeys = {
-  userSelect: true,
-  textOverflow: true,
-  whiteSpace: true,
-  wordWrap: true,
-  selectable: true,
-  cursor: true
-};
-var validStylesText = __spreadValues(__spreadValues(__spreadValues({}, import_helpers.validStyles), import_helpers.stylePropsTextOnly), isWeb && __spreadValues({}, webOnlySpecificStyleKeys));
-var stackDefaultStyles = __spreadValues({
-  alignItems: "stretch",
-  flexShrink: 0
-}, isWeb && {
-  display: "flex",
-  flexBasis: "auto",
-  boxSizing: "border-box"
-});
-
-// src/constants/rnw.tsx
-var loadRNW = process.env.IS_STATIC !== "is_static" && isWeb;
-var interopRequire = /* @__PURE__ */ __name((src) => "default" in src ? src.default : src, "interopRequire");
-var rnw = loadRNW ? interopRequire(require("react-native-web").TamaguiExports) : null;
-
-// src/constants/styleConstants.tsx
-var import_react_native2 = __toModule(require("react-native"));
-var cssTextStyles = {
-  text: {
-    display: isWeb ? "inline" : "flex",
-    boxSizing: "border-box",
-    fontFamily: "System",
-    whiteSpace: "pre-wrap",
-    wordWrap: "break-word"
-  },
-  textHasAncestor: {
-    color: "inherit",
-    font: "inherit",
-    whiteSpace: "inherit"
-  },
-  textOneLine: {
-    maxWidth: "100%",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
-  },
-  textMultiLine: {
-    display: "-webkit-box",
-    maxWidth: "100%",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    WebkitBoxOrient: "vertical"
-  }
-};
-var _a;
-var cssText = isWeb ? (_a = rnw) == null ? void 0 : _a.css.create(cssTextStyles) : {};
-var disabledStyle = {
-  pointerEvents: "none",
-  userSelect: "none"
-};
-var viewStyles = import_react_native2.StyleSheet.create({
-  inline: isWeb ? {
-    display: "inline-flex"
-  } : {}
-});
-var textStyles = isWeb ? import_react_native2.StyleSheet.create({
-  notSelectable: {
-    userSelect: "none"
-  },
-  selectable: {
-    userSelect: "text"
-  },
-  pressable: {
-    cursor: "pointer"
-  }
-}) : {};
-
-// src/createVariable.ts
-var Variable = class {
-  constructor({ val, name }) {
-    this.val = typeof val === "string" ? val : `${val}px`;
-    this.name = name;
-    this.variable = `var(--${name})`;
-  }
-};
-__name(Variable, "Variable");
-var createVariable = /* @__PURE__ */ __name((props) => new Variable(props), "createVariable");
-function isVariable(v) {
-  return v instanceof Variable;
-}
-__name(isVariable, "isVariable");
-
-// src/helpers/createTamaguiProvider.tsx
-var import_overlays = __toModule(require("@react-native-aria/overlays"));
-var React4 = __toModule(require("react"));
-var import_react_native3 = __toModule(require("react-native"));
-var import_react_native_safe_area_context = __toModule(require("react-native-safe-area-context"));
-
-// src/views/TextAncestorContext.tsx
-var import_react2 = __toModule(require("react"));
-var _a2;
-var TextAncestorContext = (_a2 = rnw) == null ? void 0 : _a2.TextAncestorContext;
-var TextAncestorProvider = /* @__PURE__ */ __name((props) => {
-  if (TextAncestorContext) {
-    return /* @__PURE__ */ import_react2.default.createElement(TextAncestorContext.Provider, {
-      value: false
-    }, props.children);
-  }
-  return props.children;
-}, "TextAncestorProvider");
-
-// src/views/ThemeProvider.tsx
-var import_react7 = __toModule(require("react"));
-
-// src/views/Theme.tsx
-var import_react6 = __toModule(require("react"));
-
-// src/hooks/useConstant.tsx
-var import_react3 = __toModule(require("react"));
-function useConstant(fn) {
-  const ref = (0, import_react3.useRef)();
-  if (!ref.current) {
-    ref.current = { v: fn() };
-  }
-  return ref.current.v;
-}
-__name(useConstant, "useConstant");
-
-// src/views/ThemeContext.tsx
-var import_react4 = __toModule(require("react"));
-var ThemeContext = (0, import_react4.createContext)(null);
-
-// src/views/ThemeManagerContext.tsx
-var import_react5 = __toModule(require("react"));
-var ThemeManager = class {
-  constructor() {
-    this.name = "light";
-    this.keys = new Map();
-    this.listeners = new Map();
-    this.callbacks = new Set();
-    this.theme = null;
-  }
-  setActiveTheme(name, theme) {
-    if (name === this.name)
-      return;
-    this.name = name;
-    this.theme = theme;
-    this.update();
-  }
-  track(uuid, keys) {
-    if (!this.name)
-      return;
-    this.keys.set(uuid, keys);
-  }
-  update() {
-    var _a4;
-    if (!this.name) {
-      this.keys.clear();
-    }
-    for (const [uuid, keys] of this.keys.entries()) {
-      if (keys.size) {
-        (_a4 = this.listeners.get(uuid)) == null ? void 0 : _a4();
-      }
-    }
-    this.callbacks.forEach((cb) => cb(this.name));
-  }
-  onChangeTheme(cb) {
-    this.callbacks.add(cb);
-    return () => {
-      this.callbacks.delete(cb);
-    };
-  }
-  onUpdate(uuid, cb) {
-    this.listeners.set(uuid, cb);
-    return () => {
-      this.listeners.delete(uuid);
-      this.keys.delete(uuid);
-    };
-  }
-};
-__name(ThemeManager, "ThemeManager");
-var ThemeManagerContext = (0, import_react5.createContext)(new ThemeManager());
-
-// src/views/Theme.tsx
-var Theme = /* @__PURE__ */ __name((props) => {
-  var _a4;
-  const parent = (0, import_react6.useContext)(ThemeManagerContext);
-  const themes = (0, import_react6.useContext)(ThemeContext);
-  const [parentName, setParentName] = (0, import_react6.useState)(parent.name || "light");
-  const { name, theme } = getTheme(props.name, parentName, themes);
-  const themeManager = useConstant(() => {
-    const manager = new ThemeManager();
-    if (name) {
-      manager.setActiveTheme(name, themes[name]);
-    }
-    return manager;
-  });
-  useIsomorphicLayoutEffect(() => {
-    themeManager.setActiveTheme(name, theme);
-    return parent.onChangeTheme((next) => {
-      if (next) {
-        themeManager.setActiveTheme(next, themes[next]);
-        setParentName(next);
-      }
-    });
-  }, [themes, name]);
-  if (!name) {
-    return props.children;
-  }
-  const contents = themeManager ? /* @__PURE__ */ import_react6.default.createElement(ThemeManagerContext.Provider, {
-    value: themeManager
-  }, props.children) : props.children;
-  if (isWeb) {
-    if (props.disableThemeClass) {
-      return contents;
-    }
-    return /* @__PURE__ */ import_react6.default.createElement("div", {
-      className: getThemeParentClassName(name),
-      style: { display: "contents", color: (_a4 = themes[name]) == null ? void 0 : _a4["color"] }
-    }, contents);
-  }
-  return contents;
-}, "Theme");
-function getTheme(name, parentName, themes) {
-  let fullName = name || parentName || "";
-  let nextTheme = themes[fullName];
-  if (name && !nextTheme) {
-    const themeSchemeName = `${fullName}-${parentName}`;
-    if (themes[themeSchemeName]) {
-      fullName = themeSchemeName;
-      nextTheme = themes[themeSchemeName];
-    }
-  }
-  return { name: fullName, theme: nextTheme };
-}
-__name(getTheme, "getTheme");
-
-// src/views/ThemeProvider.tsx
-var GET_DEFAULT_THEME = "___TGUI";
-var ThemeProvider = /* @__PURE__ */ __name((props) => {
-  if (!getHasConfigured()) {
-    throw new Error(`Missing configureThemes() call, add to your root file`);
-  }
-  useIsomorphicLayoutEffect(() => {
-    if (props.disableRootThemeClass) {
-      return;
-    }
-    if (typeof document !== "undefined") {
-      const cns = getThemeParentClassName(`${props.defaultTheme}`).split(" ");
-      cns.forEach((cn) => document.body.classList.add(cn));
-      return () => {
-        cns.forEach((cn) => document.body.classList.remove(cn));
-      };
-    }
-  }, []);
-  return /* @__PURE__ */ import_react7.default.createElement(ThemeContext.Provider, {
-    value: (0, import_react7.useMemo)(() => {
-      console.log("wut are", props.themes);
-      return new Proxy(props.themes, {
-        get(target, key) {
-          if (key === GET_DEFAULT_THEME)
-            return props.defaultTheme;
-          return Reflect.get(target, key);
-        }
-      });
-    }, [props.themes])
-  }, /* @__PURE__ */ import_react7.default.createElement(Theme, {
-    name: props.defaultTheme,
-    disableThemeClass: props.disableRootThemeClass
-  }, props.children));
-}, "ThemeProvider");
-
-// src/helpers/createTamaguiProvider.tsx
-function createTamaguiProvider(themeProps) {
-  let defaultMetrics = null;
-  return /* @__PURE__ */ __name(function TamaguiProvider(_a4) {
-    var _b2 = _a4, {
-      initialWindowMetrics,
-      fallback,
-      children
-    } = _b2, themePropsProvider = __objRest(_b2, [
-      "initialWindowMetrics",
-      "fallback",
-      "children"
-    ]);
-    if (!initialWindowMetrics && !defaultMetrics) {
-      defaultMetrics = import_react_native3.Platform.select({
-        web: {
-          frame: { x: 0, y: 0, width: 0, height: 0 },
-          insets: { top: 0, left: 0, right: 0, bottom: 0 }
-        },
-        default: import_react_native_safe_area_context.initialWindowMetrics
-      });
-    }
-    return /* @__PURE__ */ React4.createElement(TextAncestorProvider, null, /* @__PURE__ */ React4.createElement(import_overlays.OverlayProvider, null, /* @__PURE__ */ React4.createElement(import_react_native_safe_area_context.SafeAreaProvider, {
-      initialMetrics: initialWindowMetrics ?? defaultMetrics
-    }, /* @__PURE__ */ React4.createElement(ThemeProvider, __spreadValues(__spreadValues({}, themeProps), themePropsProvider), /* @__PURE__ */ React4.createElement(React4.Suspense, {
-      fallback: fallback || null
-    }, children)))));
-  }, "TamaguiProvider");
-}
-__name(createTamaguiProvider, "createTamaguiProvider");
-
-// src/hooks/useMedia.tsx
-var import_react9 = __toModule(require("react"));
-
-// src/helpers/matchMedia.ts
-var matchMedia = typeof window !== "undefined" && window.matchMedia || /* @__PURE__ */ __name(function matchMediaFallback(query) {
-  return {
-    addListener() {
-    },
-    removeListener() {
-    },
-    matches: false
-  };
-}, "matchMediaFallback");
-
-// src/hooks/useForceUpdate.tsx
-var import_react8 = __toModule(require("react"));
-function useForceUpdate() {
-  const setState = (0, import_react8.useState)(0)[1];
-  const internal = (0, import_react8.useRef)();
-  if (!internal.current) {
-    internal.current = {
-      isMounted: true,
-      update: () => {
-        if (internal.current.isMounted) {
-          setState(Math.random());
-        }
-      }
-    };
-  }
-  (0, import_react8.useEffect)(() => {
-    return () => {
-      internal.current.isMounted = false;
-    };
-  }, []);
-  return internal.current.update;
-}
-__name(useForceUpdate, "useForceUpdate");
-
-// src/hooks/useMedia.tsx
-var mediaState = {};
-var mediaQueryListeners = {};
-var addMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
-  mediaQueryListeners[key] = mediaQueryListeners[key] || new Set();
-  mediaQueryListeners[key].add(cb);
-}, "addMediaQueryListener");
-var removeMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
-  mediaQueryListeners[key].delete(cb);
-}, "removeMediaQueryListener");
-var hasConfigured = false;
-var mediaQueryConfigObject = null;
-var mediaQueryConfig = new Proxy({}, {
-  get(target, key) {
-    if (!mediaQueryConfigObject) {
-      throw new Error(`Be sure to run configureMedia before accessing mediaQueryConfig`);
-    }
-    return Reflect.get(mediaQueryConfigObject, key);
-  },
-  ownKeys() {
-    if (!mediaQueryConfigObject) {
-      throw new Error(`Be sure to run configureMedia before accessing mediaQueryConfig`);
-    }
-    return Object.keys(mediaQueryConfigObject);
-  },
-  getOwnPropertyDescriptor() {
-    return {
-      enumerable: true,
-      configurable: true
-    };
-  }
-});
-var getMedia = /* @__PURE__ */ __name(() => {
-  if (!hasConfigured) {
-    throw new Error(`not configured yet`);
-  }
-  return mediaState;
-}, "getMedia");
-var configureMedia = /* @__PURE__ */ __name(({
-  queries,
-  defaultActive = ["sm", "xs"]
-} = {}) => {
-  if (hasConfigured) {
-    console.warn(`Already configured mediaQueries once (you may have called getMedia() before configureMedia())`);
-    return;
-  }
-  hasConfigured = true;
-  if (queries)
-    mediaQueryConfigObject = queries;
-  for (const key in queries) {
-    const str = mediaObjectToString(queries[key]);
-    try {
-      const getMatch = /* @__PURE__ */ __name(() => matchMedia(str), "getMatch");
-      const match = getMatch();
-      if (!match || typeof match.addListener !== "function") {
-        throw new Error("\u26A0\uFE0F No match (seeing this in RN sometimes)");
-      }
-      mediaState[key] = !!match.matches;
-      match.addListener(() => {
-        const next = !!getMatch().matches;
-        if (next === mediaState[key])
-          return;
-        mediaState[key] = next;
-        const listeners = mediaQueryListeners[key];
-        if (listeners == null ? void 0 : listeners.size) {
-          for (const cb of [...listeners]) {
-            cb();
-          }
-        }
-      });
-    } catch (err) {
-      console.error("Error running media query", str, err.message, err.stack);
-      const isDefaultActive = (defaultActive == null ? void 0 : defaultActive.includes(key)) ?? true;
-      mediaState[key] = isDefaultActive;
-    }
-  }
-}, "configureMedia");
-var useMedia = /* @__PURE__ */ __name(() => {
-  const forceUpdate = useForceUpdate();
-  const state = (0, import_react9.useRef)();
-  if (!state.current) {
-    state.current = {
-      selections: {},
-      nextSelections: {},
-      isUnmounted: false,
-      isRendering: true
-    };
-  }
-  state.current.isRendering = true;
-  useIsomorphicLayoutEffect(() => {
-    const st = state.current;
-    st.isRendering = false;
-    for (const key in st.selections) {
-      if (!(key in st.nextSelections)) {
-        removeMediaQueryListener(key, forceUpdate);
-      }
-    }
-    for (const key in st.nextSelections) {
-      if (!(key in st.selections)) {
-        addMediaQueryListener(key, forceUpdate);
-      }
-    }
-  });
-  useIsomorphicLayoutEffect(() => {
-    return () => {
-      const st = state.current;
-      st.isUnmounted = true;
-      const allKeys = __spreadValues(__spreadValues({}, st.selections), st.nextSelections);
-      for (const key in allKeys) {
-        removeMediaQueryListener(key, forceUpdate);
-      }
-    };
-  }, []);
-  return useConstant(() => {
-    const st = state.current;
-    return new Proxy(mediaState, {
-      get(target, key) {
-        if (!(key in mediaState)) {
-          return Reflect.get(target, key);
-        }
-        if (!st.isUnmounted) {
-          if (st.isRendering) {
-            st.nextSelections[key] = true;
-          }
-        }
-        if (key in mediaState) {
-          return mediaState[key];
-        }
-        return Reflect.get(mediaState, key);
-      }
-    });
-  });
-}, "useMedia");
-function camelToHyphen(str) {
-  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase();
-}
-__name(camelToHyphen, "camelToHyphen");
-function mediaObjectToString(query) {
-  if (typeof query === "string") {
-    return query;
-  }
-  return Object.entries(query).map(([feature, value]) => {
-    feature = camelToHyphen(feature);
-    if (typeof value === "string") {
-      return `(${feature}: ${value})`;
-    }
-    if (typeof value === "number" && /[height|width]$/.test(feature)) {
-      value = `${value}px`;
-    }
-    return `(${feature}: ${value})`;
-  }).join(" and ");
-}
-__name(mediaObjectToString, "mediaObjectToString");
-
-// src/createTamagui.ts
-var conf;
-var getHasConfigured = /* @__PURE__ */ __name(() => !!conf, "getHasConfigured");
-var getTamaguiConfig = /* @__PURE__ */ __name(() => conf, "getTamaguiConfig");
-var configListeners = new Set();
-var onConfiguredOnce = /* @__PURE__ */ __name((cb) => {
-  if (conf) {
-    cb(conf);
-  } else {
-    configListeners.add(cb);
-  }
-}, "onConfiguredOnce");
-var THEME_CLASS_PREFIX = `theme--`;
-function createTamagui(config) {
-  if (conf) {
-    throw new Error(`#000 createTamagui called twice`);
-  }
-  configureMedia({
-    queries: config.media,
-    defaultActive: config.mediaQueryDefaultActive
-  });
-  const themeConfig = (() => {
-    let cssRules = [];
-    let tokenRule = `html {`;
-    const varsByValue = new Map();
-    for (const key in config.tokens) {
-      for (const skey in config.tokens[key]) {
-        const v = config.tokens[key][skey];
-        varsByValue[v.val] = v;
-        tokenRule += `--${v.name}:${typeof v.val === "number" ? `${v.val}px` : v.val};`;
-      }
-    }
-    cssRules.push(`${tokenRule}
-}`);
-    for (const themeName in config.themes) {
-      const theme = config.themes[themeName];
-      let vars = "";
-      for (const themeKey in theme) {
-        const val = theme[themeKey];
-        const getVariableCSS = /* @__PURE__ */ __name((inv) => {
-          const v = varsByValue[inv] ?? inv;
-          return isVariable(v) ? `--${themeKey}:var(--${v.name});` : `--${themeKey}:${v};`;
-        }, "getVariableCSS");
-        vars += getVariableCSS(val);
-        if (!isVariable(val)) {
-          theme[themeKey] = createVariable({
-            name: themeKey,
-            val
-          });
-        }
-      }
-      cssRules.push(`.${THEME_CLASS_PREFIX}${themeName} {
-${vars}
-}`);
-    }
-    Object.freeze(cssRules);
-    return {
-      cssRules,
-      css: cssRules.join("\n")
-    };
-  })();
-  const tokensParsed = {};
-  for (const key in config.tokens) {
-    tokensParsed[key] = {};
-    for (const skey in config.tokens[key]) {
-      tokensParsed[key][`$${skey}`] = config.tokens[key][skey];
-    }
-  }
-  const themeParsed = {};
-  const firstKey = Object.keys(config.themes)[0];
-  for (const key in config.themes[firstKey]) {
-    themeParsed[`$${key}`] = config.themes[firstKey][key];
-  }
-  const next = __spreadProps(__spreadValues({}, config), {
-    TamaguiProvider: createTamaguiProvider(__spreadValues({
-      defaultTheme: "light"
-    }, config)),
-    themeConfig,
-    themeParsed,
-    tokensParsed
-  });
-  conf = next;
-  if (configListeners.size) {
-    configListeners.forEach((cb) => cb(next));
-    configListeners.clear();
-  }
-  return next;
-}
-__name(createTamagui, "createTamagui");
-function getThemeParentClassName(themeName) {
-  return `theme-parent ${themeName ? `${THEME_CLASS_PREFIX}${themeName}` : ""}`;
-}
-__name(getThemeParentClassName, "getThemeParentClassName");
-
-// src/helpers/addStylesUsingClassname.tsx
-var import_helpers2 = __toModule(require("@tamagui/helpers"));
-
-// src/helpers/insertStyleRule.tsx
-function insertStyleRule(rule) {
-  if (typeof window === "undefined") {
-    return;
-  }
-  const sheet = window.document.styleSheets[0];
-  if (!sheet) {
-    return;
-  }
-  sheet.insertRule(rule, sheet.cssRules.length);
-}
-__name(insertStyleRule, "insertStyleRule");
-
-// src/helpers/addStylesUsingClassname.tsx
-var added = {};
-function addStylesUsingClassname(styles) {
-  let className = "";
-  for (const style of styles.flat()) {
-    if (!style)
-      continue;
-    for (const { identifier, rules } of (0, import_helpers2.getStylesAtomic)(style)) {
-      className += ` ${identifier}`;
-      if (added[identifier]) {
-        continue;
-      }
-      added[identifier] = true;
-      for (const rule of rules) {
-        insertStyleRule(rule);
-      }
-    }
-  }
-  return className;
-}
-__name(addStylesUsingClassname, "addStylesUsingClassname");
-
-// src/helpers/extendStaticConfig.ts
-function extendStaticConfig(Component, config = {}) {
-  if (process.env.TARGET === "client") {
-    return null;
-  }
-  const a = Component;
-  if (!a.staticConfig) {
-    a.staticConfig = {};
-  }
-  return parseStaticConfig({
-    variants: config.variants,
-    isText: config.isText || a.staticConfig.isText || false,
-    neverFlatten: config.neverFlatten ?? a.staticConfig.neverFlatten,
-    ensureOverriddenProp: config.ensureOverriddenProp ?? a.staticConfig.ensureOverriddenProp,
-    validStyles: __spreadValues(__spreadValues({}, a.staticConfig.validStyles), config.validStyles),
-    validPropsExtra: __spreadValues(__spreadValues({}, a.staticConfig.validPropsExtra), config.validPropsExtra),
-    defaultProps: __spreadValues(__spreadValues({}, a.staticConfig.defaultProps), config.defaultProps)
-  });
-}
-__name(extendStaticConfig, "extendStaticConfig");
-function parseStaticConfig(c) {
-  const variants = c.variants;
-  let variantsParsed;
-  return __spreadProps(__spreadValues({}, c), {
-    parsed: true,
-    propMapper(key, value, theme) {
-      const conf2 = getTamaguiConfig();
-      if (!conf2) {
-        console.trace("err");
-        return;
-      }
-      if (variants && !variantsParsed) {
-        variantsParsed = parseVariants(variants, conf2);
-      }
-      const variant = variantsParsed == null ? void 0 : variantsParsed[key];
-      if (variant) {
-        const tokenKey = typeof value === "string" && value[0] === "$" ? value.slice(1) : value;
-        const val = variant[tokenKey] ?? value;
-        if (typeof val !== "undefined") {
-          if (typeof val === "function") {
-            const res = val(tokenKey, conf2);
-            if (res) {
-              for (const key2 in res) {
-                const finalKey = conf2.shorthands[key2] || key2;
-                if (key2 !== finalKey) {
-                  delete res[key2];
-                }
-                const resVal = isVariable(res[key2]) ? res[key2].variable : res[key2];
-                const finalValue = resVal[0] === "$" ? getToken(finalKey, resVal, conf2) : value;
-                console.log("dun", finalKey, finalValue);
-                res[finalKey] = finalValue;
-              }
-            }
-            console.warn("no res", res);
-            return res;
-          }
-          console.warn("this should probably just be an obj", val);
-          return val;
-        }
-      }
-      let shouldReturn = false;
-      if (conf2.shorthands[key]) {
-        shouldReturn = true;
-        key = conf2.shorthands[key];
-      }
-      if (value && value[0] === "$") {
-        shouldReturn = true;
-        value = getToken(key, value, conf2);
-      }
-      if (shouldReturn) {
-        return {
-          [key]: value
-        };
-      }
-    }
-  });
-}
-__name(parseStaticConfig, "parseStaticConfig");
-var getToken = /* @__PURE__ */ __name((key, value, { tokensParsed, themeParsed }) => {
-  var _a4;
-  if (themeParsed[value]) {
-    return themeParsed[value].variable;
-  }
-  for (const cat in tokenCategories) {
-    if (tokenCategories[cat][key]) {
-      const res = tokensParsed[cat][value];
-      if (res) {
-        return res.variable;
-      } else {
-        return themeParsed[value].variable;
-      }
-    }
-  }
-  return ((_a4 = tokensParsed.space[key]) == null ? void 0 : _a4[value].variable) ?? value;
-}, "getToken");
-var tokenCategories = {
-  size: {
-    width: true,
-    height: true,
-    minWidth: true,
-    minHeight: true,
-    maxWidth: true,
-    maxHeight: true
-  },
-  font: {
-    fontFamily: true
-  },
-  fontSize: {
-    fontSize: true
-  },
-  lineHeight: {
-    lineHeight: true
-  },
-  color: {
-    color: true,
-    backgroundColor: true,
-    borderColor: true,
-    borderBottomColor: true,
-    borderTopColor: true,
-    borderLeftColor: true,
-    borderRightColor: true
-  }
-};
-function parseVariants(variants, conf2) {
-  return Object.keys(variants).reduce((acc, key) => {
-    acc[key] = Object.keys(variants[key]).reduce((vacc, vkey) => {
-      if (vkey.startsWith("...")) {
-        const tokenKey = vkey.slice(3);
-        const tokens = conf2.tokens[tokenKey];
-        for (const tkey in tokens) {
-          vacc[tkey] = variants[key][vkey];
-        }
-      } else {
-        vacc[vkey] = variants[key][vkey];
-      }
-      return vacc;
-    }, {});
-    return acc;
-  }, {});
-}
-__name(parseVariants, "parseVariants");
-
-// src/helpers/getSplitStyles.tsx
-var import_helpers3 = __toModule(require("@tamagui/helpers"));
-
-// src/helpers/createMediaStyle.ts
-var MEDIA_SEP = "_";
-var createMediaStyle = /* @__PURE__ */ __name(({ identifier, rules }, mediaKey, mediaQueries, negate, importance = 0) => {
-  const mediaKeys = Object.keys(mediaQueries);
-  const mediaKeyPrecendence = mediaKeys.reduce((acc, cur, i) => {
-    acc[cur] = new Array(importance + 1).fill(":root").join("");
-    return acc;
-  }, {});
-  const negKey = negate ? "0" : "";
-  const ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1);
-  const nextIdentifier = `${identifier.replace(ogPrefix, `${ogPrefix}${MEDIA_SEP}${mediaKey}${negKey}${MEDIA_SEP}`)}`;
-  const screenStr = negate ? "not all" : "screen";
-  const mediaSelector = mediaObjectToString(mediaQueries[mediaKey]);
-  const mediaQuery = `${screenStr} and ${mediaSelector}`;
-  const precendencePrefix = mediaKeyPrecendence[mediaKey];
-  const styleInner = rules[0].replace(identifier, nextIdentifier);
-  let styleRule = "";
-  if (styleInner.includes("@media")) {
-    styleRule = styleInner.replace("{", ` and ${mediaQuery} {`);
-  } else {
-    styleRule = `@media ${mediaQuery} { ${precendencePrefix} ${styleInner} }`;
-  }
-  return {
-    styleRule,
-    identifier: nextIdentifier
-  };
-}, "createMediaStyle");
-
-// src/helpers/fixNativeShadow.tsx
-var defaultShadowOffset = {
-  width: 0,
-  height: 0
-};
-var matchRgba = /rgba\(\s*([\d\.]{1,})\s*,\s*([\d\.]{1,})\s*,\s*([\d\.]{1,})\s*,\s*([\d\.]{1,})\s*\)$/;
-function fixNativeShadow(props, merge = false) {
-  let res = merge ? props : {};
-  if (props.shadowColor) {
-    res.shadowColor = props.shadowColor;
-    if (!("shadowOffset" in props)) {
-      res.shadowOffset = defaultShadowOffset;
-    }
-    if (!("shadowOpacity" in props)) {
-      res.shadowOpacity = 1;
-      const color = String(res.shadowColor).trim();
-      if (color[0] === "r" && color[3] === "a") {
-        const [_, r, g, b, a] = color.match(matchRgba) ?? [];
-        if (typeof a !== "string") {
-          console.warn("non valid rgba", color);
-          return props;
-        }
-        res.shadowColor = `rgb(${r},${g},${b})`;
-        res.shadowOpacity = +a;
-      } else {
-        res.shadowOpacity = 1;
-      }
-    }
-  }
-  return res;
-}
-__name(fixNativeShadow, "fixNativeShadow");
-
-// src/helpers/getSplitStyles.tsx
-var getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, internalConfig) => {
-  const validStyleProps = staticConfig.isText ? import_helpers3.stylePropsText : import_helpers3.validStyles;
-  const viewProps = {};
-  const style = [];
-  let psuedos = null;
-  let cur = null;
-  let classNames = null;
-  for (const keyInit in props) {
-    const valInit = props[keyInit];
-    if (keyInit[0] === "$") {
-      const mediaKey = keyInit.slice(1);
-      if (!mediaQueryConfig[mediaKey]) {
-        viewProps[keyInit] = valInit;
-        continue;
-      }
-      const mediaProps = __spreadValues(__spreadValues({}, props), valInit);
-      const mediaStyle = getSubStyle(valInit, mediaProps, staticConfig, internalConfig);
-      const mediaStyles = (0, import_helpers3.getStylesAtomic)(mediaStyle);
-      for (const style2 of mediaStyles) {
-        const out2 = createMediaStyle(style2, mediaKey, mediaQueryConfig);
-        classNames = classNames || [];
-        classNames.push(out2.identifier);
-        insertStyleRule(out2.styleRule);
-        if (process.env.NODE_ENV === "development") {
-          if (props["debug"])
-            console.log("mediaProp", style2.identifier, out2, mediaProps, mediaStyle, mediaStyles);
-        }
-      }
-      continue;
-    }
-    const isPseudo = keyInit === "hoverStyle" || keyInit === "pressStyle" || keyInit === "focusStyle";
-    if (isPseudo) {
-      if (!valInit)
-        continue;
-      psuedos = psuedos || {};
-      psuedos[keyInit] = getSubStyle(valInit, props, staticConfig, internalConfig);
-      continue;
-    }
-    const out = staticConfig.propMapper(keyInit, valInit, props);
-    const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out);
-    for (const [key, val] of expanded) {
-      const keyFirstChar = key[0];
-      if (key === "style" || keyFirstChar === "_" && key.startsWith("_style")) {
-        if (cur) {
-          fixNativeShadow(cur, true);
-          style.push(cur);
-          cur = null;
-        }
-        fixNativeShadow(val, true);
-        style.push(val);
-        continue;
-      }
-      if (key === "flex") {
-        cur = cur || {};
-        Object.assign(cur, {
-          flexGrow: val,
-          flexShrink: 1
-        });
-        continue;
-      }
-      if (!isWeb && key === "pointerEvents") {
-        viewProps[key] = val;
-        continue;
-      }
-      if (validStyleProps[key]) {
-        if (key in import_helpers3.stylePropsTransform) {
-          cur = cur || {};
-          mergeTransform(cur, key, val);
-          continue;
-        }
-        cur = cur || {};
-        cur[key] = val;
-        continue;
-      }
-      if (!blacklistProps[key]) {
-        viewProps[key] = val;
-      }
-    }
-  }
-  if (cur) {
-    fixNativeShadow(cur, true);
-    style.push(cur);
-  }
-  if (process.env.NODE_ENV === "development") {
-    if (props["debug"]) {
-      console.log(" style debug:", { props, viewProps, style }, getMedia());
-    }
-  }
-  return {
-    viewProps,
-    style,
-    psuedos,
-    classNames
-  };
-}, "getSplitStyles");
-var getSubStyle = /* @__PURE__ */ __name((styleIn, props, staticConfig, internalConfig) => {
-  const styleOut = {};
-  for (const key in styleIn) {
-    const val = styleIn[key];
-    const out = staticConfig.propMapper(key, val, props);
-    const expanded = out === true || !out ? [[key, val]] : Object.entries(out);
-    for (const [skey, sval] of expanded) {
-      if (skey in import_helpers3.stylePropsTransform) {
-        mergeTransform(styleOut, skey, sval);
-      } else {
-        styleOut[skey] = sval;
-      }
-    }
-  }
-  fixNativeShadow(styleOut, true);
-  return styleOut;
-}, "getSubStyle");
-var blacklistProps = __spreadValues(__spreadValues({
-  debug: true,
-  onPress: true,
-  spacing: true,
-  hitSlop: true
-}, import_helpers3.validStyles), import_helpers3.stylePropsText);
-var mapTransformKeys = {
-  x: "translateX",
-  y: "translateY"
-};
-var mergeTransform = /* @__PURE__ */ __name((obj, key, val) => {
-  const transform = obj.transform ? Array.isArray(obj.transform) ? obj.transform : [obj.transform] : [];
-  transform.push({ [mapTransformKeys[key] || key]: val });
-  obj.transform = transform;
-}, "mergeTransform");
-
-// src/helpers/setIfChanged.tsx
-var import_fast_compare = __toModule(require("@dish/fast-compare"));
-var setIfChanged = /* @__PURE__ */ __name((setter, next) => {
-  setter((prev) => {
-    console.log("should test if this is the right way to check, merge objects??");
-    const n = __spreadValues(__spreadValues({}, prev), next);
-    if ((0, import_fast_compare.isEqual)(prev, n)) {
-      return prev;
-    }
-    return n;
-  });
-}, "setIfChanged");
-
-// src/hooks/useFeatures.tsx
-var import_react10 = __toModule(require("react"));
-var createDefinition = /* @__PURE__ */ __name(({ Component, propNames }) => ({
-  isEnabled: (props) => propNames.some((name) => !!props[name]),
-  Component
-}), "createDefinition");
-var mediaQueryPropNames = [
-  "$xs",
-  "$sm",
-  "$md",
-  "$lg",
-  "$xl",
-  "$xxl",
-  "$pointerCoarse",
-  "$hoverNone",
-  "$tall",
-  "$short",
-  "$gtSm",
-  "$notXs",
-  "$gtMd",
-  "$gtLg"
-];
-var featureDefinitions = {
-  measureLayout: createDefinition({
-    Component: (props) => {
-      console.log("measure", props);
-      return null;
-    },
-    propNames: ["onLayout"]
-  }),
-  mediaQuery: createDefinition({
-    Component: (props) => {
-      if (isWeb) {
-        return;
-      }
-      const keys = mediaQueryPropNames.flatMap((x) => x in props ? x.slice(1) : []);
-      useIsomorphicLayoutEffect(() => {
-        for (const key of keys) {
-          addMediaQueryListener(key, props._utils.forceUpdate);
-        }
-        return () => {
-          for (const key of keys) {
-            removeMediaQueryListener(key, props._utils.forceUpdate);
-          }
-        };
-      }, [keys.join(",")]);
-      return null;
-    },
-    propNames: mediaQueryPropNames
-  })
-};
-var featureNames = Object.keys(featureDefinitions);
-var numFeatures = featureNames.length;
-var useFeatures = /* @__PURE__ */ __name((props, utils) => {
-  const features = [];
-  for (let i = 0; i < numFeatures; i++) {
-    const name = featureNames[i];
-    const { isEnabled, Component } = featureDefinitions[name];
-    if (isEnabled(props) && Component) {
-      features.push(/* @__PURE__ */ import_react10.default.createElement(Component, __spreadProps(__spreadValues({
-        key: name
-      }, props), {
-        _utils: utils
-      })));
-    }
-  }
-  return features;
-}, "useFeatures");
-
-// src/hooks/usePressable.tsx
-var import_react_native4 = __toModule(require("react-native"));
-var _a3, _b;
-var getPressable = (_b = (_a3 = import_react_native4.Pressable) == null ? void 0 : _a3["type"]) == null ? void 0 : _b["render"];
-var usePressable = /* @__PURE__ */ __name((props) => {
-  const out = getPressable(props);
-  const _a4 = out.props, { children, style } = _a4, pressableProps = __objRest(_a4, ["children", "style"]);
-  return [pressableProps, style];
-}, "usePressable");
-
-// src/createComponent.tsx
-var mouseUps = new Set();
-if (typeof document !== "undefined") {
-  document.addEventListener("mouseup", () => {
-    mouseUps.forEach((x) => x());
-    mouseUps.clear();
-  });
-}
-function createComponent(configIn) {
-  let staticConfig;
-  if ("parsed" in configIn) {
-    staticConfig = configIn;
-  } else {
-    staticConfig = parseStaticConfig(configIn);
-  }
-  const { defaultProps, Component, validStyles: validStyles3, isText } = staticConfig;
-  const validStyleProps = validStyles3 ?? import_helpers4.stylePropsView;
-  let splitDefaults;
-  let tamaguiConfig;
-  let defaultsClassName = "";
-  onConfiguredOnce((conf2) => {
-    tamaguiConfig = conf2;
-    splitDefaults = getSplitStyles(defaultProps, staticConfig, conf2);
-    if (splitDefaults.classNames) {
-      defaultsClassName += splitDefaults.classNames + " ";
-    }
-    if (splitDefaults.style) {
-      defaultsClassName += addStylesUsingClassname([splitDefaults.style]);
-    }
-  });
-  const component = (0, import_react11.forwardRef)((props, forwardedRef) => {
-    const {
-      tag,
-      hitSlop,
-      children,
-      pointerEvents,
-      onPress,
-      onPressIn,
-      onPressOut,
-      onHoverIn,
-      onHoverOut,
-      spacing,
-      disabled,
-      onMouseEnter,
-      onMouseLeave,
-      hrefAttrs,
-      onMoveShouldSetResponder,
-      onMoveShouldSetResponderCapture,
-      onResponderEnd,
-      onResponderGrant,
-      onResponderMove,
-      onResponderReject,
-      onResponderRelease,
-      onResponderStart,
-      onResponderTerminate,
-      onResponderTerminationRequest,
-      onScrollShouldSetResponder,
-      onScrollShouldSetResponderCapture,
-      onSelectionChangeShouldSetResponder,
-      onSelectionChangeShouldSetResponderCapture,
-      onStartShouldSetResponder,
-      onStartShouldSetResponderCapture,
-      onMouseDown,
-      onClick,
-      onLayout
-    } = props;
-    const forceUpdate = useForceUpdate();
-    const features = useFeatures(props, { forceUpdate });
-    const manager = (0, import_react11.useContext)(ThemeManagerContext);
-    const [state, set_] = (0, import_react11.useState)(() => ({
-      hover: false,
-      press: false,
-      pressIn: false,
-      theme: manager.name
-    }));
-    const set = setIfChanged.bind(null, set_);
-    if (process.env.NODE_ENV !== "production" && !isText && isWeb) {
-      import_react11.Children.toArray(props.children).forEach((item) => {
-        if (typeof item === "string") {
-          console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`);
-        }
-      });
-    }
-    const hasTextAncestor = (0, import_react11.useContext)(TextAncestorContext);
-    const hostRef = (0, import_react11.useRef)(null);
-    if (isWeb) {
-      rnw.useResponderEvents(hostRef, {
-        onMoveShouldSetResponder,
-        onMoveShouldSetResponderCapture,
-        onResponderEnd,
-        onResponderGrant,
-        onResponderMove,
-        onResponderReject,
-        onResponderRelease,
-        onResponderStart,
-        onResponderTerminate,
-        onResponderTerminationRequest,
-        onScrollShouldSetResponder,
-        onScrollShouldSetResponderCapture,
-        onSelectionChangeShouldSetResponder,
-        onSelectionChangeShouldSetResponderCapture,
-        onStartShouldSetResponder,
-        onStartShouldSetResponderCapture
-      });
-    }
-    const isTracking = (0, import_react11.useRef)(false);
-    const { viewProps, psuedos, style, classNames } = getSplitStyles(props, staticConfig, tamaguiConfig);
-    const internal = (0, import_react11.useRef)();
-    if (!internal.current) {
-      internal.current = {
-        isMounted: true
-      };
-    }
-    (0, import_react11.useEffect)(() => {
-      internal.current.isMounted = true;
-      const dispose = manager == null ? void 0 : manager.onChangeTheme((name) => {
-        if (isTracking.current) {
-          set({ theme: name });
-        }
-      });
-      return () => {
-        dispose();
-        mouseUps.delete(unPress);
-        isTracking.current = false;
-        internal.current.isMounted = false;
-      };
-    }, [manager]);
-    const element = isWeb ? !Component || typeof Component === "string" ? tag || Component : Component : Component;
-    const ReactView = !isWeb ? import_react_native5.View : element || (hasTextAncestor ? "span" : "div");
-    const ReactText = !isWeb ? Text : element || "span";
-    const ViewComponent = isText ? ReactText : ReactView;
-    const numberOfLines = props["numberOfLines"];
-    const selectable = props["selectable"];
-    const styles = [
-      hasTextAncestor ? viewStyles.inline : null,
-      ...isWeb && isText ? [
-        numberOfLines != null && numberOfLines > 1 && { WebkitLineClamp: numberOfLines },
-        selectable === true && textStyles.selectable,
-        selectable === false && textStyles.notSelectable,
-        onPress && textStyles.pressable
-      ] : [],
-      style,
-      !isTouchDevice && !disabled && psuedos && state.hover ? psuedos.hoverStyle || null : null,
-      !disabled && psuedos && state.press ? psuedos.pressStyle || null : null,
-      disabled ? disabledStyle : null
-    ];
-    const stylesClassNames = addStylesUsingClassname(styles);
-    const classList = staticConfig.isText ? [
-      defaultsClassName,
-      hasTextAncestor === true && cssText.textHasAncestor,
-      numberOfLines === 1 && cssText.textOneLine,
-      numberOfLines != null && numberOfLines > 1 && cssText.textMultiLine,
-      props.className,
-      classNames,
-      stylesClassNames
-    ] : [defaultsClassName, props.className, classNames, stylesClassNames];
-    const supportedProps = viewProps;
-    if (isWeb) {
-      const classListFlat = classList.flat().filter(Boolean).join(" ");
-      const className = (0, import_helpers4.concatClassName)(classListFlat);
-      if (process.env.NODE_ENV === "development") {
-        if (props["debug"]) {
-          console.log("className", { styles, stylesClassNames, classList, classListFlat, className });
-        }
-      }
-      supportedProps.className = className;
-    } else {
-      supportedProps.style = classList;
-    }
-    if (pointerEvents) {
-      supportedProps.pointerEvents = pointerEvents;
-    }
-    if (isWeb) {
-      const platformMethodsRef = rnw.usePlatformMethods(supportedProps);
-      const setRef = rnw.useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
-      supportedProps.ref = setRef;
-      if (props.href != null && hrefAttrs != null) {
-        const { download, rel, target } = hrefAttrs;
-        if (download != null) {
-          supportedProps.download = download;
-        }
-        if (rel != null) {
-          supportedProps.rel = rel;
-        }
-        if (typeof target === "string") {
-          supportedProps.target = target.charAt(0) !== "_" ? "_" + target : target;
-        }
-      }
-    } else {
-      if (forwardedRef) {
-        supportedProps.ref = forwardedRef;
-      }
-    }
-    const createEl = import_react11.createElement;
-    const attachPress = !!(psuedos && psuedos.pressStyle || onPress || onPressOut || onPressIn);
-    const attachHover = isWeb && !isTouchDevice && !!(psuedos && psuedos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
-    const shouldAttach = internal.current.hasEverHadEvents || attachPress || attachHover || "pressStyle" in props || "onPress" in props || "onPressIn" in props || "onPressOut" in props || isWeb && ("hoverStyle" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props);
-    if (shouldAttach) {
-      internal.current.hasEverHadEvents = true;
-    }
-    const unPress = (0, import_react11.useCallback)(() => {
-      if (!internal.current.isMounted)
-        return;
-      set({
-        press: false,
-        pressIn: false
-      });
-    }, []);
-    const events = shouldAttach ? __spreadProps(__spreadValues(__spreadValues({}, !isWeb && {
-      onPressOut: (e) => {
-        unPress();
-        onPressOut == null ? void 0 : onPressOut(e);
-      }
-    }), isWeb && !isTouchDevice && {
-      onMouseEnter: attachHover || attachPress ? (e) => {
-        let next = {};
-        if (attachHover) {
-          next.hover = true;
-        }
-        if (state.pressIn) {
-          next.press = true;
-        }
-        if (Object.keys(next).length) {
-          set(next);
-        }
-        onHoverIn == null ? void 0 : onHoverIn(e);
-        onMouseEnter == null ? void 0 : onMouseEnter(e);
-      } : void 0,
-      onMouseLeave: attachHover || attachPress ? (e) => {
-        let next = {};
-        mouseUps.add(unPress);
-        if (attachHover) {
-          next.hover = false;
-        }
-        if (state.pressIn) {
-          next.press = false;
-          next.pressIn = false;
-        }
-        if (Object.keys(next).length) {
-          set(next);
-        }
-        onHoverOut == null ? void 0 : onHoverOut(e);
-        onMouseLeave == null ? void 0 : onMouseLeave(e);
-      } : void 0
-    }), {
-      onMouseDown: attachPress ? (e) => {
-        set({
-          press: true,
-          pressIn: true
-        });
-        onPressIn == null ? void 0 : onPressIn(e);
-        onMouseDown == null ? void 0 : onMouseDown(e);
-      } : onPressIn,
-      onClick: attachPress ? (e) => {
-        e.preventDefault();
-        unPress();
-        onPressOut == null ? void 0 : onPressOut(e);
-        onPress == null ? void 0 : onPress(e);
-        onClick == null ? void 0 : onClick(e);
-      } : onPressOut
-    }) : null;
-    if (events) {
-      if (typeof ViewComponent !== "string") {
-        const [pressProps] = usePressable({
-          disabled,
-          hitSlop,
-          onPressIn: events.onMouseDown,
-          onPressOut: events.onPressOut,
-          onPress
-        });
-        Object.assign(supportedProps, pressProps);
-      } else {
-        Object.assign(supportedProps, events);
-      }
-    }
-    const spacedChildrenEl = spacedChildren({
-      children,
-      spacing,
-      flexDirection: props.flexDirection || (defaultProps == null ? void 0 : defaultProps.flexDirection)
-    });
-    let content = createEl(ViewComponent, supportedProps, spacedChildrenEl);
-    const shouldWrapTextAncestor = isWeb && staticConfig.isText && !hasTextAncestor;
-    if (shouldWrapTextAncestor) {
-      content = (0, import_react11.createElement)(TextAncestorContext.Provider, { value: true }, content);
-    }
-    if (process.env.NODE_ENV === "development") {
-      if (props["debug"]) {
-        supportedProps["debug"] = true;
-        console.log(" \u{1F351}  props in: ", props);
-        console.log(" \u{1F351} props out: ", supportedProps);
-        console.log(" \u{1F351}     other: ", { ViewComponent, viewProps, styles, psuedos, createEl, content, spacedChildrenEl, staticConfig, splitDefaults, tamaguiConfig });
-      }
-    }
-    return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, features, content);
-  });
-  const config = __spreadProps(__spreadValues({
-    validStyles: validStyleProps
-  }, staticConfig), {
-    validPropsExtra: __spreadProps(__spreadValues({}, staticConfig.validPropsExtra), {
-      disabled: true,
-      fullscreen: true
-    })
-  });
-  component["staticConfig"] = config;
-  return component;
-}
-__name(createComponent, "createComponent");
-var Spacer = createComponent({
-  defaultProps: stackDefaultStyles,
-  variants: {
-    size: {
-      "...size": (size, { tokens }) => {
-        return {
-          width: tokens.size[size] ?? size,
-          height: tokens.size[size] ?? size
-        };
-      }
-    },
-    direction: {
-      horizontal: {
-        height: 0
-      },
-      vertical: {
-        width: 0
-      }
-    }
-  }
-});
-function spacedChildren({
-  children,
-  spacing,
-  flexDirection
-}) {
-  if (!spacing) {
-    return children;
-  }
-  const next = [];
-  const childrenList = import_react11.Children.toArray(children);
-  const len = childrenList.length;
-  if (len === 1) {
-    return children;
-  }
-  const spacer = /* @__PURE__ */ import_react11.default.createElement(Spacer, {
-    direction: flexDirection === "row" || flexDirection === "row-reverse" ? "horizontal" : "vertical",
-    size: spacing
-  });
-  for (const [index, child] of childrenList.entries()) {
-    next.push(child);
-    if (index === len - 1) {
-      break;
-    }
-    const key = `${(child == null ? void 0 : child["key"]) ?? index}`;
-    next.push((0, import_react11.createElement)(import_react11.Fragment, { key: key + "_spacer" }, spacer));
-  }
-  return next;
-}
-__name(spacedChildren, "spacedChildren");
-
-// src/createShorthands.ts
-function createShorthands(shorthands) {
-  return Object.freeze(shorthands);
-}
-__name(createShorthands, "createShorthands");
-
-// src/createTokens.ts
-function createTokens(tokens) {
-  return setupTokens(tokens);
-}
-__name(createTokens, "createTokens");
-function setupTokens(tokens) {
-  return mapTokensToVariables(tokens);
-}
-__name(setupTokens, "setupTokens");
-var mapTokensToVariables = /* @__PURE__ */ __name((tokens, parentPath = "") => {
-  const res = {};
-  for (const key in tokens) {
-    const val = tokens[key];
-    const name = parentPath ? `${parentPath}-${key}` : key;
-    if (val && typeof val === "object") {
-      res[key] = mapTokensToVariables(tokens[key], name);
-    } else {
-      res[key] = createVariable({ val, name });
-    }
-  }
-  return res;
-}, "mapTokensToVariables");
-
-// src/views/Stack.tsx
-var Stack = createComponent({
-  defaultProps: __spreadProps(__spreadValues({}, stackDefaultStyles), {
-    flexDirection: "row"
-  })
-});
-
-// src/views/Text.tsx
-var Text2 = createComponent({
-  isText: true,
-  defaultProps: cssTextStyles.text,
-  variants: {
-    selectable: {
-      true: {
-        userSelect: "text"
-      }
-    },
-    ellipse: {
-      true: isWeb ? {
-        display: "inline-block",
-        maxWidth: "100%",
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis"
-      } : {
-        numberOfLines: 1,
-        lineBreakMode: "clip"
-      }
-    }
-  },
-  deoptProps: new Set(isWeb ? [""] : ["ellipse"]),
-  validPropsExtra: {
-    textUnderlineOffset: true
-  },
-  validStyles: validStylesText
-});
-
-// src/styled.ts
-function styled(Component, _a4) {
-  var _b2 = _a4, {
-    variants
-  } = _b2, defaultProps = __objRest(_b2, [
-    "variants"
-  ]);
-  const staticConfig = Component == null ? void 0 : Component["staticConfig"];
-  const ParentComponent = staticConfig ? staticConfig.isText ? Text2 : Stack : Component;
-  const config = extendStaticConfig(ParentComponent, {
-    variants,
-    defaultProps
-  });
-  const component = createComponent(config);
-  Object.defineProperty(component, "name", {
-    value: `styled(${typeof Component === "string" ? Component : Component.constructor.name})`,
-    writable: false
-  });
-  return component;
-}
-__name(styled, "styled");
-
-// src/helpers/themeable.tsx
-var import_react14 = __toModule(require("react"));
-
-// src/views/ThemeInverse.tsx
-var import_react13 = __toModule(require("react"));
-
-// src/hooks/useTheme.tsx
-var import_fast_compare2 = __toModule(require("@dish/fast-compare"));
-var import_react12 = __toModule(require("react"));
-var useThemeName = /* @__PURE__ */ __name(() => {
-  const parent = (0, import_react12.useContext)(ThemeManagerContext);
-  const [name, setName] = (0, import_react12.useState)(parent.name);
-  (0, import_react12.useEffect)(() => {
-    return parent.onChangeTheme((next) => {
-      setName((prev) => {
-        if (prev === next)
-          return prev;
-        return next;
-      });
-    });
-  }, [parent]);
-  return name || "light";
-}, "useThemeName");
-var useDefaultThemeName = /* @__PURE__ */ __name(() => {
-  return (0, import_react12.useContext)(ThemeContext)[GET_DEFAULT_THEME];
-}, "useDefaultThemeName");
-var useTheme = /* @__PURE__ */ __name(() => {
-  const forceUpdate = useForceUpdate();
-  const manager = (0, import_react12.useContext)(ThemeManagerContext);
-  const themes = (0, import_react12.useContext)(ThemeContext);
-  const state = (0, import_react12.useRef)();
-  if (!state.current) {
-    state.current = {
-      uuid: {},
-      keys: new Set(),
-      isRendering: true
-    };
-  }
-  state.current.isRendering = true;
-  useIsomorphicLayoutEffect(() => {
-    const st = state.current;
-    st.isRendering = false;
-    if (!(0, import_fast_compare2.isEqual)(st.keys, manager.keys.get(st.uuid))) {
-      manager.track(st.uuid, st.keys);
-    }
-  });
-  (0, import_react12.useEffect)(() => {
-    return manager.onUpdate(state.current.uuid, forceUpdate);
-  }, []);
-  const theme = (manager.name ? themes[manager.name] : themes.light) ?? themes.light;
-  return (0, import_react12.useMemo)(() => {
-    return new Proxy(theme, {
-      get(_, key) {
-        const name = manager.name;
-        if (!name) {
-          return Reflect.get(_, key);
-        }
-        let activeTheme = themes[name];
-        if (!activeTheme) {
-          console.error("No theme by name", name, "only:", themes, "keeping current theme");
-          activeTheme = theme;
-        }
-        const val = activeTheme[key];
-        if (process.env.NODE_ENV === "development") {
-          if (typeof val === "undefined") {
-            if (typeof key === "string") {
-              try {
-                if (!activeTheme) {
-                  throw new Error(`No theme! ${name} in ${Object.keys(themes)}`);
-                }
-                if (!val) {
-                  throw new Error(`No theme value "${String(key)}" in: ${Object.keys(activeTheme)}`);
-                }
-              } catch (err) {
-                console.error(err.message, err.stack);
-              }
-            }
-          }
-          return Reflect.get(_, key);
-        }
-        if (state.current.isRendering) {
-          state.current.keys.add(key);
-        }
-        return val;
-      }
-    });
-  }, []);
-}, "useTheme");
-
-// src/views/ThemeInverse.tsx
-var inversions = {
-  light: "dark",
-  dark: "light"
-};
-function setThemeInversions(next) {
-  inversions = next;
-}
-__name(setThemeInversions, "setThemeInversions");
-var ThemeInverse = /* @__PURE__ */ __name((props) => {
-  const themeName = useThemeName();
-  const defaultTheme = useDefaultThemeName();
-  const name = inversions[themeName] || inversions[defaultTheme] || null;
-  console.log("todo fixme invert", { themeName, defaultTheme, next: name });
-  return /* @__PURE__ */ import_react13.default.createElement(Theme, {
-    name
-  }, props.children);
-}, "ThemeInverse");
-
-// src/helpers/themeable.tsx
-var themeable = /* @__PURE__ */ __name(function graphql(component) {
-  const withThemeComponent = (0, import_react14.forwardRef)(/* @__PURE__ */ __name(function WithTheme(_a4, ref) {
-    var _b2 = _a4, { themeInverse } = _b2, rest = __objRest(_b2, ["themeInverse"]);
-    const el = import_react14.default.createElement(component, __spreadProps(__spreadValues({}, rest), { ref }));
-    if (themeInverse) {
-      return /* @__PURE__ */ import_react14.default.createElement(ThemeInverse, null, el);
-    }
-    if (rest.theme) {
-      return /* @__PURE__ */ import_react14.default.createElement(Theme, {
-        name: rest.theme || null
-      }, el);
-    }
-    return el;
-  }, "WithTheme"));
-  const withTheme = withThemeComponent;
-  withTheme.displayName = `Themed(${(component == null ? void 0 : component.displayName) || (component == null ? void 0 : component.name) || "Anonymous"})`;
-  return withTheme;
-}, "graphql");
-
-// src/views/Animated.tsx
-var import_react15 = __toModule(require("react"));
-var import_react_native6 = __toModule(require("react-native"));
-var defaultAnimation = {
-  from: {
-    opacity: 0,
-    translateY: 12
-  },
-  to: {
-    opacity: 1,
-    translateY: 0
-  }
-};
-var styleKeys = {
-  opacity: true,
-  backgroundColor: true,
-  borderColor: true
-};
-var AnimatedStack = /* @__PURE__ */ __name((_a4) => {
-  var _b2 = _a4, {
-    animateState = "in",
-    animation = defaultAnimation,
-    velocity = 6,
-    children,
-    animated
-  } = _b2, props = __objRest(_b2, [
-    "animateState",
-    "animation",
-    "velocity",
-    "children",
-    "animated"
-  ]);
-  const driver = useConstant(() => {
-    return new import_react_native6.Animated.Value(0);
-  });
-  const animatedProps = (0, import_react15.useMemo)(() => {
-    if (!animated) {
-      return null;
-    }
-    const styleProps = {};
-    const transform = [];
-    for (const key in animation.from) {
-      const fromVal = animation.from[key];
-      const toVal = animation.to[key];
-      const interpolatedVal = driver.interpolate({
-        inputRange: [0, 1],
-        outputRange: [fromVal, toVal]
-      });
-      if (styleKeys[key]) {
-        styleProps[key] = interpolatedVal;
-      } else {
-        transform.push({
-          [key]: interpolatedVal
-        });
-      }
-    }
-    return __spreadValues({ transform }, styleProps);
-  }, [animated, animateState]);
-  useIsomorphicLayoutEffect(() => {
-    if (!animated) {
-      return;
-    }
-    import_react_native6.Animated.spring(driver, {
-      useNativeDriver: true,
-      velocity,
-      toValue: animateState === "in" ? 1 : 0
-    }).start();
-  }, [animated, animateState]);
-  const childrenMemo = (0, import_react15.useMemo)(() => children, [children]);
-  return /* @__PURE__ */ import_react15.default.createElement(Stack, __spreadValues(__spreadValues({
-    animated
-  }, props), animatedProps), childrenMemo);
-}, "AnimatedStack");
-//# sourceMappingURL=index.cjs.map