@tamagui/demos 1.11.2 → 1.12.0

package/dist/esm/PopoverDemo.js

@@ -10,7 +10,7 @@ import {
   YGroup
 } from "tamagui";
 function PopoverDemo() {
-  return /* @__PURE__ */ jsxs(XStack, { space: "$2", f: 1, jc: "center", ai: "center", children: [
+  return /* @__PURE__ */ jsxs(XStack, { space: "$2", flex: 1, justifyContent: "center", alignItems: "center", children: [
     /* @__PURE__ */ jsx(Demo, { placement: "left", Icon: ChevronLeft, Name: "left-popover" }),
     /* @__PURE__ */ jsx(Demo, { placement: "bottom", Icon: ChevronDown, Name: "bottom-popover" }),
     /* @__PURE__ */ jsx(Demo, { placement: "top", Icon: ChevronUp, Name: "top-popover" }),
@@ -31,13 +31,13 @@ function Demo({
     /* @__PURE__ */ jsxs(
       Popover.Content,
       {
-        bw: 1,
-        boc: "$borderColor",
-        enterStyle: { x: 0, y: -10, o: 0 },
-        exitStyle: { x: 0, y: -10, o: 0 },
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        enterStyle: { x: 0, y: -10, opacity: 0 },
+        exitStyle: { x: 0, y: -10, opacity: 0 },
         x: 0,
         y: 0,
-        o: 1,
+        opacity: 1,
         animation: [
           "quick",
           {
@@ -48,7 +48,7 @@ function Demo({
         ],
         elevate: true,
         children: [
-          /* @__PURE__ */ jsx(Popover.Arrow, { bw: 1, boc: "$borderColor" }),
+          /* @__PURE__ */ jsx(Popover.Arrow, { borderWidth: 1, borderColor: "$borderColor" }),
           /* @__PURE__ */ jsxs(YGroup, { space: "$3", children: [
             /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsxs(XStack, { space: "$3", children: [
               /* @__PURE__ */ jsx(Label, { size: "$3", htmlFor: Name, children: "Name" }),

package/dist/esm/PopoverDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/PopoverDemo.tsx"],
-  "sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@tamagui/lucide-icons'\nimport {\n  Adapt,\n  Button,\n  Input,\n  Label,\n  Popover,\n  PopoverProps,\n  XStack,\n  YGroup,\n} from 'tamagui'\n\nexport function PopoverDemo() {\n  return (\n    <XStack space=\"$2\" f={1} jc=\"center\" ai=\"center\">\n      <Demo placement=\"left\" Icon={ChevronLeft} Name=\"left-popover\" />\n      <Demo placement=\"bottom\" Icon={ChevronDown} Name=\"bottom-popover\" />\n      <Demo placement=\"top\" Icon={ChevronUp} Name=\"top-popover\" />\n      <Demo placement=\"right\" Icon={ChevronRight} Name=\"right-popover\" />\n    </XStack>\n  )\n}\n\nexport function Demo({\n  Icon,\n  Name,\n  ...props\n}: PopoverProps & { Icon?: any; Name?: string }) {\n  return (\n    <Popover size=\"$5\" {...props}>\n      <Popover.Trigger asChild>\n        <Button icon={Icon} />\n      </Popover.Trigger>\n\n      <Adapt when=\"sm\" platform=\"web\">\n        <Popover.Sheet modal dismissOnSnapToBottom>\n          <Popover.Sheet.Frame padding=\"$4\">\n            <Adapt.Contents />\n          </Popover.Sheet.Frame>\n          <Popover.Sheet.Overlay />\n        </Popover.Sheet>\n      </Adapt>\n\n      <Popover.Content\n        bw={1}\n        boc=\"$borderColor\"\n        enterStyle={{ x: 0, y: -10, o: 0 }}\n        exitStyle={{ x: 0, y: -10, o: 0 }}\n        x={0}\n        y={0}\n        o={1}\n        animation={[\n          'quick',\n          {\n            opacity: {\n              overshootClamping: true,\n            },\n          },\n        ]}\n        elevate\n      >\n        <Popover.Arrow bw={1} boc=\"$borderColor\" />\n\n        <YGroup space=\"$3\">\n          <YGroup.Item>\n            <XStack space=\"$3\">\n              <Label size=\"$3\" htmlFor={Name}>\n                Name\n              </Label>\n              <Input size=\"$3\" id={Name} />\n            </XStack>\n          </YGroup.Item>\n          <YGroup.Item>\n            <Popover.Close asChild>\n              <Button\n                size=\"$3\"\n                onPress={() => {\n                  /* Custom code goes here, does not interfere with popover closure */\n                }}\n              >\n                Submit\n              </Button>\n            </Popover.Close>\n          </YGroup.Item>\n        </YGroup>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],
-  "mappings": "AAcI,SACE,KADF;AAdJ,SAAS,aAAa,aAAa,cAAc,iBAAiB;AAClE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,cAAc;AAC5B,SACE,qBAAC,UAAO,OAAM,MAAK,GAAG,GAAG,IAAG,UAAS,IAAG,UACtC;AAAA,wBAAC,QAAK,WAAU,QAAO,MAAM,aAAa,MAAK,gBAAe;AAAA,IAC9D,oBAAC,QAAK,WAAU,UAAS,MAAM,aAAa,MAAK,kBAAiB;AAAA,IAClE,oBAAC,QAAK,WAAU,OAAM,MAAM,WAAW,MAAK,eAAc;AAAA,IAC1D,oBAAC,QAAK,WAAU,SAAQ,MAAM,cAAc,MAAK,iBAAgB;AAAA,KACnE;AAEJ;AAEO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,SACE,qBAAC,WAAQ,MAAK,MAAM,GAAG,OACrB;AAAA,wBAAC,QAAQ,SAAR,EAAgB,SAAO,MACtB,8BAAC,UAAO,MAAM,MAAM,GACtB;AAAA,IAEA,oBAAC,SAAM,MAAK,MAAK,UAAS,OACxB,+BAAC,QAAQ,OAAR,EAAc,OAAK,MAAC,uBAAqB,MACxC;AAAA,0BAAC,QAAQ,MAAM,OAAd,EAAoB,SAAQ,MAC3B,8BAAC,MAAM,UAAN,EAAe,GAClB;AAAA,MACA,oBAAC,QAAQ,MAAM,SAAd,EAAsB;AAAA,OACzB,GACF;AAAA,IAEA;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACC,IAAI;AAAA,QACJ,KAAI;AAAA,QACJ,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,QACjC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,QAChC,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,SAAO;AAAA,QAEP;AAAA,8BAAC,QAAQ,OAAR,EAAc,IAAI,GAAG,KAAI,gBAAe;AAAA,UAEzC,qBAAC,UAAO,OAAM,MACZ;AAAA,gCAAC,OAAO,MAAP,EACC,+BAAC,UAAO,OAAM,MACZ;AAAA,kCAAC,SAAM,MAAK,MAAK,SAAS,MAAM,kBAEhC;AAAA,cACA,oBAAC,SAAM,MAAK,MAAK,IAAI,MAAM;AAAA,eAC7B,GACF;AAAA,YACA,oBAAC,OAAO,MAAP,EACC,8BAAC,QAAQ,OAAR,EAAc,SAAO,MACpB;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM;AAAA,gBAEf;AAAA,gBACD;AAAA;AAAA,YAED,GACF,GACF;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@tamagui/lucide-icons'\nimport {\n  Adapt,\n  Button,\n  Input,\n  Label,\n  Popover,\n  PopoverProps,\n  XStack,\n  YGroup,\n} from 'tamagui'\n\nexport function PopoverDemo() {\n  return (\n    <XStack space=\"$2\" flex={1} justifyContent=\"center\" alignItems=\"center\">\n      <Demo placement=\"left\" Icon={ChevronLeft} Name=\"left-popover\" />\n      <Demo placement=\"bottom\" Icon={ChevronDown} Name=\"bottom-popover\" />\n      <Demo placement=\"top\" Icon={ChevronUp} Name=\"top-popover\" />\n      <Demo placement=\"right\" Icon={ChevronRight} Name=\"right-popover\" />\n    </XStack>\n  )\n}\n\nexport function Demo({\n  Icon,\n  Name,\n  ...props\n}: PopoverProps & { Icon?: any; Name?: string }) {\n  return (\n    <Popover size=\"$5\" {...props}>\n      <Popover.Trigger asChild>\n        <Button icon={Icon} />\n      </Popover.Trigger>\n\n      <Adapt when=\"sm\" platform=\"web\">\n        <Popover.Sheet modal dismissOnSnapToBottom>\n          <Popover.Sheet.Frame padding=\"$4\">\n            <Adapt.Contents />\n          </Popover.Sheet.Frame>\n          <Popover.Sheet.Overlay />\n        </Popover.Sheet>\n      </Adapt>\n\n      <Popover.Content\n        borderWidth={1}\n        borderColor=\"$borderColor\"\n        enterStyle={{ x: 0, y: -10, opacity: 0 }}\n        exitStyle={{ x: 0, y: -10, opacity: 0 }}\n        x={0}\n        y={0}\n        opacity={1}\n        animation={[\n          'quick',\n          {\n            opacity: {\n              overshootClamping: true,\n            },\n          },\n        ]}\n        elevate\n      >\n        <Popover.Arrow borderWidth={1} borderColor=\"$borderColor\" />\n\n        <YGroup space=\"$3\">\n          <YGroup.Item>\n            <XStack space=\"$3\">\n              <Label size=\"$3\" htmlFor={Name}>\n                Name\n              </Label>\n              <Input size=\"$3\" id={Name} />\n            </XStack>\n          </YGroup.Item>\n          <YGroup.Item>\n            <Popover.Close asChild>\n              <Button\n                size=\"$3\"\n                onPress={() => {\n                  /* Custom code goes here, does not interfere with popover closure */\n                }}\n              >\n                Submit\n              </Button>\n            </Popover.Close>\n          </YGroup.Item>\n        </YGroup>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],
+  "mappings": "AAcI,SACE,KADF;AAdJ,SAAS,aAAa,aAAa,cAAc,iBAAiB;AAClE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,cAAc;AAC5B,SACE,qBAAC,UAAO,OAAM,MAAK,MAAM,GAAG,gBAAe,UAAS,YAAW,UAC7D;AAAA,wBAAC,QAAK,WAAU,QAAO,MAAM,aAAa,MAAK,gBAAe;AAAA,IAC9D,oBAAC,QAAK,WAAU,UAAS,MAAM,aAAa,MAAK,kBAAiB;AAAA,IAClE,oBAAC,QAAK,WAAU,OAAM,MAAM,WAAW,MAAK,eAAc;AAAA,IAC1D,oBAAC,QAAK,WAAU,SAAQ,MAAM,cAAc,MAAK,iBAAgB;AAAA,KACnE;AAEJ;AAEO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,SACE,qBAAC,WAAQ,MAAK,MAAM,GAAG,OACrB;AAAA,wBAAC,QAAQ,SAAR,EAAgB,SAAO,MACtB,8BAAC,UAAO,MAAM,MAAM,GACtB;AAAA,IAEA,oBAAC,SAAM,MAAK,MAAK,UAAS,OACxB,+BAAC,QAAQ,OAAR,EAAc,OAAK,MAAC,uBAAqB,MACxC;AAAA,0BAAC,QAAQ,MAAM,OAAd,EAAoB,SAAQ,MAC3B,8BAAC,MAAM,UAAN,EAAe,GAClB;AAAA,MACA,oBAAC,QAAQ,MAAM,SAAd,EAAsB;AAAA,OACzB,GACF;AAAA,IAEA;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACC,aAAa;AAAA,QACb,aAAY;AAAA,QACZ,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,EAAE;AAAA,QACvC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,EAAE;AAAA,QACtC,GAAG;AAAA,QACH,GAAG;AAAA,QACH,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,SAAO;AAAA,QAEP;AAAA,8BAAC,QAAQ,OAAR,EAAc,aAAa,GAAG,aAAY,gBAAe;AAAA,UAE1D,qBAAC,UAAO,OAAM,MACZ;AAAA,gCAAC,OAAO,MAAP,EACC,+BAAC,UAAO,OAAM,MACZ;AAAA,kCAAC,SAAM,MAAK,MAAK,SAAS,MAAM,kBAEhC;AAAA,cACA,oBAAC,SAAM,MAAK,MAAK,IAAI,MAAM;AAAA,eAC7B,GACF;AAAA,YACA,oBAAC,OAAO,MAAP,EACC,8BAAC,QAAQ,OAAR,EAAc,SAAO,MACpB;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM;AAAA,gBAEf;AAAA,gBACD;AAAA;AAAA,YAED,GACF,GACF;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/PopoverDemo.mjs

@@ -10,7 +10,7 @@ import {
   YGroup
 } from "tamagui";
 function PopoverDemo() {
-  return /* @__PURE__ */ jsxs(XStack, { space: "$2", f: 1, jc: "center", ai: "center", children: [
+  return /* @__PURE__ */ jsxs(XStack, { space: "$2", flex: 1, justifyContent: "center", alignItems: "center", children: [
     /* @__PURE__ */ jsx(Demo, { placement: "left", Icon: ChevronLeft, Name: "left-popover" }),
     /* @__PURE__ */ jsx(Demo, { placement: "bottom", Icon: ChevronDown, Name: "bottom-popover" }),
     /* @__PURE__ */ jsx(Demo, { placement: "top", Icon: ChevronUp, Name: "top-popover" }),
@@ -31,13 +31,13 @@ function Demo({
     /* @__PURE__ */ jsxs(
       Popover.Content,
       {
-        bw: 1,
-        boc: "$borderColor",
-        enterStyle: { x: 0, y: -10, o: 0 },
-        exitStyle: { x: 0, y: -10, o: 0 },
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        enterStyle: { x: 0, y: -10, opacity: 0 },
+        exitStyle: { x: 0, y: -10, opacity: 0 },
         x: 0,
         y: 0,
-        o: 1,
+        opacity: 1,
         animation: [
           "quick",
           {
@@ -48,7 +48,7 @@ function Demo({
         ],
         elevate: true,
         children: [
-          /* @__PURE__ */ jsx(Popover.Arrow, { bw: 1, boc: "$borderColor" }),
+          /* @__PURE__ */ jsx(Popover.Arrow, { borderWidth: 1, borderColor: "$borderColor" }),
           /* @__PURE__ */ jsxs(YGroup, { space: "$3", children: [
             /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsxs(XStack, { space: "$3", children: [
               /* @__PURE__ */ jsx(Label, { size: "$3", htmlFor: Name, children: "Name" }),

package/dist/esm/PopoverDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/PopoverDemo.tsx"],
-  "sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@tamagui/lucide-icons'\nimport {\n  Adapt,\n  Button,\n  Input,\n  Label,\n  Popover,\n  PopoverProps,\n  XStack,\n  YGroup,\n} from 'tamagui'\n\nexport function PopoverDemo() {\n  return (\n    <XStack space=\"$2\" f={1} jc=\"center\" ai=\"center\">\n      <Demo placement=\"left\" Icon={ChevronLeft} Name=\"left-popover\" />\n      <Demo placement=\"bottom\" Icon={ChevronDown} Name=\"bottom-popover\" />\n      <Demo placement=\"top\" Icon={ChevronUp} Name=\"top-popover\" />\n      <Demo placement=\"right\" Icon={ChevronRight} Name=\"right-popover\" />\n    </XStack>\n  )\n}\n\nexport function Demo({\n  Icon,\n  Name,\n  ...props\n}: PopoverProps & { Icon?: any; Name?: string }) {\n  return (\n    <Popover size=\"$5\" {...props}>\n      <Popover.Trigger asChild>\n        <Button icon={Icon} />\n      </Popover.Trigger>\n\n      <Adapt when=\"sm\" platform=\"web\">\n        <Popover.Sheet modal dismissOnSnapToBottom>\n          <Popover.Sheet.Frame padding=\"$4\">\n            <Adapt.Contents />\n          </Popover.Sheet.Frame>\n          <Popover.Sheet.Overlay />\n        </Popover.Sheet>\n      </Adapt>\n\n      <Popover.Content\n        bw={1}\n        boc=\"$borderColor\"\n        enterStyle={{ x: 0, y: -10, o: 0 }}\n        exitStyle={{ x: 0, y: -10, o: 0 }}\n        x={0}\n        y={0}\n        o={1}\n        animation={[\n          'quick',\n          {\n            opacity: {\n              overshootClamping: true,\n            },\n          },\n        ]}\n        elevate\n      >\n        <Popover.Arrow bw={1} boc=\"$borderColor\" />\n\n        <YGroup space=\"$3\">\n          <YGroup.Item>\n            <XStack space=\"$3\">\n              <Label size=\"$3\" htmlFor={Name}>\n                Name\n              </Label>\n              <Input size=\"$3\" id={Name} />\n            </XStack>\n          </YGroup.Item>\n          <YGroup.Item>\n            <Popover.Close asChild>\n              <Button\n                size=\"$3\"\n                onPress={() => {\n                  /* Custom code goes here, does not interfere with popover closure */\n                }}\n              >\n                Submit\n              </Button>\n            </Popover.Close>\n          </YGroup.Item>\n        </YGroup>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],
-  "mappings": "AAcI,SACE,KADF;AAdJ,SAAS,aAAa,aAAa,cAAc,iBAAiB;AAClE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,cAAc;AAC5B,SACE,qBAAC,UAAO,OAAM,MAAK,GAAG,GAAG,IAAG,UAAS,IAAG,UACtC;AAAA,wBAAC,QAAK,WAAU,QAAO,MAAM,aAAa,MAAK,gBAAe;AAAA,IAC9D,oBAAC,QAAK,WAAU,UAAS,MAAM,aAAa,MAAK,kBAAiB;AAAA,IAClE,oBAAC,QAAK,WAAU,OAAM,MAAM,WAAW,MAAK,eAAc;AAAA,IAC1D,oBAAC,QAAK,WAAU,SAAQ,MAAM,cAAc,MAAK,iBAAgB;AAAA,KACnE;AAEJ;AAEO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,SACE,qBAAC,WAAQ,MAAK,MAAM,GAAG,OACrB;AAAA,wBAAC,QAAQ,SAAR,EAAgB,SAAO,MACtB,8BAAC,UAAO,MAAM,MAAM,GACtB;AAAA,IAEA,oBAAC,SAAM,MAAK,MAAK,UAAS,OACxB,+BAAC,QAAQ,OAAR,EAAc,OAAK,MAAC,uBAAqB,MACxC;AAAA,0BAAC,QAAQ,MAAM,OAAd,EAAoB,SAAQ,MAC3B,8BAAC,MAAM,UAAN,EAAe,GAClB;AAAA,MACA,oBAAC,QAAQ,MAAM,SAAd,EAAsB;AAAA,OACzB,GACF;AAAA,IAEA;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACC,IAAI;AAAA,QACJ,KAAI;AAAA,QACJ,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,QACjC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,GAAG,EAAE;AAAA,QAChC,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,SAAO;AAAA,QAEP;AAAA,8BAAC,QAAQ,OAAR,EAAc,IAAI,GAAG,KAAI,gBAAe;AAAA,UAEzC,qBAAC,UAAO,OAAM,MACZ;AAAA,gCAAC,OAAO,MAAP,EACC,+BAAC,UAAO,OAAM,MACZ;AAAA,kCAAC,SAAM,MAAK,MAAK,SAAS,MAAM,kBAEhC;AAAA,cACA,oBAAC,SAAM,MAAK,MAAK,IAAI,MAAM;AAAA,eAC7B,GACF;AAAA,YACA,oBAAC,OAAO,MAAP,EACC,8BAAC,QAAQ,OAAR,EAAc,SAAO,MACpB;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM;AAAA,gBAEf;AAAA,gBACD;AAAA;AAAA,YAED,GACF,GACF;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from '@tamagui/lucide-icons'\nimport {\n  Adapt,\n  Button,\n  Input,\n  Label,\n  Popover,\n  PopoverProps,\n  XStack,\n  YGroup,\n} from 'tamagui'\n\nexport function PopoverDemo() {\n  return (\n    <XStack space=\"$2\" flex={1} justifyContent=\"center\" alignItems=\"center\">\n      <Demo placement=\"left\" Icon={ChevronLeft} Name=\"left-popover\" />\n      <Demo placement=\"bottom\" Icon={ChevronDown} Name=\"bottom-popover\" />\n      <Demo placement=\"top\" Icon={ChevronUp} Name=\"top-popover\" />\n      <Demo placement=\"right\" Icon={ChevronRight} Name=\"right-popover\" />\n    </XStack>\n  )\n}\n\nexport function Demo({\n  Icon,\n  Name,\n  ...props\n}: PopoverProps & { Icon?: any; Name?: string }) {\n  return (\n    <Popover size=\"$5\" {...props}>\n      <Popover.Trigger asChild>\n        <Button icon={Icon} />\n      </Popover.Trigger>\n\n      <Adapt when=\"sm\" platform=\"web\">\n        <Popover.Sheet modal dismissOnSnapToBottom>\n          <Popover.Sheet.Frame padding=\"$4\">\n            <Adapt.Contents />\n          </Popover.Sheet.Frame>\n          <Popover.Sheet.Overlay />\n        </Popover.Sheet>\n      </Adapt>\n\n      <Popover.Content\n        borderWidth={1}\n        borderColor=\"$borderColor\"\n        enterStyle={{ x: 0, y: -10, opacity: 0 }}\n        exitStyle={{ x: 0, y: -10, opacity: 0 }}\n        x={0}\n        y={0}\n        opacity={1}\n        animation={[\n          'quick',\n          {\n            opacity: {\n              overshootClamping: true,\n            },\n          },\n        ]}\n        elevate\n      >\n        <Popover.Arrow borderWidth={1} borderColor=\"$borderColor\" />\n\n        <YGroup space=\"$3\">\n          <YGroup.Item>\n            <XStack space=\"$3\">\n              <Label size=\"$3\" htmlFor={Name}>\n                Name\n              </Label>\n              <Input size=\"$3\" id={Name} />\n            </XStack>\n          </YGroup.Item>\n          <YGroup.Item>\n            <Popover.Close asChild>\n              <Button\n                size=\"$3\"\n                onPress={() => {\n                  /* Custom code goes here, does not interfere with popover closure */\n                }}\n              >\n                Submit\n              </Button>\n            </Popover.Close>\n          </YGroup.Item>\n        </YGroup>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],
+  "mappings": "AAcI,SACE,KADF;AAdJ,SAAS,aAAa,aAAa,cAAc,iBAAiB;AAClE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,cAAc;AAC5B,SACE,qBAAC,UAAO,OAAM,MAAK,MAAM,GAAG,gBAAe,UAAS,YAAW,UAC7D;AAAA,wBAAC,QAAK,WAAU,QAAO,MAAM,aAAa,MAAK,gBAAe;AAAA,IAC9D,oBAAC,QAAK,WAAU,UAAS,MAAM,aAAa,MAAK,kBAAiB;AAAA,IAClE,oBAAC,QAAK,WAAU,OAAM,MAAM,WAAW,MAAK,eAAc;AAAA,IAC1D,oBAAC,QAAK,WAAU,SAAQ,MAAM,cAAc,MAAK,iBAAgB;AAAA,KACnE;AAEJ;AAEO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,SACE,qBAAC,WAAQ,MAAK,MAAM,GAAG,OACrB;AAAA,wBAAC,QAAQ,SAAR,EAAgB,SAAO,MACtB,8BAAC,UAAO,MAAM,MAAM,GACtB;AAAA,IAEA,oBAAC,SAAM,MAAK,MAAK,UAAS,OACxB,+BAAC,QAAQ,OAAR,EAAc,OAAK,MAAC,uBAAqB,MACxC;AAAA,0BAAC,QAAQ,MAAM,OAAd,EAAoB,SAAQ,MAC3B,8BAAC,MAAM,UAAN,EAAe,GAClB;AAAA,MACA,oBAAC,QAAQ,MAAM,SAAd,EAAsB;AAAA,OACzB,GACF;AAAA,IAEA;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACC,aAAa;AAAA,QACb,aAAY;AAAA,QACZ,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,EAAE;AAAA,QACvC,WAAW,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,EAAE;AAAA,QACtC,GAAG;AAAA,QACH,GAAG;AAAA,QACH,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,SAAO;AAAA,QAEP;AAAA,8BAAC,QAAQ,OAAR,EAAc,aAAa,GAAG,aAAY,gBAAe;AAAA,UAE1D,qBAAC,UAAO,OAAM,MACZ;AAAA,gCAAC,OAAO,MAAP,EACC,+BAAC,UAAO,OAAM,MACZ;AAAA,kCAAC,SAAM,MAAK,MAAK,SAAS,MAAM,kBAEhC;AAAA,cACA,oBAAC,SAAM,MAAK,MAAK,IAAI,MAAM;AAAA,eAC7B,GACF;AAAA,YACA,oBAAC,OAAO,MAAP,EACC,8BAAC,QAAQ,OAAR,EAAc,SAAO,MACpB;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM;AAAA,gBAEf;AAAA,gBACD;AAAA;AAAA,YAED,GACF,GACF;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/ProgressDemo.js

@@ -12,19 +12,19 @@ function ProgressDemo() {
     };
   }, []);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(YStack, { h: 60, ai: "center", space: true, children: [
-      /* @__PURE__ */ jsxs(Paragraph, { h: 30, o: 0.5, children: [
+    /* @__PURE__ */ jsxs(YStack, { height: 60, alignItems: "center", space: true, children: [
+      /* @__PURE__ */ jsxs(Paragraph, { height: 30, opacity: 0.5, children: [
         "Size: ",
         size
       ] }),
       /* @__PURE__ */ jsx(Progress, { size: sizeProp, value: progress, children: /* @__PURE__ */ jsx(Progress.Indicator, { animation: "bouncy" }) })
     ] }),
-    /* @__PURE__ */ jsxs(XStack, { ai: "center", space: true, pos: "absolute", b: "$3", l: "$4", $xxs: { dsp: "none" }, children: [
+    /* @__PURE__ */ jsxs(XStack, { ai: "center", space: true, position: "absolute", bottom: "$3", left: "$4", $xxs: { display: "none" }, children: [
       /* @__PURE__ */ jsxs(
         Slider,
         {
           size: "$2",
-          w: 130,
+          width: 130,
           defaultValue: [4],
           min: 2,
           max: 6,
@@ -33,7 +33,7 @@ function ProgressDemo() {
             setSize(val);
           },
           children: [
-            /* @__PURE__ */ jsx(Slider.Track, { bw: 1, boc: "$color5", children: /* @__PURE__ */ jsx(Slider.TrackActive, {}) }),
+            /* @__PURE__ */ jsx(Slider.Track, { borderWidth: 1, borderColor: "$color5", children: /* @__PURE__ */ jsx(Slider.TrackActive, {}) }),
             /* @__PURE__ */ jsx(Slider.Thumb, { circular: true, index: 0 })
           ]
         }

package/dist/esm/ProgressDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ProgressDemo.tsx"],
-  "sourcesContent": ["import { 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=\"$3\" l=\"$4\" $xxs={{ dsp: '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 bw={1} boc=\"$color5\">\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": "AAgBI,mBAMM,KAJF,YAFJ;AAhBJ,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,WAAW,UAAsB,QAAQ,QAAQ,cAAc;AAEzE,SAAS,eAAe;AAC7B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAClC,QAAM,CAAC,UAAU,WAAW,IAAI,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,iCACE;AAAA,yBAAC,UAAO,GAAG,IAAI,IAAG,UAAS,OAAK,MAC9B;AAAA,2BAAC,aAAU,GAAG,IAAI,GAAG,KAAK;AAAA;AAAA,QACjB;AAAA,SACT;AAAA,MACA,oBAAC,YAAS,MAAM,UAAU,OAAO,UAC/B,8BAAC,SAAS,WAAT,EAAmB,WAAU,UAAS,GACzC;AAAA,OACF;AAAA,IAEA,qBAAC,UAAO,IAAG,UAAS,OAAK,MAAC,KAAI,YAAW,GAAE,MAAK,GAAE,MAAK,MAAM,EAAE,KAAK,OAAO,GACzE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,GAAG;AAAA,UACH,cAAc,CAAC,CAAC;AAAA,UAChB,KAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,oBAAQ,GAAG;AAAA,UACb;AAAA,UAEA;AAAA,gCAAC,OAAO,OAAP,EAAa,IAAI,GAAG,KAAI,WACvB,8BAAC,OAAO,aAAP,EAAmB,GACtB;AAAA,YACA,oBAAC,OAAO,OAAP,EAAa,UAAQ,MAAC,OAAO,GAAG;AAAA;AAAA;AAAA,MACnC;AAAA,MAEA,oBAAC,UAAO,MAAK,MAAK,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG,GAAG,kBAE3E;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { 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 height={60} alignItems=\"center\" space>\n        <Paragraph height={30} opacity={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 position=\"absolute\" bottom=\"$3\" left=\"$4\" $xxs={{ display: 'none' }}>\n        <Slider\n          size=\"$2\"\n          width={130}\n          defaultValue={[4]}\n          min={2}\n          max={6}\n          step={1}\n          onValueChange={([val]) => {\n            setSize(val)\n          }}\n        >\n          <Slider.Track borderWidth={1} borderColor=\"$color5\">\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": "AAgBI,mBAMM,KAJF,YAFJ;AAhBJ,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,WAAW,UAAsB,QAAQ,QAAQ,cAAc;AAEzE,SAAS,eAAe;AAC7B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAClC,QAAM,CAAC,UAAU,WAAW,IAAI,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,iCACE;AAAA,yBAAC,UAAO,QAAQ,IAAI,YAAW,UAAS,OAAK,MAC3C;AAAA,2BAAC,aAAU,QAAQ,IAAI,SAAS,KAAK;AAAA;AAAA,QAC5B;AAAA,SACT;AAAA,MACA,oBAAC,YAAS,MAAM,UAAU,OAAO,UAC/B,8BAAC,SAAS,WAAT,EAAmB,WAAU,UAAS,GACzC;AAAA,OACF;AAAA,IAEA,qBAAC,UAAO,IAAG,UAAS,OAAK,MAAC,UAAS,YAAW,QAAO,MAAK,MAAK,MAAK,MAAM,EAAE,SAAS,OAAO,GAC1F;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO;AAAA,UACP,cAAc,CAAC,CAAC;AAAA,UAChB,KAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,oBAAQ,GAAG;AAAA,UACb;AAAA,UAEA;AAAA,gCAAC,OAAO,OAAP,EAAa,aAAa,GAAG,aAAY,WACxC,8BAAC,OAAO,aAAP,EAAmB,GACtB;AAAA,YACA,oBAAC,OAAO,OAAP,EAAa,UAAQ,MAAC,OAAO,GAAG;AAAA;AAAA;AAAA,MACnC;AAAA,MAEA,oBAAC,UAAO,MAAK,MAAK,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG,GAAG,kBAE3E;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/ProgressDemo.mjs

@@ -12,19 +12,19 @@ function ProgressDemo() {
     };
   }, []);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(YStack, { h: 60, ai: "center", space: true, children: [
-      /* @__PURE__ */ jsxs(Paragraph, { h: 30, o: 0.5, children: [
+    /* @__PURE__ */ jsxs(YStack, { height: 60, alignItems: "center", space: true, children: [
+      /* @__PURE__ */ jsxs(Paragraph, { height: 30, opacity: 0.5, children: [
         "Size: ",
         size
       ] }),
       /* @__PURE__ */ jsx(Progress, { size: sizeProp, value: progress, children: /* @__PURE__ */ jsx(Progress.Indicator, { animation: "bouncy" }) })
     ] }),
-    /* @__PURE__ */ jsxs(XStack, { ai: "center", space: true, pos: "absolute", b: "$3", l: "$4", $xxs: { dsp: "none" }, children: [
+    /* @__PURE__ */ jsxs(XStack, { ai: "center", space: true, position: "absolute", bottom: "$3", left: "$4", $xxs: { display: "none" }, children: [
       /* @__PURE__ */ jsxs(
         Slider,
         {
           size: "$2",
-          w: 130,
+          width: 130,
           defaultValue: [4],
           min: 2,
           max: 6,
@@ -33,7 +33,7 @@ function ProgressDemo() {
             setSize(val);
           },
           children: [
-            /* @__PURE__ */ jsx(Slider.Track, { bw: 1, boc: "$color5", children: /* @__PURE__ */ jsx(Slider.TrackActive, {}) }),
+            /* @__PURE__ */ jsx(Slider.Track, { borderWidth: 1, borderColor: "$color5", children: /* @__PURE__ */ jsx(Slider.TrackActive, {}) }),
             /* @__PURE__ */ jsx(Slider.Thumb, { circular: true, index: 0 })
           ]
         }

package/dist/esm/ProgressDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ProgressDemo.tsx"],
-  "sourcesContent": ["import { 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=\"$3\" l=\"$4\" $xxs={{ dsp: '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 bw={1} boc=\"$color5\">\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": "AAgBI,mBAMM,KAJF,YAFJ;AAhBJ,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,WAAW,UAAsB,QAAQ,QAAQ,cAAc;AAEzE,SAAS,eAAe;AAC7B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAClC,QAAM,CAAC,UAAU,WAAW,IAAI,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,iCACE;AAAA,yBAAC,UAAO,GAAG,IAAI,IAAG,UAAS,OAAK,MAC9B;AAAA,2BAAC,aAAU,GAAG,IAAI,GAAG,KAAK;AAAA;AAAA,QACjB;AAAA,SACT;AAAA,MACA,oBAAC,YAAS,MAAM,UAAU,OAAO,UAC/B,8BAAC,SAAS,WAAT,EAAmB,WAAU,UAAS,GACzC;AAAA,OACF;AAAA,IAEA,qBAAC,UAAO,IAAG,UAAS,OAAK,MAAC,KAAI,YAAW,GAAE,MAAK,GAAE,MAAK,MAAM,EAAE,KAAK,OAAO,GACzE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,GAAG;AAAA,UACH,cAAc,CAAC,CAAC;AAAA,UAChB,KAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,oBAAQ,GAAG;AAAA,UACb;AAAA,UAEA;AAAA,gCAAC,OAAO,OAAP,EAAa,IAAI,GAAG,KAAI,WACvB,8BAAC,OAAO,aAAP,EAAmB,GACtB;AAAA,YACA,oBAAC,OAAO,OAAP,EAAa,UAAQ,MAAC,OAAO,GAAG;AAAA;AAAA;AAAA,MACnC;AAAA,MAEA,oBAAC,UAAO,MAAK,MAAK,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG,GAAG,kBAE3E;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { 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 height={60} alignItems=\"center\" space>\n        <Paragraph height={30} opacity={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 position=\"absolute\" bottom=\"$3\" left=\"$4\" $xxs={{ display: 'none' }}>\n        <Slider\n          size=\"$2\"\n          width={130}\n          defaultValue={[4]}\n          min={2}\n          max={6}\n          step={1}\n          onValueChange={([val]) => {\n            setSize(val)\n          }}\n        >\n          <Slider.Track borderWidth={1} borderColor=\"$color5\">\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": "AAgBI,mBAMM,KAJF,YAFJ;AAhBJ,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,WAAW,UAAsB,QAAQ,QAAQ,cAAc;AAEzE,SAAS,eAAe;AAC7B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAClC,QAAM,CAAC,UAAU,WAAW,IAAI,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,iCACE;AAAA,yBAAC,UAAO,QAAQ,IAAI,YAAW,UAAS,OAAK,MAC3C;AAAA,2BAAC,aAAU,QAAQ,IAAI,SAAS,KAAK;AAAA;AAAA,QAC5B;AAAA,SACT;AAAA,MACA,oBAAC,YAAS,MAAM,UAAU,OAAO,UAC/B,8BAAC,SAAS,WAAT,EAAmB,WAAU,UAAS,GACzC;AAAA,OACF;AAAA,IAEA,qBAAC,UAAO,IAAG,UAAS,OAAK,MAAC,UAAS,YAAW,QAAO,MAAK,MAAK,MAAK,MAAM,EAAE,SAAS,OAAO,GAC1F;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO;AAAA,UACP,cAAc,CAAC,CAAC;AAAA,UAChB,KAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,oBAAQ,GAAG;AAAA,UACb;AAAA,UAEA;AAAA,gCAAC,OAAO,OAAP,EAAa,aAAa,GAAG,aAAY,WACxC,8BAAC,OAAO,aAAP,EAAmB,GACtB;AAAA,YACA,oBAAC,OAAO,OAAP,EAAa,UAAQ,MAAC,OAAO,GAAG;AAAA;AAAA;AAAA,MACnC;AAAA,MAEA,oBAAC,UAAO,MAAK,MAAK,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG,GAAG,kBAE3E;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/RadioGroupDemo.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Label, RadioGroup, XStack, YStack } from "tamagui";
 function RadioGroupDemo() {
-  return /* @__PURE__ */ jsx(RadioGroup, { defaultValue: "3", name: "form", children: /* @__PURE__ */ jsxs(YStack, { w: 300, ai: "center", space: "$2", children: [
+  return /* @__PURE__ */ jsx(RadioGroup, { defaultValue: "3", name: "form", children: /* @__PURE__ */ jsxs(YStack, { width: 300, alignItems: "center", space: "$2", children: [
     /* @__PURE__ */ jsx(RadioGroupItemWithLabel, { size: "$3", value: "2", label: "Second value" }),
     /* @__PURE__ */ jsx(RadioGroupItemWithLabel, { size: "$4", value: "3", label: "Third value" }),
     /* @__PURE__ */ jsx(RadioGroupItemWithLabel, { size: "$5", value: "4", label: "Fourth value" })
@@ -9,7 +9,7 @@ function RadioGroupDemo() {
 }
 function RadioGroupItemWithLabel(props) {
   const id = `radiogroup-${props.value}`;
-  return /* @__PURE__ */ jsxs(XStack, { w: 300, ai: "center", space: "$4", children: [
+  return /* @__PURE__ */ jsxs(XStack, { width: 300, alignItems: "center", space: "$4", children: [
     /* @__PURE__ */ jsx(RadioGroup.Item, { value: props.value, id, size: props.size, children: /* @__PURE__ */ jsx(RadioGroup.Indicator, {}) }),
     /* @__PURE__ */ jsx(Label, { size: props.size, htmlFor: id, children: props.label })
   ] });

package/dist/esm/RadioGroupDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/RadioGroupDemo.tsx"],
-  "sourcesContent": ["import { Label, RadioGroup, SizeTokens, ThemeableStack, XStack, YStack } from 'tamagui'\n\nexport function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue=\"3\" name=\"form\">\n      <YStack w={300} ai=\"center\" space=\"$2\">\n        <RadioGroupItemWithLabel size=\"$3\" value=\"2\" label=\"Second value\" />\n        <RadioGroupItemWithLabel size=\"$4\" value=\"3\" label=\"Third value\" />\n        <RadioGroupItemWithLabel size=\"$5\" value=\"4\" label=\"Fourth value\" />\n      </YStack>\n    </RadioGroup>\n  )\n}\n\nfunction RadioGroupItemWithLabel(props: {\n  size: SizeTokens\n  value: string\n  label: string\n}) {\n  const id = `radiogroup-${props.value}`\n  return (\n    <XStack w={300} ai=\"center\" space=\"$4\">\n      <RadioGroup.Item value={props.value} id={id} size={props.size}>\n        <RadioGroup.Indicator />\n      </RadioGroup.Item>\n\n      <Label size={props.size} htmlFor={id}>\n        {props.label}\n      </Label>\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAKM,SACE,KADF;AALN,SAAS,OAAO,YAAwC,QAAQ,cAAc;AAEvE,SAAS,iBAAiB;AAC/B,SACE,oBAAC,cAAW,cAAa,KAAI,MAAK,QAChC,+BAAC,UAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,wBAAC,2BAAwB,MAAK,MAAK,OAAM,KAAI,OAAM,gBAAe;AAAA,IAClE,oBAAC,2BAAwB,MAAK,MAAK,OAAM,KAAI,OAAM,eAAc;AAAA,IACjE,oBAAC,2BAAwB,MAAK,MAAK,OAAM,KAAI,OAAM,gBAAe;AAAA,KACpE,GACF;AAEJ;AAEA,SAAS,wBAAwB,OAI9B;AACD,QAAM,KAAK,cAAc,MAAM;AAC/B,SACE,qBAAC,UAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,wBAAC,WAAW,MAAX,EAAgB,OAAO,MAAM,OAAO,IAAQ,MAAM,MAAM,MACvD,8BAAC,WAAW,WAAX,EAAqB,GACxB;AAAA,IAEA,oBAAC,SAAM,MAAM,MAAM,MAAM,SAAS,IAC/B,gBAAM,OACT;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { Label, RadioGroup, SizeTokens, ThemeableStack, XStack, YStack } from 'tamagui'\n\nexport function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue=\"3\" name=\"form\">\n      <YStack width={300} alignItems=\"center\" space=\"$2\">\n        <RadioGroupItemWithLabel size=\"$3\" value=\"2\" label=\"Second value\" />\n        <RadioGroupItemWithLabel size=\"$4\" value=\"3\" label=\"Third value\" />\n        <RadioGroupItemWithLabel size=\"$5\" value=\"4\" label=\"Fourth value\" />\n      </YStack>\n    </RadioGroup>\n  )\n}\n\nfunction RadioGroupItemWithLabel(props: {\n  size: SizeTokens\n  value: string\n  label: string\n}) {\n  const id = `radiogroup-${props.value}`\n  return (\n    <XStack width={300} alignItems=\"center\" space=\"$4\">\n      <RadioGroup.Item value={props.value} id={id} size={props.size}>\n        <RadioGroup.Indicator />\n      </RadioGroup.Item>\n\n      <Label size={props.size} htmlFor={id}>\n        {props.label}\n      </Label>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAKM,SACE,KADF;AALN,SAAS,OAAO,YAAwC,QAAQ,cAAc;AAEvE,SAAS,iBAAiB;AAC/B,SACE,oBAAC,cAAW,cAAa,KAAI,MAAK,QAChC,+BAAC,UAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA,wBAAC,2BAAwB,MAAK,MAAK,OAAM,KAAI,OAAM,gBAAe;AAAA,IAClE,oBAAC,2BAAwB,MAAK,MAAK,OAAM,KAAI,OAAM,eAAc;AAAA,IACjE,oBAAC,2BAAwB,MAAK,MAAK,OAAM,KAAI,OAAM,gBAAe;AAAA,KACpE,GACF;AAEJ;AAEA,SAAS,wBAAwB,OAI9B;AACD,QAAM,KAAK,cAAc,MAAM;AAC/B,SACE,qBAAC,UAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA,wBAAC,WAAW,MAAX,EAAgB,OAAO,MAAM,OAAO,IAAQ,MAAM,MAAM,MACvD,8BAAC,WAAW,WAAX,EAAqB,GACxB;AAAA,IAEA,oBAAC,SAAM,MAAM,MAAM,MAAM,SAAS,IAC/B,gBAAM,OACT;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/RadioGroupDemo.mjs

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Label, RadioGroup, XStack, YStack } from "tamagui";
 function RadioGroupDemo() {
-  return /* @__PURE__ */ jsx(RadioGroup, { defaultValue: "3", name: "form", children: /* @__PURE__ */ jsxs(YStack, { w: 300, ai: "center", space: "$2", children: [
+  return /* @__PURE__ */ jsx(RadioGroup, { defaultValue: "3", name: "form", children: /* @__PURE__ */ jsxs(YStack, { width: 300, alignItems: "center", space: "$2", children: [
     /* @__PURE__ */ jsx(RadioGroupItemWithLabel, { size: "$3", value: "2", label: "Second value" }),
     /* @__PURE__ */ jsx(RadioGroupItemWithLabel, { size: "$4", value: "3", label: "Third value" }),
     /* @__PURE__ */ jsx(RadioGroupItemWithLabel, { size: "$5", value: "4", label: "Fourth value" })
@@ -9,7 +9,7 @@ function RadioGroupDemo() {
 }
 function RadioGroupItemWithLabel(props) {
   const id = `radiogroup-${props.value}`;
-  return /* @__PURE__ */ jsxs(XStack, { w: 300, ai: "center", space: "$4", children: [
+  return /* @__PURE__ */ jsxs(XStack, { width: 300, alignItems: "center", space: "$4", children: [
     /* @__PURE__ */ jsx(RadioGroup.Item, { value: props.value, id, size: props.size, children: /* @__PURE__ */ jsx(RadioGroup.Indicator, {}) }),
     /* @__PURE__ */ jsx(Label, { size: props.size, htmlFor: id, children: props.label })
   ] });

package/dist/esm/RadioGroupDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/RadioGroupDemo.tsx"],
-  "sourcesContent": ["import { Label, RadioGroup, SizeTokens, ThemeableStack, XStack, YStack } from 'tamagui'\n\nexport function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue=\"3\" name=\"form\">\n      <YStack w={300} ai=\"center\" space=\"$2\">\n        <RadioGroupItemWithLabel size=\"$3\" value=\"2\" label=\"Second value\" />\n        <RadioGroupItemWithLabel size=\"$4\" value=\"3\" label=\"Third value\" />\n        <RadioGroupItemWithLabel size=\"$5\" value=\"4\" label=\"Fourth value\" />\n      </YStack>\n    </RadioGroup>\n  )\n}\n\nfunction RadioGroupItemWithLabel(props: {\n  size: SizeTokens\n  value: string\n  label: string\n}) {\n  const id = `radiogroup-${props.value}`\n  return (\n    <XStack w={300} ai=\"center\" space=\"$4\">\n      <RadioGroup.Item value={props.value} id={id} size={props.size}>\n        <RadioGroup.Indicator />\n      </RadioGroup.Item>\n\n      <Label size={props.size} htmlFor={id}>\n        {props.label}\n      </Label>\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAKM,SACE,KADF;AALN,SAAS,OAAO,YAAwC,QAAQ,cAAc;AAEvE,SAAS,iBAAiB;AAC/B,SACE,oBAAC,cAAW,cAAa,KAAI,MAAK,QAChC,+BAAC,UAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,wBAAC,2BAAwB,MAAK,MAAK,OAAM,KAAI,OAAM,gBAAe;AAAA,IAClE,oBAAC,2BAAwB,MAAK,MAAK,OAAM,KAAI,OAAM,eAAc;AAAA,IACjE,oBAAC,2BAAwB,MAAK,MAAK,OAAM,KAAI,OAAM,gBAAe;AAAA,KACpE,GACF;AAEJ;AAEA,SAAS,wBAAwB,OAI9B;AACD,QAAM,KAAK,cAAc,MAAM;AAC/B,SACE,qBAAC,UAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,wBAAC,WAAW,MAAX,EAAgB,OAAO,MAAM,OAAO,IAAQ,MAAM,MAAM,MACvD,8BAAC,WAAW,WAAX,EAAqB,GACxB;AAAA,IAEA,oBAAC,SAAM,MAAM,MAAM,MAAM,SAAS,IAC/B,gBAAM,OACT;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { Label, RadioGroup, SizeTokens, ThemeableStack, XStack, YStack } from 'tamagui'\n\nexport function RadioGroupDemo() {\n  return (\n    <RadioGroup defaultValue=\"3\" name=\"form\">\n      <YStack width={300} alignItems=\"center\" space=\"$2\">\n        <RadioGroupItemWithLabel size=\"$3\" value=\"2\" label=\"Second value\" />\n        <RadioGroupItemWithLabel size=\"$4\" value=\"3\" label=\"Third value\" />\n        <RadioGroupItemWithLabel size=\"$5\" value=\"4\" label=\"Fourth value\" />\n      </YStack>\n    </RadioGroup>\n  )\n}\n\nfunction RadioGroupItemWithLabel(props: {\n  size: SizeTokens\n  value: string\n  label: string\n}) {\n  const id = `radiogroup-${props.value}`\n  return (\n    <XStack width={300} alignItems=\"center\" space=\"$4\">\n      <RadioGroup.Item value={props.value} id={id} size={props.size}>\n        <RadioGroup.Indicator />\n      </RadioGroup.Item>\n\n      <Label size={props.size} htmlFor={id}>\n        {props.label}\n      </Label>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAKM,SACE,KADF;AALN,SAAS,OAAO,YAAwC,QAAQ,cAAc;AAEvE,SAAS,iBAAiB;AAC/B,SACE,oBAAC,cAAW,cAAa,KAAI,MAAK,QAChC,+BAAC,UAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA,wBAAC,2BAAwB,MAAK,MAAK,OAAM,KAAI,OAAM,gBAAe;AAAA,IAClE,oBAAC,2BAAwB,MAAK,MAAK,OAAM,KAAI,OAAM,eAAc;AAAA,IACjE,oBAAC,2BAAwB,MAAK,MAAK,OAAM,KAAI,OAAM,gBAAe;AAAA,KACpE,GACF;AAEJ;AAEA,SAAS,wBAAwB,OAI9B;AACD,QAAM,KAAK,cAAc,MAAM;AAC/B,SACE,qBAAC,UAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA,wBAAC,WAAW,MAAX,EAAgB,OAAO,MAAM,OAAO,IAAQ,MAAM,MAAM,MACvD,8BAAC,WAAW,WAAX,EAAqB,GACxB;AAAA,IAEA,oBAAC,SAAM,MAAM,MAAM,MAAM,SAAS,IAC/B,gBAAM,OACT;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/ScrollViewDemo.js

@@ -1,15 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Circle, ScrollView, Square, XStack } from "tamagui";
 function ScrollViewDemo() {
-  return /* @__PURE__ */ jsx(ScrollView, { maxHeight: 250, w: "75%", bc: "$background", p: "$4", br: "$4", children: /* @__PURE__ */ jsxs(XStack, { flexWrap: "wrap", ai: "center", jc: "center", children: [
-    /* @__PURE__ */ jsx(Square, { m: "$4", size: 120, bc: "$red9" }),
-    /* @__PURE__ */ jsx(Circle, { m: "$4", size: 120, bc: "$orange9" }),
-    /* @__PURE__ */ jsx(Square, { m: "$4", size: 120, bc: "$yellow9" }),
-    /* @__PURE__ */ jsx(Circle, { m: "$4", size: 120, bc: "$green9" }),
-    /* @__PURE__ */ jsx(Square, { m: "$4", size: 120, bc: "$blue9" }),
-    /* @__PURE__ */ jsx(Circle, { m: "$4", size: 120, bc: "$purple9" }),
-    /* @__PURE__ */ jsx(Square, { m: "$4", size: 120, bc: "$pink9" }),
-    /* @__PURE__ */ jsx(Circle, { m: "$4", size: 120, bc: "$red9" })
+  return /* @__PURE__ */ jsx(ScrollView, { maxHeight: 250, width: "75%", backgroundColor: "$background", padding: "$4", borderRadius: "$4", children: /* @__PURE__ */ jsxs(XStack, { flexWrap: "wrap", alignItems: "center", justifyContent: "center", children: [
+    /* @__PURE__ */ jsx(Square, { margin: "$4", size: 120, backgroundColor: "$red9" }),
+    /* @__PURE__ */ jsx(Circle, { margin: "$4", size: 120, backgroundColor: "$orange9" }),
+    /* @__PURE__ */ jsx(Square, { margin: "$4", size: 120, backgroundColor: "$yellow9" }),
+    /* @__PURE__ */ jsx(Circle, { margin: "$4", size: 120, backgroundColor: "$green9" }),
+    /* @__PURE__ */ jsx(Square, { margin: "$4", size: 120, backgroundColor: "$blue9" }),
+    /* @__PURE__ */ jsx(Circle, { margin: "$4", size: 120, backgroundColor: "$purple9" }),
+    /* @__PURE__ */ jsx(Square, { margin: "$4", size: 120, backgroundColor: "$pink9" }),
+    /* @__PURE__ */ jsx(Circle, { margin: "$4", size: 120, backgroundColor: "$red9" })
   ] }) });
 }
 export {

package/dist/esm/ScrollViewDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ScrollViewDemo.tsx"],
-  "sourcesContent": ["import { Circle, ScrollView, Square, XStack } from 'tamagui'\n\nexport function ScrollViewDemo() {\n  return (\n    <ScrollView maxHeight={250} w=\"75%\" bc=\"$background\" p=\"$4\" br=\"$4\">\n      <XStack flexWrap=\"wrap\" ai=\"center\" jc=\"center\">\n        <Square m=\"$4\" size={120} bc=\"$red9\" />\n        <Circle m=\"$4\" size={120} bc=\"$orange9\" />\n        <Square m=\"$4\" size={120} bc=\"$yellow9\" />\n        <Circle m=\"$4\" size={120} bc=\"$green9\" />\n        <Square m=\"$4\" size={120} bc=\"$blue9\" />\n        <Circle m=\"$4\" size={120} bc=\"$purple9\" />\n        <Square m=\"$4\" size={120} bc=\"$pink9\" />\n        <Circle m=\"$4\" size={120} bc=\"$red9\" />\n      </XStack>\n    </ScrollView>\n  )\n}\n"],
-  "mappings": "AAKM,SACE,KADF;AALN,SAAS,QAAQ,YAAY,QAAQ,cAAc;AAE5C,SAAS,iBAAiB;AAC/B,SACE,oBAAC,cAAW,WAAW,KAAK,GAAE,OAAM,IAAG,eAAc,GAAE,MAAK,IAAG,MAC7D,+BAAC,UAAO,UAAS,QAAO,IAAG,UAAS,IAAG,UACrC;AAAA,wBAAC,UAAO,GAAE,MAAK,MAAM,KAAK,IAAG,SAAQ;AAAA,IACrC,oBAAC,UAAO,GAAE,MAAK,MAAM,KAAK,IAAG,YAAW;AAAA,IACxC,oBAAC,UAAO,GAAE,MAAK,MAAM,KAAK,IAAG,YAAW;AAAA,IACxC,oBAAC,UAAO,GAAE,MAAK,MAAM,KAAK,IAAG,WAAU;AAAA,IACvC,oBAAC,UAAO,GAAE,MAAK,MAAM,KAAK,IAAG,UAAS;AAAA,IACtC,oBAAC,UAAO,GAAE,MAAK,MAAM,KAAK,IAAG,YAAW;AAAA,IACxC,oBAAC,UAAO,GAAE,MAAK,MAAM,KAAK,IAAG,UAAS;AAAA,IACtC,oBAAC,UAAO,GAAE,MAAK,MAAM,KAAK,IAAG,SAAQ;AAAA,KACvC,GACF;AAEJ;",
+  "sourcesContent": ["import { Circle, ScrollView, Square, XStack } from 'tamagui'\n\nexport function ScrollViewDemo() {\n  return (\n    <ScrollView maxHeight={250} width=\"75%\" backgroundColor=\"$background\" padding=\"$4\" borderRadius=\"$4\">\n      <XStack flexWrap=\"wrap\" alignItems=\"center\" justifyContent=\"center\">\n        <Square margin=\"$4\" size={120} backgroundColor=\"$red9\" />\n        <Circle margin=\"$4\" size={120} backgroundColor=\"$orange9\" />\n        <Square margin=\"$4\" size={120} backgroundColor=\"$yellow9\" />\n        <Circle margin=\"$4\" size={120} backgroundColor=\"$green9\" />\n        <Square margin=\"$4\" size={120} backgroundColor=\"$blue9\" />\n        <Circle margin=\"$4\" size={120} backgroundColor=\"$purple9\" />\n        <Square margin=\"$4\" size={120} backgroundColor=\"$pink9\" />\n        <Circle margin=\"$4\" size={120} backgroundColor=\"$red9\" />\n      </XStack>\n    </ScrollView>\n  )\n}\n"],
+  "mappings": "AAKM,SACE,KADF;AALN,SAAS,QAAQ,YAAY,QAAQ,cAAc;AAE5C,SAAS,iBAAiB;AAC/B,SACE,oBAAC,cAAW,WAAW,KAAK,OAAM,OAAM,iBAAgB,eAAc,SAAQ,MAAK,cAAa,MAC9F,+BAAC,UAAO,UAAS,QAAO,YAAW,UAAS,gBAAe,UACzD;AAAA,wBAAC,UAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,SAAQ;AAAA,IACvD,oBAAC,UAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,YAAW;AAAA,IAC1D,oBAAC,UAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,YAAW;AAAA,IAC1D,oBAAC,UAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,WAAU;AAAA,IACzD,oBAAC,UAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,UAAS;AAAA,IACxD,oBAAC,UAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,YAAW;AAAA,IAC1D,oBAAC,UAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,UAAS;AAAA,IACxD,oBAAC,UAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,SAAQ;AAAA,KACzD,GACF;AAEJ;",
   "names": []
 }

package/dist/esm/ScrollViewDemo.mjs

@@ -1,15 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Circle, ScrollView, Square, XStack } from "tamagui";
 function ScrollViewDemo() {
-  return /* @__PURE__ */ jsx(ScrollView, { maxHeight: 250, w: "75%", bc: "$background", p: "$4", br: "$4", children: /* @__PURE__ */ jsxs(XStack, { flexWrap: "wrap", ai: "center", jc: "center", children: [
-    /* @__PURE__ */ jsx(Square, { m: "$4", size: 120, bc: "$red9" }),
-    /* @__PURE__ */ jsx(Circle, { m: "$4", size: 120, bc: "$orange9" }),
-    /* @__PURE__ */ jsx(Square, { m: "$4", size: 120, bc: "$yellow9" }),
-    /* @__PURE__ */ jsx(Circle, { m: "$4", size: 120, bc: "$green9" }),
-    /* @__PURE__ */ jsx(Square, { m: "$4", size: 120, bc: "$blue9" }),
-    /* @__PURE__ */ jsx(Circle, { m: "$4", size: 120, bc: "$purple9" }),
-    /* @__PURE__ */ jsx(Square, { m: "$4", size: 120, bc: "$pink9" }),
-    /* @__PURE__ */ jsx(Circle, { m: "$4", size: 120, bc: "$red9" })
+  return /* @__PURE__ */ jsx(ScrollView, { maxHeight: 250, width: "75%", backgroundColor: "$background", padding: "$4", borderRadius: "$4", children: /* @__PURE__ */ jsxs(XStack, { flexWrap: "wrap", alignItems: "center", justifyContent: "center", children: [
+    /* @__PURE__ */ jsx(Square, { margin: "$4", size: 120, backgroundColor: "$red9" }),
+    /* @__PURE__ */ jsx(Circle, { margin: "$4", size: 120, backgroundColor: "$orange9" }),
+    /* @__PURE__ */ jsx(Square, { margin: "$4", size: 120, backgroundColor: "$yellow9" }),
+    /* @__PURE__ */ jsx(Circle, { margin: "$4", size: 120, backgroundColor: "$green9" }),
+    /* @__PURE__ */ jsx(Square, { margin: "$4", size: 120, backgroundColor: "$blue9" }),
+    /* @__PURE__ */ jsx(Circle, { margin: "$4", size: 120, backgroundColor: "$purple9" }),
+    /* @__PURE__ */ jsx(Square, { margin: "$4", size: 120, backgroundColor: "$pink9" }),
+    /* @__PURE__ */ jsx(Circle, { margin: "$4", size: 120, backgroundColor: "$red9" })
   ] }) });
 }
 export {

package/dist/esm/ScrollViewDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ScrollViewDemo.tsx"],
-  "sourcesContent": ["import { Circle, ScrollView, Square, XStack } from 'tamagui'\n\nexport function ScrollViewDemo() {\n  return (\n    <ScrollView maxHeight={250} w=\"75%\" bc=\"$background\" p=\"$4\" br=\"$4\">\n      <XStack flexWrap=\"wrap\" ai=\"center\" jc=\"center\">\n        <Square m=\"$4\" size={120} bc=\"$red9\" />\n        <Circle m=\"$4\" size={120} bc=\"$orange9\" />\n        <Square m=\"$4\" size={120} bc=\"$yellow9\" />\n        <Circle m=\"$4\" size={120} bc=\"$green9\" />\n        <Square m=\"$4\" size={120} bc=\"$blue9\" />\n        <Circle m=\"$4\" size={120} bc=\"$purple9\" />\n        <Square m=\"$4\" size={120} bc=\"$pink9\" />\n        <Circle m=\"$4\" size={120} bc=\"$red9\" />\n      </XStack>\n    </ScrollView>\n  )\n}\n"],
-  "mappings": "AAKM,SACE,KADF;AALN,SAAS,QAAQ,YAAY,QAAQ,cAAc;AAE5C,SAAS,iBAAiB;AAC/B,SACE,oBAAC,cAAW,WAAW,KAAK,GAAE,OAAM,IAAG,eAAc,GAAE,MAAK,IAAG,MAC7D,+BAAC,UAAO,UAAS,QAAO,IAAG,UAAS,IAAG,UACrC;AAAA,wBAAC,UAAO,GAAE,MAAK,MAAM,KAAK,IAAG,SAAQ;AAAA,IACrC,oBAAC,UAAO,GAAE,MAAK,MAAM,KAAK,IAAG,YAAW;AAAA,IACxC,oBAAC,UAAO,GAAE,MAAK,MAAM,KAAK,IAAG,YAAW;AAAA,IACxC,oBAAC,UAAO,GAAE,MAAK,MAAM,KAAK,IAAG,WAAU;AAAA,IACvC,oBAAC,UAAO,GAAE,MAAK,MAAM,KAAK,IAAG,UAAS;AAAA,IACtC,oBAAC,UAAO,GAAE,MAAK,MAAM,KAAK,IAAG,YAAW;AAAA,IACxC,oBAAC,UAAO,GAAE,MAAK,MAAM,KAAK,IAAG,UAAS;AAAA,IACtC,oBAAC,UAAO,GAAE,MAAK,MAAM,KAAK,IAAG,SAAQ;AAAA,KACvC,GACF;AAEJ;",
+  "sourcesContent": ["import { Circle, ScrollView, Square, XStack } from 'tamagui'\n\nexport function ScrollViewDemo() {\n  return (\n    <ScrollView maxHeight={250} width=\"75%\" backgroundColor=\"$background\" padding=\"$4\" borderRadius=\"$4\">\n      <XStack flexWrap=\"wrap\" alignItems=\"center\" justifyContent=\"center\">\n        <Square margin=\"$4\" size={120} backgroundColor=\"$red9\" />\n        <Circle margin=\"$4\" size={120} backgroundColor=\"$orange9\" />\n        <Square margin=\"$4\" size={120} backgroundColor=\"$yellow9\" />\n        <Circle margin=\"$4\" size={120} backgroundColor=\"$green9\" />\n        <Square margin=\"$4\" size={120} backgroundColor=\"$blue9\" />\n        <Circle margin=\"$4\" size={120} backgroundColor=\"$purple9\" />\n        <Square margin=\"$4\" size={120} backgroundColor=\"$pink9\" />\n        <Circle margin=\"$4\" size={120} backgroundColor=\"$red9\" />\n      </XStack>\n    </ScrollView>\n  )\n}\n"],
+  "mappings": "AAKM,SACE,KADF;AALN,SAAS,QAAQ,YAAY,QAAQ,cAAc;AAE5C,SAAS,iBAAiB;AAC/B,SACE,oBAAC,cAAW,WAAW,KAAK,OAAM,OAAM,iBAAgB,eAAc,SAAQ,MAAK,cAAa,MAC9F,+BAAC,UAAO,UAAS,QAAO,YAAW,UAAS,gBAAe,UACzD;AAAA,wBAAC,UAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,SAAQ;AAAA,IACvD,oBAAC,UAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,YAAW;AAAA,IAC1D,oBAAC,UAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,YAAW;AAAA,IAC1D,oBAAC,UAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,WAAU;AAAA,IACzD,oBAAC,UAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,UAAS;AAAA,IACxD,oBAAC,UAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,YAAW;AAAA,IAC1D,oBAAC,UAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,UAAS;AAAA,IACxD,oBAAC,UAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,SAAQ;AAAA,KACzD,GACF;AAEJ;",
   "names": []
 }

package/dist/esm/SelectDemo.js

@@ -6,14 +6,14 @@ import { LinearGradient } from "tamagui/linear-gradient";
 function SelectDemo() {
   const [val, setVal] = useState("apple");
   return /* @__PURE__ */ jsxs(Select, { id: "food", value: val, onValueChange: setVal, children: [
-    /* @__PURE__ */ jsx(Select.Trigger, { w: 180, iconAfter: ChevronDown, children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Something" }) }),
+    /* @__PURE__ */ jsx(Select.Trigger, { width: 180, iconAfter: ChevronDown, children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Something" }) }),
     /* @__PURE__ */ jsx(Adapt, { when: "sm", platform: "touch", children: /* @__PURE__ */ jsxs(Sheet, { modal: true, dismissOnSnapToBottom: true, children: [
       /* @__PURE__ */ jsx(Sheet.Frame, { children: /* @__PURE__ */ jsx(Sheet.ScrollView, { children: /* @__PURE__ */ jsx(Adapt.Contents, {}) }) }),
       /* @__PURE__ */ jsx(Sheet.Overlay, {})
     ] }) }),
     /* @__PURE__ */ jsxs(Select.Content, { zIndex: 2e5, children: [
-      /* @__PURE__ */ jsxs(Select.ScrollUpButton, { ai: "center", jc: "center", pos: "relative", w: "100%", h: "$3", children: [
-        /* @__PURE__ */ jsx(YStack, { zi: 10, children: /* @__PURE__ */ jsx(ChevronUp, { size: 20 }) }),
+      /* @__PURE__ */ jsxs(Select.ScrollUpButton, { alignItems: "center", justifyContent: "center", position: "relative", width: "100%", height: "$3", children: [
+        /* @__PURE__ */ jsx(YStack, { zIndex: 10, children: /* @__PURE__ */ jsx(ChevronUp, { size: 20 }) }),
         /* @__PURE__ */ jsx(
           LinearGradient,
           {
@@ -21,7 +21,7 @@ function SelectDemo() {
             end: [0, 1],
             fullscreen: true,
             colors: ["$background", "$backgroundTransparent"],
-            br: "$4"
+            borderRadius: "$4"
           }
         )
       ] }),
@@ -30,12 +30,12 @@ function SelectDemo() {
         items.map((item, i) => {
           return /* @__PURE__ */ jsxs(Select.Item, { index: i, value: item.name.toLowerCase(), children: [
             /* @__PURE__ */ jsx(Select.ItemText, { children: item.name }),
-            /* @__PURE__ */ jsx(Select.ItemIndicator, { ml: "auto", children: /* @__PURE__ */ jsx(Check, { size: 16 }) })
+            /* @__PURE__ */ jsx(Select.ItemIndicator, { marginLeft: "auto", children: /* @__PURE__ */ jsx(Check, { size: 16 }) })
           ] }, item.name);
         })
       ] }) }),
-      /* @__PURE__ */ jsxs(Select.ScrollDownButton, { ai: "center", jc: "center", pos: "relative", w: "100%", h: "$3", children: [
-        /* @__PURE__ */ jsx(YStack, { zi: 10, children: /* @__PURE__ */ jsx(ChevronDown, { size: 20 }) }),
+      /* @__PURE__ */ jsxs(Select.ScrollDownButton, { alignItems: "center", justifyContent: "center", position: "relative", width: "100%", height: "$3", children: [
+        /* @__PURE__ */ jsx(YStack, { zIndex: 10, children: /* @__PURE__ */ jsx(ChevronDown, { size: 20 }) }),
         /* @__PURE__ */ jsx(
           LinearGradient,
           {
@@ -43,7 +43,7 @@ function SelectDemo() {
             end: [0, 1],
             fullscreen: true,
             colors: ["$backgroundTransparent", "$background"],
-            br: "$4"
+            borderRadius: "$4"
           }
         )
       ] })

package/dist/esm/SelectDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SelectDemo.tsx"],
-  "sourcesContent": ["import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Adapt, Select, Sheet, YStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function SelectDemo() {\n  const [val, setVal] = useState('apple')\n  return (\n    <Select id=\"food\" value={val} onValueChange={setVal}>\n      <Select.Trigger w={180} iconAfter={ChevronDown}>\n        <Select.Value placeholder=\"Something\" />\n      </Select.Trigger>\n\n      <Adapt when=\"sm\" platform=\"touch\">\n        <Sheet modal dismissOnSnapToBottom>\n          <Sheet.Frame>\n            <Sheet.ScrollView>\n              <Adapt.Contents />\n            </Sheet.ScrollView>\n          </Sheet.Frame>\n          <Sheet.Overlay />\n        </Sheet>\n      </Adapt>\n\n      <Select.Content zIndex={200000}>\n        <Select.ScrollUpButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n          <YStack zi={10}>\n            <ChevronUp size={20} />\n          </YStack>\n          <LinearGradient\n            start={[0, 0]}\n            end={[0, 1]}\n            fullscreen\n            colors={['$background', '$backgroundTransparent']}\n            br=\"$4\"\n          />\n        </Select.ScrollUpButton>\n\n        <Select.Viewport minWidth={200}>\n          <Select.Group space=\"$0\">\n            <Select.Label>Fruits</Select.Label>\n            {items.map((item, i) => {\n              return (\n                <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>\n                  <Select.ItemText>{item.name}</Select.ItemText>\n                  <Select.ItemIndicator ml=\"auto\">\n                    <Check size={16} />\n                  </Select.ItemIndicator>\n                </Select.Item>\n              )\n            })}\n          </Select.Group>\n        </Select.Viewport>\n\n        <Select.ScrollDownButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n          <YStack zi={10}>\n            <ChevronDown size={20} />\n          </YStack>\n          <LinearGradient\n            start={[0, 0]}\n            end={[0, 1]}\n            fullscreen\n            colors={['$backgroundTransparent', '$background']}\n            br=\"$4\"\n          />\n        </Select.ScrollDownButton>\n      </Select.Content>\n    </Select>\n  )\n}\n\nconst items = [\n  { name: 'Apple' },\n  { name: 'Pear' },\n  { name: 'Blackberry' },\n  { name: 'Peach' },\n  { name: 'Apricot' },\n  { name: 'Melon' },\n  { name: 'Honeydew' },\n  { name: 'Starfruit' },\n  { name: 'Blueberry' },\n  { name: 'Raspberry' },\n  { name: 'Strawberry' },\n  { name: 'Mango' },\n  { name: 'Pineapple' },\n  { name: 'Lime' },\n  { name: 'Lemon' },\n  { name: 'Coconut' },\n  { name: 'Guava' },\n  { name: 'Papaya' },\n  { name: 'Orange' },\n  { name: 'Grape' },\n  { name: 'Jackfruit' },\n  { name: 'Durian' },\n]\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Adapt, Select, Sheet, YStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function SelectDemo() {\n  const [val, setVal] = useState('apple')\n  return (\n    <Select id=\"food\" value={val} onValueChange={setVal}>\n      <Select.Trigger width={180} iconAfter={ChevronDown}>\n        <Select.Value placeholder=\"Something\" />\n      </Select.Trigger>\n\n      <Adapt when=\"sm\" platform=\"touch\">\n        <Sheet modal dismissOnSnapToBottom>\n          <Sheet.Frame>\n            <Sheet.ScrollView>\n              <Adapt.Contents />\n            </Sheet.ScrollView>\n          </Sheet.Frame>\n          <Sheet.Overlay />\n        </Sheet>\n      </Adapt>\n\n      <Select.Content zIndex={200000}>\n        <Select.ScrollUpButton alignItems=\"center\" justifyContent=\"center\" position=\"relative\" width=\"100%\" height=\"$3\">\n          <YStack zIndex={10}>\n            <ChevronUp size={20} />\n          </YStack>\n          <LinearGradient\n            start={[0, 0]}\n            end={[0, 1]}\n            fullscreen\n            colors={['$background', '$backgroundTransparent']}\n            borderRadius=\"$4\"\n          />\n        </Select.ScrollUpButton>\n\n        <Select.Viewport minWidth={200}>\n          <Select.Group space=\"$0\">\n            <Select.Label>Fruits</Select.Label>\n            {items.map((item, i) => {\n              return (\n                <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>\n                  <Select.ItemText>{item.name}</Select.ItemText>\n                  <Select.ItemIndicator marginLeft=\"auto\">\n                    <Check size={16} />\n                  </Select.ItemIndicator>\n                </Select.Item>\n              )\n            })}\n          </Select.Group>\n        </Select.Viewport>\n\n        <Select.ScrollDownButton alignItems=\"center\" justifyContent=\"center\" position=\"relative\" width=\"100%\" height=\"$3\">\n          <YStack zIndex={10}>\n            <ChevronDown size={20} />\n          </YStack>\n          <LinearGradient\n            start={[0, 0]}\n            end={[0, 1]}\n            fullscreen\n            colors={['$backgroundTransparent', '$background']}\n            borderRadius=\"$4\"\n          />\n        </Select.ScrollDownButton>\n      </Select.Content>\n    </Select>\n  )\n}\n\nconst items = [\n  { name: 'Apple' },\n  { name: 'Pear' },\n  { name: 'Blackberry' },\n  { name: 'Peach' },\n  { name: 'Apricot' },\n  { name: 'Melon' },\n  { name: 'Honeydew' },\n  { name: 'Starfruit' },\n  { name: 'Blueberry' },\n  { name: 'Raspberry' },\n  { name: 'Strawberry' },\n  { name: 'Mango' },\n  { name: 'Pineapple' },\n  { name: 'Lime' },\n  { name: 'Lemon' },\n  { name: 'Coconut' },\n  { name: 'Guava' },\n  { name: 'Papaya' },\n  { name: 'Orange' },\n  { name: 'Grape' },\n  { name: 'Jackfruit' },\n  { name: 'Durian' },\n]\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/SelectDemo.mjs

@@ -6,14 +6,14 @@ import { LinearGradient } from "tamagui/linear-gradient";
 function SelectDemo() {
   const [val, setVal] = useState("apple");
   return /* @__PURE__ */ jsxs(Select, { id: "food", value: val, onValueChange: setVal, children: [
-    /* @__PURE__ */ jsx(Select.Trigger, { w: 180, iconAfter: ChevronDown, children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Something" }) }),
+    /* @__PURE__ */ jsx(Select.Trigger, { width: 180, iconAfter: ChevronDown, children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Something" }) }),
     /* @__PURE__ */ jsx(Adapt, { when: "sm", platform: "touch", children: /* @__PURE__ */ jsxs(Sheet, { modal: true, dismissOnSnapToBottom: true, children: [
       /* @__PURE__ */ jsx(Sheet.Frame, { children: /* @__PURE__ */ jsx(Sheet.ScrollView, { children: /* @__PURE__ */ jsx(Adapt.Contents, {}) }) }),
       /* @__PURE__ */ jsx(Sheet.Overlay, {})
     ] }) }),
     /* @__PURE__ */ jsxs(Select.Content, { zIndex: 2e5, children: [
-      /* @__PURE__ */ jsxs(Select.ScrollUpButton, { ai: "center", jc: "center", pos: "relative", w: "100%", h: "$3", children: [
-        /* @__PURE__ */ jsx(YStack, { zi: 10, children: /* @__PURE__ */ jsx(ChevronUp, { size: 20 }) }),
+      /* @__PURE__ */ jsxs(Select.ScrollUpButton, { alignItems: "center", justifyContent: "center", position: "relative", width: "100%", height: "$3", children: [
+        /* @__PURE__ */ jsx(YStack, { zIndex: 10, children: /* @__PURE__ */ jsx(ChevronUp, { size: 20 }) }),
         /* @__PURE__ */ jsx(
           LinearGradient,
           {
@@ -21,7 +21,7 @@ function SelectDemo() {
             end: [0, 1],
             fullscreen: true,
             colors: ["$background", "$backgroundTransparent"],
-            br: "$4"
+            borderRadius: "$4"
           }
         )
       ] }),
@@ -30,12 +30,12 @@ function SelectDemo() {
         items.map((item, i) => {
           return /* @__PURE__ */ jsxs(Select.Item, { index: i, value: item.name.toLowerCase(), children: [
             /* @__PURE__ */ jsx(Select.ItemText, { children: item.name }),
-            /* @__PURE__ */ jsx(Select.ItemIndicator, { ml: "auto", children: /* @__PURE__ */ jsx(Check, { size: 16 }) })
+            /* @__PURE__ */ jsx(Select.ItemIndicator, { marginLeft: "auto", children: /* @__PURE__ */ jsx(Check, { size: 16 }) })
           ] }, item.name);
         })
       ] }) }),
-      /* @__PURE__ */ jsxs(Select.ScrollDownButton, { ai: "center", jc: "center", pos: "relative", w: "100%", h: "$3", children: [
-        /* @__PURE__ */ jsx(YStack, { zi: 10, children: /* @__PURE__ */ jsx(ChevronDown, { size: 20 }) }),
+      /* @__PURE__ */ jsxs(Select.ScrollDownButton, { alignItems: "center", justifyContent: "center", position: "relative", width: "100%", height: "$3", children: [
+        /* @__PURE__ */ jsx(YStack, { zIndex: 10, children: /* @__PURE__ */ jsx(ChevronDown, { size: 20 }) }),
         /* @__PURE__ */ jsx(
           LinearGradient,
           {
@@ -43,7 +43,7 @@ function SelectDemo() {
             end: [0, 1],
             fullscreen: true,
             colors: ["$backgroundTransparent", "$background"],
-            br: "$4"
+            borderRadius: "$4"
           }
         )
       ] })