@tamagui/core 1.0.0-alpha.0

package/dist/index.cjs

@@ -0,0 +1,2125 @@
+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,
+  SafeAreaProvider: () => SafeAreaProvider,
+  Spacer: () => Spacer,
+  Stack: () => Stack,
+  Text: () => Text2,
+  TextAncestorContext: () => TextAncestorContext,
+  TextAncestorProvider: () => TextAncestorProvider,
+  Theme: () => Theme,
+  ThemeInverse: () => ThemeInverse,
+  ThemeProvider: () => ThemeProvider,
+  Variable: () => Variable,
+  addMediaQueryListener: () => addMediaQueryListener,
+  configureMedia: () => configureMedia,
+  createComponent: () => createComponent,
+  createFont: () => createFont,
+  createShorthands: () => createShorthands,
+  createTamagui: () => createTamagui,
+  createTheme: () => createTheme,
+  createTokens: () => createTokens,
+  createVariable: () => createVariable,
+  getHasConfigured: () => getHasConfigured,
+  getMedia: () => getMedia,
+  getStylesAtomic: () => getStylesAtomic,
+  getTamaguiConfig: () => getTamaguiConfig,
+  getThemeParentClassName: () => getThemeParentClassName,
+  isChrome: () => isChrome,
+  isObj: () => isObj,
+  isSSR: () => isSSR,
+  isTouchDevice: () => isTouchDevice,
+  isVariable: () => isVariable,
+  isWeb: () => isWeb,
+  isWebIOS: () => isWebIOS,
+  matchMedia: () => matchMedia,
+  mediaObjectToString: () => mediaObjectToString,
+  mediaQueryConfig: () => mediaQueryConfig,
+  mediaState: () => mediaState,
+  mouseUps: () => mouseUps,
+  onConfiguredOnce: () => onConfiguredOnce,
+  pseudos: () => pseudos,
+  removeMediaQueryListener: () => removeMediaQueryListener,
+  rnw: () => rnw,
+  setThemeInversions: () => setThemeInversions,
+  spacedChildren: () => spacedChildren,
+  stackDefaultStyles: () => stackDefaultStyles,
+  styled: () => styled,
+  supportsTouchWeb: () => supportsTouchWeb,
+  themeable: () => themeable,
+  useConstant: () => useConstant,
+  useDefaultThemeName: () => useDefaultThemeName,
+  useForceUpdate: () => useForceUpdate,
+  useIsomorphicLayoutEffect: () => useIsomorphicLayoutEffect,
+  useMedia: () => useMedia,
+  useTheme: () => useTheme,
+  useThemeName: () => useThemeName
+});
+
+// src/createComponent.tsx
+var import_helpers4 = __toModule(require("@tamagui/helpers"));
+var import_react12 = __toModule(require("react"));
+var import_react_native3 = __toModule(require("react-native"));
+
+// src/constants/platform.ts
+var import_react = __toModule(require("react"));
+var import_react_native = __toModule(require("react-native"));
+var _a;
+var isWeb = process.env.TAMAGUI_TARGET !== "web" ? false : ((_a = import_react_native.Platform) == null ? void 0 : _a.OS) === "web";
+var isSSR = isWeb && typeof window === "undefined";
+var useIsomorphicLayoutEffect = isSSR ? import_react.useEffect : import_react.useLayoutEffect;
+var isChrome = typeof navigator !== "undefined" && /Chrome/.test(navigator.userAgent || "");
+var supportsTouchWeb = typeof window !== "undefined" && "ontouchstart" in window;
+var isTouchDevice = !isWeb || supportsTouchWeb;
+var isWebIOS = isWeb && typeof navigator !== "undefined" && (/iPad|iPhone|iPod/.test(navigator.platform) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) && !window["MSStream"];
+
+// src/constants/constants.ts
+var stackDefaultStyles = __spreadValues({
+  alignItems: "stretch",
+  flexShrink: 0
+}, isWeb && {
+  display: "flex",
+  flexBasis: "auto",
+  boxSizing: "border-box"
+});
+
+// src/constants/rnw.tsx
+var interopRequire = /* @__PURE__ */ __name((src) => "default" in src ? src.default : src, "interopRequire");
+var rnw = {};
+if (process.env.IS_STATIC === "is_static") {
+  const createCompileableStyle = require("react-native-web/dist/cjs/exports/StyleSheet/createCompileableStyle");
+  const createReactDOMStyle = require("react-native-web/dist/cjs/exports/StyleSheet/createReactDOMStyle");
+  const i18Style = require("react-native-web/dist/cjs/exports/StyleSheet/i18nStyle");
+  const atomic = require("react-native-web/dist/cjs/exports/StyleSheet/compile").atomic;
+  Object.assign(rnw, {
+    createCompileableStyle,
+    createReactDOMStyle,
+    i18Style,
+    atomic
+  });
+} else if (process.env.TAMAGUI_TARGET === "web") {
+  Object.assign(rnw, interopRequire(require("react-native-web").TamaguiExports));
+}
+
+// src/createTamagui.ts
+var import_helpers = __toModule(require("@tamagui/helpers"));
+
+// src/createVariable.ts
+var Variable = class {
+  constructor({ val, name }) {
+    this.val = val;
+    this.name = name;
+    this.variable = isWeb ? `var(--${name})` : this.val;
+  }
+};
+__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 React4 = __toModule(require("react"));
+
+// 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, _b2;
+  const parent = (0, import_react6.useContext)(ThemeManagerContext);
+  const themes = (0, import_react6.useContext)(ThemeContext);
+  const [parentName, setParentName] = (0, import_react6.useState)(parent.name || "light");
+  if (!themes) {
+    console.warn("no themes???", props);
+    return props.children;
+  }
+  const name = props.name;
+  const theme = themes[name] || themes[`${name}-${parentName}`];
+  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;
+    }
+    const color = (_b2 = (_a4 = themes[name]) == null ? void 0 : _a4["color"]) == null ? void 0 : _b2["variable"];
+    return /* @__PURE__ */ import_react6.default.createElement("div", {
+      className: getThemeParentClassName(name),
+      style: { display: "contents", color }
+    }, contents);
+  }
+  return contents;
+}, "Theme");
+
+// 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));
+      };
+    }
+  }, []);
+  const themeContext = (0, import_react7.useMemo)(() => {
+    return new Proxy(props.themes, {
+      get(target, key) {
+        if (key === GET_DEFAULT_THEME)
+          return props.defaultTheme;
+        return Reflect.get(target, key);
+      }
+    });
+  }, [props.themes]);
+  return /* @__PURE__ */ import_react7.default.createElement(ThemeContext.Provider, {
+    value: themeContext
+  }, /* @__PURE__ */ import_react7.default.createElement(Theme, {
+    name: props.defaultTheme,
+    disableThemeClass: props.disableRootThemeClass
+  }, props.children));
+}, "ThemeProvider");
+
+// src/helpers/createTamaguiProvider.tsx
+function createTamaguiProvider(themeProps) {
+  return /* @__PURE__ */ __name(function TamaguiProvider(_a4) {
+    var _b2 = _a4, {
+      initialWindowMetrics,
+      fallback,
+      children
+    } = _b2, themePropsProvider = __objRest(_b2, [
+      "initialWindowMetrics",
+      "fallback",
+      "children"
+    ]);
+    return /* @__PURE__ */ React4.createElement(TextAncestorProvider, null, /* @__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 conf = null;
+var mediaQueryConfig = new Proxy({}, {
+  get(target, key) {
+    if (!conf) {
+      throw new Error(`Be sure to run configureMedia before accessing mediaQueryConfig`);
+    }
+    return Reflect.get(conf, key);
+  },
+  ownKeys() {
+    if (!conf) {
+      throw new Error(`Be sure to run configureMedia before accessing mediaQueryConfig`);
+    }
+    return Object.keys(conf);
+  },
+  getOwnPropertyDescriptor() {
+    return {
+      enumerable: true,
+      configurable: true
+    };
+  }
+});
+var getMedia = /* @__PURE__ */ __name(() => {
+  if (!conf) {
+    throw new Error(`not configured yet`);
+  }
+  return mediaState;
+}, "getMedia");
+var configureMedia = /* @__PURE__ */ __name(({
+  queries,
+  defaultActive = ["sm", "xs"]
+} = {}) => {
+  if (conf) {
+    console.warn(`Already configured mediaQueries once (you may have called getMedia() before configureMedia())`);
+  }
+  if (queries) {
+    conf = 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 conf2;
+var getHasConfigured = /* @__PURE__ */ __name(() => !!conf2, "getHasConfigured");
+var getTamaguiConfig = /* @__PURE__ */ __name(() => conf2, "getTamaguiConfig");
+var configListeners = new Set();
+var onConfiguredOnce = /* @__PURE__ */ __name((cb) => {
+  if (conf2) {
+    cb(conf2);
+  } else {
+    configListeners.add(cb);
+  }
+}, "onConfiguredOnce");
+var PREFIX = `theme--`;
+function createTamagui(config) {
+  if (conf2) {
+    console.warn("Called createTamagui twice! Should never do so");
+  }
+  configureMedia({
+    queries: config.media,
+    defaultActive: config.mediaQueryDefaultActive
+  });
+  const themeConfig = (() => {
+    let cssRules = [];
+    let tokenRule = `:root {`;
+    const varsByValue = new Map();
+    const addVar = /* @__PURE__ */ __name((v) => {
+      varsByValue[v.val] = v;
+      const rule = `--${v.name}:${typeof v.val === "number" ? `${v.val}px` : v.val};`;
+      tokenRule += rule;
+    }, "addVar");
+    for (const key in config.tokens) {
+      for (const skey in config.tokens[key]) {
+        const val = config.tokens[key][skey];
+        if (key === "font") {
+          for (const fkey in val) {
+            if (fkey === "family") {
+              addVar(val[fkey]);
+            } else {
+              for (const fskey in val[fkey]) {
+                addVar(val[fkey][fskey]);
+              }
+            }
+          }
+        } else {
+          addVar(val);
+        }
+      }
+    }
+    cssRules.push(`${tokenRule}
+}`);
+    for (const themeName in config.themes) {
+      config.themes[themeName] = __spreadValues({}, config.themes[themeName]);
+      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
+          });
+        }
+      }
+      const [themeClassName, parentName] = themeName.includes("-") ? themeName.split("-") : [themeName, ""];
+      const oppositeName = parentName === "dark" ? "light" : "dark";
+      const cssParentSel = parentName ? `.${PREFIX}${parentName}` : "";
+      const cssChildSel = `.${PREFIX}${themeClassName}`;
+      const cssSel = `${cssParentSel} ${cssChildSel}`;
+      const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} {
+${vars}
+}`;
+      cssRules.push(cssRule);
+    }
+    Object.freeze(cssRules);
+    return {
+      cssRules,
+      css: cssRules.join("\n")
+    };
+  })();
+  const tokensParsed = parseTokens(config.tokens);
+  const themeParsed = {};
+  const firstKey = Object.keys(config.themes)[0];
+  for (const key in config.themes[firstKey]) {
+    const val = config.themes[firstKey][key].val;
+    themeParsed[`$${key}`] = new Variable({ val, name: key });
+  }
+  const next = __spreadProps(__spreadValues({
+    shorthands: {}
+  }, config), {
+    Provider: createTamaguiProvider(__spreadValues({
+      defaultTheme: "light"
+    }, config)),
+    themeConfig,
+    themeParsed,
+    tokensParsed,
+    getCSS() {
+      return `${themeConfig.css}
+${[...(0, import_helpers.getStyleRules)()].join("\n")}`;
+    }
+  });
+  conf2 = next;
+  if (configListeners.size) {
+    configListeners.forEach((cb) => cb(next));
+    configListeners.clear();
+  }
+  return next;
+}
+__name(createTamagui, "createTamagui");
+function getThemeParentClassName(themeName) {
+  return `theme-parent ${themeName ? `${PREFIX}${themeName}` : ""}`;
+}
+__name(getThemeParentClassName, "getThemeParentClassName");
+var parseTokens = /* @__PURE__ */ __name((tokens) => {
+  const res = {};
+  for (const key in tokens) {
+    res[key] = {};
+    if (key === "font") {
+      for (const family in tokens.font) {
+        const obj = {};
+        res.font[`$${family}`] = obj;
+        for (const attrKey in tokens.font[family]) {
+          const attr = tokens.font[family][attrKey];
+          if (attrKey === "family") {
+            obj[attrKey] = attr;
+            continue;
+          }
+          obj[attrKey] = Object.keys(attr).reduce((acc, cur) => {
+            acc[`$${cur}`] = attr[cur];
+            return acc;
+          }, {});
+        }
+      }
+      continue;
+    }
+    for (const skey in tokens[key]) {
+      res[key][`$${skey}`] = tokens[key][skey];
+    }
+  }
+  return res;
+}, "parseTokens");
+
+// src/helpers/addStylesUsingClassname.tsx
+var import_react10 = __toModule(require("react"));
+
+// src/helpers/getStylesAtomic.ts
+var import_helpers2 = __toModule(require("@tamagui/helpers"));
+
+// src/constants/pseudos.ts
+var pseudos = {
+  focusStyle: {
+    name: "focus",
+    priority: 3
+  },
+  pressStyle: {
+    name: "active",
+    priority: 2
+  },
+  hoverStyle: {
+    name: "hover",
+    priority: 1
+  }
+};
+
+// src/helpers/getStylesAtomic.ts
+var generateStyle = /* @__PURE__ */ __name((style) => {
+  const { atomic, createCompileableStyle, createReactDOMStyle, i18Style } = rnw;
+  return __spreadValues({}, atomic(createCompileableStyle(createReactDOMStyle(i18Style(style)))));
+}, "generateStyle");
+var borderDefaults = {
+  borderWidth: "borderStyle",
+  borderBottomWidth: "borderBottomStyle",
+  borderTopWidth: "borderTopStyle",
+  borderLeftWidth: "borderLeftStyle",
+  borderRightWidth: "borderRightStyle"
+};
+function getStylesAtomic(style, avoidCollection = false) {
+  const styles = {
+    base: {}
+  };
+  for (const key in style) {
+    if (!!pseudos[key]) {
+      styles[key] = style[key];
+    } else {
+      styles.base[key] = style[key];
+    }
+  }
+  return Object.keys(styles).map((key) => {
+    return getAtomicStyle(styles[key], pseudos[key], avoidCollection);
+  }).flat();
+}
+__name(getStylesAtomic, "getStylesAtomic");
+var importantRegex = /\!important*/g;
+function getAtomicStyle(style, pseudo, avoidCollection) {
+  if (style == null || typeof style !== "object") {
+    throw new Error(`Wrong style type: "${typeof style}": ${style}`);
+  }
+  for (const key in borderDefaults) {
+    if (key in style) {
+      style[borderDefaults[key]] = style[borderDefaults[key]] ?? "solid";
+    }
+  }
+  const all = generateStyle(style);
+  return Object.keys(all).map((key) => {
+    const val = all[key];
+    const hash = val.identifier.slice(`${val.identifier}`.lastIndexOf("-") + 1);
+    const psuedoPrefix = pseudo ? `-${pseudo.name}-` : "";
+    const identifier = `_${val.property}-${psuedoPrefix}${hash}`;
+    const className = `.${identifier}`;
+    const rules = val.rules.map((rule) => {
+      if (pseudo) {
+        const psuedoPrefixSelect = [...Array(pseudo.priority)].map(() => ":root").join("") + " ";
+        let res = rule.replace(`.${val.identifier}`, `${psuedoPrefixSelect} ${className}`).replace("{", `:${pseudo.name}{`);
+        if (pseudo.name === "hover") {
+          res = `@media not all and (hover: none) { ${res} }`;
+        }
+        return res;
+      }
+      return rule.replace(`.${val.identifier}`, className).replace(importantRegex, "");
+    });
+    if (!avoidCollection) {
+      if (rules.length > 1) {
+        console.warn("have never seen more than one, verifying");
+      }
+      import_helpers2.AllRules.add(rules[0]);
+    }
+    const result = {
+      property: val.property,
+      value: val.value,
+      identifier,
+      className,
+      rules
+    };
+    return result;
+  });
+}
+__name(getAtomicStyle, "getAtomicStyle");
+
+// src/helpers/insertStyleRule.tsx
+function insertStyleRule(rule) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  if (process.env.NODE_ENV === "development") {
+    if (!isWeb) {
+      console.warn("non web platform, dont use this");
+      return;
+    }
+  }
+  const sheet2 = window.document.styleSheets[0];
+  if (!sheet2) {
+    return;
+  }
+  sheet2.insertRule(rule, sheet2.cssRules.length);
+}
+__name(insertStyleRule, "insertStyleRule");
+
+// src/helpers/addStylesUsingClassname.tsx
+var added = new Set();
+function useStylesAsClassname(styles) {
+  if (!import_react10.useInsertionEffect) {
+    return addStylesUsingClassname(styles);
+  } else {
+    const insertions = [];
+    const className = addStylesUsingClassname(styles, (_, rules) => {
+      for (const rule of rules) {
+        insertions.push(rule);
+      }
+    });
+    (0, import_react10.useInsertionEffect)(() => {
+      for (const ruleset of insertions) {
+        insertStyleRule(ruleset);
+      }
+    });
+    return className;
+  }
+}
+__name(useStylesAsClassname, "useStylesAsClassname");
+function addStylesUsingClassname(styles, onAdd) {
+  let className = "";
+  for (const style of styles) {
+    if (!style)
+      continue;
+    if (Array.isArray(style)) {
+      className += " " + addStylesUsingClassname(style);
+      continue;
+    }
+    for (const { identifier, rules } of getStylesAtomic(style)) {
+      className += ` ${identifier}`;
+      if (added.has(identifier)) {
+        continue;
+      }
+      added.add(identifier);
+      if (onAdd) {
+        onAdd(identifier, rules);
+      } else {
+        for (const rule of rules) {
+          insertStyleRule(rule);
+        }
+      }
+    }
+  }
+  return className;
+}
+__name(addStylesUsingClassname, "addStylesUsingClassname");
+
+// src/helpers/isObj.ts
+var isObj = /* @__PURE__ */ __name((x) => x && !Array.isArray(x) && typeof x === "object", "isObj");
+
+// src/helpers/createPropMapper.ts
+var createPropMapper = /* @__PURE__ */ __name((c) => {
+  const variants = c.variants;
+  let variantsParsed;
+  const defaultProps = c.defaultProps || {};
+  return (key, value, theme, props) => {
+    const conf3 = getTamaguiConfig();
+    if (!conf3) {
+      console.trace("no conf! err");
+      return;
+    }
+    if (variants && !variantsParsed) {
+      variantsParsed = parseVariants(variants, conf3);
+    }
+    let fontFamily = props.fontFamily || defaultProps.fontFamily || "$body";
+    const variant = variantsParsed == null ? void 0 : variantsParsed[key];
+    if (variant && typeof value !== "undefined") {
+      const val = value === true ? variant["$true"] || variant["true"] : variant[value] ?? variant["..."] ?? value;
+      const res = typeof val === "function" ? val(value, { tokens: conf3.tokensParsed, theme, props }) : isObj(val) ? __spreadValues({}, val) : val;
+      if (isObj(res)) {
+        resolveTokens(res, conf3, fontFamily);
+      }
+      return res;
+    }
+    let shouldReturn = false;
+    if (conf3.shorthands[key]) {
+      shouldReturn = true;
+      key = conf3.shorthands[key];
+    }
+    if (value && value[0] === "$") {
+      shouldReturn = true;
+      value = getToken(key, value, conf3, fontFamily);
+    }
+    if (value instanceof Variable) {
+      shouldReturn = true;
+      value = value.variable;
+    }
+    if (shouldReturn) {
+      return {
+        [key]: value
+      };
+    }
+  };
+}, "createPropMapper");
+var resolveTokens = /* @__PURE__ */ __name((res, conf3, fontFamily) => {
+  for (const rKey in res) {
+    const fKey = conf3.shorthands[rKey] || rKey;
+    const val = res[rKey];
+    if (val instanceof Variable) {
+      res[fKey] = val.variable;
+    } else if (typeof val === "string") {
+      const fVal = val[0] === "$" ? getToken(fKey, val, conf3, fontFamily) : val;
+      res[fKey] = fVal;
+    } else {
+      if (isObj(val)) {
+        resolveTokens(val, conf3, fontFamily);
+      }
+    }
+  }
+}, "resolveTokens");
+var getToken = /* @__PURE__ */ __name((key, value, { tokensParsed, themeParsed }, fontFamily = "$body") => {
+  var _a4, _b2, _c, _d, _e;
+  if (themeParsed[value]) {
+    return themeParsed[value].variable;
+  }
+  let valOrVar;
+  if (key === "fontFamily") {
+    valOrVar = ((_a4 = tokensParsed.font[value]) == null ? void 0 : _a4.family) || value;
+  }
+  if (key === "fontSize") {
+    valOrVar = ((_b2 = tokensParsed.font[fontFamily]) == null ? void 0 : _b2.size[value]) || value;
+  }
+  if (key === "lineHeight") {
+    valOrVar = ((_c = tokensParsed.font[fontFamily]) == null ? void 0 : _c.lineHeight[value]) || value;
+  }
+  if (key === "letterSpacing") {
+    valOrVar = ((_d = tokensParsed.font[fontFamily]) == null ? void 0 : _d.letterSpacing[value]) || value;
+  }
+  if (key === "fontWeight") {
+    valOrVar = ((_e = tokensParsed.font[fontFamily]) == null ? void 0 : _e.weight[value]) || value;
+  }
+  if (typeof valOrVar !== "undefined") {
+    if (valOrVar instanceof Variable) {
+      return valOrVar.variable;
+    } else {
+      return valOrVar;
+    }
+  }
+  for (const cat in tokenCategories) {
+    if (tokenCategories[cat][key]) {
+      const res = tokensParsed[cat][value];
+      if (res) {
+        return res.variable;
+      } else {
+        const themeVar = themeParsed[value];
+        if (themeVar) {
+          return themeVar.variable;
+        }
+      }
+    }
+  }
+  const spaceVar = tokensParsed.space[value];
+  if (spaceVar) {
+    return spaceVar.variable;
+  }
+  return value;
+}, "getToken");
+var tokenCategories = {
+  size: {
+    width: true,
+    height: true,
+    minWidth: true,
+    minHeight: true,
+    maxWidth: true,
+    maxHeight: true
+  },
+  color: {
+    color: true,
+    backgroundColor: true,
+    borderColor: true,
+    borderBottomColor: true,
+    borderTopColor: true,
+    borderLeftColor: true,
+    borderRightColor: true
+  }
+};
+function parseVariants(variants, conf3) {
+  return Object.keys(variants).reduce((acc, key) => {
+    acc[key] = Object.keys(variants[key]).reduce((vacc, vkey) => {
+      const variantVal = variants[key][vkey];
+      if (vkey.startsWith("...")) {
+        vacc["..."] = variantVal;
+        const tokenKey = vkey.slice(3);
+        const tokens = conf3.tokens[tokenKey];
+        for (const tkey in tokens) {
+          vacc[`$${tkey}`] = variantVal;
+        }
+      } else {
+        vacc[vkey] = variantVal;
+      }
+      return vacc;
+    }, {});
+    return acc;
+  }, {});
+}
+__name(parseVariants, "parseVariants");
+
+// src/helpers/extendStaticConfig.ts
+function extendStaticConfig(Component, config = {}) {
+  const parent = Component || {};
+  if (!parent.staticConfig) {
+    parent.staticConfig = {
+      Component
+    };
+  }
+  const variants = __spreadValues({}, parent.staticConfig.variants);
+  if (config.variants) {
+    for (const key in config.variants) {
+      if (variants[key]) {
+        variants[key] = __spreadValues(__spreadValues({}, variants[key]), config.variants[key]);
+      } else {
+        variants[key] = config.variants[key];
+      }
+    }
+  }
+  return parseStaticConfig(__spreadProps(__spreadValues({}, parent.staticConfig), {
+    isZStack: config.isZStack || parent.staticConfig.isZStack,
+    variants,
+    isText: config.isText || parent.staticConfig.isText || false,
+    neverFlatten: config.neverFlatten ?? parent.staticConfig.neverFlatten,
+    ensureOverriddenProp: config.ensureOverriddenProp ?? parent.staticConfig.ensureOverriddenProp,
+    validStyles: config.validStyles ? __spreadValues(__spreadValues({}, parent.staticConfig.validStyles), config.validStyles) : parent.staticConfig.validStyles,
+    validPropsExtra: __spreadValues(__spreadValues({}, parent.staticConfig.validPropsExtra), config.validPropsExtra),
+    defaultProps: __spreadValues(__spreadValues({}, parent.staticConfig.defaultProps), config.defaultProps)
+  }));
+}
+__name(extendStaticConfig, "extendStaticConfig");
+var parseStaticConfig = /* @__PURE__ */ __name((config) => {
+  return __spreadProps(__spreadValues({}, config), {
+    parsed: true,
+    propMapper: createPropMapper(config)
+  });
+}, "parseStaticConfig");
+
+// 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 fixNativeShadow = /* @__PURE__ */ __name((a) => {
+}, "fixNativeShadow");
+
+// src/helpers/getSplitStyles.tsx
+var getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, isSplittingDefaultProps) => {
+  const validStyleProps = staticConfig.isText ? import_helpers3.stylePropsText : import_helpers3.validStyles;
+  const viewProps = {};
+  const style = [];
+  const blacklistProps = isSplittingDefaultProps ? blacklistDefaultProps : blacklistFinalProps;
+  let pseudos2 = 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, staticConfig, theme, props);
+      const mediaStyles = getStylesAtomic(mediaStyle);
+      if (process.env.NODE_ENV === "development") {
+        if (props["debug"]) {
+          console.log("mediaStyles", keyInit, { mediaProps, mediaStyle, mediaStyles });
+        }
+      }
+      for (const style2 of mediaStyles) {
+        if (isWeb) {
+          const out2 = createMediaStyle(style2, mediaKey, mediaQueryConfig);
+          classNames = classNames || [];
+          classNames.push(out2.identifier);
+          import_helpers3.AllRules.add(out2.styleRule);
+          insertStyleRule(out2.styleRule);
+          if (process.env.NODE_ENV === "development" && props["debug"]) {
+            console.log("mediaProp", style2.identifier, out2, mediaProps, mediaStyle, mediaStyles);
+          }
+        } else {
+          console.log("TODO native media style logic");
+        }
+      }
+      continue;
+    }
+    if (import_helpers3.validStylesPseudo[keyInit]) {
+      if (!valInit)
+        continue;
+      pseudos2 = pseudos2 || {};
+      pseudos2[keyInit] = getSubStyle(valInit, staticConfig, theme, props);
+      continue;
+    }
+    const out = staticConfig.propMapper(keyInit, valInit, theme, 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);
+          style.push(cur);
+          cur = null;
+        }
+        fixNativeShadow(val);
+        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);
+    style.push(cur);
+  }
+  if (process.env.NODE_ENV === "development") {
+    if (props["debug"]) {
+      console.log(" \u{1F95A} splitProps:", { props, viewProps, style });
+    }
+  }
+  return {
+    viewProps,
+    style,
+    pseudos: pseudos2,
+    classNames
+  };
+}, "getSplitStyles");
+var getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props) => {
+  const styleOut = {};
+  for (const key in styleIn) {
+    const val = styleIn[key];
+    const out = staticConfig.propMapper(key, val, theme, 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);
+  return styleOut;
+}, "getSubStyle");
+var blacklistDefaultProps = __spreadValues(__spreadValues({}, import_helpers3.validStyles), import_helpers3.stylePropsText);
+var blacklistFinalProps = __spreadProps(__spreadValues({}, blacklistDefaultProps), {
+  tag: true,
+  debug: true,
+  space: true,
+  hitSlop: true
+});
+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/hooks/useFeatures.tsx
+var import_react11 = __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_react11.default.createElement(Component, __spreadProps(__spreadValues({
+        key: name
+      }, props), {
+        _utils: utils
+      })));
+    }
+  }
+  return features;
+}, "useFeatures");
+
+// src/hooks/usePressable.tsx
+var import_react_native2 = __toModule(require("react-native"));
+var _a3, _b;
+var getPressable = (_b = (_a3 = import_react_native2.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 { Component, validStyles: validStyles3, isText, isZStack } = staticConfig;
+  const validStyleProps = validStyles3 ?? import_helpers4.stylePropsView;
+  let defaultProps = null;
+  let tamaguiConfig;
+  let defaultsStyle;
+  let defaultsClassName = "";
+  let initialTheme;
+  const component = (0, import_react12.forwardRef)((props, forwardedRef) => {
+    var _a4;
+    const {
+      tag,
+      hitSlop,
+      children,
+      pointerEvents,
+      onPress,
+      onPressIn,
+      onPressOut,
+      onHoverIn,
+      onHoverOut,
+      space,
+      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_react12.useContext)(ThemeManagerContext);
+    const [state, set_] = (0, import_react12.useState)(() => ({
+      hover: false,
+      press: false,
+      pressIn: false,
+      theme: manager.name
+    }));
+    const set = /* @__PURE__ */ __name((next) => set_((prev) => {
+      for (const key in next) {
+        if (prev[key] !== next[key]) {
+          return __spreadValues(__spreadValues({}, prev), next);
+        }
+      }
+      return prev;
+    }), "set");
+    if (process.env.NODE_ENV === "development" && !isText && isWeb) {
+      import_react12.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 = isWeb ? (0, import_react12.useContext)(TextAncestorContext) : false;
+    const hostRef = (0, import_react12.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_react12.useRef)(false);
+    const { viewProps, pseudos: pseudos2, style, classNames } = getSplitStyles(props, staticConfig, manager.theme || initialTheme);
+    const internal = (0, import_react12.useRef)();
+    if (!internal.current) {
+      internal.current = {
+        isMounted: true
+      };
+    }
+    (0, import_react12.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_native3.View : element || (hasTextAncestor ? "span" : "div");
+    const ReactText = !isWeb ? import_react_native3.Text : element || "span";
+    const ViewComponent = isText ? ReactText : ReactView;
+    const isHovering = !isTouchDevice && !disabled && pseudos2 && state.hover;
+    const isPressing = !disabled && pseudos2 && state.press;
+    const styles = [
+      style,
+      isHovering ? pseudos2.hoverStyle || null : null,
+      isPressing ? pseudos2.pressStyle || null : null
+    ];
+    if (isWeb) {
+      const stylesClassNames = useStylesAsClassname(styles);
+      const classList = isText ? [
+        defaultsClassName,
+        classNames,
+        stylesClassNames,
+        props.className
+      ] : [defaultsClassName, props.className, classNames, stylesClassNames];
+      const className = (0, import_helpers4.concatClassName)(...classList);
+      if (process.env.NODE_ENV === "development") {
+        if (props["debug"]) {
+          console.log("\u{1F95A} className", { style, styles, classList, stylesClassNames, className });
+        }
+      }
+      viewProps.className = className;
+    } else {
+      viewProps.style = styles;
+    }
+    if (pointerEvents) {
+      viewProps.pointerEvents = pointerEvents;
+    }
+    if (isWeb) {
+      const platformMethodsRef = rnw.usePlatformMethods(viewProps);
+      const setRef = rnw.useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
+      viewProps.ref = setRef;
+      if (props.href != null && hrefAttrs != null) {
+        const { download, rel, target } = hrefAttrs;
+        if (download != null) {
+          viewProps.download = download;
+        }
+        if (rel != null) {
+          viewProps.rel = rel;
+        }
+        if (typeof target === "string") {
+          viewProps.target = target.charAt(0) !== "_" ? "_" + target : target;
+        }
+      }
+    } else {
+      if (forwardedRef) {
+        viewProps.ref = forwardedRef;
+      }
+    }
+    const attachPress = !!(pseudos2 && pseudos2.pressStyle || onPress || onPressOut || onPressIn || onClick);
+    const attachHover = isWeb && !isTouchDevice && !!(pseudos2 && pseudos2.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 || "onClick" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props);
+    if (shouldAttach) {
+      internal.current.hasEverHadEvents = true;
+    }
+    const unPress = (0, import_react12.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) => {
+        onPress == null ? void 0 : onPress(e);
+        onClick == null ? void 0 : onClick(e);
+        unPress();
+        onPressOut == null ? void 0 : onPressOut(e);
+      } : onPressOut
+    }) : null;
+    if (events) {
+      if (typeof ViewComponent !== "string") {
+        const [pressProps] = usePressable({
+          disabled,
+          hitSlop,
+          onPressIn: events.onMouseDown,
+          onPressOut: events.onPressOut,
+          onPress: events.onClick
+        });
+        Object.assign(viewProps, pressProps);
+      } else {
+        Object.assign(viewProps, events);
+      }
+    }
+    const childEls = spacedChildren({
+      children,
+      space,
+      flexDirection: props.flexDirection || (defaultProps == null ? void 0 : defaultProps.flexDirection),
+      isZStack
+    });
+    let content;
+    if (isWeb && rnw) {
+      const domProps = rnw.createDOMProps(viewProps);
+      const className = domProps.className && domProps.className !== viewProps.className ? `${domProps.className} ${viewProps.className}` : viewProps.className;
+      Object.assign(viewProps, domProps);
+      viewProps.className = className;
+      content = (0, import_react12.createElement)(ViewComponent, viewProps, childEls);
+    } else {
+      content = (0, import_react12.createElement)(ViewComponent, viewProps, childEls);
+    }
+    const shouldWrapTextAncestor = isWeb && isText && !hasTextAncestor;
+    if (shouldWrapTextAncestor) {
+      content = (0, import_react12.createElement)(TextAncestorContext.Provider, { value: true }, content);
+    }
+    if (process.env.NODE_ENV === "development") {
+      if (props["debug"]) {
+        viewProps["debug"] = true;
+        console.log("\u{1F95A} props in:", props);
+        console.log("\u{1F95A} props out:", viewProps);
+        console.log((_a4 = props.onClick) == null ? void 0 : _a4.toString());
+        console.log("\u{1F95A} etc:", { shouldAttach, ViewComponent, viewProps, styles, pseudos: pseudos2, content, childEls });
+        if (isWeb) {
+          console.log("\u{1F95A} component info", { staticConfig, tamaguiConfig });
+        }
+      }
+    }
+    return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, features, content);
+  });
+  onConfiguredOnce((conf3) => {
+    var _a4;
+    tamaguiConfig = conf3;
+    initialTheme = conf3.themes[conf3.defaultTheme || Object.keys(conf3.themes)[0]];
+    const next = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, true);
+    if (isWeb) {
+      if (next.classNames) {
+        defaultsClassName += next.classNames + " ";
+      }
+      defaultsClassName += addStylesUsingClassname([next.style, next.pseudos]);
+    } else {
+      if (!hasWarnedOnce) {
+        hasWarnedOnce = true;
+        console.log("\u26A0\uFE0F we need to account for default styles for media queries");
+      }
+    }
+    component.defaultProps = __spreadValues(__spreadValues({}, next.viewProps), component.defaultProps);
+    if (process.env.NODE_ENV === "development") {
+      if ((_a4 = staticConfig.defaultProps) == null ? void 0 : _a4.debug) {
+        console.log("tamagui debug component:", next, defaultsClassName, component.defaultProps);
+      }
+    }
+  });
+  component["staticConfig"] = __spreadValues({
+    validStyles: validStyleProps
+  }, staticConfig);
+  const res = component;
+  res["extractable"] = (Component2) => {
+    Component2["staticConfig"] = extendStaticConfig(res, {
+      neverFlatten: true,
+      defaultProps: Component2.defaultProps
+    });
+    return Component2;
+  };
+  return res;
+}
+__name(createComponent, "createComponent");
+var hasWarnedOnce = false;
+var Spacer = createComponent({
+  defaultProps: __spreadProps(__spreadValues({}, stackDefaultStyles), {
+    size: true
+  }),
+  variants: {
+    size: {
+      "...size": (size, { tokens }) => {
+        size = size == true ? "$true" : size;
+        return {
+          width: tokens.size[size] ?? size,
+          height: tokens.size[size] ?? size
+        };
+      }
+    },
+    direction: {
+      horizontal: {
+        height: 0
+      },
+      vertical: {
+        width: 0
+      }
+    }
+  }
+});
+function spacedChildren({
+  isZStack,
+  children,
+  space,
+  flexDirection
+}) {
+  var _a4;
+  if (!space && !isZStack) {
+    return children;
+  }
+  const childrenList = import_react12.Children.toArray(children);
+  const len = childrenList.length;
+  if (len === 1) {
+    return children;
+  }
+  const next = [];
+  for (const [index, child] of childrenList.entries()) {
+    if (child === null || child === void 0) {
+      continue;
+    }
+    const key = `${(child == null ? void 0 : child["key"]) ?? index}`;
+    next.push(/* @__PURE__ */ import_react12.default.createElement(import_react12.Fragment, {
+      key
+    }, isZStack ? /* @__PURE__ */ import_react12.default.createElement(Absolute, null, child) : child));
+    if ((_a4 = child == null ? void 0 : child["type"]) == null ? void 0 : _a4["isVisuallyHidden"]) {
+      continue;
+    }
+    if (index !== len - 1) {
+      if (space) {
+        next.push(/* @__PURE__ */ import_react12.default.createElement(Spacer, {
+          key: `${key}_spacer`,
+          direction: flexDirection === "row" || flexDirection === "row-reverse" ? "horizontal" : "vertical",
+          size: space
+        }));
+      }
+    }
+  }
+  return next;
+}
+__name(spacedChildren, "spacedChildren");
+var Absolute = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ import_react12.default.createElement(import_react_native3.View, {
+  style: sheet.fullscreen
+}, children), "Absolute");
+var sheet = import_react_native3.StyleSheet.create({
+  fullscreen: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  }
+});
+
+// src/createShorthands.ts
+function createShorthands(shorthands) {
+  return Object.freeze(shorthands);
+}
+__name(createShorthands, "createShorthands");
+
+// src/createTheme.ts
+var createTheme = /* @__PURE__ */ __name((theme) => {
+  const res = {};
+  for (const key in theme) {
+    const val = theme[key];
+    if (!(val instanceof Variable)) {
+      res[key] = createVariable({
+        name: key,
+        val
+      });
+    }
+  }
+  return res;
+}, "createTheme");
+
+// src/createFont.ts
+var createFont = /* @__PURE__ */ __name((font) => {
+  const sizeKeys = Object.keys(font.size);
+  for (const key in font) {
+    if (key === "size" || key === "family")
+      continue;
+    const section = font[key];
+    const keys = Object.keys(section);
+    let fillVal = section[keys[0]];
+    for (const sKey of sizeKeys) {
+      if (!(sKey in section)) {
+        section[sKey] = fillVal;
+      } else {
+        fillVal = section[sKey];
+      }
+    }
+  }
+  return Object.freeze(font);
+}, "createFont");
+
+// 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/styled.ts
+function styled(Component, options, staticExtractionOptions) {
+  const staticConfigProps = (() => {
+    if (options) {
+      const _a4 = options, { variants } = _a4, defaultProps = __objRest(_a4, ["variants"]);
+      return __spreadProps(__spreadValues({}, staticExtractionOptions), { variants, defaultProps });
+    }
+    return {};
+  })();
+  const config = extendStaticConfig(Component, staticConfigProps);
+  const component = createComponent(config);
+  return component;
+}
+__name(styled, "styled");
+
+// src/helpers/themeable.tsx
+var import_react15 = __toModule(require("react"));
+
+// src/views/ThemeInverse.tsx
+var import_react14 = __toModule(require("react"));
+
+// src/hooks/useTheme.tsx
+var import_react13 = __toModule(require("react"));
+var areEqualSets = /* @__PURE__ */ __name((a, b) => {
+  if (a.size !== b.size)
+    return false;
+  for (const val in a) {
+    if (!b.has(val)) {
+      return false;
+    }
+  }
+  return true;
+}, "areEqualSets");
+var useThemeName = /* @__PURE__ */ __name(() => {
+  const parent = (0, import_react13.useContext)(ThemeManagerContext);
+  const [name, setName] = (0, import_react13.useState)(parent.name);
+  (0, import_react13.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_react13.useContext)(ThemeContext)[GET_DEFAULT_THEME];
+}, "useDefaultThemeName");
+var useTheme = /* @__PURE__ */ __name(() => {
+  const forceUpdate = useForceUpdate();
+  const manager = (0, import_react13.useContext)(ThemeManagerContext);
+  const themes = (0, import_react13.useContext)(ThemeContext);
+  const state = (0, import_react13.useRef)();
+  if (!state.current) {
+    state.current = {
+      uuid: {},
+      keys: new Set(),
+      isRendering: true
+    };
+  }
+  state.current.isRendering = true;
+  useIsomorphicLayoutEffect(() => {
+    const st = state.current;
+    st.isRendering = false;
+    const cur = manager.keys.get(st.uuid);
+    if (!cur || !areEqualSets(st.keys, cur)) {
+      manager.track(st.uuid, st.keys);
+    }
+  });
+  (0, import_react13.useEffect)(() => {
+    return manager.onUpdate(state.current.uuid, forceUpdate);
+  }, []);
+  const theme = (manager.name ? themes[manager.name] : themes.light) ?? themes.light;
+  return (0, import_react13.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") {
+            throw new Error(`No theme value "${String(key)}" in: ${Object.keys(activeTheme)}`);
+          }
+        }
+        if (state.current.isRendering) {
+          state.current.keys.add(key);
+        }
+        return new Variable({ val: val.val, name: key });
+      }
+    });
+  }, []);
+}, "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_react14.default.createElement(Theme, {
+    name
+  }, props.children);
+}, "ThemeInverse");
+
+// src/helpers/themeable.tsx
+var themeable = /* @__PURE__ */ __name(function graphql(component) {
+  const withThemeComponent = (0, import_react15.forwardRef)(/* @__PURE__ */ __name(function WithTheme(_a4, ref) {
+    var _b2 = _a4, { themeInverse } = _b2, rest = __objRest(_b2, ["themeInverse"]);
+    const el = import_react15.default.createElement(component, __spreadProps(__spreadValues({}, rest), { ref }));
+    if (themeInverse) {
+      return /* @__PURE__ */ import_react15.default.createElement(ThemeInverse, null, el);
+    }
+    if (rest.theme) {
+      return /* @__PURE__ */ import_react15.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_react16 = __toModule(require("react"));
+var import_react_native4 = __toModule(require("react-native"));
+
+// src/views/Stack.tsx
+var Stack = createComponent({
+  defaultProps: __spreadProps(__spreadValues({}, stackDefaultStyles), {
+    flexDirection: "column"
+  })
+});
+
+// src/views/Animated.tsx
+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_native4.Animated.Value(0);
+  });
+  const animatedProps = (0, import_react16.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_native4.Animated.spring(driver, {
+      useNativeDriver: true,
+      velocity,
+      toValue: animateState === "in" ? 1 : 0
+    }).start();
+  }, [animated, animateState]);
+  const childrenMemo = (0, import_react16.useMemo)(() => children, [children]);
+  return /* @__PURE__ */ import_react16.default.createElement(Stack, __spreadValues(__spreadValues({
+    animated
+  }, props), animatedProps), childrenMemo);
+}, "AnimatedStack");
+
+// src/static.ts
+var static_exports = {};
+__export(static_exports, {
+  Spacer: () => Spacer,
+  addMediaQueryListener: () => addMediaQueryListener,
+  configureMedia: () => configureMedia,
+  createComponent: () => createComponent,
+  createFont: () => createFont,
+  createTamagui: () => createTamagui,
+  createTokens: () => createTokens,
+  getHasConfigured: () => getHasConfigured,
+  getMedia: () => getMedia,
+  getSplitStyles: () => getSplitStyles,
+  getStylesAtomic: () => getStylesAtomic,
+  getTamaguiConfig: () => getTamaguiConfig,
+  getThemeParentClassName: () => getThemeParentClassName,
+  isObj: () => isObj,
+  mapTokensToVariables: () => mapTokensToVariables,
+  mediaObjectToString: () => mediaObjectToString,
+  mediaQueryConfig: () => mediaQueryConfig,
+  mediaState: () => mediaState,
+  mouseUps: () => mouseUps,
+  onConfiguredOnce: () => onConfiguredOnce,
+  postProcessStyles: () => postProcessStyles,
+  pseudos: () => pseudos,
+  removeMediaQueryListener: () => removeMediaQueryListener,
+  spacedChildren: () => spacedChildren,
+  stackDefaultStyles: () => stackDefaultStyles,
+  styled: () => styled,
+  useDefaultThemeName: () => useDefaultThemeName,
+  useMedia: () => useMedia,
+  useTheme: () => useTheme,
+  useThemeName: () => useThemeName
+});
+__reExport(static_exports, __toModule(require("@tamagui/helpers")));
+
+// src/static/postProcessStyles.tsx
+var postProcessStyles = /* @__PURE__ */ __name((inStyles, staticConfig, theme) => {
+  const { style, viewProps, pseudos: pseudos2, classNames } = getSplitStyles(inStyles, staticConfig, theme);
+  const next = {};
+  for (const s of style) {
+    if (!s)
+      continue;
+    Object.assign(next, s);
+  }
+  Object.assign(next, pseudos2);
+  return { style: next, viewProps, classNames };
+}, "postProcessStyles");
+
+// src/views/Text.tsx
+var ellipseStyle = {
+  maxWidth: "100%",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+var Text2 = createComponent({
+  isText: true,
+  defaultProps: {
+    display: isWeb ? "inline" : "inline-flex",
+    boxSizing: "border-box",
+    fontFamily: "System",
+    wordWrap: "break-word"
+  },
+  variants: {
+    numberOfLines: {
+      1: ellipseStyle,
+      "[number]": (lines) => lines > 1 ? { WebkitLineClamp: 1 } : null
+    },
+    selectable: {
+      true: {
+        userSelect: "text"
+      },
+      false: {
+        userSelect: "none"
+      }
+    },
+    pressable: {
+      true: {
+        cursor: "pointer"
+      }
+    },
+    ellipse: {
+      true: isWeb ? ellipseStyle : {
+        numberOfLines: 1,
+        lineBreakMode: "clip"
+      }
+    }
+  },
+  deoptProps: new Set(isWeb ? [] : ["ellipse"]),
+  validStyles: __spreadValues(__spreadValues(__spreadValues({}, static_exports.validStyles), static_exports.stylePropsTextOnly), isWeb && {
+    userSelect: true,
+    textOverflow: true,
+    whiteSpace: true,
+    wordWrap: true,
+    selectable: true,
+    cursor: true
+  })
+});
+
+// src/views/SafeAreaProvider.tsx
+var import_react17 = __toModule(require("react"));
+var import_react_native5 = __toModule(require("react-native"));
+var import_react_native_safe_area_context = __toModule(require("react-native-safe-area-context"));
+var defaultMetrics = null;
+var SafeAreaProvider = /* @__PURE__ */ __name(({
+  initialWindowMetrics,
+  children
+}) => {
+  if (!initialWindowMetrics && !defaultMetrics) {
+    defaultMetrics = import_react_native5.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__ */ import_react17.default.createElement(import_react_native_safe_area_context.SafeAreaProvider, {
+    initialMetrics: initialWindowMetrics ?? defaultMetrics
+  }, children);
+}, "SafeAreaProvider");
+//# sourceMappingURL=index.cjs.map