@tamagui/demos 1.11.2 → 1.12.0

package/dist/jsx/ColorsDemo.js

@@ -12,7 +12,7 @@ const colorGroups = ["orange", "yellow", "green", "blue", "purple", "pink", "red
 function ColorsDemo() {
   const colors = getTokens({ prefixed: false }).color;
   const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)];
-  return <YStack mt="$4" space="$8">
+  return <YStack marginTop="$4" space="$8">
     <ColorsRow title="Light" colors={colorsLight} />
     <Separator />
     <ColorsRow title="Dark" colors={colorsDark} />
@@ -21,18 +21,18 @@ function ColorsDemo() {
 function ColorsRow({ title, colors }) {
   return <YStack space $sm={{ space: "$2" }}>
     <H2 size="$2">{title}</H2>
-    <XStack space als="center">
+    <XStack space alignSelf="center">
       <YStack space $sm={{ space: "$2" }} als="center">
         {colors.map((group, index) => {
           return <XStack space="$2" key={index}>{group.map((color) => {
             return <Square
               key={`${color.key}${index}`}
-              br="$2"
+              borderRadius="$2"
               size="$4"
-              h="$4"
-              bw={1}
-              bc={getVariableValue(color)}
-              boc="$color7"
+              height="$4"
+              borderWidth={1}
+              backgroundColor={getVariableValue(color)}
+              borderColor="$color7"
               $sm={{
                 size: "$2"
               }}
@@ -42,31 +42,31 @@ function ColorsRow({ title, colors }) {
             />;
           })}</XStack>;
         })}
-        <XStack space="$2" als="center">{new Array(13).fill(0).slice(1).map((_, index) => {
+        <XStack space="$2" alignSelf="center">{new Array(13).fill(0).slice(1).map((_, index) => {
           return <Paragraph
-            col="$color10"
-            ta="center"
-            w="$4"
+            color="$color10"
+            textAlign="center"
+            width="$4"
             $sm={{
-              w: "$2"
+              width: "$2"
             }}
             $xs={{
-              w: "$1"
+              width: "$1"
             }}
             key={index}
           >{index}</Paragraph>;
         })}</XStack>
       </YStack>
-      <YStack space="$4" mt="$2">{colorGroups.map((name) => <Paragraph
+      <YStack space="$4" marginTop="$2">{colorGroups.map((name) => <Paragraph
         theme={name}
-        col="$color10"
-        h="$4"
+        color="$color10"
+        height="$4"
         rotate="-10deg"
         $sm={{
-          h: "$2"
+          height: "$2"
         }}
         $xs={{
-          h: "$1"
+          height: "$1"
         }}
         key={name}
       >{name}</Paragraph>)}</YStack>

package/dist/jsx/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": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,cAAc,CAAC,UAAU,UAAU,SAAS,QAAQ,UAAU,QAAQ,KAAK;AAE1E,SAAS,aAAa;AAC3B,QAAM,SAAS,UAAU,EAAE,UAAU,MAAM,CAAC,EAAE;AAC9C,QAAM,CAAC,aAAa,UAAU,IAAI,CAAC,UAAU,MAAM,GAAG,UAAU,QAAQ,IAAI,CAAC;AAE7E,SACE,CAAC,OAAO,GAAG,KAAK,MAAM;AAAA,IACpB,CAAC,UAAU,MAAM,QAAQ,QAAQ,aAAa;AAAA,IAC9C,CAAC,UAAU;AAAA,IACX,CAAC,UAAU,MAAM,OAAO,QAAQ,YAAY;AAAA,EAC9C,EAJC;AAML;AAEA,SAAS,UAAU,EAAE,OAAO,OAAO,GAA4C;AAC7E,SACE,CAAC,OAAO,MAAM,KAAK,EAAE,OAAO,KAAK;AAAA,IAC/B,CAAC,GAAG,KAAK,MAAM,MAAM,EAApB;AAAA,IAED,CAAC,OAAO,MAAM,IAAI;AAAA,MAChB,CAAC,OAAO,MAAM,KAAK,EAAE,OAAO,KAAK,GAAG,IAAI;AAAA,SACrC,OAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBACE,CAAC,OAAO,MAAM,KAAK,KAAK,QACrB,MAAM,IAAI,CAAC,UAAU;AACpB,mBACE,CAAC;AAAA,cACC,KAAK,GAAG,MAAM,MAAM;AAAA,cACpB,GAAG;AAAA,cACH,KAAK;AAAA,cACL,EAAE;AAAA,cACF,IAAI;AAAA,cACJ,IAAI,iBAAiB,KAAK;AAAA,cAC1B,IAAI;AAAA,cACJ,KAAK;AAAA,gBACH,MAAM;AAAA,cACR;AAAA,cACA,KAAK;AAAA,gBACH,MAAM;AAAA,cACR;AAAA,YACF;AAAA,UAEJ,CAAC,EACH,EApBC;AAAA,QAsBL,CAAC;AAAA,QAED,CAAC,OAAO,MAAM,KAAK,IAAI,UACpB,IAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAAC,GAAG,UAAU;AACjB,iBACE,CAAC;AAAA,YACC,IAAI;AAAA,YACJ,GAAG;AAAA,YACH,EAAE;AAAA,YACF,KAAK;AAAA,cACH,GAAG;AAAA,YACL;AAAA,YACA,KAAK;AAAA,cACH,GAAG;AAAA,YACL;AAAA,YACA,KAAK;AAAA,YAEJ,MACH,EAbC;AAAA,QAeL,CAAC,EACL,EAtBC;AAAA,MAuBH,EAlDC;AAAA,MAoDD,CAAC,OAAO,MAAM,KAAK,GAAG,MACnB,YAAY,IAAI,CAAC,SAChB,CAAC;AAAA,QACC,OAAO;AAAA,QACP,IAAI;AAAA,QACJ,EAAE;AAAA,QACF,OAAO;AAAA,QACP,KAAK;AAAA,UACH,GAAG;AAAA,QACL;AAAA,QACA,KAAK;AAAA,UACH,GAAG;AAAA,QACL;AAAA,QACA,KAAK;AAAA,QAEJ,KACH,EAdC,UAeF,EACH,EAlBC;AAAA,IAmBH,EAxEC;AAAA,EAyEH,EA5EC;AA8EL;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": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,cAAc,CAAC,UAAU,UAAU,SAAS,QAAQ,UAAU,QAAQ,KAAK;AAE1E,SAAS,aAAa;AAC3B,QAAM,SAAS,UAAU,EAAE,UAAU,MAAM,CAAC,EAAE;AAC9C,QAAM,CAAC,aAAa,UAAU,IAAI,CAAC,UAAU,MAAM,GAAG,UAAU,QAAQ,IAAI,CAAC;AAE7E,SACE,CAAC,OAAO,UAAU,KAAK,MAAM;AAAA,IAC3B,CAAC,UAAU,MAAM,QAAQ,QAAQ,aAAa;AAAA,IAC9C,CAAC,UAAU;AAAA,IACX,CAAC,UAAU,MAAM,OAAO,QAAQ,YAAY;AAAA,EAC9C,EAJC;AAML;AAEA,SAAS,UAAU,EAAE,OAAO,OAAO,GAA4C;AAC7E,SACE,CAAC,OAAO,MAAM,KAAK,EAAE,OAAO,KAAK;AAAA,IAC/B,CAAC,GAAG,KAAK,MAAM,MAAM,EAApB;AAAA,IAED,CAAC,OAAO,MAAM,UAAU;AAAA,MACtB,CAAC,OAAO,MAAM,KAAK,EAAE,OAAO,KAAK,GAAG,IAAI;AAAA,SACrC,OAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBACE,CAAC,OAAO,MAAM,KAAK,KAAK,QACrB,MAAM,IAAI,CAAC,UAAU;AACpB,mBACE,CAAC;AAAA,cACC,KAAK,GAAG,MAAM,MAAM;AAAA,cACpB,aAAa;AAAA,cACb,KAAK;AAAA,cACL,OAAO;AAAA,cACP,aAAa;AAAA,cACb,iBAAiB,iBAAiB,KAAK;AAAA,cACvC,YAAY;AAAA,cACZ,KAAK;AAAA,gBACH,MAAM;AAAA,cACR;AAAA,cACA,KAAK;AAAA,gBACH,MAAM;AAAA,cACR;AAAA,YACF;AAAA,UAEJ,CAAC,EACH,EApBC;AAAA,QAsBL,CAAC;AAAA,QAED,CAAC,OAAO,MAAM,KAAK,UAAU,UAC1B,IAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAAC,GAAG,UAAU;AACjB,iBACE,CAAC;AAAA,YACC,MAAM;AAAA,YACN,UAAU;AAAA,YACV,MAAM;AAAA,YACN,KAAK;AAAA,cACJ,OAAM;AAAA,YACP;AAAA,YACA,KAAK;AAAA,cACH,OAAO;AAAA,YACT;AAAA,YACA,KAAK;AAAA,YAEJ,MACH,EAbC;AAAA,QAeL,CAAC,EACL,EAtBC;AAAA,MAuBH,EAlDC;AAAA,MAoDD,CAAC,OAAO,MAAM,KAAK,UAAU,MAC1B,YAAY,IAAI,CAAC,SAChB,CAAC;AAAA,QACC,OAAO;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,QACP,KAAK;AAAA,UACH,QAAQ;AAAA,QACV;AAAA,QACA,KAAK;AAAA,UACH,QAAQ;AAAA,QACV;AAAA,QACA,KAAK;AAAA,QAEJ,KACH,EAdC,UAeF,EACH,EAlBC;AAAA,IAmBH,EAxEC;AAAA,EAyEH,EA5EC;AA8EL;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/jsx/ColorsDemo.mjs

@@ -12,7 +12,7 @@ const colorGroups = ["orange", "yellow", "green", "blue", "purple", "pink", "red
 function ColorsDemo() {
   const colors = getTokens({ prefixed: false }).color;
   const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)];
-  return <YStack mt="$4" space="$8">
+  return <YStack marginTop="$4" space="$8">
     <ColorsRow title="Light" colors={colorsLight} />
     <Separator />
     <ColorsRow title="Dark" colors={colorsDark} />
@@ -21,18 +21,18 @@ function ColorsDemo() {
 function ColorsRow({ title, colors }) {
   return <YStack space $sm={{ space: "$2" }}>
     <H2 size="$2">{title}</H2>
-    <XStack space als="center">
+    <XStack space alignSelf="center">
       <YStack space $sm={{ space: "$2" }} als="center">
         {colors.map((group, index) => {
           return <XStack space="$2" key={index}>{group.map((color) => {
             return <Square
               key={`${color.key}${index}`}
-              br="$2"
+              borderRadius="$2"
               size="$4"
-              h="$4"
-              bw={1}
-              bc={getVariableValue(color)}
-              boc="$color7"
+              height="$4"
+              borderWidth={1}
+              backgroundColor={getVariableValue(color)}
+              borderColor="$color7"
               $sm={{
                 size: "$2"
               }}
@@ -42,31 +42,31 @@ function ColorsRow({ title, colors }) {
             />;
           })}</XStack>;
         })}
-        <XStack space="$2" als="center">{new Array(13).fill(0).slice(1).map((_, index) => {
+        <XStack space="$2" alignSelf="center">{new Array(13).fill(0).slice(1).map((_, index) => {
           return <Paragraph
-            col="$color10"
-            ta="center"
-            w="$4"
+            color="$color10"
+            textAlign="center"
+            width="$4"
             $sm={{
-              w: "$2"
+              width: "$2"
             }}
             $xs={{
-              w: "$1"
+              width: "$1"
             }}
             key={index}
           >{index}</Paragraph>;
         })}</XStack>
       </YStack>
-      <YStack space="$4" mt="$2">{colorGroups.map((name) => <Paragraph
+      <YStack space="$4" marginTop="$2">{colorGroups.map((name) => <Paragraph
         theme={name}
-        col="$color10"
-        h="$4"
+        color="$color10"
+        height="$4"
         rotate="-10deg"
         $sm={{
-          h: "$2"
+          height: "$2"
         }}
         $xs={{
-          h: "$1"
+          height: "$1"
         }}
         key={name}
       >{name}</Paragraph>)}</YStack>

package/dist/jsx/ColorsDemo.mjs.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": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,cAAc,CAAC,UAAU,UAAU,SAAS,QAAQ,UAAU,QAAQ,KAAK;AAE1E,SAAS,aAAa;AAC3B,QAAM,SAAS,UAAU,EAAE,UAAU,MAAM,CAAC,EAAE;AAC9C,QAAM,CAAC,aAAa,UAAU,IAAI,CAAC,UAAU,MAAM,GAAG,UAAU,QAAQ,IAAI,CAAC;AAE7E,SACE,CAAC,OAAO,GAAG,KAAK,MAAM;AAAA,IACpB,CAAC,UAAU,MAAM,QAAQ,QAAQ,aAAa;AAAA,IAC9C,CAAC,UAAU;AAAA,IACX,CAAC,UAAU,MAAM,OAAO,QAAQ,YAAY;AAAA,EAC9C,EAJC;AAML;AAEA,SAAS,UAAU,EAAE,OAAO,OAAO,GAA4C;AAC7E,SACE,CAAC,OAAO,MAAM,KAAK,EAAE,OAAO,KAAK;AAAA,IAC/B,CAAC,GAAG,KAAK,MAAM,MAAM,EAApB;AAAA,IAED,CAAC,OAAO,MAAM,IAAI;AAAA,MAChB,CAAC,OAAO,MAAM,KAAK,EAAE,OAAO,KAAK,GAAG,IAAI;AAAA,SACrC,OAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBACE,CAAC,OAAO,MAAM,KAAK,KAAK,QACrB,MAAM,IAAI,CAAC,UAAU;AACpB,mBACE,CAAC;AAAA,cACC,KAAK,GAAG,MAAM,MAAM;AAAA,cACpB,GAAG;AAAA,cACH,KAAK;AAAA,cACL,EAAE;AAAA,cACF,IAAI;AAAA,cACJ,IAAI,iBAAiB,KAAK;AAAA,cAC1B,IAAI;AAAA,cACJ,KAAK;AAAA,gBACH,MAAM;AAAA,cACR;AAAA,cACA,KAAK;AAAA,gBACH,MAAM;AAAA,cACR;AAAA,YACF;AAAA,UAEJ,CAAC,EACH,EApBC;AAAA,QAsBL,CAAC;AAAA,QAED,CAAC,OAAO,MAAM,KAAK,IAAI,UACpB,IAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAAC,GAAG,UAAU;AACjB,iBACE,CAAC;AAAA,YACC,IAAI;AAAA,YACJ,GAAG;AAAA,YACH,EAAE;AAAA,YACF,KAAK;AAAA,cACH,GAAG;AAAA,YACL;AAAA,YACA,KAAK;AAAA,cACH,GAAG;AAAA,YACL;AAAA,YACA,KAAK;AAAA,YAEJ,MACH,EAbC;AAAA,QAeL,CAAC,EACL,EAtBC;AAAA,MAuBH,EAlDC;AAAA,MAoDD,CAAC,OAAO,MAAM,KAAK,GAAG,MACnB,YAAY,IAAI,CAAC,SAChB,CAAC;AAAA,QACC,OAAO;AAAA,QACP,IAAI;AAAA,QACJ,EAAE;AAAA,QACF,OAAO;AAAA,QACP,KAAK;AAAA,UACH,GAAG;AAAA,QACL;AAAA,QACA,KAAK;AAAA,UACH,GAAG;AAAA,QACL;AAAA,QACA,KAAK;AAAA,QAEJ,KACH,EAdC,UAeF,EACH,EAlBC;AAAA,IAmBH,EAxEC;AAAA,EAyEH,EA5EC;AA8EL;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": "AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,cAAc,CAAC,UAAU,UAAU,SAAS,QAAQ,UAAU,QAAQ,KAAK;AAE1E,SAAS,aAAa;AAC3B,QAAM,SAAS,UAAU,EAAE,UAAU,MAAM,CAAC,EAAE;AAC9C,QAAM,CAAC,aAAa,UAAU,IAAI,CAAC,UAAU,MAAM,GAAG,UAAU,QAAQ,IAAI,CAAC;AAE7E,SACE,CAAC,OAAO,UAAU,KAAK,MAAM;AAAA,IAC3B,CAAC,UAAU,MAAM,QAAQ,QAAQ,aAAa;AAAA,IAC9C,CAAC,UAAU;AAAA,IACX,CAAC,UAAU,MAAM,OAAO,QAAQ,YAAY;AAAA,EAC9C,EAJC;AAML;AAEA,SAAS,UAAU,EAAE,OAAO,OAAO,GAA4C;AAC7E,SACE,CAAC,OAAO,MAAM,KAAK,EAAE,OAAO,KAAK;AAAA,IAC/B,CAAC,GAAG,KAAK,MAAM,MAAM,EAApB;AAAA,IAED,CAAC,OAAO,MAAM,UAAU;AAAA,MACtB,CAAC,OAAO,MAAM,KAAK,EAAE,OAAO,KAAK,GAAG,IAAI;AAAA,SACrC,OAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBACE,CAAC,OAAO,MAAM,KAAK,KAAK,QACrB,MAAM,IAAI,CAAC,UAAU;AACpB,mBACE,CAAC;AAAA,cACC,KAAK,GAAG,MAAM,MAAM;AAAA,cACpB,aAAa;AAAA,cACb,KAAK;AAAA,cACL,OAAO;AAAA,cACP,aAAa;AAAA,cACb,iBAAiB,iBAAiB,KAAK;AAAA,cACvC,YAAY;AAAA,cACZ,KAAK;AAAA,gBACH,MAAM;AAAA,cACR;AAAA,cACA,KAAK;AAAA,gBACH,MAAM;AAAA,cACR;AAAA,YACF;AAAA,UAEJ,CAAC,EACH,EApBC;AAAA,QAsBL,CAAC;AAAA,QAED,CAAC,OAAO,MAAM,KAAK,UAAU,UAC1B,IAAI,MAAM,EAAE,EACV,KAAK,CAAC,EACN,MAAM,CAAC,EACP,IAAI,CAAC,GAAG,UAAU;AACjB,iBACE,CAAC;AAAA,YACC,MAAM;AAAA,YACN,UAAU;AAAA,YACV,MAAM;AAAA,YACN,KAAK;AAAA,cACJ,OAAM;AAAA,YACP;AAAA,YACA,KAAK;AAAA,cACH,OAAO;AAAA,YACT;AAAA,YACA,KAAK;AAAA,YAEJ,MACH,EAbC;AAAA,QAeL,CAAC,EACL,EAtBC;AAAA,MAuBH,EAlDC;AAAA,MAoDD,CAAC,OAAO,MAAM,KAAK,UAAU,MAC1B,YAAY,IAAI,CAAC,SAChB,CAAC;AAAA,QACC,OAAO;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,QACP,KAAK;AAAA,UACH,QAAQ;AAAA,QACV;AAAA,QACA,KAAK;AAAA,UACH,QAAQ;AAAA,QACV;AAAA,QACA,KAAK;AAAA,QAEJ,KACH,EAdC,UAeF,EACH,EAlBC;AAAA,IAmBH,EAxEC;AAAA,EAyEH,EA5EC;AA8EL;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/jsx/DialogDemo.js

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

package/dist/jsx/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,SAAS,SAAS;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,kBAAkB;AAEpB,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO;AAAA,IACN,CAAC,OAAO,QAAQ,QACd,CAAC,OAAO,YAAY,EAAnB,OACH,EAFC,OAAO;AAAA,IAIR,CAAC,MAAM,KAAK,KAAK,SAAS,QACxB,CAAC,MAAM,QAAQ,KAAQ,MAAM;AAAA,MAC3B,CAAC,MAAM,MAAM,QAAQ,KAAK,MACxB,CAAC,MAAM,SAAS,EAClB,EAFC,MAAM;AAAA,MAGP,CAAC,MAAM,QAAQ;AAAA,IACjB,EALC,MAMH,EAPC;AAAA,IASD,CAAC,OAAO;AAAA,MACN,CAAC,OAAO;AAAA,QACN,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,GAAG;AAAA,QACH,YAAY,EAAE,GAAG,EAAE;AAAA,QACnB,WAAW,EAAE,GAAG,EAAE;AAAA,MACpB;AAAA,MAEA,CAAC,OAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA,IAAI;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI;AAAA,QACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK;AAAA,QAClD;AAAA;AAAA,QAEA,CAAC,OAAO,MAAM,YAAY,EAAzB,OAAO;AAAA,QACR,CAAC,OAAO,YAAY,+DAEpB,EAFC,OAAO;AAAA,QAGR,CAAC,SAAS,MAAM,KAAK;AAAA,UACnB,CAAC,MAAM,GAAG,KAAK,eAAe,WAAW,QAAQ,OAAO,IAExD,EAFC;AAAA,UAGD,CAAC,MAAM,GAAG,GAAG,GAAG,OAAO,aAAa,eAAe;AAAA,QACrD,EALC;AAAA,QAMD,CAAC,SAAS,MAAM,KAAK;AAAA,UACnB,CAAC,MAAM,GAAG,KAAK,eAAe,WAAW,QAAQ,WAC/C,CAAC,cAAc,MAAM,qBAAqB,UAAU,eAClD,CAAC,UAAU,IAAI,EAAd,UACH,EAFC,cAGH,EAJC;AAAA,UAKD,CAAC,WAAW;AAAA,QACd,EAPC;AAAA,QASD,CAAC,OAAO,GAAG,WAAW,GAAG,KACvB,CAAC,OAAO,MAAM,mBAAmB,QAC/B,CAAC,OAAO,MAAM,OAAO,WAAW,QAAQ,YAExC,EAFC,OAGH,EAJC,OAAO,MAKV,EANC;AAAA,QAQD,CAAC,SACC,CAAC,OAAO,MAAM,QACZ,CAAC,OAAO,IAAI,WAAW,EAAE,KAAK,EAAE,KAAK,KAAK,KAAK,SAAS,MAAM,GAAG,EACnE,EAFC,OAAO,MAGV,EAJC;AAAA,MAKH,EAhDC,OAAO;AAAA,IAiDV,EA1DC,OAAO;AAAA,EA2DV,EAzEC;AA2EL;",
+  "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,SAAS,SAAS;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,kBAAkB;AAEpB,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO;AAAA,IACN,CAAC,OAAO,QAAQ,QACd,CAAC,OAAO,YAAY,EAAnB,OACH,EAFC,OAAO;AAAA,IAIR,CAAC,MAAM,KAAK,KAAK,SAAS,QACxB,CAAC,MAAM,QAAQ,KAAQ,MAAM;AAAA,MAC3B,CAAC,MAAM,MAAM,QAAQ,KAAK,MACxB,CAAC,MAAM,SAAS,EAClB,EAFC,MAAM;AAAA,MAGP,CAAC,MAAM,QAAQ;AAAA,IACjB,EALC,MAMH,EAPC;AAAA,IASD,CAAC,OAAO;AAAA,MACN,CAAC,OAAO;AAAA,QACN,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,SAAS;AAAA,QACT,YAAY,EAAE,SAAS,EAAE;AAAA,QACzB,WAAW,EAAE,SAAS,EAAE;AAAA,MAC1B;AAAA,MAEA,CAAC,OAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA,IAAI;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI;AAAA,QACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK;AAAA,QAClD;AAAA;AAAA,QAEA,CAAC,OAAO,MAAM,YAAY,EAAzB,OAAO;AAAA,QACR,CAAC,OAAO,YAAY,+DAEpB,EAFC,OAAO;AAAA,QAGR,CAAC,SAAS,MAAM,KAAK;AAAA,UACnB,CAAC,MAAM,OAAO,KAAK,eAAe,WAAW,QAAQ,OAAO,IAE5D,EAFC;AAAA,UAGD,CAAC,MAAM,MAAM,GAAG,GAAG,OAAO,aAAa,eAAe;AAAA,QACxD,EALC;AAAA,QAMD,CAAC,SAAS,MAAM,KAAK;AAAA,UACnB,CAAC,MAAM,OAAO,KAAK,eAAe,WAAW,QAAQ,WACnD,CAAC,cAAc,MAAM,qBAAqB,UAAU,eAClD,CAAC,UAAU,IAAI,EAAd,UACH,EAFC,cAGH,EAJC;AAAA,UAKD,CAAC,WAAW;AAAA,QACd,EAPC;AAAA,QASD,CAAC,OAAO,WAAW,WAAW,UAAU,KACtC,CAAC,OAAO,MAAM,mBAAmB,QAC/B,CAAC,OAAO,MAAM,OAAO,WAAW,QAAQ,YAExC,EAFC,OAGH,EAJC,OAAO,MAKV,EANC;AAAA,QAQD,CAAC,SACC,CAAC,OAAO,MAAM,QACZ,CAAC,OAAO,SAAS,WAAW,IAAI,KAAK,MAAM,KAAK,KAAK,KAAK,SAAS,MAAM,GAAG,EAC9E,EAFC,OAAO,MAGV,EAJC;AAAA,MAKH,EAhDC,OAAO;AAAA,IAiDV,EA1DC,OAAO;AAAA,EA2DV,EAzEC;AA2EL;",
   "names": []
 }

package/dist/jsx/DialogDemo.mjs

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

package/dist/jsx/DialogDemo.mjs.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,SAAS,SAAS;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,kBAAkB;AAEpB,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO;AAAA,IACN,CAAC,OAAO,QAAQ,QACd,CAAC,OAAO,YAAY,EAAnB,OACH,EAFC,OAAO;AAAA,IAIR,CAAC,MAAM,KAAK,KAAK,SAAS,QACxB,CAAC,MAAM,QAAQ,KAAQ,MAAM;AAAA,MAC3B,CAAC,MAAM,MAAM,QAAQ,KAAK,MACxB,CAAC,MAAM,SAAS,EAClB,EAFC,MAAM;AAAA,MAGP,CAAC,MAAM,QAAQ;AAAA,IACjB,EALC,MAMH,EAPC;AAAA,IASD,CAAC,OAAO;AAAA,MACN,CAAC,OAAO;AAAA,QACN,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,GAAG;AAAA,QACH,YAAY,EAAE,GAAG,EAAE;AAAA,QACnB,WAAW,EAAE,GAAG,EAAE;AAAA,MACpB;AAAA,MAEA,CAAC,OAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA,IAAI;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI;AAAA,QACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK;AAAA,QAClD;AAAA;AAAA,QAEA,CAAC,OAAO,MAAM,YAAY,EAAzB,OAAO;AAAA,QACR,CAAC,OAAO,YAAY,+DAEpB,EAFC,OAAO;AAAA,QAGR,CAAC,SAAS,MAAM,KAAK;AAAA,UACnB,CAAC,MAAM,GAAG,KAAK,eAAe,WAAW,QAAQ,OAAO,IAExD,EAFC;AAAA,UAGD,CAAC,MAAM,GAAG,GAAG,GAAG,OAAO,aAAa,eAAe;AAAA,QACrD,EALC;AAAA,QAMD,CAAC,SAAS,MAAM,KAAK;AAAA,UACnB,CAAC,MAAM,GAAG,KAAK,eAAe,WAAW,QAAQ,WAC/C,CAAC,cAAc,MAAM,qBAAqB,UAAU,eAClD,CAAC,UAAU,IAAI,EAAd,UACH,EAFC,cAGH,EAJC;AAAA,UAKD,CAAC,WAAW;AAAA,QACd,EAPC;AAAA,QASD,CAAC,OAAO,GAAG,WAAW,GAAG,KACvB,CAAC,OAAO,MAAM,mBAAmB,QAC/B,CAAC,OAAO,MAAM,OAAO,WAAW,QAAQ,YAExC,EAFC,OAGH,EAJC,OAAO,MAKV,EANC;AAAA,QAQD,CAAC,SACC,CAAC,OAAO,MAAM,QACZ,CAAC,OAAO,IAAI,WAAW,EAAE,KAAK,EAAE,KAAK,KAAK,KAAK,SAAS,MAAM,GAAG,EACnE,EAFC,OAAO,MAGV,EAJC;AAAA,MAKH,EAhDC,OAAO;AAAA,IAiDV,EA1DC,OAAO;AAAA,EA2DV,EAzEC;AA2EL;",
+  "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,SAAS,SAAS;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,kBAAkB;AAEpB,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO;AAAA,IACN,CAAC,OAAO,QAAQ,QACd,CAAC,OAAO,YAAY,EAAnB,OACH,EAFC,OAAO;AAAA,IAIR,CAAC,MAAM,KAAK,KAAK,SAAS,QACxB,CAAC,MAAM,QAAQ,KAAQ,MAAM;AAAA,MAC3B,CAAC,MAAM,MAAM,QAAQ,KAAK,MACxB,CAAC,MAAM,SAAS,EAClB,EAFC,MAAM;AAAA,MAGP,CAAC,MAAM,QAAQ;AAAA,IACjB,EALC,MAMH,EAPC;AAAA,IASD,CAAC,OAAO;AAAA,MACN,CAAC,OAAO;AAAA,QACN,IAAI;AAAA,QACJ,UAAU;AAAA,QACV,SAAS;AAAA,QACT,YAAY,EAAE,SAAS,EAAE;AAAA,QACzB,WAAW,EAAE,SAAS,EAAE;AAAA,MAC1B;AAAA,MAEA,CAAC,OAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA,IAAI;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,SAAS;AAAA,cACP,mBAAmB;AAAA,YACrB;AAAA,UACF;AAAA,QACF;AAAA,QACA,YAAY,EAAE,GAAG,GAAG,GAAG,KAAK,SAAS,GAAG,OAAO,IAAI;AAAA,QACnD,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,SAAS,GAAG,OAAO,KAAK;AAAA,QAClD;AAAA;AAAA,QAEA,CAAC,OAAO,MAAM,YAAY,EAAzB,OAAO;AAAA,QACR,CAAC,OAAO,YAAY,+DAEpB,EAFC,OAAO;AAAA,QAGR,CAAC,SAAS,MAAM,KAAK;AAAA,UACnB,CAAC,MAAM,OAAO,KAAK,eAAe,WAAW,QAAQ,OAAO,IAE5D,EAFC;AAAA,UAGD,CAAC,MAAM,MAAM,GAAG,GAAG,OAAO,aAAa,eAAe;AAAA,QACxD,EALC;AAAA,QAMD,CAAC,SAAS,MAAM,KAAK;AAAA,UACnB,CAAC,MAAM,OAAO,KAAK,eAAe,WAAW,QAAQ,WACnD,CAAC,cAAc,MAAM,qBAAqB,UAAU,eAClD,CAAC,UAAU,IAAI,EAAd,UACH,EAFC,cAGH,EAJC;AAAA,UAKD,CAAC,WAAW;AAAA,QACd,EAPC;AAAA,QASD,CAAC,OAAO,WAAW,WAAW,UAAU,KACtC,CAAC,OAAO,MAAM,mBAAmB,QAC/B,CAAC,OAAO,MAAM,OAAO,WAAW,QAAQ,YAExC,EAFC,OAGH,EAJC,OAAO,MAKV,EANC;AAAA,QAQD,CAAC,SACC,CAAC,OAAO,MAAM,QACZ,CAAC,OAAO,SAAS,WAAW,IAAI,KAAK,MAAM,KAAK,KAAK,KAAK,SAAS,MAAM,GAAG,EAC9E,EAFC,OAAO,MAGV,EAJC;AAAA,MAKH,EAhDC,OAAO;AAAA,IAiDV,EA1DC,OAAO;AAAA,EA2DV,EAzEC;AA2EL;",
   "names": []
 }

package/dist/jsx/FormsDemo.js

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

package/dist/jsx/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": "AAEA,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,CAAC;AAAA,IACC,GAAG;AAAA,IACH,KAAK;AAAA,IACL;AAAA,IACA,UAAU,MAAM,UAAU,YAAY;AAAA,IACtC,IAAI;AAAA,IACJ,GAAG;AAAA,IACH,GAAG;AAAA,IACH,IAAI;AAAA,IACJ,EAAE;AAAA;AAAA,IAEF,CAAC,IAAI,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC,EAAE,EAA9C;AAAA,IAED,CAAC,KAAK,QAAQ,QAAQ,UAAU,WAAW,OACzC,CAAC,OAAO,MAAM,WAAW,eAAe,MAAM,CAAC,QAAQ,KAAK,QAAW,MAEvE,EAFC,OAGH,EAJC,KAAK;AAAA,EAKR,EAlBC;AAoBL;",
+  "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": "AAEA,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,CAAC;AAAA,IACC,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA,UAAU,MAAM,UAAU,YAAY;AAAA,IACtC,aAAa;AAAA,IACb,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA;AAAA,IAER,CAAC,IAAI,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC,EAAE,EAA9C;AAAA,IAED,CAAC,KAAK,QAAQ,QAAQ,UAAU,WAAW,OACzC,CAAC,OAAO,MAAM,WAAW,eAAe,MAAM,CAAC,QAAQ,KAAK,QAAW,MAEvE,EAFC,OAGH,EAJC,KAAK;AAAA,EAKR,EAlBC;AAoBL;",
   "names": []
 }

package/dist/jsx/FormsDemo.mjs

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

package/dist/jsx/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": "AAEA,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,CAAC;AAAA,IACC,GAAG;AAAA,IACH,KAAK;AAAA,IACL;AAAA,IACA,UAAU,MAAM,UAAU,YAAY;AAAA,IACtC,IAAI;AAAA,IACJ,GAAG;AAAA,IACH,GAAG;AAAA,IACH,IAAI;AAAA,IACJ,EAAE;AAAA;AAAA,IAEF,CAAC,IAAI,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC,EAAE,EAA9C;AAAA,IAED,CAAC,KAAK,QAAQ,QAAQ,UAAU,WAAW,OACzC,CAAC,OAAO,MAAM,WAAW,eAAe,MAAM,CAAC,QAAQ,KAAK,QAAW,MAEvE,EAFC,OAGH,EAJC,KAAK;AAAA,EAKR,EAlBC;AAoBL;",
+  "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": "AAEA,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,CAAC;AAAA,IACC,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA,UAAU,MAAM,UAAU,YAAY;AAAA,IACtC,aAAa;AAAA,IACb,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA;AAAA,IAER,CAAC,IAAI,OAAO,CAAC,EAAE,YAAY,IAAI,OAAO,MAAM,CAAC,EAAE,EAA9C;AAAA,IAED,CAAC,KAAK,QAAQ,QAAQ,UAAU,WAAW,OACzC,CAAC,OAAO,MAAM,WAAW,eAAe,MAAM,CAAC,QAAQ,KAAK,QAAW,MAEvE,EAFC,OAGH,EAJC,KAAK;AAAA,EAKR,EAlBC;AAoBL;",
   "names": []
 }

package/dist/jsx/GroupDemo.js

@@ -1,7 +1,7 @@
 import { Activity, Airplay } from "@tamagui/lucide-icons";
 import { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from "tamagui";
 function GroupDemo() {
-  return <YStack p="$3" space="$2" ai="center">
+  return <YStack padding="$3" space="$2" alignItems="center">
     <Group axis="horizontal">
       <Group.Item><Button>First</Button></Group.Item>
       <Group.Item><Button>Second</Button></Group.Item>

package/dist/jsx/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,SAAS,UAAU,eAAe;AAClC,SAAS,QAAQ,OAAO,UAAU,WAAW,QAAQ,QAAQ,cAAc;AAEpE,SAAS,YAAY;AAC1B,SACE,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG;AAAA,IAC3B,CAAC,MAAM,KAAK;AAAA,MACV,CAAC,MAAM,KACL,CAAC,OAAO,KAAK,EAAZ,OACH,EAFC,MAAM;AAAA,MAGP,CAAC,MAAM,KACL,CAAC,OAAO,MAAM,EAAb,OACH,EAFC,MAAM;AAAA,MAGP,CAAC,MAAM,KACL,CAAC,OAAO,KAAK,EAAZ,OACH,EAFC,MAAM;AAAA,IAGT,EAVC;AAAA,IAaD,CAAC,OAAO,KAAK,KAAK,OAAO,EAAE,MAAM,KAAK;AAAA,MACpC,CAAC,OAAO,KACN,CAAC,OAAO,KAAK,KAAK,MAAM,UAAU,KAElC,EAFC,OAGH,EAJC,OAAO;AAAA,MAKR,CAAC,OAAO,KACN,CAAC,OAAO,KAAK,KAAK,MAAM,SAAS,MAEjC,EAFC,OAGH,EAJC,OAAO;AAAA,IAKV,EAXC;AAAA,IAcD,CAAC,OAAO,WAAW,CAAC,UAAU;AAAA,MAC5B,CAAC,OAAO,KACN,CAAC,SAAS,MAAM,QAAQ,EAC1B,EAFC,OAAO;AAAA,MAGR,CAAC,OAAO,KACN,CAAC,SAAS,MAAM,SAAS,SAAS,kBAAkB,EACtD,EAFC,OAAO;AAAA,MAGR,CAAC,OAAO,KACN,CAAC,SAAS,KAAK,EAAd,SACH,EAFC,OAAO;AAAA,IAGV,EAVC;AAAA,EAWH,EAvCC;AAyCL;",
+  "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,SAAS,UAAU,eAAe;AAClC,SAAS,QAAQ,OAAO,UAAU,WAAW,QAAQ,QAAQ,cAAc;AAEpE,SAAS,YAAY;AAC1B,SACE,CAAC,OAAO,QAAQ,KAAK,MAAM,KAAK,WAAW;AAAA,IACzC,CAAC,MAAM,KAAK;AAAA,MACV,CAAC,MAAM,KACL,CAAC,OAAO,KAAK,EAAZ,OACH,EAFC,MAAM;AAAA,MAGP,CAAC,MAAM,KACL,CAAC,OAAO,MAAM,EAAb,OACH,EAFC,MAAM;AAAA,MAGP,CAAC,MAAM,KACL,CAAC,OAAO,KAAK,EAAZ,OACH,EAFC,MAAM;AAAA,IAGT,EAVC;AAAA,IAaD,CAAC,OAAO,KAAK,KAAK,OAAO,EAAE,MAAM,KAAK;AAAA,MACpC,CAAC,OAAO,KACN,CAAC,OAAO,KAAK,KAAK,MAAM,UAAU,KAElC,EAFC,OAGH,EAJC,OAAO;AAAA,MAKR,CAAC,OAAO,KACN,CAAC,OAAO,KAAK,KAAK,MAAM,SAAS,MAEjC,EAFC,OAGH,EAJC,OAAO;AAAA,IAKV,EAXC;AAAA,IAcD,CAAC,OAAO,WAAW,CAAC,UAAU;AAAA,MAC5B,CAAC,OAAO,KACN,CAAC,SAAS,MAAM,QAAQ,EAC1B,EAFC,OAAO;AAAA,MAGR,CAAC,OAAO,KACN,CAAC,SAAS,MAAM,SAAS,SAAS,kBAAkB,EACtD,EAFC,OAAO;AAAA,MAGR,CAAC,OAAO,KACN,CAAC,SAAS,KAAK,EAAd,SACH,EAFC,OAAO;AAAA,IAGV,EAVC;AAAA,EAWH,EAvCC;AAyCL;",
   "names": []
 }

package/dist/jsx/GroupDemo.mjs

@@ -1,7 +1,7 @@
 import { Activity, Airplay } from "@tamagui/lucide-icons";
 import { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from "tamagui";
 function GroupDemo() {
-  return <YStack p="$3" space="$2" ai="center">
+  return <YStack padding="$3" space="$2" alignItems="center">
     <Group axis="horizontal">
       <Group.Item><Button>First</Button></Group.Item>
       <Group.Item><Button>Second</Button></Group.Item>

package/dist/jsx/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": "AAAA,SAAS,UAAU,eAAe;AAClC,SAAS,QAAQ,OAAO,UAAU,WAAW,QAAQ,QAAQ,cAAc;AAEpE,SAAS,YAAY;AAC1B,SACE,CAAC,OAAO,EAAE,KAAK,MAAM,KAAK,GAAG;AAAA,IAC3B,CAAC,MAAM,KAAK;AAAA,MACV,CAAC,MAAM,KACL,CAAC,OAAO,KAAK,EAAZ,OACH,EAFC,MAAM;AAAA,MAGP,CAAC,MAAM,KACL,CAAC,OAAO,MAAM,EAAb,OACH,EAFC,MAAM;AAAA,MAGP,CAAC,MAAM,KACL,CAAC,OAAO,KAAK,EAAZ,OACH,EAFC,MAAM;AAAA,IAGT,EAVC;AAAA,IAaD,CAAC,OAAO,KAAK,KAAK,OAAO,EAAE,MAAM,KAAK;AAAA,MACpC,CAAC,OAAO,KACN,CAAC,OAAO,KAAK,KAAK,MAAM,UAAU,KAElC,EAFC,OAGH,EAJC,OAAO;AAAA,MAKR,CAAC,OAAO,KACN,CAAC,OAAO,KAAK,KAAK,MAAM,SAAS,MAEjC,EAFC,OAGH,EAJC,OAAO;AAAA,IAKV,EAXC;AAAA,IAcD,CAAC,OAAO,WAAW,CAAC,UAAU;AAAA,MAC5B,CAAC,OAAO,KACN,CAAC,SAAS,MAAM,QAAQ,EAC1B,EAFC,OAAO;AAAA,MAGR,CAAC,OAAO,KACN,CAAC,SAAS,MAAM,SAAS,SAAS,kBAAkB,EACtD,EAFC,OAAO;AAAA,MAGR,CAAC,OAAO,KACN,CAAC,SAAS,KAAK,EAAd,SACH,EAFC,OAAO;AAAA,IAGV,EAVC;AAAA,EAWH,EAvCC;AAyCL;",
+  "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,SAAS,UAAU,eAAe;AAClC,SAAS,QAAQ,OAAO,UAAU,WAAW,QAAQ,QAAQ,cAAc;AAEpE,SAAS,YAAY;AAC1B,SACE,CAAC,OAAO,QAAQ,KAAK,MAAM,KAAK,WAAW;AAAA,IACzC,CAAC,MAAM,KAAK;AAAA,MACV,CAAC,MAAM,KACL,CAAC,OAAO,KAAK,EAAZ,OACH,EAFC,MAAM;AAAA,MAGP,CAAC,MAAM,KACL,CAAC,OAAO,MAAM,EAAb,OACH,EAFC,MAAM;AAAA,MAGP,CAAC,MAAM,KACL,CAAC,OAAO,KAAK,EAAZ,OACH,EAFC,MAAM;AAAA,IAGT,EAVC;AAAA,IAaD,CAAC,OAAO,KAAK,KAAK,OAAO,EAAE,MAAM,KAAK;AAAA,MACpC,CAAC,OAAO,KACN,CAAC,OAAO,KAAK,KAAK,MAAM,UAAU,KAElC,EAFC,OAGH,EAJC,OAAO;AAAA,MAKR,CAAC,OAAO,KACN,CAAC,OAAO,KAAK,KAAK,MAAM,SAAS,MAEjC,EAFC,OAGH,EAJC,OAAO;AAAA,IAKV,EAXC;AAAA,IAcD,CAAC,OAAO,WAAW,CAAC,UAAU;AAAA,MAC5B,CAAC,OAAO,KACN,CAAC,SAAS,MAAM,QAAQ,EAC1B,EAFC,OAAO;AAAA,MAGR,CAAC,OAAO,KACN,CAAC,SAAS,MAAM,SAAS,SAAS,kBAAkB,EACtD,EAFC,OAAO;AAAA,MAGR,CAAC,OAAO,KACN,CAAC,SAAS,KAAK,EAAd,SACH,EAFC,OAAO;AAAA,IAGV,EAVC;AAAA,EAWH,EAvCC;AAyCL;",
   "names": []
 }

package/dist/jsx/HeadingsDemo.js

@@ -1,6 +1,6 @@
 import { H1, H2, H3, H4, H5, H6, YStack } from "tamagui";
 function HeadingsDemo() {
-  return <YStack als="center">
+  return <YStack alignSelf="center">
     <H1>Heading 1</H1>
     <H2>Heading 2</H2>
     <H3>Heading 3</H3>

package/dist/jsx/HeadingsDemo.js.map

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

package/dist/jsx/HeadingsDemo.mjs

@@ -1,6 +1,6 @@
 import { H1, H2, H3, H4, H5, H6, YStack } from "tamagui";
 function HeadingsDemo() {
-  return <YStack als="center">
+  return <YStack alignSelf="center">
     <H1>Heading 1</H1>
     <H2>Heading 2</H2>
     <H3>Heading 3</H3>

package/dist/jsx/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": "AACA,SAAS,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,cAAc;AAExC,SAAS,eAAe;AAC7B,SACE,CAAC,OAAO,IAAI;AAAA,IACV,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,EACH,EAPC;AASL;",
+  "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": "AACA,SAAS,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,cAAc;AAExC,SAAS,eAAe;AAC7B,SACE,CAAC,OAAO,UAAU;AAAA,IAChB,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,IACD,CAAC,GAAG,SAAS,EAAZ;AAAA,EACH,EAPC;AASL;",
   "names": []
 }

package/dist/jsx/InputsDemo.js

@@ -1,15 +1,15 @@
 import { Button, Input, TextArea, XStack, YStack } from "tamagui";
 function InputsDemo() {
-  return <YStack w={200} mih={250} overflow="hidden" space="$2" m="$3" p="$2">
+  return <YStack width={200} mih={250} overflow="hidden" space="$2" margin="$3" padding="$2">
     <InputDemo size="$2" />
     <InputDemo size="$3" />
     <InputDemo size="$4" />
-    <TextArea mih={140} placeholder="Enter your details..." numberOfLines={4} />
+    <TextArea minHeight={140} placeholder="Enter your details..." numberOfLines={4} />
   </YStack>;
 }
 function InputDemo(props) {
-  return <XStack ai="center" space="$2">
-    <Input f={1} size={props.size} placeholder={`Size ${props.size}...`} />
+  return <XStack alignItems="center" space="$2">
+    <Input flex={1} size={props.size} placeholder={`Size ${props.size}...`} />
     <Button size={props.size}>Go</Button>
   </XStack>;
 }

package/dist/jsx/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,SAAS,QAAQ,OAAmB,UAAU,QAAQ,cAAc;AAE7D,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,GAAG,KAAK,KAAK,KAAK,SAAS,SAAS,MAAM,KAAK,EAAE,KAAK,EAAE;AAAA,IAC9D,CAAC,UAAU,KAAK,KAAK;AAAA,IACrB,CAAC,UAAU,KAAK,KAAK;AAAA,IACrB,CAAC,UAAU,KAAK,KAAK;AAAA,IACrB,CAAC,SAAS,KAAK,KAAK,YAAY,wBAAwB,eAAe,GAAG;AAAA,EAC5E,EALC;AAOL;AAEA,SAAS,UAAU,OAA6B;AAC9C,SACE,CAAC,OAAO,GAAG,SAAS,MAAM;AAAA,IACxB,CAAC,MAAM,GAAG,GAAG,MAAM,MAAM,MAAM,aAAa,QAAQ,MAAM,WAAW;AAAA,IACrE,CAAC,OAAO,MAAM,MAAM,MAAM,EAAE,EAA3B;AAAA,EACH,EAHC;AAKL;",
+  "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,SAAS,QAAQ,OAAmB,UAAU,QAAQ,cAAc;AAE7D,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,OAAO,KAAK,KAAK,KAAK,SAAS,SAAS,MAAM,KAAK,OAAO,KAAK,QAAQ;AAAA,IAC7E,CAAC,UAAU,KAAK,KAAK;AAAA,IACrB,CAAC,UAAU,KAAK,KAAK;AAAA,IACrB,CAAC,UAAU,KAAK,KAAK;AAAA,IACrB,CAAC,SAAS,WAAW,KAAK,YAAY,wBAAwB,eAAe,GAAG;AAAA,EAClF,EALC;AAOL;AAEA,SAAS,UAAU,OAA6B;AAC9C,SACE,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,IAChC,CAAC,MAAM,MAAM,GAAG,MAAM,MAAM,MAAM,aAAa,QAAQ,MAAM,WAAW;AAAA,IACxE,CAAC,OAAO,MAAM,MAAM,MAAM,EAAE,EAA3B;AAAA,EACH,EAHC;AAKL;",
   "names": []
 }