@tamagui/demos 1.11.2 → 1.12.0

package/dist/esm/FormsDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/FormsDemo.tsx"],
-  "sourcesContent": ["import { stat } from 'fs'\n\nimport { useEffect, useState } from 'react'\nimport { Button, Form, H4, SizeTokens, Spinner, XStack, YStack } from 'tamagui'\n\nexport function FormsDemo(props: { size: SizeTokens }) {\n  const [status, setStatus] = useState<'off' | 'submitting' | 'submitted'>('off')\n\n  useEffect(() => {\n    if (status === 'submitting') {\n      const timer = setTimeout(() => setStatus('off'), 2000)\n      return () => {\n        clearTimeout(timer)\n      }\n    }\n  }, [status])\n\n  return (\n    <Form\n      ai=\"center\"\n      miw={300}\n      space\n      onSubmit={() => setStatus('submitting')}\n      bw={1}\n      br=\"$4\"\n      bc=\"$background\"\n      boc=\"$borderColor\"\n      p=\"$8\"\n    >\n      <H4>{status[0].toUpperCase() + status.slice(1)}</H4>\n\n      <Form.Trigger asChild disabled={status !== 'off'}>\n        <Button icon={status === 'submitting' ? () => <Spinner /> : undefined}>\n          Submit\n        </Button>\n      </Form.Trigger>\n    </Form>\n  )\n}\n"],
-  "mappings": "AAkBI,SAWE,KAXF;AAhBJ,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,MAAM,IAAgB,eAA+B;AAE/D,SAAS,UAAU,OAA6B;AACrD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA6C,KAAK;AAE9E,YAAU,MAAM;AACd,QAAI,WAAW,cAAc;AAC3B,YAAM,QAAQ,WAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AACrD,aAAO,MAAM;AACX,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,KAAK;AAAA,MACL,OAAK;AAAA,MACL,UAAU,MAAM,UAAU,YAAY;AAAA,MACtC,IAAI;AAAA,MACJ,IAAG;AAAA,MACH,IAAG;AAAA,MACH,KAAI;AAAA,MACJ,GAAE;AAAA,MAEF;AAAA,4BAAC,MAAI,iBAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC,GAAE;AAAA,QAE/C,oBAAC,KAAK,SAAL,EAAa,SAAO,MAAC,UAAU,WAAW,OACzC,8BAAC,UAAO,MAAM,WAAW,eAAe,MAAM,oBAAC,WAAQ,IAAK,QAAW,oBAEvE,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { stat } from 'fs'\n\nimport { useEffect, useState } from 'react'\nimport { Button, Form, H4, SizeTokens, Spinner, XStack, YStack } from 'tamagui'\n\nexport function FormsDemo(props: { size: SizeTokens }) {\n  const [status, setStatus] = useState<'off' | 'submitting' | 'submitted'>('off')\n\n  useEffect(() => {\n    if (status === 'submitting') {\n      const timer = setTimeout(() => setStatus('off'), 2000)\n      return () => {\n        clearTimeout(timer)\n      }\n    }\n  }, [status])\n\n  return (\n    <Form\n      alignItems=\"center\"\n      minWidth={300}\n      space\n      onSubmit={() => setStatus('submitting')}\n      borderWidth={1}\n      borderRadius=\"$4\"\n      backgroundColor=\"$background\"\n      borderColor=\"$borderColor\"\n      padding=\"$8\"\n    >\n      <H4>{status[0].toUpperCase() + status.slice(1)}</H4>\n\n      <Form.Trigger asChild disabled={status !== 'off'}>\n        <Button icon={status === 'submitting' ? () => <Spinner /> : undefined}>\n          Submit\n        </Button>\n      </Form.Trigger>\n    </Form>\n  )\n}\n"],
+  "mappings": "AAkBI,SAWE,KAXF;AAhBJ,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,MAAM,IAAgB,eAA+B;AAE/D,SAAS,UAAU,OAA6B;AACrD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA6C,KAAK;AAE9E,YAAU,MAAM;AACd,QAAI,WAAW,cAAc;AAC3B,YAAM,QAAQ,WAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AACrD,aAAO,MAAM;AACX,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,UAAU;AAAA,MACV,OAAK;AAAA,MACL,UAAU,MAAM,UAAU,YAAY;AAAA,MACtC,aAAa;AAAA,MACb,cAAa;AAAA,MACb,iBAAgB;AAAA,MAChB,aAAY;AAAA,MACZ,SAAQ;AAAA,MAER;AAAA,4BAAC,MAAI,iBAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC,GAAE;AAAA,QAE/C,oBAAC,KAAK,SAAL,EAAa,SAAO,MAAC,UAAU,WAAW,OACzC,8BAAC,UAAO,MAAM,WAAW,eAAe,MAAM,oBAAC,WAAQ,IAAK,QAAW,oBAEvE,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/FormsDemo.mjs

@@ -14,15 +14,15 @@ function FormsDemo(props) {
   return /* @__PURE__ */ jsxs(
     Form,
     {
-      ai: "center",
-      miw: 300,
+      alignItems: "center",
+      minWidth: 300,
       space: true,
       onSubmit: () => setStatus("submitting"),
-      bw: 1,
-      br: "$4",
-      bc: "$background",
-      boc: "$borderColor",
-      p: "$8",
+      borderWidth: 1,
+      borderRadius: "$4",
+      backgroundColor: "$background",
+      borderColor: "$borderColor",
+      padding: "$8",
       children: [
         /* @__PURE__ */ jsx(H4, { children: status[0].toUpperCase() + status.slice(1) }),
         /* @__PURE__ */ jsx(Form.Trigger, { asChild: true, disabled: status !== "off", children: /* @__PURE__ */ jsx(Button, { icon: status === "submitting" ? () => /* @__PURE__ */ jsx(Spinner, {}) : void 0, children: "Submit" }) })

package/dist/esm/FormsDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/FormsDemo.tsx"],
-  "sourcesContent": ["import { stat } from 'fs'\n\nimport { useEffect, useState } from 'react'\nimport { Button, Form, H4, SizeTokens, Spinner, XStack, YStack } from 'tamagui'\n\nexport function FormsDemo(props: { size: SizeTokens }) {\n  const [status, setStatus] = useState<'off' | 'submitting' | 'submitted'>('off')\n\n  useEffect(() => {\n    if (status === 'submitting') {\n      const timer = setTimeout(() => setStatus('off'), 2000)\n      return () => {\n        clearTimeout(timer)\n      }\n    }\n  }, [status])\n\n  return (\n    <Form\n      ai=\"center\"\n      miw={300}\n      space\n      onSubmit={() => setStatus('submitting')}\n      bw={1}\n      br=\"$4\"\n      bc=\"$background\"\n      boc=\"$borderColor\"\n      p=\"$8\"\n    >\n      <H4>{status[0].toUpperCase() + status.slice(1)}</H4>\n\n      <Form.Trigger asChild disabled={status !== 'off'}>\n        <Button icon={status === 'submitting' ? () => <Spinner /> : undefined}>\n          Submit\n        </Button>\n      </Form.Trigger>\n    </Form>\n  )\n}\n"],
-  "mappings": "AAkBI,SAWE,KAXF;AAhBJ,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,MAAM,IAAgB,eAA+B;AAE/D,SAAS,UAAU,OAA6B;AACrD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA6C,KAAK;AAE9E,YAAU,MAAM;AACd,QAAI,WAAW,cAAc;AAC3B,YAAM,QAAQ,WAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AACrD,aAAO,MAAM;AACX,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,KAAK;AAAA,MACL,OAAK;AAAA,MACL,UAAU,MAAM,UAAU,YAAY;AAAA,MACtC,IAAI;AAAA,MACJ,IAAG;AAAA,MACH,IAAG;AAAA,MACH,KAAI;AAAA,MACJ,GAAE;AAAA,MAEF;AAAA,4BAAC,MAAI,iBAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC,GAAE;AAAA,QAE/C,oBAAC,KAAK,SAAL,EAAa,SAAO,MAAC,UAAU,WAAW,OACzC,8BAAC,UAAO,MAAM,WAAW,eAAe,MAAM,oBAAC,WAAQ,IAAK,QAAW,oBAEvE,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { stat } from 'fs'\n\nimport { useEffect, useState } from 'react'\nimport { Button, Form, H4, SizeTokens, Spinner, XStack, YStack } from 'tamagui'\n\nexport function FormsDemo(props: { size: SizeTokens }) {\n  const [status, setStatus] = useState<'off' | 'submitting' | 'submitted'>('off')\n\n  useEffect(() => {\n    if (status === 'submitting') {\n      const timer = setTimeout(() => setStatus('off'), 2000)\n      return () => {\n        clearTimeout(timer)\n      }\n    }\n  }, [status])\n\n  return (\n    <Form\n      alignItems=\"center\"\n      minWidth={300}\n      space\n      onSubmit={() => setStatus('submitting')}\n      borderWidth={1}\n      borderRadius=\"$4\"\n      backgroundColor=\"$background\"\n      borderColor=\"$borderColor\"\n      padding=\"$8\"\n    >\n      <H4>{status[0].toUpperCase() + status.slice(1)}</H4>\n\n      <Form.Trigger asChild disabled={status !== 'off'}>\n        <Button icon={status === 'submitting' ? () => <Spinner /> : undefined}>\n          Submit\n        </Button>\n      </Form.Trigger>\n    </Form>\n  )\n}\n"],
+  "mappings": "AAkBI,SAWE,KAXF;AAhBJ,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,MAAM,IAAgB,eAA+B;AAE/D,SAAS,UAAU,OAA6B;AACrD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA6C,KAAK;AAE9E,YAAU,MAAM;AACd,QAAI,WAAW,cAAc;AAC3B,YAAM,QAAQ,WAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AACrD,aAAO,MAAM;AACX,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,UAAU;AAAA,MACV,OAAK;AAAA,MACL,UAAU,MAAM,UAAU,YAAY;AAAA,MACtC,aAAa;AAAA,MACb,cAAa;AAAA,MACb,iBAAgB;AAAA,MAChB,aAAY;AAAA,MACZ,SAAQ;AAAA,MAER;AAAA,4BAAC,MAAI,iBAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC,GAAE;AAAA,QAE/C,oBAAC,KAAK,SAAL,EAAa,SAAO,MAAC,UAAU,WAAW,OACzC,8BAAC,UAAO,MAAM,WAAW,eAAe,MAAM,oBAAC,WAAQ,IAAK,QAAW,oBAEvE,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/GroupDemo.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Activity, Airplay } from "@tamagui/lucide-icons";
 import { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from "tamagui";
 function GroupDemo() {
-  return /* @__PURE__ */ jsxs(YStack, { p: "$3", space: "$2", ai: "center", children: [
+  return /* @__PURE__ */ jsxs(YStack, { padding: "$3", space: "$2", alignItems: "center", children: [
     /* @__PURE__ */ jsxs(Group, { axis: "horizontal", children: [
       /* @__PURE__ */ jsx(Group.Item, { children: /* @__PURE__ */ jsx(Button, { children: "First" }) }),
       /* @__PURE__ */ jsx(Group.Item, { children: /* @__PURE__ */ jsx(Button, { children: "Second" }) }),

package/dist/esm/GroupDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/GroupDemo.tsx"],
-  "sourcesContent": ["import { Activity, Airplay } from '@tamagui/lucide-icons'\nimport { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from 'tamagui'\n\nexport function GroupDemo() {\n  return (\n    <YStack p=\"$3\" space=\"$2\" ai=\"center\">\n      <Group axis=\"horizontal\">\n        <Group.Item>\n          <Button>First</Button>\n        </Group.Item>\n        <Group.Item>\n          <Button>Second</Button>\n        </Group.Item>\n        <Group.Item>\n          <Button>Third</Button>\n        </Group.Item>\n      </Group>\n\n      {/* responsive + size */}\n      <XGroup size=\"$3\" $gtSm={{ size: '$5' }}>\n        <XGroup.Item>\n          <Button size=\"$3\" icon={Activity}>\n            First\n          </Button>\n        </XGroup.Item>\n        <XGroup.Item>\n          <Button size=\"$3\" icon={Airplay}>\n            Second\n          </Button>\n        </XGroup.Item>\n      </XGroup>\n\n      {/* Separator */}\n      <YGroup separator={<Separator />}>\n        <YGroup.Item>\n          <ListItem title=\"First\" />\n        </YGroup.Item>\n        <YGroup.Item>\n          <ListItem title=\"Second\" subTitle=\"Second subtitle\" />\n        </YGroup.Item>\n        <YGroup.Item>\n          <ListItem>Third</ListItem>\n        </YGroup.Item>\n      </YGroup>\n    </YStack>\n  )\n}\n"],
-  "mappings": "AAMM,SAEI,KAFJ;AANN,SAAS,UAAU,eAAe;AAClC,SAAS,QAAQ,OAAO,UAAU,WAAW,QAAQ,QAAQ,cAAc;AAEpE,SAAS,YAAY;AAC1B,SACE,qBAAC,UAAO,GAAE,MAAK,OAAM,MAAK,IAAG,UAC3B;AAAA,yBAAC,SAAM,MAAK,cACV;AAAA,0BAAC,MAAM,MAAN,EACC,8BAAC,UAAO,mBAAK,GACf;AAAA,MACA,oBAAC,MAAM,MAAN,EACC,8BAAC,UAAO,oBAAM,GAChB;AAAA,MACA,oBAAC,MAAM,MAAN,EACC,8BAAC,UAAO,mBAAK,GACf;AAAA,OACF;AAAA,IAGA,qBAAC,UAAO,MAAK,MAAK,OAAO,EAAE,MAAM,KAAK,GACpC;AAAA,0BAAC,OAAO,MAAP,EACC,8BAAC,UAAO,MAAK,MAAK,MAAM,UAAU,mBAElC,GACF;AAAA,MACA,oBAAC,OAAO,MAAP,EACC,8BAAC,UAAO,MAAK,MAAK,MAAM,SAAS,oBAEjC,GACF;AAAA,OACF;AAAA,IAGA,qBAAC,UAAO,WAAW,oBAAC,aAAU,GAC5B;AAAA,0BAAC,OAAO,MAAP,EACC,8BAAC,YAAS,OAAM,SAAQ,GAC1B;AAAA,MACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,OAAM,UAAS,UAAS,mBAAkB,GACtD;AAAA,MACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,mBAAK,GACjB;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { Activity, Airplay } from '@tamagui/lucide-icons'\nimport { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from 'tamagui'\n\nexport function GroupDemo() {\n  return (\n    <YStack padding=\"$3\" space=\"$2\" alignItems=\"center\">\n      <Group axis=\"horizontal\">\n        <Group.Item>\n          <Button>First</Button>\n        </Group.Item>\n        <Group.Item>\n          <Button>Second</Button>\n        </Group.Item>\n        <Group.Item>\n          <Button>Third</Button>\n        </Group.Item>\n      </Group>\n\n      {/* responsive + size */}\n      <XGroup size=\"$3\" $gtSm={{ size: '$5' }}>\n        <XGroup.Item>\n          <Button size=\"$3\" icon={Activity}>\n            First\n          </Button>\n        </XGroup.Item>\n        <XGroup.Item>\n          <Button size=\"$3\" icon={Airplay}>\n            Second\n          </Button>\n        </XGroup.Item>\n      </XGroup>\n\n      {/* Separator */}\n      <YGroup separator={<Separator />}>\n        <YGroup.Item>\n          <ListItem title=\"First\" />\n        </YGroup.Item>\n        <YGroup.Item>\n          <ListItem title=\"Second\" subTitle=\"Second subtitle\" />\n        </YGroup.Item>\n        <YGroup.Item>\n          <ListItem>Third</ListItem>\n        </YGroup.Item>\n      </YGroup>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAMM,SAEI,KAFJ;AANN,SAAS,UAAU,eAAe;AAClC,SAAS,QAAQ,OAAO,UAAU,WAAW,QAAQ,QAAQ,cAAc;AAEpE,SAAS,YAAY;AAC1B,SACE,qBAAC,UAAO,SAAQ,MAAK,OAAM,MAAK,YAAW,UACzC;AAAA,yBAAC,SAAM,MAAK,cACV;AAAA,0BAAC,MAAM,MAAN,EACC,8BAAC,UAAO,mBAAK,GACf;AAAA,MACA,oBAAC,MAAM,MAAN,EACC,8BAAC,UAAO,oBAAM,GAChB;AAAA,MACA,oBAAC,MAAM,MAAN,EACC,8BAAC,UAAO,mBAAK,GACf;AAAA,OACF;AAAA,IAGA,qBAAC,UAAO,MAAK,MAAK,OAAO,EAAE,MAAM,KAAK,GACpC;AAAA,0BAAC,OAAO,MAAP,EACC,8BAAC,UAAO,MAAK,MAAK,MAAM,UAAU,mBAElC,GACF;AAAA,MACA,oBAAC,OAAO,MAAP,EACC,8BAAC,UAAO,MAAK,MAAK,MAAM,SAAS,oBAEjC,GACF;AAAA,OACF;AAAA,IAGA,qBAAC,UAAO,WAAW,oBAAC,aAAU,GAC5B;AAAA,0BAAC,OAAO,MAAP,EACC,8BAAC,YAAS,OAAM,SAAQ,GAC1B;AAAA,MACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,OAAM,UAAS,UAAS,mBAAkB,GACtD;AAAA,MACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,mBAAK,GACjB;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/GroupDemo.mjs

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Activity, Airplay } from "@tamagui/lucide-icons";
 import { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from "tamagui";
 function GroupDemo() {
-  return /* @__PURE__ */ jsxs(YStack, { p: "$3", space: "$2", ai: "center", children: [
+  return /* @__PURE__ */ jsxs(YStack, { padding: "$3", space: "$2", alignItems: "center", children: [
     /* @__PURE__ */ jsxs(Group, { axis: "horizontal", children: [
       /* @__PURE__ */ jsx(Group.Item, { children: /* @__PURE__ */ jsx(Button, { children: "First" }) }),
       /* @__PURE__ */ jsx(Group.Item, { children: /* @__PURE__ */ jsx(Button, { children: "Second" }) }),

package/dist/esm/GroupDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/GroupDemo.tsx"],
-  "sourcesContent": ["import { Activity, Airplay } from '@tamagui/lucide-icons'\nimport { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from 'tamagui'\n\nexport function GroupDemo() {\n  return (\n    <YStack p=\"$3\" space=\"$2\" ai=\"center\">\n      <Group axis=\"horizontal\">\n        <Group.Item>\n          <Button>First</Button>\n        </Group.Item>\n        <Group.Item>\n          <Button>Second</Button>\n        </Group.Item>\n        <Group.Item>\n          <Button>Third</Button>\n        </Group.Item>\n      </Group>\n\n      {/* responsive + size */}\n      <XGroup size=\"$3\" $gtSm={{ size: '$5' }}>\n        <XGroup.Item>\n          <Button size=\"$3\" icon={Activity}>\n            First\n          </Button>\n        </XGroup.Item>\n        <XGroup.Item>\n          <Button size=\"$3\" icon={Airplay}>\n            Second\n          </Button>\n        </XGroup.Item>\n      </XGroup>\n\n      {/* Separator */}\n      <YGroup separator={<Separator />}>\n        <YGroup.Item>\n          <ListItem title=\"First\" />\n        </YGroup.Item>\n        <YGroup.Item>\n          <ListItem title=\"Second\" subTitle=\"Second subtitle\" />\n        </YGroup.Item>\n        <YGroup.Item>\n          <ListItem>Third</ListItem>\n        </YGroup.Item>\n      </YGroup>\n    </YStack>\n  )\n}\n"],
-  "mappings": "AAMM,SAEI,KAFJ;AANN,SAAS,UAAU,eAAe;AAClC,SAAS,QAAQ,OAAO,UAAU,WAAW,QAAQ,QAAQ,cAAc;AAEpE,SAAS,YAAY;AAC1B,SACE,qBAAC,UAAO,GAAE,MAAK,OAAM,MAAK,IAAG,UAC3B;AAAA,yBAAC,SAAM,MAAK,cACV;AAAA,0BAAC,MAAM,MAAN,EACC,8BAAC,UAAO,mBAAK,GACf;AAAA,MACA,oBAAC,MAAM,MAAN,EACC,8BAAC,UAAO,oBAAM,GAChB;AAAA,MACA,oBAAC,MAAM,MAAN,EACC,8BAAC,UAAO,mBAAK,GACf;AAAA,OACF;AAAA,IAGA,qBAAC,UAAO,MAAK,MAAK,OAAO,EAAE,MAAM,KAAK,GACpC;AAAA,0BAAC,OAAO,MAAP,EACC,8BAAC,UAAO,MAAK,MAAK,MAAM,UAAU,mBAElC,GACF;AAAA,MACA,oBAAC,OAAO,MAAP,EACC,8BAAC,UAAO,MAAK,MAAK,MAAM,SAAS,oBAEjC,GACF;AAAA,OACF;AAAA,IAGA,qBAAC,UAAO,WAAW,oBAAC,aAAU,GAC5B;AAAA,0BAAC,OAAO,MAAP,EACC,8BAAC,YAAS,OAAM,SAAQ,GAC1B;AAAA,MACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,OAAM,UAAS,UAAS,mBAAkB,GACtD;AAAA,MACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,mBAAK,GACjB;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { Activity, Airplay } from '@tamagui/lucide-icons'\nimport { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from 'tamagui'\n\nexport function GroupDemo() {\n  return (\n    <YStack padding=\"$3\" space=\"$2\" alignItems=\"center\">\n      <Group axis=\"horizontal\">\n        <Group.Item>\n          <Button>First</Button>\n        </Group.Item>\n        <Group.Item>\n          <Button>Second</Button>\n        </Group.Item>\n        <Group.Item>\n          <Button>Third</Button>\n        </Group.Item>\n      </Group>\n\n      {/* responsive + size */}\n      <XGroup size=\"$3\" $gtSm={{ size: '$5' }}>\n        <XGroup.Item>\n          <Button size=\"$3\" icon={Activity}>\n            First\n          </Button>\n        </XGroup.Item>\n        <XGroup.Item>\n          <Button size=\"$3\" icon={Airplay}>\n            Second\n          </Button>\n        </XGroup.Item>\n      </XGroup>\n\n      {/* Separator */}\n      <YGroup separator={<Separator />}>\n        <YGroup.Item>\n          <ListItem title=\"First\" />\n        </YGroup.Item>\n        <YGroup.Item>\n          <ListItem title=\"Second\" subTitle=\"Second subtitle\" />\n        </YGroup.Item>\n        <YGroup.Item>\n          <ListItem>Third</ListItem>\n        </YGroup.Item>\n      </YGroup>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAMM,SAEI,KAFJ;AANN,SAAS,UAAU,eAAe;AAClC,SAAS,QAAQ,OAAO,UAAU,WAAW,QAAQ,QAAQ,cAAc;AAEpE,SAAS,YAAY;AAC1B,SACE,qBAAC,UAAO,SAAQ,MAAK,OAAM,MAAK,YAAW,UACzC;AAAA,yBAAC,SAAM,MAAK,cACV;AAAA,0BAAC,MAAM,MAAN,EACC,8BAAC,UAAO,mBAAK,GACf;AAAA,MACA,oBAAC,MAAM,MAAN,EACC,8BAAC,UAAO,oBAAM,GAChB;AAAA,MACA,oBAAC,MAAM,MAAN,EACC,8BAAC,UAAO,mBAAK,GACf;AAAA,OACF;AAAA,IAGA,qBAAC,UAAO,MAAK,MAAK,OAAO,EAAE,MAAM,KAAK,GACpC;AAAA,0BAAC,OAAO,MAAP,EACC,8BAAC,UAAO,MAAK,MAAK,MAAM,UAAU,mBAElC,GACF;AAAA,MACA,oBAAC,OAAO,MAAP,EACC,8BAAC,UAAO,MAAK,MAAK,MAAM,SAAS,oBAEjC,GACF;AAAA,OACF;AAAA,IAGA,qBAAC,UAAO,WAAW,oBAAC,aAAU,GAC5B;AAAA,0BAAC,OAAO,MAAP,EACC,8BAAC,YAAS,OAAM,SAAQ,GAC1B;AAAA,MACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,OAAM,UAAS,UAAS,mBAAkB,GACtD;AAAA,MACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,mBAAK,GACjB;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/HeadingsDemo.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { H1, H2, H3, H4, H5, H6, YStack } from "tamagui";
 function HeadingsDemo() {
-  return /* @__PURE__ */ jsxs(YStack, { als: "center", children: [
+  return /* @__PURE__ */ jsxs(YStack, { alignSelf: "center", children: [
     /* @__PURE__ */ jsx(H1, { children: "Heading 1" }),
     /* @__PURE__ */ jsx(H2, { children: "Heading 2" }),
     /* @__PURE__ */ jsx(H3, { children: "Heading 3" }),

package/dist/esm/HeadingsDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/HeadingsDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { H1, H2, H3, H4, H5, H6, YStack } from 'tamagui'\n\nexport function HeadingsDemo() {\n  return (\n    <YStack als=\"center\">\n      <H1>Heading 1</H1>\n      <H2>Heading 2</H2>\n      <H3>Heading 3</H3>\n      <H4>Heading 4</H4>\n      <H5>Heading 5</H5>\n      <H6>Heading 6</H6>\n    </YStack>\n  )\n}\n"],
-  "mappings": "AAKI,SACE,KADF;AAJJ,SAAS,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,cAAc;AAExC,SAAS,eAAe;AAC7B,SACE,qBAAC,UAAO,KAAI,UACV;AAAA,wBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,KACf;AAEJ;",
+  "sourcesContent": ["import React from 'react'\nimport { H1, H2, H3, H4, H5, H6, YStack } from 'tamagui'\n\nexport function HeadingsDemo() {\n  return (\n    <YStack alignSelf=\"center\">\n      <H1>Heading 1</H1>\n      <H2>Heading 2</H2>\n      <H3>Heading 3</H3>\n      <H4>Heading 4</H4>\n      <H5>Heading 5</H5>\n      <H6>Heading 6</H6>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAKI,SACE,KADF;AAJJ,SAAS,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,cAAc;AAExC,SAAS,eAAe;AAC7B,SACE,qBAAC,UAAO,WAAU,UAChB;AAAA,wBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,KACf;AAEJ;",
   "names": []
 }

package/dist/esm/HeadingsDemo.mjs

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { H1, H2, H3, H4, H5, H6, YStack } from "tamagui";
 function HeadingsDemo() {
-  return /* @__PURE__ */ jsxs(YStack, { als: "center", children: [
+  return /* @__PURE__ */ jsxs(YStack, { alignSelf: "center", children: [
     /* @__PURE__ */ jsx(H1, { children: "Heading 1" }),
     /* @__PURE__ */ jsx(H2, { children: "Heading 2" }),
     /* @__PURE__ */ jsx(H3, { children: "Heading 3" }),

package/dist/esm/HeadingsDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/HeadingsDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { H1, H2, H3, H4, H5, H6, YStack } from 'tamagui'\n\nexport function HeadingsDemo() {\n  return (\n    <YStack als=\"center\">\n      <H1>Heading 1</H1>\n      <H2>Heading 2</H2>\n      <H3>Heading 3</H3>\n      <H4>Heading 4</H4>\n      <H5>Heading 5</H5>\n      <H6>Heading 6</H6>\n    </YStack>\n  )\n}\n"],
-  "mappings": "AAKI,SACE,KADF;AAJJ,SAAS,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,cAAc;AAExC,SAAS,eAAe;AAC7B,SACE,qBAAC,UAAO,KAAI,UACV;AAAA,wBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,KACf;AAEJ;",
+  "sourcesContent": ["import React from 'react'\nimport { H1, H2, H3, H4, H5, H6, YStack } from 'tamagui'\n\nexport function HeadingsDemo() {\n  return (\n    <YStack alignSelf=\"center\">\n      <H1>Heading 1</H1>\n      <H2>Heading 2</H2>\n      <H3>Heading 3</H3>\n      <H4>Heading 4</H4>\n      <H5>Heading 5</H5>\n      <H6>Heading 6</H6>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAKI,SACE,KADF;AAJJ,SAAS,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,cAAc;AAExC,SAAS,eAAe;AAC7B,SACE,qBAAC,UAAO,WAAU,UAChB;AAAA,wBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,IACb,oBAAC,MAAG,uBAAS;AAAA,KACf;AAEJ;",
   "names": []
 }

package/dist/esm/InputsDemo.js

@@ -1,16 +1,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, Input, TextArea, XStack, YStack } from "tamagui";
 function InputsDemo() {
-  return /* @__PURE__ */ jsxs(YStack, { w: 200, mih: 250, overflow: "hidden", space: "$2", m: "$3", p: "$2", children: [
+  return /* @__PURE__ */ jsxs(YStack, { width: 200, mih: 250, overflow: "hidden", space: "$2", margin: "$3", padding: "$2", children: [
     /* @__PURE__ */ jsx(InputDemo, { size: "$2" }),
     /* @__PURE__ */ jsx(InputDemo, { size: "$3" }),
     /* @__PURE__ */ jsx(InputDemo, { size: "$4" }),
-    /* @__PURE__ */ jsx(TextArea, { mih: 140, placeholder: "Enter your details...", numberOfLines: 4 })
+    /* @__PURE__ */ jsx(TextArea, { minHeight: 140, placeholder: "Enter your details...", numberOfLines: 4 })
   ] });
 }
 function InputDemo(props) {
-  return /* @__PURE__ */ jsxs(XStack, { ai: "center", space: "$2", children: [
-    /* @__PURE__ */ jsx(Input, { f: 1, size: props.size, placeholder: `Size ${props.size}...` }),
+  return /* @__PURE__ */ jsxs(XStack, { alignItems: "center", space: "$2", children: [
+    /* @__PURE__ */ jsx(Input, { flex: 1, size: props.size, placeholder: `Size ${props.size}...` }),
     /* @__PURE__ */ jsx(Button, { size: props.size, children: "Go" })
   ] });
 }

package/dist/esm/InputsDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/InputsDemo.tsx"],
-  "sourcesContent": ["import { Button, Input, SizeTokens, TextArea, XStack, YStack } from 'tamagui'\n\nexport function InputsDemo() {\n  return (\n    <YStack w={200} mih={250} overflow=\"hidden\" space=\"$2\" m=\"$3\" p=\"$2\">\n      <InputDemo size=\"$2\" />\n      <InputDemo size=\"$3\" />\n      <InputDemo size=\"$4\" />\n      <TextArea mih={140} placeholder=\"Enter your details...\" numberOfLines={4} />\n    </YStack>\n  )\n}\n\nfunction InputDemo(props: { size: SizeTokens }) {\n  return (\n    <XStack ai=\"center\" space=\"$2\">\n      <Input f={1} size={props.size} placeholder={`Size ${props.size}...`} />\n      <Button size={props.size}>Go</Button>\n    </XStack>\n  )\n}"],
-  "mappings": "AAII,SACE,KADF;AAJJ,SAAS,QAAQ,OAAmB,UAAU,QAAQ,cAAc;AAE7D,SAAS,aAAa;AAC3B,SACE,qBAAC,UAAO,GAAG,KAAK,KAAK,KAAK,UAAS,UAAS,OAAM,MAAK,GAAE,MAAK,GAAE,MAC9D;AAAA,wBAAC,aAAU,MAAK,MAAK;AAAA,IACrB,oBAAC,aAAU,MAAK,MAAK;AAAA,IACrB,oBAAC,aAAU,MAAK,MAAK;AAAA,IACrB,oBAAC,YAAS,KAAK,KAAK,aAAY,yBAAwB,eAAe,GAAG;AAAA,KAC5E;AAEJ;AAEA,SAAS,UAAU,OAA6B;AAC9C,SACE,qBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA,wBAAC,SAAM,GAAG,GAAG,MAAM,MAAM,MAAM,aAAa,QAAQ,MAAM,WAAW;AAAA,IACrE,oBAAC,UAAO,MAAM,MAAM,MAAM,gBAAE;AAAA,KAC9B;AAEJ;",
+  "sourcesContent": ["import { Button, Input, SizeTokens, TextArea, XStack, YStack } from 'tamagui'\n\nexport function InputsDemo() {\n  return (\n    <YStack width={200} mih={250} overflow=\"hidden\" space=\"$2\" margin=\"$3\" padding=\"$2\">\n      <InputDemo size=\"$2\" />\n      <InputDemo size=\"$3\" />\n      <InputDemo size=\"$4\" />\n      <TextArea minHeight={140} placeholder=\"Enter your details...\" numberOfLines={4} />\n    </YStack>\n  )\n}\n\nfunction InputDemo(props: { size: SizeTokens }) {\n  return (\n    <XStack alignItems=\"center\" space=\"$2\">\n      <Input flex={1} size={props.size} placeholder={`Size ${props.size}...`} />\n      <Button size={props.size}>Go</Button>\n    </XStack>\n  )\n}"],
+  "mappings": "AAII,SACE,KADF;AAJJ,SAAS,QAAQ,OAAmB,UAAU,QAAQ,cAAc;AAE7D,SAAS,aAAa;AAC3B,SACE,qBAAC,UAAO,OAAO,KAAK,KAAK,KAAK,UAAS,UAAS,OAAM,MAAK,QAAO,MAAK,SAAQ,MAC7E;AAAA,wBAAC,aAAU,MAAK,MAAK;AAAA,IACrB,oBAAC,aAAU,MAAK,MAAK;AAAA,IACrB,oBAAC,aAAU,MAAK,MAAK;AAAA,IACrB,oBAAC,YAAS,WAAW,KAAK,aAAY,yBAAwB,eAAe,GAAG;AAAA,KAClF;AAEJ;AAEA,SAAS,UAAU,OAA6B;AAC9C,SACE,qBAAC,UAAO,YAAW,UAAS,OAAM,MAChC;AAAA,wBAAC,SAAM,MAAM,GAAG,MAAM,MAAM,MAAM,aAAa,QAAQ,MAAM,WAAW;AAAA,IACxE,oBAAC,UAAO,MAAM,MAAM,MAAM,gBAAE;AAAA,KAC9B;AAEJ;",
   "names": []
 }

package/dist/esm/InputsDemo.mjs

@@ -1,16 +1,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, Input, TextArea, XStack, YStack } from "tamagui";
 function InputsDemo() {
-  return /* @__PURE__ */ jsxs(YStack, { w: 200, mih: 250, overflow: "hidden", space: "$2", m: "$3", p: "$2", children: [
+  return /* @__PURE__ */ jsxs(YStack, { width: 200, mih: 250, overflow: "hidden", space: "$2", margin: "$3", padding: "$2", children: [
     /* @__PURE__ */ jsx(InputDemo, { size: "$2" }),
     /* @__PURE__ */ jsx(InputDemo, { size: "$3" }),
     /* @__PURE__ */ jsx(InputDemo, { size: "$4" }),
-    /* @__PURE__ */ jsx(TextArea, { mih: 140, placeholder: "Enter your details...", numberOfLines: 4 })
+    /* @__PURE__ */ jsx(TextArea, { minHeight: 140, placeholder: "Enter your details...", numberOfLines: 4 })
   ] });
 }
 function InputDemo(props) {
-  return /* @__PURE__ */ jsxs(XStack, { ai: "center", space: "$2", children: [
-    /* @__PURE__ */ jsx(Input, { f: 1, size: props.size, placeholder: `Size ${props.size}...` }),
+  return /* @__PURE__ */ jsxs(XStack, { alignItems: "center", space: "$2", children: [
+    /* @__PURE__ */ jsx(Input, { flex: 1, size: props.size, placeholder: `Size ${props.size}...` }),
     /* @__PURE__ */ jsx(Button, { size: props.size, children: "Go" })
   ] });
 }

package/dist/esm/InputsDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/InputsDemo.tsx"],
-  "sourcesContent": ["import { Button, Input, SizeTokens, TextArea, XStack, YStack } from 'tamagui'\n\nexport function InputsDemo() {\n  return (\n    <YStack w={200} mih={250} overflow=\"hidden\" space=\"$2\" m=\"$3\" p=\"$2\">\n      <InputDemo size=\"$2\" />\n      <InputDemo size=\"$3\" />\n      <InputDemo size=\"$4\" />\n      <TextArea mih={140} placeholder=\"Enter your details...\" numberOfLines={4} />\n    </YStack>\n  )\n}\n\nfunction InputDemo(props: { size: SizeTokens }) {\n  return (\n    <XStack ai=\"center\" space=\"$2\">\n      <Input f={1} size={props.size} placeholder={`Size ${props.size}...`} />\n      <Button size={props.size}>Go</Button>\n    </XStack>\n  )\n}"],
-  "mappings": "AAII,SACE,KADF;AAJJ,SAAS,QAAQ,OAAmB,UAAU,QAAQ,cAAc;AAE7D,SAAS,aAAa;AAC3B,SACE,qBAAC,UAAO,GAAG,KAAK,KAAK,KAAK,UAAS,UAAS,OAAM,MAAK,GAAE,MAAK,GAAE,MAC9D;AAAA,wBAAC,aAAU,MAAK,MAAK;AAAA,IACrB,oBAAC,aAAU,MAAK,MAAK;AAAA,IACrB,oBAAC,aAAU,MAAK,MAAK;AAAA,IACrB,oBAAC,YAAS,KAAK,KAAK,aAAY,yBAAwB,eAAe,GAAG;AAAA,KAC5E;AAEJ;AAEA,SAAS,UAAU,OAA6B;AAC9C,SACE,qBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA,wBAAC,SAAM,GAAG,GAAG,MAAM,MAAM,MAAM,aAAa,QAAQ,MAAM,WAAW;AAAA,IACrE,oBAAC,UAAO,MAAM,MAAM,MAAM,gBAAE;AAAA,KAC9B;AAEJ;",
+  "sourcesContent": ["import { Button, Input, SizeTokens, TextArea, XStack, YStack } from 'tamagui'\n\nexport function InputsDemo() {\n  return (\n    <YStack width={200} mih={250} overflow=\"hidden\" space=\"$2\" margin=\"$3\" padding=\"$2\">\n      <InputDemo size=\"$2\" />\n      <InputDemo size=\"$3\" />\n      <InputDemo size=\"$4\" />\n      <TextArea minHeight={140} placeholder=\"Enter your details...\" numberOfLines={4} />\n    </YStack>\n  )\n}\n\nfunction InputDemo(props: { size: SizeTokens }) {\n  return (\n    <XStack alignItems=\"center\" space=\"$2\">\n      <Input flex={1} size={props.size} placeholder={`Size ${props.size}...`} />\n      <Button size={props.size}>Go</Button>\n    </XStack>\n  )\n}"],
+  "mappings": "AAII,SACE,KADF;AAJJ,SAAS,QAAQ,OAAmB,UAAU,QAAQ,cAAc;AAE7D,SAAS,aAAa;AAC3B,SACE,qBAAC,UAAO,OAAO,KAAK,KAAK,KAAK,UAAS,UAAS,OAAM,MAAK,QAAO,MAAK,SAAQ,MAC7E;AAAA,wBAAC,aAAU,MAAK,MAAK;AAAA,IACrB,oBAAC,aAAU,MAAK,MAAK;AAAA,IACrB,oBAAC,aAAU,MAAK,MAAK;AAAA,IACrB,oBAAC,YAAS,WAAW,KAAK,aAAY,yBAAwB,eAAe,GAAG;AAAA,KAClF;AAEJ;AAEA,SAAS,UAAU,OAA6B;AAC9C,SACE,qBAAC,UAAO,YAAW,UAAS,OAAM,MAChC;AAAA,wBAAC,SAAM,MAAM,GAAG,MAAM,MAAM,MAAM,aAAa,QAAQ,MAAM,WAAW;AAAA,IACxE,oBAAC,UAAO,MAAM,MAAM,MAAM,gBAAE;AAAA,KAC9B;AAEJ;",
   "names": []
 }

package/dist/esm/LabelDemo.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Input, Label, Switch, XStack, YStack } from "tamagui";
 function LabelDemo() {
-  return /* @__PURE__ */ jsxs(YStack, { p: "$3", miw: 300, space: "$4", children: [
-    /* @__PURE__ */ jsxs(XStack, { ai: "center", space: "$4", children: [
-      /* @__PURE__ */ jsx(Label, { w: 90, htmlFor: "name", children: "Name" }),
-      /* @__PURE__ */ jsx(Input, { f: 1, id: "name", defaultValue: "Nate Wienert" })
+  return /* @__PURE__ */ jsxs(YStack, { padding: "$3", minWidth: 300, space: "$4", children: [
+    /* @__PURE__ */ jsxs(XStack, { alignItems: "center", space: "$4", children: [
+      /* @__PURE__ */ jsx(Label, { width: 90, htmlFor: "name", children: "Name" }),
+      /* @__PURE__ */ jsx(Input, { flex: 1, id: "name", defaultValue: "Nate Wienert" })
     ] }),
-    /* @__PURE__ */ jsxs(XStack, { ai: "center", space: "$4", children: [
-      /* @__PURE__ */ jsx(Label, { w: 90, htmlFor: "notify", children: "Notifications" }),
+    /* @__PURE__ */ jsxs(XStack, { alignItems: "center", space: "$4", children: [
+      /* @__PURE__ */ jsx(Label, { width: 90, htmlFor: "notify", children: "Notifications" }),
       /* @__PURE__ */ jsx(Switch, { id: "notify", children: /* @__PURE__ */ jsx(Switch.Thumb, { animation: "quick" }) })
     ] })
   ] });

package/dist/esm/LabelDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/LabelDemo.tsx"],
-  "sourcesContent": ["import { Input, Label, Switch, XStack, YStack } from 'tamagui'\n\nexport function LabelDemo() {\n  return (\n    <YStack p=\"$3\" miw={300} space=\"$4\">\n      <XStack ai=\"center\" space=\"$4\">\n        <Label w={90} htmlFor=\"name\">\n          Name\n        </Label>\n        <Input f={1} id=\"name\" defaultValue=\"Nate Wienert\" />\n      </XStack>\n\n      <XStack ai=\"center\" space=\"$4\">\n        <Label w={90} htmlFor=\"notify\">\n          Notifications\n        </Label>\n        <Switch id=\"notify\">\n          <Switch.Thumb animation=\"quick\" />\n        </Switch>\n      </XStack>\n    </YStack>\n  )\n}\n"],
-  "mappings": "AAKM,SACE,KADF;AALN,SAAS,OAAO,OAAO,QAAQ,QAAQ,cAAc;AAE9C,SAAS,YAAY;AAC1B,SACE,qBAAC,UAAO,GAAE,MAAK,KAAK,KAAK,OAAM,MAC7B;AAAA,yBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA,0BAAC,SAAM,GAAG,IAAI,SAAQ,QAAO,kBAE7B;AAAA,MACA,oBAAC,SAAM,GAAG,GAAG,IAAG,QAAO,cAAa,gBAAe;AAAA,OACrD;AAAA,IAEA,qBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA,0BAAC,SAAM,GAAG,IAAI,SAAQ,UAAS,2BAE/B;AAAA,MACA,oBAAC,UAAO,IAAG,UACT,8BAAC,OAAO,OAAP,EAAa,WAAU,SAAQ,GAClC;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { Input, Label, Switch, XStack, YStack } from 'tamagui'\n\nexport function LabelDemo() {\n  return (\n    <YStack padding=\"$3\" minWidth={300} space=\"$4\">\n      <XStack alignItems=\"center\" space=\"$4\">\n        <Label width={90} htmlFor=\"name\">\n          Name\n        </Label>\n        <Input flex={1} id=\"name\" defaultValue=\"Nate Wienert\" />\n      </XStack>\n\n      <XStack alignItems=\"center\" space=\"$4\">\n        <Label width={90} htmlFor=\"notify\">\n          Notifications\n        </Label>\n        <Switch id=\"notify\">\n          <Switch.Thumb animation=\"quick\" />\n        </Switch>\n      </XStack>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAKM,SACE,KADF;AALN,SAAS,OAAO,OAAO,QAAQ,QAAQ,cAAc;AAE9C,SAAS,YAAY;AAC1B,SACE,qBAAC,UAAO,SAAQ,MAAK,UAAU,KAAK,OAAM,MACxC;AAAA,yBAAC,UAAO,YAAW,UAAS,OAAM,MAChC;AAAA,0BAAC,SAAM,OAAO,IAAI,SAAQ,QAAO,kBAEjC;AAAA,MACA,oBAAC,SAAM,MAAM,GAAG,IAAG,QAAO,cAAa,gBAAe;AAAA,OACxD;AAAA,IAEA,qBAAC,UAAO,YAAW,UAAS,OAAM,MAChC;AAAA,0BAAC,SAAM,OAAO,IAAI,SAAQ,UAAS,2BAEnC;AAAA,MACA,oBAAC,UAAO,IAAG,UACT,8BAAC,OAAO,OAAP,EAAa,WAAU,SAAQ,GAClC;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/LabelDemo.mjs

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Input, Label, Switch, XStack, YStack } from "tamagui";
 function LabelDemo() {
-  return /* @__PURE__ */ jsxs(YStack, { p: "$3", miw: 300, space: "$4", children: [
-    /* @__PURE__ */ jsxs(XStack, { ai: "center", space: "$4", children: [
-      /* @__PURE__ */ jsx(Label, { w: 90, htmlFor: "name", children: "Name" }),
-      /* @__PURE__ */ jsx(Input, { f: 1, id: "name", defaultValue: "Nate Wienert" })
+  return /* @__PURE__ */ jsxs(YStack, { padding: "$3", minWidth: 300, space: "$4", children: [
+    /* @__PURE__ */ jsxs(XStack, { alignItems: "center", space: "$4", children: [
+      /* @__PURE__ */ jsx(Label, { width: 90, htmlFor: "name", children: "Name" }),
+      /* @__PURE__ */ jsx(Input, { flex: 1, id: "name", defaultValue: "Nate Wienert" })
     ] }),
-    /* @__PURE__ */ jsxs(XStack, { ai: "center", space: "$4", children: [
-      /* @__PURE__ */ jsx(Label, { w: 90, htmlFor: "notify", children: "Notifications" }),
+    /* @__PURE__ */ jsxs(XStack, { alignItems: "center", space: "$4", children: [
+      /* @__PURE__ */ jsx(Label, { width: 90, htmlFor: "notify", children: "Notifications" }),
       /* @__PURE__ */ jsx(Switch, { id: "notify", children: /* @__PURE__ */ jsx(Switch.Thumb, { animation: "quick" }) })
     ] })
   ] });

package/dist/esm/LabelDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/LabelDemo.tsx"],
-  "sourcesContent": ["import { Input, Label, Switch, XStack, YStack } from 'tamagui'\n\nexport function LabelDemo() {\n  return (\n    <YStack p=\"$3\" miw={300} space=\"$4\">\n      <XStack ai=\"center\" space=\"$4\">\n        <Label w={90} htmlFor=\"name\">\n          Name\n        </Label>\n        <Input f={1} id=\"name\" defaultValue=\"Nate Wienert\" />\n      </XStack>\n\n      <XStack ai=\"center\" space=\"$4\">\n        <Label w={90} htmlFor=\"notify\">\n          Notifications\n        </Label>\n        <Switch id=\"notify\">\n          <Switch.Thumb animation=\"quick\" />\n        </Switch>\n      </XStack>\n    </YStack>\n  )\n}\n"],
-  "mappings": "AAKM,SACE,KADF;AALN,SAAS,OAAO,OAAO,QAAQ,QAAQ,cAAc;AAE9C,SAAS,YAAY;AAC1B,SACE,qBAAC,UAAO,GAAE,MAAK,KAAK,KAAK,OAAM,MAC7B;AAAA,yBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA,0BAAC,SAAM,GAAG,IAAI,SAAQ,QAAO,kBAE7B;AAAA,MACA,oBAAC,SAAM,GAAG,GAAG,IAAG,QAAO,cAAa,gBAAe;AAAA,OACrD;AAAA,IAEA,qBAAC,UAAO,IAAG,UAAS,OAAM,MACxB;AAAA,0BAAC,SAAM,GAAG,IAAI,SAAQ,UAAS,2BAE/B;AAAA,MACA,oBAAC,UAAO,IAAG,UACT,8BAAC,OAAO,OAAP,EAAa,WAAU,SAAQ,GAClC;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { Input, Label, Switch, XStack, YStack } from 'tamagui'\n\nexport function LabelDemo() {\n  return (\n    <YStack padding=\"$3\" minWidth={300} space=\"$4\">\n      <XStack alignItems=\"center\" space=\"$4\">\n        <Label width={90} htmlFor=\"name\">\n          Name\n        </Label>\n        <Input flex={1} id=\"name\" defaultValue=\"Nate Wienert\" />\n      </XStack>\n\n      <XStack alignItems=\"center\" space=\"$4\">\n        <Label width={90} htmlFor=\"notify\">\n          Notifications\n        </Label>\n        <Switch id=\"notify\">\n          <Switch.Thumb animation=\"quick\" />\n        </Switch>\n      </XStack>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAKM,SACE,KADF;AALN,SAAS,OAAO,OAAO,QAAQ,QAAQ,cAAc;AAE9C,SAAS,YAAY;AAC1B,SACE,qBAAC,UAAO,SAAQ,MAAK,UAAU,KAAK,OAAM,MACxC;AAAA,yBAAC,UAAO,YAAW,UAAS,OAAM,MAChC;AAAA,0BAAC,SAAM,OAAO,IAAI,SAAQ,QAAO,kBAEjC;AAAA,MACA,oBAAC,SAAM,MAAM,GAAG,IAAG,QAAO,cAAa,gBAAe;AAAA,OACxD;AAAA,IAEA,qBAAC,UAAO,YAAW,UAAS,OAAM,MAChC;AAAA,0BAAC,SAAM,OAAO,IAAI,SAAQ,UAAS,2BAEnC;AAAA,MACA,oBAAC,UAAO,IAAG,UACT,8BAAC,OAAO,OAAP,EAAa,WAAU,SAAQ,GAClC;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/LinearGradientDemo.js

@@ -8,7 +8,7 @@ function LinearGradientDemo() {
       {
         width: "$6",
         height: "$6",
-        br: "$4",
+        borderRadius: "$4",
         colors: ["$red10", "$yellow10"],
         start: [0, 1],
         end: [0, 0]
@@ -19,7 +19,7 @@ function LinearGradientDemo() {
       {
         width: "$6",
         height: "$6",
-        br: "$4",
+        borderRadius: "$4",
         colors: ["$background", "$color"],
         start: [1, 1],
         end: [0, 0]

package/dist/esm/LinearGradientDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/LinearGradientDemo.tsx"],
-  "sourcesContent": ["import { XStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function LinearGradientDemo() {\n  return (\n    <XStack space>\n      {/* tokens */}\n      <LinearGradient\n        width=\"$6\"\n        height=\"$6\"\n        br=\"$4\"\n        colors={['$red10', '$yellow10']}\n        start={[0, 1]}\n        end={[0, 0]}\n      />\n\n      {/* theme values */}\n      <LinearGradient\n        width=\"$6\"\n        height=\"$6\"\n        br=\"$4\"\n        colors={['$background', '$color']}\n        start={[1, 1]}\n        end={[0, 0]}\n      />\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAKI,SAEE,KAFF;AALJ,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAExB,SAAS,qBAAqB;AACnC,SACE,qBAAC,UAAO,OAAK,MAEX;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,QAAO;AAAA,QACP,IAAG;AAAA,QACH,QAAQ,CAAC,UAAU,WAAW;AAAA,QAC9B,OAAO,CAAC,GAAG,CAAC;AAAA,QACZ,KAAK,CAAC,GAAG,CAAC;AAAA;AAAA,IACZ;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,QAAO;AAAA,QACP,IAAG;AAAA,QACH,QAAQ,CAAC,eAAe,QAAQ;AAAA,QAChC,OAAO,CAAC,GAAG,CAAC;AAAA,QACZ,KAAK,CAAC,GAAG,CAAC;AAAA;AAAA,IACZ;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { XStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function LinearGradientDemo() {\n  return (\n    <XStack space>\n      {/* tokens */}\n      <LinearGradient\n        width=\"$6\"\n        height=\"$6\"\n        borderRadius=\"$4\"\n        colors={['$red10', '$yellow10']}\n        start={[0, 1]}\n        end={[0, 0]}\n      />\n\n      {/* theme values */}\n      <LinearGradient\n        width=\"$6\"\n        height=\"$6\"\n        borderRadius=\"$4\"\n        colors={['$background', '$color']}\n        start={[1, 1]}\n        end={[0, 0]}\n      />\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAKI,SAEE,KAFF;AALJ,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAExB,SAAS,qBAAqB;AACnC,SACE,qBAAC,UAAO,OAAK,MAEX;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,QAAO;AAAA,QACP,cAAa;AAAA,QACb,QAAQ,CAAC,UAAU,WAAW;AAAA,QAC9B,OAAO,CAAC,GAAG,CAAC;AAAA,QACZ,KAAK,CAAC,GAAG,CAAC;AAAA;AAAA,IACZ;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,QAAO;AAAA,QACP,cAAa;AAAA,QACb,QAAQ,CAAC,eAAe,QAAQ;AAAA,QAChC,OAAO,CAAC,GAAG,CAAC;AAAA,QACZ,KAAK,CAAC,GAAG,CAAC;AAAA;AAAA,IACZ;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/LinearGradientDemo.mjs

@@ -8,7 +8,7 @@ function LinearGradientDemo() {
       {
         width: "$6",
         height: "$6",
-        br: "$4",
+        borderRadius: "$4",
         colors: ["$red10", "$yellow10"],
         start: [0, 1],
         end: [0, 0]
@@ -19,7 +19,7 @@ function LinearGradientDemo() {
       {
         width: "$6",
         height: "$6",
-        br: "$4",
+        borderRadius: "$4",
         colors: ["$background", "$color"],
         start: [1, 1],
         end: [0, 0]

package/dist/esm/LinearGradientDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/LinearGradientDemo.tsx"],
-  "sourcesContent": ["import { XStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function LinearGradientDemo() {\n  return (\n    <XStack space>\n      {/* tokens */}\n      <LinearGradient\n        width=\"$6\"\n        height=\"$6\"\n        br=\"$4\"\n        colors={['$red10', '$yellow10']}\n        start={[0, 1]}\n        end={[0, 0]}\n      />\n\n      {/* theme values */}\n      <LinearGradient\n        width=\"$6\"\n        height=\"$6\"\n        br=\"$4\"\n        colors={['$background', '$color']}\n        start={[1, 1]}\n        end={[0, 0]}\n      />\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAKI,SAEE,KAFF;AALJ,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAExB,SAAS,qBAAqB;AACnC,SACE,qBAAC,UAAO,OAAK,MAEX;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,QAAO;AAAA,QACP,IAAG;AAAA,QACH,QAAQ,CAAC,UAAU,WAAW;AAAA,QAC9B,OAAO,CAAC,GAAG,CAAC;AAAA,QACZ,KAAK,CAAC,GAAG,CAAC;AAAA;AAAA,IACZ;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,QAAO;AAAA,QACP,IAAG;AAAA,QACH,QAAQ,CAAC,eAAe,QAAQ;AAAA,QAChC,OAAO,CAAC,GAAG,CAAC;AAAA,QACZ,KAAK,CAAC,GAAG,CAAC;AAAA;AAAA,IACZ;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { XStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function LinearGradientDemo() {\n  return (\n    <XStack space>\n      {/* tokens */}\n      <LinearGradient\n        width=\"$6\"\n        height=\"$6\"\n        borderRadius=\"$4\"\n        colors={['$red10', '$yellow10']}\n        start={[0, 1]}\n        end={[0, 0]}\n      />\n\n      {/* theme values */}\n      <LinearGradient\n        width=\"$6\"\n        height=\"$6\"\n        borderRadius=\"$4\"\n        colors={['$background', '$color']}\n        start={[1, 1]}\n        end={[0, 0]}\n      />\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAKI,SAEE,KAFF;AALJ,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAExB,SAAS,qBAAqB;AACnC,SACE,qBAAC,UAAO,OAAK,MAEX;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,QAAO;AAAA,QACP,cAAa;AAAA,QACb,QAAQ,CAAC,UAAU,WAAW;AAAA,QAC9B,OAAO,CAAC,GAAG,CAAC;AAAA,QACZ,KAAK,CAAC,GAAG,CAAC;AAAA;AAAA,IACZ;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,QAAO;AAAA,QACP,cAAa;AAAA,QACb,QAAQ,CAAC,eAAe,QAAQ;AAAA,QAChC,OAAO,CAAC,GAAG,CAAC;AAAA,QACZ,KAAK,CAAC,GAAG,CAAC;AAAA;AAAA,IACZ;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/ListItemDemo.js

@@ -2,13 +2,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight, Cloud, Moon, Star, Sun } from "@tamagui/lucide-icons";
 import { ListItem, Separator, XStack, YGroup } from "tamagui";
 function ListItemDemo() {
-  return /* @__PURE__ */ jsxs(XStack, { $sm: { flexDirection: "column" }, px: "$4", space: true, children: [
+  return /* @__PURE__ */ jsxs(XStack, { $sm: { flexDirection: "column" }, paddingHorizontal: "$4", space: true, children: [
     /* @__PURE__ */ jsx(ListItemDemo1, {}),
     /* @__PURE__ */ jsx(ListItemDemo2, {})
   ] });
 }
 function ListItemDemo1() {
-  return /* @__PURE__ */ jsxs(YGroup, { als: "center", bordered: true, w: 240, size: "$4", children: [
+  return /* @__PURE__ */ jsxs(YGroup, { alignSelf: "center", bordered: true, width: 240, size: "$4", children: [
     /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Star, title: "Star", subTitle: "Twinkles" }) }),
     /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Moon, children: "Moon" }) }),
     /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Sun, children: "Sun" }) }),
@@ -16,7 +16,7 @@ function ListItemDemo1() {
   ] });
 }
 function ListItemDemo2() {
-  return /* @__PURE__ */ jsxs(YGroup, { als: "center", bordered: true, w: 240, size: "$5", separator: /* @__PURE__ */ jsx(Separator, {}), children: [
+  return /* @__PURE__ */ jsxs(YGroup, { alignSelf: "center", bordered: true, width: 240, size: "$5", separator: /* @__PURE__ */ jsx(Separator, {}), children: [
     /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(
       ListItem,
       {

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/lucide-icons'\nimport { ListItem, Separator, XStack, YGroup } from 'tamagui'\n\nexport function ListItemDemo() {\n  return (\n    <XStack $sm={{ flexDirection: 'column' }} px=\"$4\" space>\n      <ListItemDemo1 />\n      <ListItemDemo2 />\n    </XStack>\n  )\n}\n\nfunction ListItemDemo1() {\n  return (\n    <YGroup als=\"center\" bordered w={240} size=\"$4\">\n      <YGroup.Item>\n        <ListItem hoverTheme icon={Star} title=\"Star\" subTitle=\"Twinkles\" />\n      </YGroup.Item>\n      <YGroup.Item>\n        <ListItem hoverTheme icon={Moon}>\n          Moon\n        </ListItem>\n      </YGroup.Item>\n      <YGroup.Item>\n        <ListItem hoverTheme icon={Sun}>\n          Sun\n        </ListItem>\n      </YGroup.Item>\n      <YGroup.Item>\n        <ListItem hoverTheme icon={Cloud}>\n          Cloud\n        </ListItem>\n      </YGroup.Item>\n    </YGroup>\n  )\n}\n\nfunction ListItemDemo2() {\n  return (\n    <YGroup als=\"center\" bordered w={240} size=\"$5\" separator={<Separator />}>\n      <YGroup.Item>\n        <ListItem\n          hoverTheme\n          pressTheme\n          title=\"Star\"\n          subTitle=\"Subtitle\"\n          icon={Star}\n          iconAfter={ChevronRight}\n        />\n      </YGroup.Item>\n      <YGroup.Item>\n        <ListItem\n          hoverTheme\n          pressTheme\n          title=\"Moon\"\n          subTitle=\"Subtitle\"\n          icon={Moon}\n          iconAfter={ChevronRight}\n        />\n      </YGroup.Item>\n    </YGroup>\n  )\n}\n"],
-  "mappings": "AAKI,SACE,KADF;AALJ,SAAS,cAAc,OAAO,MAAM,MAAM,WAAW;AACrD,SAAS,UAAU,WAAW,QAAQ,cAAc;AAE7C,SAAS,eAAe;AAC7B,SACE,qBAAC,UAAO,KAAK,EAAE,eAAe,SAAS,GAAG,IAAG,MAAK,OAAK,MACrD;AAAA,wBAAC,iBAAc;AAAA,IACf,oBAAC,iBAAc;AAAA,KACjB;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,qBAAC,UAAO,KAAI,UAAS,UAAQ,MAAC,GAAG,KAAK,MAAK,MACzC;AAAA,wBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,MAAM,OAAM,QAAO,UAAS,YAAW,GACpE;AAAA,IACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,MAAM,kBAEjC,GACF;AAAA,IACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,KAAK,iBAEhC,GACF;AAAA,IACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,OAAO,mBAElC,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,qBAAC,UAAO,KAAI,UAAS,UAAQ,MAAC,GAAG,KAAK,MAAK,MAAK,WAAW,oBAAC,aAAU,GACpE;AAAA,wBAAC,OAAO,MAAP,EACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb,GACF;AAAA,IACA,oBAAC,OAAO,MAAP,EACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb,GACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { ChevronRight, Cloud, Moon, Star, Sun } from '@tamagui/lucide-icons'\nimport { ListItem, Separator, XStack, YGroup } from 'tamagui'\n\nexport function ListItemDemo() {\n  return (\n    <XStack $sm={{ flexDirection: 'column' }} paddingHorizontal=\"$4\" space>\n      <ListItemDemo1 />\n      <ListItemDemo2 />\n    </XStack>\n  )\n}\n\nfunction ListItemDemo1() {\n  return (\n    <YGroup alignSelf=\"center\" bordered width={240} size=\"$4\">\n      <YGroup.Item>\n        <ListItem hoverTheme icon={Star} title=\"Star\" subTitle=\"Twinkles\" />\n      </YGroup.Item>\n      <YGroup.Item>\n        <ListItem hoverTheme icon={Moon}>\n          Moon\n        </ListItem>\n      </YGroup.Item>\n      <YGroup.Item>\n        <ListItem hoverTheme icon={Sun}>\n          Sun\n        </ListItem>\n      </YGroup.Item>\n      <YGroup.Item>\n        <ListItem hoverTheme icon={Cloud}>\n          Cloud\n        </ListItem>\n      </YGroup.Item>\n    </YGroup>\n  )\n}\n\nfunction ListItemDemo2() {\n  return (\n    <YGroup alignSelf=\"center\" bordered width={240} size=\"$5\" separator={<Separator />}>\n      <YGroup.Item>\n        <ListItem\n          hoverTheme\n          pressTheme\n          title=\"Star\"\n          subTitle=\"Subtitle\"\n          icon={Star}\n          iconAfter={ChevronRight}\n        />\n      </YGroup.Item>\n      <YGroup.Item>\n        <ListItem\n          hoverTheme\n          pressTheme\n          title=\"Moon\"\n          subTitle=\"Subtitle\"\n          icon={Moon}\n          iconAfter={ChevronRight}\n        />\n      </YGroup.Item>\n    </YGroup>\n  )\n}\n"],
+  "mappings": "AAKI,SACE,KADF;AALJ,SAAS,cAAc,OAAO,MAAM,MAAM,WAAW;AACrD,SAAS,UAAU,WAAW,QAAQ,cAAc;AAE7C,SAAS,eAAe;AAC7B,SACE,qBAAC,UAAO,KAAK,EAAE,eAAe,SAAS,GAAG,mBAAkB,MAAK,OAAK,MACpE;AAAA,wBAAC,iBAAc;AAAA,IACf,oBAAC,iBAAc;AAAA,KACjB;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,qBAAC,UAAO,WAAU,UAAS,UAAQ,MAAC,OAAO,KAAK,MAAK,MACnD;AAAA,wBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,MAAM,OAAM,QAAO,UAAS,YAAW,GACpE;AAAA,IACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,MAAM,kBAEjC,GACF;AAAA,IACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,KAAK,iBAEhC,GACF;AAAA,IACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,OAAO,mBAElC,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,qBAAC,UAAO,WAAU,UAAS,UAAQ,MAAC,OAAO,KAAK,MAAK,MAAK,WAAW,oBAAC,aAAU,GAC9E;AAAA,wBAAC,OAAO,MAAP,EACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb,GACF;AAAA,IACA,oBAAC,OAAO,MAAP,EACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb,GACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/ListItemDemo.mjs

@@ -2,13 +2,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight, Cloud, Moon, Star, Sun } from "@tamagui/lucide-icons";
 import { ListItem, Separator, XStack, YGroup } from "tamagui";
 function ListItemDemo() {
-  return /* @__PURE__ */ jsxs(XStack, { $sm: { flexDirection: "column" }, px: "$4", space: true, children: [
+  return /* @__PURE__ */ jsxs(XStack, { $sm: { flexDirection: "column" }, paddingHorizontal: "$4", space: true, children: [
     /* @__PURE__ */ jsx(ListItemDemo1, {}),
     /* @__PURE__ */ jsx(ListItemDemo2, {})
   ] });
 }
 function ListItemDemo1() {
-  return /* @__PURE__ */ jsxs(YGroup, { als: "center", bordered: true, w: 240, size: "$4", children: [
+  return /* @__PURE__ */ jsxs(YGroup, { alignSelf: "center", bordered: true, width: 240, size: "$4", children: [
     /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Star, title: "Star", subTitle: "Twinkles" }) }),
     /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Moon, children: "Moon" }) }),
     /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(ListItem, { hoverTheme: true, icon: Sun, children: "Sun" }) }),
@@ -16,7 +16,7 @@ function ListItemDemo1() {
   ] });
 }
 function ListItemDemo2() {
-  return /* @__PURE__ */ jsxs(YGroup, { als: "center", bordered: true, w: 240, size: "$5", separator: /* @__PURE__ */ jsx(Separator, {}), children: [
+  return /* @__PURE__ */ jsxs(YGroup, { alignSelf: "center", bordered: true, width: 240, size: "$5", separator: /* @__PURE__ */ jsx(Separator, {}), children: [
     /* @__PURE__ */ jsx(YGroup.Item, { children: /* @__PURE__ */ jsx(
       ListItem,
       {

package/dist/esm/ListItemDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ListItemDemo.tsx"],
-  "sourcesContent": ["import { ChevronRight, Cloud, Moon, Star, Sun } from '@tamagui/lucide-icons'\nimport { ListItem, Separator, XStack, YGroup } from 'tamagui'\n\nexport function ListItemDemo() {\n  return (\n    <XStack $sm={{ flexDirection: 'column' }} px=\"$4\" space>\n      <ListItemDemo1 />\n      <ListItemDemo2 />\n    </XStack>\n  )\n}\n\nfunction ListItemDemo1() {\n  return (\n    <YGroup als=\"center\" bordered w={240} size=\"$4\">\n      <YGroup.Item>\n        <ListItem hoverTheme icon={Star} title=\"Star\" subTitle=\"Twinkles\" />\n      </YGroup.Item>\n      <YGroup.Item>\n        <ListItem hoverTheme icon={Moon}>\n          Moon\n        </ListItem>\n      </YGroup.Item>\n      <YGroup.Item>\n        <ListItem hoverTheme icon={Sun}>\n          Sun\n        </ListItem>\n      </YGroup.Item>\n      <YGroup.Item>\n        <ListItem hoverTheme icon={Cloud}>\n          Cloud\n        </ListItem>\n      </YGroup.Item>\n    </YGroup>\n  )\n}\n\nfunction ListItemDemo2() {\n  return (\n    <YGroup als=\"center\" bordered w={240} size=\"$5\" separator={<Separator />}>\n      <YGroup.Item>\n        <ListItem\n          hoverTheme\n          pressTheme\n          title=\"Star\"\n          subTitle=\"Subtitle\"\n          icon={Star}\n          iconAfter={ChevronRight}\n        />\n      </YGroup.Item>\n      <YGroup.Item>\n        <ListItem\n          hoverTheme\n          pressTheme\n          title=\"Moon\"\n          subTitle=\"Subtitle\"\n          icon={Moon}\n          iconAfter={ChevronRight}\n        />\n      </YGroup.Item>\n    </YGroup>\n  )\n}\n"],
-  "mappings": "AAKI,SACE,KADF;AALJ,SAAS,cAAc,OAAO,MAAM,MAAM,WAAW;AACrD,SAAS,UAAU,WAAW,QAAQ,cAAc;AAE7C,SAAS,eAAe;AAC7B,SACE,qBAAC,UAAO,KAAK,EAAE,eAAe,SAAS,GAAG,IAAG,MAAK,OAAK,MACrD;AAAA,wBAAC,iBAAc;AAAA,IACf,oBAAC,iBAAc;AAAA,KACjB;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,qBAAC,UAAO,KAAI,UAAS,UAAQ,MAAC,GAAG,KAAK,MAAK,MACzC;AAAA,wBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,MAAM,OAAM,QAAO,UAAS,YAAW,GACpE;AAAA,IACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,MAAM,kBAEjC,GACF;AAAA,IACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,KAAK,iBAEhC,GACF;AAAA,IACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,OAAO,mBAElC,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,qBAAC,UAAO,KAAI,UAAS,UAAQ,MAAC,GAAG,KAAK,MAAK,MAAK,WAAW,oBAAC,aAAU,GACpE;AAAA,wBAAC,OAAO,MAAP,EACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb,GACF;AAAA,IACA,oBAAC,OAAO,MAAP,EACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb,GACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { ChevronRight, Cloud, Moon, Star, Sun } from '@tamagui/lucide-icons'\nimport { ListItem, Separator, XStack, YGroup } from 'tamagui'\n\nexport function ListItemDemo() {\n  return (\n    <XStack $sm={{ flexDirection: 'column' }} paddingHorizontal=\"$4\" space>\n      <ListItemDemo1 />\n      <ListItemDemo2 />\n    </XStack>\n  )\n}\n\nfunction ListItemDemo1() {\n  return (\n    <YGroup alignSelf=\"center\" bordered width={240} size=\"$4\">\n      <YGroup.Item>\n        <ListItem hoverTheme icon={Star} title=\"Star\" subTitle=\"Twinkles\" />\n      </YGroup.Item>\n      <YGroup.Item>\n        <ListItem hoverTheme icon={Moon}>\n          Moon\n        </ListItem>\n      </YGroup.Item>\n      <YGroup.Item>\n        <ListItem hoverTheme icon={Sun}>\n          Sun\n        </ListItem>\n      </YGroup.Item>\n      <YGroup.Item>\n        <ListItem hoverTheme icon={Cloud}>\n          Cloud\n        </ListItem>\n      </YGroup.Item>\n    </YGroup>\n  )\n}\n\nfunction ListItemDemo2() {\n  return (\n    <YGroup alignSelf=\"center\" bordered width={240} size=\"$5\" separator={<Separator />}>\n      <YGroup.Item>\n        <ListItem\n          hoverTheme\n          pressTheme\n          title=\"Star\"\n          subTitle=\"Subtitle\"\n          icon={Star}\n          iconAfter={ChevronRight}\n        />\n      </YGroup.Item>\n      <YGroup.Item>\n        <ListItem\n          hoverTheme\n          pressTheme\n          title=\"Moon\"\n          subTitle=\"Subtitle\"\n          icon={Moon}\n          iconAfter={ChevronRight}\n        />\n      </YGroup.Item>\n    </YGroup>\n  )\n}\n"],
+  "mappings": "AAKI,SACE,KADF;AALJ,SAAS,cAAc,OAAO,MAAM,MAAM,WAAW;AACrD,SAAS,UAAU,WAAW,QAAQ,cAAc;AAE7C,SAAS,eAAe;AAC7B,SACE,qBAAC,UAAO,KAAK,EAAE,eAAe,SAAS,GAAG,mBAAkB,MAAK,OAAK,MACpE;AAAA,wBAAC,iBAAc;AAAA,IACf,oBAAC,iBAAc;AAAA,KACjB;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,qBAAC,UAAO,WAAU,UAAS,UAAQ,MAAC,OAAO,KAAK,MAAK,MACnD;AAAA,wBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,MAAM,OAAM,QAAO,UAAS,YAAW,GACpE;AAAA,IACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,MAAM,kBAEjC,GACF;AAAA,IACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,KAAK,iBAEhC,GACF;AAAA,IACA,oBAAC,OAAO,MAAP,EACC,8BAAC,YAAS,YAAU,MAAC,MAAM,OAAO,mBAElC,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,qBAAC,UAAO,WAAU,UAAS,UAAQ,MAAC,OAAO,KAAK,MAAK,MAAK,WAAW,oBAAC,aAAU,GAC9E;AAAA,wBAAC,OAAO,MAAP,EACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb,GACF;AAAA,IACA,oBAAC,OAAO,MAAP,EACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAU;AAAA,QACV,YAAU;AAAA,QACV,OAAM;AAAA,QACN,UAAS;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA;AAAA,IACb,GACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/LucideIconsDemo.js

@@ -15,16 +15,16 @@ function LucideIconsDemo() {
   const iconsMemo = useMemo(() => {
     const icons = lucideIcons.filter((x) => x.key.startsWith(search.toLowerCase()));
     return icons.slice(0, 835).map(({ Icon, name }) => {
-      return /* @__PURE__ */ jsxs(YStack, { h: size, ai: "center", jc: "center", children: [
+      return /* @__PURE__ */ jsxs(YStack, { height: size, alignItems: "center", justifyContent: "center", children: [
         /* @__PURE__ */ jsx(Icon, { size: size * 0.25 }),
         /* @__PURE__ */ jsx(Spacer, {}),
         /* @__PURE__ */ jsx(Paragraph, { size: "$2", o: 0.5, children: name })
       ] }, name);
     });
   }, [search]);
-  return /* @__PURE__ */ jsxs(YStack, { als: "stretch", p: "$4", pb: "$0", space: true, children: [
+  return /* @__PURE__ */ jsxs(YStack, { alignSelf: "stretch", padding: "$4", paddingBottom: "$0", space: true, children: [
     /* @__PURE__ */ jsx(Input, { value: searchRaw, onChangeText: setSearch, placeholder: "Search..." }),
-    /* @__PURE__ */ jsx(YStack, { h: 420, children: /* @__PURE__ */ jsx(ScrollView, { children: /* @__PURE__ */ jsx(Grid, { itemMinWidth: size, children: iconsMemo }) }) })
+    /* @__PURE__ */ jsx(YStack, { height: 420, children: /* @__PURE__ */ jsx(ScrollView, { children: /* @__PURE__ */ jsx(Grid, { itemMinWidth: size, children: iconsMemo }) }) })
   ] });
 }
 export {

package/dist/esm/LucideIconsDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/LucideIconsDemo.tsx"],
-  "sourcesContent": ["import * as LucideIcons from '@tamagui/lucide-icons'\nimport { useMemo, useState } from 'react'\nimport { ScrollView } from 'react-native'\nimport { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from 'tamagui'\n\nconst lucideIcons = Object.keys(LucideIcons).map((name) => ({\n  key: name.toLowerCase(),\n  name,\n  Icon: LucideIcons[name],\n}))\n\nexport function LucideIconsDemo() {\n  const [searchRaw, setSearch] = useState('')\n  const search = useDebounceValue(searchRaw, 400)\n\n  const size = 100\n\n  const iconsMemo = useMemo(() => {\n    const icons = lucideIcons.filter((x) => x.key.startsWith(search.toLowerCase()))\n    return icons.slice(0, 835).map(({ Icon, name }) => {\n      return (\n        <YStack h={size} ai=\"center\" jc=\"center\" key={name}>\n          <Icon size={size * 0.25} />\n          <Spacer />\n          <Paragraph size=\"$2\" o={0.5}>\n            {name}\n          </Paragraph>\n        </YStack>\n      )\n    })\n  }, [search])\n\n  return (\n    <YStack als=\"stretch\" p=\"$4\" pb=\"$0\" space>\n      <Input value={searchRaw} onChangeText={setSearch} placeholder=\"Search...\" />\n\n      <YStack h={420}>\n        <ScrollView>\n          <Grid itemMinWidth={size}>{iconsMemo}</Grid>\n        </ScrollView>\n      </YStack>\n    </YStack>\n  )\n}\n"],
-  "mappings": "AAqBQ,SACE,KADF;AArBR,YAAY,iBAAiB;AAC7B,SAAS,SAAS,gBAAgB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,MAAM,OAAO,WAAW,QAAQ,QAAQ,wBAAwB;AAEzE,MAAM,cAAc,OAAO,KAAK,WAAW,EAAE,IAAI,CAAC,UAAU;AAAA,EAC1D,KAAK,KAAK,YAAY;AAAA,EACtB;AAAA,EACA,MAAM,YAAY,IAAI;AACxB,EAAE;AAEK,SAAS,kBAAkB;AAChC,QAAM,CAAC,WAAW,SAAS,IAAI,SAAS,EAAE;AAC1C,QAAM,SAAS,iBAAiB,WAAW,GAAG;AAE9C,QAAM,OAAO;AAEb,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,QAAQ,YAAY,OAAO,CAAC,MAAM,EAAE,IAAI,WAAW,OAAO,YAAY,CAAC,CAAC;AAC9E,WAAO,MAAM,MAAM,GAAG,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,MAAM;AACjD,aACE,qBAAC,UAAO,GAAG,MAAM,IAAG,UAAS,IAAG,UAC9B;AAAA,4BAAC,QAAK,MAAM,OAAO,MAAM;AAAA,QACzB,oBAAC,UAAO;AAAA,QACR,oBAAC,aAAU,MAAK,MAAK,GAAG,KACrB,gBACH;AAAA,WAL4C,IAM9C;AAAA,IAEJ,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,qBAAC,UAAO,KAAI,WAAU,GAAE,MAAK,IAAG,MAAK,OAAK,MACxC;AAAA,wBAAC,SAAM,OAAO,WAAW,cAAc,WAAW,aAAY,aAAY;AAAA,IAE1E,oBAAC,UAAO,GAAG,KACT,8BAAC,cACC,8BAAC,QAAK,cAAc,MAAO,qBAAU,GACvC,GACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import * as LucideIcons from '@tamagui/lucide-icons'\nimport { useMemo, useState } from 'react'\nimport { ScrollView } from 'react-native'\nimport { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from 'tamagui'\n\nconst lucideIcons = Object.keys(LucideIcons).map((name) => ({\n  key: name.toLowerCase(),\n  name,\n  Icon: LucideIcons[name],\n}))\n\nexport function LucideIconsDemo() {\n  const [searchRaw, setSearch] = useState('')\n  const search = useDebounceValue(searchRaw, 400)\n\n  const size = 100\n\n  const iconsMemo = useMemo(() => {\n    const icons = lucideIcons.filter((x) => x.key.startsWith(search.toLowerCase()))\n    return icons.slice(0, 835).map(({ Icon, name }) => {\n      return (\n        <YStack height={size} alignItems=\"center\" justifyContent=\"center\" key={name}>\n          <Icon size={size * 0.25} />\n          <Spacer />\n          <Paragraph size=\"$2\" o={0.5}>\n            {name}\n          </Paragraph>\n        </YStack>\n      )\n    })\n  }, [search])\n\n  return (\n    <YStack alignSelf=\"stretch\" padding=\"$4\" paddingBottom=\"$0\" space>\n      <Input value={searchRaw} onChangeText={setSearch} placeholder=\"Search...\" />\n\n      <YStack height={420}>\n        <ScrollView>\n          <Grid itemMinWidth={size}>{iconsMemo}</Grid>\n        </ScrollView>\n      </YStack>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAqBQ,SACE,KADF;AArBR,YAAY,iBAAiB;AAC7B,SAAS,SAAS,gBAAgB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,MAAM,OAAO,WAAW,QAAQ,QAAQ,wBAAwB;AAEzE,MAAM,cAAc,OAAO,KAAK,WAAW,EAAE,IAAI,CAAC,UAAU;AAAA,EAC1D,KAAK,KAAK,YAAY;AAAA,EACtB;AAAA,EACA,MAAM,YAAY,IAAI;AACxB,EAAE;AAEK,SAAS,kBAAkB;AAChC,QAAM,CAAC,WAAW,SAAS,IAAI,SAAS,EAAE;AAC1C,QAAM,SAAS,iBAAiB,WAAW,GAAG;AAE9C,QAAM,OAAO;AAEb,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,QAAQ,YAAY,OAAO,CAAC,MAAM,EAAE,IAAI,WAAW,OAAO,YAAY,CAAC,CAAC;AAC9E,WAAO,MAAM,MAAM,GAAG,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,MAAM;AACjD,aACE,qBAAC,UAAO,QAAQ,MAAM,YAAW,UAAS,gBAAe,UACvD;AAAA,4BAAC,QAAK,MAAM,OAAO,MAAM;AAAA,QACzB,oBAAC,UAAO;AAAA,QACR,oBAAC,aAAU,MAAK,MAAK,GAAG,KACrB,gBACH;AAAA,WALqE,IAMvE;AAAA,IAEJ,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,qBAAC,UAAO,WAAU,WAAU,SAAQ,MAAK,eAAc,MAAK,OAAK,MAC/D;AAAA,wBAAC,SAAM,OAAO,WAAW,cAAc,WAAW,aAAY,aAAY;AAAA,IAE1E,oBAAC,UAAO,QAAQ,KACd,8BAAC,cACC,8BAAC,QAAK,cAAc,MAAO,qBAAU,GACvC,GACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/LucideIconsDemo.mjs

@@ -15,16 +15,16 @@ function LucideIconsDemo() {
   const iconsMemo = useMemo(() => {
     const icons = lucideIcons.filter((x) => x.key.startsWith(search.toLowerCase()));
     return icons.slice(0, 835).map(({ Icon, name }) => {
-      return /* @__PURE__ */ jsxs(YStack, { h: size, ai: "center", jc: "center", children: [
+      return /* @__PURE__ */ jsxs(YStack, { height: size, alignItems: "center", justifyContent: "center", children: [
         /* @__PURE__ */ jsx(Icon, { size: size * 0.25 }),
         /* @__PURE__ */ jsx(Spacer, {}),
         /* @__PURE__ */ jsx(Paragraph, { size: "$2", o: 0.5, children: name })
       ] }, name);
     });
   }, [search]);
-  return /* @__PURE__ */ jsxs(YStack, { als: "stretch", p: "$4", pb: "$0", space: true, children: [
+  return /* @__PURE__ */ jsxs(YStack, { alignSelf: "stretch", padding: "$4", paddingBottom: "$0", space: true, children: [
     /* @__PURE__ */ jsx(Input, { value: searchRaw, onChangeText: setSearch, placeholder: "Search..." }),
-    /* @__PURE__ */ jsx(YStack, { h: 420, children: /* @__PURE__ */ jsx(ScrollView, { children: /* @__PURE__ */ jsx(Grid, { itemMinWidth: size, children: iconsMemo }) }) })
+    /* @__PURE__ */ jsx(YStack, { height: 420, children: /* @__PURE__ */ jsx(ScrollView, { children: /* @__PURE__ */ jsx(Grid, { itemMinWidth: size, children: iconsMemo }) }) })
   ] });
 }
 export {

package/dist/esm/LucideIconsDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/LucideIconsDemo.tsx"],
-  "sourcesContent": ["import * as LucideIcons from '@tamagui/lucide-icons'\nimport { useMemo, useState } from 'react'\nimport { ScrollView } from 'react-native'\nimport { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from 'tamagui'\n\nconst lucideIcons = Object.keys(LucideIcons).map((name) => ({\n  key: name.toLowerCase(),\n  name,\n  Icon: LucideIcons[name],\n}))\n\nexport function LucideIconsDemo() {\n  const [searchRaw, setSearch] = useState('')\n  const search = useDebounceValue(searchRaw, 400)\n\n  const size = 100\n\n  const iconsMemo = useMemo(() => {\n    const icons = lucideIcons.filter((x) => x.key.startsWith(search.toLowerCase()))\n    return icons.slice(0, 835).map(({ Icon, name }) => {\n      return (\n        <YStack h={size} ai=\"center\" jc=\"center\" key={name}>\n          <Icon size={size * 0.25} />\n          <Spacer />\n          <Paragraph size=\"$2\" o={0.5}>\n            {name}\n          </Paragraph>\n        </YStack>\n      )\n    })\n  }, [search])\n\n  return (\n    <YStack als=\"stretch\" p=\"$4\" pb=\"$0\" space>\n      <Input value={searchRaw} onChangeText={setSearch} placeholder=\"Search...\" />\n\n      <YStack h={420}>\n        <ScrollView>\n          <Grid itemMinWidth={size}>{iconsMemo}</Grid>\n        </ScrollView>\n      </YStack>\n    </YStack>\n  )\n}\n"],
-  "mappings": "AAqBQ,SACE,KADF;AArBR,YAAY,iBAAiB;AAC7B,SAAS,SAAS,gBAAgB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,MAAM,OAAO,WAAW,QAAQ,QAAQ,wBAAwB;AAEzE,MAAM,cAAc,OAAO,KAAK,WAAW,EAAE,IAAI,CAAC,UAAU;AAAA,EAC1D,KAAK,KAAK,YAAY;AAAA,EACtB;AAAA,EACA,MAAM,YAAY,IAAI;AACxB,EAAE;AAEK,SAAS,kBAAkB;AAChC,QAAM,CAAC,WAAW,SAAS,IAAI,SAAS,EAAE;AAC1C,QAAM,SAAS,iBAAiB,WAAW,GAAG;AAE9C,QAAM,OAAO;AAEb,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,QAAQ,YAAY,OAAO,CAAC,MAAM,EAAE,IAAI,WAAW,OAAO,YAAY,CAAC,CAAC;AAC9E,WAAO,MAAM,MAAM,GAAG,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,MAAM;AACjD,aACE,qBAAC,UAAO,GAAG,MAAM,IAAG,UAAS,IAAG,UAC9B;AAAA,4BAAC,QAAK,MAAM,OAAO,MAAM;AAAA,QACzB,oBAAC,UAAO;AAAA,QACR,oBAAC,aAAU,MAAK,MAAK,GAAG,KACrB,gBACH;AAAA,WAL4C,IAM9C;AAAA,IAEJ,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,qBAAC,UAAO,KAAI,WAAU,GAAE,MAAK,IAAG,MAAK,OAAK,MACxC;AAAA,wBAAC,SAAM,OAAO,WAAW,cAAc,WAAW,aAAY,aAAY;AAAA,IAE1E,oBAAC,UAAO,GAAG,KACT,8BAAC,cACC,8BAAC,QAAK,cAAc,MAAO,qBAAU,GACvC,GACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import * as LucideIcons from '@tamagui/lucide-icons'\nimport { useMemo, useState } from 'react'\nimport { ScrollView } from 'react-native'\nimport { Grid, Input, Paragraph, Spacer, YStack, useDebounceValue } from 'tamagui'\n\nconst lucideIcons = Object.keys(LucideIcons).map((name) => ({\n  key: name.toLowerCase(),\n  name,\n  Icon: LucideIcons[name],\n}))\n\nexport function LucideIconsDemo() {\n  const [searchRaw, setSearch] = useState('')\n  const search = useDebounceValue(searchRaw, 400)\n\n  const size = 100\n\n  const iconsMemo = useMemo(() => {\n    const icons = lucideIcons.filter((x) => x.key.startsWith(search.toLowerCase()))\n    return icons.slice(0, 835).map(({ Icon, name }) => {\n      return (\n        <YStack height={size} alignItems=\"center\" justifyContent=\"center\" key={name}>\n          <Icon size={size * 0.25} />\n          <Spacer />\n          <Paragraph size=\"$2\" o={0.5}>\n            {name}\n          </Paragraph>\n        </YStack>\n      )\n    })\n  }, [search])\n\n  return (\n    <YStack alignSelf=\"stretch\" padding=\"$4\" paddingBottom=\"$0\" space>\n      <Input value={searchRaw} onChangeText={setSearch} placeholder=\"Search...\" />\n\n      <YStack height={420}>\n        <ScrollView>\n          <Grid itemMinWidth={size}>{iconsMemo}</Grid>\n        </ScrollView>\n      </YStack>\n    </YStack>\n  )\n}\n"],
+  "mappings": "AAqBQ,SACE,KADF;AArBR,YAAY,iBAAiB;AAC7B,SAAS,SAAS,gBAAgB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,MAAM,OAAO,WAAW,QAAQ,QAAQ,wBAAwB;AAEzE,MAAM,cAAc,OAAO,KAAK,WAAW,EAAE,IAAI,CAAC,UAAU;AAAA,EAC1D,KAAK,KAAK,YAAY;AAAA,EACtB;AAAA,EACA,MAAM,YAAY,IAAI;AACxB,EAAE;AAEK,SAAS,kBAAkB;AAChC,QAAM,CAAC,WAAW,SAAS,IAAI,SAAS,EAAE;AAC1C,QAAM,SAAS,iBAAiB,WAAW,GAAG;AAE9C,QAAM,OAAO;AAEb,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,QAAQ,YAAY,OAAO,CAAC,MAAM,EAAE,IAAI,WAAW,OAAO,YAAY,CAAC,CAAC;AAC9E,WAAO,MAAM,MAAM,GAAG,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,MAAM;AACjD,aACE,qBAAC,UAAO,QAAQ,MAAM,YAAW,UAAS,gBAAe,UACvD;AAAA,4BAAC,QAAK,MAAM,OAAO,MAAM;AAAA,QACzB,oBAAC,UAAO;AAAA,QACR,oBAAC,aAAU,MAAK,MAAK,GAAG,KACrB,gBACH;AAAA,WALqE,IAMvE;AAAA,IAEJ,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,qBAAC,UAAO,WAAU,WAAU,SAAQ,MAAK,eAAc,MAAK,OAAK,MAC/D;AAAA,wBAAC,SAAM,OAAO,WAAW,cAAc,WAAW,aAAY,aAAY;AAAA,IAE1E,oBAAC,UAAO,QAAQ,KACd,8BAAC,cACC,8BAAC,QAAK,cAAc,MAAO,qBAAU,GACvC,GACF;AAAA,KACF;AAEJ;",
   "names": []
 }