@tamagui/demos 1.11.2 → 1.12.0

package/dist/esm/CardDemo.mjs

@@ -1,14 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, Card, H2, Image, Paragraph, XStack } from "tamagui";
 function CardDemo() {
-  return /* @__PURE__ */ jsxs(XStack, { $sm: { flexDirection: "column" }, px: "$4", space: true, children: [
+  return /* @__PURE__ */ jsxs(XStack, { $sm: { flexDirection: "column" }, paddingHorizontal: "$4", space: true, children: [
     /* @__PURE__ */ jsx(
       DemoCard,
       {
         animation: "bouncy",
         size: "$4",
-        w: 250,
-        h: 300,
+        width: 250,
+        height: 300,
         scale: 0.9,
         hoverStyle: { scale: 0.925 },
         pressStyle: { scale: 0.875 }
@@ -24,17 +24,17 @@ function DemoCard(props) {
       /* @__PURE__ */ jsx(Paragraph, { theme: "alt2", children: "Now available" })
     ] }),
     /* @__PURE__ */ jsxs(Card.Footer, { padded: true, children: [
-      /* @__PURE__ */ jsx(XStack, { f: 1 }),
-      /* @__PURE__ */ jsx(Button, { br: "$10", children: "Purchase" })
+      /* @__PURE__ */ jsx(XStack, { flex: 1 }),
+      /* @__PURE__ */ jsx(Button, { borderRadius: "$10", children: "Purchase" })
     ] }),
     /* @__PURE__ */ jsx(Card.Background, { children: /* @__PURE__ */ jsx(
       Image,
       {
-        pos: "absolute",
+        position: "absolute",
         width: 300,
         height: 300,
         resizeMode: "contain",
-        als: "center",
+        alignSelf: "center",
         src: "data:image/jpeg;base64,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"
       }
     ) })

package/dist/esm/CardDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/CardDemo.tsx"],
-  "sourcesContent": ["import { Button, Card, CardProps, H2, Image, Paragraph, XStack } from 'tamagui'\n\nexport function CardDemo() {\n  return (\n    <XStack $sm={{ flexDirection: 'column' }} px=\"$4\" space>\n      <DemoCard\n        animation=\"bouncy\"\n        size=\"$4\"\n        w={250}\n        h={300}\n        scale={0.9}\n        hoverStyle={{ scale: 0.925 }}\n        pressStyle={{ scale: 0.875 }}\n      />\n      <DemoCard size=\"$5\" w={250} h={300} />\n    </XStack>\n  )\n}\n\nfunction DemoCard(props: CardProps) {\n  return (\n    <Card theme=\"dark\" elevate size=\"$4\" bordered {...props}>\n      <Card.Header padded>\n        <H2>Sony A7IV</H2>\n        <Paragraph theme=\"alt2\">Now available</Paragraph>\n      </Card.Header>\n      <Card.Footer padded>\n        <XStack f={1} />\n        <Button br=\"$10\">Purchase</Button>\n      </Card.Footer>\n      <Card.Background>\n        <Image\n          pos=\"absolute\"\n          width={300}\n          height={300}\n          resizeMode=\"contain\"\n          als=\"center\"\n          src=\"data:image/jpeg;base64,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\"\n        />\n      </Card.Background>\n    </Card>\n  )\n}\n"],
-  "mappings": "AAII,SACE,KADF;AAJJ,SAAS,QAAQ,MAAiB,IAAI,OAAO,WAAW,cAAc;AAE/D,SAAS,WAAW;AACzB,SACE,qBAAC,UAAO,KAAK,EAAE,eAAe,SAAS,GAAG,IAAG,MAAK,OAAK,MACrD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QACL,GAAG;AAAA,QACH,GAAG;AAAA,QACH,OAAO;AAAA,QACP,YAAY,EAAE,OAAO,MAAM;AAAA,QAC3B,YAAY,EAAE,OAAO,MAAM;AAAA;AAAA,IAC7B;AAAA,IACA,oBAAC,YAAS,MAAK,MAAK,GAAG,KAAK,GAAG,KAAK;AAAA,KACtC;AAEJ;AAEA,SAAS,SAAS,OAAkB;AAClC,SACE,qBAAC,QAAK,OAAM,QAAO,SAAO,MAAC,MAAK,MAAK,UAAQ,MAAE,GAAG,OAChD;AAAA,yBAAC,KAAK,QAAL,EAAY,QAAM,MACjB;AAAA,0BAAC,MAAG,uBAAS;AAAA,MACb,oBAAC,aAAU,OAAM,QAAO,2BAAa;AAAA,OACvC;AAAA,IACA,qBAAC,KAAK,QAAL,EAAY,QAAM,MACjB;AAAA,0BAAC,UAAO,GAAG,GAAG;AAAA,MACd,oBAAC,UAAO,IAAG,OAAM,sBAAQ;AAAA,OAC3B;AAAA,IACA,oBAAC,KAAK,YAAL,EACC;AAAA,MAAC;AAAA;AAAA,QACC,KAAI;AAAA,QACJ,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAW;AAAA,QACX,KAAI;AAAA,QACJ,KAAI;AAAA;AAAA,IACN,GACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { Button, Card, CardProps, H2, Image, Paragraph, XStack } from 'tamagui'\n\nexport function CardDemo() {\n  return (\n    <XStack $sm={{ flexDirection: 'column' }} paddingHorizontal=\"$4\" space>\n      <DemoCard\n        animation=\"bouncy\"\n        size=\"$4\"\n        width={250}\n        height={300}\n        scale={0.9}\n        hoverStyle={{ scale: 0.925 }}\n        pressStyle={{ scale: 0.875 }}\n      />\n      <DemoCard size=\"$5\" w={250} h={300} />\n    </XStack>\n  )\n}\n\nfunction DemoCard(props: CardProps) {\n  return (\n    <Card theme=\"dark\" elevate size=\"$4\" bordered {...props}>\n      <Card.Header padded>\n        <H2>Sony A7IV</H2>\n        <Paragraph theme=\"alt2\">Now available</Paragraph>\n      </Card.Header>\n      <Card.Footer padded>\n        <XStack flex={1} />\n        <Button borderRadius=\"$10\">Purchase</Button>\n      </Card.Footer>\n      <Card.Background>\n        <Image\n          position=\"absolute\"\n          width={300}\n          height={300}\n          resizeMode=\"contain\"\n          alignSelf=\"center\"\n          src=\"data:image/jpeg;base64,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\"\n        />\n      </Card.Background>\n    </Card>\n  )\n}\n"],
+  "mappings": "AAII,SACE,KADF;AAJJ,SAAS,QAAQ,MAAiB,IAAI,OAAO,WAAW,cAAc;AAE/D,SAAS,WAAW;AACzB,SACE,qBAAC,UAAO,KAAK,EAAE,eAAe,SAAS,GAAG,mBAAkB,MAAK,OAAK,MACpE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,YAAY,EAAE,OAAO,MAAM;AAAA,QAC3B,YAAY,EAAE,OAAO,MAAM;AAAA;AAAA,IAC7B;AAAA,IACA,oBAAC,YAAS,MAAK,MAAK,GAAG,KAAK,GAAG,KAAK;AAAA,KACtC;AAEJ;AAEA,SAAS,SAAS,OAAkB;AAClC,SACE,qBAAC,QAAK,OAAM,QAAO,SAAO,MAAC,MAAK,MAAK,UAAQ,MAAE,GAAG,OAChD;AAAA,yBAAC,KAAK,QAAL,EAAY,QAAM,MACjB;AAAA,0BAAC,MAAG,uBAAS;AAAA,MACb,oBAAC,aAAU,OAAM,QAAO,2BAAa;AAAA,OACvC;AAAA,IACA,qBAAC,KAAK,QAAL,EAAY,QAAM,MACjB;AAAA,0BAAC,UAAO,MAAM,GAAG;AAAA,MACjB,oBAAC,UAAO,cAAa,OAAM,sBAAQ;AAAA,OACrC;AAAA,IACA,oBAAC,KAAK,YAAL,EACC;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAW;AAAA,QACX,WAAU;AAAA,QACV,KAAI;AAAA;AAAA,IACN,GACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/CheckboxDemo.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Check as CheckIcon } from "@tamagui/lucide-icons";
 import { Checkbox, Label, XStack, YStack } from "tamagui";
 function CheckboxDemo() {
-  return /* @__PURE__ */ jsxs(YStack, { w: 300, ai: "center", space: "$2", children: [
+  return /* @__PURE__ */ jsxs(YStack, { width: 300, alignItems: "center", space: "$2", children: [
     /* @__PURE__ */ jsx(CheckboxWithLabel, { size: "$3" }),
     /* @__PURE__ */ jsx(CheckboxWithLabel, { size: "$4", defaultChecked: true }),
     /* @__PURE__ */ jsx(CheckboxWithLabel, { size: "$5" })
@@ -10,7 +10,7 @@ function CheckboxDemo() {
 }
 function CheckboxWithLabel(props) {
   const id = `checkbox-${props.size.toString().slice(1)}`;
-  return /* @__PURE__ */ jsxs(XStack, { w: 300, ai: "center", space: "$4", children: [
+  return /* @__PURE__ */ jsxs(XStack, { width: 300, alignItems: "center", space: "$4", children: [
     /* @__PURE__ */ jsx(Checkbox, { id, size: props.size, defaultChecked: props.defaultChecked, children: /* @__PURE__ */ jsx(Checkbox.Indicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) }) }),
     /* @__PURE__ */ jsx(Label, { size: props.size, htmlFor: id, children: "Accept terms and conditions" })
   ] });

package/dist/esm/CheckboxDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/CheckboxDemo.tsx"],
-  "sourcesContent": ["import { Check as CheckIcon } from '@tamagui/lucide-icons'\nimport { Checkbox, Label, SizeTokens, XStack, YStack } from 'tamagui'\n\nexport function CheckboxDemo() {\n  return (\n    <YStack w={300} ai=\"center\" space=\"$2\">\n      <CheckboxWithLabel size=\"$3\" />\n      <CheckboxWithLabel size=\"$4\" defaultChecked />\n      <CheckboxWithLabel size=\"$5\" />\n    </YStack>\n  )\n}\n\nfunction CheckboxWithLabel(props: { size: SizeTokens; defaultChecked?: boolean }) {\n  const id = `checkbox-${props.size.toString().slice(1)}`\n  return (\n    <XStack w={300} ai=\"center\" space=\"$4\">\n      <Checkbox id={id} size={props.size} defaultChecked={props.defaultChecked}>\n        <Checkbox.Indicator>\n          <CheckIcon />\n        </Checkbox.Indicator>\n      </Checkbox>\n\n      <Label size={props.size} htmlFor={id}>\n        Accept terms and conditions\n      </Label>\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAKI,SACE,KADF;AALJ,SAAS,SAAS,iBAAiB;AACnC,SAAS,UAAU,OAAmB,QAAQ,cAAc;AAErD,SAAS,eAAe;AAC7B,SACE,qBAAC,UAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,wBAAC,qBAAkB,MAAK,MAAK;AAAA,IAC7B,oBAAC,qBAAkB,MAAK,MAAK,gBAAc,MAAC;AAAA,IAC5C,oBAAC,qBAAkB,MAAK,MAAK;AAAA,KAC/B;AAEJ;AAEA,SAAS,kBAAkB,OAAuD;AAChF,QAAM,KAAK,YAAY,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC;AACpD,SACE,qBAAC,UAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,wBAAC,YAAS,IAAQ,MAAM,MAAM,MAAM,gBAAgB,MAAM,gBACxD,8BAAC,SAAS,WAAT,EACC,8BAAC,aAAU,GACb,GACF;AAAA,IAEA,oBAAC,SAAM,MAAM,MAAM,MAAM,SAAS,IAAI,yCAEtC;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { Check as CheckIcon } from '@tamagui/lucide-icons'\nimport { Checkbox, Label, SizeTokens, XStack, YStack } from 'tamagui'\n\nexport function CheckboxDemo() {\n  return (\n    <YStack width={300} alignItems=\"center\" space=\"$2\">\n      <CheckboxWithLabel size=\"$3\" />\n      <CheckboxWithLabel size=\"$4\" defaultChecked />\n      <CheckboxWithLabel size=\"$5\" />\n    </YStack>\n  )\n}\n\nfunction CheckboxWithLabel(props: { size: SizeTokens; defaultChecked?: boolean }) {\n  const id = `checkbox-${props.size.toString().slice(1)}`\n  return (\n    <XStack width={300} alignItems=\"center\" space=\"$4\">\n      <Checkbox id={id} size={props.size} defaultChecked={props.defaultChecked}>\n        <Checkbox.Indicator>\n          <CheckIcon />\n        </Checkbox.Indicator>\n      </Checkbox>\n\n      <Label size={props.size} htmlFor={id}>\n        Accept terms and conditions\n      </Label>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAKI,SACE,KADF;AALJ,SAAS,SAAS,iBAAiB;AACnC,SAAS,UAAU,OAAmB,QAAQ,cAAc;AAErD,SAAS,eAAe;AAC7B,SACE,qBAAC,UAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA,wBAAC,qBAAkB,MAAK,MAAK;AAAA,IAC7B,oBAAC,qBAAkB,MAAK,MAAK,gBAAc,MAAC;AAAA,IAC5C,oBAAC,qBAAkB,MAAK,MAAK;AAAA,KAC/B;AAEJ;AAEA,SAAS,kBAAkB,OAAuD;AAChF,QAAM,KAAK,YAAY,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC;AACpD,SACE,qBAAC,UAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA,wBAAC,YAAS,IAAQ,MAAM,MAAM,MAAM,gBAAgB,MAAM,gBACxD,8BAAC,SAAS,WAAT,EACC,8BAAC,aAAU,GACb,GACF;AAAA,IAEA,oBAAC,SAAM,MAAM,MAAM,MAAM,SAAS,IAAI,yCAEtC;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/CheckboxDemo.mjs

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Check as CheckIcon } from "@tamagui/lucide-icons";
 import { Checkbox, Label, XStack, YStack } from "tamagui";
 function CheckboxDemo() {
-  return /* @__PURE__ */ jsxs(YStack, { w: 300, ai: "center", space: "$2", children: [
+  return /* @__PURE__ */ jsxs(YStack, { width: 300, alignItems: "center", space: "$2", children: [
     /* @__PURE__ */ jsx(CheckboxWithLabel, { size: "$3" }),
     /* @__PURE__ */ jsx(CheckboxWithLabel, { size: "$4", defaultChecked: true }),
     /* @__PURE__ */ jsx(CheckboxWithLabel, { size: "$5" })
@@ -10,7 +10,7 @@ function CheckboxDemo() {
 }
 function CheckboxWithLabel(props) {
   const id = `checkbox-${props.size.toString().slice(1)}`;
-  return /* @__PURE__ */ jsxs(XStack, { w: 300, ai: "center", space: "$4", children: [
+  return /* @__PURE__ */ jsxs(XStack, { width: 300, alignItems: "center", space: "$4", children: [
     /* @__PURE__ */ jsx(Checkbox, { id, size: props.size, defaultChecked: props.defaultChecked, children: /* @__PURE__ */ jsx(Checkbox.Indicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) }) }),
     /* @__PURE__ */ jsx(Label, { size: props.size, htmlFor: id, children: "Accept terms and conditions" })
   ] });

package/dist/esm/CheckboxDemo.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/CheckboxDemo.tsx"],
-  "sourcesContent": ["import { Check as CheckIcon } from '@tamagui/lucide-icons'\nimport { Checkbox, Label, SizeTokens, XStack, YStack } from 'tamagui'\n\nexport function CheckboxDemo() {\n  return (\n    <YStack w={300} ai=\"center\" space=\"$2\">\n      <CheckboxWithLabel size=\"$3\" />\n      <CheckboxWithLabel size=\"$4\" defaultChecked />\n      <CheckboxWithLabel size=\"$5\" />\n    </YStack>\n  )\n}\n\nfunction CheckboxWithLabel(props: { size: SizeTokens; defaultChecked?: boolean }) {\n  const id = `checkbox-${props.size.toString().slice(1)}`\n  return (\n    <XStack w={300} ai=\"center\" space=\"$4\">\n      <Checkbox id={id} size={props.size} defaultChecked={props.defaultChecked}>\n        <Checkbox.Indicator>\n          <CheckIcon />\n        </Checkbox.Indicator>\n      </Checkbox>\n\n      <Label size={props.size} htmlFor={id}>\n        Accept terms and conditions\n      </Label>\n    </XStack>\n  )\n}\n"],
-  "mappings": "AAKI,SACE,KADF;AALJ,SAAS,SAAS,iBAAiB;AACnC,SAAS,UAAU,OAAmB,QAAQ,cAAc;AAErD,SAAS,eAAe;AAC7B,SACE,qBAAC,UAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,wBAAC,qBAAkB,MAAK,MAAK;AAAA,IAC7B,oBAAC,qBAAkB,MAAK,MAAK,gBAAc,MAAC;AAAA,IAC5C,oBAAC,qBAAkB,MAAK,MAAK;AAAA,KAC/B;AAEJ;AAEA,SAAS,kBAAkB,OAAuD;AAChF,QAAM,KAAK,YAAY,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC;AACpD,SACE,qBAAC,UAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,wBAAC,YAAS,IAAQ,MAAM,MAAM,MAAM,gBAAgB,MAAM,gBACxD,8BAAC,SAAS,WAAT,EACC,8BAAC,aAAU,GACb,GACF;AAAA,IAEA,oBAAC,SAAM,MAAM,MAAM,MAAM,SAAS,IAAI,yCAEtC;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { Check as CheckIcon } from '@tamagui/lucide-icons'\nimport { Checkbox, Label, SizeTokens, XStack, YStack } from 'tamagui'\n\nexport function CheckboxDemo() {\n  return (\n    <YStack width={300} alignItems=\"center\" space=\"$2\">\n      <CheckboxWithLabel size=\"$3\" />\n      <CheckboxWithLabel size=\"$4\" defaultChecked />\n      <CheckboxWithLabel size=\"$5\" />\n    </YStack>\n  )\n}\n\nfunction CheckboxWithLabel(props: { size: SizeTokens; defaultChecked?: boolean }) {\n  const id = `checkbox-${props.size.toString().slice(1)}`\n  return (\n    <XStack width={300} alignItems=\"center\" space=\"$4\">\n      <Checkbox id={id} size={props.size} defaultChecked={props.defaultChecked}>\n        <Checkbox.Indicator>\n          <CheckIcon />\n        </Checkbox.Indicator>\n      </Checkbox>\n\n      <Label size={props.size} htmlFor={id}>\n        Accept terms and conditions\n      </Label>\n    </XStack>\n  )\n}\n"],
+  "mappings": "AAKI,SACE,KADF;AALJ,SAAS,SAAS,iBAAiB;AACnC,SAAS,UAAU,OAAmB,QAAQ,cAAc;AAErD,SAAS,eAAe;AAC7B,SACE,qBAAC,UAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA,wBAAC,qBAAkB,MAAK,MAAK;AAAA,IAC7B,oBAAC,qBAAkB,MAAK,MAAK,gBAAc,MAAC;AAAA,IAC5C,oBAAC,qBAAkB,MAAK,MAAK;AAAA,KAC/B;AAEJ;AAEA,SAAS,kBAAkB,OAAuD;AAChF,QAAM,KAAK,YAAY,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC;AACpD,SACE,qBAAC,UAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA,wBAAC,YAAS,IAAQ,MAAM,MAAM,MAAM,gBAAgB,MAAM,gBACxD,8BAAC,SAAS,WAAT,EACC,8BAAC,aAAU,GACb,GACF;AAAA,IAEA,oBAAC,SAAM,MAAM,MAAM,MAAM,SAAS,IAAI,yCAEtC;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/ColorsDemo.js

@@ -13,7 +13,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 /* @__PURE__ */ jsxs(YStack, { mt: "$4", space: "$8", children: [
+  return /* @__PURE__ */ jsxs(YStack, { marginTop: "$4", space: "$8", children: [
     /* @__PURE__ */ jsx(ColorsRow, { title: "Light", colors: colorsLight }),
     /* @__PURE__ */ jsx(Separator, {}),
     /* @__PURE__ */ jsx(ColorsRow, { title: "Dark", colors: colorsDark })
@@ -22,19 +22,19 @@ function ColorsDemo() {
 function ColorsRow({ title, colors }) {
   return /* @__PURE__ */ jsxs(YStack, { space: true, $sm: { space: "$2" }, children: [
     /* @__PURE__ */ jsx(H2, { size: "$2", children: title }),
-    /* @__PURE__ */ jsxs(XStack, { space: true, als: "center", children: [
+    /* @__PURE__ */ jsxs(XStack, { space: true, alignSelf: "center", children: [
       /* @__PURE__ */ jsxs(YStack, { space: true, $sm: { space: "$2" }, als: "center", children: [
         colors.map((group, index) => {
           return /* @__PURE__ */ jsx(XStack, { space: "$2", children: group.map((color) => {
             return /* @__PURE__ */ jsx(
               Square,
               {
-                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"
                 },
@@ -46,18 +46,18 @@ function ColorsRow({ title, colors }) {
             );
           }) }, index);
         }),
-        /* @__PURE__ */ jsx(XStack, { space: "$2", als: "center", children: new Array(13).fill(0).slice(1).map((_, index) => {
+        /* @__PURE__ */ jsx(XStack, { space: "$2", alignSelf: "center", children: new Array(13).fill(0).slice(1).map((_, index) => {
           return /* @__PURE__ */ jsx(
             Paragraph,
             {
-              col: "$color10",
-              ta: "center",
-              w: "$4",
+              color: "$color10",
+              textAlign: "center",
+              width: "$4",
               $sm: {
-                w: "$2"
+                width: "$2"
               },
               $xs: {
-                w: "$1"
+                width: "$1"
               },
               children: index
             },
@@ -65,18 +65,18 @@ function ColorsRow({ title, colors }) {
           );
         }) })
       ] }),
-      /* @__PURE__ */ jsx(YStack, { space: "$4", mt: "$2", children: colorGroups.map((name) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(YStack, { space: "$4", marginTop: "$2", children: colorGroups.map((name) => /* @__PURE__ */ jsx(
         Paragraph,
         {
           theme: name,
-          col: "$color10",
-          h: "$4",
+          color: "$color10",
+          height: "$4",
           rotate: "-10deg",
           $sm: {
-            h: "$2"
+            height: "$2"
           },
           $xs: {
-            h: "$1"
+            height: "$1"
           },
           children: name
         },

package/dist/esm/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": "AAmBI,SACE,KADF;AAlBJ;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,qBAAC,UAAO,IAAG,MAAK,OAAM,MACpB;AAAA,wBAAC,aAAU,OAAM,SAAQ,QAAQ,aAAa;AAAA,IAC9C,oBAAC,aAAU;AAAA,IACX,oBAAC,aAAU,OAAM,QAAO,QAAQ,YAAY;AAAA,KAC9C;AAEJ;AAEA,SAAS,UAAU,EAAE,OAAO,OAAO,GAA4C;AAC7E,SACE,qBAAC,UAAO,OAAK,MAAC,KAAK,EAAE,OAAO,KAAK,GAC/B;AAAA,wBAAC,MAAG,MAAK,MAAM,iBAAM;AAAA,IAErB,qBAAC,UAAO,OAAK,MAAC,KAAI,UAChB;AAAA,2BAAC,UAAO,OAAK,MAAC,KAAK,EAAE,OAAO,KAAK,GAAG,KAAI,UACrC;AAAA,eAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBACE,oBAAC,UAAO,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,IAAI,iBAAiB,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,oBAAC,UAAO,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,oBAAC,UAAO,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": "AAmBI,SACE,KADF;AAlBJ;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,qBAAC,UAAO,WAAU,MAAK,OAAM,MAC3B;AAAA,wBAAC,aAAU,OAAM,SAAQ,QAAQ,aAAa;AAAA,IAC9C,oBAAC,aAAU;AAAA,IACX,oBAAC,aAAU,OAAM,QAAO,QAAQ,YAAY;AAAA,KAC9C;AAEJ;AAEA,SAAS,UAAU,EAAE,OAAO,OAAO,GAA4C;AAC7E,SACE,qBAAC,UAAO,OAAK,MAAC,KAAK,EAAE,OAAO,KAAK,GAC/B;AAAA,wBAAC,MAAG,MAAK,MAAM,iBAAM;AAAA,IAErB,qBAAC,UAAO,OAAK,MAAC,WAAU,UACtB;AAAA,2BAAC,UAAO,OAAK,MAAC,KAAK,EAAE,OAAO,KAAK,GAAG,KAAI,UACrC;AAAA,eAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBACE,oBAAC,UAAO,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,iBAAiB,iBAAiB,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,oBAAC,UAAO,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,oBAAC,UAAO,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/esm/ColorsDemo.mjs

@@ -13,7 +13,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 /* @__PURE__ */ jsxs(YStack, { mt: "$4", space: "$8", children: [
+  return /* @__PURE__ */ jsxs(YStack, { marginTop: "$4", space: "$8", children: [
     /* @__PURE__ */ jsx(ColorsRow, { title: "Light", colors: colorsLight }),
     /* @__PURE__ */ jsx(Separator, {}),
     /* @__PURE__ */ jsx(ColorsRow, { title: "Dark", colors: colorsDark })
@@ -22,19 +22,19 @@ function ColorsDemo() {
 function ColorsRow({ title, colors }) {
   return /* @__PURE__ */ jsxs(YStack, { space: true, $sm: { space: "$2" }, children: [
     /* @__PURE__ */ jsx(H2, { size: "$2", children: title }),
-    /* @__PURE__ */ jsxs(XStack, { space: true, als: "center", children: [
+    /* @__PURE__ */ jsxs(XStack, { space: true, alignSelf: "center", children: [
       /* @__PURE__ */ jsxs(YStack, { space: true, $sm: { space: "$2" }, als: "center", children: [
         colors.map((group, index) => {
           return /* @__PURE__ */ jsx(XStack, { space: "$2", children: group.map((color) => {
             return /* @__PURE__ */ jsx(
               Square,
               {
-                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"
                 },
@@ -46,18 +46,18 @@ function ColorsRow({ title, colors }) {
             );
           }) }, index);
         }),
-        /* @__PURE__ */ jsx(XStack, { space: "$2", als: "center", children: new Array(13).fill(0).slice(1).map((_, index) => {
+        /* @__PURE__ */ jsx(XStack, { space: "$2", alignSelf: "center", children: new Array(13).fill(0).slice(1).map((_, index) => {
           return /* @__PURE__ */ jsx(
             Paragraph,
             {
-              col: "$color10",
-              ta: "center",
-              w: "$4",
+              color: "$color10",
+              textAlign: "center",
+              width: "$4",
               $sm: {
-                w: "$2"
+                width: "$2"
               },
               $xs: {
-                w: "$1"
+                width: "$1"
               },
               children: index
             },
@@ -65,18 +65,18 @@ function ColorsRow({ title, colors }) {
           );
         }) })
       ] }),
-      /* @__PURE__ */ jsx(YStack, { space: "$4", mt: "$2", children: colorGroups.map((name) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(YStack, { space: "$4", marginTop: "$2", children: colorGroups.map((name) => /* @__PURE__ */ jsx(
         Paragraph,
         {
           theme: name,
-          col: "$color10",
-          h: "$4",
+          color: "$color10",
+          height: "$4",
           rotate: "-10deg",
           $sm: {
-            h: "$2"
+            height: "$2"
           },
           $xs: {
-            h: "$1"
+            height: "$1"
           },
           children: name
         },

package/dist/esm/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": "AAmBI,SACE,KADF;AAlBJ;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,qBAAC,UAAO,IAAG,MAAK,OAAM,MACpB;AAAA,wBAAC,aAAU,OAAM,SAAQ,QAAQ,aAAa;AAAA,IAC9C,oBAAC,aAAU;AAAA,IACX,oBAAC,aAAU,OAAM,QAAO,QAAQ,YAAY;AAAA,KAC9C;AAEJ;AAEA,SAAS,UAAU,EAAE,OAAO,OAAO,GAA4C;AAC7E,SACE,qBAAC,UAAO,OAAK,MAAC,KAAK,EAAE,OAAO,KAAK,GAC/B;AAAA,wBAAC,MAAG,MAAK,MAAM,iBAAM;AAAA,IAErB,qBAAC,UAAO,OAAK,MAAC,KAAI,UAChB;AAAA,2BAAC,UAAO,OAAK,MAAC,KAAK,EAAE,OAAO,KAAK,GAAG,KAAI,UACrC;AAAA,eAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBACE,oBAAC,UAAO,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,IAAI,iBAAiB,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,oBAAC,UAAO,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,oBAAC,UAAO,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": "AAmBI,SACE,KADF;AAlBJ;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,qBAAC,UAAO,WAAU,MAAK,OAAM,MAC3B;AAAA,wBAAC,aAAU,OAAM,SAAQ,QAAQ,aAAa;AAAA,IAC9C,oBAAC,aAAU;AAAA,IACX,oBAAC,aAAU,OAAM,QAAO,QAAQ,YAAY;AAAA,KAC9C;AAEJ;AAEA,SAAS,UAAU,EAAE,OAAO,OAAO,GAA4C;AAC7E,SACE,qBAAC,UAAO,OAAK,MAAC,KAAK,EAAE,OAAO,KAAK,GAC/B;AAAA,wBAAC,MAAG,MAAK,MAAM,iBAAM;AAAA,IAErB,qBAAC,UAAO,OAAK,MAAC,WAAU,UACtB;AAAA,2BAAC,UAAO,OAAK,MAAC,KAAK,EAAE,OAAO,KAAK,GAAG,KAAI,UACrC;AAAA,eAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,iBACE,oBAAC,UAAO,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,iBAAiB,iBAAiB,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,oBAAC,UAAO,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,oBAAC,UAAO,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/esm/DialogDemo.js

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

package/dist/esm/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": "AAsBQ,cAIA,YAJA;AAtBR,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,qBAAC,UAAO,OAAK,MACX;AAAA,wBAAC,OAAO,SAAP,EAAe,SAAO,MACrB,8BAAC,UAAO,0BAAY,GACtB;AAAA,IAEA,oBAAC,SAAM,MAAK,MAAK,UAAS,SACxB,+BAAC,SAAM,QAAQ,KAAQ,OAAK,MAAC,uBAAqB,MAChD;AAAA,0BAAC,MAAM,OAAN,EAAY,SAAQ,MAAK,OAAK,MAC7B,8BAAC,MAAM,UAAN,EAAe,GAClB;AAAA,MACA,oBAAC,MAAM,SAAN,EAAc;AAAA,OACjB,GACF;AAAA,IAEA,qBAAC,OAAO,QAAP,EACC;AAAA;AAAA,QAAC,OAAO;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,OAAO;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,gCAAC,OAAO,OAAP,EAAa,0BAAY;AAAA,YAC1B,oBAAC,OAAO,aAAP,EAAmB,6EAEpB;AAAA,YACA,qBAAC,YAAS,OAAM,MAAK,YAAU,MAC7B;AAAA,kCAAC,SAAM,GAAG,KAAK,gBAAe,YAAW,SAAQ,QAAO,kBAExD;AAAA,cACA,oBAAC,SAAM,GAAG,GAAG,IAAG,QAAO,cAAa,gBAAe;AAAA,eACrD;AAAA,YACA,qBAAC,YAAS,OAAM,MAAK,YAAU,MAC7B;AAAA,kCAAC,SAAM,GAAG,KAAK,gBAAe,YAAW,SAAQ,YAC/C,8BAAC,iBAAc,OAAM,sBAAqB,WAAU,gBAClD,8BAAC,aAAU,kBAAI,GACjB,GACF;AAAA,cACA,oBAAC,cAAW;AAAA,eACd;AAAA,YAEA,oBAAC,UAAO,IAAG,YAAW,IAAG,MACvB,8BAAC,OAAO,OAAP,EAAa,oBAAkB,MAAC,SAAO,MACtC,8BAAC,UAAO,OAAM,QAAO,cAAW,SAAQ,0BAExC,GACF,GACF;AAAA,YAEA,oBAAC,YACC,8BAAC,OAAO,OAAP,EAAa,SAAO,MACnB,8BAAC,UAAO,KAAI,YAAW,GAAE,MAAK,GAAE,MAAK,MAAK,MAAK,UAAQ,MAAC,MAAM,GAAG,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": "AAsBQ,cAIA,YAJA;AAtBR,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,qBAAC,UAAO,OAAK,MACX;AAAA,wBAAC,OAAO,SAAP,EAAe,SAAO,MACrB,8BAAC,UAAO,0BAAY,GACtB;AAAA,IAEA,oBAAC,SAAM,MAAK,MAAK,UAAS,SACxB,+BAAC,SAAM,QAAQ,KAAQ,OAAK,MAAC,uBAAqB,MAChD;AAAA,0BAAC,MAAM,OAAN,EAAY,SAAQ,MAAK,OAAK,MAC7B,8BAAC,MAAM,UAAN,EAAe,GAClB;AAAA,MACA,oBAAC,MAAM,SAAN,EAAc;AAAA,OACjB,GACF;AAAA,IAEA,qBAAC,OAAO,QAAP,EACC;AAAA;AAAA,QAAC,OAAO;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,OAAO;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,gCAAC,OAAO,OAAP,EAAa,0BAAY;AAAA,YAC1B,oBAAC,OAAO,aAAP,EAAmB,6EAEpB;AAAA,YACA,qBAAC,YAAS,OAAM,MAAK,YAAU,MAC7B;AAAA,kCAAC,SAAM,OAAO,KAAK,gBAAe,YAAW,SAAQ,QAAO,kBAE5D;AAAA,cACA,oBAAC,SAAM,MAAM,GAAG,IAAG,QAAO,cAAa,gBAAe;AAAA,eACxD;AAAA,YACA,qBAAC,YAAS,OAAM,MAAK,YAAU,MAC7B;AAAA,kCAAC,SAAM,OAAO,KAAK,gBAAe,YAAW,SAAQ,YACnD,8BAAC,iBAAc,OAAM,sBAAqB,WAAU,gBAClD,8BAAC,aAAU,kBAAI,GACjB,GACF;AAAA,cACA,oBAAC,cAAW;AAAA,eACd;AAAA,YAEA,oBAAC,UAAO,YAAW,YAAW,WAAU,MACtC,8BAAC,OAAO,OAAP,EAAa,oBAAkB,MAAC,SAAO,MACtC,8BAAC,UAAO,OAAM,QAAO,cAAW,SAAQ,0BAExC,GACF,GACF;AAAA,YAEA,oBAAC,YACC,8BAAC,OAAO,OAAP,EAAa,SAAO,MACnB,8BAAC,UAAO,UAAS,YAAW,KAAI,MAAK,OAAM,MAAK,MAAK,MAAK,UAAQ,MAAC,MAAM,GAAG,GAC9E,GACF;AAAA;AAAA;AAAA,QA5CI;AAAA,MA6CN;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/DialogDemo.mjs

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

package/dist/esm/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": "AAsBQ,cAIA,YAJA;AAtBR,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,qBAAC,UAAO,OAAK,MACX;AAAA,wBAAC,OAAO,SAAP,EAAe,SAAO,MACrB,8BAAC,UAAO,0BAAY,GACtB;AAAA,IAEA,oBAAC,SAAM,MAAK,MAAK,UAAS,SACxB,+BAAC,SAAM,QAAQ,KAAQ,OAAK,MAAC,uBAAqB,MAChD;AAAA,0BAAC,MAAM,OAAN,EAAY,SAAQ,MAAK,OAAK,MAC7B,8BAAC,MAAM,UAAN,EAAe,GAClB;AAAA,MACA,oBAAC,MAAM,SAAN,EAAc;AAAA,OACjB,GACF;AAAA,IAEA,qBAAC,OAAO,QAAP,EACC;AAAA;AAAA,QAAC,OAAO;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,OAAO;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,gCAAC,OAAO,OAAP,EAAa,0BAAY;AAAA,YAC1B,oBAAC,OAAO,aAAP,EAAmB,6EAEpB;AAAA,YACA,qBAAC,YAAS,OAAM,MAAK,YAAU,MAC7B;AAAA,kCAAC,SAAM,GAAG,KAAK,gBAAe,YAAW,SAAQ,QAAO,kBAExD;AAAA,cACA,oBAAC,SAAM,GAAG,GAAG,IAAG,QAAO,cAAa,gBAAe;AAAA,eACrD;AAAA,YACA,qBAAC,YAAS,OAAM,MAAK,YAAU,MAC7B;AAAA,kCAAC,SAAM,GAAG,KAAK,gBAAe,YAAW,SAAQ,YAC/C,8BAAC,iBAAc,OAAM,sBAAqB,WAAU,gBAClD,8BAAC,aAAU,kBAAI,GACjB,GACF;AAAA,cACA,oBAAC,cAAW;AAAA,eACd;AAAA,YAEA,oBAAC,UAAO,IAAG,YAAW,IAAG,MACvB,8BAAC,OAAO,OAAP,EAAa,oBAAkB,MAAC,SAAO,MACtC,8BAAC,UAAO,OAAM,QAAO,cAAW,SAAQ,0BAExC,GACF,GACF;AAAA,YAEA,oBAAC,YACC,8BAAC,OAAO,OAAP,EAAa,SAAO,MACnB,8BAAC,UAAO,KAAI,YAAW,GAAE,MAAK,GAAE,MAAK,MAAK,MAAK,UAAQ,MAAC,MAAM,GAAG,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": "AAsBQ,cAIA,YAJA;AAtBR,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,qBAAC,UAAO,OAAK,MACX;AAAA,wBAAC,OAAO,SAAP,EAAe,SAAO,MACrB,8BAAC,UAAO,0BAAY,GACtB;AAAA,IAEA,oBAAC,SAAM,MAAK,MAAK,UAAS,SACxB,+BAAC,SAAM,QAAQ,KAAQ,OAAK,MAAC,uBAAqB,MAChD;AAAA,0BAAC,MAAM,OAAN,EAAY,SAAQ,MAAK,OAAK,MAC7B,8BAAC,MAAM,UAAN,EAAe,GAClB;AAAA,MACA,oBAAC,MAAM,SAAN,EAAc;AAAA,OACjB,GACF;AAAA,IAEA,qBAAC,OAAO,QAAP,EACC;AAAA;AAAA,QAAC,OAAO;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,OAAO;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,gCAAC,OAAO,OAAP,EAAa,0BAAY;AAAA,YAC1B,oBAAC,OAAO,aAAP,EAAmB,6EAEpB;AAAA,YACA,qBAAC,YAAS,OAAM,MAAK,YAAU,MAC7B;AAAA,kCAAC,SAAM,OAAO,KAAK,gBAAe,YAAW,SAAQ,QAAO,kBAE5D;AAAA,cACA,oBAAC,SAAM,MAAM,GAAG,IAAG,QAAO,cAAa,gBAAe;AAAA,eACxD;AAAA,YACA,qBAAC,YAAS,OAAM,MAAK,YAAU,MAC7B;AAAA,kCAAC,SAAM,OAAO,KAAK,gBAAe,YAAW,SAAQ,YACnD,8BAAC,iBAAc,OAAM,sBAAqB,WAAU,gBAClD,8BAAC,aAAU,kBAAI,GACjB,GACF;AAAA,cACA,oBAAC,cAAW;AAAA,eACd;AAAA,YAEA,oBAAC,UAAO,YAAW,YAAW,WAAU,MACtC,8BAAC,OAAO,OAAP,EAAa,oBAAkB,MAAC,SAAO,MACtC,8BAAC,UAAO,OAAM,QAAO,cAAW,SAAQ,0BAExC,GACF,GACF;AAAA,YAEA,oBAAC,YACC,8BAAC,OAAO,OAAP,EAAa,SAAO,MACnB,8BAAC,UAAO,UAAS,YAAW,KAAI,MAAK,OAAM,MAAK,MAAK,MAAK,UAAQ,MAAC,MAAM,GAAG,GAC9E,GACF;AAAA;AAAA;AAAA,QA5CI;AAAA,MA6CN;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/FormsDemo.js

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