@tamagui/core 1.0.1-beta.21 → 1.0.1-beta.210

package/dist/esm/helpers/calc.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/calc.ts"],
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\n\nimport { getVariableVariable } from '../createVariable'\nimport { FontLineHeightTokens, FontSizeTokens, SizeTokens, SpaceTokens } from '../types'\n\n// unused code - not exported\n\n/**\n * Simple calc() that handles native + web\n *   on web: outputs a calc() string\n *   on native: outputs a plain number\n */\n\nexport type CalcVal =\n  | string\n  | number\n  | SizeTokens\n  | SpaceTokens\n  | FontSizeTokens\n  | FontLineHeightTokens\n\nconst operators = {\n  '+': (a: number, b: number) => a + b,\n  '-': (a: number, b: number) => a - b,\n  '/': (a: number, b: number) => a / b,\n  '*': (a: number, b: number) => a * b,\n}\n\ntype Operator = keyof typeof operators\n\nexport const calc = (...valuesAndOperators: (CalcVal | Operator)[]) => {\n  if (isWeb) {\n    let res = 'calc('\n    for (const cur of valuesAndOperators) {\n      if (operators[cur as any]) {\n        // spaces are significant\n        res += ' ' + cur + ' '\n      } else {\n        res += convertToVariableOrNumber(cur)\n      }\n    }\n    return res + ')'\n  }\n\n  let res = 0\n  let nextOp: any = null\n  for (const cur of valuesAndOperators) {\n    if (operators[cur as any]) {\n      nextOp = operators[cur as any]\n    } else {\n      if (nextOp) {\n        res = nextOp(res, cur)\n        nextOp = null\n      } else {\n        res = +cur\n      }\n    }\n  }\n  return res\n}\n\nconst convertToVariableOrNumber = (v: any) => {\n  const varOrVal = getVariableVariable(v)\n  if (typeof varOrVal === 'number') {\n    return `${varOrVal}px`\n  }\n  return varOrVal\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa;AAEtB,SAAS,2BAA2B;AAmBpC,MAAM,YAAY;AAAA,EAChB,KAAK,CAAC,GAAW,MAAc,IAAI;AAAA,EACnC,KAAK,CAAC,GAAW,MAAc,IAAI;AAAA,EACnC,KAAK,CAAC,GAAW,MAAc,IAAI;AAAA,EACnC,KAAK,CAAC,GAAW,MAAc,IAAI;AACrC;AAIO,MAAM,OAAO,IAAI,uBAA+C;AACrE,MAAI,OAAO;AACT,QAAIA,OAAM;AACV,eAAW,OAAO,oBAAoB;AACpC,UAAI,UAAU,MAAa;AAEzB,QAAAA,QAAO,MAAM,MAAM;AAAA,MACrB,OAAO;AACL,QAAAA,QAAO,0BAA0B,GAAG;AAAA,MACtC;AAAA,IACF;AACA,WAAOA,OAAM;AAAA,EACf;AAEA,MAAI,MAAM;AACV,MAAI,SAAc;AAClB,aAAW,OAAO,oBAAoB;AACpC,QAAI,UAAU,MAAa;AACzB,eAAS,UAAU;AAAA,IACrB,OAAO;AACL,UAAI,QAAQ;AACV,cAAM,OAAO,KAAK,GAAG;AACrB,iBAAS;AAAA,MACX,OAAO;AACL,cAAM,CAAC;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAEA,MAAM,4BAA4B,CAAC,MAAW;AAC5C,QAAM,WAAW,oBAAoB,CAAC;AACtC,MAAI,OAAO,aAAa,UAAU;AAChC,WAAO,GAAG;AAAA,EACZ;AACA,SAAO;AACT;",
+  "names": ["res"]
+}

package/dist/esm/helpers/createMediaStyle.js

@@ -1,29 +1,41 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { mediaObjectToString } from "../hooks/useMedia";
 const MEDIA_SEP = "_";
-const createMediaStyle = /* @__PURE__ */ __name(({ identifier, rules }, mediaKey, mediaQueries, negate, importance) => {
-  const mediaKeys = Object.keys(mediaQueries);
-  const importance_ = Math.max(0, importance == void 0 ? mediaKeys.indexOf(mediaKey) : importance || 0);
-  const precendencePrefix = new Array(importance_ + 1).fill(":root").join("");
+let prefixes = null;
+let selectors = null;
+const createMediaStyle = ({ property, identifier, rules }, mediaKey, mediaQueries, negate) => {
+  if (!prefixes || !selectors) {
+    const mediaKeys = Object.keys(mediaQueries);
+    prefixes = Object.fromEntries(
+      mediaKeys.map((key, index) => [key, new Array(index + 1).fill(":root").join("")])
+    );
+    selectors = Object.fromEntries(
+      mediaKeys.map((key) => [key, mediaObjectToString(mediaQueries[key])])
+    );
+  }
+  const precendencePrefix = prefixes[mediaKey];
+  const mediaSelector = selectors[mediaKey];
   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 styleInner = rules[0].replace(identifier, nextIdentifier);
+  const nextIdentifier = `${identifier.replace(
+    ogPrefix,
+    `${ogPrefix}${MEDIA_SEP}${mediaKey}${negKey}${MEDIA_SEP}`
+  )}`;
+  const screenStr = negate ? "not all and" : "";
+  const mediaQuery = `${screenStr} ${mediaSelector}`;
+  const styleInner = rules.map((rule) => rule.replace(identifier, nextIdentifier)).join(";");
   let styleRule = "";
   if (styleInner.includes("@media")) {
     styleRule = styleInner.replace("{", ` and ${mediaQuery} {`);
   } else {
     styleRule = `@media ${mediaQuery} { ${precendencePrefix} ${styleInner} }`;
   }
+  styleRule = styleRule.replace(";}", " !important;}");
   return {
-    styleRule,
+    property,
+    rules: [styleRule],
     identifier: nextIdentifier
   };
-}, "createMediaStyle");
+};
 export {
   MEDIA_SEP,
   createMediaStyle

package/dist/esm/helpers/createMediaStyle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/createMediaStyle.ts"],
-  "sourcesContent": ["import { StyleObject } from '@tamagui/helpers'\n\nimport { mediaObjectToString } from '../hooks/useMedia'\nimport { MediaQueries } from '../types'\n\n// TODO have this be used by extractMediaStyle in tamagui static\n// not synced to static/constants for now\nexport const MEDIA_SEP = '_'\n\nexport const createMediaStyle = (\n  { identifier, rules }: StyleObject,\n  mediaKey: string,\n  mediaQueries: MediaQueries,\n  negate?: boolean,\n  importance?: number\n) => {\n  const mediaKeys = Object.keys(mediaQueries)\n  const importance_ = Math.max(\n    0,\n    importance == undefined ? mediaKeys.indexOf(mediaKey) : importance || 0\n  )\n  const precendencePrefix = new Array(importance_ + 1).fill(':root').join('')\n  const negKey = negate ? '0' : ''\n  const ogPrefix = identifier.slice(0, identifier.indexOf('-') + 1)\n  const nextIdentifier = `${identifier.replace(\n    ogPrefix,\n    `${ogPrefix}${MEDIA_SEP}${mediaKey}${negKey}${MEDIA_SEP}`\n  )}`\n  const screenStr = negate ? 'not all' : 'screen'\n  const mediaSelector = mediaObjectToString(mediaQueries[mediaKey])\n  const mediaQuery = `${screenStr} and ${mediaSelector}`\n  const styleInner = rules[0].replace(identifier, nextIdentifier)\n  // combines media queries if they already exist\n  let styleRule = ''\n  if (styleInner.includes('@media')) {\n    // combine\n    styleRule = styleInner.replace('{', ` and ${mediaQuery} {`)\n  } else {\n    styleRule = `@media ${mediaQuery} { ${precendencePrefix} ${styleInner} }`\n  }\n  return {\n    styleRule,\n    identifier: nextIdentifier,\n  }\n}\n"],
-  "mappings": ";;AAEA;AAKO,MAAM,YAAY;AAElB,MAAM,mBAAmB,wBAC9B,EAAE,YAAY,SACd,UACA,cACA,QACA,eACG;AACH,QAAM,YAAY,OAAO,KAAK,YAAY;AAC1C,QAAM,cAAc,KAAK,IACvB,GACA,cAAc,SAAY,UAAU,QAAQ,QAAQ,IAAI,cAAc,CACxE;AACA,QAAM,oBAAoB,IAAI,MAAM,cAAc,CAAC,EAAE,KAAK,OAAO,EAAE,KAAK,EAAE;AAC1E,QAAM,SAAS,SAAS,MAAM;AAC9B,QAAM,WAAW,WAAW,MAAM,GAAG,WAAW,QAAQ,GAAG,IAAI,CAAC;AAChE,QAAM,iBAAiB,GAAG,WAAW,QACnC,UACA,GAAG,WAAW,YAAY,WAAW,SAAS,WAChD;AACA,QAAM,YAAY,SAAS,YAAY;AACvC,QAAM,gBAAgB,oBAAoB,aAAa,SAAS;AAChE,QAAM,aAAa,GAAG,iBAAiB;AACvC,QAAM,aAAa,MAAM,GAAG,QAAQ,YAAY,cAAc;AAE9D,MAAI,YAAY;AAChB,MAAI,WAAW,SAAS,QAAQ,GAAG;AAEjC,gBAAY,WAAW,QAAQ,KAAK,QAAQ,cAAc;AAAA,EAC5D,OAAO;AACL,gBAAY,UAAU,gBAAgB,qBAAqB;AAAA,EAC7D;AACA,SAAO;AAAA,IACL;AAAA,IACA,YAAY;AAAA,EACd;AACF,GAnCgC;",
+  "sourcesContent": ["import { StyleObject } from '@tamagui/helpers'\n\nimport { mediaObjectToString } from '../hooks/useMedia'\nimport { MediaQueries } from '../types'\nimport { PartialStyleObject } from './insertStyleRule'\n\n// TODO have this be used by extractMediaStyle in tamagui static\n// not synced to static/constants for now\nexport const MEDIA_SEP = '_'\n\nlet prefixes: Record<string, string> | null = null\nlet selectors: Record<string, string> | null = null\n\nexport const createMediaStyle = (\n  { property, identifier, rules }: StyleObject,\n  mediaKey: string,\n  mediaQueries: MediaQueries,\n  negate?: boolean\n): PartialStyleObject => {\n  if (!prefixes || !selectors) {\n    // TODO move this into useMedia calc once there and unify w getMediaImportance\n    const mediaKeys = Object.keys(mediaQueries)\n    prefixes = Object.fromEntries(\n      mediaKeys.map((key, index) => [key, new Array(index + 1).fill(':root').join('')])\n    )\n    selectors = Object.fromEntries(\n      mediaKeys.map((key) => [key, mediaObjectToString(mediaQueries[key])])\n    )\n  }\n  const precendencePrefix = prefixes[mediaKey]\n  const mediaSelector = selectors[mediaKey]\n  const negKey = negate ? '0' : ''\n  const ogPrefix = identifier.slice(0, identifier.indexOf('-') + 1)\n  const nextIdentifier = `${identifier.replace(\n    ogPrefix,\n    `${ogPrefix}${MEDIA_SEP}${mediaKey}${negKey}${MEDIA_SEP}`\n  )}`\n  const screenStr = negate ? 'not all and' : ''\n  const mediaQuery = `${screenStr} ${mediaSelector}`\n  const styleInner = rules.map((rule) => rule.replace(identifier, nextIdentifier)).join(';')\n  // combines media queries if they already exist\n  let styleRule = ''\n  if (styleInner.includes('@media')) {\n    // combine\n    styleRule = styleInner.replace('{', ` and ${mediaQuery} {`)\n  } else {\n    styleRule = `@media ${mediaQuery} { ${precendencePrefix} ${styleInner} }`\n  }\n  styleRule = styleRule.replace(';}', ' !important;}')\n  return {\n    property,\n    rules: [styleRule],\n    identifier: nextIdentifier,\n  }\n}\n"],
+  "mappings": "AAEA,SAAS,2BAA2B;AAM7B,MAAM,YAAY;AAEzB,IAAI,WAA0C;AAC9C,IAAI,YAA2C;AAExC,MAAM,mBAAmB,CAC9B,EAAE,UAAU,YAAY,MAAM,GAC9B,UACA,cACA,WACuB;AACvB,MAAI,CAAC,YAAY,CAAC,WAAW;AAE3B,UAAM,YAAY,OAAO,KAAK,YAAY;AAC1C,eAAW,OAAO;AAAA,MAChB,UAAU,IAAI,CAAC,KAAK,UAAU,CAAC,KAAK,IAAI,MAAM,QAAQ,CAAC,EAAE,KAAK,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;AAAA,IAClF;AACA,gBAAY,OAAO;AAAA,MACjB,UAAU,IAAI,CAAC,QAAQ,CAAC,KAAK,oBAAoB,aAAa,IAAI,CAAC,CAAC;AAAA,IACtE;AAAA,EACF;AACA,QAAM,oBAAoB,SAAS;AACnC,QAAM,gBAAgB,UAAU;AAChC,QAAM,SAAS,SAAS,MAAM;AAC9B,QAAM,WAAW,WAAW,MAAM,GAAG,WAAW,QAAQ,GAAG,IAAI,CAAC;AAChE,QAAM,iBAAiB,GAAG,WAAW;AAAA,IACnC;AAAA,IACA,GAAG,WAAW,YAAY,WAAW,SAAS;AAAA,EAChD;AACA,QAAM,YAAY,SAAS,gBAAgB;AAC3C,QAAM,aAAa,GAAG,aAAa;AACnC,QAAM,aAAa,MAAM,IAAI,CAAC,SAAS,KAAK,QAAQ,YAAY,cAAc,CAAC,EAAE,KAAK,GAAG;AAEzF,MAAI,YAAY;AAChB,MAAI,WAAW,SAAS,QAAQ,GAAG;AAEjC,gBAAY,WAAW,QAAQ,KAAK,QAAQ,cAAc;AAAA,EAC5D,OAAO;AACL,gBAAY,UAAU,gBAAgB,qBAAqB;AAAA,EAC7D;AACA,cAAY,UAAU,QAAQ,MAAM,eAAe;AACnD,SAAO;AAAA,IACL;AAAA,IACA,OAAO,CAAC,SAAS;AAAA,IACjB,YAAY;AAAA,EACd;AACF;",
   "names": []
 }

package/dist/esm/helpers/createPropMapper.js

@@ -1,126 +1,276 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { getConfig } from "../conf";
-import { isWeb } from "../constants/platform";
-import { isVariable } from "../createVariable";
+import { isWeb } from "@tamagui/constants";
+import { getConfig } from "../config";
+import { isDevTools } from "../constants/isDevTools";
+import { getVariableValue, isVariable } from "../createVariable";
+import { expandStyle } from "./expandStyle";
+import { expandStyles } from "./expandStyles";
+import { getFontsForLanguage, getVariantExtras } from "./getVariantExtras";
 import { isObj } from "./isObj";
-function getVariantFunction(variant, key, value) {
-  if (typeof variant === "function") {
-    return variant;
-  }
-  for (const cat in tokenCategories) {
-    if (key in tokenCategories[cat]) {
-      const spreadVariant = variant[`...${cat}`];
-      if (spreadVariant) {
-        return spreadVariant;
-      }
-    }
-  }
-  let fn;
-  if (typeof value === "number") {
-    fn = variant[":number"];
-  } else if (typeof value === "string") {
-    fn = variant[":string"];
-  } else if (value === true || value === false) {
-    fn = variant[":boolean"];
-  }
-  fn = fn || variant[value];
-  return fn || variant["..."] || variant["...size"];
-}
-__name(getVariantFunction, "getVariantFunction");
-const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
+import { mergeProps } from "./mergeProps";
+const getReturnVariablesAs = (props, state) => {
+  return !!props.animation || state.resolveVariablesAs === "value" ? isWeb ? "non-color-value" : "value" : "auto";
+};
+const createPropMapper = (staticConfig) => {
   const variants = staticConfig.variants || {};
-  const defaultProps = staticConfig.defaultProps || {};
-  return (key, value, theme, props, returnVariablesAs = !!props.animation ? "value" : "auto", avoidDefaultProps = false) => {
+  const defaultProps = mergeProps(staticConfig.defaultProps || {}, {}, false)[0];
+  const mapper = (key, value, theme, propsIn, state, languageContext, avoidDefaultProps = false, debug) => {
     const conf = getConfig();
     if (!conf) {
-      console.trace("no conf! err");
-      return;
-    }
-    const fontFamily = props.fontFamily || defaultProps.fontFamily || "$body";
-    const variant = variants && variants[key];
-    if (variant && value !== void 0) {
-      let variantValue = getVariantFunction(variant, key, value);
-      if (variantValue) {
-        if (typeof variantValue === "function") {
-          const fn = variantValue;
-          variantValue = fn(value, {
-            fonts: conf.fontsParsed,
-            tokens: conf.tokensParsed,
-            theme,
-            props: avoidDefaultProps ? props : new Proxy(props, {
-              get(target, key2) {
-                if (Reflect.has(target, key2)) {
-                  return Reflect.get(target, key2);
-                }
-                if (defaultProps) {
-                  return Reflect.get(defaultProps, key2);
-                }
-              }
-            })
-          });
-        }
-        if (isObj(variantValue)) {
-          variantValue = resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs);
-        }
-        return expansions(variantValue);
-      }
+      throw new Error(`No tamagui config setup`);
+    }
+    const props = state.fallbackProps || propsIn;
+    const returnVariablesAs = getReturnVariablesAs(props, state);
+    const fontFamily = props[conf.inverseShorthands.fontFamily] || props.fontFamily || defaultProps.fontFamily || propsIn.fontFamily || "$body";
+    const variantValue = resolveVariants(
+      key,
+      value,
+      props,
+      defaultProps,
+      theme,
+      variants,
+      fontFamily,
+      conf,
+      returnVariablesAs,
+      staticConfig,
+      "",
+      languageContext,
+      avoidDefaultProps,
+      debug
+    );
+    if (variantValue) {
+      return variantValue;
     }
-    let shouldReturn = false;
+    let shouldReturn = value !== void 0 && value !== null;
     if (conf.shorthands[key]) {
       shouldReturn = true;
       key = conf.shorthands[key];
     }
     if (value) {
-      shouldReturn = true;
       if (value[0] === "$") {
-        value = getToken(key, value, conf, theme, fontFamily, returnVariablesAs);
+        value = getToken(
+          key,
+          value,
+          conf,
+          theme,
+          fontFamily,
+          languageContext,
+          returnVariablesAs,
+          debug
+        );
       } else if (isVariable(value)) {
-        value = getVariableValue(value, returnVariablesAs);
+        value = resolveVariableValue(key, value, returnVariablesAs);
       }
     }
     if (shouldReturn) {
-      return expansions({
-        [key]: value
-      });
+      return expandStyle(key, value) || [[key, value]];
     }
   };
-}, "createPropMapper");
-const resolveTokens = /* @__PURE__ */ __name((input, conf, theme, fontFamily, resolveAs) => {
+  return mapper;
+};
+const resolveVariants = (key, value, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, parentVariantKey, languageContext, avoidDefaultProps = false, debug) => {
+  var _a;
+  const variant = variants && variants[key];
+  if (!variant || value === void 0) {
+    return;
+  }
+  let variantValue = getVariantDefinition(variant, key, value, conf);
+  if (!variantValue) {
+    if (process.env.NODE_ENV === "development") {
+      if ((_a = staticConfig.validStyles) == null ? void 0 : _a[key]) {
+        return null;
+      }
+      if (value === false) {
+        return null;
+      }
+      const name = staticConfig.componentName || "[UnnamedComponent]";
+      console.warn(
+        `No variant found: ${name} has variant "${key}", but no matching value "${value}"`
+      );
+    }
+    return;
+  }
+  if (typeof variantValue === "function") {
+    const fn = variantValue;
+    variantValue = fn(
+      value,
+      getVariantExtras(props, languageContext, theme, defaultProps, avoidDefaultProps)
+    );
+  }
+  let fontFamilyResult;
+  if (isObj(variantValue)) {
+    const fontFamilyUpdate = variantValue.fontFamily || variantValue[conf.inverseShorthands.fontFamily];
+    if (fontFamilyUpdate) {
+      fontFamilyResult = getFontFamilyFromNameOrVariable(fontFamilyUpdate, conf);
+    }
+    variantValue = resolveTokensAndVariants(
+      key,
+      variantValue,
+      props,
+      defaultProps,
+      theme,
+      variants,
+      fontFamilyResult || fontFamily,
+      conf,
+      returnVariablesAs,
+      staticConfig,
+      parentVariantKey,
+      languageContext,
+      avoidDefaultProps,
+      debug
+    );
+  }
+  if (variantValue) {
+    const next = Object.entries(expandStyles(variantValue));
+    if (fontFamilyResult && fontFamilyResult[0] === "$") {
+      fontFamilyCache.set(next, getVariableValue(fontFamilyResult));
+    }
+    return next;
+  }
+};
+function getFontFamilyFromNameOrVariable(input, conf) {
+  if (isVariable(input)) {
+    const val = variableToFontNameCache.get(input);
+    if (val) {
+      return val;
+    } else {
+      for (const key in conf.fontsParsed) {
+        const familyVariable = conf.fontsParsed[key].family;
+        if (isVariable(familyVariable)) {
+          variableToFontNameCache.set(familyVariable, key);
+          if (familyVariable === input) {
+            return key;
+          }
+        }
+      }
+    }
+  } else if (typeof input === "string") {
+    if ((input == null ? void 0 : input[0]) === "$") {
+      return input;
+    } else {
+      if (process.env.NODE_ENV === "development") {
+        console.log("[tamagui] should map back", input);
+      }
+    }
+  }
+}
+const variableToFontNameCache = /* @__PURE__ */ new WeakMap();
+const fontFamilyCache = /* @__PURE__ */ new WeakMap();
+const getPropMappedFontFamily = (expanded) => {
+  return expanded && fontFamilyCache.get(expanded);
+};
+const resolveTokensAndVariants = (key, value, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, parentVariantKey, languageContext, avoidDefaultProps, debug) => {
   var _a;
-  let res = {};
-  for (const rKey in input) {
+  const res = {};
+  for (const rKey in value) {
     const fKey = conf.shorthands[rKey] || rKey;
-    const val = input[rKey];
+    const val = value[rKey];
     if (isVariable(val)) {
-      res[fKey] = resolveAs === "variable" ? val : !isWeb || resolveAs === "value" ? val.val : val.variable;
+      res[fKey] = !isWeb || returnVariablesAs === "value" ? val.val : val.variable;
+    } else if (variants[fKey]) {
+      if (parentVariantKey === key) {
+        res[fKey] = val;
+      } else {
+        Object.assign(
+          res,
+          Object.fromEntries(
+            resolveVariants(
+              fKey,
+              val,
+              props,
+              defaultProps,
+              theme,
+              variants,
+              fontFamily,
+              conf,
+              returnVariablesAs,
+              staticConfig,
+              key,
+              languageContext,
+              avoidDefaultProps,
+              debug
+            )
+          )
+        );
+      }
     } else if (typeof val === "string") {
-      const fVal = val[0] === "$" ? getToken(fKey, val, conf, theme, fontFamily, resolveAs) : val;
+      const fVal = val[0] === "$" ? getToken(fKey, val, conf, theme, fontFamily, languageContext, returnVariablesAs, debug) : val;
       res[fKey] = fVal;
     } else {
       if (isObj(val)) {
-        res[fKey] = resolveTokens(val, conf, theme, fontFamily, resolveAs);
+        res[fKey] = resolveTokensAndVariants(
+          fKey,
+          val,
+          props,
+          defaultProps,
+          theme,
+          variants,
+          fontFamily,
+          conf,
+          returnVariablesAs,
+          staticConfig,
+          key,
+          languageContext,
+          avoidDefaultProps,
+          debug
+        );
       } else {
-        res[fKey] = input[fKey];
+        res[fKey] = val;
       }
     }
     if (process.env.NODE_ENV === "development") {
-      if (((_a = res[fKey]) == null ? void 0 : _a[0]) === "$") {
-        console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, fKey, res[fKey]);
+      if (debug) {
+        if (((_a = res[fKey]) == null ? void 0 : _a[0]) === "$") {
+          console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, fKey, res[fKey], theme);
+        }
       }
     }
   }
   return res;
-}, "resolveTokens");
+};
+function getVariantDefinition(variant, key, value, conf) {
+  if (typeof variant === "function") {
+    return variant;
+  }
+  if (variant[value]) {
+    return variant[value];
+  }
+  const { tokensParsed } = conf;
+  if (variant["...size"] && value in tokensParsed.size) {
+    return variant["...size"];
+  }
+  if (variant["...color"] && value in tokensParsed.color) {
+    return variant["...color"];
+  }
+  if (variant["...radius"] && value in tokensParsed.radius) {
+    return variant["...radius"];
+  }
+  if (variant["...space"] && value in tokensParsed.space) {
+    return variant["...space"];
+  }
+  if (variant["...zIndex"] && value in tokensParsed.zIndex) {
+    return variant["...zIndex"];
+  }
+  let fn;
+  if (typeof value === "number") {
+    fn = variant[":number"];
+  } else if (typeof value === "string") {
+    fn = variant[":string"];
+  } else if (value === true || value === false) {
+    fn = variant[":boolean"];
+  }
+  return fn || variant["..."] || variant["...size"];
+}
 const fontShorthand = {
   fontSize: "size",
   fontWeight: "weight"
 };
-const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed, fontsParsed }, theme, fontFamily = "$body", resolveAs) => {
+const getToken = (key, value, conf, theme, fontFamily = "$body", languageContext, resolveAs, debug) => {
   var _a, _b, _c;
+  const tokensParsed = conf.tokensParsed;
+  const fontsParsed = languageContext ? getFontsForLanguage(conf.fontsParsed, languageContext) : conf.fontsParsed;
   let valOrVar;
   let hasSet = false;
-  if (value in theme) {
+  if (theme[value]) {
     valOrVar = theme[value];
     hasSet = true;
   } else {
@@ -155,21 +305,41 @@ const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed, fontsParsed
     }
   }
   if (hasSet) {
-    return getVariableValue(valOrVar, resolveAs);
+    if (process.env.NODE_ENV === "development" && isDevTools && debug === "verbose") {
+      console.log(`   \uFE52 propMapper getToken`, key, valOrVar);
+    }
+    return resolveVariableValue(key, valOrVar, resolveAs);
   }
   if (process.env.NODE_ENV === "development") {
     if (value && value[0] === "$") {
-      console.warn(`\u26A0\uFE0F Missing token:`, key, value, fontFamily, theme, fontsParsed);
+      console.trace(
+        `\u26A0\uFE0F You've passed the value "${value}" to the style property "${key}", but there's no theme or token with the key "${value}". Using theme "${theme.name}".
+
+Set the debug prop to true to see more detailed debug information.`
+      );
+      if (debug) {
+        if (isDevTools) {
+          console.log("Looked in:", { theme, tokensParsed, fontsParsed });
+        }
+      }
       return null;
     }
   }
   return value;
-}, "getToken");
-function getVariableValue(valOrVar, resolveAs = "auto") {
+};
+function resolveVariableValue(key, valOrVar, resolveAs = "auto") {
   if (isVariable(valOrVar)) {
     if (resolveAs === "variable") {
       return valOrVar;
     }
+    if (resolveAs === "non-color-value") {
+      if (isWeb) {
+        if (key in tokenCategories.color) {
+          return valOrVar.variable;
+        }
+      }
+      return valOrVar.val;
+    }
     if (!isWeb || resolveAs === "value") {
       return valOrVar.val;
     }
@@ -177,10 +347,13 @@ function getVariableValue(valOrVar, resolveAs = "auto") {
   }
   return valOrVar;
 }
-__name(getVariableValue, "getVariableValue");
 const tokenCategories = {
   radius: {
-    borderRadius: true
+    borderRadius: true,
+    borderTopLeftRadius: true,
+    borderTopRightRadius: true,
+    borderBottomLeftRadius: true,
+    borderBottomRightRadius: true
   },
   size: {
     width: true,
@@ -200,39 +373,10 @@ const tokenCategories = {
     borderRightColor: true
   }
 };
-const sidesX = ["Left", "Right"];
-const sidesY = ["Top", "Bottom"];
-const sidesXY = [...sidesX, ...sidesY];
-const expand = {
-  padding: sidesXY.map((x) => `padding${x}`),
-  paddingHorizontal: sidesX.map((x) => `padding${x}`),
-  paddingVertical: sidesY.map((x) => `padding${x}`),
-  margin: sidesXY.map((x) => `margin${x}`),
-  marginHorizontal: sidesX.map((x) => `margin${x}`),
-  marginVertical: sidesY.map((x) => `margin${x}`),
-  borderWidth: sidesXY.map((x) => `border${x}Width`)
-};
-function expansions(styleObj) {
-  var _a, _b;
-  for (const key in expand) {
-    if (key in styleObj) {
-      for (const expandKey of expand[key]) {
-        styleObj[expandKey] = styleObj[key];
-      }
-      delete styleObj[key];
-    }
-  }
-  if ("flex" in styleObj) {
-    if (typeof styleObj.flex === "number") {
-      styleObj.flexGrow = (_a = styleObj.flexGrow) != null ? _a : styleObj.flex;
-      styleObj.flexShrink = (_b = styleObj.flexShrink) != null ? _b : 1;
-      delete styleObj.flex;
-    }
-  }
-  return styleObj;
-}
-__name(expansions, "expansions");
 export {
-  createPropMapper
+  createPropMapper,
+  getFontFamilyFromNameOrVariable,
+  getPropMappedFontFamily,
+  getReturnVariablesAs
 };
 //# sourceMappingURL=createPropMapper.js.map