@tamagui/demos 1.11.2 → 1.12.0

package/dist/cjs/AddThemeDemo.js

@@ -27,7 +27,7 @@ var import_react = require("react");
 var import_tamagui = require("tamagui");
 function AddThemeDemo() {
   const [theme, setTheme] = (0, import_react.useState)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { ai: "center", space: true, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { alignItems: "center", space: true, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.H3, { children: [
       "Theme: ",
       theme ?? "none"

package/dist/cjs/AddThemeDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/AddThemeDemo.tsx"],
-  "sourcesContent": ["import { addTheme } from '@tamagui/theme'\nimport { useState } from 'react'\nimport { Button, H3, Square, Theme, YStack } from 'tamagui'\n\nexport function AddThemeDemo() {\n  const [theme, setTheme] = useState<any>()\n\n  return (\n    <YStack ai=\"center\" space>\n      <H3>Theme: {theme ?? 'none'}</H3>\n\n      <Theme name={theme ?? 'red'}>\n        <Square borderRadius=\"$8\" size={100} backgroundColor=\"$color\" />\n      </Theme>\n\n      <Button\n        disabled={theme === 'superblue'}\n        onPress={() => {\n          addTheme({\n            name: 'superblue',\n            insertCSS: true,\n            theme: {\n              background: '#000',\n              color: 'blue',\n            },\n          })\n          setTheme('superblue')\n        }}\n      >\n        Add superblue theme\n      </Button>\n    </YStack>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AASM;AATN,mBAAyB;AACzB,mBAAyB;AACzB,qBAAkD;AAE3C,SAAS,eAAe;AAC7B,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAc;AAExC,SACE,6CAAC,yBAAO,IAAG,UAAS,OAAK,MACvB;AAAA,iDAAC,qBAAG;AAAA;AAAA,MAAQ,SAAS;AAAA,OAAO;AAAA,IAE5B,4CAAC,wBAAM,MAAM,SAAS,OACpB,sDAAC,yBAAO,cAAa,MAAK,MAAM,KAAK,iBAAgB,UAAS,GAChE;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,UAAU;AAAA,QACpB,SAAS,MAAM;AACb,qCAAS;AAAA,YACP,MAAM;AAAA,YACN,WAAW;AAAA,YACX,OAAO;AAAA,cACL,YAAY;AAAA,cACZ,OAAO;AAAA,YACT;AAAA,UACF,CAAC;AACD,mBAAS,WAAW;AAAA,QACtB;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { addTheme } from '@tamagui/theme'\nimport { useState } from 'react'\nimport { Button, H3, Square, Theme, YStack } from 'tamagui'\n\nexport function AddThemeDemo() {\n  const [theme, setTheme] = useState<any>()\n\n  return (\n    <YStack alignItems=\"center\" space>\n      <H3>Theme: {theme ?? 'none'}</H3>\n\n      <Theme name={theme ?? 'red'}>\n        <Square borderRadius=\"$8\" size={100} backgroundColor=\"$color\" />\n      </Theme>\n\n      <Button\n        disabled={theme === 'superblue'}\n        onPress={() => {\n          addTheme({\n            name: 'superblue',\n            insertCSS: true,\n            theme: {\n              background: '#000',\n              color: 'blue',\n            },\n          })\n          setTheme('superblue')\n        }}\n      >\n        Add superblue theme\n      </Button>\n    </YStack>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AASM;AATN,mBAAyB;AACzB,mBAAyB;AACzB,qBAAkD;AAE3C,SAAS,eAAe;AAC7B,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAc;AAExC,SACE,6CAAC,yBAAO,YAAW,UAAS,OAAK,MAC/B;AAAA,iDAAC,qBAAG;AAAA;AAAA,MAAQ,SAAS;AAAA,OAAO;AAAA,IAE5B,4CAAC,wBAAM,MAAM,SAAS,OACpB,sDAAC,yBAAO,cAAa,MAAK,MAAM,KAAK,iBAAgB,UAAS,GAChE;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,UAAU;AAAA,QACpB,SAAS,MAAM;AACb,qCAAS;AAAA,YACP,MAAM;AAAA,YACN,WAAW;AAAA,YACX,OAAO;AAAA,cACL,YAAY;AAAA,cACZ,OAAO;AAAA,YACT;AAAA,UACF,CAAC;AACD,mBAAS,WAAW;AAAA,QACtB;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/AlertDialogDemo.js

@@ -31,9 +31,9 @@ function AlertDialogDemo() {
         import_tamagui.AlertDialog.Overlay,
         {
           animation: "quick",
-          o: 0.5,
-          enterStyle: { o: 0 },
-          exitStyle: { o: 0 }
+          opacity: 0.5,
+          enterStyle: { opacity: 0 },
+          exitStyle: { opacity: 0 }
         },
         "overlay"
       ),
@@ -59,7 +59,7 @@ function AlertDialogDemo() {
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { space: true, children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AlertDialog.Title, { children: "Accept" }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AlertDialog.Description, { children: "By pressing yes, you accept our terms and conditions." }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: "$3", jc: "flex-end", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: "$3", justifyContent: "flex-end", children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AlertDialog.Cancel, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: "Cancel" }) }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.AlertDialog.Action, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { theme: "active", children: "Accept" }) })
             ] })

package/dist/cjs/AlertDialogDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/AlertDialogDemo.tsx"],
-  "sourcesContent": ["import { AlertDialog, Button, XStack, YStack } from 'tamagui'\n\nexport function AlertDialogDemo() {\n  return (\n    <AlertDialog native>\n      <AlertDialog.Trigger asChild>\n        <Button>Show Alert</Button>\n      </AlertDialog.Trigger>\n\n      <AlertDialog.Portal>\n        <AlertDialog.Overlay\n          key=\"overlay\"\n          animation=\"quick\"\n          o={0.5}\n          enterStyle={{ o: 0 }}\n          exitStyle={{ o: 0 }}\n        />\n        <AlertDialog.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          x={0}\n          scale={1}\n          opacity={1}\n          y={0}\n        >\n          <YStack space>\n            <AlertDialog.Title>Accept</AlertDialog.Title>\n            <AlertDialog.Description>\n              By pressing yes, you accept our terms and conditions.\n            </AlertDialog.Description>\n\n            <XStack space=\"$3\" jc=\"flex-end\">\n              <AlertDialog.Cancel asChild>\n                <Button>Cancel</Button>\n              </AlertDialog.Cancel>\n              <AlertDialog.Action asChild>\n                <Button theme=\"active\">Accept</Button>\n              </AlertDialog.Action>\n            </XStack>\n          </YStack>\n        </AlertDialog.Content>\n      </AlertDialog.Portal>\n    </AlertDialog>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMQ;AANR,qBAAoD;AAE7C,SAAS,kBAAkB;AAChC,SACE,6CAAC,8BAAY,QAAM,MACjB;AAAA,gDAAC,2BAAY,SAAZ,EAAoB,SAAO,MAC1B,sDAAC,yBAAO,wBAAU,GACpB;AAAA,IAEA,6CAAC,2BAAY,QAAZ,EACC;AAAA;AAAA,QAAC,2BAAY;AAAA,QAAZ;AAAA,UAEC,WAAU;AAAA,UACV,GAAG;AAAA,UACH,YAAY,EAAE,GAAG,EAAE;AAAA,UACnB,WAAW,EAAE,GAAG,EAAE;AAAA;AAAA,QAJd;AAAA,MAKN;AAAA,MACA;AAAA,QAAC,2BAAY;AAAA,QAAZ;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,GAAG;AAAA,UACH,OAAO;AAAA,UACP,SAAS;AAAA,UACT,GAAG;AAAA,UAEH,uDAAC,yBAAO,OAAK,MACX;AAAA,wDAAC,2BAAY,OAAZ,EAAkB,oBAAM;AAAA,YACzB,4CAAC,2BAAY,aAAZ,EAAwB,mEAEzB;AAAA,YAEA,6CAAC,yBAAO,OAAM,MAAK,IAAG,YACpB;AAAA,0DAAC,2BAAY,QAAZ,EAAmB,SAAO,MACzB,sDAAC,yBAAO,oBAAM,GAChB;AAAA,cACA,4CAAC,2BAAY,QAAZ,EAAmB,SAAO,MACzB,sDAAC,yBAAO,OAAM,UAAS,oBAAM,GAC/B;AAAA,eACF;AAAA,aACF;AAAA;AAAA,QA9BI;AAAA,MA+BN;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { AlertDialog, Button, XStack, YStack } from 'tamagui'\n\nexport function AlertDialogDemo() {\n  return (\n    <AlertDialog native>\n      <AlertDialog.Trigger asChild>\n        <Button>Show Alert</Button>\n      </AlertDialog.Trigger>\n\n      <AlertDialog.Portal>\n        <AlertDialog.Overlay\n          key=\"overlay\"\n          animation=\"quick\"\n          opacity={0.5}\n          enterStyle={{opacity:0 }}\n          exitStyle={{opacity:0 }}\n        />\n        <AlertDialog.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          x={0}\n          scale={1}\n          opacity={1}\n          y={0}\n        >\n          <YStack space>\n            <AlertDialog.Title>Accept</AlertDialog.Title>\n            <AlertDialog.Description>\n              By pressing yes, you accept our terms and conditions.\n            </AlertDialog.Description>\n\n            <XStack space=\"$3\" justifyContent=\"flex-end\">\n              <AlertDialog.Cancel asChild>\n                <Button>Cancel</Button>\n              </AlertDialog.Cancel>\n              <AlertDialog.Action asChild>\n                <Button theme=\"active\">Accept</Button>\n              </AlertDialog.Action>\n            </XStack>\n          </YStack>\n        </AlertDialog.Content>\n      </AlertDialog.Portal>\n    </AlertDialog>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMQ;AANR,qBAAoD;AAE7C,SAAS,kBAAkB;AAChC,SACE,6CAAC,8BAAY,QAAM,MACjB;AAAA,gDAAC,2BAAY,SAAZ,EAAoB,SAAO,MAC1B,sDAAC,yBAAO,wBAAU,GACpB;AAAA,IAEA,6CAAC,2BAAY,QAAZ,EACC;AAAA;AAAA,QAAC,2BAAY;AAAA,QAAZ;AAAA,UAEC,WAAU;AAAA,UACV,SAAS;AAAA,UACT,YAAY,EAAC,SAAQ,EAAE;AAAA,UACvB,WAAW,EAAC,SAAQ,EAAE;AAAA;AAAA,QAJlB;AAAA,MAKN;AAAA,MACA;AAAA,QAAC,2BAAY;AAAA,QAAZ;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,GAAG;AAAA,UACH,OAAO;AAAA,UACP,SAAS;AAAA,UACT,GAAG;AAAA,UAEH,uDAAC,yBAAO,OAAK,MACX;AAAA,wDAAC,2BAAY,OAAZ,EAAkB,oBAAM;AAAA,YACzB,4CAAC,2BAAY,aAAZ,EAAwB,mEAEzB;AAAA,YAEA,6CAAC,yBAAO,OAAM,MAAK,gBAAe,YAChC;AAAA,0DAAC,2BAAY,QAAZ,EAAmB,SAAO,MACzB,sDAAC,yBAAO,oBAAM,GAChB;AAAA,cACA,4CAAC,2BAAY,QAAZ,EAAmB,SAAO,MACzB,sDAAC,yBAAO,OAAM,UAAS,oBAAM,GAC/B;AAAA,eACF;AAAA,aACF;AAAA;AAAA,QA9BI;AAAA,MA+BN;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/AnimationsDemo.js

@@ -45,10 +45,10 @@ function AnimationsDemo(props) {
         animation: props.animation || "bouncy",
         onPress,
         size: 104,
-        boc: "$borderColor",
-        bw: 1,
-        br: "$9",
-        bc: "$color9",
+        borderColor: "$borderColor",
+        borderWidth: 1,
+        borderRadius: "$9",
+        backgroundColor: "$color9",
         hoverStyle: {
           scale: 1.1
         },
@@ -62,9 +62,9 @@ function AnimationsDemo(props) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_tamagui.Button,
       {
-        pos: "absolute",
-        b: 20,
-        l: 20,
+        position: "absolute",
+        bottom: 20,
+        left: 20,
         icon: import_lucide_icons.Play,
         theme: props.tint,
         size: "$5",

package/dist/cjs/AnimationsDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/AnimationsDemo.tsx"],
-  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Play } from '@tamagui/lucide-icons'\nimport { Button, Square, useControllableState, useEvent } from 'tamagui'\n\nexport function AnimationsDemo(props) {\n  const [positionI, setPositionI] = useControllableState({\n    strategy: 'most-recent-wins',\n    prop: props.position,\n    defaultProp: 0,\n  })\n  const position = positions[positionI]\n  const onPress = useEvent(() => {\n    setPositionI((x) => {\n      return (x + 1) % positions.length\n    })\n  })\n\n  return (\n    <>\n      <Square\n        animation={props.animation || 'bouncy'}\n        onPress={onPress}\n        size={104}\n        boc=\"$borderColor\"\n        bw={1}\n        br=\"$9\"\n        bc=\"$color9\"\n        hoverStyle={{\n          scale: 1.1,\n        }}\n        pressStyle={{\n          scale: 0.9,\n        }}\n        {...position}\n      >\n        {props.children || <LogoIcon downscale={0.75} />}\n      </Square>\n\n      <Button\n        pos=\"absolute\"\n        b={20}\n        l={20}\n        icon={Play}\n        theme={props.tint}\n        size=\"$5\"\n        circular\n        onPress={onPress}\n      />\n    </>\n  )\n}\n\nexport const positions = [\n  {\n    x: 0,\n    y: 0,\n    scale: 1,\n    rotate: '0deg',\n  },\n  {\n    x: -50,\n    y: -50,\n    scale: 0.5,\n    rotate: '-45deg',\n    hoverStyle: {\n      scale: 0.6,\n    },\n    pressStyle: {\n      scale: 0.4,\n    },\n  },\n  {\n    x: 50,\n    y: 50,\n    scale: 1,\n    rotate: '180deg',\n    hoverStyle: {\n      scale: 1.1,\n    },\n    pressStyle: {\n      scale: 0.9,\n    },\n  },\n]\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBI;AAlBJ,kBAAyB;AACzB,0BAAqB;AACrB,qBAA+D;AAExD,SAAS,eAAe,OAAO;AACpC,QAAM,CAAC,WAAW,YAAY,QAAI,qCAAqB;AAAA,IACrD,UAAU;AAAA,IACV,MAAM,MAAM;AAAA,IACZ,aAAa;AAAA,EACf,CAAC;AACD,QAAM,WAAW,UAAU,SAAS;AACpC,QAAM,cAAU,yBAAS,MAAM;AAC7B,iBAAa,CAAC,MAAM;AAClB,cAAQ,IAAI,KAAK,UAAU;AAAA,IAC7B,CAAC;AAAA,EACH,CAAC;AAED,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,MAAM,aAAa;AAAA,QAC9B;AAAA,QACA,MAAM;AAAA,QACN,KAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAG;AAAA,QACH,IAAG;AAAA,QACH,YAAY;AAAA,UACV,OAAO;AAAA,QACT;AAAA,QACA,YAAY;AAAA,UACV,OAAO;AAAA,QACT;AAAA,QACC,GAAG;AAAA,QAEH,gBAAM,YAAY,4CAAC,wBAAS,WAAW,MAAM;AAAA;AAAA,IAChD;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,KAAI;AAAA,QACJ,GAAG;AAAA,QACH,GAAG;AAAA,QACH,MAAM;AAAA,QACN,OAAO,MAAM;AAAA,QACb,MAAK;AAAA,QACL,UAAQ;AAAA,QACR;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEO,MAAM,YAAY;AAAA,EACvB;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Play } from '@tamagui/lucide-icons'\nimport { Button, Square, useControllableState, useEvent } from 'tamagui'\n\nexport function AnimationsDemo(props) {\n  const [positionI, setPositionI] = useControllableState({\n    strategy: 'most-recent-wins',\n    prop: props.position,\n    defaultProp: 0,\n  })\n  const position = positions[positionI]\n  const onPress = useEvent(() => {\n    setPositionI((x) => {\n      return (x + 1) % positions.length\n    })\n  })\n\n  return (\n    <>\n      <Square\n        animation={props.animation || 'bouncy'}\n        onPress={onPress}\n        size={104}\n        borderColor=\"$borderColor\"\n        borderWidth={1}\n        borderRadius=\"$9\"\n        backgroundColor=\"$color9\"\n        hoverStyle={{\n          scale: 1.1,\n        }}\n        pressStyle={{\n          scale: 0.9,\n        }}\n        {...position}\n      >\n        {props.children || <LogoIcon downscale={0.75} />}\n      </Square>\n\n      <Button\n        position=\"absolute\"\n        bottom={20}\n        left={20}\n        icon={Play}\n        theme={props.tint}\n        size=\"$5\"\n        circular\n        onPress={onPress}\n      />\n    </>\n  )\n}\n\nexport const positions = [\n  {\n    x: 0,\n    y: 0,\n    scale: 1,\n    rotate: '0deg',\n  },\n  {\n    x: -50,\n    y: -50,\n    scale: 0.5,\n    rotate: '-45deg',\n    hoverStyle: {\n      scale: 0.6,\n    },\n    pressStyle: {\n      scale: 0.4,\n    },\n  },\n  {\n    x: 50,\n    y: 50,\n    scale: 1,\n    rotate: '180deg',\n    hoverStyle: {\n      scale: 1.1,\n    },\n    pressStyle: {\n      scale: 0.9,\n    },\n  },\n]\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBI;AAlBJ,kBAAyB;AACzB,0BAAqB;AACrB,qBAA+D;AAExD,SAAS,eAAe,OAAO;AACpC,QAAM,CAAC,WAAW,YAAY,QAAI,qCAAqB;AAAA,IACrD,UAAU;AAAA,IACV,MAAM,MAAM;AAAA,IACZ,aAAa;AAAA,EACf,CAAC;AACD,QAAM,WAAW,UAAU,SAAS;AACpC,QAAM,cAAU,yBAAS,MAAM;AAC7B,iBAAa,CAAC,MAAM;AAClB,cAAQ,IAAI,KAAK,UAAU;AAAA,IAC7B,CAAC;AAAA,EACH,CAAC;AAED,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,MAAM,aAAa;AAAA,QAC9B;AAAA,QACA,MAAM;AAAA,QACN,aAAY;AAAA,QACZ,aAAa;AAAA,QACb,cAAa;AAAA,QACb,iBAAgB;AAAA,QAChB,YAAY;AAAA,UACV,OAAO;AAAA,QACT;AAAA,QACA,YAAY;AAAA,UACV,OAAO;AAAA,QACT;AAAA,QACC,GAAG;AAAA,QAEH,gBAAM,YAAY,4CAAC,wBAAS,WAAW,MAAM;AAAA;AAAA,IAChD;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO,MAAM;AAAA,QACb,MAAK;AAAA,QACL,UAAQ;AAAA,QACR;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEO,MAAM,YAAY;AAAA,EACvB;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA;AAAA,IACE,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/cjs/AnimationsEnterDemo.js

@@ -48,13 +48,13 @@ function AnimationsEnterDemo(props) {
         opacity: 1,
         scale: 1,
         y: 0,
-        bc: "$pink10",
-        br: "$9",
+        backgroundColor: "$pink10",
+        borderRadius: "$9",
         children: props.children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_logo.LogoIcon, { downscale: 0.75 })
       },
       key
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { size: "$3", mt: "$4", onPress: () => setKey(Math.random()), children: "Re-mount" })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { size: "$3", marginTop: "$4", onPress: () => setKey(Math.random()), children: "Re-mount" })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/cjs/AnimationsEnterDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/AnimationsEnterDemo.tsx"],
-  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { useRef, useState } from 'react'\nimport { Button, Square, YStack } from 'tamagui'\n\nimport { useIsIntersecting } from './useOnIntersecting'\n\nexport function AnimationsEnterDemo(props: any) {\n  const ref = useRef<HTMLElement>(null)\n  const hasIntersected = useIsIntersecting(ref, { once: true })\n  const [key, setKey] = useState(0)\n\n  if (!hasIntersected) {\n    return <YStack ref={ref} />\n  }\n\n  return (\n    <>\n      <Square\n        key={key}\n        enterStyle={{\n          scale: 1.5,\n          y: -10,\n          opacity: 0,\n        }}\n        animation=\"bouncy\"\n        elevation=\"$4\"\n        size={110}\n        opacity={1}\n        scale={1}\n        y={0}\n        bc=\"$pink10\"\n        br=\"$9\"\n      >\n        {props.children ?? <LogoIcon downscale={0.75} />}\n      </Square>\n\n      <Button size=\"$3\" mt=\"$4\" onPress={() => setKey(Math.random())}>\n        Re-mount\n      </Button>\n    </>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAYW;AAZX,kBAAyB;AACzB,mBAAiC;AACjC,qBAAuC;AAEvC,+BAAkC;AAE3B,SAAS,oBAAoB,OAAY;AAC9C,QAAM,UAAM,qBAAoB,IAAI;AACpC,QAAM,qBAAiB,4CAAkB,KAAK,EAAE,MAAM,KAAK,CAAC;AAC5D,QAAM,CAAC,KAAK,MAAM,QAAI,uBAAS,CAAC;AAEhC,MAAI,CAAC,gBAAgB;AACnB,WAAO,4CAAC,yBAAO,KAAU;AAAA,EAC3B;AAEA,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QAEC,YAAY;AAAA,UACV,OAAO;AAAA,UACP,GAAG;AAAA,UACH,SAAS;AAAA,QACX;AAAA,QACA,WAAU;AAAA,QACV,WAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,OAAO;AAAA,QACP,GAAG;AAAA,QACH,IAAG;AAAA,QACH,IAAG;AAAA,QAEF,gBAAM,YAAY,4CAAC,wBAAS,WAAW,MAAM;AAAA;AAAA,MAfzC;AAAA,IAgBP;AAAA,IAEA,4CAAC,yBAAO,MAAK,MAAK,IAAG,MAAK,SAAS,MAAM,OAAO,KAAK,OAAO,CAAC,GAAG,sBAEhE;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { useRef, useState } from 'react'\nimport { Button, Square, YStack } from 'tamagui'\n\nimport { useIsIntersecting } from './useOnIntersecting'\n\nexport function AnimationsEnterDemo(props: any) {\n  const ref = useRef<HTMLElement>(null)\n  const hasIntersected = useIsIntersecting(ref, { once: true })\n  const [key, setKey] = useState(0)\n\n  if (!hasIntersected) {\n    return <YStack ref={ref} />\n  }\n\n  return (\n    <>\n      <Square\n        key={key}\n        enterStyle={{\n          scale: 1.5,\n          y: -10,\n          opacity: 0,\n        }}\n        animation=\"bouncy\"\n        elevation=\"$4\"\n        size={110}\n        opacity={1}\n        scale={1}\n        y={0}\n        backgroundColor=\"$pink10\"\n        borderRadius=\"$9\"\n      >\n        {props.children ?? <LogoIcon downscale={0.75} />}\n      </Square>\n\n      <Button size=\"$3\" marginTop=\"$4\" onPress={() => setKey(Math.random())}>\n        Re-mount\n      </Button>\n    </>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAYW;AAZX,kBAAyB;AACzB,mBAAiC;AACjC,qBAAuC;AAEvC,+BAAkC;AAE3B,SAAS,oBAAoB,OAAY;AAC9C,QAAM,UAAM,qBAAoB,IAAI;AACpC,QAAM,qBAAiB,4CAAkB,KAAK,EAAE,MAAM,KAAK,CAAC;AAC5D,QAAM,CAAC,KAAK,MAAM,QAAI,uBAAS,CAAC;AAEhC,MAAI,CAAC,gBAAgB;AACnB,WAAO,4CAAC,yBAAO,KAAU;AAAA,EAC3B;AAEA,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QAEC,YAAY;AAAA,UACV,OAAO;AAAA,UACP,GAAG;AAAA,UACH,SAAS;AAAA,QACX;AAAA,QACA,WAAU;AAAA,QACV,WAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS;AAAA,QACT,OAAO;AAAA,QACP,GAAG;AAAA,QACH,iBAAgB;AAAA,QAChB,cAAa;AAAA,QAEZ,gBAAM,YAAY,4CAAC,wBAAS,WAAW,MAAM;AAAA;AAAA,MAfzC;AAAA,IAgBP;AAAA,IAEA,4CAAC,yBAAO,MAAK,MAAK,WAAU,MAAK,SAAS,MAAM,OAAO,KAAK,OAAO,CAAC,GAAG,sBAEvE;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/AnimationsHoverDemo.js

@@ -28,11 +28,11 @@ function AnimationsHoverDemo() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_tamagui.Square,
     {
-      bc: "$pink10",
+      borderColor: "$pink10",
       animation: "bouncy",
       elevation: "$4",
       size: 110,
-      br: "$9",
+      borderRadius: "$9",
       hoverStyle: {
         scale: 1.2
       },

package/dist/cjs/AnimationsHoverDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/AnimationsHoverDemo.tsx"],
-  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Square } from 'tamagui'\n\nexport function AnimationsHoverDemo() {\n  return (\n    <Square\n      bc=\"$pink10\"\n      animation=\"bouncy\"\n      elevation=\"$4\"\n      size={110}\n      br=\"$9\"\n      hoverStyle={{\n        scale: 1.2,\n      }}\n      pressStyle={{\n        scale: 0.9,\n      }}\n    >\n      <LogoIcon downscale={0.75} />\n    </Square>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBM;AAlBN,kBAAyB;AACzB,qBAAuB;AAEhB,SAAS,sBAAsB;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,WAAU;AAAA,MACV,WAAU;AAAA,MACV,MAAM;AAAA,MACN,IAAG;AAAA,MACH,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MACA,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MAEA,sDAAC,wBAAS,WAAW,MAAM;AAAA;AAAA,EAC7B;AAEJ;",
+  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Square } from 'tamagui'\n\nexport function AnimationsHoverDemo() {\n  return (\n    <Square\n      borderColor=\"$pink10\"\n      animation=\"bouncy\"\n      elevation=\"$4\"\n      size={110}\n      borderRadius=\"$9\"\n      hoverStyle={{\n        scale: 1.2,\n      }}\n      pressStyle={{\n        scale: 0.9,\n      }}\n    >\n      <LogoIcon downscale={0.75} />\n    </Square>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBM;AAlBN,kBAAyB;AACzB,qBAAuB;AAEhB,SAAS,sBAAsB;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAY;AAAA,MACZ,WAAU;AAAA,MACV,WAAU;AAAA,MACV,MAAM;AAAA,MACN,cAAa;AAAA,MACb,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MACA,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MAEA,sDAAC,wBAAS,WAAW,MAAM;AAAA;AAAA,EAC7B;AAEJ;",
   "names": []
 }

package/dist/cjs/AnimationsPresenceDemo.js

@@ -55,16 +55,16 @@ function AnimationsPresenceDemo() {
   };
   const enterVariant = direction === 1 || direction === 0 ? "isRight" : "isLeft";
   const exitVariant = direction === 1 ? "isLeft" : "isRight";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { ov: "hidden", bc: "#000", pos: "relative", h: 300, w: "100%", ai: "center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_animate_presence.AnimatePresence, { enterVariant, exitVariant, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YStackEnterable, { animation: "bouncy", fullscreen: true, x: 0, o: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Image, { src: images[imageIndex], width: 780, height: 300 }) }, page) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { overflow: "hidden", backgroundColor: "#000", position: "relative", height: 300, width: "100%", alignItems: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_animate_presence.AnimatePresence, { enterVariant, exitVariant, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YStackEnterable, { animation: "bouncy", fullscreen: true, x: 0, opacity: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Image, { src: images[imageIndex], width: 780, height: 300 }) }, page) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_tamagui.Button,
       {
         accessibilityLabel: "Carousel left",
         icon: import_lucide_icons.ArrowLeft,
         size: "$5",
-        pos: "absolute",
-        l: "$4",
+        position: "absolute",
+        left: "$4",
         circular: true,
         elevate: true,
         onPress: () => paginate(-1)
@@ -76,8 +76,8 @@ function AnimationsPresenceDemo() {
         accessibilityLabel: "Carousel right",
         icon: import_lucide_icons.ArrowRight,
         size: "$5",
-        pos: "absolute",
-        r: "$4",
+        position: "absolute",
+        right: "$4",
         circular: true,
         elevate: true,
         onPress: () => paginate(1)

package/dist/cjs/AnimationsPresenceDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/AnimationsPresenceDemo.tsx"],
-  "sourcesContent": ["import { AnimatePresence } from '@tamagui/animate-presence'\nimport { ArrowLeft, ArrowRight } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Button, Image, XStack, YStack, styled } from 'tamagui'\n\n// @ts-ignore\nimport photo1 from '../../public/photo1.jpg'\n// @ts-ignore\nimport photo2 from '../../public/photo2.jpg'\n// @ts-ignore\nimport photo3 from '../../public/photo3.jpg'\n\nexport const images = [photo1, photo2, photo3].map((x) => x.src || x)\n\nconst YStackEnterable = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -300, opacity: 0 } },\n    isRight: { true: { x: 300, opacity: 0 } },\n  } as const,\n})\n\nexport function AnimationsPresenceDemo() {\n  const [[page, direction], setPage] = useState([0, 0])\n\n  const imageIndex = wrap(0, images.length, page)\n\n  const paginate = (newDirection: number) => {\n    setPage([page + newDirection, newDirection])\n  }\n\n  const enterVariant = direction === 1 || direction === 0 ? 'isRight' : 'isLeft'\n  const exitVariant = direction === 1 ? 'isLeft' : 'isRight'\n\n  return (\n    <XStack ov=\"hidden\" bc=\"#000\" pos=\"relative\" h={300} w=\"100%\" ai=\"center\">\n      <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}>\n        <YStackEnterable key={page} animation=\"bouncy\" fullscreen x={0} o={1}>\n          <Image src={images[imageIndex]} width={780} height={300} />\n        </YStackEnterable>\n      </AnimatePresence>\n\n      <Button\n        accessibilityLabel=\"Carousel left\"\n        icon={ArrowLeft}\n        size=\"$5\"\n        pos=\"absolute\"\n        l=\"$4\"\n        circular\n        elevate\n        onPress={() => paginate(-1)}\n      />\n      <Button\n        accessibilityLabel=\"Carousel right\"\n        icon={ArrowRight}\n        size=\"$5\"\n        pos=\"absolute\"\n        r=\"$4\"\n        circular\n        elevate\n        onPress={() => paginate(1)}\n      />\n    </XStack>\n  )\n}\n\nconst wrap = (min: number, max: number, v: number) => {\n  const rangeSize = max - min\n  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCI;AAlCJ,8BAAgC;AAChC,0BAAsC;AACtC,mBAAyB;AACzB,qBAAsD;AAGtD,oBAAmB;AAEnB,oBAAmB;AAEnB,oBAAmB;AAEZ,MAAM,SAAS,CAAC,cAAAA,SAAQ,cAAAC,SAAQ,cAAAC,OAAM,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC;AAEpE,MAAM,sBAAkB,uBAAO,uBAAQ;AAAA,EACrC,UAAU;AAAA,IACR,QAAQ,EAAE,MAAM,EAAE,GAAG,MAAM,SAAS,EAAE,EAAE;AAAA,IACxC,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,SAAS,EAAE,EAAE;AAAA,EAC1C;AACF,CAAC;AAEM,SAAS,yBAAyB;AACvC,QAAM,CAAC,CAAC,MAAM,SAAS,GAAG,OAAO,QAAI,uBAAS,CAAC,GAAG,CAAC,CAAC;AAEpD,QAAM,aAAa,KAAK,GAAG,OAAO,QAAQ,IAAI;AAE9C,QAAM,WAAW,CAAC,iBAAyB;AACzC,YAAQ,CAAC,OAAO,cAAc,YAAY,CAAC;AAAA,EAC7C;AAEA,QAAM,eAAe,cAAc,KAAK,cAAc,IAAI,YAAY;AACtE,QAAM,cAAc,cAAc,IAAI,WAAW;AAEjD,SACE,6CAAC,yBAAO,IAAG,UAAS,IAAG,QAAO,KAAI,YAAW,GAAG,KAAK,GAAE,QAAO,IAAG,UAC/D;AAAA,gDAAC,2CAAgB,cAA4B,aAC3C,sDAAC,mBAA2B,WAAU,UAAS,YAAU,MAAC,GAAG,GAAG,GAAG,GACjE,sDAAC,wBAAM,KAAK,OAAO,UAAU,GAAG,OAAO,KAAK,QAAQ,KAAK,KADrC,IAEtB,GACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,oBAAmB;AAAA,QACnB,MAAM;AAAA,QACN,MAAK;AAAA,QACL,KAAI;AAAA,QACJ,GAAE;AAAA,QACF,UAAQ;AAAA,QACR,SAAO;AAAA,QACP,SAAS,MAAM,SAAS,EAAE;AAAA;AAAA,IAC5B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,oBAAmB;AAAA,QACnB,MAAM;AAAA,QACN,MAAK;AAAA,QACL,KAAI;AAAA,QACJ,GAAE;AAAA,QACF,UAAQ;AAAA,QACR,SAAO;AAAA,QACP,SAAS,MAAM,SAAS,CAAC;AAAA;AAAA,IAC3B;AAAA,KACF;AAEJ;AAEA,MAAM,OAAO,CAAC,KAAa,KAAa,MAAc;AACpD,QAAM,YAAY,MAAM;AACxB,WAAW,IAAI,OAAO,YAAa,aAAa,YAAa;AAC/D;",
+  "sourcesContent": ["import { AnimatePresence } from '@tamagui/animate-presence'\nimport { ArrowLeft, ArrowRight } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Button, Image, XStack, YStack, styled } from 'tamagui'\n\n// @ts-ignore\nimport photo1 from '../../public/photo1.jpg'\n// @ts-ignore\nimport photo2 from '../../public/photo2.jpg'\n// @ts-ignore\nimport photo3 from '../../public/photo3.jpg'\n\nexport const images = [photo1, photo2, photo3].map((x) => x.src || x)\n\nconst YStackEnterable = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -300, opacity: 0 } },\n    isRight: { true: { x: 300, opacity: 0 } },\n  } as const,\n})\n\nexport function AnimationsPresenceDemo() {\n  const [[page, direction], setPage] = useState([0, 0])\n\n  const imageIndex = wrap(0, images.length, page)\n\n  const paginate = (newDirection: number) => {\n    setPage([page + newDirection, newDirection])\n  }\n\n  const enterVariant = direction === 1 || direction === 0 ? 'isRight' : 'isLeft'\n  const exitVariant = direction === 1 ? 'isLeft' : 'isRight'\n\n  return (\n    <XStack overflow=\"hidden\" backgroundColor=\"#000\" position=\"relative\" height={300} width=\"100%\" alignItems=\"center\">\n      <AnimatePresence enterVariant={enterVariant} exitVariant={exitVariant}>\n        <YStackEnterable key={page} animation=\"bouncy\" fullscreen x={0} opacity={1}>\n          <Image src={images[imageIndex]} width={780} height={300} />\n        </YStackEnterable>\n      </AnimatePresence>\n\n      <Button\n        accessibilityLabel=\"Carousel left\"\n        icon={ArrowLeft}\n        size=\"$5\"\n        position=\"absolute\"\n        left=\"$4\"\n        circular\n        elevate\n        onPress={() => paginate(-1)}\n      />\n      <Button\n        accessibilityLabel=\"Carousel right\"\n        icon={ArrowRight}\n        size=\"$5\"\n        position=\"absolute\"\n        right=\"$4\"\n        circular\n        elevate\n        onPress={() => paginate(1)}\n      />\n    </XStack>\n  )\n}\n\nconst wrap = (min: number, max: number, v: number) => {\n  const rangeSize = max - min\n  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCI;AAlCJ,8BAAgC;AAChC,0BAAsC;AACtC,mBAAyB;AACzB,qBAAsD;AAGtD,oBAAmB;AAEnB,oBAAmB;AAEnB,oBAAmB;AAEZ,MAAM,SAAS,CAAC,cAAAA,SAAQ,cAAAC,SAAQ,cAAAC,OAAM,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC;AAEpE,MAAM,sBAAkB,uBAAO,uBAAQ;AAAA,EACrC,UAAU;AAAA,IACR,QAAQ,EAAE,MAAM,EAAE,GAAG,MAAM,SAAS,EAAE,EAAE;AAAA,IACxC,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,SAAS,EAAE,EAAE;AAAA,EAC1C;AACF,CAAC;AAEM,SAAS,yBAAyB;AACvC,QAAM,CAAC,CAAC,MAAM,SAAS,GAAG,OAAO,QAAI,uBAAS,CAAC,GAAG,CAAC,CAAC;AAEpD,QAAM,aAAa,KAAK,GAAG,OAAO,QAAQ,IAAI;AAE9C,QAAM,WAAW,CAAC,iBAAyB;AACzC,YAAQ,CAAC,OAAO,cAAc,YAAY,CAAC;AAAA,EAC7C;AAEA,QAAM,eAAe,cAAc,KAAK,cAAc,IAAI,YAAY;AACtE,QAAM,cAAc,cAAc,IAAI,WAAW;AAEjD,SACE,6CAAC,yBAAO,UAAS,UAAS,iBAAgB,QAAO,UAAS,YAAW,QAAQ,KAAK,OAAM,QAAO,YAAW,UACxG;AAAA,gDAAC,2CAAgB,cAA4B,aAC3C,sDAAC,mBAA2B,WAAU,UAAS,YAAU,MAAC,GAAG,GAAG,SAAS,GACvE,sDAAC,wBAAM,KAAK,OAAO,UAAU,GAAG,OAAO,KAAK,QAAQ,KAAK,KADrC,IAEtB,GACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,oBAAmB;AAAA,QACnB,MAAM;AAAA,QACN,MAAK;AAAA,QACL,UAAS;AAAA,QACT,MAAK;AAAA,QACL,UAAQ;AAAA,QACR,SAAO;AAAA,QACP,SAAS,MAAM,SAAS,EAAE;AAAA;AAAA,IAC5B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,oBAAmB;AAAA,QACnB,MAAM;AAAA,QACN,MAAK;AAAA,QACL,UAAS;AAAA,QACT,OAAM;AAAA,QACN,UAAQ;AAAA,QACR,SAAO;AAAA,QACP,SAAS,MAAM,SAAS,CAAC;AAAA;AAAA,IAC3B;AAAA,KACF;AAEJ;AAEA,MAAM,OAAO,CAAC,KAAa,KAAa,MAAc;AACpD,QAAM,YAAY,MAAM;AACxB,WAAW,IAAI,OAAO,YAAa,aAAa,YAAa;AAC/D;",
   "names": ["photo1", "photo2", "photo3"]
 }

package/dist/cjs/AnimationsTimingDemo.js

@@ -28,11 +28,11 @@ function AnimationsTimingDemo() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_tamagui.Square,
     {
-      bc: "$pink10",
+      backgroundColor: "$pink10",
       animation: "100ms",
       elevation: "$4",
       size: 110,
-      br: "$9",
+      borderRadius: "$9",
       hoverStyle: {
         scale: 1.2
       },

package/dist/cjs/AnimationsTimingDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/AnimationsTimingDemo.tsx"],
-  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Square } from 'tamagui'\n\nexport function AnimationsTimingDemo() {\n  return (\n    <Square\n      bc=\"$pink10\"\n      animation=\"100ms\"\n      elevation=\"$4\"\n      size={110}\n      br=\"$9\"\n      hoverStyle={{\n        scale: 1.2,\n      }}\n      pressStyle={{\n        scale: 0.9,\n      }}\n    >\n      <LogoIcon downscale={0.75} />\n    </Square>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBM;AAlBN,kBAAyB;AACzB,qBAAuB;AAEhB,SAAS,uBAAuB;AACrC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,WAAU;AAAA,MACV,WAAU;AAAA,MACV,MAAM;AAAA,MACN,IAAG;AAAA,MACH,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MACA,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MAEA,sDAAC,wBAAS,WAAW,MAAM;AAAA;AAAA,EAC7B;AAEJ;",
+  "sourcesContent": ["import { LogoIcon } from '@tamagui/logo'\nimport { Square } from 'tamagui'\n\nexport function AnimationsTimingDemo() {\n  return (\n    <Square\n      backgroundColor=\"$pink10\"\n      animation=\"100ms\"\n      elevation=\"$4\"\n      size={110}\n      borderRadius=\"$9\"\n      hoverStyle={{\n        scale: 1.2,\n      }}\n      pressStyle={{\n        scale: 0.9,\n      }}\n    >\n      <LogoIcon downscale={0.75} />\n    </Square>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBM;AAlBN,kBAAyB;AACzB,qBAAuB;AAEhB,SAAS,uBAAuB;AACrC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,iBAAgB;AAAA,MAChB,WAAU;AAAA,MACV,WAAU;AAAA,MACV,MAAM;AAAA,MACN,cAAa;AAAA,MACb,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MACA,YAAY;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MAEA,sDAAC,wBAAS,WAAW,MAAM;AAAA;AAAA,EAC7B;AAEJ;",
   "names": []
 }

package/dist/cjs/AvatarDemo.js

@@ -24,7 +24,7 @@ module.exports = __toCommonJS(AvatarDemo_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_tamagui = require("tamagui");
 function AvatarDemo() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { ai: "center", space: "$6", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { alignItems: "center", space: "$6", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Avatar, { circular: true, size: "$10", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_tamagui.Avatar.Image,

package/dist/cjs/AvatarDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/AvatarDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { Avatar, XStack } from 'tamagui'\n\nexport function AvatarDemo() {\n  return (\n    <XStack ai=\"center\" space=\"$6\">\n      <Avatar circular size=\"$10\">\n        <Avatar.Image\n          accessibilityLabel=\"Cam\"\n          src=\"https://images.unsplash.com/photo-1548142813-c348350df52b?&w=150&h=150&dpr=2&q=80\"\n        />\n        <Avatar.Fallback backgroundColor=\"$blue10\" />\n      </Avatar>\n\n      <Avatar circular size=\"$8\">\n        <Avatar.Image\n          accessibilityLabel=\"Nate Wienert\"\n          src=\"https://images.unsplash.com/photo-1531384441138-2736e62e0919?&w=100&h=100&dpr=2&q=80\"\n        />\n        <Avatar.Fallback delayMs={600} backgroundColor=\"$blue10\" />\n      </Avatar>\n    </XStack>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMM;AALN,qBAA+B;AAExB,SAAS,aAAa;AAC3B,SACE,6CAAC,yBAAO,IAAG,UAAS,OAAM,MACxB;AAAA,iDAAC,yBAAO,UAAQ,MAAC,MAAK,OACpB;AAAA;AAAA,QAAC,sBAAO;AAAA,QAAP;AAAA,UACC,oBAAmB;AAAA,UACnB,KAAI;AAAA;AAAA,MACN;AAAA,MACA,4CAAC,sBAAO,UAAP,EAAgB,iBAAgB,WAAU;AAAA,OAC7C;AAAA,IAEA,6CAAC,yBAAO,UAAQ,MAAC,MAAK,MACpB;AAAA;AAAA,QAAC,sBAAO;AAAA,QAAP;AAAA,UACC,oBAAmB;AAAA,UACnB,KAAI;AAAA;AAAA,MACN;AAAA,MACA,4CAAC,sBAAO,UAAP,EAAgB,SAAS,KAAK,iBAAgB,WAAU;AAAA,OAC3D;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import React from 'react'\nimport { Avatar, XStack } from 'tamagui'\n\nexport function AvatarDemo() {\n  return (\n    <XStack alignItems=\"center\" space=\"$6\">\n      <Avatar circular size=\"$10\">\n        <Avatar.Image\n          accessibilityLabel=\"Cam\"\n          src=\"https://images.unsplash.com/photo-1548142813-c348350df52b?&w=150&h=150&dpr=2&q=80\"\n        />\n        <Avatar.Fallback backgroundColor=\"$blue10\" />\n      </Avatar>\n\n      <Avatar circular size=\"$8\">\n        <Avatar.Image\n          accessibilityLabel=\"Nate Wienert\"\n          src=\"https://images.unsplash.com/photo-1531384441138-2736e62e0919?&w=100&h=100&dpr=2&q=80\"\n        />\n        <Avatar.Fallback delayMs={600} backgroundColor=\"$blue10\" />\n      </Avatar>\n    </XStack>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMM;AALN,qBAA+B;AAExB,SAAS,aAAa;AAC3B,SACE,6CAAC,yBAAO,YAAW,UAAS,OAAM,MAChC;AAAA,iDAAC,yBAAO,UAAQ,MAAC,MAAK,OACpB;AAAA;AAAA,QAAC,sBAAO;AAAA,QAAP;AAAA,UACC,oBAAmB;AAAA,UACnB,KAAI;AAAA;AAAA,MACN;AAAA,MACA,4CAAC,sBAAO,UAAP,EAAgB,iBAAgB,WAAU;AAAA,OAC7C;AAAA,IAEA,6CAAC,yBAAO,UAAQ,MAAC,MAAK,MACpB;AAAA;AAAA,QAAC,sBAAO;AAAA,QAAP;AAAA,UACC,oBAAmB;AAAA,UACnB,KAAI;AAAA;AAAA,MACN;AAAA,MACA,4CAAC,sBAAO,UAAP,EAAgB,SAAS,KAAK,iBAAgB,WAAU;AAAA,OAC3D;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/ButtonDemo.js

@@ -25,20 +25,20 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_lucide_icons = require("@tamagui/lucide-icons");
 var import_tamagui = require("tamagui");
 function ButtonDemo(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { p: "$3", space: true, ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { padding: "$3", space: true, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { children: "Plain" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { als: "center", icon: import_lucide_icons.Airplay, size: "$6", children: "Large" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { alignSelf: "center", icon: import_lucide_icons.Airplay, size: "$6", children: "Large" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XGroup, { size: "$3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { w: "50%", theme: "alt2", children: "Alt2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { w: "50%", theme: "yellow", children: "Yellow" })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { width: "50%", theme: "alt2", children: "Alt2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { width: "50%", theme: "yellow", children: "Yellow" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: "$2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { themeInverse: true, size: "$3", children: "Small Inverse" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { iconAfter: import_lucide_icons.Activity, size: "$3", children: "After" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XGroup, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { w: "50%", size: "$2", disabled: true, o: 0.5, children: "disabled" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { w: "50%", size: "$2", chromeless: true, children: "chromeless" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { width: "50%", size: "$2", disabled: true, opacity: 0.5, children: "disabled" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XGroup.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { width: "50%", size: "$2", chromeless: true, children: "chromeless" }) })
     ] })
   ] });
 }

package/dist/cjs/ButtonDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ButtonDemo.tsx"],
-  "sourcesContent": ["import { Activity, Airplay } from '@tamagui/lucide-icons'\nimport { Button, XGroup, XStack, YStack } from 'tamagui'\n\nexport function ButtonDemo(props) {\n  return (\n    <YStack p=\"$3\" space {...props}>\n      <Button>Plain</Button>\n      <Button als=\"center\" icon={Airplay} size=\"$6\">\n        Large\n      </Button>\n      <XGroup size=\"$3\">\n        <Button w=\"50%\" theme=\"alt2\">\n          Alt2\n        </Button>\n        <Button w=\"50%\" theme=\"yellow\">\n          Yellow\n        </Button>\n      </XGroup>\n      <XStack space=\"$2\">\n        <Button themeInverse size=\"$3\">\n          Small Inverse\n        </Button>\n        <Button iconAfter={Activity} size=\"$3\">\n          After\n        </Button>\n      </XStack>\n      <XGroup>\n        <XGroup.Item>\n          <Button w=\"50%\" size=\"$2\" disabled o={0.5}>\n            disabled\n          </Button>\n        </XGroup.Item>\n\n        <XGroup.Item>\n          <Button w=\"50%\" size=\"$2\" chromeless>\n            chromeless\n          </Button>\n        </XGroup.Item>\n      </XGroup>\n    </YStack>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMM;AANN,0BAAkC;AAClC,qBAA+C;AAExC,SAAS,WAAW,OAAO;AAChC,SACE,6CAAC,yBAAO,GAAE,MAAK,OAAK,MAAE,GAAG,OACvB;AAAA,gDAAC,yBAAO,mBAAK;AAAA,IACb,4CAAC,yBAAO,KAAI,UAAS,MAAM,6BAAS,MAAK,MAAK,mBAE9C;AAAA,IACA,6CAAC,yBAAO,MAAK,MACX;AAAA,kDAAC,yBAAO,GAAE,OAAM,OAAM,QAAO,kBAE7B;AAAA,MACA,4CAAC,yBAAO,GAAE,OAAM,OAAM,UAAS,oBAE/B;AAAA,OACF;AAAA,IACA,6CAAC,yBAAO,OAAM,MACZ;AAAA,kDAAC,yBAAO,cAAY,MAAC,MAAK,MAAK,2BAE/B;AAAA,MACA,4CAAC,yBAAO,WAAW,8BAAU,MAAK,MAAK,mBAEvC;AAAA,OACF;AAAA,IACA,6CAAC,yBACC;AAAA,kDAAC,sBAAO,MAAP,EACC,sDAAC,yBAAO,GAAE,OAAM,MAAK,MAAK,UAAQ,MAAC,GAAG,KAAK,sBAE3C,GACF;AAAA,MAEA,4CAAC,sBAAO,MAAP,EACC,sDAAC,yBAAO,GAAE,OAAM,MAAK,MAAK,YAAU,MAAC,wBAErC,GACF;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { Activity, Airplay } from '@tamagui/lucide-icons'\nimport { Button, XGroup, XStack, YStack } from 'tamagui'\n\nexport function ButtonDemo(props) {\n  return (\n    <YStack padding=\"$3\" space {...props}>\n      <Button>Plain</Button>\n      <Button alignSelf=\"center\" icon={Airplay} size=\"$6\">\n        Large\n      </Button>\n      <XGroup size=\"$3\">\n        <Button width=\"50%\" theme=\"alt2\">\n          Alt2\n        </Button>\n        <Button width=\"50%\" theme=\"yellow\">\n          Yellow\n        </Button>\n      </XGroup>\n      <XStack space=\"$2\">\n        <Button themeInverse size=\"$3\">\n          Small Inverse\n        </Button>\n        <Button iconAfter={Activity} size=\"$3\">\n          After\n        </Button>\n      </XStack>\n      <XGroup>\n        <XGroup.Item>\n          <Button width=\"50%\" size=\"$2\" disabled opacity={0.5}>\n            disabled\n          </Button>\n        </XGroup.Item>\n\n        <XGroup.Item>\n          <Button width=\"50%\" size=\"$2\" chromeless>\n            chromeless\n          </Button>\n        </XGroup.Item>\n      </XGroup>\n    </YStack>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMM;AANN,0BAAkC;AAClC,qBAA+C;AAExC,SAAS,WAAW,OAAO;AAChC,SACE,6CAAC,yBAAO,SAAQ,MAAK,OAAK,MAAE,GAAG,OAC7B;AAAA,gDAAC,yBAAO,mBAAK;AAAA,IACb,4CAAC,yBAAO,WAAU,UAAS,MAAM,6BAAS,MAAK,MAAK,mBAEpD;AAAA,IACA,6CAAC,yBAAO,MAAK,MACX;AAAA,kDAAC,yBAAO,OAAM,OAAM,OAAM,QAAO,kBAEjC;AAAA,MACA,4CAAC,yBAAO,OAAM,OAAM,OAAM,UAAS,oBAEnC;AAAA,OACF;AAAA,IACA,6CAAC,yBAAO,OAAM,MACZ;AAAA,kDAAC,yBAAO,cAAY,MAAC,MAAK,MAAK,2BAE/B;AAAA,MACA,4CAAC,yBAAO,WAAW,8BAAU,MAAK,MAAK,mBAEvC;AAAA,OACF;AAAA,IACA,6CAAC,yBACC;AAAA,kDAAC,sBAAO,MAAP,EACC,sDAAC,yBAAO,OAAM,OAAM,MAAK,MAAK,UAAQ,MAAC,SAAS,KAAK,sBAErD,GACF;AAAA,MAEA,4CAAC,sBAAO,MAAP,EACC,sDAAC,yBAAO,OAAM,OAAM,MAAK,MAAK,YAAU,MAAC,wBAEzC,GACF;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/CardDemo.js

@@ -24,14 +24,14 @@ module.exports = __toCommonJS(CardDemo_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_tamagui = require("tamagui");
 function CardDemo() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { $sm: { flexDirection: "column" }, px: "$4", space: true, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { $sm: { flexDirection: "column" }, paddingHorizontal: "$4", space: true, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       DemoCard,
       {
         animation: "bouncy",
         size: "$4",
-        w: 250,
-        h: 300,
+        width: 250,
+        height: 300,
         scale: 0.9,
         hoverStyle: { scale: 0.925 },
         pressStyle: { scale: 0.875 }
@@ -47,17 +47,17 @@ function DemoCard(props) {
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, { theme: "alt2", children: "Now available" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Card.Footer, { padded: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XStack, { f: 1 }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { br: "$10", children: "Purchase" })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XStack, { flex: 1 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { borderRadius: "$10", children: "Purchase" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Card.Background, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_tamagui.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/cjs/CardDemo.js.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,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAQEBAQEBAQFBQQGBgYGBgkIBwcICQ0KCgoKCg0UDQ8NDQ8NFBIWEhESFhIgGRcXGSAlHx4fJS0pKS05NjlLS2QBBAQEBAQEBAUFBAYGBgYGCQgHBwgJDQoKCgoKDRQNDw0NDw0UEhYSERIWEiAZFxcZICUfHh8lLSkpLTk2OUtLZP/CABEIAW0BbQMBIgACEQEDEQH/xAAcAAEAAwEBAQEBAAAAAAAAAAAAAwQGBQIBBwj/2gAIAQEAAAAA/g6l5AAAAAABNa59+l5AAAAAAE0tQv0vIAAAAACaWoF+l5AAAAABNLUAv0vIAAAAAmlqAF+l5AAAAATS1AAv0vIAAAAJpagAF+l5AJuldsyIatDneQCaWoAAX6XkPvX73T+gI+Rn6AJpagAAX6Xk6Wrugj++wcjK1iaWoAABfpfNNoz5y+PzqvlJc6XavEeT4s0tQAAA6Oj6xxM1VAHS0/RM7wqgAAB92Wiq18hywAPug1EsmPzoAABp9G9fn1QAAdrbQsVygAAOluEGGmo+QAE01rZ/YcDCAAH3eXWJ5boUfIAJpqbTaRwMoAAHY2TiZAdCj5AE01M9b235/PoAABtup8wFUOhR8gJpqYdzXMzmwACb9D+8rFAdCj5BNNTB6/Q5aODAAOxsmS4QDoUPgmmpgNh2n51EAA0ulYGmAdCh8TTUwDv6tiOYAA13cfm/kAdChJPTAHU2zI8MABsuxH+cgA6tekAF/dsrnwAGy7Hj84ACWeSh8AHQ3TKcAABrO8/OPABLPTdCh8AOttGP4oADRahheeAlnpjoUPgDRahheeAA6e3ZfOgSz0wdCh8A2vV8/nXgAB6/RJKODBLPTAdCh8Cb9C9cvEgADX9th+aJZ6YA6FD4NJpmS4QAAv7tzsP8Sz0wAdCh8T7+SH8+8AABs+uy2elnpgAOhQ+bPrstngAAWd7J8x9KmAAOh1tIo4T4AAB2djJ6wvJAAGm2FSLCVAAADT6yt8zmb8gAn1nXWvz/AJYAABLP1tQVM5xfICbvaKRHjPFD4AABLPTdXXzEXJ59SL7Nc6fT9FHHVHQofAAAlsUhNpe76ABDnM/8HQofAACWxSAn7vYvAeebxuL4A6FD4ABLYpABLesyIatLwAHQofAAlsUgAAAAHQofACWxSAAAAAHR5/wCWxSAAAAAB0KHwJbFIAAAAAB0KHwlsUgAAAAAB0KHyWxSAAAAAAB0KHQ5wAAAAAADQ//EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQIQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAf//EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQMQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAf//EAEYQAAIBAgMDBwcLAwIFBQAAAAECAwQRADFRBRIhEBMwQVJhwSAiQGJxkbEGIzNCQ1BTcoGh0RQy4jSSJERjgqMWJVRzk//aAAgBAQABPwBHSrRYpWCyqLRyHr9VvA4dHjdkdSrKbEH7rggadyAQAou7nJRqcGueDzKR3ijGbDgznVvAciOlWixSsFlUWikOR9VvA4dHjdkdSrKbEH7pggediAQABd2OSjU4nnUoIYQREDc3zc9pvAeQjpVosUrBZVFo5DkR1K3gcOjxsyOpVlNiDmD9zwQPO5AIAAuzHJRqcTzpuCGAERA3JObntN4DykdKtVilYLKotHIciOy3gcOjRuyOpVlNiDmPuWCB53spAAF2Y5KNTiedNzmYbiIG5Jzc6t4DoEdKxVilYLKotHIciOy3gcOjRuyOpVlNiDmPuOCB53stgALsxyUanE86bgggBEQNyTm51bwHRI61iLFKwWZRaOQ5EdlvA4dGjZkdSrKbEHMfcMEDzuVWwAF2Y5KNTiedNwQQAiIG5Jzc6nwHSI61irFKwWZRaOQ5MOpW8Dh0aNmR1KspsQcwfT4IHncqtgALsxyUanE86bnMQXEQNyTm51PgOmR0rEWOVgsyi0chyYdlvA4dGjZkZSrKbEHMHoooJpzaOJ39gxFsSufiypH+Y/xhPk926n9FXC7AoxnJKf1GBsOh0f8A3YOw6H/qD/uw2wKU/wBs0o9tjiT5PuPo6lT+ZbYl2RXxXPNb41Q3w6PGbOjKdCLHooIHnfdWwAF2Y5KNTiedNzmILiIG5Jzc6nwHoCMtYqxyMFmUWjkOTeq3gcOjIzKylWU2IOY8oAkgAXOKbYtVPZpBzS+tn7sU+x6KCxKc42r8f2wAFAAAAGQHQyRRyruyRq40YXxUbDppbmImJveuKrZtXS3LR7ydteI8uCB533VsABdmOSjU4nnTcEEFxEDck5udT4D0JWWsVY5GCzKLRyHJh1K3gcOjIzKylWU2IOYPkUWy6iss1tyPtnwxSbPpqMDcS7dbnPyzLEM5U94wJIzlIp/Xy6zY9PU3aO0T6gcD7RippJ6R92VLaN1HyIIHnfdWwAF2Y5KNTiedAnMQXEQNyTm51PgPRFZaxVjkYLMotHIcmHZbwOHRkZlZSrKbEHMHABYgAEkmwAxs/YoXdlqhc5iP+cAW5SQoJJAAzJxUbYoobhXMjaJl78TbeqX4RRpGP9xxJtCtl/uqZPYDb4YZmY3ZifaeVJZE/skZfYSMR7Ur4sqhm7m8744h2+4sJoAe9DbFPtKjqbBJgG7LcD5EsUcyMkiBlOYONobIkpbyRXeLr1Xkgged91bAAXZjko1OJ50CcxBcRA3JObnU+A9Gi/8AcNyBv9RwWJ+3oreBxs/ZQofOmW8+R9Xu8is21DBdIQJX1+qMVNZU1ZvLKSOpcgOjpdqVdLYB99Oy3hij2nT1gAB3JOw3hr5FdsNpHaWlAC8WkU5KOtsTzoE5iC4iBuWObnU+A9GCliAASSbAY2Xs0Uic5IAZmH+0aYVlqQEcgSgWRz9b1W8DhlKsVIIINiDioqYaaMvK+6P3OK/ak1YSqkpF2R1+3psrEY2ftpktHUksvVJ1j24VldVZWBUi4IxFE0zbq2HC5JyA1OJZVC81FcRjMnNzqfAY2vszcLVEC+bm6jq7x6NsXZ+6BVSrxP0YPx5amshEI55gJsoiTbf9U/zitqaipnYzXDKSNzs93oOyKyaKXms4c3vkg62wamKSJVp2vCeO91udT4DkIvjalB/SS7yD5pz5vcdPRNl0X9ZUDeHzacX/AIwBbkqKiOlheWQ8F/c6Yq6qWsmaRz+VeoDCstaqxyMBOBaNzk46lbv0OGVkZlZSGBsQcwenghed91bCwuzHJRqcTzoE5iC4iBuzHOQjrPdoMbL2iaR9xzeFjx9U64BBAINwcjyVECVMLxOODD3HXE8L08zxOPOU29CAJIAGNn0oo6ZEt5x4ue88u1K41k1lPzSGy9/fyqy1qrG5AnAtG5ycdSt36HDKyMyspDA2IOYPSwQvO+6thYXZjkoHWcTzIE5iC4iBuzZGQjrPdoOXYlfe1LIf/rPhy7cpN+IVCjzk4P8Al9C2LTc/Vc4RdYvO/Xq5dtVnMQiFD58o49y+SrLWqscjATgWRzk47Ld+hwysjMrKQwNiDmOjghed91bDhdmPAKB1nE06BOYguIgbs2RkI6z3aDyEdkdXU2ZSCDiiqlq6dJRnkw0I5HRXVkYXDAgjFVA1NPLEfqN7x6Dsin5iiQkedJ55/XLkJCgkmwAucVtSaupklORNlGgGXlKy1qqjkCcCyOcnHZbv0OGVkYqykEGxB6GCB533VtldmPAKB1nE86BOYguIgbsxzkI6z3aDyth1XNVBhY+bLl+Ycu36exhnAz8xviPQIIjPNFGPruBgAKAALACw5NsVHM0TqD50p3B49ArLWqqOwE4Fkc5OOy3focMrIxVgQQbEHy4IXnfcW2V2Y5KNTiaZAnMQX5u92Y8DIR1nu0Hlo7RujqbFSCP0xBKs8UUq5OoPJtKHn6KdbcQu8PavH0DYkXOVyt+Ghbw5dvTb9THF1Rp+7dCrLXKqOQKgCyOcn9Vu/Q4ZWRirAgg2IOYPkwwvO+4ltSxyUDrOJ50VOYgvzd7s2RkI6z3aDodhTb9I0Zzjf9jx5M8Tx8zPNH2HK+49P8nk/wBU/wCVRy7Qk52tqW9cj3cOiVlrlCOQKgCyOcnHZbv0OGVkYqwIINiDmDywwvO+6lsrsx4BQMycTTIqcxBfm73ZsjIR1nu0HRbAktUTR9pL+48u103K+f1rN7x0+wFtSSHWU/AcrMWZmPWSejVlrlCOQKgCyOcnHZbv0OGVkYqwIINiDiGF533F0uSeAUDMk4nmRU5iC/N3uzZGQjrPdoOj2M27tCEdoMP25dvrasjOsQ+J6fYf+hH525JTaKQ+qelgjO1CsRIFQo4SNwVlHU56iOo4qJVjVqaEMqA+exFmdhroB1DpNmG1fTfm5flB9PT/AJD8en2Gb0PskbkkF43GqnpIYXnfcQDK5J4AAZknTE0yKnMQX5v675GQjrPdoMKy1yhHIFQBZHP2nqt36HDKVJVgQQbEHo9li9fTfmPw5flAf+IgH/T8en2A16WZdJb+8csqbksidliPd0UMLzuEQDK5J4AAZknTE0yKhggJ5u/nvkZCOs92g5Qy1yhHIFQBZHOUg0bv0OGUqSrAgg2IPRbFTer4z2VY/tbl2629WqOzEB+5PT/J6S0lTHqqt7uXakfNV9QNW3v93HoYYXncIg6rkngABmSdMTTIiGCC/N3u75GQjw0HkgrXKEcgVAFkY5SDRvW0OCCpIIIINiD0Pyfj+cqJdFC+/l2pJzlfUnRt33C3T7Il5qvi0e6n9eX5QQ2eCYDMFD+nEdBDC87hEtqScgBmSdMTTIiGCD6P675GQjw0HlgiuARiBUAWVjlIND62hwQVJBBBBsQeg2NDzVEhI4yEtyOwRGY5KCTiRzI7uc2Yk/r06OY3R1zVgR7RiKRZY45FydQw/Xk2lT/1NHMgF2A3l9o8uGF53CIBqScgBmSdMTTRohggPzf13yMhHhoOhBFcArECoAsrHKTuPraHBBUkEEEGxB8qnhM88UQzdgMKoRVVRYKAAOTbE3M0Mgvxksg/XP0HYdRztMYifOiP7Hl2pS/0tW4Asj+cnkwwvO4RB3kngABmSdMTTIiGCAnm/rvkZCPDQdGCK4BWIFQBZWP2ncfW0OCCpIIIINiD5OwaXi9Sw9VPE8u3ajnKhIQeEQ4/mPoOzar+lq0YmyN5r+w8u06MVlOQB84nFP4xlcHlhhedwiDjmScgBmSdMTTRohggPmfXfIyEeGg6UEV4CsQKkCysftO4+tocEFSQQQQbEHlpoHqZ44kzY+4YhhSCJIkFlQWHJUTrTwyStkgviR2ld3Y3ZiSfQtj1n9TThGPnxWB7x1Hl21QbjGpjHmsfnBodeSGF53CIOOZJ4AAZknTE0yIhggPmfXfIyEeGg6cEV4CsQKkCysftO4+toevBBUkEEEGxB5Nk0H9JFzjj51xx9Uacu3KzfdaZDwTi/t09DpKl6SdJV6uDDUYilSeNJEN1YXB5GVXUqwBBFiDit2RLDOBCLxPkxyX8xxNNGkZggPmfXfIyEfBdB6CCK8BWIFSBZWOUncfW0PXjZOyypFRUJYj+xD8Ty7QrVooC3124IO/DMzsWYkkm5PomyNof00nNSN805z7J5I42lcKo/gDU4qDC8T0yjejb6Qn65/jTG0dlvRkul2hPX1r7fQdmbI/tnqV71jPxOBarABNpxke33HvwQQSCLHEsscEbSSNZVFzitq3rJ2kbgMlXQejbDrnkdaSQ37DnJQO0dMSSKqGKI+b9d+tz/HIQCCCLgjFfsS95KUe2P+MOjRsVdSrDMHpYKaapfcijLHr0GKDZMVJZ5LPLr1L7OVnSoQl2CyqP7jk40PrY2nXvWSlQCsaGwU66n0aGF53CIOJzOQAGZJ0xNMkaGCA3T7R8jIR8F0GNmbXKbsFQ3m5K56u44Bvy1VFTVa2lTiMmHAjFVsOoiu0J51dMmw6PGxV1KkdRFj0MNPPObRRM57hil2Dk1S//AGL4nEUMUCBIkCKOocssscCNJIwVRmTjaG0pK17C6xA8F17zgEV4CkgVIFlP4vcfW+OCCCQRYjMeiQwvO4RBx9wAGZJ0xNMkcZggPmfaSZGQj4LoOWg2rLSWRrvF2esezEFRDUoHicMPh5EsMM67ssauO8Ym2FSPxjZ4z7x++JNgVA+jmRvbcYbY+0FyhDexhg7Mrx/yz4Gy68/8s3vGE2LXtnGq+1h4Yj+T7/a1CjuUXxDsahisShkPrHCqqAKqhQMgBbyKzaEFEvnHefqQZ4q6yesfekbgMlGQ5QRXgAkCpGR/F7j63xwQQSCLEehQwyTuEQcT+gA1OJpkjQwQG6/aSdbkfBdB5MM8tO4eJyrYpNuRPZagbjdsf24R0dQyMGByI6Weohp03pZFQd+KzbjvdKZSg7Zz/TDMzsWYkk5k+SCK8WJAqRkfxe4+t8cEEEgixHoEMLzuEQXJ9wA6ziaZI0MEBuh+kk63I+C6DoIKmema8UrL8Din2+wsJ4b+sn8HEO0qKe27OoOjeaf3wLHy2dUF2YKNSbYn2xQw3tJzh0QX/fFRt2okuIUEQ1zbDyPKxZ3LMesm/QC1eLE2qRkfxe4+t8cEEEgixHTQwvO4RBcn3AanE0qRoYIDdT9JJkXI+C9JHPND9HK6flJGE2vXp9tvfmAOF29VjOOI/ocf+oJ//jp7zg/KCfqgj/fDbdrTksS+wHxOJNqV8mdSw/LZfhh3eQ3d2Y6k36QWrxYm1SMj+L/l8cEEEgixHSQwvO4RBcn3ADrOJpo40MEBup+kk63I+C/cItXgA2FSMj+L/l8cEEEgixHRQxPO4RBcn9ABqcSzRxxmCA3U/SSdbkfBfuPhXix4VIyP4v8Al8cEEEgjoIoXncIguT7gNTiWVI0MEBup+kk63I+C/cvCvFjYVIyP4v8Al8cEEEgjyoYnncIguT7gNTiWVIozBAbqfpJOtz4L9z8K8WPCpA//AF/y+OCCCQfIiieZwiC5PuA1OJZUiQwQG6n6STrc6D1funhXi2VSP/L/AJfHBFiQeSGF53VEFyfcBqcSypFG0EBup+kk63Og0X7r4V40qR/5f8vjjLFV/wAIi08f140eR+tt4XA7gPu2hoV2yrvJIY5I7BnAvv3yJ78f/8QAFBEBAAAAAAAAAAAAAAAAAAAAkP/aAAgBAgEBPwAEf//EABQRAQAAAAAAAAAAAAAAAAAAAJD/2gAIAQMBAT8ABH//2Q==\"\n        />\n      </Card.Background>\n    </Card>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAAsE;AAE/D,SAAS,WAAW;AACzB,SACE,6CAAC,yBAAO,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,4CAAC,YAAS,MAAK,MAAK,GAAG,KAAK,GAAG,KAAK;AAAA,KACtC;AAEJ;AAEA,SAAS,SAAS,OAAkB;AAClC,SACE,6CAAC,uBAAK,OAAM,QAAO,SAAO,MAAC,MAAK,MAAK,UAAQ,MAAE,GAAG,OAChD;AAAA,iDAAC,oBAAK,QAAL,EAAY,QAAM,MACjB;AAAA,kDAAC,qBAAG,uBAAS;AAAA,MACb,4CAAC,4BAAU,OAAM,QAAO,2BAAa;AAAA,OACvC;AAAA,IACA,6CAAC,oBAAK,QAAL,EAAY,QAAM,MACjB;AAAA,kDAAC,yBAAO,GAAG,GAAG;AAAA,MACd,4CAAC,yBAAO,IAAG,OAAM,sBAAQ;AAAA,OAC3B;AAAA,IACA,4CAAC,oBAAK,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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAAsE;AAE/D,SAAS,WAAW;AACzB,SACE,6CAAC,yBAAO,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,4CAAC,YAAS,MAAK,MAAK,GAAG,KAAK,GAAG,KAAK;AAAA,KACtC;AAEJ;AAEA,SAAS,SAAS,OAAkB;AAClC,SACE,6CAAC,uBAAK,OAAM,QAAO,SAAO,MAAC,MAAK,MAAK,UAAQ,MAAE,GAAG,OAChD;AAAA,iDAAC,oBAAK,QAAL,EAAY,QAAM,MACjB;AAAA,kDAAC,qBAAG,uBAAS;AAAA,MACb,4CAAC,4BAAU,OAAM,QAAO,2BAAa;AAAA,OACvC;AAAA,IACA,6CAAC,oBAAK,QAAL,EAAY,QAAM,MACjB;AAAA,kDAAC,yBAAO,MAAM,GAAG;AAAA,MACjB,4CAAC,yBAAO,cAAa,OAAM,sBAAQ;AAAA,OACrC;AAAA,IACA,4CAAC,oBAAK,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/cjs/CheckboxDemo.js

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

package/dist/cjs/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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKI;AALJ,0BAAmC;AACnC,qBAA4D;AAErD,SAAS,eAAe;AAC7B,SACE,6CAAC,yBAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,gDAAC,qBAAkB,MAAK,MAAK;AAAA,IAC7B,4CAAC,qBAAkB,MAAK,MAAK,gBAAc,MAAC;AAAA,IAC5C,4CAAC,qBAAkB,MAAK,MAAK;AAAA,KAC/B;AAEJ;AAEA,SAAS,kBAAkB,OAAuD;AAChF,QAAM,KAAK,YAAY,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC;AACpD,SACE,6CAAC,yBAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,gDAAC,2BAAS,IAAQ,MAAM,MAAM,MAAM,gBAAgB,MAAM,gBACxD,sDAAC,wBAAS,WAAT,EACC,sDAAC,oBAAAA,OAAA,EAAU,GACb,GACF;AAAA,IAEA,4CAAC,wBAAM,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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKI;AALJ,0BAAmC;AACnC,qBAA4D;AAErD,SAAS,eAAe;AAC7B,SACE,6CAAC,yBAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA,gDAAC,qBAAkB,MAAK,MAAK;AAAA,IAC7B,4CAAC,qBAAkB,MAAK,MAAK,gBAAc,MAAC;AAAA,IAC5C,4CAAC,qBAAkB,MAAK,MAAK;AAAA,KAC/B;AAEJ;AAEA,SAAS,kBAAkB,OAAuD;AAChF,QAAM,KAAK,YAAY,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC;AACpD,SACE,6CAAC,yBAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA,gDAAC,2BAAS,IAAQ,MAAM,MAAM,MAAM,gBAAgB,MAAM,gBACxD,sDAAC,wBAAS,WAAT,EACC,sDAAC,oBAAAA,OAAA,EAAU,GACb,GACF;AAAA,IAEA,4CAAC,wBAAM,MAAM,MAAM,MAAM,SAAS,IAAI,yCAEtC;AAAA,KACF;AAEJ;",
   "names": ["CheckIcon"]
 }

package/dist/cjs/ColorsDemo.js

@@ -27,7 +27,7 @@ const colorGroups = ["orange", "yellow", "green", "blue", "purple", "pink", "red
 function ColorsDemo() {
   const colors = (0, import_tamagui.getTokens)({ prefixed: false }).color;
   const [colorsLight, colorsDark] = [getColors(colors), getColors(colors, true)];
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { mt: "$4", space: "$8", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { marginTop: "$4", space: "$8", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColorsRow, { title: "Light", colors: colorsLight }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColorsRow, { title: "Dark", colors: colorsDark })
@@ -36,19 +36,19 @@ function ColorsDemo() {
 function ColorsRow({ title, colors }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { space: true, $sm: { space: "$2" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.H2, { size: "$2", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: true, als: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { space: true, alignSelf: "center", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { space: true, $sm: { space: "$2" }, als: "center", children: [
         colors.map((group, index) => {
           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XStack, { space: "$2", children: group.map((color) => {
             return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_tamagui.Square,
               {
-                br: "$2",
+                borderRadius: "$2",
                 size: "$4",
-                h: "$4",
-                bw: 1,
-                bc: (0, import_tamagui.getVariableValue)(color),
-                boc: "$color7",
+                height: "$4",
+                borderWidth: 1,
+                backgroundColor: (0, import_tamagui.getVariableValue)(color),
+                borderColor: "$color7",
                 $sm: {
                   size: "$2"
                 },
@@ -60,18 +60,18 @@ function ColorsRow({ title, colors }) {
             );
           }) }, index);
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XStack, { space: "$2", als: "center", children: new Array(13).fill(0).slice(1).map((_, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.XStack, { space: "$2", alignSelf: "center", children: new Array(13).fill(0).slice(1).map((_, index) => {
           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_tamagui.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
             },
@@ -79,18 +79,18 @@ function ColorsRow({ title, colors }) {
           );
         }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { space: "$4", mt: "$2", children: colorGroups.map((name) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { space: "$4", marginTop: "$2", children: colorGroups.map((name) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_tamagui.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
         },