@tamagui/demos 1.0.1-beta.69 → 1.0.1-beta.72

package/dist/cjs/DialogDemo.js

@@ -34,7 +34,10 @@ function DialogDemo() {
     asChild: true
   }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Button, null, "Edit Profile")), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Dialog.Portal, null, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Dialog.Overlay, {
     key: "overlay",
-    o: 0.5
+    animation: "quick",
+    o: 0.5,
+    enterStyle: { o: 0 },
+    exitStyle: { o: 0 }
   }), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Dialog.Content, {
     bordered: true,
     elevate: true,
@@ -55,6 +58,7 @@ function DialogDemo() {
     opacity: 1,
     y: 0
   }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Dialog.Title, null, "Edit profile"), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Dialog.Description, null, "Make changes to your profile here. Click save when you're done."), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Fieldset, {
+    space: "$4",
     horizontal: true
   }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Label, {
     w: 160,
@@ -65,6 +69,7 @@ function DialogDemo() {
     id: "name",
     defaultValue: "Nate Wienert"
   })), /* @__PURE__ */ import_react.default.createElement(import_tamagui.Fieldset, {
+    space: "$4",
     horizontal: true
   }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.Label, {
     w: 160,

package/dist/cjs/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 key=\"overlay\" o={0.5} />\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 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 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;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAkB;AAClB,mBAAkB;AAClB,qBAAyE;AAE1D,sBAAsB;AACnC,SACE,mDAAC;AAAA,IAAO,OAAK;AAAA,KACX,mDAAC,sBAAO,SAAP;AAAA,IAAe,SAAO;AAAA,KACrB,mDAAC,6BAAO,cAAY,CACtB,GACA,mDAAC,sBAAO,QAAP,MACC,mDAAC,sBAAO,SAAP;AAAA,IAAe,KAAI;AAAA,IAAU,GAAG;AAAA,GAAK,GACtC,mDAAC,sBAAO,SAAP;AAAA,IACC,UAAQ;AAAA,IACR,SAAO;AAAA,IACP,KAAI;AAAA,IACJ,OAAK;AAAA,IACL,WAAW;AAAA,MACT;AAAA,MACA;AAAA,QACE,SAAS;AAAA,UACP,mBAAmB;AAAA,QACrB;AAAA,MACF;AAAA,IACF;AAAA,IACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI;AAAA,IACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK;AAAA,IAClD,GAAG;AAAA,IACH,OAAO;AAAA,IACP,SAAS;AAAA,IACT,GAAG;AAAA,KAEH,mDAAC,sBAAO,OAAP,MAAa,cAAY,GAC1B,mDAAC,sBAAO,aAAP,MAAmB,iEAEpB,GACA,mDAAC;AAAA,IAAS,YAAU;AAAA,KAClB,mDAAC;AAAA,IAAM,GAAG;AAAA,IAAK,gBAAe;AAAA,IAAW,SAAQ;AAAA,KAAO,MAExD,GACA,mDAAC;AAAA,IAAM,GAAG;AAAA,IAAG,IAAG;AAAA,IAAO,cAAa;AAAA,GAAe,CACrD,GACA,mDAAC;AAAA,IAAS,YAAU;AAAA,KAClB,mDAAC;AAAA,IAAM,GAAG;AAAA,IAAK,gBAAe;AAAA,IAAW,SAAQ;AAAA,KAAW,UAE5D,GACA,mDAAC;AAAA,IAAM,GAAG;AAAA,IAAG,IAAG;AAAA,IAAW,cAAa;AAAA,GAAe,CACzD,GAEA,mDAAC;AAAA,IAAO,IAAG;AAAA,IAAW,IAAG;AAAA,KACvB,mDAAC,sBAAO,OAAP;AAAA,IAAa,SAAO;AAAA,KACnB,mDAAC;AAAA,IAAO,OAAM;AAAA,IAAO,cAAW;AAAA,KAAQ,cAExC,CACF,CACF,GAEA,mDAAC,+BACC,mDAAC,sBAAO,OAAP;AAAA,IAAa,SAAO;AAAA,KACnB,mDAAC;AAAA,IAAO,KAAI;AAAA,IAAW,GAAE;AAAA,IAAK,GAAE;AAAA,IAAK,UAAQ;AAAA,IAAC,MAAM;AAAA,GAAG,CACzD,CACF,CACF,CACF,CACF;AAEJ;AA9DwB;",
+  "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;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAkB;AAClB,mBAAkB;AAClB,qBAAyE;AAE1D,sBAAsB;AACnC,SACE,mDAAC;AAAA,IAAO,OAAK;AAAA,KACX,mDAAC,sBAAO,SAAP;AAAA,IAAe,SAAO;AAAA,KACrB,mDAAC,6BAAO,cAAY,CACtB,GACA,mDAAC,sBAAO,QAAP,MACC,mDAAC,sBAAO,SAAP;AAAA,IACC,KAAI;AAAA,IACJ,WAAU;AAAA,IACV,GAAG;AAAA,IACH,YAAY,EAAE,GAAG,EAAE;AAAA,IACnB,WAAW,EAAE,GAAG,EAAE;AAAA,GACpB,GACA,mDAAC,sBAAO,SAAP;AAAA,IACC,UAAQ;AAAA,IACR,SAAO;AAAA,IACP,KAAI;AAAA,IACJ,OAAK;AAAA,IACL,WAAW;AAAA,MACT;AAAA,MACA;AAAA,QACE,SAAS;AAAA,UACP,mBAAmB;AAAA,QACrB;AAAA,MACF;AAAA,IACF;AAAA,IACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI;AAAA,IACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK;AAAA,IAClD,GAAG;AAAA,IACH,OAAO;AAAA,IACP,SAAS;AAAA,IACT,GAAG;AAAA,KAEH,mDAAC,sBAAO,OAAP,MAAa,cAAY,GAC1B,mDAAC,sBAAO,aAAP,MAAmB,iEAEpB,GACA,mDAAC;AAAA,IAAS,OAAM;AAAA,IAAK,YAAU;AAAA,KAC7B,mDAAC;AAAA,IAAM,GAAG;AAAA,IAAK,gBAAe;AAAA,IAAW,SAAQ;AAAA,KAAO,MAExD,GACA,mDAAC;AAAA,IAAM,GAAG;AAAA,IAAG,IAAG;AAAA,IAAO,cAAa;AAAA,GAAe,CACrD,GACA,mDAAC;AAAA,IAAS,OAAM;AAAA,IAAK,YAAU;AAAA,KAC7B,mDAAC;AAAA,IAAM,GAAG;AAAA,IAAK,gBAAe;AAAA,IAAW,SAAQ;AAAA,KAAW,UAE5D,GACA,mDAAC;AAAA,IAAM,GAAG;AAAA,IAAG,IAAG;AAAA,IAAW,cAAa;AAAA,GAAe,CACzD,GAEA,mDAAC;AAAA,IAAO,IAAG;AAAA,IAAW,IAAG;AAAA,KACvB,mDAAC,sBAAO,OAAP;AAAA,IAAa,SAAO;AAAA,KACnB,mDAAC;AAAA,IAAO,OAAM;AAAA,IAAO,cAAW;AAAA,KAAQ,cAExC,CACF,CACF,GAEA,mDAAC,+BACC,mDAAC,sBAAO,OAAP;AAAA,IAAa,SAAO;AAAA,KACnB,mDAAC;AAAA,IAAO,KAAI;AAAA,IAAW,GAAE;AAAA,IAAK,GAAE;AAAA,IAAK,UAAQ;AAAA,IAAC,MAAM;AAAA,GAAG,CACzD,CACF,CACF,CACF,CACF;AAEJ;AApEwB;",
   "names": []
 }

package/dist/cjs/ListItemDemo.js

@@ -43,16 +43,16 @@ function ListItemDemo1() {
     size: "$4",
     vertical: true
   }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.ListItem, {
-    hoverable: true,
+    hoverTheme: true,
     icon: import_feather_icons.Star
   }, "Star"), /* @__PURE__ */ import_react.default.createElement(import_tamagui.ListItem, {
-    hoverable: true,
+    hoverTheme: true,
     icon: import_feather_icons.Moon
   }, "Moon"), /* @__PURE__ */ import_react.default.createElement(import_tamagui.ListItem, {
-    hoverable: true,
+    hoverTheme: true,
     icon: import_feather_icons.Sun
   }, "Sun"), /* @__PURE__ */ import_react.default.createElement(import_tamagui.ListItem, {
-    hoverable: true,
+    hoverTheme: true,
     icon: import_feather_icons.Cloud
   }, "Cloud"));
 }
@@ -66,13 +66,13 @@ function ListItemDemo2() {
     vertical: true,
     separator: /* @__PURE__ */ import_react.default.createElement(import_tamagui.Separator, null)
   }, /* @__PURE__ */ import_react.default.createElement(import_tamagui.ListItem, {
-    hoverable: true,
+    hoverTheme: true,
     title: "Star",
     subTitle: "Subtitle",
     icon: import_feather_icons.Star,
     iconAfter: import_feather_icons.ChevronRight
   }), /* @__PURE__ */ import_react.default.createElement(import_tamagui.ListItem, {
-    hoverable: true,
+    hoverTheme: true,
     title: "Moon",
     subTitle: "Subtitle",
     icon: import_feather_icons.Moon,

package/dist/cjs/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 hoverable icon={Star}>\n        Star\n      </ListItem>\n      <ListItem hoverable icon={Moon}>\n        Moon\n      </ListItem>\n      <ListItem hoverable icon={Sun}>\n        Sun\n      </ListItem>\n      <ListItem hoverable 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 hoverable title=\"Star\" subTitle=\"Subtitle\" icon={Star} iconAfter={ChevronRight} />\n      <ListItem hoverable title=\"Moon\" subTitle=\"Subtitle\" icon={Moon} iconAfter={ChevronRight} />\n    </Group>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAqD;AACrD,mBAAkB;AAClB,qBAAmD;AAEpC,wBAAwB;AACrC,SACE,mDAAC;AAAA,IAAO,KAAK,EAAE,eAAe,SAAS;AAAA,IAAG,IAAG;AAAA,IAAK,OAAK;AAAA,KACrD,mDAAC,mBAAc,GACf,mDAAC,mBAAc,CACjB;AAEJ;AAPwB;AASxB,yBAAyB;AACvB,SACE,mDAAC;AAAA,IAAM,KAAI;AAAA,IAAS,UAAQ;AAAA,IAAC,GAAG;AAAA,IAAK,MAAK;AAAA,IAAK,UAAQ;AAAA,KACrD,mDAAC;AAAA,IAAS,WAAS;AAAA,IAAC,MAAM;AAAA,KAAM,MAEhC,GACA,mDAAC;AAAA,IAAS,WAAS;AAAA,IAAC,MAAM;AAAA,KAAM,MAEhC,GACA,mDAAC;AAAA,IAAS,WAAS;AAAA,IAAC,MAAM;AAAA,KAAK,KAE/B,GACA,mDAAC;AAAA,IAAS,WAAS;AAAA,IAAC,MAAM;AAAA,KAAO,OAEjC,CACF;AAEJ;AAjBS;AAmBT,yBAAyB;AACvB,SACE,mDAAC;AAAA,IAAM,KAAI;AAAA,IAAS,UAAQ;AAAA,IAAC,GAAG;AAAA,IAAK,MAAK;AAAA,IAAK,UAAQ;AAAA,IAAC,WAAW,mDAAC,8BAAU;AAAA,KAC5E,mDAAC;AAAA,IAAS,WAAS;AAAA,IAAC,OAAM;AAAA,IAAO,UAAS;AAAA,IAAW,MAAM;AAAA,IAAM,WAAW;AAAA,GAAc,GAC1F,mDAAC;AAAA,IAAS,WAAS;AAAA,IAAC,OAAM;AAAA,IAAO,UAAS;AAAA,IAAW,MAAM;AAAA,IAAM,WAAW;AAAA,GAAc,CAC5F;AAEJ;AAPS;",
+  "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;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAqD;AACrD,mBAAkB;AAClB,qBAAmD;AAEpC,wBAAwB;AACrC,SACE,mDAAC;AAAA,IAAO,KAAK,EAAE,eAAe,SAAS;AAAA,IAAG,IAAG;AAAA,IAAK,OAAK;AAAA,KACrD,mDAAC,mBAAc,GACf,mDAAC,mBAAc,CACjB;AAEJ;AAPwB;AASxB,yBAAyB;AACvB,SACE,mDAAC;AAAA,IAAM,KAAI;AAAA,IAAS,UAAQ;AAAA,IAAC,GAAG;AAAA,IAAK,MAAK;AAAA,IAAK,UAAQ;AAAA,KACrD,mDAAC;AAAA,IAAS,YAAU;AAAA,IAAC,MAAM;AAAA,KAAM,MAEjC,GACA,mDAAC;AAAA,IAAS,YAAU;AAAA,IAAC,MAAM;AAAA,KAAM,MAEjC,GACA,mDAAC;AAAA,IAAS,YAAU;AAAA,IAAC,MAAM;AAAA,KAAK,KAEhC,GACA,mDAAC;AAAA,IAAS,YAAU;AAAA,IAAC,MAAM;AAAA,KAAO,OAElC,CACF;AAEJ;AAjBS;AAmBT,yBAAyB;AACvB,SACE,mDAAC;AAAA,IAAM,KAAI;AAAA,IAAS,UAAQ;AAAA,IAAC,GAAG;AAAA,IAAK,MAAK;AAAA,IAAK,UAAQ;AAAA,IAAC,WAAW,mDAAC,8BAAU;AAAA,KAC5E,mDAAC;AAAA,IAAS,YAAU;AAAA,IAAC,OAAM;AAAA,IAAO,UAAS;AAAA,IAAW,MAAM;AAAA,IAAM,WAAW;AAAA,GAAc,GAC3F,mDAAC;AAAA,IAAS,YAAU;AAAA,IAAC,OAAM;AAAA,IAAO,UAAS;AAAA,IAAW,MAAM;AAAA,IAAM,WAAW;AAAA,GAAc,CAC7F;AAEJ;AAPS;",
   "names": []
 }

package/dist/cjs/SeparatorDemo.js

@@ -26,7 +26,6 @@ __export(SeparatorDemo_exports, {
 module.exports = __toCommonJS(SeparatorDemo_exports);
 var import_react = __toESM(require("react"));
 var import_tamagui = require("tamagui");
-//! debug
 function SeparatorDemo() {
   return /* @__PURE__ */ import_react.default.createElement(import_tamagui.YStack, {
     w: "100%",

package/dist/cjs/SeparatorDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SeparatorDemo.tsx"],
-  "sourcesContent": ["//! debug\nimport React from 'react'\nimport { Paragraph, Separator, XStack, YStack } from 'tamagui'\n\nexport default function SeparatorDemo() {\n  return (\n    <YStack w=\"100%\" maw={300} mx={15}>\n      <Paragraph fontWeight=\"800\">Tamagui</Paragraph>\n      <Paragraph>A cross-platform component library.</Paragraph>\n      <Separator my={15} />\n      <XStack h={20} ai=\"center\">\n        <Paragraph>Blog</Paragraph>\n        <Separator als=\"stretch\" vertical mx={15} />\n        <Paragraph>Docs</Paragraph>\n        <Separator als=\"stretch\" vertical mx={15} />\n        <Paragraph>Source</Paragraph>\n      </XStack>\n    </YStack>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkB;AAClB,qBAAqD;AAFrD;AAIe,yBAAyB;AACtC,SACE,mDAAC;AAAA,IAAO,GAAE;AAAA,IAAO,KAAK;AAAA,IAAK,IAAI;AAAA,KAC7B,mDAAC;AAAA,IAAU,YAAW;AAAA,KAAM,SAAO,GACnC,mDAAC,gCAAU,qCAAmC,GAC9C,mDAAC;AAAA,IAAU,IAAI;AAAA,GAAI,GACnB,mDAAC;AAAA,IAAO,GAAG;AAAA,IAAI,IAAG;AAAA,KAChB,mDAAC,gCAAU,MAAI,GACf,mDAAC;AAAA,IAAU,KAAI;AAAA,IAAU,UAAQ;AAAA,IAAC,IAAI;AAAA,GAAI,GAC1C,mDAAC,gCAAU,MAAI,GACf,mDAAC;AAAA,IAAU,KAAI;AAAA,IAAU,UAAQ;AAAA,IAAC,IAAI;AAAA,GAAI,GAC1C,mDAAC,gCAAU,QAAM,CACnB,CACF;AAEJ;AAfwB;",
+  "sourcesContent": ["import React from 'react'\nimport { Paragraph, Separator, XStack, YStack } from 'tamagui'\n\nexport default function SeparatorDemo() {\n  return (\n    <YStack w=\"100%\" maw={300} mx={15}>\n      <Paragraph fontWeight=\"800\">Tamagui</Paragraph>\n      <Paragraph>A cross-platform component library.</Paragraph>\n      <Separator my={15} />\n      <XStack h={20} ai=\"center\">\n        <Paragraph>Blog</Paragraph>\n        <Separator als=\"stretch\" vertical mx={15} />\n        <Paragraph>Docs</Paragraph>\n        <Separator als=\"stretch\" vertical mx={15} />\n        <Paragraph>Source</Paragraph>\n      </XStack>\n    </YStack>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,qBAAqD;AAEtC,yBAAyB;AACtC,SACE,mDAAC;AAAA,IAAO,GAAE;AAAA,IAAO,KAAK;AAAA,IAAK,IAAI;AAAA,KAC7B,mDAAC;AAAA,IAAU,YAAW;AAAA,KAAM,SAAO,GACnC,mDAAC,gCAAU,qCAAmC,GAC9C,mDAAC;AAAA,IAAU,IAAI;AAAA,GAAI,GACnB,mDAAC;AAAA,IAAO,GAAG;AAAA,IAAI,IAAG;AAAA,KAChB,mDAAC,gCAAU,MAAI,GACf,mDAAC;AAAA,IAAU,KAAI;AAAA,IAAU,UAAQ;AAAA,IAAC,IAAI;AAAA,GAAI,GAC1C,mDAAC,gCAAU,MAAI,GACf,mDAAC;AAAA,IAAU,KAAI;AAAA,IAAU,UAAQ;AAAA,IAAC,IAAI;AAAA,GAAI,GAC1C,mDAAC,gCAAU,QAAM,CACnB,CACF;AAEJ;AAfwB;",
   "names": []
 }

package/dist/esm/DialogDemo.js

@@ -10,7 +10,10 @@ function DialogDemo() {
     asChild: true
   }, /* @__PURE__ */ React.createElement(Button, null, "Edit Profile")), /* @__PURE__ */ React.createElement(Dialog.Portal, null, /* @__PURE__ */ React.createElement(Dialog.Overlay, {
     key: "overlay",
-    o: 0.5
+    animation: "quick",
+    o: 0.5,
+    enterStyle: { o: 0 },
+    exitStyle: { o: 0 }
   }), /* @__PURE__ */ React.createElement(Dialog.Content, {
     bordered: true,
     elevate: true,
@@ -31,6 +34,7 @@ function DialogDemo() {
     opacity: 1,
     y: 0
   }, /* @__PURE__ */ React.createElement(Dialog.Title, null, "Edit profile"), /* @__PURE__ */ React.createElement(Dialog.Description, null, "Make changes to your profile here. Click save when you're done."), /* @__PURE__ */ React.createElement(Fieldset, {
+    space: "$4",
     horizontal: true
   }, /* @__PURE__ */ React.createElement(Label, {
     w: 160,
@@ -41,6 +45,7 @@ function DialogDemo() {
     id: "name",
     defaultValue: "Nate Wienert"
   })), /* @__PURE__ */ React.createElement(Fieldset, {
+    space: "$4",
     horizontal: true
   }, /* @__PURE__ */ React.createElement(Label, {
     w: 160,

package/dist/esm/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 key=\"overlay\" o={0.5} />\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 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 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;AACA;AACA;AAEe,sBAAsB;AACnC,SACE,oCAAC;AAAA,IAAO,OAAK;AAAA,KACX,oCAAC,OAAO,SAAP;AAAA,IAAe,SAAO;AAAA,KACrB,oCAAC,cAAO,cAAY,CACtB,GACA,oCAAC,OAAO,QAAP,MACC,oCAAC,OAAO,SAAP;AAAA,IAAe,KAAI;AAAA,IAAU,GAAG;AAAA,GAAK,GACtC,oCAAC,OAAO,SAAP;AAAA,IACC,UAAQ;AAAA,IACR,SAAO;AAAA,IACP,KAAI;AAAA,IACJ,OAAK;AAAA,IACL,WAAW;AAAA,MACT;AAAA,MACA;AAAA,QACE,SAAS;AAAA,UACP,mBAAmB;AAAA,QACrB;AAAA,MACF;AAAA,IACF;AAAA,IACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI;AAAA,IACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK;AAAA,IAClD,GAAG;AAAA,IACH,OAAO;AAAA,IACP,SAAS;AAAA,IACT,GAAG;AAAA,KAEH,oCAAC,OAAO,OAAP,MAAa,cAAY,GAC1B,oCAAC,OAAO,aAAP,MAAmB,iEAEpB,GACA,oCAAC;AAAA,IAAS,YAAU;AAAA,KAClB,oCAAC;AAAA,IAAM,GAAG;AAAA,IAAK,gBAAe;AAAA,IAAW,SAAQ;AAAA,KAAO,MAExD,GACA,oCAAC;AAAA,IAAM,GAAG;AAAA,IAAG,IAAG;AAAA,IAAO,cAAa;AAAA,GAAe,CACrD,GACA,oCAAC;AAAA,IAAS,YAAU;AAAA,KAClB,oCAAC;AAAA,IAAM,GAAG;AAAA,IAAK,gBAAe;AAAA,IAAW,SAAQ;AAAA,KAAW,UAE5D,GACA,oCAAC;AAAA,IAAM,GAAG;AAAA,IAAG,IAAG;AAAA,IAAW,cAAa;AAAA,GAAe,CACzD,GAEA,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAW,IAAG;AAAA,KACvB,oCAAC,OAAO,OAAP;AAAA,IAAa,SAAO;AAAA,KACnB,oCAAC;AAAA,IAAO,OAAM;AAAA,IAAO,cAAW;AAAA,KAAQ,cAExC,CACF,CACF,GAEA,oCAAC,gBACC,oCAAC,OAAO,OAAP;AAAA,IAAa,SAAO;AAAA,KACnB,oCAAC;AAAA,IAAO,KAAI;AAAA,IAAW,GAAE;AAAA,IAAK,GAAE;AAAA,IAAK,UAAQ;AAAA,IAAC,MAAM;AAAA,GAAG,CACzD,CACF,CACF,CACF,CACF;AAEJ;AA9DwB;",
+  "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;AACA;AACA;AAEe,sBAAsB;AACnC,SACE,oCAAC;AAAA,IAAO,OAAK;AAAA,KACX,oCAAC,OAAO,SAAP;AAAA,IAAe,SAAO;AAAA,KACrB,oCAAC,cAAO,cAAY,CACtB,GACA,oCAAC,OAAO,QAAP,MACC,oCAAC,OAAO,SAAP;AAAA,IACC,KAAI;AAAA,IACJ,WAAU;AAAA,IACV,GAAG;AAAA,IACH,YAAY,EAAE,GAAG,EAAE;AAAA,IACnB,WAAW,EAAE,GAAG,EAAE;AAAA,GACpB,GACA,oCAAC,OAAO,SAAP;AAAA,IACC,UAAQ;AAAA,IACR,SAAO;AAAA,IACP,KAAI;AAAA,IACJ,OAAK;AAAA,IACL,WAAW;AAAA,MACT;AAAA,MACA;AAAA,QACE,SAAS;AAAA,UACP,mBAAmB;AAAA,QACrB;AAAA,MACF;AAAA,IACF;AAAA,IACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI;AAAA,IACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK;AAAA,IAClD,GAAG;AAAA,IACH,OAAO;AAAA,IACP,SAAS;AAAA,IACT,GAAG;AAAA,KAEH,oCAAC,OAAO,OAAP,MAAa,cAAY,GAC1B,oCAAC,OAAO,aAAP,MAAmB,iEAEpB,GACA,oCAAC;AAAA,IAAS,OAAM;AAAA,IAAK,YAAU;AAAA,KAC7B,oCAAC;AAAA,IAAM,GAAG;AAAA,IAAK,gBAAe;AAAA,IAAW,SAAQ;AAAA,KAAO,MAExD,GACA,oCAAC;AAAA,IAAM,GAAG;AAAA,IAAG,IAAG;AAAA,IAAO,cAAa;AAAA,GAAe,CACrD,GACA,oCAAC;AAAA,IAAS,OAAM;AAAA,IAAK,YAAU;AAAA,KAC7B,oCAAC;AAAA,IAAM,GAAG;AAAA,IAAK,gBAAe;AAAA,IAAW,SAAQ;AAAA,KAAW,UAE5D,GACA,oCAAC;AAAA,IAAM,GAAG;AAAA,IAAG,IAAG;AAAA,IAAW,cAAa;AAAA,GAAe,CACzD,GAEA,oCAAC;AAAA,IAAO,IAAG;AAAA,IAAW,IAAG;AAAA,KACvB,oCAAC,OAAO,OAAP;AAAA,IAAa,SAAO;AAAA,KACnB,oCAAC;AAAA,IAAO,OAAM;AAAA,IAAO,cAAW;AAAA,KAAQ,cAExC,CACF,CACF,GAEA,oCAAC,gBACC,oCAAC,OAAO,OAAP;AAAA,IAAa,SAAO;AAAA,KACnB,oCAAC;AAAA,IAAO,KAAI;AAAA,IAAW,GAAE;AAAA,IAAK,GAAE;AAAA,IAAK,UAAQ;AAAA,IAAC,MAAM;AAAA,GAAG,CACzD,CACF,CACF,CACF,CACF;AAEJ;AApEwB;",
   "names": []
 }

package/dist/esm/ListItemDemo.js

@@ -19,16 +19,16 @@ function ListItemDemo1() {
     size: "$4",
     vertical: true
   }, /* @__PURE__ */ React.createElement(ListItem, {
-    hoverable: true,
+    hoverTheme: true,
     icon: Star
   }, "Star"), /* @__PURE__ */ React.createElement(ListItem, {
-    hoverable: true,
+    hoverTheme: true,
     icon: Moon
   }, "Moon"), /* @__PURE__ */ React.createElement(ListItem, {
-    hoverable: true,
+    hoverTheme: true,
     icon: Sun
   }, "Sun"), /* @__PURE__ */ React.createElement(ListItem, {
-    hoverable: true,
+    hoverTheme: true,
     icon: Cloud
   }, "Cloud"));
 }
@@ -42,13 +42,13 @@ function ListItemDemo2() {
     vertical: true,
     separator: /* @__PURE__ */ React.createElement(Separator, null)
   }, /* @__PURE__ */ React.createElement(ListItem, {
-    hoverable: true,
+    hoverTheme: true,
     title: "Star",
     subTitle: "Subtitle",
     icon: Star,
     iconAfter: ChevronRight
   }), /* @__PURE__ */ React.createElement(ListItem, {
-    hoverable: true,
+    hoverTheme: true,
     title: "Moon",
     subTitle: "Subtitle",
     icon: Moon,

package/dist/esm/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 hoverable icon={Star}>\n        Star\n      </ListItem>\n      <ListItem hoverable icon={Moon}>\n        Moon\n      </ListItem>\n      <ListItem hoverable icon={Sun}>\n        Sun\n      </ListItem>\n      <ListItem hoverable 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 hoverable title=\"Star\" subTitle=\"Subtitle\" icon={Star} iconAfter={ChevronRight} />\n      <ListItem hoverable title=\"Moon\" subTitle=\"Subtitle\" icon={Moon} iconAfter={ChevronRight} />\n    </Group>\n  )\n}\n"],
-  "mappings": ";;AAAA;AACA;AACA;AAEe,wBAAwB;AACrC,SACE,oCAAC;AAAA,IAAO,KAAK,EAAE,eAAe,SAAS;AAAA,IAAG,IAAG;AAAA,IAAK,OAAK;AAAA,KACrD,oCAAC,mBAAc,GACf,oCAAC,mBAAc,CACjB;AAEJ;AAPwB;AASxB,yBAAyB;AACvB,SACE,oCAAC;AAAA,IAAM,KAAI;AAAA,IAAS,UAAQ;AAAA,IAAC,GAAG;AAAA,IAAK,MAAK;AAAA,IAAK,UAAQ;AAAA,KACrD,oCAAC;AAAA,IAAS,WAAS;AAAA,IAAC,MAAM;AAAA,KAAM,MAEhC,GACA,oCAAC;AAAA,IAAS,WAAS;AAAA,IAAC,MAAM;AAAA,KAAM,MAEhC,GACA,oCAAC;AAAA,IAAS,WAAS;AAAA,IAAC,MAAM;AAAA,KAAK,KAE/B,GACA,oCAAC;AAAA,IAAS,WAAS;AAAA,IAAC,MAAM;AAAA,KAAO,OAEjC,CACF;AAEJ;AAjBS;AAmBT,yBAAyB;AACvB,SACE,oCAAC;AAAA,IAAM,KAAI;AAAA,IAAS,UAAQ;AAAA,IAAC,GAAG;AAAA,IAAK,MAAK;AAAA,IAAK,UAAQ;AAAA,IAAC,WAAW,oCAAC,eAAU;AAAA,KAC5E,oCAAC;AAAA,IAAS,WAAS;AAAA,IAAC,OAAM;AAAA,IAAO,UAAS;AAAA,IAAW,MAAM;AAAA,IAAM,WAAW;AAAA,GAAc,GAC1F,oCAAC;AAAA,IAAS,WAAS;AAAA,IAAC,OAAM;AAAA,IAAO,UAAS;AAAA,IAAW,MAAM;AAAA,IAAM,WAAW;AAAA,GAAc,CAC5F;AAEJ;AAPS;",
+  "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;AACA;AACA;AAEe,wBAAwB;AACrC,SACE,oCAAC;AAAA,IAAO,KAAK,EAAE,eAAe,SAAS;AAAA,IAAG,IAAG;AAAA,IAAK,OAAK;AAAA,KACrD,oCAAC,mBAAc,GACf,oCAAC,mBAAc,CACjB;AAEJ;AAPwB;AASxB,yBAAyB;AACvB,SACE,oCAAC;AAAA,IAAM,KAAI;AAAA,IAAS,UAAQ;AAAA,IAAC,GAAG;AAAA,IAAK,MAAK;AAAA,IAAK,UAAQ;AAAA,KACrD,oCAAC;AAAA,IAAS,YAAU;AAAA,IAAC,MAAM;AAAA,KAAM,MAEjC,GACA,oCAAC;AAAA,IAAS,YAAU;AAAA,IAAC,MAAM;AAAA,KAAM,MAEjC,GACA,oCAAC;AAAA,IAAS,YAAU;AAAA,IAAC,MAAM;AAAA,KAAK,KAEhC,GACA,oCAAC;AAAA,IAAS,YAAU;AAAA,IAAC,MAAM;AAAA,KAAO,OAElC,CACF;AAEJ;AAjBS;AAmBT,yBAAyB;AACvB,SACE,oCAAC;AAAA,IAAM,KAAI;AAAA,IAAS,UAAQ;AAAA,IAAC,GAAG;AAAA,IAAK,MAAK;AAAA,IAAK,UAAQ;AAAA,IAAC,WAAW,oCAAC,eAAU;AAAA,KAC5E,oCAAC;AAAA,IAAS,YAAU;AAAA,IAAC,OAAM;AAAA,IAAO,UAAS;AAAA,IAAW,MAAM;AAAA,IAAM,WAAW;AAAA,GAAc,GAC3F,oCAAC;AAAA,IAAS,YAAU;AAAA,IAAC,OAAM;AAAA,IAAO,UAAS;AAAA,IAAW,MAAM;AAAA,IAAM,WAAW;AAAA,GAAc,CAC7F;AAEJ;AAPS;",
   "names": []
 }

package/dist/esm/SeparatorDemo.js

@@ -1,6 +1,5 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-//! debug
 import React from "react";
 import { Paragraph, Separator, XStack, YStack } from "tamagui";
 function SeparatorDemo() {

package/dist/esm/SeparatorDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SeparatorDemo.tsx"],
-  "sourcesContent": ["//! debug\nimport React from 'react'\nimport { Paragraph, Separator, XStack, YStack } from 'tamagui'\n\nexport default function SeparatorDemo() {\n  return (\n    <YStack w=\"100%\" maw={300} mx={15}>\n      <Paragraph fontWeight=\"800\">Tamagui</Paragraph>\n      <Paragraph>A cross-platform component library.</Paragraph>\n      <Separator my={15} />\n      <XStack h={20} ai=\"center\">\n        <Paragraph>Blog</Paragraph>\n        <Separator als=\"stretch\" vertical mx={15} />\n        <Paragraph>Docs</Paragraph>\n        <Separator als=\"stretch\" vertical mx={15} />\n        <Paragraph>Source</Paragraph>\n      </XStack>\n    </YStack>\n  )\n}\n"],
-  "mappings": ";;AAAA;AACA;AACA;AAEe,yBAAyB;AACtC,SACE,oCAAC;AAAA,IAAO,GAAE;AAAA,IAAO,KAAK;AAAA,IAAK,IAAI;AAAA,KAC7B,oCAAC;AAAA,IAAU,YAAW;AAAA,KAAM,SAAO,GACnC,oCAAC,iBAAU,qCAAmC,GAC9C,oCAAC;AAAA,IAAU,IAAI;AAAA,GAAI,GACnB,oCAAC;AAAA,IAAO,GAAG;AAAA,IAAI,IAAG;AAAA,KAChB,oCAAC,iBAAU,MAAI,GACf,oCAAC;AAAA,IAAU,KAAI;AAAA,IAAU,UAAQ;AAAA,IAAC,IAAI;AAAA,GAAI,GAC1C,oCAAC,iBAAU,MAAI,GACf,oCAAC;AAAA,IAAU,KAAI;AAAA,IAAU,UAAQ;AAAA,IAAC,IAAI;AAAA,GAAI,GAC1C,oCAAC,iBAAU,QAAM,CACnB,CACF;AAEJ;AAfwB;",
+  "sourcesContent": ["import React from 'react'\nimport { Paragraph, Separator, XStack, YStack } from 'tamagui'\n\nexport default function SeparatorDemo() {\n  return (\n    <YStack w=\"100%\" maw={300} mx={15}>\n      <Paragraph fontWeight=\"800\">Tamagui</Paragraph>\n      <Paragraph>A cross-platform component library.</Paragraph>\n      <Separator my={15} />\n      <XStack h={20} ai=\"center\">\n        <Paragraph>Blog</Paragraph>\n        <Separator als=\"stretch\" vertical mx={15} />\n        <Paragraph>Docs</Paragraph>\n        <Separator als=\"stretch\" vertical mx={15} />\n        <Paragraph>Source</Paragraph>\n      </XStack>\n    </YStack>\n  )\n}\n"],
+  "mappings": ";;AAAA;AACA;AAEe,yBAAyB;AACtC,SACE,oCAAC;AAAA,IAAO,GAAE;AAAA,IAAO,KAAK;AAAA,IAAK,IAAI;AAAA,KAC7B,oCAAC;AAAA,IAAU,YAAW;AAAA,KAAM,SAAO,GACnC,oCAAC,iBAAU,qCAAmC,GAC9C,oCAAC;AAAA,IAAU,IAAI;AAAA,GAAI,GACnB,oCAAC;AAAA,IAAO,GAAG;AAAA,IAAI,IAAG;AAAA,KAChB,oCAAC,iBAAU,MAAI,GACf,oCAAC;AAAA,IAAU,KAAI;AAAA,IAAU,UAAQ;AAAA,IAAC,IAAI;AAAA,GAAI,GAC1C,oCAAC,iBAAU,MAAI,GACf,oCAAC;AAAA,IAAU,KAAI;AAAA,IAAU,UAAQ;AAAA,IAAC,IAAI;AAAA,GAAI,GAC1C,oCAAC,iBAAU,QAAM,CACnB,CACF;AAEJ;AAfwB;",
   "names": []
 }

package/dist/jsx/DialogDemo.js

@@ -6,7 +6,7 @@ function DialogDemo() {
   return <Dialog modal>
     <Dialog.Trigger asChild><Button>Edit Profile</Button></Dialog.Trigger>
     <Dialog.Portal>
-      <Dialog.Overlay key="overlay" o={0.5} />
+      <Dialog.Overlay key="overlay" animation="quick" o={0.5} enterStyle={{ o: 0 }} exitStyle={{ o: 0 }} />
       <Dialog.Content bordered elevate key="content" space animation={[
         "quick",
         {
@@ -17,11 +17,11 @@ function DialogDemo() {
       ]} enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }} exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }} x={0} scale={1} opacity={1} y={0}>
         <Dialog.Title>Edit profile</Dialog.Title>
         <Dialog.Description>Make changes to your profile here. Click save when you're done.</Dialog.Description>
-        <Fieldset horizontal>
+        <Fieldset space="$4" horizontal>
           <Label w={160} justifyContent="flex-end" htmlFor="name">Name</Label>
           <Input f={1} id="name" defaultValue="Nate Wienert" />
         </Fieldset>
-        <Fieldset horizontal>
+        <Fieldset space="$4" horizontal>
           <Label w={160} justifyContent="flex-end" htmlFor="username">Username</Label>
           <Input f={1} id="username" defaultValue="@natebirdman" />
         </Fieldset>

package/dist/jsx/ListItemDemo.js

@@ -11,17 +11,17 @@ function ListItemDemo() {
 __name(ListItemDemo, "ListItemDemo");
 function ListItemDemo1() {
   return <Group als="center" bordered w={240} size="$4" vertical>
-    <ListItem hoverable icon={Star}>Star</ListItem>
-    <ListItem hoverable icon={Moon}>Moon</ListItem>
-    <ListItem hoverable icon={Sun}>Sun</ListItem>
-    <ListItem hoverable icon={Cloud}>Cloud</ListItem>
+    <ListItem hoverTheme icon={Star}>Star</ListItem>
+    <ListItem hoverTheme icon={Moon}>Moon</ListItem>
+    <ListItem hoverTheme icon={Sun}>Sun</ListItem>
+    <ListItem hoverTheme icon={Cloud}>Cloud</ListItem>
   </Group>;
 }
 __name(ListItemDemo1, "ListItemDemo1");
 function ListItemDemo2() {
   return <Group als="center" bordered w={240} size="$6" vertical separator={<Separator />}>
-    <ListItem hoverable title="Star" subTitle="Subtitle" icon={Star} iconAfter={ChevronRight} />
-    <ListItem hoverable title="Moon" subTitle="Subtitle" icon={Moon} iconAfter={ChevronRight} />
+    <ListItem hoverTheme title="Star" subTitle="Subtitle" icon={Star} iconAfter={ChevronRight} />
+    <ListItem hoverTheme title="Moon" subTitle="Subtitle" icon={Moon} iconAfter={ChevronRight} />
   </Group>;
 }
 __name(ListItemDemo2, "ListItemDemo2");

package/dist/jsx/SeparatorDemo.js

@@ -1,6 +1,5 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-//! debug
 import { Paragraph, Separator, XStack, YStack } from "tamagui";
 function SeparatorDemo() {
   return <YStack w="100%" maw={300} mx={15}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/demos",
-  "version": "1.0.1-beta.69",
+  "version": "1.0.1-beta.72",
   "sideEffects": false,
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
@@ -17,16 +17,16 @@
     "watch": "tamagui-build --watch"
   },
   "dependencies": {
-    "@tamagui/config-base": "^1.0.1-beta.69",
-    "@tamagui/core": "^1.0.1-beta.69",
-    "tamagui": "^1.0.1-beta.69"
+    "@tamagui/config-base": "^1.0.1-beta.72",
+    "@tamagui/core": "^1.0.1-beta.72",
+    "tamagui": "^1.0.1-beta.72"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.69",
+    "@tamagui/build": "^1.0.1-beta.72",
     "react": "*",
     "react-dom": "*"
   },

package/src/DialogDemo.tsx

@@ -9,7 +9,13 @@ export default function DialogDemo() {
         <Button>Edit Profile</Button>
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Overlay key="overlay" o={0.5} />
+        <Dialog.Overlay
+          key="overlay"
+          animation="quick"
+          o={0.5}
+          enterStyle={{ o: 0 }}
+          exitStyle={{ o: 0 }}
+        />
         <Dialog.Content
           bordered
           elevate
@@ -34,13 +40,13 @@ export default function DialogDemo() {
           <Dialog.Description>
             Make changes to your profile here. Click save when you're done.
           </Dialog.Description>
-          <Fieldset horizontal>
+          <Fieldset space="$4" horizontal>
             <Label w={160} justifyContent="flex-end" htmlFor="name">
               Name
             </Label>
             <Input f={1} id="name" defaultValue="Nate Wienert" />
           </Fieldset>
-          <Fieldset horizontal>
+          <Fieldset space="$4" horizontal>
             <Label w={160} justifyContent="flex-end" htmlFor="username">
               Username
             </Label>

package/src/ListItemDemo.tsx

@@ -14,16 +14,16 @@ export default function ListItemDemo() {
 function ListItemDemo1() {
   return (
     <Group als="center" bordered w={240} size="$4" vertical>
-      <ListItem hoverable icon={Star}>
+      <ListItem hoverTheme icon={Star}>
         Star
       </ListItem>
-      <ListItem hoverable icon={Moon}>
+      <ListItem hoverTheme icon={Moon}>
         Moon
       </ListItem>
-      <ListItem hoverable icon={Sun}>
+      <ListItem hoverTheme icon={Sun}>
         Sun
       </ListItem>
-      <ListItem hoverable icon={Cloud}>
+      <ListItem hoverTheme icon={Cloud}>
         Cloud
       </ListItem>
     </Group>
@@ -33,8 +33,8 @@ function ListItemDemo1() {
 function ListItemDemo2() {
   return (
     <Group als="center" bordered w={240} size="$6" vertical separator={<Separator />}>
-      <ListItem hoverable title="Star" subTitle="Subtitle" icon={Star} iconAfter={ChevronRight} />
-      <ListItem hoverable title="Moon" subTitle="Subtitle" icon={Moon} iconAfter={ChevronRight} />
+      <ListItem hoverTheme title="Star" subTitle="Subtitle" icon={Star} iconAfter={ChevronRight} />
+      <ListItem hoverTheme title="Moon" subTitle="Subtitle" icon={Moon} iconAfter={ChevronRight} />
     </Group>
   )
 }

package/src/SeparatorDemo.tsx

@@ -1,4 +1,3 @@
-//! debug
 import React from 'react'
 import { Paragraph, Separator, XStack, YStack } from 'tamagui'
 

package/types/DialogDemo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogDemo.d.ts","sourceRoot":"","sources":["../src/DialogDemo.tsx"],"names":[],"mappings":";AAIA,MAAM,CAAC,OAAO,UAAU,UAAU,gBA8DjC"}
+{"version":3,"file":"DialogDemo.d.ts","sourceRoot":"","sources":["../src/DialogDemo.tsx"],"names":[],"mappings":";AAIA,MAAM,CAAC,OAAO,UAAU,UAAU,gBAoEjC"}

package/types/SeparatorDemo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SeparatorDemo.d.ts","sourceRoot":"","sources":["../src/SeparatorDemo.tsx"],"names":[],"mappings":";AAIA,MAAM,CAAC,OAAO,UAAU,aAAa,gBAepC"}
+{"version":3,"file":"SeparatorDemo.d.ts","sourceRoot":"","sources":["../src/SeparatorDemo.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,OAAO,UAAU,aAAa,gBAepC"}