@tamagui/demos 1.11.2 → 1.12.0

package/dist/cjs/ColorsDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ColorsDemo.tsx"],
-  "sourcesContent": ["import { Variable } from '@tamagui/core'\nimport {\n  H2,\n  Paragraph,\n  Separator,\n  Square,\n  XStack,\n  YStack,\n  getTokens,\n  getVariableValue,\n} from 'tamagui'\n\nconst colorGroups = ['orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'red']\n\nexport function ColorsDemo() {\n  const colors = getTokens({ prefixed: false }).color\n  const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)]\n\n  return (\n    <YStack mt=\"$4\" space=\"$8\">\n      <ColorsRow title=\"Light\" colors={colorsLight} />\n      <Separator />\n      <ColorsRow title=\"Dark\" colors={colorsDark} />\n    </YStack>\n  )\n}\n\nfunction ColorsRow({ title, colors }: { title: string; colors: Variable[][] }) {\n  return (\n    <YStack space $sm={{ space: '$2' }}>\n      <H2 size=\"$2\">{title}</H2>\n\n      <XStack space als=\"center\">\n        <YStack space $sm={{ space: '$2' }} als=\"center\">\n          {colors.map((group, index) => {\n            return (\n              <XStack space=\"$2\" key={index}>\n                {group.map((color) => {\n                  return (\n                    <Square\n                      key={`${color.key}${index}`}\n                      br=\"$2\"\n                      size=\"$4\"\n                      h=\"$4\"\n                      bw={1}\n                      bc={getVariableValue(color)}\n                      boc=\"$color7\"\n                      $sm={{\n                        size: '$2',\n                      }}\n                      $xs={{\n                        size: '$1',\n                      }}\n                    />\n                  )\n                })}\n              </XStack>\n            )\n          })}\n\n          <XStack space=\"$2\" als=\"center\">\n            {new Array(13)\n              .fill(0)\n              .slice(1)\n              .map((_, index) => {\n                return (\n                  <Paragraph\n                    col=\"$color10\"\n                    ta=\"center\"\n                    w=\"$4\"\n                    $sm={{\n                      w: '$2',\n                    }}\n                    $xs={{\n                      w: '$1',\n                    }}\n                    key={index}\n                  >\n                    {index}\n                  </Paragraph>\n                )\n              })}\n          </XStack>\n        </YStack>\n\n        <YStack space=\"$4\" mt=\"$2\">\n          {colorGroups.map((name) => (\n            <Paragraph\n              theme={name as any}\n              col=\"$color10\"\n              h=\"$4\"\n              rotate=\"-10deg\"\n              $sm={{\n                h: '$2',\n              }}\n              $xs={{\n                h: '$1',\n              }}\n              key={name}\n            >\n              {name}\n            </Paragraph>\n          ))}\n        </YStack>\n      </XStack>\n    </YStack>\n  )\n}\n\nfunction getColors(colors: Record<string, Variable>, dark = false) {\n  return colorGroups.map((group) => {\n    return Object.keys(colors)\n      .filter(\n        (color) =>\n          color.startsWith(group) &&\n          (dark ? color.endsWith('Dark') : !color.endsWith('Dark'))\n      )\n      .map((key) => colors[key])\n  })\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBI;AAlBJ,qBASO;AAEP,MAAM,cAAc,CAAC,UAAU,UAAU,SAAS,QAAQ,UAAU,QAAQ,KAAK;AAE1E,SAAS,aAAa;AAC3B,QAAM,aAAS,0BAAU,EAAE,UAAU,MAAM,CAAC,EAAE;AAC9C,QAAM,CAAC,aAAa,UAAU,IAAI,CAAC,UAAU,MAAM,GAAG,UAAU,QAAQ,IAAI,CAAC;AAE7E,SACE,6CAAC,yBAAO,IAAG,MAAK,OAAM,MACpB;AAAA,gDAAC,aAAU,OAAM,SAAQ,QAAQ,aAAa;AAAA,IAC9C,4CAAC,4BAAU;AAAA,IACX,4CAAC,aAAU,OAAM,QAAO,QAAQ,YAAY;AAAA,KAC9C;AAEJ;AAEA,SAAS,UAAU,EAAE,OAAO,OAAO,GAA4C;AAC7E,SACE,6CAAC,yBAAO,OAAK,MAAC,KAAK,EAAE,OAAO,KAAK,GAC/B;AAAA,gDAAC,qBAAG,MAAK,MAAM,iBAAM;AAAA,IAErB,6CAAC,yBAAO,OAAK,MAAC,KAAI,UAChB;AAAA,mDAAC,yBAAO,OAAK,MAAC,KAAK,EAAE,OAAO,KAAK,GAAG,KAAI,UACrC;AAAA,eAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBACE,4CAAC,yBAAO,OAAM,MACX,gBAAM,IAAI,CAAC,UAAU;AACpB,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,IAAG;AAAA,gBACH,MAAK;AAAA,gBACL,GAAE;AAAA,gBACF,IAAI;AAAA,gBACJ,QAAI,iCAAiB,KAAK;AAAA,gBAC1B,KAAI;AAAA,gBACJ,KAAK;AAAA,kBACH,MAAM;AAAA,gBACR;AAAA,gBACA,KAAK;AAAA,kBACH,MAAM;AAAA,gBACR;AAAA;AAAA,cAZK,GAAG,MAAM,MAAM;AAAA,YAatB;AAAA,UAEJ,CAAC,KAnBqB,KAoBxB;AAAA,QAEJ,CAAC;AAAA,QAED,4CAAC,yBAAO,OAAM,MAAK,KAAI,UACpB,cAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAAC,GAAG,UAAU;AACjB,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,KAAI;AAAA,cACJ,IAAG;AAAA,cACH,GAAE;AAAA,cACF,KAAK;AAAA,gBACH,GAAG;AAAA,cACL;AAAA,cACA,KAAK;AAAA,gBACH,GAAG;AAAA,cACL;AAAA,cAGC;AAAA;AAAA,YAFI;AAAA,UAGP;AAAA,QAEJ,CAAC,GACL;AAAA,SACF;AAAA,MAEA,4CAAC,yBAAO,OAAM,MAAK,IAAG,MACnB,sBAAY,IAAI,CAAC,SAChB;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,KAAI;AAAA,UACJ,GAAE;AAAA,UACF,QAAO;AAAA,UACP,KAAK;AAAA,YACH,GAAG;AAAA,UACL;AAAA,UACA,KAAK;AAAA,YACH,GAAG;AAAA,UACL;AAAA,UAGC;AAAA;AAAA,QAFI;AAAA,MAGP,CACD,GACH;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,SAAS,UAAU,QAAkC,OAAO,OAAO;AACjE,SAAO,YAAY,IAAI,CAAC,UAAU;AAChC,WAAO,OAAO,KAAK,MAAM,EACtB;AAAA,MACC,CAAC,UACC,MAAM,WAAW,KAAK,MACrB,OAAO,MAAM,SAAS,MAAM,IAAI,CAAC,MAAM,SAAS,MAAM;AAAA,IAC3D,EACC,IAAI,CAAC,QAAQ,OAAO,GAAG,CAAC;AAAA,EAC7B,CAAC;AACH;",
+  "sourcesContent": ["import { Variable } from '@tamagui/core'\nimport {\n  H2,\n  Paragraph,\n  Separator,\n  Square,\n  XStack,\n  YStack,\n  getTokens,\n  getVariableValue,\n} from 'tamagui'\n\nconst colorGroups = ['orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'red']\n\nexport function ColorsDemo() {\n  const colors = getTokens({ prefixed: false }).color\n  const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)]\n\n  return (\n    <YStack marginTop=\"$4\" space=\"$8\">\n      <ColorsRow title=\"Light\" colors={colorsLight} />\n      <Separator />\n      <ColorsRow title=\"Dark\" colors={colorsDark} />\n    </YStack>\n  )\n}\n\nfunction ColorsRow({ title, colors }: { title: string; colors: Variable[][] }) {\n  return (\n    <YStack space $sm={{ space: '$2' }}>\n      <H2 size=\"$2\">{title}</H2>\n\n      <XStack space alignSelf=\"center\">\n        <YStack space $sm={{ space: '$2' }} als=\"center\">\n          {colors.map((group, index) => {\n            return (\n              <XStack space=\"$2\" key={index}>\n                {group.map((color) => {\n                  return (\n                    <Square\n                      key={`${color.key}${index}`}\n                      borderRadius=\"$2\"\n                      size=\"$4\"\n                      height=\"$4\"\n                      borderWidth={1}\n                      backgroundColor={getVariableValue(color)}\n                      borderColor=\"$color7\"\n                      $sm={{\n                        size: '$2',\n                      }}\n                      $xs={{\n                        size: '$1',\n                      }}\n                    />\n                  )\n                })}\n              </XStack>\n            )\n          })}\n\n          <XStack space=\"$2\" alignSelf=\"center\">\n            {new Array(13)\n              .fill(0)\n              .slice(1)\n              .map((_, index) => {\n                return (\n                  <Paragraph\n                    color=\"$color10\"\n                    textAlign=\"center\"\n                    width=\"$4\"\n                    $sm={{\n                     width:'$2',\n                    }}\n                    $xs={{\n                      width: '$1',\n                    }}\n                    key={index}\n                  >\n                    {index}\n                  </Paragraph>\n                )\n              })}\n          </XStack>\n        </YStack>\n\n        <YStack space=\"$4\" marginTop=\"$2\">\n          {colorGroups.map((name) => (\n            <Paragraph\n              theme={name as any}\n              color=\"$color10\"\n              height=\"$4\"\n              rotate=\"-10deg\"\n              $sm={{\n                height: '$2',\n              }}\n              $xs={{\n                height: '$1',\n              }}\n              key={name}\n            >\n              {name}\n            </Paragraph>\n          ))}\n        </YStack>\n      </XStack>\n    </YStack>\n  )\n}\n\nfunction getColors(colors: Record<string, Variable>, dark = false) {\n  return colorGroups.map((group) => {\n    return Object.keys(colors)\n      .filter(\n        (color) =>\n          color.startsWith(group) &&\n          (dark ? color.endsWith('Dark') : !color.endsWith('Dark'))\n      )\n      .map((key) => colors[key])\n  })\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBI;AAlBJ,qBASO;AAEP,MAAM,cAAc,CAAC,UAAU,UAAU,SAAS,QAAQ,UAAU,QAAQ,KAAK;AAE1E,SAAS,aAAa;AAC3B,QAAM,aAAS,0BAAU,EAAE,UAAU,MAAM,CAAC,EAAE;AAC9C,QAAM,CAAC,aAAa,UAAU,IAAI,CAAC,UAAU,MAAM,GAAG,UAAU,QAAQ,IAAI,CAAC;AAE7E,SACE,6CAAC,yBAAO,WAAU,MAAK,OAAM,MAC3B;AAAA,gDAAC,aAAU,OAAM,SAAQ,QAAQ,aAAa;AAAA,IAC9C,4CAAC,4BAAU;AAAA,IACX,4CAAC,aAAU,OAAM,QAAO,QAAQ,YAAY;AAAA,KAC9C;AAEJ;AAEA,SAAS,UAAU,EAAE,OAAO,OAAO,GAA4C;AAC7E,SACE,6CAAC,yBAAO,OAAK,MAAC,KAAK,EAAE,OAAO,KAAK,GAC/B;AAAA,gDAAC,qBAAG,MAAK,MAAM,iBAAM;AAAA,IAErB,6CAAC,yBAAO,OAAK,MAAC,WAAU,UACtB;AAAA,mDAAC,yBAAO,OAAK,MAAC,KAAK,EAAE,OAAO,KAAK,GAAG,KAAI,UACrC;AAAA,eAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBACE,4CAAC,yBAAO,OAAM,MACX,gBAAM,IAAI,CAAC,UAAU;AACpB,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,cAAa;AAAA,gBACb,MAAK;AAAA,gBACL,QAAO;AAAA,gBACP,aAAa;AAAA,gBACb,qBAAiB,iCAAiB,KAAK;AAAA,gBACvC,aAAY;AAAA,gBACZ,KAAK;AAAA,kBACH,MAAM;AAAA,gBACR;AAAA,gBACA,KAAK;AAAA,kBACH,MAAM;AAAA,gBACR;AAAA;AAAA,cAZK,GAAG,MAAM,MAAM;AAAA,YAatB;AAAA,UAEJ,CAAC,KAnBqB,KAoBxB;AAAA,QAEJ,CAAC;AAAA,QAED,4CAAC,yBAAO,OAAM,MAAK,WAAU,UAC1B,cAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAAC,GAAG,UAAU;AACjB,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,WAAU;AAAA,cACV,OAAM;AAAA,cACN,KAAK;AAAA,gBACJ,OAAM;AAAA,cACP;AAAA,cACA,KAAK;AAAA,gBACH,OAAO;AAAA,cACT;AAAA,cAGC;AAAA;AAAA,YAFI;AAAA,UAGP;AAAA,QAEJ,CAAC,GACL;AAAA,SACF;AAAA,MAEA,4CAAC,yBAAO,OAAM,MAAK,WAAU,MAC1B,sBAAY,IAAI,CAAC,SAChB;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,OAAM;AAAA,UACN,QAAO;AAAA,UACP,QAAO;AAAA,UACP,KAAK;AAAA,YACH,QAAQ;AAAA,UACV;AAAA,UACA,KAAK;AAAA,YACH,QAAQ;AAAA,UACV;AAAA,UAGC;AAAA;AAAA,QAFI;AAAA,MAGP,CACD,GACH;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,SAAS,UAAU,QAAkC,OAAO,OAAO;AACjE,SAAO,YAAY,IAAI,CAAC,UAAU;AAChC,WAAO,OAAO,KAAK,MAAM,EACtB;AAAA,MACC,CAAC,UACC,MAAM,WAAW,KAAK,MACrB,OAAO,MAAM,SAAS,MAAM,IAAI,CAAC,MAAM,SAAS,MAAM;AAAA,IAC3D,EACC,IAAI,CAAC,QAAQ,OAAO,GAAG,CAAC;AAAA,EAC7B,CAAC;AACH;",
   "names": []
 }

package/dist/cjs/DialogDemo.js

@@ -37,9 +37,9 @@ function DialogDemo() {
         import_tamagui.Dialog.Overlay,
         {
           animation: "quick",
-          o: 0.5,
-          enterStyle: { o: 0 },
-          exitStyle: { o: 0 }
+          opacity: 0.5,
+          enterStyle: { opacity: 0 },
+          exitStyle: { opacity: 0 }
         },
         "overlay"
       ),
@@ -63,15 +63,15 @@ function DialogDemo() {
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Title, { children: "Edit profile" }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Description, { children: "Make changes to your profile here. Click save when you're done." }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Fieldset, { space: "$4", horizontal: true, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, { w: 160, justifyContent: "flex-end", htmlFor: "name", children: "Name" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Input, { f: 1, id: "name", defaultValue: "Nate Wienert" })
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, { width: 160, justifyContent: "flex-end", htmlFor: "name", children: "Name" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Input, { flex: 1, id: "name", defaultValue: "Nate Wienert" })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Fieldset, { space: "$4", horizontal: true, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, { w: 160, justifyContent: "flex-end", htmlFor: "username", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.TooltipSimple, { label: "Pick your favorite", placement: "bottom-start", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, { children: "Food" }) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, { width: 160, justifyContent: "flex-end", htmlFor: "username", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.TooltipSimple, { label: "Pick your favorite", placement: "bottom-start", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, { children: "Food" }) }) }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SelectDemo.SelectDemo, {})
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { ai: "flex-end", mt: "$2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Close, { displayWhenAdapted: true, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { theme: "alt1", "aria-label": "Close", children: "Save changes" }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Unspaced, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { pos: "absolute", t: "$3", r: "$3", size: "$2", circular: true, icon: import_lucide_icons.X }) }) })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { alignItems: "flex-end", marginTop: "$2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Close, { displayWhenAdapted: true, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { theme: "alt1", "aria-label": "Close", children: "Save changes" }) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Unspaced, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { position: "absolute", top: "$3", right: "$3", size: "$2", circular: true, icon: import_lucide_icons.X }) }) })
           ]
         },
         "content"

package/dist/cjs/DialogDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DialogDemo.tsx"],
-  "sourcesContent": ["import { X } from '@tamagui/lucide-icons'\nimport {\n  Adapt,\n  Button,\n  Dialog,\n  Fieldset,\n  H2,\n  Input,\n  Label,\n  Paragraph,\n  Sheet,\n  TooltipSimple,\n  Unspaced,\n  YStack,\n} from 'tamagui'\n\nimport { SelectDemo } from './SelectDemo'\n\nexport function DialogDemo() {\n  return (\n    <Dialog modal>\n      <Dialog.Trigger asChild>\n        <Button>Edit Profile</Button>\n      </Dialog.Trigger>\n\n      <Adapt when=\"sm\" platform=\"touch\">\n        <Sheet zIndex={200000} modal dismissOnSnapToBottom>\n          <Sheet.Frame padding=\"$4\" space>\n            <Adapt.Contents />\n          </Sheet.Frame>\n          <Sheet.Overlay />\n        </Sheet>\n      </Adapt>\n\n      <Dialog.Portal>\n        <Dialog.Overlay\n          key=\"overlay\"\n          animation=\"quick\"\n          o={0.5}\n          enterStyle={{ o: 0 }}\n          exitStyle={{ o: 0 }}\n        />\n\n        <Dialog.Content\n          bordered\n          elevate\n          key=\"content\"\n          animation={[\n            'quick',\n            {\n              opacity: {\n                overshootClamping: true,\n              },\n            },\n          ]}\n          enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}\n          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}\n          space\n        >\n          <Dialog.Title>Edit profile</Dialog.Title>\n          <Dialog.Description>\n            Make changes to your profile here. Click save when you're done.\n          </Dialog.Description>\n          <Fieldset space=\"$4\" horizontal>\n            <Label w={160} justifyContent=\"flex-end\" htmlFor=\"name\">\n              Name\n            </Label>\n            <Input f={1} id=\"name\" defaultValue=\"Nate Wienert\" />\n          </Fieldset>\n          <Fieldset space=\"$4\" horizontal>\n            <Label w={160} justifyContent=\"flex-end\" htmlFor=\"username\">\n              <TooltipSimple label=\"Pick your favorite\" placement=\"bottom-start\">\n                <Paragraph>Food</Paragraph>\n              </TooltipSimple>\n            </Label>\n            <SelectDemo />\n          </Fieldset>\n\n          <YStack ai=\"flex-end\" mt=\"$2\">\n            <Dialog.Close displayWhenAdapted asChild>\n              <Button theme=\"alt1\" aria-label=\"Close\">\n                Save changes\n              </Button>\n            </Dialog.Close>\n          </YStack>\n\n          <Unspaced>\n            <Dialog.Close asChild>\n              <Button pos=\"absolute\" t=\"$3\" r=\"$3\" size=\"$2\" circular icon={X} />\n            </Dialog.Close>\n          </Unspaced>\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBQ;AAtBR,0BAAkB;AAClB,qBAaO;AAEP,wBAA2B;AAEpB,SAAS,aAAa;AAC3B,SACE,6CAAC,yBAAO,OAAK,MACX;AAAA,gDAAC,sBAAO,SAAP,EAAe,SAAO,MACrB,sDAAC,yBAAO,0BAAY,GACtB;AAAA,IAEA,4CAAC,wBAAM,MAAK,MAAK,UAAS,SACxB,uDAAC,wBAAM,QAAQ,KAAQ,OAAK,MAAC,uBAAqB,MAChD;AAAA,kDAAC,qBAAM,OAAN,EAAY,SAAQ,MAAK,OAAK,MAC7B,sDAAC,qBAAM,UAAN,EAAe,GAClB;AAAA,MACA,4CAAC,qBAAM,SAAN,EAAc;AAAA,OACjB,GACF;AAAA,IAEA,6CAAC,sBAAO,QAAP,EACC;AAAA;AAAA,QAAC,sBAAO;AAAA,QAAP;AAAA,UAEC,WAAU;AAAA,UACV,GAAG;AAAA,UACH,YAAY,EAAE,GAAG,EAAE;AAAA,UACnB,WAAW,EAAE,GAAG,EAAE;AAAA;AAAA,QAJd;AAAA,MAKN;AAAA,MAEA;AAAA,QAAC,sBAAO;AAAA,QAAP;AAAA,UACC,UAAQ;AAAA,UACR,SAAO;AAAA,UAEP,WAAW;AAAA,YACT;AAAA,YACA;AAAA,cACE,SAAS;AAAA,gBACP,mBAAmB;AAAA,cACrB;AAAA,YACF;AAAA,UACF;AAAA,UACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI;AAAA,UACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK;AAAA,UAClD,OAAK;AAAA,UAEL;AAAA,wDAAC,sBAAO,OAAP,EAAa,0BAAY;AAAA,YAC1B,4CAAC,sBAAO,aAAP,EAAmB,6EAEpB;AAAA,YACA,6CAAC,2BAAS,OAAM,MAAK,YAAU,MAC7B;AAAA,0DAAC,wBAAM,GAAG,KAAK,gBAAe,YAAW,SAAQ,QAAO,kBAExD;AAAA,cACA,4CAAC,wBAAM,GAAG,GAAG,IAAG,QAAO,cAAa,gBAAe;AAAA,eACrD;AAAA,YACA,6CAAC,2BAAS,OAAM,MAAK,YAAU,MAC7B;AAAA,0DAAC,wBAAM,GAAG,KAAK,gBAAe,YAAW,SAAQ,YAC/C,sDAAC,gCAAc,OAAM,sBAAqB,WAAU,gBAClD,sDAAC,4BAAU,kBAAI,GACjB,GACF;AAAA,cACA,4CAAC,gCAAW;AAAA,eACd;AAAA,YAEA,4CAAC,yBAAO,IAAG,YAAW,IAAG,MACvB,sDAAC,sBAAO,OAAP,EAAa,oBAAkB,MAAC,SAAO,MACtC,sDAAC,yBAAO,OAAM,QAAO,cAAW,SAAQ,0BAExC,GACF,GACF;AAAA,YAEA,4CAAC,2BACC,sDAAC,sBAAO,OAAP,EAAa,SAAO,MACnB,sDAAC,yBAAO,KAAI,YAAW,GAAE,MAAK,GAAE,MAAK,MAAK,MAAK,UAAQ,MAAC,MAAM,uBAAG,GACnE,GACF;AAAA;AAAA;AAAA,QA5CI;AAAA,MA6CN;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { X } from '@tamagui/lucide-icons'\nimport {\n  Adapt,\n  Button,\n  Dialog,\n  Fieldset,\n  H2,\n  Input,\n  Label,\n  Paragraph,\n  Sheet,\n  TooltipSimple,\n  Unspaced,\n  YStack,\n} from 'tamagui'\n\nimport { SelectDemo } from './SelectDemo'\n\nexport function DialogDemo() {\n  return (\n    <Dialog modal>\n      <Dialog.Trigger asChild>\n        <Button>Edit Profile</Button>\n      </Dialog.Trigger>\n\n      <Adapt when=\"sm\" platform=\"touch\">\n        <Sheet zIndex={200000} modal dismissOnSnapToBottom>\n          <Sheet.Frame padding=\"$4\" space>\n            <Adapt.Contents />\n          </Sheet.Frame>\n          <Sheet.Overlay />\n        </Sheet>\n      </Adapt>\n\n      <Dialog.Portal>\n        <Dialog.Overlay\n          key=\"overlay\"\n          animation=\"quick\"\n          opacity={0.5}\n          enterStyle={{ opacity: 0 }}\n          exitStyle={{ opacity: 0 }}\n        />\n\n        <Dialog.Content\n          bordered\n          elevate\n          key=\"content\"\n          animation={[\n            'quick',\n            {\n              opacity: {\n                overshootClamping: true,\n              },\n            },\n          ]}\n          enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}\n          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}\n          space\n        >\n          <Dialog.Title>Edit profile</Dialog.Title>\n          <Dialog.Description>\n            Make changes to your profile here. Click save when you're done.\n          </Dialog.Description>\n          <Fieldset space=\"$4\" horizontal>\n            <Label width={160} justifyContent=\"flex-end\" htmlFor=\"name\">\n              Name\n            </Label>\n            <Input flex={1} id=\"name\" defaultValue=\"Nate Wienert\" />\n          </Fieldset>\n          <Fieldset space=\"$4\" horizontal>\n            <Label width={160} justifyContent=\"flex-end\" htmlFor=\"username\">\n              <TooltipSimple label=\"Pick your favorite\" placement=\"bottom-start\">\n                <Paragraph>Food</Paragraph>\n              </TooltipSimple>\n            </Label>\n            <SelectDemo />\n          </Fieldset>\n\n          <YStack alignItems=\"flex-end\" marginTop=\"$2\">\n            <Dialog.Close displayWhenAdapted asChild>\n              <Button theme=\"alt1\" aria-label=\"Close\">\n                Save changes\n              </Button>\n            </Dialog.Close>\n          </YStack>\n\n          <Unspaced>\n            <Dialog.Close asChild>\n              <Button position=\"absolute\" top=\"$3\" right=\"$3\" size=\"$2\" circular icon={X} />\n            </Dialog.Close>\n          </Unspaced>\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBQ;AAtBR,0BAAkB;AAClB,qBAaO;AAEP,wBAA2B;AAEpB,SAAS,aAAa;AAC3B,SACE,6CAAC,yBAAO,OAAK,MACX;AAAA,gDAAC,sBAAO,SAAP,EAAe,SAAO,MACrB,sDAAC,yBAAO,0BAAY,GACtB;AAAA,IAEA,4CAAC,wBAAM,MAAK,MAAK,UAAS,SACxB,uDAAC,wBAAM,QAAQ,KAAQ,OAAK,MAAC,uBAAqB,MAChD;AAAA,kDAAC,qBAAM,OAAN,EAAY,SAAQ,MAAK,OAAK,MAC7B,sDAAC,qBAAM,UAAN,EAAe,GAClB;AAAA,MACA,4CAAC,qBAAM,SAAN,EAAc;AAAA,OACjB,GACF;AAAA,IAEA,6CAAC,sBAAO,QAAP,EACC;AAAA;AAAA,QAAC,sBAAO;AAAA,QAAP;AAAA,UAEC,WAAU;AAAA,UACV,SAAS;AAAA,UACT,YAAY,EAAE,SAAS,EAAE;AAAA,UACzB,WAAW,EAAE,SAAS,EAAE;AAAA;AAAA,QAJpB;AAAA,MAKN;AAAA,MAEA;AAAA,QAAC,sBAAO;AAAA,QAAP;AAAA,UACC,UAAQ;AAAA,UACR,SAAO;AAAA,UAEP,WAAW;AAAA,YACT;AAAA,YACA;AAAA,cACE,SAAS;AAAA,gBACP,mBAAmB;AAAA,cACrB;AAAA,YACF;AAAA,UACF;AAAA,UACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI;AAAA,UACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK;AAAA,UAClD,OAAK;AAAA,UAEL;AAAA,wDAAC,sBAAO,OAAP,EAAa,0BAAY;AAAA,YAC1B,4CAAC,sBAAO,aAAP,EAAmB,6EAEpB;AAAA,YACA,6CAAC,2BAAS,OAAM,MAAK,YAAU,MAC7B;AAAA,0DAAC,wBAAM,OAAO,KAAK,gBAAe,YAAW,SAAQ,QAAO,kBAE5D;AAAA,cACA,4CAAC,wBAAM,MAAM,GAAG,IAAG,QAAO,cAAa,gBAAe;AAAA,eACxD;AAAA,YACA,6CAAC,2BAAS,OAAM,MAAK,YAAU,MAC7B;AAAA,0DAAC,wBAAM,OAAO,KAAK,gBAAe,YAAW,SAAQ,YACnD,sDAAC,gCAAc,OAAM,sBAAqB,WAAU,gBAClD,sDAAC,4BAAU,kBAAI,GACjB,GACF;AAAA,cACA,4CAAC,gCAAW;AAAA,eACd;AAAA,YAEA,4CAAC,yBAAO,YAAW,YAAW,WAAU,MACtC,sDAAC,sBAAO,OAAP,EAAa,oBAAkB,MAAC,SAAO,MACtC,sDAAC,yBAAO,OAAM,QAAO,cAAW,SAAQ,0BAExC,GACF,GACF;AAAA,YAEA,4CAAC,2BACC,sDAAC,sBAAO,OAAP,EAAa,SAAO,MACnB,sDAAC,yBAAO,UAAS,YAAW,KAAI,MAAK,OAAM,MAAK,MAAK,MAAK,UAAQ,MAAC,MAAM,uBAAG,GAC9E,GACF;AAAA;AAAA;AAAA,QA5CI;AAAA,MA6CN;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/FormsDemo.js

@@ -37,15 +37,15 @@ function FormsDemo(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_tamagui.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__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H4, { children: status[0].toUpperCase() + status.slice(1) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Form.Trigger, { asChild: true, disabled: status !== "off", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { icon: status === "submitting" ? () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Spinner, {}) : void 0, children: "Submit" }) })

package/dist/cjs/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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBI;AAhBJ,mBAAoC;AACpC,qBAAsE;AAE/D,SAAS,UAAU,OAA6B;AACrD,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAA6C,KAAK;AAE9E,8BAAU,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,oDAAC,qBAAI,iBAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC,GAAE;AAAA,QAE/C,4CAAC,oBAAK,SAAL,EAAa,SAAO,MAAC,UAAU,WAAW,OACzC,sDAAC,yBAAO,MAAM,WAAW,eAAe,MAAM,4CAAC,0BAAQ,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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBI;AAhBJ,mBAAoC;AACpC,qBAAsE;AAE/D,SAAS,UAAU,OAA6B;AACrD,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAA6C,KAAK;AAE9E,8BAAU,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,oDAAC,qBAAI,iBAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC,GAAE;AAAA,QAE/C,4CAAC,oBAAK,SAAL,EAAa,SAAO,MAAC,UAAU,WAAW,OACzC,sDAAC,yBAAO,MAAM,WAAW,eAAe,MAAM,4CAAC,0BAAQ,IAAK,QAAW,oBAEvE,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/cjs/GroupDemo.js

@@ -25,7 +25,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_lucide_icons = require("@tamagui/lucide-icons");
 var import_tamagui = require("tamagui");
 function GroupDemo() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { p: "$3", space: "$2", ai: "center", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { padding: "$3", space: "$2", alignItems: "center", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Group, { axis: "horizontal", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Group.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: "First" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Group.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: "Second" }) }),

package/dist/cjs/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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMM;AANN,0BAAkC;AAClC,qBAA2E;AAEpE,SAAS,YAAY;AAC1B,SACE,6CAAC,yBAAO,GAAE,MAAK,OAAM,MAAK,IAAG,UAC3B;AAAA,iDAAC,wBAAM,MAAK,cACV;AAAA,kDAAC,qBAAM,MAAN,EACC,sDAAC,yBAAO,mBAAK,GACf;AAAA,MACA,4CAAC,qBAAM,MAAN,EACC,sDAAC,yBAAO,oBAAM,GAChB;AAAA,MACA,4CAAC,qBAAM,MAAN,EACC,sDAAC,yBAAO,mBAAK,GACf;AAAA,OACF;AAAA,IAGA,6CAAC,yBAAO,MAAK,MAAK,OAAO,EAAE,MAAM,KAAK,GACpC;AAAA,kDAAC,sBAAO,MAAP,EACC,sDAAC,yBAAO,MAAK,MAAK,MAAM,8BAAU,mBAElC,GACF;AAAA,MACA,4CAAC,sBAAO,MAAP,EACC,sDAAC,yBAAO,MAAK,MAAK,MAAM,6BAAS,oBAEjC,GACF;AAAA,OACF;AAAA,IAGA,6CAAC,yBAAO,WAAW,4CAAC,4BAAU,GAC5B;AAAA,kDAAC,sBAAO,MAAP,EACC,sDAAC,2BAAS,OAAM,SAAQ,GAC1B;AAAA,MACA,4CAAC,sBAAO,MAAP,EACC,sDAAC,2BAAS,OAAM,UAAS,UAAS,mBAAkB,GACtD;AAAA,MACA,4CAAC,sBAAO,MAAP,EACC,sDAAC,2BAAS,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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMM;AANN,0BAAkC;AAClC,qBAA2E;AAEpE,SAAS,YAAY;AAC1B,SACE,6CAAC,yBAAO,SAAQ,MAAK,OAAM,MAAK,YAAW,UACzC;AAAA,iDAAC,wBAAM,MAAK,cACV;AAAA,kDAAC,qBAAM,MAAN,EACC,sDAAC,yBAAO,mBAAK,GACf;AAAA,MACA,4CAAC,qBAAM,MAAN,EACC,sDAAC,yBAAO,oBAAM,GAChB;AAAA,MACA,4CAAC,qBAAM,MAAN,EACC,sDAAC,yBAAO,mBAAK,GACf;AAAA,OACF;AAAA,IAGA,6CAAC,yBAAO,MAAK,MAAK,OAAO,EAAE,MAAM,KAAK,GACpC;AAAA,kDAAC,sBAAO,MAAP,EACC,sDAAC,yBAAO,MAAK,MAAK,MAAM,8BAAU,mBAElC,GACF;AAAA,MACA,4CAAC,sBAAO,MAAP,EACC,sDAAC,yBAAO,MAAK,MAAK,MAAM,6BAAS,oBAEjC,GACF;AAAA,OACF;AAAA,IAGA,6CAAC,yBAAO,WAAW,4CAAC,4BAAU,GAC5B;AAAA,kDAAC,sBAAO,MAAP,EACC,sDAAC,2BAAS,OAAM,SAAQ,GAC1B;AAAA,MACA,4CAAC,sBAAO,MAAP,EACC,sDAAC,2BAAS,OAAM,UAAS,UAAS,mBAAkB,GACtD;AAAA,MACA,4CAAC,sBAAO,MAAP,EACC,sDAAC,2BAAS,mBAAK,GACjB;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/HeadingsDemo.js

@@ -24,7 +24,7 @@ module.exports = __toCommonJS(HeadingsDemo_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_tamagui = require("tamagui");
 function HeadingsDemo() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { als: "center", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { alignSelf: "center", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H1, { children: "Heading 1" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H2, { children: "Heading 2" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H3, { children: "Heading 3" }),

package/dist/cjs/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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKI;AAJJ,qBAA+C;AAExC,SAAS,eAAe;AAC7B,SACE,6CAAC,yBAAO,KAAI,UACV;AAAA,gDAAC,qBAAG,uBAAS;AAAA,IACb,4CAAC,qBAAG,uBAAS;AAAA,IACb,4CAAC,qBAAG,uBAAS;AAAA,IACb,4CAAC,qBAAG,uBAAS;AAAA,IACb,4CAAC,qBAAG,uBAAS;AAAA,IACb,4CAAC,qBAAG,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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKI;AAJJ,qBAA+C;AAExC,SAAS,eAAe;AAC7B,SACE,6CAAC,yBAAO,WAAU,UAChB;AAAA,gDAAC,qBAAG,uBAAS;AAAA,IACb,4CAAC,qBAAG,uBAAS;AAAA,IACb,4CAAC,qBAAG,uBAAS;AAAA,IACb,4CAAC,qBAAG,uBAAS;AAAA,IACb,4CAAC,qBAAG,uBAAS;AAAA,IACb,4CAAC,qBAAG,uBAAS;AAAA,KACf;AAEJ;",
   "names": []
 }

package/dist/cjs/InputsDemo.js

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

package/dist/cjs/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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAAoE;AAE7D,SAAS,aAAa;AAC3B,SACE,6CAAC,yBAAO,GAAG,KAAK,KAAK,KAAK,UAAS,UAAS,OAAM,MAAK,GAAE,MAAK,GAAE,MAC9D;AAAA,gDAAC,aAAU,MAAK,MAAK;AAAA,IACrB,4CAAC,aAAU,MAAK,MAAK;AAAA,IACrB,4CAAC,aAAU,MAAK,MAAK;AAAA,IACrB,4CAAC,2BAAS,KAAK,KAAK,aAAY,yBAAwB,eAAe,GAAG;AAAA,KAC5E;AAEJ;AAEA,SAAS,UAAU,OAA6B;AAC9C,SACE,6CAAC,yBAAO,IAAG,UAAS,OAAM,MACxB;AAAA,gDAAC,wBAAM,GAAG,GAAG,MAAM,MAAM,MAAM,aAAa,QAAQ,MAAM,WAAW;AAAA,IACrE,4CAAC,yBAAO,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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAAoE;AAE7D,SAAS,aAAa;AAC3B,SACE,6CAAC,yBAAO,OAAO,KAAK,KAAK,KAAK,UAAS,UAAS,OAAM,MAAK,QAAO,MAAK,SAAQ,MAC7E;AAAA,gDAAC,aAAU,MAAK,MAAK;AAAA,IACrB,4CAAC,aAAU,MAAK,MAAK;AAAA,IACrB,4CAAC,aAAU,MAAK,MAAK;AAAA,IACrB,4CAAC,2BAAS,WAAW,KAAK,aAAY,yBAAwB,eAAe,GAAG;AAAA,KAClF;AAEJ;AAEA,SAAS,UAAU,OAA6B;AAC9C,SACE,6CAAC,yBAAO,YAAW,UAAS,OAAM,MAChC;AAAA,gDAAC,wBAAM,MAAM,GAAG,MAAM,MAAM,MAAM,aAAa,QAAQ,MAAM,WAAW;AAAA,IACxE,4CAAC,yBAAO,MAAM,MAAM,MAAM,gBAAE;AAAA,KAC9B;AAEJ;",
   "names": []
 }

package/dist/cjs/LabelDemo.js

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

package/dist/cjs/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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKM;AALN,qBAAqD;AAE9C,SAAS,YAAY;AAC1B,SACE,6CAAC,yBAAO,GAAE,MAAK,KAAK,KAAK,OAAM,MAC7B;AAAA,iDAAC,yBAAO,IAAG,UAAS,OAAM,MACxB;AAAA,kDAAC,wBAAM,GAAG,IAAI,SAAQ,QAAO,kBAE7B;AAAA,MACA,4CAAC,wBAAM,GAAG,GAAG,IAAG,QAAO,cAAa,gBAAe;AAAA,OACrD;AAAA,IAEA,6CAAC,yBAAO,IAAG,UAAS,OAAM,MACxB;AAAA,kDAAC,wBAAM,GAAG,IAAI,SAAQ,UAAS,2BAE/B;AAAA,MACA,4CAAC,yBAAO,IAAG,UACT,sDAAC,sBAAO,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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKM;AALN,qBAAqD;AAE9C,SAAS,YAAY;AAC1B,SACE,6CAAC,yBAAO,SAAQ,MAAK,UAAU,KAAK,OAAM,MACxC;AAAA,iDAAC,yBAAO,YAAW,UAAS,OAAM,MAChC;AAAA,kDAAC,wBAAM,OAAO,IAAI,SAAQ,QAAO,kBAEjC;AAAA,MACA,4CAAC,wBAAM,MAAM,GAAG,IAAG,QAAO,cAAa,gBAAe;AAAA,OACxD;AAAA,IAEA,6CAAC,yBAAO,YAAW,UAAS,OAAM,MAChC;AAAA,kDAAC,wBAAM,OAAO,IAAI,SAAQ,UAAS,2BAEnC;AAAA,MACA,4CAAC,yBAAO,IAAG,UACT,sDAAC,sBAAO,OAAP,EAAa,WAAU,SAAQ,GAClC;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/LinearGradientDemo.js

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

package/dist/cjs/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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKI;AALJ,qBAAuB;AACvB,6BAA+B;AAExB,SAAS,qBAAqB;AACnC,SACE,6CAAC,yBAAO,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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKI;AALJ,qBAAuB;AACvB,6BAA+B;AAExB,SAAS,qBAAqB;AACnC,SACE,6CAAC,yBAAO,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/cjs/ListItemDemo.js

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

package/dist/cjs/ListItemDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ListItemDemo.tsx"],
-  "sourcesContent": ["import { ChevronRight, Cloud, Moon, Star, Sun } from '@tamagui/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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKI;AALJ,0BAAqD;AACrD,qBAAoD;AAE7C,SAAS,eAAe;AAC7B,SACE,6CAAC,yBAAO,KAAK,EAAE,eAAe,SAAS,GAAG,IAAG,MAAK,OAAK,MACrD;AAAA,gDAAC,iBAAc;AAAA,IACf,4CAAC,iBAAc;AAAA,KACjB;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,6CAAC,yBAAO,KAAI,UAAS,UAAQ,MAAC,GAAG,KAAK,MAAK,MACzC;AAAA,gDAAC,sBAAO,MAAP,EACC,sDAAC,2BAAS,YAAU,MAAC,MAAM,0BAAM,OAAM,QAAO,UAAS,YAAW,GACpE;AAAA,IACA,4CAAC,sBAAO,MAAP,EACC,sDAAC,2BAAS,YAAU,MAAC,MAAM,0BAAM,kBAEjC,GACF;AAAA,IACA,4CAAC,sBAAO,MAAP,EACC,sDAAC,2BAAS,YAAU,MAAC,MAAM,yBAAK,iBAEhC,GACF;AAAA,IACA,4CAAC,sBAAO,MAAP,EACC,sDAAC,2BAAS,YAAU,MAAC,MAAM,2BAAO,mBAElC,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,6CAAC,yBAAO,KAAI,UAAS,UAAQ,MAAC,GAAG,KAAK,MAAK,MAAK,WAAW,4CAAC,4BAAU,GACpE;AAAA,gDAAC,sBAAO,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,4CAAC,sBAAO,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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKI;AALJ,0BAAqD;AACrD,qBAAoD;AAE7C,SAAS,eAAe;AAC7B,SACE,6CAAC,yBAAO,KAAK,EAAE,eAAe,SAAS,GAAG,mBAAkB,MAAK,OAAK,MACpE;AAAA,gDAAC,iBAAc;AAAA,IACf,4CAAC,iBAAc;AAAA,KACjB;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,6CAAC,yBAAO,WAAU,UAAS,UAAQ,MAAC,OAAO,KAAK,MAAK,MACnD;AAAA,gDAAC,sBAAO,MAAP,EACC,sDAAC,2BAAS,YAAU,MAAC,MAAM,0BAAM,OAAM,QAAO,UAAS,YAAW,GACpE;AAAA,IACA,4CAAC,sBAAO,MAAP,EACC,sDAAC,2BAAS,YAAU,MAAC,MAAM,0BAAM,kBAEjC,GACF;AAAA,IACA,4CAAC,sBAAO,MAAP,EACC,sDAAC,2BAAS,YAAU,MAAC,MAAM,yBAAK,iBAEhC,GACF;AAAA,IACA,4CAAC,sBAAO,MAAP,EACC,sDAAC,2BAAS,YAAU,MAAC,MAAM,2BAAO,mBAElC,GACF;AAAA,KACF;AAEJ;AAEA,SAAS,gBAAgB;AACvB,SACE,6CAAC,yBAAO,WAAU,UAAS,UAAQ,MAAC,OAAO,KAAK,MAAK,MAAK,WAAW,4CAAC,4BAAU,GAC9E;AAAA,gDAAC,sBAAO,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,4CAAC,sBAAO,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/cjs/LucideIconsDemo.js

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

package/dist/cjs/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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBQ;AArBR,kBAA6B;AAC7B,mBAAkC;AAClC,0BAA2B;AAC3B,qBAAyE;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,QAAI,uBAAS,EAAE;AAC1C,QAAM,aAAS,iCAAiB,WAAW,GAAG;AAE9C,QAAM,OAAO;AAEb,QAAM,gBAAY,sBAAQ,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,6CAAC,yBAAO,GAAG,MAAM,IAAG,UAAS,IAAG,UAC9B;AAAA,oDAAC,QAAK,MAAM,OAAO,MAAM;AAAA,QACzB,4CAAC,yBAAO;AAAA,QACR,4CAAC,4BAAU,MAAK,MAAK,GAAG,KACrB,gBACH;AAAA,WAL4C,IAM9C;AAAA,IAEJ,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,6CAAC,yBAAO,KAAI,WAAU,GAAE,MAAK,IAAG,MAAK,OAAK,MACxC;AAAA,gDAAC,wBAAM,OAAO,WAAW,cAAc,WAAW,aAAY,aAAY;AAAA,IAE1E,4CAAC,yBAAO,GAAG,KACT,sDAAC,kCACC,sDAAC,uBAAK,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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBQ;AArBR,kBAA6B;AAC7B,mBAAkC;AAClC,0BAA2B;AAC3B,qBAAyE;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,QAAI,uBAAS,EAAE;AAC1C,QAAM,aAAS,iCAAiB,WAAW,GAAG;AAE9C,QAAM,OAAO;AAEb,QAAM,gBAAY,sBAAQ,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,6CAAC,yBAAO,QAAQ,MAAM,YAAW,UAAS,gBAAe,UACvD;AAAA,oDAAC,QAAK,MAAM,OAAO,MAAM;AAAA,QACzB,4CAAC,yBAAO;AAAA,QACR,4CAAC,4BAAU,MAAK,MAAK,GAAG,KACrB,gBACH;AAAA,WALqE,IAMvE;AAAA,IAEJ,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,6CAAC,yBAAO,WAAU,WAAU,SAAQ,MAAK,eAAc,MAAK,OAAK,MAC/D;AAAA,gDAAC,wBAAM,OAAO,WAAW,cAAc,WAAW,aAAY,aAAY;AAAA,IAE1E,4CAAC,yBAAO,QAAQ,KACd,sDAAC,kCACC,sDAAC,uBAAK,cAAc,MAAO,qBAAU,GACvC,GACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/PopoverDemo.js

@@ -26,7 +26,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_lucide_icons = require("@tamagui/lucide-icons");
 var import_tamagui = require("tamagui");
 function PopoverDemo() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: "$2", f: 1, jc: "center", ai: "center", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: "$2", flex: 1, justifyContent: "center", alignItems: "center", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, { placement: "left", Icon: import_lucide_icons.ChevronLeft, Name: "left-popover" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, { placement: "bottom", Icon: import_lucide_icons.ChevronDown, Name: "bottom-popover" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, { placement: "top", Icon: import_lucide_icons.ChevronUp, Name: "top-popover" }),
@@ -47,13 +47,13 @@ function Demo({
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_tamagui.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",
           {
@@ -64,7 +64,7 @@ function Demo({
         ],
         elevate: true,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Arrow, { bw: 1, boc: "$borderColor" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Popover.Arrow, { borderWidth: 1, borderColor: "$borderColor" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YGroup, { space: "$3", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: "$3", children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, { size: "$3", htmlFor: Name, children: "Name" }),

package/dist/cjs/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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcI;AAdJ,0BAAkE;AAClE,qBASO;AAEA,SAAS,cAAc;AAC5B,SACE,6CAAC,yBAAO,OAAM,MAAK,GAAG,GAAG,IAAG,UAAS,IAAG,UACtC;AAAA,gDAAC,QAAK,WAAU,QAAO,MAAM,iCAAa,MAAK,gBAAe;AAAA,IAC9D,4CAAC,QAAK,WAAU,UAAS,MAAM,iCAAa,MAAK,kBAAiB;AAAA,IAClE,4CAAC,QAAK,WAAU,OAAM,MAAM,+BAAW,MAAK,eAAc;AAAA,IAC1D,4CAAC,QAAK,WAAU,SAAQ,MAAM,kCAAc,MAAK,iBAAgB;AAAA,KACnE;AAEJ;AAEO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,SACE,6CAAC,0BAAQ,MAAK,MAAM,GAAG,OACrB;AAAA,gDAAC,uBAAQ,SAAR,EAAgB,SAAO,MACtB,sDAAC,yBAAO,MAAM,MAAM,GACtB;AAAA,IAEA,4CAAC,wBAAM,MAAK,MAAK,UAAS,OACxB,uDAAC,uBAAQ,OAAR,EAAc,OAAK,MAAC,uBAAqB,MACxC;AAAA,kDAAC,uBAAQ,MAAM,OAAd,EAAoB,SAAQ,MAC3B,sDAAC,qBAAM,UAAN,EAAe,GAClB;AAAA,MACA,4CAAC,uBAAQ,MAAM,SAAd,EAAsB;AAAA,OACzB,GACF;AAAA,IAEA;AAAA,MAAC,uBAAQ;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,sDAAC,uBAAQ,OAAR,EAAc,IAAI,GAAG,KAAI,gBAAe;AAAA,UAEzC,6CAAC,yBAAO,OAAM,MACZ;AAAA,wDAAC,sBAAO,MAAP,EACC,uDAAC,yBAAO,OAAM,MACZ;AAAA,0DAAC,wBAAM,MAAK,MAAK,SAAS,MAAM,kBAEhC;AAAA,cACA,4CAAC,wBAAM,MAAK,MAAK,IAAI,MAAM;AAAA,eAC7B,GACF;AAAA,YACA,4CAAC,sBAAO,MAAP,EACC,sDAAC,uBAAQ,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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcI;AAdJ,0BAAkE;AAClE,qBASO;AAEA,SAAS,cAAc;AAC5B,SACE,6CAAC,yBAAO,OAAM,MAAK,MAAM,GAAG,gBAAe,UAAS,YAAW,UAC7D;AAAA,gDAAC,QAAK,WAAU,QAAO,MAAM,iCAAa,MAAK,gBAAe;AAAA,IAC9D,4CAAC,QAAK,WAAU,UAAS,MAAM,iCAAa,MAAK,kBAAiB;AAAA,IAClE,4CAAC,QAAK,WAAU,OAAM,MAAM,+BAAW,MAAK,eAAc;AAAA,IAC1D,4CAAC,QAAK,WAAU,SAAQ,MAAM,kCAAc,MAAK,iBAAgB;AAAA,KACnE;AAEJ;AAEO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,SACE,6CAAC,0BAAQ,MAAK,MAAM,GAAG,OACrB;AAAA,gDAAC,uBAAQ,SAAR,EAAgB,SAAO,MACtB,sDAAC,yBAAO,MAAM,MAAM,GACtB;AAAA,IAEA,4CAAC,wBAAM,MAAK,MAAK,UAAS,OACxB,uDAAC,uBAAQ,OAAR,EAAc,OAAK,MAAC,uBAAqB,MACxC;AAAA,kDAAC,uBAAQ,MAAM,OAAd,EAAoB,SAAQ,MAC3B,sDAAC,qBAAM,UAAN,EAAe,GAClB;AAAA,MACA,4CAAC,uBAAQ,MAAM,SAAd,EAAsB;AAAA,OACzB,GACF;AAAA,IAEA;AAAA,MAAC,uBAAQ;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,sDAAC,uBAAQ,OAAR,EAAc,aAAa,GAAG,aAAY,gBAAe;AAAA,UAE1D,6CAAC,yBAAO,OAAM,MACZ;AAAA,wDAAC,sBAAO,MAAP,EACC,uDAAC,yBAAO,OAAM,MACZ;AAAA,0DAAC,wBAAM,MAAK,MAAK,SAAS,MAAM,kBAEhC;AAAA,cACA,4CAAC,wBAAM,MAAK,MAAK,IAAI,MAAM;AAAA,eAC7B,GACF;AAAA,YACA,4CAAC,sBAAO,MAAP,EACC,sDAAC,uBAAQ,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/cjs/ProgressDemo.js

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

package/dist/cjs/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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBI;AAhBJ,mBAAoC;AACpC,qBAAgF;AAEzE,SAAS,eAAe;AAC7B,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,CAAC;AAClC,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,EAAE;AAC3C,QAAM,WAAW,IAAI;AAErB,8BAAU,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,4EACE;AAAA,iDAAC,yBAAO,GAAG,IAAI,IAAG,UAAS,OAAK,MAC9B;AAAA,mDAAC,4BAAU,GAAG,IAAI,GAAG,KAAK;AAAA;AAAA,QACjB;AAAA,SACT;AAAA,MACA,4CAAC,2BAAS,MAAM,UAAU,OAAO,UAC/B,sDAAC,wBAAS,WAAT,EAAmB,WAAU,UAAS,GACzC;AAAA,OACF;AAAA,IAEA,6CAAC,yBAAO,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,wDAAC,sBAAO,OAAP,EAAa,IAAI,GAAG,KAAI,WACvB,sDAAC,sBAAO,aAAP,EAAmB,GACtB;AAAA,YACA,4CAAC,sBAAO,OAAP,EAAa,UAAQ,MAAC,OAAO,GAAG;AAAA;AAAA;AAAA,MACnC;AAAA,MAEA,4CAAC,yBAAO,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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBI;AAhBJ,mBAAoC;AACpC,qBAAgF;AAEzE,SAAS,eAAe;AAC7B,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,CAAC;AAClC,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,EAAE;AAC3C,QAAM,WAAW,IAAI;AAErB,8BAAU,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,4EACE;AAAA,iDAAC,yBAAO,QAAQ,IAAI,YAAW,UAAS,OAAK,MAC3C;AAAA,mDAAC,4BAAU,QAAQ,IAAI,SAAS,KAAK;AAAA;AAAA,QAC5B;AAAA,SACT;AAAA,MACA,4CAAC,2BAAS,MAAM,UAAU,OAAO,UAC/B,sDAAC,wBAAS,WAAT,EAAmB,WAAU,UAAS,GACzC;AAAA,OACF;AAAA,IAEA,6CAAC,yBAAO,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,wDAAC,sBAAO,OAAP,EAAa,aAAa,GAAG,aAAY,WACxC,sDAAC,sBAAO,aAAP,EAAmB,GACtB;AAAA,YACA,4CAAC,sBAAO,OAAP,EAAa,UAAQ,MAAC,OAAO,GAAG;AAAA;AAAA;AAAA,MACnC;AAAA,MAEA,4CAAC,yBAAO,MAAK,MAAK,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG,GAAG,kBAE3E;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/RadioGroupDemo.js

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

package/dist/cjs/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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKM;AALN,qBAA8E;AAEvE,SAAS,iBAAiB;AAC/B,SACE,4CAAC,6BAAW,cAAa,KAAI,MAAK,QAChC,uDAAC,yBAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,gDAAC,2BAAwB,MAAK,MAAK,OAAM,KAAI,OAAM,gBAAe;AAAA,IAClE,4CAAC,2BAAwB,MAAK,MAAK,OAAM,KAAI,OAAM,eAAc;AAAA,IACjE,4CAAC,2BAAwB,MAAK,MAAK,OAAM,KAAI,OAAM,gBAAe;AAAA,KACpE,GACF;AAEJ;AAEA,SAAS,wBAAwB,OAI9B;AACD,QAAM,KAAK,cAAc,MAAM;AAC/B,SACE,6CAAC,yBAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,gDAAC,0BAAW,MAAX,EAAgB,OAAO,MAAM,OAAO,IAAQ,MAAM,MAAM,MACvD,sDAAC,0BAAW,WAAX,EAAqB,GACxB;AAAA,IAEA,4CAAC,wBAAM,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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKM;AALN,qBAA8E;AAEvE,SAAS,iBAAiB;AAC/B,SACE,4CAAC,6BAAW,cAAa,KAAI,MAAK,QAChC,uDAAC,yBAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA,gDAAC,2BAAwB,MAAK,MAAK,OAAM,KAAI,OAAM,gBAAe;AAAA,IAClE,4CAAC,2BAAwB,MAAK,MAAK,OAAM,KAAI,OAAM,eAAc;AAAA,IACjE,4CAAC,2BAAwB,MAAK,MAAK,OAAM,KAAI,OAAM,gBAAe;AAAA,KACpE,GACF;AAEJ;AAEA,SAAS,wBAAwB,OAI9B;AACD,QAAM,KAAK,cAAc,MAAM;AAC/B,SACE,6CAAC,yBAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA,gDAAC,0BAAW,MAAX,EAAgB,OAAO,MAAM,OAAO,IAAQ,MAAM,MAAM,MACvD,sDAAC,0BAAW,WAAX,EAAqB,GACxB;AAAA,IAEA,4CAAC,wBAAM,MAAM,MAAM,MAAM,SAAS,IAC/B,gBAAM,OACT;AAAA,KACF;AAEJ;",
   "names": []
 }