@tamagui/demos 1.0.1-beta.91 → 1.0.1-beta.92

package/dist/jsx/AnimationsDemo.js

@@ -1,7 +1,7 @@
 import { Play } from "@tamagui/feather-icons";
 import { Button, Square, useControllableState } from "tamagui";
 import { LogoIcon } from "./TamaguiLogo";
-var AnimationsDemo_default = (props) => {
+function AnimationsDemo(props) {
   const [positionI, setPositionI] = useControllableState({
     strategy: "most-recent-wins",
     prop: props.position,
@@ -21,7 +21,7 @@ var AnimationsDemo_default = (props) => {
     }} {...position}>{props.children || <LogoIcon downscale={0.75} />}</Square>
     <Button pos="absolute" b={20} l={20} icon={Play} theme={props.tint} size="$5" circular onPress={() => next()} />
   </>;
-};
+}
 const positions = [
   {
     x: 0,
@@ -55,7 +55,7 @@ const positions = [
   }
 ];
 export {
-  AnimationsDemo_default as default,
+  AnimationsDemo,
   positions
 };
 //# sourceMappingURL=AnimationsDemo.js.map

package/dist/jsx/AnimationsDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/AnimationsDemo.tsx"],
-  "sourcesContent": ["import { Play } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { Button, Square, useControllableState } from 'tamagui'\n\nimport { LogoIcon } from './TamaguiLogo'\n\nexport default (props) => {\n  const [positionI, setPositionI] = useControllableState({\n    strategy: 'most-recent-wins',\n    prop: props.position,\n    defaultProp: 0,\n  })\n  const position = positions[positionI]\n  const next = (to = 1) => {\n    setPositionI((x) => {\n      return (x + to) % positions.length\n    })\n  }\n\n  return (\n    <>\n      <Square\n        focusable={false}\n        animation={props.animation || 'bouncy'}\n        onPress={() => next()}\n        size={110}\n        bc=\"$pink10\"\n        br=\"$9\"\n        hoverStyle={{\n          scale: 1.1,\n        }}\n        pressStyle={{\n          scale: 0.9,\n        }}\n        {...position}\n      >\n        {props.children || <LogoIcon downscale={0.75} />}\n      </Square>\n\n      <Button\n        pos=\"absolute\"\n        b={20}\n        l={20}\n        icon={Play}\n        theme={props.tint}\n        size=\"$5\"\n        circular\n        onPress={() => next()}\n      />\n    </>\n  )\n}\n\nexport const positions = [\n  {\n    x: 0,\n    y: 0,\n    scale: 1,\n    rotate: '0deg',\n  },\n  {\n    x: -50,\n    y: -50,\n    scale: 0.5,\n    rotate: '-45deg',\n    hoverStyle: {\n      scale: 0.6,\n    },\n    pressStyle: {\n      scale: 0.4,\n    },\n  },\n  {\n    x: 50,\n    y: 50,\n    scale: 1,\n    rotate: '180deg',\n    hoverStyle: {\n      scale: 1.1,\n    },\n    pressStyle: {\n      scale: 0.9,\n    },\n  },\n]\n"],
-  "mappings": "AAAA;AAEA;AAEA;AAEA,IAAO,yBAAQ,CAAC,UAAU;AACxB,QAAM,CAAC,WAAW,gBAAgB,qBAAqB;AAAA,IACrD,UAAU;AAAA,IACV,MAAM,MAAM;AAAA,IACZ,aAAa;AAAA,EACf,CAAC;AACD,QAAM,WAAW,UAAU;AAC3B,QAAM,OAAO,CAAC,KAAK,MAAM;AACvB,iBAAa,CAAC,MAAM;AAClB,aAAQ,KAAI,MAAM,UAAU;AAAA,IAC9B,CAAC;AAAA,EACH;AAEA,SACE;AAAA,IACE,CAAC,OACC,WAAW,OACX,WAAW,MAAM,aAAa,UAC9B,SAAS,MAAM,KAAK,GACpB,MAAM,KACN,GAAG,UACH,GAAG,KACH,YAAY;AAAA,MACV,OAAO;AAAA,IACT,GACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT,OACI,WAEH,MAAM,YAAY,CAAC,SAAS,WAAW,MAAM,GAChD,EAhBC;AAAA,IAkBD,CAAC,OACC,IAAI,WACJ,GAAG,IACH,GAAG,IACH,MAAM,MACN,OAAO,MAAM,MACb,KAAK,KACL,SACA,SAAS,MAAM,KAAK,GACtB;AAAA,EACF;AAEJ;AAEO,MAAM,YAAY;AAAA,EACvB;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { Play } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { Button, Square, useControllableState } from 'tamagui'\n\nimport { LogoIcon } from './TamaguiLogo'\n\nexport function AnimationsDemo(props) {\n  const [positionI, setPositionI] = useControllableState({\n    strategy: 'most-recent-wins',\n    prop: props.position,\n    defaultProp: 0,\n  })\n  const position = positions[positionI]\n  const next = (to = 1) => {\n    setPositionI((x) => {\n      return (x + to) % positions.length\n    })\n  }\n\n  return (\n    <>\n      <Square\n        focusable={false}\n        animation={props.animation || 'bouncy'}\n        onPress={() => next()}\n        size={110}\n        bc=\"$pink10\"\n        br=\"$9\"\n        hoverStyle={{\n          scale: 1.1,\n        }}\n        pressStyle={{\n          scale: 0.9,\n        }}\n        {...position}\n      >\n        {props.children || <LogoIcon downscale={0.75} />}\n      </Square>\n\n      <Button\n        pos=\"absolute\"\n        b={20}\n        l={20}\n        icon={Play}\n        theme={props.tint}\n        size=\"$5\"\n        circular\n        onPress={() => next()}\n      />\n    </>\n  )\n}\n\nexport const positions = [\n  {\n    x: 0,\n    y: 0,\n    scale: 1,\n    rotate: '0deg',\n  },\n  {\n    x: -50,\n    y: -50,\n    scale: 0.5,\n    rotate: '-45deg',\n    hoverStyle: {\n      scale: 0.6,\n    },\n    pressStyle: {\n      scale: 0.4,\n    },\n  },\n  {\n    x: 50,\n    y: 50,\n    scale: 1,\n    rotate: '180deg',\n    hoverStyle: {\n      scale: 1.1,\n    },\n    pressStyle: {\n      scale: 0.9,\n    },\n  },\n]\n"],
+  "mappings": "AAAA;AAEA;AAEA;AAEO,wBAAwB,OAAO;AACpC,QAAM,CAAC,WAAW,gBAAgB,qBAAqB;AAAA,IACrD,UAAU;AAAA,IACV,MAAM,MAAM;AAAA,IACZ,aAAa;AAAA,EACf,CAAC;AACD,QAAM,WAAW,UAAU;AAC3B,QAAM,OAAO,CAAC,KAAK,MAAM;AACvB,iBAAa,CAAC,MAAM;AAClB,aAAQ,KAAI,MAAM,UAAU;AAAA,IAC9B,CAAC;AAAA,EACH;AAEA,SACE;AAAA,IACE,CAAC,OACC,WAAW,OACX,WAAW,MAAM,aAAa,UAC9B,SAAS,MAAM,KAAK,GACpB,MAAM,KACN,GAAG,UACH,GAAG,KACH,YAAY;AAAA,MACV,OAAO;AAAA,IACT,GACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT,OACI,WAEH,MAAM,YAAY,CAAC,SAAS,WAAW,MAAM,GAChD,EAhBC;AAAA,IAkBD,CAAC,OACC,IAAI,WACJ,GAAG,IACH,GAAG,IACH,MAAM,MACN,OAAO,MAAM,MACb,KAAK,KACL,SACA,SAAS,MAAM,KAAK,GACtB;AAAA,EACF;AAEJ;AAEO,MAAM,YAAY;AAAA,EACvB;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/jsx/AnimationsEnterDemo.js

@@ -2,7 +2,7 @@ import { useRef, useState } from "react";
 import { Button, Square, YStack } from "tamagui";
 import { LogoIcon } from "./TamaguiLogo";
 import { useIsIntersecting } from "./useOnIntersecting";
-var AnimationsEnterDemo_default = () => {
+function AnimationsEnterDemo() {
   const ref = useRef(null);
   const hasIntersected = useIsIntersecting(ref, { once: true });
   const [key, setKey] = useState(0);
@@ -17,8 +17,8 @@ var AnimationsEnterDemo_default = () => {
     }} animation="bouncy" elevation="$4" size={110} opacity={1} scale={1} y={0} bc="$pink10" br="$9"><LogoIcon downscale={0.75} /></Square>
     <Button size="$3" mt="$4" onPress={() => setKey(Math.random())}>Re-mount</Button>
   </>;
-};
+}
 export {
-  AnimationsEnterDemo_default as default
+  AnimationsEnterDemo
 };
 //# sourceMappingURL=AnimationsEnterDemo.js.map

package/dist/jsx/AnimationsEnterDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/AnimationsEnterDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { useRef, useState } from 'react'\nimport { Button, Square, YStack } from 'tamagui'\n\nimport { LogoIcon } from './TamaguiLogo'\nimport { useIsIntersecting } from './useOnIntersecting'\n\nexport default () => {\n  const ref = useRef<HTMLElement>(null)\n  const hasIntersected = useIsIntersecting(ref, { once: true })\n  const [key, setKey] = useState(0)\n\n  if (!hasIntersected) {\n    return <YStack ref={ref} />\n  }\n\n  return (\n    <>\n      <Square\n        key={key}\n        enterStyle={{\n          scale: 1.5,\n          y: -10,\n          opacity: 0,\n        }}\n        animation=\"bouncy\"\n        elevation=\"$4\"\n        size={110}\n        opacity={1}\n        scale={1}\n        y={0}\n        bc=\"$pink10\"\n        br=\"$9\"\n      >\n        <LogoIcon downscale={0.75} />\n      </Square>\n\n      <Button size=\"$3\" mt=\"$4\" onPress={() => setKey(Math.random())}>\n        Re-mount\n      </Button>\n    </>\n  )\n}\n"],
-  "mappings": "AACA;AACA;AAEA;AACA;AAEA,IAAO,8BAAQ,MAAM;AACnB,QAAM,MAAM,OAAoB,IAAI;AACpC,QAAM,iBAAiB,kBAAkB,KAAK,EAAE,MAAM,KAAK,CAAC;AAC5D,QAAM,CAAC,KAAK,UAAU,SAAS,CAAC;AAEhC,MAAI,CAAC,gBAAgB;AACnB,WAAO,CAAC,OAAO,KAAK,KAAK;AAAA,EAC3B;AAEA,SACE;AAAA,IACE,CAAC,OACC,KAAK,KACL,YAAY;AAAA,MACV,OAAO;AAAA,MACP,GAAG;AAAA,MACH,SAAS;AAAA,IACX,GACA,UAAU,SACV,UAAU,KACV,MAAM,KACN,SAAS,GACT,OAAO,GACP,GAAG,GACH,GAAG,UACH,GAAG,KAEH,CAAC,SAAS,WAAW,MAAM,EAC7B,EAjBC;AAAA,IAmBD,CAAC,OAAO,KAAK,KAAK,GAAG,KAAK,SAAS,MAAM,OAAO,KAAK,OAAO,CAAC,GAAG,QAEhE,EAFC;AAAA,EAGH;AAEJ;",
+  "sourcesContent": ["import React from 'react'\nimport { useRef, useState } from 'react'\nimport { Button, Square, YStack } from 'tamagui'\n\nimport { LogoIcon } from './TamaguiLogo'\nimport { useIsIntersecting } from './useOnIntersecting'\n\nexport function AnimationsEnterDemo() {\n  const ref = useRef<HTMLElement>(null)\n  const hasIntersected = useIsIntersecting(ref, { once: true })\n  const [key, setKey] = useState(0)\n\n  if (!hasIntersected) {\n    return <YStack ref={ref} />\n  }\n\n  return (\n    <>\n      <Square\n        key={key}\n        enterStyle={{\n          scale: 1.5,\n          y: -10,\n          opacity: 0,\n        }}\n        animation=\"bouncy\"\n        elevation=\"$4\"\n        size={110}\n        opacity={1}\n        scale={1}\n        y={0}\n        bc=\"$pink10\"\n        br=\"$9\"\n      >\n        <LogoIcon downscale={0.75} />\n      </Square>\n\n      <Button size=\"$3\" mt=\"$4\" onPress={() => setKey(Math.random())}>\n        Re-mount\n      </Button>\n    </>\n  )\n}\n"],
+  "mappings": "AACA;AACA;AAEA;AACA;AAEO,+BAA+B;AACpC,QAAM,MAAM,OAAoB,IAAI;AACpC,QAAM,iBAAiB,kBAAkB,KAAK,EAAE,MAAM,KAAK,CAAC;AAC5D,QAAM,CAAC,KAAK,UAAU,SAAS,CAAC;AAEhC,MAAI,CAAC,gBAAgB;AACnB,WAAO,CAAC,OAAO,KAAK,KAAK;AAAA,EAC3B;AAEA,SACE;AAAA,IACE,CAAC,OACC,KAAK,KACL,YAAY;AAAA,MACV,OAAO;AAAA,MACP,GAAG;AAAA,MACH,SAAS;AAAA,IACX,GACA,UAAU,SACV,UAAU,KACV,MAAM,KACN,SAAS,GACT,OAAO,GACP,GAAG,GACH,GAAG,UACH,GAAG,KAEH,CAAC,SAAS,WAAW,MAAM,EAC7B,EAjBC;AAAA,IAmBD,CAAC,OAAO,KAAK,KAAK,GAAG,KAAK,SAAS,MAAM,OAAO,KAAK,OAAO,CAAC,GAAG,QAEhE,EAFC;AAAA,EAGH;AAEJ;",
   "names": []
 }

package/dist/jsx/AnimationsHoverDemo.js

@@ -1,13 +1,13 @@
 import { Square } from "tamagui";
 import { LogoIcon } from "./TamaguiLogo";
-var AnimationsHoverDemo_default = () => {
+function AnimationsHoverDemo() {
   return <Square bc="$pink10" animation="bouncy" elevation="$4" size={110} br="$9" hoverStyle={{
     scale: 1.2
   }} pressStyle={{
     scale: 0.9
   }}><LogoIcon downscale={0.75} /></Square>;
-};
+}
 export {
-  AnimationsHoverDemo_default as default
+  AnimationsHoverDemo
 };
 //# sourceMappingURL=AnimationsHoverDemo.js.map

package/dist/jsx/AnimationsHoverDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/AnimationsHoverDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { Square } from 'tamagui'\n\nimport { LogoIcon } from './TamaguiLogo'\n\nexport default () => {\n  return (\n    <Square\n      bc=\"$pink10\"\n      animation=\"bouncy\"\n      elevation=\"$4\"\n      size={110}\n      br=\"$9\"\n      hoverStyle={{\n        scale: 1.2,\n      }}\n      pressStyle={{\n        scale: 0.9,\n      }}\n    >\n      <LogoIcon downscale={0.75} />\n    </Square>\n  )\n}\n"],
-  "mappings": "AACA;AAEA;AAEA,IAAO,8BAAQ,MAAM;AACnB,SACE,CAAC,OACC,GAAG,UACH,UAAU,SACV,UAAU,KACV,MAAM,KACN,GAAG,KACH,YAAY;AAAA,IACV,OAAO;AAAA,EACT,GACA,YAAY;AAAA,IACV,OAAO;AAAA,EACT,GAEA,CAAC,SAAS,WAAW,MAAM,EAC7B,EAdC;AAgBL;",
+  "sourcesContent": ["import React from 'react'\nimport { Square } from 'tamagui'\n\nimport { LogoIcon } from './TamaguiLogo'\n\nexport function AnimationsHoverDemo() {\n  return (\n    <Square\n      bc=\"$pink10\"\n      animation=\"bouncy\"\n      elevation=\"$4\"\n      size={110}\n      br=\"$9\"\n      hoverStyle={{\n        scale: 1.2,\n      }}\n      pressStyle={{\n        scale: 0.9,\n      }}\n    >\n      <LogoIcon downscale={0.75} />\n    </Square>\n  )\n}\n"],
+  "mappings": "AACA;AAEA;AAEO,+BAA+B;AACpC,SACE,CAAC,OACC,GAAG,UACH,UAAU,SACV,UAAU,KACV,MAAM,KACN,GAAG,KACH,YAAY;AAAA,IACV,OAAO;AAAA,EACT,GACA,YAAY;AAAA,IACV,OAAO;AAAA,EACT,GAEA,CAAC,SAAS,WAAW,MAAM,EAC7B,EAdC;AAgBL;",
   "names": []
 }

package/dist/jsx/AnimationsPresenceDemo.js

@@ -12,7 +12,7 @@ const YStackEnterable = styled(YStack, {
     isRight: { true: { x: 300, opacity: 0 } }
   }
 });
-var AnimationsPresenceDemo_default = () => {
+function AnimationsPresenceDemo() {
   const [[page, direction], setPage] = useState([0, 0]);
   const imageIndex = wrap(0, images.length, page);
   const paginate = (newDirection) => {
@@ -25,13 +25,13 @@ var AnimationsPresenceDemo_default = () => {
     <Button accessibilityLabel="Carousel left" icon={ArrowLeft} size="$5" pos="absolute" l="$4" circular elevate onPress={() => paginate(-1)} />
     <Button accessibilityLabel="Carousel right" icon={ArrowRight} size="$5" pos="absolute" r="$4" circular elevate onPress={() => paginate(1)} />
   </XStack>;
-};
+}
 const wrap = (min, max, v) => {
   const rangeSize = max - min;
   return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
 };
 export {
-  AnimationsPresenceDemo_default as default,
+  AnimationsPresenceDemo,
   images
 };
 //# sourceMappingURL=AnimationsPresenceDemo.js.map

package/dist/jsx/AnimationsPresenceDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/AnimationsPresenceDemo.tsx"],
-  "sourcesContent": ["// adapted from Framer Motion\n// https://codesandbox.io/s/framer-motion-image-gallery-pqvx3?from-embed=&file=/src/Example.tsx:1422-1470\n\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { ArrowLeft, ArrowRight } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { useState } from 'react'\nimport { Button, Image, XStack, YStack, styled } from 'tamagui'\n\n// @ts-ignore\nimport photo1 from '../../public/photo1.jpg'\n// @ts-ignore\nimport photo2 from '../../public/photo2.jpg'\n// @ts-ignore\nimport photo3 from '../../public/photo3.jpg'\n\nexport const images = [photo1.src, photo2.src, photo3.src]\n\nconst YStackEnterable = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -300, opacity: 0 } },\n    isRight: { true: { x: 300, opacity: 0 } },\n  },\n})\n\nexport default () => {\n  const [[page, direction], setPage] = useState([0, 0])\n\n  const imageIndex = wrap(0, images.length, page)\n\n  const paginate = (newDirection: number) => {\n    setPage([page + newDirection, newDirection])\n  }\n\n  const enterVariant = direction === 1 || direction === 0 ? 'isRight' : 'isLeft'\n  const exitVariant = direction === 1 ? 'isLeft' : 'isRight'\n\n  return (\n    <XStack ov=\"hidden\" bc=\"#000\" pos=\"relative\" h={300} w=\"100%\" ai=\"center\">\n      <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}>\n        <YStackEnterable key={page} animation=\"bouncy\" fullscreen x={0} o={1}>\n          <Image src={images[imageIndex]} width={700} height={300} />\n        </YStackEnterable>\n      </AnimatePresence>\n\n      <Button\n        accessibilityLabel=\"Carousel left\"\n        icon={ArrowLeft}\n        size=\"$5\"\n        pos=\"absolute\"\n        l=\"$4\"\n        circular\n        elevate\n        onPress={() => paginate(-1)}\n      />\n      <Button\n        accessibilityLabel=\"Carousel right\"\n        icon={ArrowRight}\n        size=\"$5\"\n        pos=\"absolute\"\n        r=\"$4\"\n        circular\n        elevate\n        onPress={() => paginate(1)}\n      />\n    </XStack>\n  )\n}\n\nconst wrap = (min: number, max: number, v: number) => {\n  const rangeSize = max - min\n  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min\n}\n"],
-  "mappings": "AAGA;AACA;AAEA;AACA;AAGA;AAEA;AAEA;AAEO,MAAM,SAAS,CAAC,OAAO,KAAK,OAAO,KAAK,OAAO,GAAG;AAEzD,MAAM,kBAAkB,OAAO,QAAQ;AAAA,EACrC,UAAU;AAAA,IACR,QAAQ,EAAE,MAAM,EAAE,GAAG,MAAM,SAAS,EAAE,EAAE;AAAA,IACxC,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,SAAS,EAAE,EAAE;AAAA,EAC1C;AACF,CAAC;AAED,IAAO,iCAAQ,MAAM;AACnB,QAAM,CAAC,CAAC,MAAM,YAAY,WAAW,SAAS,CAAC,GAAG,CAAC,CAAC;AAEpD,QAAM,aAAa,KAAK,GAAG,OAAO,QAAQ,IAAI;AAE9C,QAAM,WAAW,CAAC,iBAAyB;AACzC,YAAQ,CAAC,OAAO,cAAc,YAAY,CAAC;AAAA,EAC7C;AAEA,QAAM,eAAe,cAAc,KAAK,cAAc,IAAI,YAAY;AACtE,QAAM,cAAc,cAAc,IAAI,WAAW;AAEjD,SACE,CAAC,OAAO,GAAG,SAAS,GAAG,OAAO,IAAI,WAAW,GAAG,KAAK,EAAE,OAAO,GAAG;AAAA,IAC/D,CAAC,gBAAgB,cAAc,cAAc,aAAa,aACxD,CAAC,gBAAgB,KAAK,MAAM,UAAU,SAAS,WAAW,GAAG,GAAG,GAAG,GACjE,CAAC,MAAM,KAAK,OAAO,aAAa,OAAO,KAAK,QAAQ,KAAK,EAC3D,EAFC,gBAGH,EAJC;AAAA,IAMD,CAAC,OACC,mBAAmB,gBACnB,MAAM,WACN,KAAK,KACL,IAAI,WACJ,EAAE,KACF,SACA,QACA,SAAS,MAAM,SAAS,EAAE,GAC5B;AAAA,IACA,CAAC,OACC,mBAAmB,iBACnB,MAAM,YACN,KAAK,KACL,IAAI,WACJ,EAAE,KACF,SACA,QACA,SAAS,MAAM,SAAS,CAAC,GAC3B;AAAA,EACF,EA3BC;AA6BL;AAEA,MAAM,OAAO,CAAC,KAAa,KAAa,MAAc;AACpD,QAAM,YAAY,MAAM;AACxB,SAAW,MAAI,OAAO,YAAa,aAAa,YAAa;AAC/D;",
+  "sourcesContent": ["// adapted from Framer Motion\n// https://codesandbox.io/s/framer-motion-image-gallery-pqvx3?from-embed=&file=/src/Example.tsx:1422-1470\n\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { ArrowLeft, ArrowRight } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { useState } from 'react'\nimport { Button, Image, XStack, YStack, styled } from 'tamagui'\n\n// @ts-ignore\nimport photo1 from '../../public/photo1.jpg'\n// @ts-ignore\nimport photo2 from '../../public/photo2.jpg'\n// @ts-ignore\nimport photo3 from '../../public/photo3.jpg'\n\nexport const images = [photo1.src, photo2.src, photo3.src]\n\nconst YStackEnterable = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -300, opacity: 0 } },\n    isRight: { true: { x: 300, opacity: 0 } },\n  },\n})\n\nexport function AnimationsPresenceDemo() {\n  const [[page, direction], setPage] = useState([0, 0])\n\n  const imageIndex = wrap(0, images.length, page)\n\n  const paginate = (newDirection: number) => {\n    setPage([page + newDirection, newDirection])\n  }\n\n  const enterVariant = direction === 1 || direction === 0 ? 'isRight' : 'isLeft'\n  const exitVariant = direction === 1 ? 'isLeft' : 'isRight'\n\n  return (\n    <XStack ov=\"hidden\" bc=\"#000\" pos=\"relative\" h={300} w=\"100%\" ai=\"center\">\n      <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}>\n        <YStackEnterable key={page} animation=\"bouncy\" fullscreen x={0} o={1}>\n          <Image src={images[imageIndex]} width={700} height={300} />\n        </YStackEnterable>\n      </AnimatePresence>\n\n      <Button\n        accessibilityLabel=\"Carousel left\"\n        icon={ArrowLeft}\n        size=\"$5\"\n        pos=\"absolute\"\n        l=\"$4\"\n        circular\n        elevate\n        onPress={() => paginate(-1)}\n      />\n      <Button\n        accessibilityLabel=\"Carousel right\"\n        icon={ArrowRight}\n        size=\"$5\"\n        pos=\"absolute\"\n        r=\"$4\"\n        circular\n        elevate\n        onPress={() => paginate(1)}\n      />\n    </XStack>\n  )\n}\n\nconst wrap = (min: number, max: number, v: number) => {\n  const rangeSize = max - min\n  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min\n}\n"],
+  "mappings": "AAGA;AACA;AAEA;AACA;AAGA;AAEA;AAEA;AAEO,MAAM,SAAS,CAAC,OAAO,KAAK,OAAO,KAAK,OAAO,GAAG;AAEzD,MAAM,kBAAkB,OAAO,QAAQ;AAAA,EACrC,UAAU;AAAA,IACR,QAAQ,EAAE,MAAM,EAAE,GAAG,MAAM,SAAS,EAAE,EAAE;AAAA,IACxC,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,SAAS,EAAE,EAAE;AAAA,EAC1C;AACF,CAAC;AAEM,kCAAkC;AACvC,QAAM,CAAC,CAAC,MAAM,YAAY,WAAW,SAAS,CAAC,GAAG,CAAC,CAAC;AAEpD,QAAM,aAAa,KAAK,GAAG,OAAO,QAAQ,IAAI;AAE9C,QAAM,WAAW,CAAC,iBAAyB;AACzC,YAAQ,CAAC,OAAO,cAAc,YAAY,CAAC;AAAA,EAC7C;AAEA,QAAM,eAAe,cAAc,KAAK,cAAc,IAAI,YAAY;AACtE,QAAM,cAAc,cAAc,IAAI,WAAW;AAEjD,SACE,CAAC,OAAO,GAAG,SAAS,GAAG,OAAO,IAAI,WAAW,GAAG,KAAK,EAAE,OAAO,GAAG;AAAA,IAC/D,CAAC,gBAAgB,cAAc,cAAc,aAAa,aACxD,CAAC,gBAAgB,KAAK,MAAM,UAAU,SAAS,WAAW,GAAG,GAAG,GAAG,GACjE,CAAC,MAAM,KAAK,OAAO,aAAa,OAAO,KAAK,QAAQ,KAAK,EAC3D,EAFC,gBAGH,EAJC;AAAA,IAMD,CAAC,OACC,mBAAmB,gBACnB,MAAM,WACN,KAAK,KACL,IAAI,WACJ,EAAE,KACF,SACA,QACA,SAAS,MAAM,SAAS,EAAE,GAC5B;AAAA,IACA,CAAC,OACC,mBAAmB,iBACnB,MAAM,YACN,KAAK,KACL,IAAI,WACJ,EAAE,KACF,SACA,QACA,SAAS,MAAM,SAAS,CAAC,GAC3B;AAAA,EACF,EA3BC;AA6BL;AAEA,MAAM,OAAO,CAAC,KAAa,KAAa,MAAc;AACpD,QAAM,YAAY,MAAM;AACxB,SAAW,MAAI,OAAO,YAAa,aAAa,YAAa;AAC/D;",
   "names": []
 }

package/dist/jsx/AvatarDemo.js

@@ -12,6 +12,6 @@ function AvatarDemo() {
   </XStack>;
 }
 export {
-  AvatarDemo as default
+  AvatarDemo
 };
 //# sourceMappingURL=AvatarDemo.js.map

package/dist/jsx/AvatarDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/AvatarDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { Avatar, XStack } from 'tamagui'\n\nexport default function AvatarDemo() {\n  return (\n    <XStack ai=\"center\" space=\"$6\">\n      <Avatar circular size=\"$10\">\n        <Avatar.Image\n          accessibilityLabel=\"Cam\"\n          src=\"https://images.unsplash.com/photo-1548142813-c348350df52b?&w=150&h=150&dpr=2&q=80\"\n        />\n        <Avatar.Fallback backgroundColor=\"$blue10\" />\n      </Avatar>\n\n      <Avatar circular size=\"$8\">\n        <Avatar.Image\n          accessibilityLabel=\"Nate Wienert\"\n          src=\"https://images.unsplash.com/photo-1531384441138-2736e62e0919?&w=100&h=100&dpr=2&q=80\"\n        />\n        <Avatar.Fallback delayMs={600} backgroundColor=\"$blue10\" />\n      </Avatar>\n    </XStack>\n  )\n}\n"],
-  "mappings": "AACA;AAEe,sBAAsB;AACnC,SACE,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,IACxB,CAAC,OAAO,SAAS,KAAK;AAAA,MACpB,CAAC,OAAO,MACN,mBAAmB,MACnB,KAAI,qFACN;AAAA,MACA,CAAC,OAAO,SAAS,gBAAgB,UAAU;AAAA,IAC7C,EANC;AAAA,IAQD,CAAC,OAAO,SAAS,KAAK;AAAA,MACpB,CAAC,OAAO,MACN,mBAAmB,eACnB,KAAI,wFACN;AAAA,MACA,CAAC,OAAO,SAAS,SAAS,KAAK,gBAAgB,UAAU;AAAA,IAC3D,EANC;AAAA,EAOH,EAhBC;AAkBL;",
+  "sourcesContent": ["import React from 'react'\nimport { Avatar, XStack } from 'tamagui'\n\nexport function AvatarDemo() {\n  return (\n    <XStack ai=\"center\" space=\"$6\">\n      <Avatar circular size=\"$10\">\n        <Avatar.Image\n          accessibilityLabel=\"Cam\"\n          src=\"https://images.unsplash.com/photo-1548142813-c348350df52b?&w=150&h=150&dpr=2&q=80\"\n        />\n        <Avatar.Fallback backgroundColor=\"$blue10\" />\n      </Avatar>\n\n      <Avatar circular size=\"$8\">\n        <Avatar.Image\n          accessibilityLabel=\"Nate Wienert\"\n          src=\"https://images.unsplash.com/photo-1531384441138-2736e62e0919?&w=100&h=100&dpr=2&q=80\"\n        />\n        <Avatar.Fallback delayMs={600} backgroundColor=\"$blue10\" />\n      </Avatar>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AACA;AAEO,sBAAsB;AAC3B,SACE,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,IACxB,CAAC,OAAO,SAAS,KAAK;AAAA,MACpB,CAAC,OAAO,MACN,mBAAmB,MACnB,KAAI,qFACN;AAAA,MACA,CAAC,OAAO,SAAS,gBAAgB,UAAU;AAAA,IAC7C,EANC;AAAA,IAQD,CAAC,OAAO,SAAS,KAAK;AAAA,MACpB,CAAC,OAAO,MACN,mBAAmB,eACnB,KAAI,wFACN;AAAA,MACA,CAAC,OAAO,SAAS,SAAS,KAAK,gBAAgB,UAAU;AAAA,IAC3D,EANC;AAAA,EAOH,EAhBC;AAkBL;",
   "names": []
 }

package/dist/jsx/ButtonDemo.js

@@ -19,6 +19,6 @@ function ButtonDemo(props) {
   </YStack>;
 }
 export {
-  ButtonDemo as default
+  ButtonDemo
 };
 //# sourceMappingURL=ButtonDemo.js.map

package/dist/jsx/ButtonDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ButtonDemo.tsx"],
-  "sourcesContent": ["import { Activity, Airplay } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { Button, Group, XStack, YStack } from 'tamagui'\n\nexport default function ButtonDemo(props) {\n  return (\n    <YStack p=\"$3\" space {...props}>\n      <Button>Plain</Button>\n      <Button als=\"center\" icon={Airplay} size=\"$6\">\n        Large\n      </Button>\n      <Group>\n        <Button w=\"50%\" size=\"$3\" theme=\"alt2\">\n          Alt2\n        </Button>\n        <Button w=\"50%\" size=\"$3\" theme=\"yellow\">\n          Yellow\n        </Button>\n      </Group>\n      <XStack space=\"$2\">\n        <Button themeInverse size=\"$3\">\n          Small Inverse\n        </Button>\n        <Button iconAfter={Activity} size=\"$3\">\n          After\n        </Button>\n      </XStack>\n      <Group>\n        <Button w=\"50%\" size=\"$2\" disabled>\n          disabled\n        </Button>\n        <Button w=\"50%\" size=\"$2\" chromeless>\n          chromeless\n        </Button>\n      </Group>\n    </YStack>\n  )\n}\n"],
-  "mappings": "AAAA;AAEA;AAEe,oBAAoB,OAAO;AACxC,SACE,CAAC,OAAO,EAAE,KAAK,UAAU;AAAA,IACvB,CAAC,OAAO,KAAK,EAAZ;AAAA,IACD,CAAC,OAAO,IAAI,SAAS,MAAM,SAAS,KAAK,KAAK,KAE9C,EAFC;AAAA,IAGD,CAAC;AAAA,MACC,CAAC,OAAO,EAAE,MAAM,KAAK,KAAK,MAAM,OAAO,IAEvC,EAFC;AAAA,MAGD,CAAC,OAAO,EAAE,MAAM,KAAK,KAAK,MAAM,SAAS,MAEzC,EAFC;AAAA,IAGH,EAPC;AAAA,IAQD,CAAC,OAAO,MAAM;AAAA,MACZ,CAAC,OAAO,aAAa,KAAK,KAAK,aAE/B,EAFC;AAAA,MAGD,CAAC,OAAO,WAAW,UAAU,KAAK,KAAK,KAEvC,EAFC;AAAA,IAGH,EAPC;AAAA,IAQD,CAAC;AAAA,MACC,CAAC,OAAO,EAAE,MAAM,KAAK,KAAK,SAAS,QAEnC,EAFC;AAAA,MAGD,CAAC,OAAO,EAAE,MAAM,KAAK,KAAK,WAAW,UAErC,EAFC;AAAA,IAGH,EAPC;AAAA,EAQH,EA7BC;AA+BL;",
+  "sourcesContent": ["import { Activity, Airplay } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { Button, Group, XStack, YStack } from 'tamagui'\n\nexport function ButtonDemo(props) {\n  return (\n    <YStack p=\"$3\" space {...props}>\n      <Button>Plain</Button>\n      <Button als=\"center\" icon={Airplay} size=\"$6\">\n        Large\n      </Button>\n      <Group>\n        <Button w=\"50%\" size=\"$3\" theme=\"alt2\">\n          Alt2\n        </Button>\n        <Button w=\"50%\" size=\"$3\" theme=\"yellow\">\n          Yellow\n        </Button>\n      </Group>\n      <XStack space=\"$2\">\n        <Button themeInverse size=\"$3\">\n          Small Inverse\n        </Button>\n        <Button iconAfter={Activity} size=\"$3\">\n          After\n        </Button>\n      </XStack>\n      <Group>\n        <Button w=\"50%\" size=\"$2\" disabled>\n          disabled\n        </Button>\n        <Button w=\"50%\" size=\"$2\" chromeless>\n          chromeless\n        </Button>\n      </Group>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAAA;AAEA;AAEO,oBAAoB,OAAO;AAChC,SACE,CAAC,OAAO,EAAE,KAAK,UAAU;AAAA,IACvB,CAAC,OAAO,KAAK,EAAZ;AAAA,IACD,CAAC,OAAO,IAAI,SAAS,MAAM,SAAS,KAAK,KAAK,KAE9C,EAFC;AAAA,IAGD,CAAC;AAAA,MACC,CAAC,OAAO,EAAE,MAAM,KAAK,KAAK,MAAM,OAAO,IAEvC,EAFC;AAAA,MAGD,CAAC,OAAO,EAAE,MAAM,KAAK,KAAK,MAAM,SAAS,MAEzC,EAFC;AAAA,IAGH,EAPC;AAAA,IAQD,CAAC,OAAO,MAAM;AAAA,MACZ,CAAC,OAAO,aAAa,KAAK,KAAK,aAE/B,EAFC;AAAA,MAGD,CAAC,OAAO,WAAW,UAAU,KAAK,KAAK,KAEvC,EAFC;AAAA,IAGH,EAPC;AAAA,IAQD,CAAC;AAAA,MACC,CAAC,OAAO,EAAE,MAAM,KAAK,KAAK,SAAS,QAEnC,EAFC;AAAA,MAGD,CAAC,OAAO,EAAE,MAAM,KAAK,KAAK,WAAW,UAErC,EAFC;AAAA,IAGH,EAPC;AAAA,EAQH,EA7BC;AA+BL;",
   "names": []
 }

package/dist/jsx/CardDemo.js

@@ -20,6 +20,6 @@ function DemoCard(props) {
   </Card>;
 }
 export {
-  CardDemo as default
+  CardDemo
 };
 //# sourceMappingURL=CardDemo.js.map

package/dist/jsx/CardDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/CardDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { Button, Card, CardProps, H2, H3, Image, Paragraph, XStack } from 'tamagui'\n\n// @ts-ignore\nimport camera from '../../public/camera.jpg'\n\nexport default function CardDemo() {\n  return (\n    <XStack $sm={{ flexDirection: 'column' }} px=\"$4\" space>\n      <DemoCard\n        animation=\"bouncy\"\n        size=\"$4\"\n        w={250}\n        h={300}\n        scale={0.9}\n        hoverStyle={{ scale: 0.925 }}\n        pressStyle={{ scale: 0.875 }}\n      />\n      <DemoCard size=\"$5\" w={250} h={300} />\n    </XStack>\n  )\n}\n\nfunction DemoCard(props: CardProps) {\n  return (\n    <Card theme=\"dark\" elevate size=\"$4\" bordered {...props}>\n      <Card.Header padded>\n        <H2>Sony A7IV</H2>\n        <Paragraph theme=\"alt2\">Now available</Paragraph>\n      </Card.Header>\n      <Card.Footer padded>\n        <XStack f={1} />\n        <Button br=\"$10\">Purchase</Button>\n      </Card.Footer>\n      <Card.Background>\n        <Image pos=\"absolute\" width={300} height={500} resizeMode=\"cover\" src={camera.src} />\n      </Card.Background>\n    </Card>\n  )\n}\n"],
-  "mappings": "AACA;AAGA;AAEe,oBAAoB;AACjC,SACE,CAAC,OAAO,KAAK,EAAE,eAAe,SAAS,GAAG,GAAG,KAAK;AAAA,IAChD,CAAC,SACC,UAAU,SACV,KAAK,KACL,GAAG,KACH,GAAG,KACH,OAAO,KACP,YAAY,EAAE,OAAO,MAAM,GAC3B,YAAY,EAAE,OAAO,MAAM,GAC7B;AAAA,IACA,CAAC,SAAS,KAAK,KAAK,GAAG,KAAK,GAAG,KAAK;AAAA,EACtC,EAXC;AAaL;AAEA,kBAAkB,OAAkB;AAClC,SACE,CAAC,KAAK,MAAM,OAAO,QAAQ,KAAK,KAAK,aAAa;AAAA,IAChD,CAAC,KAAK,OAAO;AAAA,MACX,CAAC,GAAG,SAAS,EAAZ;AAAA,MACD,CAAC,UAAU,MAAM,OAAO,aAAa,EAApC;AAAA,IACH,EAHC,KAAK;AAAA,IAIN,CAAC,KAAK,OAAO;AAAA,MACX,CAAC,OAAO,GAAG,GAAG;AAAA,MACd,CAAC,OAAO,GAAG,MAAM,QAAQ,EAAxB;AAAA,IACH,EAHC,KAAK;AAAA,IAIN,CAAC,KAAK,WACJ,CAAC,MAAM,IAAI,WAAW,OAAO,KAAK,QAAQ,KAAK,WAAW,QAAQ,KAAK,OAAO,KAAK,EACrF,EAFC,KAAK;AAAA,EAGR,EAZC;AAcL;",
+  "sourcesContent": ["import React from 'react'\nimport { Button, Card, CardProps, H2, H3, Image, Paragraph, XStack } from 'tamagui'\n\n// @ts-ignore\nimport camera from '../../public/camera.jpg'\n\nexport function CardDemo() {\n  return (\n    <XStack $sm={{ flexDirection: 'column' }} px=\"$4\" space>\n      <DemoCard\n        animation=\"bouncy\"\n        size=\"$4\"\n        w={250}\n        h={300}\n        scale={0.9}\n        hoverStyle={{ scale: 0.925 }}\n        pressStyle={{ scale: 0.875 }}\n      />\n      <DemoCard size=\"$5\" w={250} h={300} />\n    </XStack>\n  )\n}\n\nfunction DemoCard(props: CardProps) {\n  return (\n    <Card theme=\"dark\" elevate size=\"$4\" bordered {...props}>\n      <Card.Header padded>\n        <H2>Sony A7IV</H2>\n        <Paragraph theme=\"alt2\">Now available</Paragraph>\n      </Card.Header>\n      <Card.Footer padded>\n        <XStack f={1} />\n        <Button br=\"$10\">Purchase</Button>\n      </Card.Footer>\n      <Card.Background>\n        <Image pos=\"absolute\" width={300} height={500} resizeMode=\"cover\" src={camera.src} />\n      </Card.Background>\n    </Card>\n  )\n}\n"],
+  "mappings": "AACA;AAGA;AAEO,oBAAoB;AACzB,SACE,CAAC,OAAO,KAAK,EAAE,eAAe,SAAS,GAAG,GAAG,KAAK;AAAA,IAChD,CAAC,SACC,UAAU,SACV,KAAK,KACL,GAAG,KACH,GAAG,KACH,OAAO,KACP,YAAY,EAAE,OAAO,MAAM,GAC3B,YAAY,EAAE,OAAO,MAAM,GAC7B;AAAA,IACA,CAAC,SAAS,KAAK,KAAK,GAAG,KAAK,GAAG,KAAK;AAAA,EACtC,EAXC;AAaL;AAEA,kBAAkB,OAAkB;AAClC,SACE,CAAC,KAAK,MAAM,OAAO,QAAQ,KAAK,KAAK,aAAa;AAAA,IAChD,CAAC,KAAK,OAAO;AAAA,MACX,CAAC,GAAG,SAAS,EAAZ;AAAA,MACD,CAAC,UAAU,MAAM,OAAO,aAAa,EAApC;AAAA,IACH,EAHC,KAAK;AAAA,IAIN,CAAC,KAAK,OAAO;AAAA,MACX,CAAC,OAAO,GAAG,GAAG;AAAA,MACd,CAAC,OAAO,GAAG,MAAM,QAAQ,EAAxB;AAAA,IACH,EAHC,KAAK;AAAA,IAIN,CAAC,KAAK,WACJ,CAAC,MAAM,IAAI,WAAW,OAAO,KAAK,QAAQ,KAAK,WAAW,QAAQ,KAAK,OAAO,KAAK,EACrF,EAFC,KAAK;AAAA,EAGR,EAZC;AAcL;",
   "names": []
 }

package/dist/jsx/DialogDemo.js

@@ -30,6 +30,6 @@ function DialogDemo() {
   </Dialog>;
 }
 export {
-  DialogDemo as default
+  DialogDemo
 };
 //# sourceMappingURL=DialogDemo.js.map

package/dist/jsx/DialogDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DialogDemo.tsx"],
-  "sourcesContent": ["import { X } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { Button, Dialog, Fieldset, Input, Label, Unspaced, YStack } from 'tamagui'\n\nexport default function DialogDemo() {\n  return (\n    <Dialog modal>\n      <Dialog.Trigger asChild>\n        <Button>Edit Profile</Button>\n      </Dialog.Trigger>\n      <Dialog.Portal>\n        <Dialog.Overlay\n          key=\"overlay\"\n          animation=\"quick\"\n          o={0.5}\n          enterStyle={{ o: 0 }}\n          exitStyle={{ o: 0 }}\n        />\n        <Dialog.Content\n          bordered\n          elevate\n          key=\"content\"\n          space\n          animation={[\n            'quick',\n            {\n              opacity: {\n                overshootClamping: true,\n              },\n            },\n          ]}\n          enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}\n          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}\n          x={0}\n          scale={1}\n          opacity={1}\n          y={0}\n        >\n          <Dialog.Title>Edit profile</Dialog.Title>\n          <Dialog.Description>\n            Make changes to your profile here. Click save when you're done.\n          </Dialog.Description>\n          <Fieldset space=\"$4\" horizontal>\n            <Label w={160} justifyContent=\"flex-end\" htmlFor=\"name\">\n              Name\n            </Label>\n            <Input f={1} id=\"name\" defaultValue=\"Nate Wienert\" />\n          </Fieldset>\n          <Fieldset space=\"$4\" horizontal>\n            <Label w={160} justifyContent=\"flex-end\" htmlFor=\"username\">\n              Username\n            </Label>\n            <Input f={1} id=\"username\" defaultValue=\"@natebirdman\" />\n          </Fieldset>\n\n          <YStack ai=\"flex-end\" mt=\"$2\">\n            <Dialog.Close asChild>\n              <Button theme=\"alt1\" aria-label=\"Close\">\n                Save changes\n              </Button>\n            </Dialog.Close>\n          </YStack>\n\n          <Unspaced>\n            <Dialog.Close asChild>\n              <Button pos=\"absolute\" t=\"$4\" r=\"$4\" circular icon={X} />\n            </Dialog.Close>\n          </Unspaced>\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog>\n  )\n}\n"],
-  "mappings": "AAAA;AAEA;AAEe,sBAAsB;AACnC,SACE,CAAC,OAAO;AAAA,IACN,CAAC,OAAO,QAAQ,QACd,CAAC,OAAO,YAAY,EAAnB,OACH,EAFC,OAAO;AAAA,IAGR,CAAC,OAAO;AAAA,MACN,CAAC,OAAO,QACN,IAAI,UACJ,UAAU,QACV,GAAG,KACH,YAAY,EAAE,GAAG,EAAE,GACnB,WAAW,EAAE,GAAG,EAAE,GACpB;AAAA,MACA,CAAC,OAAO,QACN,SACA,QACA,IAAI,UACJ,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,SAAS;AAAA,YACP,mBAAmB;AAAA,UACrB;AAAA,QACF;AAAA,MACF,GACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI,GACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK,GAClD,GAAG,GACH,OAAO,GACP,SAAS,GACT,GAAG;AAAA,QAEH,CAAC,OAAO,MAAM,YAAY,EAAzB,OAAO;AAAA,QACR,CAAC,OAAO,YAAY,+DAEpB,EAFC,OAAO;AAAA,QAGR,CAAC,SAAS,MAAM,KAAK;AAAA,UACnB,CAAC,MAAM,GAAG,KAAK,eAAe,WAAW,QAAQ,OAAO,IAExD,EAFC;AAAA,UAGD,CAAC,MAAM,GAAG,GAAG,GAAG,OAAO,aAAa,eAAe;AAAA,QACrD,EALC;AAAA,QAMD,CAAC,SAAS,MAAM,KAAK;AAAA,UACnB,CAAC,MAAM,GAAG,KAAK,eAAe,WAAW,QAAQ,WAAW,QAE5D,EAFC;AAAA,UAGD,CAAC,MAAM,GAAG,GAAG,GAAG,WAAW,aAAa,eAAe;AAAA,QACzD,EALC;AAAA,QAOD,CAAC,OAAO,GAAG,WAAW,GAAG,KACvB,CAAC,OAAO,MAAM,QACZ,CAAC,OAAO,MAAM,OAAO,WAAW,QAAQ,YAExC,EAFC,OAGH,EAJC,OAAO,MAKV,EANC;AAAA,QAQD,CAAC,SACC,CAAC,OAAO,MAAM,QACZ,CAAC,OAAO,IAAI,WAAW,EAAE,KAAK,EAAE,KAAK,SAAS,MAAM,GAAG,EACzD,EAFC,OAAO,MAGV,EAJC;AAAA,MAKH,EAlDC,OAAO;AAAA,IAmDV,EA3DC,OAAO;AAAA,EA4DV,EAhEC;AAkEL;",
+  "sourcesContent": ["import { X } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { Button, Dialog, Fieldset, Input, Label, Unspaced, YStack } from 'tamagui'\n\nexport function DialogDemo() {\n  return (\n    <Dialog modal>\n      <Dialog.Trigger asChild>\n        <Button>Edit Profile</Button>\n      </Dialog.Trigger>\n      <Dialog.Portal>\n        <Dialog.Overlay\n          key=\"overlay\"\n          animation=\"quick\"\n          o={0.5}\n          enterStyle={{ o: 0 }}\n          exitStyle={{ o: 0 }}\n        />\n        <Dialog.Content\n          bordered\n          elevate\n          key=\"content\"\n          space\n          animation={[\n            'quick',\n            {\n              opacity: {\n                overshootClamping: true,\n              },\n            },\n          ]}\n          enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}\n          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}\n          x={0}\n          scale={1}\n          opacity={1}\n          y={0}\n        >\n          <Dialog.Title>Edit profile</Dialog.Title>\n          <Dialog.Description>\n            Make changes to your profile here. Click save when you're done.\n          </Dialog.Description>\n          <Fieldset space=\"$4\" horizontal>\n            <Label w={160} justifyContent=\"flex-end\" htmlFor=\"name\">\n              Name\n            </Label>\n            <Input f={1} id=\"name\" defaultValue=\"Nate Wienert\" />\n          </Fieldset>\n          <Fieldset space=\"$4\" horizontal>\n            <Label w={160} justifyContent=\"flex-end\" htmlFor=\"username\">\n              Username\n            </Label>\n            <Input f={1} id=\"username\" defaultValue=\"@natebirdman\" />\n          </Fieldset>\n\n          <YStack ai=\"flex-end\" mt=\"$2\">\n            <Dialog.Close asChild>\n              <Button theme=\"alt1\" aria-label=\"Close\">\n                Save changes\n              </Button>\n            </Dialog.Close>\n          </YStack>\n\n          <Unspaced>\n            <Dialog.Close asChild>\n              <Button pos=\"absolute\" t=\"$4\" r=\"$4\" circular icon={X} />\n            </Dialog.Close>\n          </Unspaced>\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog>\n  )\n}\n"],
+  "mappings": "AAAA;AAEA;AAEO,sBAAsB;AAC3B,SACE,CAAC,OAAO;AAAA,IACN,CAAC,OAAO,QAAQ,QACd,CAAC,OAAO,YAAY,EAAnB,OACH,EAFC,OAAO;AAAA,IAGR,CAAC,OAAO;AAAA,MACN,CAAC,OAAO,QACN,IAAI,UACJ,UAAU,QACV,GAAG,KACH,YAAY,EAAE,GAAG,EAAE,GACnB,WAAW,EAAE,GAAG,EAAE,GACpB;AAAA,MACA,CAAC,OAAO,QACN,SACA,QACA,IAAI,UACJ,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,SAAS;AAAA,YACP,mBAAmB;AAAA,UACrB;AAAA,QACF;AAAA,MACF,GACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI,GACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK,GAClD,GAAG,GACH,OAAO,GACP,SAAS,GACT,GAAG;AAAA,QAEH,CAAC,OAAO,MAAM,YAAY,EAAzB,OAAO;AAAA,QACR,CAAC,OAAO,YAAY,+DAEpB,EAFC,OAAO;AAAA,QAGR,CAAC,SAAS,MAAM,KAAK;AAAA,UACnB,CAAC,MAAM,GAAG,KAAK,eAAe,WAAW,QAAQ,OAAO,IAExD,EAFC;AAAA,UAGD,CAAC,MAAM,GAAG,GAAG,GAAG,OAAO,aAAa,eAAe;AAAA,QACrD,EALC;AAAA,QAMD,CAAC,SAAS,MAAM,KAAK;AAAA,UACnB,CAAC,MAAM,GAAG,KAAK,eAAe,WAAW,QAAQ,WAAW,QAE5D,EAFC;AAAA,UAGD,CAAC,MAAM,GAAG,GAAG,GAAG,WAAW,aAAa,eAAe;AAAA,QACzD,EALC;AAAA,QAOD,CAAC,OAAO,GAAG,WAAW,GAAG,KACvB,CAAC,OAAO,MAAM,QACZ,CAAC,OAAO,MAAM,OAAO,WAAW,QAAQ,YAExC,EAFC,OAGH,EAJC,OAAO,MAKV,EANC;AAAA,QAQD,CAAC,SACC,CAAC,OAAO,MAAM,QACZ,CAAC,OAAO,IAAI,WAAW,EAAE,KAAK,EAAE,KAAK,SAAS,MAAM,GAAG,EACzD,EAFC,OAAO,MAGV,EAJC;AAAA,MAKH,EAlDC,OAAO;AAAA,IAmDV,EA3DC,OAAO;AAAA,EA4DV,EAhEC;AAkEL;",
   "names": []
 }

package/dist/jsx/DrawerDemo.js

@@ -13,6 +13,6 @@ function DrawerDemo() {
   </Drawer.Provider></YStack>;
 }
 export {
-  DrawerDemo as default
+  DrawerDemo
 };
 //# sourceMappingURL=DrawerDemo.js.map

package/dist/jsx/DrawerDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DrawerDemo.tsx"],
-  "sourcesContent": ["import { Drawer } from '@tamagui/drawer'\nimport { ChevronDown, ChevronUp } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { useState } from 'react'\nimport { Button, Paragraph, YStack } from 'tamagui'\n\nexport default function DrawerDemo() {\n  const [show, setShow] = useState(false)\n  return (\n    <YStack minWidth={230} w=\"100%\" h=\"100%\" ai=\"center\" jc=\"center\" position=\"relative\">\n      <Drawer.Provider>\n        <Button\n          size=\"$6\"\n          icon={show ? ChevronDown : ChevronUp}\n          circular\n          onPress={() => setShow((x) => !x)}\n          elevation=\"$2\"\n        />\n        <Drawer open={show} onChangeOpen={setShow}>\n          <Drawer.Frame h={200} ai=\"center\" jc=\"center\" p=\"$6\" space>\n            <Paragraph selectable={false}>Hello.</Paragraph>\n            <Button\n              size=\"$6\"\n              icon={show ? ChevronDown : ChevronUp}\n              circular\n              onPress={() => setShow((x) => !x)}\n              elevation=\"$2\"\n            />\n          </Drawer.Frame>\n        </Drawer>\n      </Drawer.Provider>\n    </YStack>\n  )\n}\n"],
-  "mappings": "AAAA;AACA;AAEA;AACA;AAEe,sBAAsB;AACnC,QAAM,CAAC,MAAM,WAAW,SAAS,KAAK;AACtC,SACE,CAAC,OAAO,UAAU,KAAK,EAAE,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,SAAS,WACxE,CAAC,OAAO;AAAA,IACN,CAAC,OACC,KAAK,KACL,MAAM,OAAO,cAAc,WAC3B,SACA,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GAChC,UAAU,KACZ;AAAA,IACA,CAAC,OAAO,MAAM,MAAM,cAAc,SAChC,CAAC,OAAO,MAAM,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,EAAE,KAAK;AAAA,MACnD,CAAC,UAAU,YAAY,OAAO,MAAM,EAAnC;AAAA,MACD,CAAC,OACC,KAAK,KACL,MAAM,OAAO,cAAc,WAC3B,SACA,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GAChC,UAAU,KACZ;AAAA,IACF,EATC,OAAO,MAUV,EAXC;AAAA,EAYH,EApBC,OAAO,SAqBV,EAtBC;AAwBL;",
+  "sourcesContent": ["import { Drawer } from '@tamagui/drawer'\nimport { ChevronDown, ChevronUp } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { useState } from 'react'\nimport { Button, Paragraph, YStack } from 'tamagui'\n\nexport function DrawerDemo() {\n  const [show, setShow] = useState(false)\n  return (\n    <YStack minWidth={230} w=\"100%\" h=\"100%\" ai=\"center\" jc=\"center\" position=\"relative\">\n      <Drawer.Provider>\n        <Button\n          size=\"$6\"\n          icon={show ? ChevronDown : ChevronUp}\n          circular\n          onPress={() => setShow((x) => !x)}\n          elevation=\"$2\"\n        />\n        <Drawer open={show} onChangeOpen={setShow}>\n          <Drawer.Frame h={200} ai=\"center\" jc=\"center\" p=\"$6\" space>\n            <Paragraph selectable={false}>Hello.</Paragraph>\n            <Button\n              size=\"$6\"\n              icon={show ? ChevronDown : ChevronUp}\n              circular\n              onPress={() => setShow((x) => !x)}\n              elevation=\"$2\"\n            />\n          </Drawer.Frame>\n        </Drawer>\n      </Drawer.Provider>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAAA;AACA;AAEA;AACA;AAEO,sBAAsB;AAC3B,QAAM,CAAC,MAAM,WAAW,SAAS,KAAK;AACtC,SACE,CAAC,OAAO,UAAU,KAAK,EAAE,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,SAAS,WACxE,CAAC,OAAO;AAAA,IACN,CAAC,OACC,KAAK,KACL,MAAM,OAAO,cAAc,WAC3B,SACA,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GAChC,UAAU,KACZ;AAAA,IACA,CAAC,OAAO,MAAM,MAAM,cAAc,SAChC,CAAC,OAAO,MAAM,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,EAAE,KAAK;AAAA,MACnD,CAAC,UAAU,YAAY,OAAO,MAAM,EAAnC;AAAA,MACD,CAAC,OACC,KAAK,KACL,MAAM,OAAO,cAAc,WAC3B,SACA,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GAChC,UAAU,KACZ;AAAA,IACF,EATC,OAAO,MAUV,EAXC;AAAA,EAYH,EApBC,OAAO,SAqBV,EAtBC;AAwBL;",
   "names": []
 }

package/dist/jsx/FeatherIconsDemo.js

@@ -27,6 +27,6 @@ function FeatherIconsDemo() {
   </YStack>;
 }
 export {
-  FeatherIconsDemo as default
+  FeatherIconsDemo
 };
 //# sourceMappingURL=FeatherIconsDemo.js.map

package/dist/jsx/FeatherIconsDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/FeatherIconsDemo.tsx"],
-  "sourcesContent": ["import * as FeatherIcons from '@tamagui/feather-icons'\nimport React from 'react'\nimport { useMemo, useState } from 'react'\nimport { ScrollView } from 'react-native'\nimport { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from 'tamagui'\n\nconst featherIcons = Object.keys(FeatherIcons).map((name) => ({\n  key: name.toLowerCase(),\n  name,\n  Icon: FeatherIcons[name],\n}))\n\nexport default function FeatherIconsDemo() {\n  const [searchRaw, setSearch] = useState('')\n  const search = useDebounceValue(searchRaw, 400)\n\n  const size = 100\n\n  const iconsMemo = useMemo(() => {\n    const icons = featherIcons.filter((x) => x.key.startsWith(search.toLowerCase()))\n    return icons.map(({ Icon, name }) => {\n      return (\n        <YStack h={size} ai=\"center\" jc=\"center\" key={name}>\n          <Icon size={size * 0.25} />\n          <Spacer />\n          <Paragraph size=\"$2\" o={0.5}>\n            {name}\n          </Paragraph>\n        </YStack>\n      )\n    })\n  }, [search])\n\n  return (\n    <YStack als=\"stretch\" p=\"$4\" pb=\"$0\" space>\n      <Input value={searchRaw} onChangeText={setSearch} placeholder=\"Search...\" />\n\n      <YStack h={420}>\n        <ScrollView>\n          <Grid itemMinWidth={size}>{iconsMemo}</Grid>\n        </ScrollView>\n      </YStack>\n    </YStack>\n  )\n}\n"],
-  "mappings": "AAAA;AAEA;AACA;AACA;AAEA,MAAM,eAAe,OAAO,KAAK,YAAY,EAAE,IAAI,CAAC,SAAU;AAAA,EAC5D,KAAK,KAAK,YAAY;AAAA,EACtB;AAAA,EACA,MAAM,aAAa;AACrB,EAAE;AAEa,4BAA4B;AACzC,QAAM,CAAC,WAAW,aAAa,SAAS,EAAE;AAC1C,QAAM,SAAS,iBAAiB,WAAW,GAAG;AAE9C,QAAM,OAAO;AAEb,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,QAAQ,aAAa,OAAO,CAAC,MAAM,EAAE,IAAI,WAAW,OAAO,YAAY,CAAC,CAAC;AAC/E,WAAO,MAAM,IAAI,CAAC,EAAE,MAAM,WAAW;AACnC,aACE,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,KAAK;AAAA,QAC5C,CAAC,KAAK,MAAM,OAAO,MAAM;AAAA,QACzB,CAAC,OAAO;AAAA,QACR,CAAC,UAAU,KAAK,KAAK,GAAG,MACrB,KACH,EAFC;AAAA,MAGH,EANC;AAAA,IAQL,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,CAAC,OAAO,IAAI,UAAU,EAAE,KAAK,GAAG,KAAK;AAAA,IACnC,CAAC,MAAM,OAAO,WAAW,cAAc,WAAW,YAAY,YAAY;AAAA,IAE1E,CAAC,OAAO,GAAG,KACT,CAAC,WACC,CAAC,KAAK,cAAc,OAAO,UAAU,EAApC,KACH,EAFC,WAGH,EAJC;AAAA,EAKH,EARC;AAUL;",
+  "sourcesContent": ["import * as FeatherIcons from '@tamagui/feather-icons'\nimport React from 'react'\nimport { useMemo, useState } from 'react'\nimport { ScrollView } from 'react-native'\nimport { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from 'tamagui'\n\nconst featherIcons = Object.keys(FeatherIcons).map((name) => ({\n  key: name.toLowerCase(),\n  name,\n  Icon: FeatherIcons[name],\n}))\n\nexport function FeatherIconsDemo() {\n  const [searchRaw, setSearch] = useState('')\n  const search = useDebounceValue(searchRaw, 400)\n\n  const size = 100\n\n  const iconsMemo = useMemo(() => {\n    const icons = featherIcons.filter((x) => x.key.startsWith(search.toLowerCase()))\n    return icons.map(({ Icon, name }) => {\n      return (\n        <YStack h={size} ai=\"center\" jc=\"center\" key={name}>\n          <Icon size={size * 0.25} />\n          <Spacer />\n          <Paragraph size=\"$2\" o={0.5}>\n            {name}\n          </Paragraph>\n        </YStack>\n      )\n    })\n  }, [search])\n\n  return (\n    <YStack als=\"stretch\" p=\"$4\" pb=\"$0\" space>\n      <Input value={searchRaw} onChangeText={setSearch} placeholder=\"Search...\" />\n\n      <YStack h={420}>\n        <ScrollView>\n          <Grid itemMinWidth={size}>{iconsMemo}</Grid>\n        </ScrollView>\n      </YStack>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAAA;AAEA;AACA;AACA;AAEA,MAAM,eAAe,OAAO,KAAK,YAAY,EAAE,IAAI,CAAC,SAAU;AAAA,EAC5D,KAAK,KAAK,YAAY;AAAA,EACtB;AAAA,EACA,MAAM,aAAa;AACrB,EAAE;AAEK,4BAA4B;AACjC,QAAM,CAAC,WAAW,aAAa,SAAS,EAAE;AAC1C,QAAM,SAAS,iBAAiB,WAAW,GAAG;AAE9C,QAAM,OAAO;AAEb,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,QAAQ,aAAa,OAAO,CAAC,MAAM,EAAE,IAAI,WAAW,OAAO,YAAY,CAAC,CAAC;AAC/E,WAAO,MAAM,IAAI,CAAC,EAAE,MAAM,WAAW;AACnC,aACE,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,KAAK;AAAA,QAC5C,CAAC,KAAK,MAAM,OAAO,MAAM;AAAA,QACzB,CAAC,OAAO;AAAA,QACR,CAAC,UAAU,KAAK,KAAK,GAAG,MACrB,KACH,EAFC;AAAA,MAGH,EANC;AAAA,IAQL,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,CAAC,OAAO,IAAI,UAAU,EAAE,KAAK,GAAG,KAAK;AAAA,IACnC,CAAC,MAAM,OAAO,WAAW,cAAc,WAAW,YAAY,YAAY;AAAA,IAE1E,CAAC,OAAO,GAAG,KACT,CAAC,WACC,CAAC,KAAK,cAAc,OAAO,UAAU,EAApC,KACH,EAFC,WAGH,EAJC;AAAA,EAKH,EARC;AAUL;",
   "names": []
 }

package/dist/jsx/FormsDemo.js

@@ -14,6 +14,6 @@ function FormDemo(props) {
   </XStack>;
 }
 export {
-  FormsDemo as default
+  FormsDemo
 };
 //# sourceMappingURL=FormsDemo.js.map

package/dist/jsx/FormsDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/FormsDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { Button, Input, SizeTokens, TextArea, XStack, YStack } from 'tamagui'\n\nexport default function FormsDemo() {\n  return (\n    <YStack w={200} mih={250} overflow=\"hidden\" space=\"$2\" m=\"$3\" p=\"$2\">\n      <FormDemo size=\"$2\" />\n      <FormDemo size=\"$3\" />\n      <FormDemo size=\"$4\" />\n      <TextArea numberOfLines={4} />\n    </YStack>\n  )\n}\n\nfunction FormDemo(props: { size: SizeTokens }) {\n  return (\n    <XStack ai=\"center\" space=\"$2\">\n      <Input f={1} w=\"0%\" size={props.size} placeholder={`Size ${props.size}...`} />\n      <Button size={props.size}>Go</Button>\n    </XStack>\n  )\n}\n"],
-  "mappings": "AACA;AAEe,qBAAqB;AAClC,SACE,CAAC,OAAO,GAAG,KAAK,KAAK,KAAK,SAAS,SAAS,MAAM,KAAK,EAAE,KAAK,EAAE;AAAA,IAC9D,CAAC,SAAS,KAAK,KAAK;AAAA,IACpB,CAAC,SAAS,KAAK,KAAK;AAAA,IACpB,CAAC,SAAS,KAAK,KAAK;AAAA,IACpB,CAAC,SAAS,eAAe,GAAG;AAAA,EAC9B,EALC;AAOL;AAEA,kBAAkB,OAA6B;AAC7C,SACE,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,IACxB,CAAC,MAAM,GAAG,GAAG,EAAE,KAAK,MAAM,MAAM,MAAM,aAAa,QAAQ,MAAM,WAAW;AAAA,IAC5E,CAAC,OAAO,MAAM,MAAM,MAAM,EAAE,EAA3B;AAAA,EACH,EAHC;AAKL;",
+  "sourcesContent": ["import React from 'react'\nimport { Button, Input, SizeTokens, TextArea, XStack, YStack } from 'tamagui'\n\nexport function FormsDemo() {\n  return (\n    <YStack w={200} mih={250} overflow=\"hidden\" space=\"$2\" m=\"$3\" p=\"$2\">\n      <FormDemo size=\"$2\" />\n      <FormDemo size=\"$3\" />\n      <FormDemo size=\"$4\" />\n      <TextArea numberOfLines={4} />\n    </YStack>\n  )\n}\n\nfunction FormDemo(props: { size: SizeTokens }) {\n  return (\n    <XStack ai=\"center\" space=\"$2\">\n      <Input f={1} w=\"0%\" size={props.size} placeholder={`Size ${props.size}...`} />\n      <Button size={props.size}>Go</Button>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AACA;AAEO,qBAAqB;AAC1B,SACE,CAAC,OAAO,GAAG,KAAK,KAAK,KAAK,SAAS,SAAS,MAAM,KAAK,EAAE,KAAK,EAAE;AAAA,IAC9D,CAAC,SAAS,KAAK,KAAK;AAAA,IACpB,CAAC,SAAS,KAAK,KAAK;AAAA,IACpB,CAAC,SAAS,KAAK,KAAK;AAAA,IACpB,CAAC,SAAS,eAAe,GAAG;AAAA,EAC9B,EALC;AAOL;AAEA,kBAAkB,OAA6B;AAC7C,SACE,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,IACxB,CAAC,MAAM,GAAG,GAAG,EAAE,KAAK,MAAM,MAAM,MAAM,aAAa,QAAQ,MAAM,WAAW;AAAA,IAC5E,CAAC,OAAO,MAAM,MAAM,MAAM,EAAE,EAA3B;AAAA,EACH,EAHC;AAKL;",
   "names": []
 }

package/dist/jsx/GroupDemo.js

@@ -19,6 +19,6 @@ function GroupDemo() {
   </YStack>;
 }
 export {
-  GroupDemo as default
+  GroupDemo
 };
 //# sourceMappingURL=GroupDemo.js.map

package/dist/jsx/GroupDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/GroupDemo.tsx"],
-  "sourcesContent": ["import { Activity, Airplay } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { Button, Group, ListItem, Separator, YStack } from 'tamagui'\n\nexport default function GroupDemo() {\n  return (\n    <YStack p=\"$3\" space=\"$2\" ai=\"center\">\n      <Group size=\"$3\">\n        <Button>First</Button>\n        <Button>Second</Button>\n        <Button>Third</Button>\n      </Group>\n\n      <Group size=\"$5\">\n        <Button icon={Activity}>First</Button>\n        <Button icon={Airplay}>Second</Button>\n      </Group>\n\n      <Group size=\"$3\" vertical separator={<Separator />}>\n        <ListItem>First</ListItem>\n        <ListItem>Second</ListItem>\n        <ListItem>Third</ListItem>\n      </Group>\n    </YStack>\n  )\n}\n"],
-  "mappings": "AAAA;AAEA;AAEe,qBAAqB;AAClC,SACE,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG;AAAA,IAC3B,CAAC,MAAM,KAAK;AAAA,MACV,CAAC,OAAO,KAAK,EAAZ;AAAA,MACD,CAAC,OAAO,MAAM,EAAb;AAAA,MACD,CAAC,OAAO,KAAK,EAAZ;AAAA,IACH,EAJC;AAAA,IAMD,CAAC,MAAM,KAAK;AAAA,MACV,CAAC,OAAO,MAAM,UAAU,KAAK,EAA5B;AAAA,MACD,CAAC,OAAO,MAAM,SAAS,MAAM,EAA5B;AAAA,IACH,EAHC;AAAA,IAKD,CAAC,MAAM,KAAK,KAAK,SAAS,WAAW,CAAC,UAAU;AAAA,MAC9C,CAAC,SAAS,KAAK,EAAd;AAAA,MACD,CAAC,SAAS,MAAM,EAAf;AAAA,MACD,CAAC,SAAS,KAAK,EAAd;AAAA,IACH,EAJC;AAAA,EAKH,EAjBC;AAmBL;",
+  "sourcesContent": ["import { Activity, Airplay } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { Button, Group, ListItem, Separator, YStack } from 'tamagui'\n\nexport function GroupDemo() {\n  return (\n    <YStack p=\"$3\" space=\"$2\" ai=\"center\">\n      <Group size=\"$3\">\n        <Button>First</Button>\n        <Button>Second</Button>\n        <Button>Third</Button>\n      </Group>\n\n      <Group size=\"$5\">\n        <Button icon={Activity}>First</Button>\n        <Button icon={Airplay}>Second</Button>\n      </Group>\n\n      <Group size=\"$3\" vertical separator={<Separator />}>\n        <ListItem>First</ListItem>\n        <ListItem>Second</ListItem>\n        <ListItem>Third</ListItem>\n      </Group>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAAA;AAEA;AAEO,qBAAqB;AAC1B,SACE,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG;AAAA,IAC3B,CAAC,MAAM,KAAK;AAAA,MACV,CAAC,OAAO,KAAK,EAAZ;AAAA,MACD,CAAC,OAAO,MAAM,EAAb;AAAA,MACD,CAAC,OAAO,KAAK,EAAZ;AAAA,IACH,EAJC;AAAA,IAMD,CAAC,MAAM,KAAK;AAAA,MACV,CAAC,OAAO,MAAM,UAAU,KAAK,EAA5B;AAAA,MACD,CAAC,OAAO,MAAM,SAAS,MAAM,EAA5B;AAAA,IACH,EAHC;AAAA,IAKD,CAAC,MAAM,KAAK,KAAK,SAAS,WAAW,CAAC,UAAU;AAAA,MAC9C,CAAC,SAAS,KAAK,EAAd;AAAA,MACD,CAAC,SAAS,MAAM,EAAf;AAAA,MACD,CAAC,SAAS,KAAK,EAAd;AAAA,IACH,EAJC;AAAA,EAKH,EAjBC;AAmBL;",
   "names": []
 }

package/dist/jsx/HeadingsDemo.js

@@ -10,6 +10,6 @@ function HeadingsDemo() {
   </YStack>;
 }
 export {
-  HeadingsDemo as default
+  HeadingsDemo
 };
 //# sourceMappingURL=HeadingsDemo.js.map

package/dist/jsx/HeadingsDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/HeadingsDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { H1, H2, H3, H4, H5, H6, YStack } from 'tamagui'\n\nexport default function HeadingsDemo() {\n  return (\n    <YStack als=\"center\">\n      <H1>Heading 1</H1>\n      <H2>Heading 2</H2>\n      <H3>Heading 3</H3>\n      <H4>Heading 4</H4>\n      <H5>Heading 5</H5>\n      <H6>Heading 6</H6>\n    </YStack>\n  )\n}\n"],
-  "mappings": "AACA;AAEe,wBAAwB;AACrC,SACE,CAAC,OAAO,IAAI;AAAA,IACV,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,EACH,EAPC;AASL;",
+  "sourcesContent": ["import React from 'react'\nimport { H1, H2, H3, H4, H5, H6, YStack } from 'tamagui'\n\nexport function HeadingsDemo() {\n  return (\n    <YStack als=\"center\">\n      <H1>Heading 1</H1>\n      <H2>Heading 2</H2>\n      <H3>Heading 3</H3>\n      <H4>Heading 4</H4>\n      <H5>Heading 5</H5>\n      <H6>Heading 6</H6>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AACA;AAEO,wBAAwB;AAC7B,SACE,CAAC,OAAO,IAAI;AAAA,IACV,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,EACH,EAPC;AASL;",
   "names": []
 }

package/dist/jsx/ImageDemo.js

@@ -3,6 +3,6 @@ function ImageDemo() {
   return <Image src="http://placekitten.com/200/300" width={200} height={300} />;
 }
 export {
-  ImageDemo as default
+  ImageDemo
 };
 //# sourceMappingURL=ImageDemo.js.map

package/dist/jsx/ImageDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ImageDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { Image } from 'tamagui'\n\nexport default function ImageDemo() {\n  return <Image src=\"http://placekitten.com/200/300\" width={200} height={300} />\n}\n"],
-  "mappings": "AACA;AAEe,qBAAqB;AAClC,SAAO,CAAC,MAAM,IAAI,iCAAiC,OAAO,KAAK,QAAQ,KAAK;AAC9E;",
+  "sourcesContent": ["import React from 'react'\nimport { Image } from 'tamagui'\n\nexport function ImageDemo() {\n  return <Image src=\"http://placekitten.com/200/300\" width={200} height={300} />\n}\n"],
+  "mappings": "AACA;AAEO,qBAAqB;AAC1B,SAAO,CAAC,MAAM,IAAI,iCAAiC,OAAO,KAAK,QAAQ,KAAK;AAC9E;",
   "names": []
 }

package/dist/jsx/LabelDemo.js

@@ -6,6 +6,6 @@ function LabelDemo() {
   </XStack>;
 }
 export {
-  LabelDemo as default
+  LabelDemo
 };
 //# sourceMappingURL=LabelDemo.js.map

package/dist/jsx/LabelDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/LabelDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { Input, Label, XStack } from 'tamagui'\n\nexport default function LabelDemo() {\n  return (\n    <XStack miw={300} p=\"$3\" space=\"$4\">\n      <Label htmlFor=\"name\">Name</Label>\n      <Input f={1} id=\"name\" defaultValue=\"Nate Wienert\" />\n    </XStack>\n  )\n}\n"],
-  "mappings": "AACA;AAEe,qBAAqB;AAClC,SACE,CAAC,OAAO,KAAK,KAAK,EAAE,KAAK,MAAM;AAAA,IAC7B,CAAC,MAAM,QAAQ,OAAO,IAAI,EAAzB;AAAA,IACD,CAAC,MAAM,GAAG,GAAG,GAAG,OAAO,aAAa,eAAe;AAAA,EACrD,EAHC;AAKL;",
+  "sourcesContent": ["import React from 'react'\nimport { Input, Label, XStack } from 'tamagui'\n\nexport function LabelDemo() {\n  return (\n    <XStack miw={300} p=\"$3\" space=\"$4\">\n      <Label htmlFor=\"name\">Name</Label>\n      <Input f={1} id=\"name\" defaultValue=\"Nate Wienert\" />\n    </XStack>\n  )\n}\n"],
+  "mappings": "AACA;AAEO,qBAAqB;AAC1B,SACE,CAAC,OAAO,KAAK,KAAK,EAAE,KAAK,MAAM;AAAA,IAC7B,CAAC,MAAM,QAAQ,OAAO,IAAI,EAAzB;AAAA,IACD,CAAC,MAAM,GAAG,GAAG,GAAG,OAAO,aAAa,eAAe;AAAA,EACrD,EAHC;AAKL;",
   "names": []
 }

package/dist/jsx/LinearGradientDemo.js

@@ -3,6 +3,6 @@ function LinearGradientDemo() {
   return <LinearGradient als="center" width={100} height={100} colors={["$red10", "$yellow10"]} start={[0, 1]} br="$4" end={[0, 0]} />;
 }
 export {
-  LinearGradientDemo as default
+  LinearGradientDemo
 };
 //# sourceMappingURL=LinearGradientDemo.js.map

package/dist/jsx/LinearGradientDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/LinearGradientDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { LinearGradient } from 'tamagui'\n\nexport default function LinearGradientDemo() {\n  return (\n    <LinearGradient\n      als=\"center\"\n      width={100}\n      height={100}\n      colors={['$red10', '$yellow10']}\n      start={[0, 1]}\n      br=\"$4\"\n      end={[0, 0]}\n    />\n  )\n}\n"],
-  "mappings": "AACA;AAEe,8BAA8B;AAC3C,SACE,CAAC,eACC,IAAI,SACJ,OAAO,KACP,QAAQ,KACR,QAAQ,CAAC,UAAU,WAAW,GAC9B,OAAO,CAAC,GAAG,CAAC,GACZ,GAAG,KACH,KAAK,CAAC,GAAG,CAAC,GACZ;AAEJ;",
+  "sourcesContent": ["import React from 'react'\nimport { LinearGradient } from 'tamagui'\n\nexport function LinearGradientDemo() {\n  return (\n    <LinearGradient\n      als=\"center\"\n      width={100}\n      height={100}\n      colors={['$red10', '$yellow10']}\n      start={[0, 1]}\n      br=\"$4\"\n      end={[0, 0]}\n    />\n  )\n}\n"],
+  "mappings": "AACA;AAEO,8BAA8B;AACnC,SACE,CAAC,eACC,IAAI,SACJ,OAAO,KACP,QAAQ,KACR,QAAQ,CAAC,UAAU,WAAW,GAC9B,OAAO,CAAC,GAAG,CAAC,GACZ,GAAG,KACH,KAAK,CAAC,GAAG,CAAC,GACZ;AAEJ;",
   "names": []
 }

package/dist/jsx/ListItemDemo.js

@@ -21,6 +21,6 @@ function ListItemDemo2() {
   </Group>;
 }
 export {
-  ListItemDemo as default
+  ListItemDemo
 };
 //# sourceMappingURL=ListItemDemo.js.map

package/dist/jsx/ListItemDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ListItemDemo.tsx"],
-  "sourcesContent": ["import { ChevronRight, Cloud, Moon, Star, Sun } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { Group, ListItem, Separator, XStack } from 'tamagui'\n\nexport default function ListItemDemo() {\n  return (\n    <XStack $sm={{ flexDirection: 'column' }} px=\"$4\" space>\n      <ListItemDemo1 />\n      <ListItemDemo2 />\n    </XStack>\n  )\n}\n\nfunction ListItemDemo1() {\n  return (\n    <Group als=\"center\" bordered w={240} size=\"$4\" vertical>\n      <ListItem hoverTheme icon={Star}>\n        Star\n      </ListItem>\n      <ListItem hoverTheme icon={Moon}>\n        Moon\n      </ListItem>\n      <ListItem hoverTheme icon={Sun}>\n        Sun\n      </ListItem>\n      <ListItem hoverTheme icon={Cloud}>\n        Cloud\n      </ListItem>\n    </Group>\n  )\n}\n\nfunction ListItemDemo2() {\n  return (\n    <Group als=\"center\" bordered w={240} size=\"$6\" vertical separator={<Separator />}>\n      <ListItem hoverTheme title=\"Star\" subTitle=\"Subtitle\" icon={Star} iconAfter={ChevronRight} />\n      <ListItem hoverTheme title=\"Moon\" subTitle=\"Subtitle\" icon={Moon} iconAfter={ChevronRight} />\n    </Group>\n  )\n}\n"],
-  "mappings": "AAAA;AAEA;AAEe,wBAAwB;AACrC,SACE,CAAC,OAAO,KAAK,EAAE,eAAe,SAAS,GAAG,GAAG,KAAK;AAAA,IAChD,CAAC,cAAc;AAAA,IACf,CAAC,cAAc;AAAA,EACjB,EAHC;AAKL;AAEA,yBAAyB;AACvB,SACE,CAAC,MAAM,IAAI,SAAS,SAAS,GAAG,KAAK,KAAK,KAAK;AAAA,IAC7C,CAAC,SAAS,WAAW,MAAM,MAAM,IAEjC,EAFC;AAAA,IAGD,CAAC,SAAS,WAAW,MAAM,MAAM,IAEjC,EAFC;AAAA,IAGD,CAAC,SAAS,WAAW,MAAM,KAAK,GAEhC,EAFC;AAAA,IAGD,CAAC,SAAS,WAAW,MAAM,OAAO,KAElC,EAFC;AAAA,EAGH,EAbC;AAeL;AAEA,yBAAyB;AACvB,SACE,CAAC,MAAM,IAAI,SAAS,SAAS,GAAG,KAAK,KAAK,KAAK,SAAS,WAAW,CAAC,UAAU;AAAA,IAC5E,CAAC,SAAS,WAAW,MAAM,OAAO,SAAS,WAAW,MAAM,MAAM,WAAW,cAAc;AAAA,IAC3F,CAAC,SAAS,WAAW,MAAM,OAAO,SAAS,WAAW,MAAM,MAAM,WAAW,cAAc;AAAA,EAC7F,EAHC;AAKL;",
+  "sourcesContent": ["import { ChevronRight, Cloud, Moon, Star, Sun } from '@tamagui/feather-icons'\nimport React from 'react'\nimport { Group, ListItem, Separator, XStack } from 'tamagui'\n\nexport function ListItemDemo() {\n  return (\n    <XStack $sm={{ flexDirection: 'column' }} px=\"$4\" space>\n      <ListItemDemo1 />\n      <ListItemDemo2 />\n    </XStack>\n  )\n}\n\nfunction ListItemDemo1() {\n  return (\n    <Group als=\"center\" bordered w={240} size=\"$4\" vertical>\n      <ListItem hoverTheme icon={Star}>\n        Star\n      </ListItem>\n      <ListItem hoverTheme icon={Moon}>\n        Moon\n      </ListItem>\n      <ListItem hoverTheme icon={Sun}>\n        Sun\n      </ListItem>\n      <ListItem hoverTheme icon={Cloud}>\n        Cloud\n      </ListItem>\n    </Group>\n  )\n}\n\nfunction ListItemDemo2() {\n  return (\n    <Group als=\"center\" bordered w={240} size=\"$6\" vertical separator={<Separator />}>\n      <ListItem hoverTheme title=\"Star\" subTitle=\"Subtitle\" icon={Star} iconAfter={ChevronRight} />\n      <ListItem hoverTheme title=\"Moon\" subTitle=\"Subtitle\" icon={Moon} iconAfter={ChevronRight} />\n    </Group>\n  )\n}\n"],
+  "mappings": "AAAA;AAEA;AAEO,wBAAwB;AAC7B,SACE,CAAC,OAAO,KAAK,EAAE,eAAe,SAAS,GAAG,GAAG,KAAK;AAAA,IAChD,CAAC,cAAc;AAAA,IACf,CAAC,cAAc;AAAA,EACjB,EAHC;AAKL;AAEA,yBAAyB;AACvB,SACE,CAAC,MAAM,IAAI,SAAS,SAAS,GAAG,KAAK,KAAK,KAAK;AAAA,IAC7C,CAAC,SAAS,WAAW,MAAM,MAAM,IAEjC,EAFC;AAAA,IAGD,CAAC,SAAS,WAAW,MAAM,MAAM,IAEjC,EAFC;AAAA,IAGD,CAAC,SAAS,WAAW,MAAM,KAAK,GAEhC,EAFC;AAAA,IAGD,CAAC,SAAS,WAAW,MAAM,OAAO,KAElC,EAFC;AAAA,EAGH,EAbC;AAeL;AAEA,yBAAyB;AACvB,SACE,CAAC,MAAM,IAAI,SAAS,SAAS,GAAG,KAAK,KAAK,KAAK,SAAS,WAAW,CAAC,UAAU;AAAA,IAC5E,CAAC,SAAS,WAAW,MAAM,OAAO,SAAS,WAAW,MAAM,MAAM,WAAW,cAAc;AAAA,IAC3F,CAAC,SAAS,WAAW,MAAM,OAAO,SAAS,WAAW,MAAM,MAAM,WAAW,cAAc;AAAA,EAC7F,EAHC;AAKL;",
   "names": []
 }

package/dist/jsx/MenuDemo.js

@@ -10,6 +10,6 @@ function MenuDemo() {
   </YStack></Menu.Item></Menu></Menu.Provider>;
 }
 export {
-  MenuDemo as default
+  MenuDemo
 };
 //# sourceMappingURL=MenuDemo.js.map

package/dist/jsx/MenuDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/MenuDemo.tsx"],
-  "sourcesContent": ["import { Menu as MenuIcon } from '@tamagui/feather-icons'\nimport { Menu } from '@tamagui/menu'\nimport React, { useState } from 'react'\nimport { Button, H4, Paragraph, YStack } from 'tamagui'\n\nexport default function MenuDemo() {\n  const [show, setShow] = useState(false)\n\n  return (\n    <Menu.Provider>\n      <Menu\n        open={show}\n        onChangeOpen={setShow}\n        trigger={\n          <Button\n            size=\"$6\"\n            icon={MenuIcon}\n            theme={show ? 'active' : null}\n            circular\n            onPress={() => setShow((x) => !x)}\n          />\n        }\n      >\n        <Menu.Item>\n          <YStack p=\"$2\">\n            <H4>Menu contents</H4>\n            <Paragraph>Lorem ipsum dolor sit amet.</Paragraph>\n          </YStack>\n        </Menu.Item>\n      </Menu>\n    </Menu.Provider>\n  )\n}\n"],
-  "mappings": "AAAA;AACA;AACA;AACA;AAEe,oBAAoB;AACjC,QAAM,CAAC,MAAM,WAAW,SAAS,KAAK;AAEtC,SACE,CAAC,KAAK,SACJ,CAAC,KACC,MAAM,MACN,cAAc,SACd,SACE,CAAC,OACC,KAAK,KACL,MAAM,UACN,OAAO,OAAO,WAAW,MACzB,SACA,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GAClC,IAGF,CAAC,KAAK,KACJ,CAAC,OAAO,EAAE;AAAA,IACR,CAAC,GAAG,aAAa,EAAhB;AAAA,IACD,CAAC,UAAU,2BAA2B,EAArC;AAAA,EACH,EAHC,OAIH,EALC,KAAK,KAMR,EAnBC,KAoBH,EArBC,KAAK;AAuBV;",
+  "sourcesContent": ["import { Menu as MenuIcon } from '@tamagui/feather-icons'\nimport { Menu } from '@tamagui/menu'\nimport React, { useState } from 'react'\nimport { Button, H4, Paragraph, YStack } from 'tamagui'\n\nexport function MenuDemo() {\n  const [show, setShow] = useState(false)\n\n  return (\n    <Menu.Provider>\n      <Menu\n        open={show}\n        onChangeOpen={setShow}\n        trigger={\n          <Button\n            size=\"$6\"\n            icon={MenuIcon}\n            theme={show ? 'active' : null}\n            circular\n            onPress={() => setShow((x) => !x)}\n          />\n        }\n      >\n        <Menu.Item>\n          <YStack p=\"$2\">\n            <H4>Menu contents</H4>\n            <Paragraph>Lorem ipsum dolor sit amet.</Paragraph>\n          </YStack>\n        </Menu.Item>\n      </Menu>\n    </Menu.Provider>\n  )\n}\n"],
+  "mappings": "AAAA;AACA;AACA;AACA;AAEO,oBAAoB;AACzB,QAAM,CAAC,MAAM,WAAW,SAAS,KAAK;AAEtC,SACE,CAAC,KAAK,SACJ,CAAC,KACC,MAAM,MACN,cAAc,SACd,SACE,CAAC,OACC,KAAK,KACL,MAAM,UACN,OAAO,OAAO,WAAW,MACzB,SACA,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GAClC,IAGF,CAAC,KAAK,KACJ,CAAC,OAAO,EAAE;AAAA,IACR,CAAC,GAAG,aAAa,EAAhB;AAAA,IACD,CAAC,UAAU,2BAA2B,EAArC;AAAA,EACH,EAHC,OAIH,EALC,KAAK,KAMR,EAnBC,KAoBH,EArBC,KAAK;AAuBV;",
   "names": []
 }

package/dist/jsx/PopoverDemo.js

@@ -21,6 +21,6 @@ function Demo({ Icon, ...props }) {
 }
 export {
   Demo,
-  PopoverDemo as default
+  PopoverDemo
 };
 //# sourceMappingURL=PopoverDemo.js.map

package/dist/jsx/PopoverDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/PopoverDemo.tsx"],
-  "sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight } from '@tamagui/feather-icons'\nimport { Button, Input, Label, Popover, PopoverProps, XStack, YStack } from 'tamagui'\n\nexport default function PopoverDemo() {\n  return (\n    <XStack space=\"$2\">\n      <Demo placement=\"left\" Icon={ChevronLeft} />\n      <Demo placement=\"bottom\" Icon={ChevronDown} />\n      <Demo placement=\"right\" Icon={ChevronRight} />\n    </XStack>\n  )\n}\n\nexport function Demo({ Icon, ...props }: PopoverProps & { Icon?: any }) {\n  return (\n    <Popover modal {...props}>\n      <Popover.Trigger>\n        <Button icon={Icon} />\n      </Popover.Trigger>\n      <Popover.Content\n        elevation=\"$4\"\n        enterStyle={{ x: 0, y: -10, o: 0 }}\n        exitStyle={{ x: 0, y: -10, o: 0 }}\n        p=\"$2\"\n        br=\"$4\"\n        x={0}\n        y={0}\n        o={1}\n        animation=\"bouncy\"\n        elevate\n      >\n        <Popover.Arrow />\n\n        <YStack p=\"$3\">\n          <XStack space=\"$3\">\n            <Label size=\"$3\" htmlFor=\"name\">\n              Name\n            </Label>\n            <Input size=\"$3\" id=\"name\" />\n          </XStack>\n        </YStack>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],
-  "mappings": "AAAA;AACA;AAEe,uBAAuB;AACpC,SACE,CAAC,OAAO,MAAM;AAAA,IACZ,CAAC,KAAK,UAAU,OAAO,MAAM,aAAa;AAAA,IAC1C,CAAC,KAAK,UAAU,SAAS,MAAM,aAAa;AAAA,IAC5C,CAAC,KAAK,UAAU,QAAQ,MAAM,cAAc;AAAA,EAC9C,EAJC;AAML;AAEO,cAAc,EAAE,SAAS,SAAwC;AACtE,SACE,CAAC,QAAQ,UAAU;AAAA,IACjB,CAAC,QAAQ,QACP,CAAC,OAAO,MAAM,MAAM,EACtB,EAFC,QAAQ;AAAA,IAGT,CAAC,QAAQ,QACP,UAAU,KACV,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE,GACjC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE,GAChC,EAAE,KACF,GAAG,KACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,UAAU,SACV;AAAA,MAEA,CAAC,QAAQ,MAAM;AAAA,MAEf,CAAC,OAAO,EAAE,KACR,CAAC,OAAO,MAAM;AAAA,QACZ,CAAC,MAAM,KAAK,KAAK,QAAQ,OAAO,IAEhC,EAFC;AAAA,QAGD,CAAC,MAAM,KAAK,KAAK,GAAG,OAAO;AAAA,MAC7B,EALC,OAMH,EAPC;AAAA,IAQH,EAtBC,QAAQ;AAAA,EAuBX,EA3BC;AA6BL;",
+  "sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight } from '@tamagui/feather-icons'\nimport { Button, Input, Label, Popover, PopoverProps, XStack, YStack } from 'tamagui'\n\nexport function PopoverDemo() {\n  return (\n    <XStack space=\"$2\">\n      <Demo placement=\"left\" Icon={ChevronLeft} />\n      <Demo placement=\"bottom\" Icon={ChevronDown} />\n      <Demo placement=\"right\" Icon={ChevronRight} />\n    </XStack>\n  )\n}\n\nexport function Demo({ Icon, ...props }: PopoverProps & { Icon?: any }) {\n  return (\n    <Popover modal {...props}>\n      <Popover.Trigger>\n        <Button icon={Icon} />\n      </Popover.Trigger>\n      <Popover.Content\n        elevation=\"$4\"\n        enterStyle={{ x: 0, y: -10, o: 0 }}\n        exitStyle={{ x: 0, y: -10, o: 0 }}\n        p=\"$2\"\n        br=\"$4\"\n        x={0}\n        y={0}\n        o={1}\n        animation=\"bouncy\"\n        elevate\n      >\n        <Popover.Arrow />\n\n        <YStack p=\"$3\">\n          <XStack space=\"$3\">\n            <Label size=\"$3\" htmlFor=\"name\">\n              Name\n            </Label>\n            <Input size=\"$3\" id=\"name\" />\n          </XStack>\n        </YStack>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],
+  "mappings": "AAAA;AACA;AAEO,uBAAuB;AAC5B,SACE,CAAC,OAAO,MAAM;AAAA,IACZ,CAAC,KAAK,UAAU,OAAO,MAAM,aAAa;AAAA,IAC1C,CAAC,KAAK,UAAU,SAAS,MAAM,aAAa;AAAA,IAC5C,CAAC,KAAK,UAAU,QAAQ,MAAM,cAAc;AAAA,EAC9C,EAJC;AAML;AAEO,cAAc,EAAE,SAAS,SAAwC;AACtE,SACE,CAAC,QAAQ,UAAU;AAAA,IACjB,CAAC,QAAQ,QACP,CAAC,OAAO,MAAM,MAAM,EACtB,EAFC,QAAQ;AAAA,IAGT,CAAC,QAAQ,QACP,UAAU,KACV,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE,GACjC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE,GAChC,EAAE,KACF,GAAG,KACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,UAAU,SACV;AAAA,MAEA,CAAC,QAAQ,MAAM;AAAA,MAEf,CAAC,OAAO,EAAE,KACR,CAAC,OAAO,MAAM;AAAA,QACZ,CAAC,MAAM,KAAK,KAAK,QAAQ,OAAO,IAEhC,EAFC;AAAA,QAGD,CAAC,MAAM,KAAK,KAAK,GAAG,OAAO;AAAA,MAC7B,EALC,OAMH,EAPC;AAAA,IAQH,EAtBC,QAAQ;AAAA,EAuBX,EA3BC;AA6BL;",
   "names": []
 }

package/dist/jsx/ProgressDemo.js

@@ -30,6 +30,6 @@ function ProgressDemo() {
   </>;
 }
 export {
-  ProgressDemo as default
+  ProgressDemo
 };
 //# sourceMappingURL=ProgressDemo.js.map

package/dist/jsx/ProgressDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ProgressDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { useEffect, useState } from 'react'\nimport { Button, Paragraph, Progress, SizeTokens, Slider, XStack, YStack } from 'tamagui'\n\nexport default function ProgressDemo() {\n  const [size, setSize] = useState(4)\n  const [progress, setProgress] = useState(20)\n  const sizeProp = `$${size}` as SizeTokens\n\n  useEffect(() => {\n    const timer = setTimeout(() => setProgress(60), 1000)\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [])\n\n  return (\n    <>\n      <YStack h={60} ai=\"center\" space>\n        <Paragraph h={30} o={0.5}>\n          Size: {size}\n        </Paragraph>\n        <Progress size={sizeProp} value={progress}>\n          <Progress.Indicator animation=\"bouncy\" />\n        </Progress>\n      </YStack>\n\n      <XStack ai=\"center\" space pos=\"absolute\" b={10} l={20} $sm={{ disp: 'none' }}>\n        <Slider\n          size=\"$2\"\n          w={130}\n          defaultValue={[4]}\n          min={2}\n          max={6}\n          step={1}\n          onValueChange={([val]) => {\n            setSize(val)\n          }}\n        >\n          <Slider.Track>\n            <Slider.TrackActive />\n          </Slider.Track>\n          <Slider.Thumb circular index={0} />\n        </Slider>\n\n        <Button size=\"$2\" onPress={() => setProgress((prev) => (prev + 20) % 100)}>\n          Load\n        </Button>\n      </XStack>\n    </>\n  )\n}\n"],
-  "mappings": "AACA;AACA;AAEe,wBAAwB;AACrC,QAAM,CAAC,MAAM,WAAW,SAAS,CAAC;AAClC,QAAM,CAAC,UAAU,eAAe,SAAS,EAAE;AAC3C,QAAM,WAAW,IAAI;AAErB,YAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM,YAAY,EAAE,GAAG,GAAI;AACpD,WAAO,MAAM;AACX,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IACE,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS;AAAA,MACzB,CAAC,UAAU,GAAG,IAAI,GAAG;AAAA,SAAK;AAAA,SACjB;AAAA,MACT,EAFC;AAAA,MAGD,CAAC,SAAS,MAAM,UAAU,OAAO,UAC/B,CAAC,SAAS,UAAU,UAAU,SAAS,EACzC,EAFC;AAAA,IAGH,EAPC;AAAA,IASD,CAAC,OAAO,GAAG,SAAS,MAAM,IAAI,WAAW,GAAG,IAAI,GAAG,IAAI,KAAK,EAAE,MAAM,OAAO;AAAA,MACzE,CAAC,OACC,KAAK,KACL,GAAG,KACH,cAAc,CAAC,CAAC,GAChB,KAAK,GACL,KAAK,GACL,MAAM,GACN,eAAe,CAAC,CAAC,SAAS;AACxB,gBAAQ,GAAG;AAAA,MACb;AAAA,QAEA,CAAC,OAAO,MACN,CAAC,OAAO,YAAY,EACtB,EAFC,OAAO;AAAA,QAGR,CAAC,OAAO,MAAM,SAAS,OAAO,GAAG;AAAA,MACnC,EAfC;AAAA,MAiBD,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,YAAY,CAAC,SAAU,QAAO,MAAM,GAAG,GAAG,IAE3E,EAFC;AAAA,IAGH,EArBC;AAAA,EAsBH;AAEJ;",
+  "sourcesContent": ["import React from 'react'\nimport { useEffect, useState } from 'react'\nimport { Button, Paragraph, Progress, SizeTokens, Slider, XStack, YStack } from 'tamagui'\n\nexport function ProgressDemo() {\n  const [size, setSize] = useState(4)\n  const [progress, setProgress] = useState(20)\n  const sizeProp = `$${size}` as SizeTokens\n\n  useEffect(() => {\n    const timer = setTimeout(() => setProgress(60), 1000)\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [])\n\n  return (\n    <>\n      <YStack h={60} ai=\"center\" space>\n        <Paragraph h={30} o={0.5}>\n          Size: {size}\n        </Paragraph>\n        <Progress size={sizeProp} value={progress}>\n          <Progress.Indicator animation=\"bouncy\" />\n        </Progress>\n      </YStack>\n\n      <XStack ai=\"center\" space pos=\"absolute\" b={10} l={20} $sm={{ disp: 'none' }}>\n        <Slider\n          size=\"$2\"\n          w={130}\n          defaultValue={[4]}\n          min={2}\n          max={6}\n          step={1}\n          onValueChange={([val]) => {\n            setSize(val)\n          }}\n        >\n          <Slider.Track>\n            <Slider.TrackActive />\n          </Slider.Track>\n          <Slider.Thumb circular index={0} />\n        </Slider>\n\n        <Button size=\"$2\" onPress={() => setProgress((prev) => (prev + 20) % 100)}>\n          Load\n        </Button>\n      </XStack>\n    </>\n  )\n}\n"],
+  "mappings": "AACA;AACA;AAEO,wBAAwB;AAC7B,QAAM,CAAC,MAAM,WAAW,SAAS,CAAC;AAClC,QAAM,CAAC,UAAU,eAAe,SAAS,EAAE;AAC3C,QAAM,WAAW,IAAI;AAErB,YAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM,YAAY,EAAE,GAAG,GAAI;AACpD,WAAO,MAAM;AACX,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IACE,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS;AAAA,MACzB,CAAC,UAAU,GAAG,IAAI,GAAG;AAAA,SAAK;AAAA,SACjB;AAAA,MACT,EAFC;AAAA,MAGD,CAAC,SAAS,MAAM,UAAU,OAAO,UAC/B,CAAC,SAAS,UAAU,UAAU,SAAS,EACzC,EAFC;AAAA,IAGH,EAPC;AAAA,IASD,CAAC,OAAO,GAAG,SAAS,MAAM,IAAI,WAAW,GAAG,IAAI,GAAG,IAAI,KAAK,EAAE,MAAM,OAAO;AAAA,MACzE,CAAC,OACC,KAAK,KACL,GAAG,KACH,cAAc,CAAC,CAAC,GAChB,KAAK,GACL,KAAK,GACL,MAAM,GACN,eAAe,CAAC,CAAC,SAAS;AACxB,gBAAQ,GAAG;AAAA,MACb;AAAA,QAEA,CAAC,OAAO,MACN,CAAC,OAAO,YAAY,EACtB,EAFC,OAAO;AAAA,QAGR,CAAC,OAAO,MAAM,SAAS,OAAO,GAAG;AAAA,MACnC,EAfC;AAAA,MAiBD,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,YAAY,CAAC,SAAU,QAAO,MAAM,GAAG,GAAG,IAE3E,EAFC;AAAA,IAGH,EArBC;AAAA,EAsBH;AAEJ;",
   "names": []
 }