@tamagui/stacks 1.0.1-beta.99 → 1.0.1-rc.0

package/dist/cjs/SizableStack.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -21,6 +22,7 @@ __export(SizableStack_exports, {
 });
 module.exports = __toCommonJS(SizableStack_exports);
 var import_core = require("@tamagui/core");
+var import_get_button_sized = require("@tamagui/get-button-sized");
 var import_Stacks = require("./Stacks");
 var import_variants = require("./variants");
 const SizableStack = (0, import_core.styled)(import_Stacks.YStack, {
@@ -37,7 +39,7 @@ const SizableStack = (0, import_core.styled)(import_Stacks.YStack, {
     elevate: import_variants.elevate,
     bordered: import_variants.bordered,
     size: {
-      "...size": import_core.getButtonSize
+      "...size": import_get_button_sized.getButtonSized
     }
   }
 });

package/dist/cjs/SizableStack.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SizableStack.tsx"],
-  "sourcesContent": ["import { GetProps, getButtonSize, styled } from '@tamagui/core'\n\nimport { YStack } from './Stacks'\nimport { bordered, circular, elevate, focusTheme, hoverTheme, pressTheme } from './variants'\n\nexport const SizableStack = styled(YStack, {\n  name: 'SizableStack',\n  backgroundColor: '$background',\n  flexDirection: 'row',\n  flexShrink: 1,\n\n  variants: {\n    // allows the type to come in for use in size\n    fontFamily: () => ({}),\n\n    hoverTheme,\n    pressTheme,\n    focusTheme,\n    circular,\n    elevate,\n    bordered,\n\n    size: {\n      '...size': getButtonSize,\n    },\n  },\n})\n\nexport type SizableStackProps = GetProps<typeof SizableStack>\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAgD;AAEhD,oBAAuB;AACvB,sBAAgF;AAEzE,MAAM,eAAe,wBAAO,sBAAQ;AAAA,EACzC,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,YAAY;AAAA,EAEZ,UAAU;AAAA,IAER,YAAY,MAAO,EAAC;AAAA,IAEpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;",
+  "sourcesContent": ["import { GetProps, styled } from '@tamagui/core'\nimport { getButtonSized } from '@tamagui/get-button-sized'\n\nimport { YStack } from './Stacks'\nimport { bordered, circular, elevate, focusTheme, hoverTheme, pressTheme } from './variants'\n\nexport const SizableStack = styled(YStack, {\n  name: 'SizableStack',\n  backgroundColor: '$background',\n  flexDirection: 'row',\n  flexShrink: 1,\n\n  variants: {\n    // allows the type to come in for use in size\n    fontFamily: () => ({}),\n\n    hoverTheme,\n    pressTheme,\n    focusTheme,\n    circular,\n    elevate,\n    bordered,\n\n    size: {\n      '...size': getButtonSized,\n    },\n  } as const,\n})\n\nexport type SizableStackProps = GetProps<typeof SizableStack>\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiC;AACjC,8BAA+B;AAE/B,oBAAuB;AACvB,sBAAgF;AAEzE,MAAM,mBAAe,oBAAO,sBAAQ;AAAA,EACzC,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,YAAY;AAAA,EAEZ,UAAU;AAAA,IAER,YAAY,OAAO,CAAC;AAAA,IAEpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;",
   "names": []
 }

package/dist/cjs/Stacks.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -58,13 +59,17 @@ const XStack = (0, import_core.styled)(import_core.Stack, {
   name: "XStack",
   variants
 });
-const ZStack = (0, import_core.styled)(YStack, {
-  name: "ZStack",
-  position: "relative"
-}, {
-  neverFlatten: true,
-  isZStack: true
-});
+const ZStack = (0, import_core.styled)(
+  YStack,
+  {
+    name: "ZStack",
+    position: "relative"
+  },
+  {
+    neverFlatten: true,
+    isZStack: true
+  }
+);
 const getSizedElevation = (val, { theme, tokens }) => {
   let num = 0;
   if (val === true) {
@@ -78,8 +83,9 @@ const getSizedElevation = (val, { theme, tokens }) => {
     num = +val;
   }
   if (process.env.NODE_ENV === "development") {
-    if (isNaN(num))
+    if (num !== null && isNaN(num)) {
       console.warn("NaN shadow", num, val);
+    }
   }
   const [height, shadowRadius] = [Math.round(num / 4 + 1), Math.round(num / 2 + 2)];
   const shadow = {

package/dist/cjs/Stacks.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Stacks.tsx"],
-  "sourcesContent": ["import {\n  GetProps,\n  SizeTokens,\n  SizeVariantSpreadFunction,\n  Stack,\n  StackProps,\n  VariantSpreadExtras,\n  getVariableValue,\n  isVariable,\n  styled,\n} from '@tamagui/core'\n\nexport type YStackProps = GetProps<typeof YStack>\nexport type XStackProps = YStackProps\nexport type ZStackProps = YStackProps\n\nexport const getElevation: SizeVariantSpreadFunction<StackProps> = (size, extras) => {\n  if (!size) return\n  const { tokens } = extras\n  const token = tokens.size[size]\n  const sizeNum = (isVariable(token) ? +token.val : size) as number\n  return getSizedElevation(sizeNum, extras)\n}\n\nconst fullscreenStyle = {\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n} as const\n\nconst variants = {\n  fullscreen: {\n    true: fullscreenStyle,\n  },\n  elevation: {\n    '...size': getElevation,\n  },\n} as const\n\nexport const YStack = styled(Stack, {\n  flexDirection: 'column',\n  name: 'YStack',\n  variants,\n})\n\nexport const XStack = styled(Stack, {\n  flexDirection: 'row',\n  name: 'XStack',\n  variants,\n})\n\nexport const ZStack = styled(\n  YStack,\n  {\n    name: 'ZStack',\n    position: 'relative',\n  },\n  {\n    neverFlatten: true,\n    isZStack: true,\n  }\n)\n\nexport const getSizedElevation = (\n  val: SizeTokens | number | boolean,\n  { theme, tokens }: VariantSpreadExtras<any>\n) => {\n  let num = 0\n  if (val === true) {\n    const val = getVariableValue(tokens.size['true'])\n    if (typeof val === 'number') {\n      num = val\n    } else {\n      num = 10\n    }\n  } else {\n    num = +val\n  }\n  if (process.env.NODE_ENV === 'development') {\n    if (isNaN(num)) console.warn('NaN shadow', num, val)\n  }\n  const [height, shadowRadius] = [Math.round(num / 4 + 1), Math.round(num / 2 + 2)]\n  const shadow = {\n    shadowColor: theme.shadowColor,\n    shadowRadius,\n    shadowOffset: { height, width: 0 },\n  }\n  return shadow\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAUO;AAMA,MAAM,eAAsD,CAAC,MAAM,WAAW;AACnF,MAAI,CAAC;AAAM;AACX,QAAM,EAAE,WAAW;AACnB,QAAM,QAAQ,OAAO,KAAK;AAC1B,QAAM,UAAW,4BAAW,KAAK,IAAI,CAAC,MAAM,MAAM;AAClD,SAAO,kBAAkB,SAAS,MAAM;AAC1C;AAEA,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV;AAEA,MAAM,WAAW;AAAA,EACf,YAAY;AAAA,IACV,MAAM;AAAA,EACR;AAAA,EACA,WAAW;AAAA,IACT,WAAW;AAAA,EACb;AACF;AAEO,MAAM,SAAS,wBAAO,mBAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN;AACF,CAAC;AAEM,MAAM,SAAS,wBAAO,mBAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN;AACF,CAAC;AAEM,MAAM,SAAS,wBACpB,QACA;AAAA,EACE,MAAM;AAAA,EACN,UAAU;AACZ,GACA;AAAA,EACE,cAAc;AAAA,EACd,UAAU;AACZ,CACF;AAEO,MAAM,oBAAoB,CAC/B,KACA,EAAE,OAAO,aACN;AACH,MAAI,MAAM;AACV,MAAI,QAAQ,MAAM;AAChB,UAAM,OAAM,kCAAiB,OAAO,KAAK,OAAO;AAChD,QAAI,OAAO,SAAQ,UAAU;AAC3B,YAAM;AAAA,IACR,OAAO;AACL,YAAM;AAAA,IACR;AAAA,EACF,OAAO;AACL,UAAM,CAAC;AAAA,EACT;AACA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,MAAM,GAAG;AAAG,cAAQ,KAAK,cAAc,KAAK,GAAG;AAAA,EACrD;AACA,QAAM,CAAC,QAAQ,gBAAgB,CAAC,KAAK,MAAM,MAAM,IAAI,CAAC,GAAG,KAAK,MAAM,MAAM,IAAI,CAAC,CAAC;AAChF,QAAM,SAAS;AAAA,IACb,aAAa,MAAM;AAAA,IACnB;AAAA,IACA,cAAc,EAAE,QAAQ,OAAO,EAAE;AAAA,EACnC;AACA,SAAO;AACT;",
-  "names": []
+  "sourcesContent": ["import {\n  GetProps,\n  SizeTokens,\n  SizeVariantSpreadFunction,\n  Stack,\n  StackProps,\n  VariantSpreadExtras,\n  getVariableValue,\n  isVariable,\n  styled,\n} from '@tamagui/core'\n\nexport type YStackProps = GetProps<typeof YStack>\nexport type XStackProps = YStackProps\nexport type ZStackProps = YStackProps\n\nexport const getElevation: SizeVariantSpreadFunction<StackProps> = (size, extras) => {\n  if (!size) return\n  const { tokens } = extras\n  const token = tokens.size[size]\n  const sizeNum = (isVariable(token) ? +token.val : size) as number\n  return getSizedElevation(sizeNum, extras)\n}\n\nconst fullscreenStyle = {\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n} as const\n\nconst variants = {\n  fullscreen: {\n    true: fullscreenStyle,\n  },\n  elevation: {\n    '...size': getElevation,\n  },\n} as const\n\nexport const YStack = styled(Stack, {\n  flexDirection: 'column',\n  name: 'YStack',\n  variants,\n})\n\nexport const XStack = styled(Stack, {\n  flexDirection: 'row',\n  name: 'XStack',\n  variants,\n})\n\nexport const ZStack = styled(\n  YStack,\n  {\n    name: 'ZStack',\n    position: 'relative',\n  },\n  {\n    neverFlatten: true,\n    isZStack: true,\n  }\n)\n\nexport const getSizedElevation = (\n  val: SizeTokens | number | boolean,\n  { theme, tokens }: VariantSpreadExtras<any>\n) => {\n  let num = 0\n  if (val === true) {\n    const val = getVariableValue(tokens.size['true'])\n    if (typeof val === 'number') {\n      num = val\n    } else {\n      num = 10\n    }\n  } else {\n    num = +val\n  }\n  if (process.env.NODE_ENV === 'development') {\n    if (num !== null && isNaN(num)) {\n      // eslint-disable-next-line no-console\n      console.warn('NaN shadow', num, val)\n    }\n  }\n  const [height, shadowRadius] = [Math.round(num / 4 + 1), Math.round(num / 2 + 2)]\n  const shadow = {\n    shadowColor: theme.shadowColor,\n    shadowRadius,\n    shadowOffset: { height, width: 0 },\n  }\n  return shadow\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAUO;AAMA,MAAM,eAAsD,CAAC,MAAM,WAAW;AACnF,MAAI,CAAC;AAAM;AACX,QAAM,EAAE,OAAO,IAAI;AACnB,QAAM,QAAQ,OAAO,KAAK;AAC1B,QAAM,cAAW,wBAAW,KAAK,IAAI,CAAC,MAAM,MAAM;AAClD,SAAO,kBAAkB,SAAS,MAAM;AAC1C;AAEA,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV;AAEA,MAAM,WAAW;AAAA,EACf,YAAY;AAAA,IACV,MAAM;AAAA,EACR;AAAA,EACA,WAAW;AAAA,IACT,WAAW;AAAA,EACb;AACF;AAEO,MAAM,aAAS,oBAAO,mBAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN;AACF,CAAC;AAEM,MAAM,aAAS,oBAAO,mBAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN;AACF,CAAC;AAEM,MAAM,aAAS;AAAA,EACpB;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AAAA,EACA;AAAA,IACE,cAAc;AAAA,IACd,UAAU;AAAA,EACZ;AACF;AAEO,MAAM,oBAAoB,CAC/B,KACA,EAAE,OAAO,OAAO,MACb;AACH,MAAI,MAAM;AACV,MAAI,QAAQ,MAAM;AAChB,UAAMA,WAAM,8BAAiB,OAAO,KAAK,OAAO;AAChD,QAAI,OAAOA,SAAQ,UAAU;AAC3B,YAAMA;AAAA,IACR,OAAO;AACL,YAAM;AAAA,IACR;AAAA,EACF,OAAO;AACL,UAAM,CAAC;AAAA,EACT;AACA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,QAAQ,QAAQ,MAAM,GAAG,GAAG;AAE9B,cAAQ,KAAK,cAAc,KAAK,GAAG;AAAA,IACrC;AAAA,EACF;AACA,QAAM,CAAC,QAAQ,YAAY,IAAI,CAAC,KAAK,MAAM,MAAM,IAAI,CAAC,GAAG,KAAK,MAAM,MAAM,IAAI,CAAC,CAAC;AAChF,QAAM,SAAS;AAAA,IACb,aAAa,MAAM;AAAA,IACnB;AAAA,IACA,cAAc,EAAE,QAAQ,OAAO,EAAE;AAAA,EACnC;AACA,SAAO;AACT;",
+  "names": ["val"]
 }

package/dist/cjs/ThemeableStack.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -23,6 +24,11 @@ module.exports = __toCommonJS(ThemeableStack_exports);
 var import_core = require("@tamagui/core");
 var import_Stacks = require("./Stacks");
 var import_variants = require("./variants");
+const chromelessStyle = {
+  backgroundColor: "transparent",
+  borderColor: "transparent",
+  shadowColor: "transparent"
+};
 const ThemeableStack = (0, import_core.styled)(import_Stacks.YStack, {
   name: "SizableStack",
   variants: {
@@ -46,10 +52,12 @@ const ThemeableStack = (0, import_core.styled)(import_Stacks.YStack, {
       }
     },
     chromeless: {
-      true: {
-        backgroundColor: "transparent",
-        borderColor: "transparent",
-        shadowColor: "transparent"
+      true: chromelessStyle,
+      all: {
+        ...chromelessStyle,
+        hoverStyle: chromelessStyle,
+        pressStyle: chromelessStyle,
+        focusStyle: chromelessStyle
       }
     }
   }

package/dist/cjs/ThemeableStack.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ThemeableStack.tsx"],
-  "sourcesContent": ["import { GetProps, styled } from '@tamagui/core'\n\nimport { YStack } from './Stacks'\nimport {\n  bordered,\n  circular,\n  elevate,\n  focusTheme,\n  hoverTheme,\n  padded,\n  pressTheme,\n  radiused,\n} from './variants'\n\nexport const ThemeableStack = styled(YStack, {\n  name: 'SizableStack',\n\n  variants: {\n    // allows the type to come in for use in size\n    fontFamily: () => ({}),\n\n    backgrounded: {\n      true: {\n        backgroundColor: '$background',\n      },\n    },\n\n    radiused,\n    hoverTheme,\n    pressTheme,\n    focusTheme,\n    circular,\n    padded,\n    elevate,\n    bordered,\n\n    transparent: {\n      true: {\n        backgroundColor: 'transparent',\n      },\n    },\n\n    chromeless: {\n      true: {\n        backgroundColor: 'transparent',\n        borderColor: 'transparent',\n        shadowColor: 'transparent',\n      },\n    },\n  },\n})\n\nexport type ThemeableStackProps = GetProps<typeof ThemeableStack>\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiC;AAEjC,oBAAuB;AACvB,sBASO;AAEA,MAAM,iBAAiB,wBAAO,sBAAQ;AAAA,EAC3C,MAAM;AAAA,EAEN,UAAU;AAAA,IAER,YAAY,MAAO,EAAC;AAAA,IAEpB,cAAc;AAAA,MACZ,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA,aAAa;AAAA,MACX,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IAEA,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF,CAAC;",
+  "sourcesContent": ["import { GetProps, styled } from '@tamagui/core'\n\nimport { YStack } from './Stacks'\nimport {\n  bordered,\n  circular,\n  elevate,\n  focusTheme,\n  hoverTheme,\n  padded,\n  pressTheme,\n  radiused,\n} from './variants'\n\nconst chromelessStyle = {\n  backgroundColor: 'transparent',\n  borderColor: 'transparent',\n  shadowColor: 'transparent',\n}\n\nexport const ThemeableStack = styled(YStack, {\n  name: 'SizableStack',\n\n  variants: {\n    // allows the type to come in for use in size\n    fontFamily: () => ({}),\n\n    backgrounded: {\n      true: {\n        backgroundColor: '$background',\n      },\n    },\n\n    radiused,\n    hoverTheme,\n    pressTheme,\n    focusTheme,\n    circular,\n    padded,\n    elevate,\n    bordered,\n\n    transparent: {\n      true: {\n        backgroundColor: 'transparent',\n      },\n    },\n\n    chromeless: {\n      true: chromelessStyle,\n      all: {\n        ...chromelessStyle,\n        hoverStyle: chromelessStyle,\n        pressStyle: chromelessStyle,\n        focusStyle: chromelessStyle,\n      },\n    },\n  } as const,\n})\n\nexport type ThemeableStackProps = GetProps<typeof ThemeableStack>\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiC;AAEjC,oBAAuB;AACvB,sBASO;AAEP,MAAM,kBAAkB;AAAA,EACtB,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,aAAa;AACf;AAEO,MAAM,qBAAiB,oBAAO,sBAAQ;AAAA,EAC3C,MAAM;AAAA,EAEN,UAAU;AAAA,IAER,YAAY,OAAO,CAAC;AAAA,IAEpB,cAAc;AAAA,MACZ,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA,aAAa;AAAA,MACX,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IAEA,YAAY;AAAA,MACV,MAAM;AAAA,MACN,KAAK;AAAA,QACH,GAAG;AAAA,QACH,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,MACd;AAAA,IACF;AAAA,EACF;AACF,CAAC;",
   "names": []
 }

package/dist/cjs/index.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

package/dist/cjs/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/index.ts"],
   "sourcesContent": ["export * from './Stacks'\nexport * from './SizableStack'\nexport * from './ThemeableStack'\n"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,qBAAd;AACA,wBAAc,2BADd;AAEA,wBAAc,6BAFd;",
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,qBAAd;AACA,wBAAc,2BADd;AAEA,wBAAc,6BAFd;",
   "names": []
 }

package/dist/cjs/variants.js

@@ -1,21 +1,8 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 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 __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -48,22 +35,25 @@ const elevate = {
   }
 };
 const bordered = (val, { props }) => {
-  return __spreadValues(__spreadValues(__spreadValues({
+  return {
     borderWidth: typeof val === "number" ? val : 1,
-    borderColor: "$borderColor"
-  }, props.hoverTheme && {
-    hoverStyle: {
-      borderColor: "$borderColorHover"
-    }
-  }), props.pressTheme && {
-    pressStyle: {
-      borderColor: "$borderColorPress"
-    }
-  }), props.focusTheme && {
-    focusStyle: {
-      borderColor: "$borderColorFocus"
+    borderColor: "$borderColor",
+    ...props.hoverTheme && {
+      hoverStyle: {
+        borderColor: "$borderColorHover"
+      }
+    },
+    ...props.pressTheme && {
+      pressStyle: {
+        borderColor: "$borderColorPress"
+      }
+    },
+    ...props.focusTheme && {
+      focusStyle: {
+        borderColor: "$borderColorFocus"
+      }
     }
-  });
+  };
 };
 const padded = {
   true: (_, extras) => {
@@ -92,8 +82,7 @@ const circular = {
       minWidth: size,
       minHeight: size,
       borderRadius: 1e5,
-      paddingVertical: 0,
-      paddingHorizontal: 0
+      padding: 0
     };
   }
 };

package/dist/cjs/variants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/variants.tsx"],
-  "sourcesContent": ["import { getElevation } from './Stacks'\n\nexport const elevate = {\n  true: (_: boolean, extras: any) => {\n    return getElevation(extras.props['size'], extras)\n  },\n}\n\nexport const bordered = (val: boolean | number, { props }) => {\n  return {\n    // TODO size it with size in '...size'\n    borderWidth: typeof val === 'number' ? val : 1,\n    borderColor: '$borderColor',\n\n    ...(props.hoverTheme && {\n      hoverStyle: {\n        borderColor: '$borderColorHover',\n      },\n    }),\n\n    ...(props.pressTheme && {\n      pressStyle: {\n        borderColor: '$borderColorPress',\n      },\n    }),\n\n    ...(props.focusTheme && {\n      focusStyle: {\n        borderColor: '$borderColorFocus',\n      },\n    }),\n  }\n}\n\nexport const padded = {\n  true: (_, extras) => {\n    const { tokens, props } = extras\n    return {\n      padding: tokens.space[props.size] || tokens.space['$4'],\n    }\n  },\n}\n\nexport const radiused = {\n  true: (_, extras) => {\n    const { tokens, props } = extras\n    return {\n      borderRadius: tokens.radius[props.size] || tokens.radius['$4'],\n    }\n  },\n}\n\nexport const circular = {\n  true: (_, { props, tokens }) => {\n    const size = tokens.size[props.size]\n    return {\n      width: size,\n      height: size,\n      maxWidth: size,\n      maxHeight: size,\n      minWidth: size,\n      minHeight: size,\n      borderRadius: 100_000,\n      paddingVertical: 0,\n      paddingHorizontal: 0,\n    }\n  },\n}\n\nexport const hoverTheme = {\n  true: {\n    hoverStyle: {\n      backgroundColor: '$backgroundHover',\n      borderColor: '$borderColorHover',\n    },\n  },\n  false: {},\n}\n\nexport const pressTheme = {\n  true: {\n    pressStyle: {\n      backgroundColor: '$backgroundPress',\n      borderColor: '$borderColorPress',\n    },\n  },\n  false: {},\n}\n\nexport const focusTheme = {\n  true: {\n    focusStyle: {\n      backgroundColor: '$backgroundFocus',\n      borderColor: '$borderColorFocus',\n    },\n  },\n  false: {},\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA6B;AAEtB,MAAM,UAAU;AAAA,EACrB,MAAM,CAAC,GAAY,WAAgB;AACjC,WAAO,gCAAa,OAAO,MAAM,SAAS,MAAM;AAAA,EAClD;AACF;AAEO,MAAM,WAAW,CAAC,KAAuB,EAAE,YAAY;AAC5D,SAAO;AAAA,IAEL,aAAa,OAAO,QAAQ,WAAW,MAAM;AAAA,IAC7C,aAAa;AAAA,KAET,MAAM,cAAc;AAAA,IACtB,YAAY;AAAA,MACV,aAAa;AAAA,IACf;AAAA,EACF,IAEI,MAAM,cAAc;AAAA,IACtB,YAAY;AAAA,MACV,aAAa;AAAA,IACf;AAAA,EACF,IAEI,MAAM,cAAc;AAAA,IACtB,YAAY;AAAA,MACV,aAAa;AAAA,IACf;AAAA,EACF;AAEJ;AAEO,MAAM,SAAS;AAAA,EACpB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,QAAQ,UAAU;AAC1B,WAAO;AAAA,MACL,SAAS,OAAO,MAAM,MAAM,SAAS,OAAO,MAAM;AAAA,IACpD;AAAA,EACF;AACF;AAEO,MAAM,WAAW;AAAA,EACtB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,QAAQ,UAAU;AAC1B,WAAO;AAAA,MACL,cAAc,OAAO,OAAO,MAAM,SAAS,OAAO,OAAO;AAAA,IAC3D;AAAA,EACF;AACF;AAEO,MAAM,WAAW;AAAA,EACtB,MAAM,CAAC,GAAG,EAAE,OAAO,aAAa;AAC9B,UAAM,OAAO,OAAO,KAAK,MAAM;AAC/B,WAAO;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,WAAW;AAAA,MACX,UAAU;AAAA,MACV,WAAW;AAAA,MACX,cAAc;AAAA,MACd,iBAAiB;AAAA,MACjB,mBAAmB;AAAA,IACrB;AAAA,EACF;AACF;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;",
+  "sourcesContent": ["import { getElevation } from './Stacks'\n\nexport const elevate = {\n  true: (_: boolean, extras: any) => {\n    return getElevation(extras.props['size'], extras)\n  },\n}\n\nexport const bordered = (val: boolean | number, { props }) => {\n  return {\n    // TODO size it with size in '...size'\n    borderWidth: typeof val === 'number' ? val : 1,\n    borderColor: '$borderColor',\n\n    ...(props.hoverTheme && {\n      hoverStyle: {\n        borderColor: '$borderColorHover',\n      },\n    }),\n\n    ...(props.pressTheme && {\n      pressStyle: {\n        borderColor: '$borderColorPress',\n      },\n    }),\n\n    ...(props.focusTheme && {\n      focusStyle: {\n        borderColor: '$borderColorFocus',\n      },\n    }),\n  }\n}\n\nexport const padded = {\n  true: (_, extras) => {\n    const { tokens, props } = extras\n    return {\n      padding: tokens.space[props.size] || tokens.space['$4'],\n    }\n  },\n}\n\nexport const radiused = {\n  true: (_, extras) => {\n    const { tokens, props } = extras\n    return {\n      borderRadius: tokens.radius[props.size] || tokens.radius['$4'],\n    }\n  },\n}\n\nexport const circular = {\n  true: (_, { props, tokens }) => {\n    const size = tokens.size[props.size]\n    return {\n      width: size,\n      height: size,\n      maxWidth: size,\n      maxHeight: size,\n      minWidth: size,\n      minHeight: size,\n      borderRadius: 100_000,\n      padding: 0,\n    }\n  },\n}\n\nexport const hoverTheme = {\n  true: {\n    hoverStyle: {\n      backgroundColor: '$backgroundHover',\n      borderColor: '$borderColorHover',\n    },\n  },\n  false: {},\n}\n\nexport const pressTheme = {\n  true: {\n    pressStyle: {\n      backgroundColor: '$backgroundPress',\n      borderColor: '$borderColorPress',\n    },\n  },\n  false: {},\n}\n\nexport const focusTheme = {\n  true: {\n    focusStyle: {\n      backgroundColor: '$backgroundFocus',\n      borderColor: '$borderColorFocus',\n    },\n  },\n  false: {},\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA6B;AAEtB,MAAM,UAAU;AAAA,EACrB,MAAM,CAAC,GAAY,WAAgB;AACjC,eAAO,4BAAa,OAAO,MAAM,SAAS,MAAM;AAAA,EAClD;AACF;AAEO,MAAM,WAAW,CAAC,KAAuB,EAAE,MAAM,MAAM;AAC5D,SAAO;AAAA,IAEL,aAAa,OAAO,QAAQ,WAAW,MAAM;AAAA,IAC7C,aAAa;AAAA,IAEb,GAAI,MAAM,cAAc;AAAA,MACtB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IAEA,GAAI,MAAM,cAAc;AAAA,MACtB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IAEA,GAAI,MAAM,cAAc;AAAA,MACtB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,SAAS;AAAA,EACpB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,QAAQ,MAAM,IAAI;AAC1B,WAAO;AAAA,MACL,SAAS,OAAO,MAAM,MAAM,SAAS,OAAO,MAAM;AAAA,IACpD;AAAA,EACF;AACF;AAEO,MAAM,WAAW;AAAA,EACtB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,QAAQ,MAAM,IAAI;AAC1B,WAAO;AAAA,MACL,cAAc,OAAO,OAAO,MAAM,SAAS,OAAO,OAAO;AAAA,IAC3D;AAAA,EACF;AACF;AAEO,MAAM,WAAW;AAAA,EACtB,MAAM,CAAC,GAAG,EAAE,OAAO,OAAO,MAAM;AAC9B,UAAM,OAAO,OAAO,KAAK,MAAM;AAC/B,WAAO;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,WAAW;AAAA,MACX,UAAU;AAAA,MACV,WAAW;AAAA,MACX,cAAc;AAAA,MACd,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;",
   "names": []
 }

package/dist/esm/SizableStack.js

@@ -1,4 +1,5 @@
-import { getButtonSize, styled } from "@tamagui/core";
+import { styled } from "@tamagui/core";
+import { getButtonSized } from "@tamagui/get-button-sized";
 import { YStack } from "./Stacks";
 import { bordered, circular, elevate, focusTheme, hoverTheme, pressTheme } from "./variants";
 const SizableStack = styled(YStack, {
@@ -15,7 +16,7 @@ const SizableStack = styled(YStack, {
     elevate,
     bordered,
     size: {
-      "...size": getButtonSize
+      "...size": getButtonSized
     }
   }
 });

package/dist/esm/SizableStack.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SizableStack.tsx"],
-  "sourcesContent": ["import { GetProps, getButtonSize, styled } from '@tamagui/core'\n\nimport { YStack } from './Stacks'\nimport { bordered, circular, elevate, focusTheme, hoverTheme, pressTheme } from './variants'\n\nexport const SizableStack = styled(YStack, {\n  name: 'SizableStack',\n  backgroundColor: '$background',\n  flexDirection: 'row',\n  flexShrink: 1,\n\n  variants: {\n    // allows the type to come in for use in size\n    fontFamily: () => ({}),\n\n    hoverTheme,\n    pressTheme,\n    focusTheme,\n    circular,\n    elevate,\n    bordered,\n\n    size: {\n      '...size': getButtonSize,\n    },\n  },\n})\n\nexport type SizableStackProps = GetProps<typeof SizableStack>\n"],
-  "mappings": "AAAA;AAEA;AACA;AAEO,MAAM,eAAe,OAAO,QAAQ;AAAA,EACzC,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,YAAY;AAAA,EAEZ,UAAU;AAAA,IAER,YAAY,MAAO,EAAC;AAAA,IAEpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;",
+  "sourcesContent": ["import { GetProps, styled } from '@tamagui/core'\nimport { getButtonSized } from '@tamagui/get-button-sized'\n\nimport { YStack } from './Stacks'\nimport { bordered, circular, elevate, focusTheme, hoverTheme, pressTheme } from './variants'\n\nexport const SizableStack = styled(YStack, {\n  name: 'SizableStack',\n  backgroundColor: '$background',\n  flexDirection: 'row',\n  flexShrink: 1,\n\n  variants: {\n    // allows the type to come in for use in size\n    fontFamily: () => ({}),\n\n    hoverTheme,\n    pressTheme,\n    focusTheme,\n    circular,\n    elevate,\n    bordered,\n\n    size: {\n      '...size': getButtonSized,\n    },\n  } as const,\n})\n\nexport type SizableStackProps = GetProps<typeof SizableStack>\n"],
+  "mappings": "AAAA,SAAmB,cAAc;AACjC,SAAS,sBAAsB;AAE/B,SAAS,cAAc;AACvB,SAAS,UAAU,UAAU,SAAS,YAAY,YAAY,kBAAkB;AAEzE,MAAM,eAAe,OAAO,QAAQ;AAAA,EACzC,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,YAAY;AAAA,EAEZ,UAAU;AAAA,IAER,YAAY,OAAO,CAAC;AAAA,IAEpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;",
   "names": []
 }

package/dist/esm/Stacks.js

@@ -37,13 +37,17 @@ const XStack = styled(Stack, {
   name: "XStack",
   variants
 });
-const ZStack = styled(YStack, {
-  name: "ZStack",
-  position: "relative"
-}, {
-  neverFlatten: true,
-  isZStack: true
-});
+const ZStack = styled(
+  YStack,
+  {
+    name: "ZStack",
+    position: "relative"
+  },
+  {
+    neverFlatten: true,
+    isZStack: true
+  }
+);
 const getSizedElevation = (val, { theme, tokens }) => {
   let num = 0;
   if (val === true) {
@@ -57,8 +61,9 @@ const getSizedElevation = (val, { theme, tokens }) => {
     num = +val;
   }
   if (process.env.NODE_ENV === "development") {
-    if (isNaN(num))
+    if (num !== null && isNaN(num)) {
       console.warn("NaN shadow", num, val);
+    }
   }
   const [height, shadowRadius] = [Math.round(num / 4 + 1), Math.round(num / 2 + 2)];
   const shadow = {

package/dist/esm/Stacks.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Stacks.tsx"],
-  "sourcesContent": ["import {\n  GetProps,\n  SizeTokens,\n  SizeVariantSpreadFunction,\n  Stack,\n  StackProps,\n  VariantSpreadExtras,\n  getVariableValue,\n  isVariable,\n  styled,\n} from '@tamagui/core'\n\nexport type YStackProps = GetProps<typeof YStack>\nexport type XStackProps = YStackProps\nexport type ZStackProps = YStackProps\n\nexport const getElevation: SizeVariantSpreadFunction<StackProps> = (size, extras) => {\n  if (!size) return\n  const { tokens } = extras\n  const token = tokens.size[size]\n  const sizeNum = (isVariable(token) ? +token.val : size) as number\n  return getSizedElevation(sizeNum, extras)\n}\n\nconst fullscreenStyle = {\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n} as const\n\nconst variants = {\n  fullscreen: {\n    true: fullscreenStyle,\n  },\n  elevation: {\n    '...size': getElevation,\n  },\n} as const\n\nexport const YStack = styled(Stack, {\n  flexDirection: 'column',\n  name: 'YStack',\n  variants,\n})\n\nexport const XStack = styled(Stack, {\n  flexDirection: 'row',\n  name: 'XStack',\n  variants,\n})\n\nexport const ZStack = styled(\n  YStack,\n  {\n    name: 'ZStack',\n    position: 'relative',\n  },\n  {\n    neverFlatten: true,\n    isZStack: true,\n  }\n)\n\nexport const getSizedElevation = (\n  val: SizeTokens | number | boolean,\n  { theme, tokens }: VariantSpreadExtras<any>\n) => {\n  let num = 0\n  if (val === true) {\n    const val = getVariableValue(tokens.size['true'])\n    if (typeof val === 'number') {\n      num = val\n    } else {\n      num = 10\n    }\n  } else {\n    num = +val\n  }\n  if (process.env.NODE_ENV === 'development') {\n    if (isNaN(num)) console.warn('NaN shadow', num, val)\n  }\n  const [height, shadowRadius] = [Math.round(num / 4 + 1), Math.round(num / 2 + 2)]\n  const shadow = {\n    shadowColor: theme.shadowColor,\n    shadowRadius,\n    shadowOffset: { height, width: 0 },\n  }\n  return shadow\n}\n"],
-  "mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBO,MAAM,eAAsD,CAAC,MAAM,WAAW;AACnF,MAAI,CAAC;AAAM;AACX,QAAM,EAAE,WAAW;AACnB,QAAM,QAAQ,OAAO,KAAK;AAC1B,QAAM,UAAW,WAAW,KAAK,IAAI,CAAC,MAAM,MAAM;AAClD,SAAO,kBAAkB,SAAS,MAAM;AAC1C;AAEA,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV;AAEA,MAAM,WAAW;AAAA,EACf,YAAY;AAAA,IACV,MAAM;AAAA,EACR;AAAA,EACA,WAAW;AAAA,IACT,WAAW;AAAA,EACb;AACF;AAEO,MAAM,SAAS,OAAO,OAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN;AACF,CAAC;AAEM,MAAM,SAAS,OAAO,OAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN;AACF,CAAC;AAEM,MAAM,SAAS,OACpB,QACA;AAAA,EACE,MAAM;AAAA,EACN,UAAU;AACZ,GACA;AAAA,EACE,cAAc;AAAA,EACd,UAAU;AACZ,CACF;AAEO,MAAM,oBAAoB,CAC/B,KACA,EAAE,OAAO,aACN;AACH,MAAI,MAAM;AACV,MAAI,QAAQ,MAAM;AAChB,UAAM,OAAM,iBAAiB,OAAO,KAAK,OAAO;AAChD,QAAI,OAAO,SAAQ,UAAU;AAC3B,YAAM;AAAA,IACR,OAAO;AACL,YAAM;AAAA,IACR;AAAA,EACF,OAAO;AACL,UAAM,CAAC;AAAA,EACT;AACA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,MAAM,GAAG;AAAG,cAAQ,KAAK,cAAc,KAAK,GAAG;AAAA,EACrD;AACA,QAAM,CAAC,QAAQ,gBAAgB,CAAC,KAAK,MAAM,MAAM,IAAI,CAAC,GAAG,KAAK,MAAM,MAAM,IAAI,CAAC,CAAC;AAChF,QAAM,SAAS;AAAA,IACb,aAAa,MAAM;AAAA,IACnB;AAAA,IACA,cAAc,EAAE,QAAQ,OAAO,EAAE;AAAA,EACnC;AACA,SAAO;AACT;",
-  "names": []
+  "sourcesContent": ["import {\n  GetProps,\n  SizeTokens,\n  SizeVariantSpreadFunction,\n  Stack,\n  StackProps,\n  VariantSpreadExtras,\n  getVariableValue,\n  isVariable,\n  styled,\n} from '@tamagui/core'\n\nexport type YStackProps = GetProps<typeof YStack>\nexport type XStackProps = YStackProps\nexport type ZStackProps = YStackProps\n\nexport const getElevation: SizeVariantSpreadFunction<StackProps> = (size, extras) => {\n  if (!size) return\n  const { tokens } = extras\n  const token = tokens.size[size]\n  const sizeNum = (isVariable(token) ? +token.val : size) as number\n  return getSizedElevation(sizeNum, extras)\n}\n\nconst fullscreenStyle = {\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n} as const\n\nconst variants = {\n  fullscreen: {\n    true: fullscreenStyle,\n  },\n  elevation: {\n    '...size': getElevation,\n  },\n} as const\n\nexport const YStack = styled(Stack, {\n  flexDirection: 'column',\n  name: 'YStack',\n  variants,\n})\n\nexport const XStack = styled(Stack, {\n  flexDirection: 'row',\n  name: 'XStack',\n  variants,\n})\n\nexport const ZStack = styled(\n  YStack,\n  {\n    name: 'ZStack',\n    position: 'relative',\n  },\n  {\n    neverFlatten: true,\n    isZStack: true,\n  }\n)\n\nexport const getSizedElevation = (\n  val: SizeTokens | number | boolean,\n  { theme, tokens }: VariantSpreadExtras<any>\n) => {\n  let num = 0\n  if (val === true) {\n    const val = getVariableValue(tokens.size['true'])\n    if (typeof val === 'number') {\n      num = val\n    } else {\n      num = 10\n    }\n  } else {\n    num = +val\n  }\n  if (process.env.NODE_ENV === 'development') {\n    if (num !== null && isNaN(num)) {\n      // eslint-disable-next-line no-console\n      console.warn('NaN shadow', num, val)\n    }\n  }\n  const [height, shadowRadius] = [Math.round(num / 4 + 1), Math.round(num / 2 + 2)]\n  const shadow = {\n    shadowColor: theme.shadowColor,\n    shadowRadius,\n    shadowOffset: { height, width: 0 },\n  }\n  return shadow\n}\n"],
+  "mappings": "AAAA;AAAA,EAIE;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAMA,MAAM,eAAsD,CAAC,MAAM,WAAW;AACnF,MAAI,CAAC;AAAM;AACX,QAAM,EAAE,OAAO,IAAI;AACnB,QAAM,QAAQ,OAAO,KAAK;AAC1B,QAAM,UAAW,WAAW,KAAK,IAAI,CAAC,MAAM,MAAM;AAClD,SAAO,kBAAkB,SAAS,MAAM;AAC1C;AAEA,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV;AAEA,MAAM,WAAW;AAAA,EACf,YAAY;AAAA,IACV,MAAM;AAAA,EACR;AAAA,EACA,WAAW;AAAA,IACT,WAAW;AAAA,EACb;AACF;AAEO,MAAM,SAAS,OAAO,OAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN;AACF,CAAC;AAEM,MAAM,SAAS,OAAO,OAAO;AAAA,EAClC,eAAe;AAAA,EACf,MAAM;AAAA,EACN;AACF,CAAC;AAEM,MAAM,SAAS;AAAA,EACpB;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AAAA,EACA;AAAA,IACE,cAAc;AAAA,IACd,UAAU;AAAA,EACZ;AACF;AAEO,MAAM,oBAAoB,CAC/B,KACA,EAAE,OAAO,OAAO,MACb;AACH,MAAI,MAAM;AACV,MAAI,QAAQ,MAAM;AAChB,UAAMA,OAAM,iBAAiB,OAAO,KAAK,OAAO;AAChD,QAAI,OAAOA,SAAQ,UAAU;AAC3B,YAAMA;AAAA,IACR,OAAO;AACL,YAAM;AAAA,IACR;AAAA,EACF,OAAO;AACL,UAAM,CAAC;AAAA,EACT;AACA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,QAAQ,QAAQ,MAAM,GAAG,GAAG;AAE9B,cAAQ,KAAK,cAAc,KAAK,GAAG;AAAA,IACrC;AAAA,EACF;AACA,QAAM,CAAC,QAAQ,YAAY,IAAI,CAAC,KAAK,MAAM,MAAM,IAAI,CAAC,GAAG,KAAK,MAAM,MAAM,IAAI,CAAC,CAAC;AAChF,QAAM,SAAS;AAAA,IACb,aAAa,MAAM;AAAA,IACnB;AAAA,IACA,cAAc,EAAE,QAAQ,OAAO,EAAE;AAAA,EACnC;AACA,SAAO;AACT;",
+  "names": ["val"]
 }

package/dist/esm/ThemeableStack.js

@@ -10,6 +10,11 @@ import {
   pressTheme,
   radiused
 } from "./variants";
+const chromelessStyle = {
+  backgroundColor: "transparent",
+  borderColor: "transparent",
+  shadowColor: "transparent"
+};
 const ThemeableStack = styled(YStack, {
   name: "SizableStack",
   variants: {
@@ -33,10 +38,12 @@ const ThemeableStack = styled(YStack, {
       }
     },
     chromeless: {
-      true: {
-        backgroundColor: "transparent",
-        borderColor: "transparent",
-        shadowColor: "transparent"
+      true: chromelessStyle,
+      all: {
+        ...chromelessStyle,
+        hoverStyle: chromelessStyle,
+        pressStyle: chromelessStyle,
+        focusStyle: chromelessStyle
       }
     }
   }

package/dist/esm/ThemeableStack.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ThemeableStack.tsx"],
-  "sourcesContent": ["import { GetProps, styled } from '@tamagui/core'\n\nimport { YStack } from './Stacks'\nimport {\n  bordered,\n  circular,\n  elevate,\n  focusTheme,\n  hoverTheme,\n  padded,\n  pressTheme,\n  radiused,\n} from './variants'\n\nexport const ThemeableStack = styled(YStack, {\n  name: 'SizableStack',\n\n  variants: {\n    // allows the type to come in for use in size\n    fontFamily: () => ({}),\n\n    backgrounded: {\n      true: {\n        backgroundColor: '$background',\n      },\n    },\n\n    radiused,\n    hoverTheme,\n    pressTheme,\n    focusTheme,\n    circular,\n    padded,\n    elevate,\n    bordered,\n\n    transparent: {\n      true: {\n        backgroundColor: 'transparent',\n      },\n    },\n\n    chromeless: {\n      true: {\n        backgroundColor: 'transparent',\n        borderColor: 'transparent',\n        shadowColor: 'transparent',\n      },\n    },\n  },\n})\n\nexport type ThemeableStackProps = GetProps<typeof ThemeableStack>\n"],
-  "mappings": "AAAA;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWO,MAAM,iBAAiB,OAAO,QAAQ;AAAA,EAC3C,MAAM;AAAA,EAEN,UAAU;AAAA,IAER,YAAY,MAAO,EAAC;AAAA,IAEpB,cAAc;AAAA,MACZ,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA,aAAa;AAAA,MACX,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IAEA,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,iBAAiB;AAAA,QACjB,aAAa;AAAA,QACb,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF,CAAC;",
+  "sourcesContent": ["import { GetProps, styled } from '@tamagui/core'\n\nimport { YStack } from './Stacks'\nimport {\n  bordered,\n  circular,\n  elevate,\n  focusTheme,\n  hoverTheme,\n  padded,\n  pressTheme,\n  radiused,\n} from './variants'\n\nconst chromelessStyle = {\n  backgroundColor: 'transparent',\n  borderColor: 'transparent',\n  shadowColor: 'transparent',\n}\n\nexport const ThemeableStack = styled(YStack, {\n  name: 'SizableStack',\n\n  variants: {\n    // allows the type to come in for use in size\n    fontFamily: () => ({}),\n\n    backgrounded: {\n      true: {\n        backgroundColor: '$background',\n      },\n    },\n\n    radiused,\n    hoverTheme,\n    pressTheme,\n    focusTheme,\n    circular,\n    padded,\n    elevate,\n    bordered,\n\n    transparent: {\n      true: {\n        backgroundColor: 'transparent',\n      },\n    },\n\n    chromeless: {\n      true: chromelessStyle,\n      all: {\n        ...chromelessStyle,\n        hoverStyle: chromelessStyle,\n        pressStyle: chromelessStyle,\n        focusStyle: chromelessStyle,\n      },\n    },\n  } as const,\n})\n\nexport type ThemeableStackProps = GetProps<typeof ThemeableStack>\n"],
+  "mappings": "AAAA,SAAmB,cAAc;AAEjC,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,kBAAkB;AAAA,EACtB,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,aAAa;AACf;AAEO,MAAM,iBAAiB,OAAO,QAAQ;AAAA,EAC3C,MAAM;AAAA,EAEN,UAAU;AAAA,IAER,YAAY,OAAO,CAAC;AAAA,IAEpB,cAAc;AAAA,MACZ,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA,aAAa;AAAA,MACX,MAAM;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IAEA,YAAY;AAAA,MACV,MAAM;AAAA,MACN,KAAK;AAAA,QACH,GAAG;AAAA,QACH,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,MACd;AAAA,IACF;AAAA,EACF;AACF,CAAC;",
   "names": []
 }

package/dist/esm/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/index.ts"],
   "sourcesContent": ["export * from './Stacks'\nexport * from './SizableStack'\nexport * from './ThemeableStack'\n"],
-  "mappings": "AAAA;AACA;AACA;",
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/dist/esm/variants.js

@@ -1,19 +1,3 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-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;
-};
 import { getElevation } from "./Stacks";
 const elevate = {
   true: (_, extras) => {
@@ -21,22 +5,25 @@ const elevate = {
   }
 };
 const bordered = (val, { props }) => {
-  return __spreadValues(__spreadValues(__spreadValues({
+  return {
     borderWidth: typeof val === "number" ? val : 1,
-    borderColor: "$borderColor"
-  }, props.hoverTheme && {
-    hoverStyle: {
-      borderColor: "$borderColorHover"
-    }
-  }), props.pressTheme && {
-    pressStyle: {
-      borderColor: "$borderColorPress"
-    }
-  }), props.focusTheme && {
-    focusStyle: {
-      borderColor: "$borderColorFocus"
+    borderColor: "$borderColor",
+    ...props.hoverTheme && {
+      hoverStyle: {
+        borderColor: "$borderColorHover"
+      }
+    },
+    ...props.pressTheme && {
+      pressStyle: {
+        borderColor: "$borderColorPress"
+      }
+    },
+    ...props.focusTheme && {
+      focusStyle: {
+        borderColor: "$borderColorFocus"
+      }
     }
-  });
+  };
 };
 const padded = {
   true: (_, extras) => {
@@ -65,8 +52,7 @@ const circular = {
       minWidth: size,
       minHeight: size,
       borderRadius: 1e5,
-      paddingVertical: 0,
-      paddingHorizontal: 0
+      padding: 0
     };
   }
 };

package/dist/esm/variants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/variants.tsx"],
-  "sourcesContent": ["import { getElevation } from './Stacks'\n\nexport const elevate = {\n  true: (_: boolean, extras: any) => {\n    return getElevation(extras.props['size'], extras)\n  },\n}\n\nexport const bordered = (val: boolean | number, { props }) => {\n  return {\n    // TODO size it with size in '...size'\n    borderWidth: typeof val === 'number' ? val : 1,\n    borderColor: '$borderColor',\n\n    ...(props.hoverTheme && {\n      hoverStyle: {\n        borderColor: '$borderColorHover',\n      },\n    }),\n\n    ...(props.pressTheme && {\n      pressStyle: {\n        borderColor: '$borderColorPress',\n      },\n    }),\n\n    ...(props.focusTheme && {\n      focusStyle: {\n        borderColor: '$borderColorFocus',\n      },\n    }),\n  }\n}\n\nexport const padded = {\n  true: (_, extras) => {\n    const { tokens, props } = extras\n    return {\n      padding: tokens.space[props.size] || tokens.space['$4'],\n    }\n  },\n}\n\nexport const radiused = {\n  true: (_, extras) => {\n    const { tokens, props } = extras\n    return {\n      borderRadius: tokens.radius[props.size] || tokens.radius['$4'],\n    }\n  },\n}\n\nexport const circular = {\n  true: (_, { props, tokens }) => {\n    const size = tokens.size[props.size]\n    return {\n      width: size,\n      height: size,\n      maxWidth: size,\n      maxHeight: size,\n      minWidth: size,\n      minHeight: size,\n      borderRadius: 100_000,\n      paddingVertical: 0,\n      paddingHorizontal: 0,\n    }\n  },\n}\n\nexport const hoverTheme = {\n  true: {\n    hoverStyle: {\n      backgroundColor: '$backgroundHover',\n      borderColor: '$borderColorHover',\n    },\n  },\n  false: {},\n}\n\nexport const pressTheme = {\n  true: {\n    pressStyle: {\n      backgroundColor: '$backgroundPress',\n      borderColor: '$borderColorPress',\n    },\n  },\n  false: {},\n}\n\nexport const focusTheme = {\n  true: {\n    focusStyle: {\n      backgroundColor: '$backgroundFocus',\n      borderColor: '$borderColorFocus',\n    },\n  },\n  false: {},\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAEO,MAAM,UAAU;AAAA,EACrB,MAAM,CAAC,GAAY,WAAgB;AACjC,WAAO,aAAa,OAAO,MAAM,SAAS,MAAM;AAAA,EAClD;AACF;AAEO,MAAM,WAAW,CAAC,KAAuB,EAAE,YAAY;AAC5D,SAAO;AAAA,IAEL,aAAa,OAAO,QAAQ,WAAW,MAAM;AAAA,IAC7C,aAAa;AAAA,KAET,MAAM,cAAc;AAAA,IACtB,YAAY;AAAA,MACV,aAAa;AAAA,IACf;AAAA,EACF,IAEI,MAAM,cAAc;AAAA,IACtB,YAAY;AAAA,MACV,aAAa;AAAA,IACf;AAAA,EACF,IAEI,MAAM,cAAc;AAAA,IACtB,YAAY;AAAA,MACV,aAAa;AAAA,IACf;AAAA,EACF;AAEJ;AAEO,MAAM,SAAS;AAAA,EACpB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,QAAQ,UAAU;AAC1B,WAAO;AAAA,MACL,SAAS,OAAO,MAAM,MAAM,SAAS,OAAO,MAAM;AAAA,IACpD;AAAA,EACF;AACF;AAEO,MAAM,WAAW;AAAA,EACtB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,QAAQ,UAAU;AAC1B,WAAO;AAAA,MACL,cAAc,OAAO,OAAO,MAAM,SAAS,OAAO,OAAO;AAAA,IAC3D;AAAA,EACF;AACF;AAEO,MAAM,WAAW;AAAA,EACtB,MAAM,CAAC,GAAG,EAAE,OAAO,aAAa;AAC9B,UAAM,OAAO,OAAO,KAAK,MAAM;AAC/B,WAAO;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,WAAW;AAAA,MACX,UAAU;AAAA,MACV,WAAW;AAAA,MACX,cAAc;AAAA,MACd,iBAAiB;AAAA,MACjB,mBAAmB;AAAA,IACrB;AAAA,EACF;AACF;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;",
+  "sourcesContent": ["import { getElevation } from './Stacks'\n\nexport const elevate = {\n  true: (_: boolean, extras: any) => {\n    return getElevation(extras.props['size'], extras)\n  },\n}\n\nexport const bordered = (val: boolean | number, { props }) => {\n  return {\n    // TODO size it with size in '...size'\n    borderWidth: typeof val === 'number' ? val : 1,\n    borderColor: '$borderColor',\n\n    ...(props.hoverTheme && {\n      hoverStyle: {\n        borderColor: '$borderColorHover',\n      },\n    }),\n\n    ...(props.pressTheme && {\n      pressStyle: {\n        borderColor: '$borderColorPress',\n      },\n    }),\n\n    ...(props.focusTheme && {\n      focusStyle: {\n        borderColor: '$borderColorFocus',\n      },\n    }),\n  }\n}\n\nexport const padded = {\n  true: (_, extras) => {\n    const { tokens, props } = extras\n    return {\n      padding: tokens.space[props.size] || tokens.space['$4'],\n    }\n  },\n}\n\nexport const radiused = {\n  true: (_, extras) => {\n    const { tokens, props } = extras\n    return {\n      borderRadius: tokens.radius[props.size] || tokens.radius['$4'],\n    }\n  },\n}\n\nexport const circular = {\n  true: (_, { props, tokens }) => {\n    const size = tokens.size[props.size]\n    return {\n      width: size,\n      height: size,\n      maxWidth: size,\n      maxHeight: size,\n      minWidth: size,\n      minHeight: size,\n      borderRadius: 100_000,\n      padding: 0,\n    }\n  },\n}\n\nexport const hoverTheme = {\n  true: {\n    hoverStyle: {\n      backgroundColor: '$backgroundHover',\n      borderColor: '$borderColorHover',\n    },\n  },\n  false: {},\n}\n\nexport const pressTheme = {\n  true: {\n    pressStyle: {\n      backgroundColor: '$backgroundPress',\n      borderColor: '$borderColorPress',\n    },\n  },\n  false: {},\n}\n\nexport const focusTheme = {\n  true: {\n    focusStyle: {\n      backgroundColor: '$backgroundFocus',\n      borderColor: '$borderColorFocus',\n    },\n  },\n  false: {},\n}\n"],
+  "mappings": "AAAA,SAAS,oBAAoB;AAEtB,MAAM,UAAU;AAAA,EACrB,MAAM,CAAC,GAAY,WAAgB;AACjC,WAAO,aAAa,OAAO,MAAM,SAAS,MAAM;AAAA,EAClD;AACF;AAEO,MAAM,WAAW,CAAC,KAAuB,EAAE,MAAM,MAAM;AAC5D,SAAO;AAAA,IAEL,aAAa,OAAO,QAAQ,WAAW,MAAM;AAAA,IAC7C,aAAa;AAAA,IAEb,GAAI,MAAM,cAAc;AAAA,MACtB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IAEA,GAAI,MAAM,cAAc;AAAA,MACtB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IAEA,GAAI,MAAM,cAAc;AAAA,MACtB,YAAY;AAAA,QACV,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF;AAEO,MAAM,SAAS;AAAA,EACpB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,QAAQ,MAAM,IAAI;AAC1B,WAAO;AAAA,MACL,SAAS,OAAO,MAAM,MAAM,SAAS,OAAO,MAAM;AAAA,IACpD;AAAA,EACF;AACF;AAEO,MAAM,WAAW;AAAA,EACtB,MAAM,CAAC,GAAG,WAAW;AACnB,UAAM,EAAE,QAAQ,MAAM,IAAI;AAC1B,WAAO;AAAA,MACL,cAAc,OAAO,OAAO,MAAM,SAAS,OAAO,OAAO;AAAA,IAC3D;AAAA,EACF;AACF;AAEO,MAAM,WAAW;AAAA,EACtB,MAAM,CAAC,GAAG,EAAE,OAAO,OAAO,MAAM;AAC9B,UAAM,OAAO,OAAO,KAAK,MAAM;AAC/B,WAAO;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,WAAW;AAAA,MACX,UAAU;AAAA,MACV,WAAW;AAAA,MACX,cAAc;AAAA,MACd,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,aAAa;AAAA,EACxB,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV;",
   "names": []
 }

package/dist/jsx/.tamagui-dynamic-eval-SizableStack.js.js

@@ -0,0 +1,23 @@
+import { getButtonSize, styled } from "@tamagui/core";
+import { YStack } from "./Stacks";
+import { bordered, circular, elevate, focusTheme, hoverTheme, pressTheme } from "./variants";
+const SizableStack = styled(YStack, {
+  name: "SizableStack",
+  backgroundColor: "$background",
+  flexDirection: "row",
+  flexShrink: 1,
+  variants: {
+    fontFamily: () => ({}),
+    hoverTheme,
+    pressTheme,
+    focusTheme,
+    circular,
+    elevate,
+    bordered,
+    size: {
+      "...size": getButtonSize
+    }
+  }
+});
+export { SizableStack };
+//# sourceMappingURL=SizableStack.js.map

package/dist/jsx/SizableStack.js

@@ -1,4 +1,5 @@
-import { getButtonSize, styled } from "@tamagui/core";
+import { styled } from "@tamagui/core";
+import { getButtonSized } from "@tamagui/get-button-sized";
 import { YStack } from "./Stacks";
 import { bordered, circular, elevate, focusTheme, hoverTheme, pressTheme } from "./variants";
 const SizableStack = styled(YStack, {
@@ -15,7 +16,7 @@ const SizableStack = styled(YStack, {
     elevate,
     bordered,
     size: {
-      "...size": getButtonSize
+      "...size": getButtonSized
     }
   }
 });

package/dist/jsx/SizableStack.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SizableStack.tsx"],
-  "sourcesContent": ["import { GetProps, getButtonSize, styled } from '@tamagui/core'\n\nimport { YStack } from './Stacks'\nimport { bordered, circular, elevate, focusTheme, hoverTheme, pressTheme } from './variants'\n\nexport const SizableStack = styled(YStack, {\n  name: 'SizableStack',\n  backgroundColor: '$background',\n  flexDirection: 'row',\n  flexShrink: 1,\n\n  variants: {\n    // allows the type to come in for use in size\n    fontFamily: () => ({}),\n\n    hoverTheme,\n    pressTheme,\n    focusTheme,\n    circular,\n    elevate,\n    bordered,\n\n    size: {\n      '...size': getButtonSize,\n    },\n  },\n})\n\nexport type SizableStackProps = GetProps<typeof SizableStack>\n"],
-  "mappings": "AAAA;AAEA;AACA;AAEO,MAAM,eAAe,OAAO,QAAQ;AAAA,EACzC,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,YAAY;AAAA,EAEZ,UAAU;AAAA,IAER,YAAY,MAAO,EAAC;AAAA,IAEpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;",
+  "sourcesContent": ["import { GetProps, styled } from '@tamagui/core'\nimport { getButtonSized } from '@tamagui/get-button-sized'\n\nimport { YStack } from './Stacks'\nimport { bordered, circular, elevate, focusTheme, hoverTheme, pressTheme } from './variants'\n\nexport const SizableStack = styled(YStack, {\n  name: 'SizableStack',\n  backgroundColor: '$background',\n  flexDirection: 'row',\n  flexShrink: 1,\n\n  variants: {\n    // allows the type to come in for use in size\n    fontFamily: () => ({}),\n\n    hoverTheme,\n    pressTheme,\n    focusTheme,\n    circular,\n    elevate,\n    bordered,\n\n    size: {\n      '...size': getButtonSized,\n    },\n  } as const,\n})\n\nexport type SizableStackProps = GetProps<typeof SizableStack>\n"],
+  "mappings": "AAAA,SAAmB,cAAc;AACjC,SAAS,sBAAsB;AAE/B,SAAS,cAAc;AACvB,SAAS,UAAU,UAAU,SAAS,YAAY,YAAY,kBAAkB;AAEzE,MAAM,eAAe,OAAO,QAAQ;AAAA,EACzC,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,YAAY;AAAA,EAEZ,UAAU;AAAA,IAER,YAAY,OAAO,CAAC;AAAA,IAEpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,EACF;AACF,CAAC;",
   "names": []
 }

package/dist/jsx/Stacks.js

@@ -37,13 +37,17 @@ const XStack = styled(Stack, {
   name: "XStack",
   variants
 });
-const ZStack = styled(YStack, {
-  name: "ZStack",
-  position: "relative"
-}, {
-  neverFlatten: true,
-  isZStack: true
-});
+const ZStack = styled(
+  YStack,
+  {
+    name: "ZStack",
+    position: "relative"
+  },
+  {
+    neverFlatten: true,
+    isZStack: true
+  }
+);
 const getSizedElevation = (val, { theme, tokens }) => {
   let num = 0;
   if (val === true) {
@@ -57,8 +61,9 @@ const getSizedElevation = (val, { theme, tokens }) => {
     num = +val;
   }
   if (process.env.NODE_ENV === "development") {
-    if (isNaN(num))
+    if (num !== null && isNaN(num)) {
       console.warn("NaN shadow", num, val);
+    }
   }
   const [height, shadowRadius] = [Math.round(num / 4 + 1), Math.round(num / 2 + 2)];
   const shadow = {