@tamagui/demos 1.11.2 → 1.12.0

package/dist/cjs/ScrollViewDemo.js

@@ -24,15 +24,15 @@ module.exports = __toCommonJS(ScrollViewDemo_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_tamagui = require("tamagui");
 function ScrollViewDemo() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, { maxHeight: 250, w: "75%", bc: "$background", p: "$4", br: "$4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { flexWrap: "wrap", ai: "center", jc: "center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { m: "$4", size: 120, bc: "$red9" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, { m: "$4", size: 120, bc: "$orange9" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { m: "$4", size: 120, bc: "$yellow9" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, { m: "$4", size: 120, bc: "$green9" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { m: "$4", size: 120, bc: "$blue9" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, { m: "$4", size: 120, bc: "$purple9" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { m: "$4", size: 120, bc: "$pink9" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, { m: "$4", size: 120, bc: "$red9" })
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, { maxHeight: 250, width: "75%", backgroundColor: "$background", padding: "$4", borderRadius: "$4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { flexWrap: "wrap", alignItems: "center", justifyContent: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { margin: "$4", size: 120, backgroundColor: "$red9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, { margin: "$4", size: 120, backgroundColor: "$orange9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { margin: "$4", size: 120, backgroundColor: "$yellow9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, { margin: "$4", size: 120, backgroundColor: "$green9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { margin: "$4", size: 120, backgroundColor: "$blue9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, { margin: "$4", size: 120, backgroundColor: "$purple9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { margin: "$4", size: 120, backgroundColor: "$pink9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, { margin: "$4", size: 120, backgroundColor: "$red9" })
   ] }) });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/cjs/ScrollViewDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ScrollViewDemo.tsx"],
-  "sourcesContent": ["import { Circle, ScrollView, Square, XStack } from 'tamagui'\n\nexport function ScrollViewDemo() {\n  return (\n    <ScrollView maxHeight={250} w=\"75%\" bc=\"$background\" p=\"$4\" br=\"$4\">\n      <XStack flexWrap=\"wrap\" ai=\"center\" jc=\"center\">\n        <Square m=\"$4\" size={120} bc=\"$red9\" />\n        <Circle m=\"$4\" size={120} bc=\"$orange9\" />\n        <Square m=\"$4\" size={120} bc=\"$yellow9\" />\n        <Circle m=\"$4\" size={120} bc=\"$green9\" />\n        <Square m=\"$4\" size={120} bc=\"$blue9\" />\n        <Circle m=\"$4\" size={120} bc=\"$purple9\" />\n        <Square m=\"$4\" size={120} bc=\"$pink9\" />\n        <Circle m=\"$4\" size={120} bc=\"$red9\" />\n      </XStack>\n    </ScrollView>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKM;AALN,qBAAmD;AAE5C,SAAS,iBAAiB;AAC/B,SACE,4CAAC,6BAAW,WAAW,KAAK,GAAE,OAAM,IAAG,eAAc,GAAE,MAAK,IAAG,MAC7D,uDAAC,yBAAO,UAAS,QAAO,IAAG,UAAS,IAAG,UACrC;AAAA,gDAAC,yBAAO,GAAE,MAAK,MAAM,KAAK,IAAG,SAAQ;AAAA,IACrC,4CAAC,yBAAO,GAAE,MAAK,MAAM,KAAK,IAAG,YAAW;AAAA,IACxC,4CAAC,yBAAO,GAAE,MAAK,MAAM,KAAK,IAAG,YAAW;AAAA,IACxC,4CAAC,yBAAO,GAAE,MAAK,MAAM,KAAK,IAAG,WAAU;AAAA,IACvC,4CAAC,yBAAO,GAAE,MAAK,MAAM,KAAK,IAAG,UAAS;AAAA,IACtC,4CAAC,yBAAO,GAAE,MAAK,MAAM,KAAK,IAAG,YAAW;AAAA,IACxC,4CAAC,yBAAO,GAAE,MAAK,MAAM,KAAK,IAAG,UAAS;AAAA,IACtC,4CAAC,yBAAO,GAAE,MAAK,MAAM,KAAK,IAAG,SAAQ;AAAA,KACvC,GACF;AAEJ;",
+  "sourcesContent": ["import { Circle, ScrollView, Square, XStack } from 'tamagui'\n\nexport function ScrollViewDemo() {\n  return (\n    <ScrollView maxHeight={250} width=\"75%\" backgroundColor=\"$background\" padding=\"$4\" borderRadius=\"$4\">\n      <XStack flexWrap=\"wrap\" alignItems=\"center\" justifyContent=\"center\">\n        <Square margin=\"$4\" size={120} backgroundColor=\"$red9\" />\n        <Circle margin=\"$4\" size={120} backgroundColor=\"$orange9\" />\n        <Square margin=\"$4\" size={120} backgroundColor=\"$yellow9\" />\n        <Circle margin=\"$4\" size={120} backgroundColor=\"$green9\" />\n        <Square margin=\"$4\" size={120} backgroundColor=\"$blue9\" />\n        <Circle margin=\"$4\" size={120} backgroundColor=\"$purple9\" />\n        <Square margin=\"$4\" size={120} backgroundColor=\"$pink9\" />\n        <Circle margin=\"$4\" size={120} backgroundColor=\"$red9\" />\n      </XStack>\n    </ScrollView>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKM;AALN,qBAAmD;AAE5C,SAAS,iBAAiB;AAC/B,SACE,4CAAC,6BAAW,WAAW,KAAK,OAAM,OAAM,iBAAgB,eAAc,SAAQ,MAAK,cAAa,MAC9F,uDAAC,yBAAO,UAAS,QAAO,YAAW,UAAS,gBAAe,UACzD;AAAA,gDAAC,yBAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,SAAQ;AAAA,IACvD,4CAAC,yBAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,YAAW;AAAA,IAC1D,4CAAC,yBAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,YAAW;AAAA,IAC1D,4CAAC,yBAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,WAAU;AAAA,IACzD,4CAAC,yBAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,UAAS;AAAA,IACxD,4CAAC,yBAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,YAAW;AAAA,IAC1D,4CAAC,yBAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,UAAS;AAAA,IACxD,4CAAC,yBAAO,QAAO,MAAK,MAAM,KAAK,iBAAgB,SAAQ;AAAA,KACzD,GACF;AAEJ;",
   "names": []
 }

package/dist/cjs/SelectDemo.js

@@ -29,14 +29,14 @@ var import_linear_gradient = require("tamagui/linear-gradient");
 function SelectDemo() {
   const [val, setVal] = (0, import_react.useState)("apple");
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select, { id: "food", value: val, onValueChange: setVal, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.Trigger, { w: 180, iconAfter: import_lucide_icons.ChevronDown, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.Value, { placeholder: "Something" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.Trigger, { width: 180, iconAfter: import_lucide_icons.ChevronDown, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.Value, { placeholder: "Something" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Adapt, { when: "sm", platform: "touch", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Sheet, { modal: true, dismissOnSnapToBottom: true, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Frame, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Sheet.ScrollView, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Adapt.Contents, {}) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Overlay, {})
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.Content, { zIndex: 2e5, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.ScrollUpButton, { ai: "center", jc: "center", pos: "relative", w: "100%", h: "$3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { zi: 10, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.ChevronUp, { size: 20 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.ScrollUpButton, { alignItems: "center", justifyContent: "center", position: "relative", width: "100%", height: "$3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { zIndex: 10, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.ChevronUp, { size: 20 }) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_linear_gradient.LinearGradient,
           {
@@ -44,7 +44,7 @@ function SelectDemo() {
             end: [0, 1],
             fullscreen: true,
             colors: ["$background", "$backgroundTransparent"],
-            br: "$4"
+            borderRadius: "$4"
           }
         )
       ] }),
@@ -53,12 +53,12 @@ function SelectDemo() {
         items.map((item, i) => {
           return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.Item, { index: i, value: item.name.toLowerCase(), children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.ItemText, { children: item.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.ItemIndicator, { ml: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.Check, { size: 16 }) })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Select.ItemIndicator, { marginLeft: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.Check, { size: 16 }) })
           ] }, item.name);
         })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.ScrollDownButton, { ai: "center", jc: "center", pos: "relative", w: "100%", h: "$3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { zi: 10, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.ChevronDown, { size: 20 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.Select.ScrollDownButton, { alignItems: "center", justifyContent: "center", position: "relative", width: "100%", height: "$3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { zIndex: 10, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_icons.ChevronDown, { size: 20 }) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_linear_gradient.LinearGradient,
           {
@@ -66,7 +66,7 @@ function SelectDemo() {
             end: [0, 1],
             fullscreen: true,
             colors: ["$backgroundTransparent", "$background"],
-            br: "$4"
+            borderRadius: "$4"
           }
         )
       ] })

package/dist/cjs/SelectDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SelectDemo.tsx"],
-  "sourcesContent": ["import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Adapt, Select, Sheet, YStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function SelectDemo() {\n  const [val, setVal] = useState('apple')\n  return (\n    <Select id=\"food\" value={val} onValueChange={setVal}>\n      <Select.Trigger w={180} iconAfter={ChevronDown}>\n        <Select.Value placeholder=\"Something\" />\n      </Select.Trigger>\n\n      <Adapt when=\"sm\" platform=\"touch\">\n        <Sheet modal dismissOnSnapToBottom>\n          <Sheet.Frame>\n            <Sheet.ScrollView>\n              <Adapt.Contents />\n            </Sheet.ScrollView>\n          </Sheet.Frame>\n          <Sheet.Overlay />\n        </Sheet>\n      </Adapt>\n\n      <Select.Content zIndex={200000}>\n        <Select.ScrollUpButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n          <YStack zi={10}>\n            <ChevronUp size={20} />\n          </YStack>\n          <LinearGradient\n            start={[0, 0]}\n            end={[0, 1]}\n            fullscreen\n            colors={['$background', '$backgroundTransparent']}\n            br=\"$4\"\n          />\n        </Select.ScrollUpButton>\n\n        <Select.Viewport minWidth={200}>\n          <Select.Group space=\"$0\">\n            <Select.Label>Fruits</Select.Label>\n            {items.map((item, i) => {\n              return (\n                <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>\n                  <Select.ItemText>{item.name}</Select.ItemText>\n                  <Select.ItemIndicator ml=\"auto\">\n                    <Check size={16} />\n                  </Select.ItemIndicator>\n                </Select.Item>\n              )\n            })}\n          </Select.Group>\n        </Select.Viewport>\n\n        <Select.ScrollDownButton ai=\"center\" jc=\"center\" pos=\"relative\" w=\"100%\" h=\"$3\">\n          <YStack zi={10}>\n            <ChevronDown size={20} />\n          </YStack>\n          <LinearGradient\n            start={[0, 0]}\n            end={[0, 1]}\n            fullscreen\n            colors={['$backgroundTransparent', '$background']}\n            br=\"$4\"\n          />\n        </Select.ScrollDownButton>\n      </Select.Content>\n    </Select>\n  )\n}\n\nconst items = [\n  { name: 'Apple' },\n  { name: 'Pear' },\n  { name: 'Blackberry' },\n  { name: 'Peach' },\n  { name: 'Apricot' },\n  { name: 'Melon' },\n  { name: 'Honeydew' },\n  { name: 'Starfruit' },\n  { name: 'Blueberry' },\n  { name: 'Raspberry' },\n  { name: 'Strawberry' },\n  { name: 'Mango' },\n  { name: 'Pineapple' },\n  { name: 'Lime' },\n  { name: 'Lemon' },\n  { name: 'Coconut' },\n  { name: 'Guava' },\n  { name: 'Papaya' },\n  { name: 'Orange' },\n  { name: 'Grape' },\n  { name: 'Jackfruit' },\n  { name: 'Durian' },\n]\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Check, ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { useState } from 'react'\nimport { Adapt, Select, Sheet, YStack } from 'tamagui'\nimport { LinearGradient } from 'tamagui/linear-gradient'\n\nexport function SelectDemo() {\n  const [val, setVal] = useState('apple')\n  return (\n    <Select id=\"food\" value={val} onValueChange={setVal}>\n      <Select.Trigger width={180} iconAfter={ChevronDown}>\n        <Select.Value placeholder=\"Something\" />\n      </Select.Trigger>\n\n      <Adapt when=\"sm\" platform=\"touch\">\n        <Sheet modal dismissOnSnapToBottom>\n          <Sheet.Frame>\n            <Sheet.ScrollView>\n              <Adapt.Contents />\n            </Sheet.ScrollView>\n          </Sheet.Frame>\n          <Sheet.Overlay />\n        </Sheet>\n      </Adapt>\n\n      <Select.Content zIndex={200000}>\n        <Select.ScrollUpButton alignItems=\"center\" justifyContent=\"center\" position=\"relative\" width=\"100%\" height=\"$3\">\n          <YStack zIndex={10}>\n            <ChevronUp size={20} />\n          </YStack>\n          <LinearGradient\n            start={[0, 0]}\n            end={[0, 1]}\n            fullscreen\n            colors={['$background', '$backgroundTransparent']}\n            borderRadius=\"$4\"\n          />\n        </Select.ScrollUpButton>\n\n        <Select.Viewport minWidth={200}>\n          <Select.Group space=\"$0\">\n            <Select.Label>Fruits</Select.Label>\n            {items.map((item, i) => {\n              return (\n                <Select.Item index={i} key={item.name} value={item.name.toLowerCase()}>\n                  <Select.ItemText>{item.name}</Select.ItemText>\n                  <Select.ItemIndicator marginLeft=\"auto\">\n                    <Check size={16} />\n                  </Select.ItemIndicator>\n                </Select.Item>\n              )\n            })}\n          </Select.Group>\n        </Select.Viewport>\n\n        <Select.ScrollDownButton alignItems=\"center\" justifyContent=\"center\" position=\"relative\" width=\"100%\" height=\"$3\">\n          <YStack zIndex={10}>\n            <ChevronDown size={20} />\n          </YStack>\n          <LinearGradient\n            start={[0, 0]}\n            end={[0, 1]}\n            fullscreen\n            colors={['$backgroundTransparent', '$background']}\n            borderRadius=\"$4\"\n          />\n        </Select.ScrollDownButton>\n      </Select.Content>\n    </Select>\n  )\n}\n\nconst items = [\n  { name: 'Apple' },\n  { name: 'Pear' },\n  { name: 'Blackberry' },\n  { name: 'Peach' },\n  { name: 'Apricot' },\n  { name: 'Melon' },\n  { name: 'Honeydew' },\n  { name: 'Starfruit' },\n  { name: 'Blueberry' },\n  { name: 'Raspberry' },\n  { name: 'Strawberry' },\n  { name: 'Mango' },\n  { name: 'Pineapple' },\n  { name: 'Lime' },\n  { name: 'Lemon' },\n  { name: 'Coconut' },\n  { name: 'Guava' },\n  { name: 'Papaya' },\n  { name: 'Orange' },\n  { name: 'Grape' },\n  { name: 'Jackfruit' },\n  { name: 'Durian' },\n]\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/SeparatorDemo.js

@@ -24,15 +24,15 @@ module.exports = __toCommonJS(SeparatorDemo_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_tamagui = require("tamagui");
 function SeparatorDemo() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { w: "100%", maw: 300, mx: 15, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { width: "100%", maxWidth: 300, marginHorizontal: 15, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, { fontWeight: "800", children: "Tamagui" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, { children: "A cross-platform component library." }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, { my: 15 }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { h: 20, ai: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, { marginVertical: 15 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { height: 20, alignItems: "center", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, { children: "Blog" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, { als: "stretch", vertical: true, mx: 15 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, { alignSelf: "stretch", vertical: true, marginHorizontal: 15 }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, { children: "Docs" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, { als: "stretch", vertical: true, mx: 15 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, { alignSelf: "stretch", vertical: true, marginHorizontal: 15 }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, { children: "Source" })
     ] })
   ] });

package/dist/cjs/SeparatorDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SeparatorDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { Paragraph, Separator, XStack, YStack } from 'tamagui'\n\nexport function SeparatorDemo() {\n  return (\n    <YStack w=\"100%\" maw={300} mx={15}>\n      <Paragraph fontWeight=\"800\">Tamagui</Paragraph>\n      <Paragraph>A cross-platform component library.</Paragraph>\n      <Separator my={15} />\n      <XStack h={20} ai=\"center\">\n        <Paragraph>Blog</Paragraph>\n        <Separator als=\"stretch\" vertical mx={15} />\n        <Paragraph>Docs</Paragraph>\n        <Separator als=\"stretch\" vertical mx={15} />\n        <Paragraph>Source</Paragraph>\n      </XStack>\n    </YStack>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMM;AALN,qBAAqD;AAE9C,SAAS,gBAAgB;AAC9B,SACE,6CAAC,yBAAO,GAAE,QAAO,KAAK,KAAK,IAAI,IAC7B;AAAA,gDAAC,4BAAU,YAAW,OAAM,qBAAO;AAAA,IACnC,4CAAC,4BAAU,iDAAmC;AAAA,IAC9C,4CAAC,4BAAU,IAAI,IAAI;AAAA,IACnB,6CAAC,yBAAO,GAAG,IAAI,IAAG,UAChB;AAAA,kDAAC,4BAAU,kBAAI;AAAA,MACf,4CAAC,4BAAU,KAAI,WAAU,UAAQ,MAAC,IAAI,IAAI;AAAA,MAC1C,4CAAC,4BAAU,kBAAI;AAAA,MACf,4CAAC,4BAAU,KAAI,WAAU,UAAQ,MAAC,IAAI,IAAI;AAAA,MAC1C,4CAAC,4BAAU,oBAAM;AAAA,OACnB;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import React from 'react'\nimport { Paragraph, Separator, XStack, YStack } from 'tamagui'\n\nexport function SeparatorDemo() {\n  return (\n    <YStack width=\"100%\" maxWidth={300} marginHorizontal={15}>\n      <Paragraph fontWeight=\"800\">Tamagui</Paragraph>\n      <Paragraph>A cross-platform component library.</Paragraph>\n      <Separator marginVertical={15} />\n      <XStack height={20} alignItems=\"center\">\n        <Paragraph>Blog</Paragraph>\n        <Separator alignSelf=\"stretch\" vertical marginHorizontal={15} />\n        <Paragraph>Docs</Paragraph>\n        <Separator alignSelf=\"stretch\" vertical marginHorizontal={15} />\n        <Paragraph>Source</Paragraph>\n      </XStack>\n    </YStack>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMM;AALN,qBAAqD;AAE9C,SAAS,gBAAgB;AAC9B,SACE,6CAAC,yBAAO,OAAM,QAAO,UAAU,KAAK,kBAAkB,IACpD;AAAA,gDAAC,4BAAU,YAAW,OAAM,qBAAO;AAAA,IACnC,4CAAC,4BAAU,iDAAmC;AAAA,IAC9C,4CAAC,4BAAU,gBAAgB,IAAI;AAAA,IAC/B,6CAAC,yBAAO,QAAQ,IAAI,YAAW,UAC7B;AAAA,kDAAC,4BAAU,kBAAI;AAAA,MACf,4CAAC,4BAAU,WAAU,WAAU,UAAQ,MAAC,kBAAkB,IAAI;AAAA,MAC9D,4CAAC,4BAAU,kBAAI;AAAA,MACf,4CAAC,4BAAU,WAAU,WAAU,UAAQ,MAAC,kBAAkB,IAAI;AAAA,MAC9D,4CAAC,4BAAU,oBAAM;AAAA,OACnB;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/ShapesDemo.js

@@ -24,9 +24,9 @@ module.exports = __toCommonJS(ShapesDemo_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_tamagui = require("tamagui");
 function ShapesDemo() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { p: "$2", space: "$4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { size: 100, bc: "$color", elevation: "$4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, { size: 100, bc: "$color", elevation: "$4" })
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { padding: "$2", space: "$4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Square, { size: 100, backgroundColor: "$color", elevation: "$4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Circle, { size: 100, backgroundColor: "$color", elevation: "$4" })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/cjs/ShapesDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ShapesDemo.tsx"],
-  "sourcesContent": ["import { Circle, Square, XStack } from 'tamagui'\n\nexport function ShapesDemo() {\n  return (\n    <XStack p=\"$2\" space=\"$4\">\n      <Square size={100} bc=\"$color\" elevation=\"$4\" />\n      <Circle size={100} bc=\"$color\" elevation=\"$4\" />\n    </XStack>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAAuC;AAEhC,SAAS,aAAa;AAC3B,SACE,6CAAC,yBAAO,GAAE,MAAK,OAAM,MACnB;AAAA,gDAAC,yBAAO,MAAM,KAAK,IAAG,UAAS,WAAU,MAAK;AAAA,IAC9C,4CAAC,yBAAO,MAAM,KAAK,IAAG,UAAS,WAAU,MAAK;AAAA,KAChD;AAEJ;",
+  "sourcesContent": ["import { Circle, Square, XStack } from 'tamagui'\n\nexport function ShapesDemo() {\n  return (\n    <XStack padding=\"$2\" space=\"$4\">\n      <Square size={100} backgroundColor=\"$color\" elevation=\"$4\" />\n      <Circle size={100} backgroundColor=\"$color\" elevation=\"$4\" />\n    </XStack>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAAuC;AAEhC,SAAS,aAAa;AAC3B,SACE,6CAAC,yBAAO,SAAQ,MAAK,OAAM,MACzB;AAAA,gDAAC,yBAAO,MAAM,KAAK,iBAAgB,UAAS,WAAU,MAAK;AAAA,IAC3D,4CAAC,yBAAO,MAAM,KAAK,iBAAgB,UAAS,WAAU,MAAK;AAAA,KAC7D;AAEJ;",
   "names": []
 }

package/dist/cjs/SheetDemo.js

@@ -52,9 +52,9 @@ const SheetDemo = () => {
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sheet.Sheet.Overlay, {}),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sheet.Sheet.Handle, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sheet.Sheet.Frame, { f: 1, p: "$4", jc: "center", ai: "center", space: "$5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sheet.Sheet.Frame, { flex: 1, padding: "$4", justifyContent: "center", alignItems: "center", space: "$5", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Button, { size: "$6", circular: true, icon: import_lucide_icons.ChevronDown, onPress: () => setOpen(false) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Input, { w: 200 }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Input, { width: 200 }),
             modal && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InnerSheet, { open: innerOpen, onOpenChange: setInnerOpen }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -77,13 +77,13 @@ function InnerSheet(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sheet.Sheet, { modal: true, snapPoints: [90], dismissOnSnapToBottom: true, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sheet.Sheet.Overlay, {}),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sheet.Sheet.Handle, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sheet.Sheet.Frame, { f: 1, jc: "center", ai: "center", space: "$5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sheet.Sheet.ScrollView, { p: "$4", space: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sheet.Sheet.Frame, { flex: 1, justifyContent: "center", alignItems: "center", space: "$5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sheet.Sheet.ScrollView, { padding: "$4", space: true, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_tamagui.Button,
         {
           size: "$8",
           circular: true,
-          als: "center",
+          alignSelf: "center",
           icon: import_lucide_icons.ChevronDown,
           onPress: () => {
             var _a;

package/dist/cjs/SheetDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SheetDemo.tsx"],
-  "sourcesContent": ["import { ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { Sheet } from '@tamagui/sheet'\nimport { SheetProps } from '@tamagui/sheet/types/types'\nimport { useState } from 'react'\nimport { Button, H1, H2, Input, Paragraph, XStack } from 'tamagui'\n\nexport const SheetDemo = () => {\n  const [position, setPosition] = useState(0)\n  const [open, setOpen] = useState(false)\n  const [modal, setModal] = useState(false)\n  const [innerOpen, setInnerOpen] = useState(false)\n\n  return (\n    <>\n      <XStack space>\n        <Button onPress={() => setOpen(true)}>Open</Button>\n        <Button onPress={() => setModal((x) => !x)}>\n          {modal ? 'Type: Modal' : 'Type: Inline'}\n        </Button>\n      </XStack>\n\n      <Sheet\n        forceRemoveScrollEnabled={open}\n        modal={modal}\n        open={open}\n        onOpenChange={setOpen}\n        snapPoints={[85, 50, 25]}\n        dismissOnSnapToBottom\n        position={position}\n        onPositionChange={setPosition}\n        zIndex={100_000}\n        animation=\"bouncy\" // for the css driver\n      >\n        <Sheet.Overlay />\n        <Sheet.Handle />\n        <Sheet.Frame f={1} p=\"$4\" jc=\"center\" ai=\"center\" space=\"$5\">\n          <Button size=\"$6\" circular icon={ChevronDown} onPress={() => setOpen(false)} />\n          <Input w={200} />\n          {modal && (\n            <>\n              <InnerSheet open={innerOpen} onOpenChange={setInnerOpen} />\n              <Button\n                size=\"$6\"\n                circular\n                icon={ChevronUp}\n                onPress={() => setInnerOpen(true)}\n              ></Button>\n            </>\n          )}\n        </Sheet.Frame>\n      </Sheet>\n    </>\n  )\n}\n\nfunction InnerSheet(props: SheetProps) {\n  return (\n    <Sheet modal snapPoints={[90]} dismissOnSnapToBottom {...props}>\n      <Sheet.Overlay />\n      <Sheet.Handle />\n      <Sheet.Frame f={1} jc=\"center\" ai=\"center\" space=\"$5\">\n        <Sheet.ScrollView p=\"$4\" space>\n          <Button\n            size=\"$8\"\n            circular\n            als=\"center\"\n            icon={ChevronDown}\n            onPress={() => props.onOpenChange?.(false)}\n          />\n          <H1>Hello world</H1>\n          <H2>You can scroll me</H2>\n          {[1, 2, 3].map((i) => (\n            <Paragraph key={i} size=\"$10\">\n              Eu officia sunt ipsum nisi dolore labore est laborum laborum in esse ad\n              pariatur. Dolor excepteur esse deserunt voluptate labore ea. Exercitation\n              ipsum deserunt occaecat cupidatat consequat est adipisicing velit cupidatat\n              ullamco veniam aliquip reprehenderit officia. Officia labore culpa ullamco\n              velit. In sit occaecat velit ipsum fugiat esse aliqua dolor sint.\n            </Paragraph>\n          ))}\n        </Sheet.ScrollView>\n      </Sheet.Frame>\n    </Sheet>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAcM;AAdN,0BAAuC;AACvC,mBAAsB;AAEtB,mBAAyB;AACzB,qBAAyD;AAElD,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,CAAC;AAC1C,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,KAAK;AACxC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAEhD,SACE,4EACE;AAAA,iDAAC,yBAAO,OAAK,MACX;AAAA,kDAAC,yBAAO,SAAS,MAAM,QAAQ,IAAI,GAAG,kBAAI;AAAA,MAC1C,4CAAC,yBAAO,SAAS,MAAM,SAAS,CAAC,MAAM,CAAC,CAAC,GACtC,kBAAQ,gBAAgB,gBAC3B;AAAA,OACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,0BAA0B;AAAA,QAC1B;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd,YAAY,CAAC,IAAI,IAAI,EAAE;AAAA,QACvB,uBAAqB;AAAA,QACrB;AAAA,QACA,kBAAkB;AAAA,QAClB,QAAQ;AAAA,QACR,WAAU;AAAA,QAEV;AAAA,sDAAC,mBAAM,SAAN,EAAc;AAAA,UACf,4CAAC,mBAAM,QAAN,EAAa;AAAA,UACd,6CAAC,mBAAM,OAAN,EAAY,GAAG,GAAG,GAAE,MAAK,IAAG,UAAS,IAAG,UAAS,OAAM,MACtD;AAAA,wDAAC,yBAAO,MAAK,MAAK,UAAQ,MAAC,MAAM,iCAAa,SAAS,MAAM,QAAQ,KAAK,GAAG;AAAA,YAC7E,4CAAC,wBAAM,GAAG,KAAK;AAAA,YACd,SACC,4EACE;AAAA,0DAAC,cAAW,MAAM,WAAW,cAAc,cAAc;AAAA,cACzD;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,UAAQ;AAAA,kBACR,MAAM;AAAA,kBACN,SAAS,MAAM,aAAa,IAAI;AAAA;AAAA,cACjC;AAAA,eACH;AAAA,aAEJ;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEA,SAAS,WAAW,OAAmB;AACrC,SACE,6CAAC,sBAAM,OAAK,MAAC,YAAY,CAAC,EAAE,GAAG,uBAAqB,MAAE,GAAG,OACvD;AAAA,gDAAC,mBAAM,SAAN,EAAc;AAAA,IACf,4CAAC,mBAAM,QAAN,EAAa;AAAA,IACd,4CAAC,mBAAM,OAAN,EAAY,GAAG,GAAG,IAAG,UAAS,IAAG,UAAS,OAAM,MAC/C,uDAAC,mBAAM,YAAN,EAAiB,GAAE,MAAK,OAAK,MAC5B;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAQ;AAAA,UACR,KAAI;AAAA,UACJ,MAAM;AAAA,UACN,SAAS,MAAG;AAnExB;AAmE2B,+BAAM,iBAAN,+BAAqB;AAAA;AAAA;AAAA,MACtC;AAAA,MACA,4CAAC,qBAAG,yBAAW;AAAA,MACf,4CAAC,qBAAG,+BAAiB;AAAA,MACpB,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MACd,4CAAC,4BAAkB,MAAK,OAAM,0XAAd,CAMhB,CACD;AAAA,OACH,GACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { ChevronDown, ChevronUp } from '@tamagui/lucide-icons'\nimport { Sheet } from '@tamagui/sheet'\nimport { SheetProps } from '@tamagui/sheet/types/types'\nimport { useState } from 'react'\nimport { Button, H1, H2, Input, Paragraph, XStack } from 'tamagui'\n\nexport const SheetDemo = () => {\n  const [position, setPosition] = useState(0)\n  const [open, setOpen] = useState(false)\n  const [modal, setModal] = useState(false)\n  const [innerOpen, setInnerOpen] = useState(false)\n\n  return (\n    <>\n      <XStack space>\n        <Button onPress={() => setOpen(true)}>Open</Button>\n        <Button onPress={() => setModal((x) => !x)}>\n          {modal ? 'Type: Modal' : 'Type: Inline'}\n        </Button>\n      </XStack>\n\n      <Sheet\n        forceRemoveScrollEnabled={open}\n        modal={modal}\n        open={open}\n        onOpenChange={setOpen}\n        snapPoints={[85, 50, 25]}\n        dismissOnSnapToBottom\n        position={position}\n        onPositionChange={setPosition}\n        zIndex={100_000}\n        animation=\"bouncy\" // for the css driver\n      >\n        <Sheet.Overlay />\n        <Sheet.Handle />\n        <Sheet.Frame flex={1} padding=\"$4\" justifyContent=\"center\" alignItems=\"center\" space=\"$5\">\n          <Button size=\"$6\" circular icon={ChevronDown} onPress={() => setOpen(false)} />\n          <Input width={200} />\n          {modal && (\n            <>\n              <InnerSheet open={innerOpen} onOpenChange={setInnerOpen} />\n              <Button\n                size=\"$6\"\n                circular\n                icon={ChevronUp}\n                onPress={() => setInnerOpen(true)}\n              ></Button>\n            </>\n          )}\n        </Sheet.Frame>\n      </Sheet>\n    </>\n  )\n}\n\nfunction InnerSheet(props: SheetProps) {\n  return (\n    <Sheet modal snapPoints={[90]} dismissOnSnapToBottom {...props}>\n      <Sheet.Overlay />\n      <Sheet.Handle />\n      <Sheet.Frame flex={1} justifyContent=\"center\" alignItems=\"center\" space=\"$5\">\n        <Sheet.ScrollView padding=\"$4\" space>\n          <Button\n            size=\"$8\"\n            circular\n            alignSelf=\"center\"\n            icon={ChevronDown}\n            onPress={() => props.onOpenChange?.(false)}\n          />\n          <H1>Hello world</H1>\n          <H2>You can scroll me</H2>\n          {[1, 2, 3].map((i) => (\n            <Paragraph key={i} size=\"$10\">\n              Eu officia sunt ipsum nisi dolore labore est laborum laborum in esse ad\n              pariatur. Dolor excepteur esse deserunt voluptate labore ea. Exercitation\n              ipsum deserunt occaecat cupidatat consequat est adipisicing velit cupidatat\n              ullamco veniam aliquip reprehenderit officia. Officia labore culpa ullamco\n              velit. In sit occaecat velit ipsum fugiat esse aliqua dolor sint.\n            </Paragraph>\n          ))}\n        </Sheet.ScrollView>\n      </Sheet.Frame>\n    </Sheet>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAcM;AAdN,0BAAuC;AACvC,mBAAsB;AAEtB,mBAAyB;AACzB,qBAAyD;AAElD,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,CAAC;AAC1C,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,KAAK;AACxC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAEhD,SACE,4EACE;AAAA,iDAAC,yBAAO,OAAK,MACX;AAAA,kDAAC,yBAAO,SAAS,MAAM,QAAQ,IAAI,GAAG,kBAAI;AAAA,MAC1C,4CAAC,yBAAO,SAAS,MAAM,SAAS,CAAC,MAAM,CAAC,CAAC,GACtC,kBAAQ,gBAAgB,gBAC3B;AAAA,OACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,0BAA0B;AAAA,QAC1B;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd,YAAY,CAAC,IAAI,IAAI,EAAE;AAAA,QACvB,uBAAqB;AAAA,QACrB;AAAA,QACA,kBAAkB;AAAA,QAClB,QAAQ;AAAA,QACR,WAAU;AAAA,QAEV;AAAA,sDAAC,mBAAM,SAAN,EAAc;AAAA,UACf,4CAAC,mBAAM,QAAN,EAAa;AAAA,UACd,6CAAC,mBAAM,OAAN,EAAY,MAAM,GAAG,SAAQ,MAAK,gBAAe,UAAS,YAAW,UAAS,OAAM,MACnF;AAAA,wDAAC,yBAAO,MAAK,MAAK,UAAQ,MAAC,MAAM,iCAAa,SAAS,MAAM,QAAQ,KAAK,GAAG;AAAA,YAC7E,4CAAC,wBAAM,OAAO,KAAK;AAAA,YAClB,SACC,4EACE;AAAA,0DAAC,cAAW,MAAM,WAAW,cAAc,cAAc;AAAA,cACzD;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,UAAQ;AAAA,kBACR,MAAM;AAAA,kBACN,SAAS,MAAM,aAAa,IAAI;AAAA;AAAA,cACjC;AAAA,eACH;AAAA,aAEJ;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEA,SAAS,WAAW,OAAmB;AACrC,SACE,6CAAC,sBAAM,OAAK,MAAC,YAAY,CAAC,EAAE,GAAG,uBAAqB,MAAE,GAAG,OACvD;AAAA,gDAAC,mBAAM,SAAN,EAAc;AAAA,IACf,4CAAC,mBAAM,QAAN,EAAa;AAAA,IACd,4CAAC,mBAAM,OAAN,EAAY,MAAM,GAAG,gBAAe,UAAS,YAAW,UAAS,OAAM,MACtE,uDAAC,mBAAM,YAAN,EAAiB,SAAQ,MAAK,OAAK,MAClC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAQ;AAAA,UACR,WAAU;AAAA,UACV,MAAM;AAAA,UACN,SAAS,MAAG;AAnExB;AAmE2B,+BAAM,iBAAN,+BAAqB;AAAA;AAAA;AAAA,MACtC;AAAA,MACA,4CAAC,qBAAG,yBAAW;AAAA,MACf,4CAAC,qBAAG,+BAAiB;AAAA,MACpB,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MACd,4CAAC,4BAAkB,MAAK,OAAM,0XAAd,CAMhB,CACD;AAAA,OACH,GACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/SliderDemo.js

@@ -24,7 +24,7 @@ module.exports = __toCommonJS(SliderDemo_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_tamagui = require("tamagui");
 function SliderDemo() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { height: 200, ai: "center", space: "$8", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { height: 200, alignItems: "center", space: "$8", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SimpleSlider, { height: 200, orientation: "vertical" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SimpleSlider, { width: 200 })
   ] });

package/dist/cjs/SliderDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SliderDemo.tsx"],
-  "sourcesContent": ["import { Slider, SliderProps, Spacer, XStack } from 'tamagui'\n\nexport function SliderDemo() {\n  return (\n    <XStack height={200} ai=\"center\" space=\"$8\">\n      <SimpleSlider height={200} orientation=\"vertical\" />\n      <SimpleSlider width={200} />\n    </XStack>\n  )\n}\n\nfunction SimpleSlider({ children, ...props }: SliderProps) {\n  return (\n    <Slider defaultValue={[50]} max={100} step={1} {...props}>\n      <Slider.Track>\n        <Slider.TrackActive />\n      </Slider.Track>\n      <Slider.Thumb index={0} circular elevate />\n      {children}\n    </Slider>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAAoD;AAE7C,SAAS,aAAa;AAC3B,SACE,6CAAC,yBAAO,QAAQ,KAAK,IAAG,UAAS,OAAM,MACrC;AAAA,gDAAC,gBAAa,QAAQ,KAAK,aAAY,YAAW;AAAA,IAClD,4CAAC,gBAAa,OAAO,KAAK;AAAA,KAC5B;AAEJ;AAEA,SAAS,aAAa,EAAE,UAAU,GAAG,MAAM,GAAgB;AACzD,SACE,6CAAC,yBAAO,cAAc,CAAC,EAAE,GAAG,KAAK,KAAK,MAAM,GAAI,GAAG,OACjD;AAAA,gDAAC,sBAAO,OAAP,EACC,sDAAC,sBAAO,aAAP,EAAmB,GACtB;AAAA,IACA,4CAAC,sBAAO,OAAP,EAAa,OAAO,GAAG,UAAQ,MAAC,SAAO,MAAC;AAAA,IACxC;AAAA,KACH;AAEJ;",
+  "sourcesContent": ["import { Slider, SliderProps, Spacer, XStack } from 'tamagui'\n\nexport function SliderDemo() {\n  return (\n    <XStack height={200} alignItems=\"center\" space=\"$8\">\n      <SimpleSlider height={200} orientation=\"vertical\" />\n      <SimpleSlider width={200} />\n    </XStack>\n  )\n}\n\nfunction SimpleSlider({ children, ...props }: SliderProps) {\n  return (\n    <Slider defaultValue={[50]} max={100} step={1} {...props}>\n      <Slider.Track>\n        <Slider.TrackActive />\n      </Slider.Track>\n      <Slider.Thumb index={0} circular elevate />\n      {children}\n    </Slider>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAAoD;AAE7C,SAAS,aAAa;AAC3B,SACE,6CAAC,yBAAO,QAAQ,KAAK,YAAW,UAAS,OAAM,MAC7C;AAAA,gDAAC,gBAAa,QAAQ,KAAK,aAAY,YAAW;AAAA,IAClD,4CAAC,gBAAa,OAAO,KAAK;AAAA,KAC5B;AAEJ;AAEA,SAAS,aAAa,EAAE,UAAU,GAAG,MAAM,GAAgB;AACzD,SACE,6CAAC,yBAAO,cAAc,CAAC,EAAE,GAAG,KAAK,KAAK,MAAM,GAAI,GAAG,OACjD;AAAA,gDAAC,sBAAO,OAAP,EACC,sDAAC,sBAAO,aAAP,EAAmB,GACtB;AAAA,IACA,4CAAC,sBAAO,OAAP,EAAa,OAAO,GAAG,UAAQ,MAAC,SAAO,MAAC;AAAA,IACxC;AAAA,KACH;AAEJ;",
   "names": []
 }

package/dist/cjs/SpinnerDemo.js

@@ -24,7 +24,7 @@ module.exports = __toCommonJS(SpinnerDemo_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_tamagui = require("tamagui");
 function SpinnerDemo() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { p: "$3", space: "$4", ai: "center", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { padding: "$3", space: "$4", alignItems: "center", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Spinner, { size: "small", color: "$green10" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Spinner, { size: "large", color: "$orange10" })
   ] });

package/dist/cjs/SpinnerDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SpinnerDemo.tsx"],
-  "sourcesContent": ["import { Spinner, YStack } from 'tamagui'\n\nexport function SpinnerDemo() {\n  return (\n    <YStack p=\"$3\" space=\"$4\" ai=\"center\">\n      <Spinner size=\"small\" color=\"$green10\" />\n      <Spinner size=\"large\" color=\"$orange10\" />\n    </YStack>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAAgC;AAEzB,SAAS,cAAc;AAC5B,SACE,6CAAC,yBAAO,GAAE,MAAK,OAAM,MAAK,IAAG,UAC3B;AAAA,gDAAC,0BAAQ,MAAK,SAAQ,OAAM,YAAW;AAAA,IACvC,4CAAC,0BAAQ,MAAK,SAAQ,OAAM,aAAY;AAAA,KAC1C;AAEJ;",
+  "sourcesContent": ["import { Spinner, YStack } from 'tamagui'\n\nexport function SpinnerDemo() {\n  return (\n    <YStack padding=\"$3\" space=\"$4\" alignItems=\"center\">\n      <Spinner size=\"small\" color=\"$green10\" />\n      <Spinner size=\"large\" color=\"$orange10\" />\n    </YStack>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAAgC;AAEzB,SAAS,cAAc;AAC5B,SACE,6CAAC,yBAAO,SAAQ,MAAK,OAAM,MAAK,YAAW,UACzC;AAAA,gDAAC,0BAAQ,MAAK,SAAQ,OAAM,YAAW;AAAA,IACvC,4CAAC,0BAAQ,MAAK,SAAQ,OAAM,aAAY;AAAA,KAC1C;AAEJ;",
   "names": []
 }

package/dist/cjs/StacksDemo.js

@@ -24,21 +24,54 @@ module.exports = __toCommonJS(StacksDemo_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_tamagui = require("tamagui");
 function StacksDemo() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { maw: 250, p: "$2", als: "center", space: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { flex: 1, space: "$2", bw: 2, boc: "$color", br: "$4", p: "$2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { bc: "$color", br: "$3", p: "$2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { bc: "$color", br: "$3", p: "$2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { bc: "$color", br: "$3", p: "$2" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { flex: 1, space: "$2", bw: 2, boc: "$color", br: "$4", p: "$2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { bc: "$color", br: "$3", p: "$2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { bc: "$color", br: "$3", p: "$2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { bc: "$color", br: "$3", p: "$2" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.ZStack, { maw: 50, mah: 85, w: 100, flex: 1, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { fullscreen: true, bw: 2, br: "$4", p: "$2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { fullscreen: true, y: 10, x: 10, bw: 2, br: "$4", p: "$2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { fullscreen: true, y: 20, x: 20, bw: 2, bc: "$color", br: "$4", p: "$2" })
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { maxWidth: 250, padding: "$2", alignSelf: "center", space: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_tamagui.YStack,
+      {
+        flex: 1,
+        space: "$2",
+        borderWidth: 2,
+        borderColor: "$color",
+        borderRadius: "$4",
+        padding: "$2",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { backgroundColor: "$color", borderRadius: "$3", padding: "$2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { backgroundColor: "$color", borderRadius: "$3", padding: "$2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { backgroundColor: "$color", borderRadius: "$3", padding: "$2" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_tamagui.XStack,
+      {
+        flex: 1,
+        space: "$2",
+        borderWidth: 2,
+        borderColor: "$color",
+        borderRadius: "$4",
+        padding: "$2",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { backgroundColor: "$color", borderRadius: "$3", padding: "$2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { backgroundColor: "$color", borderRadius: "$3", padding: "$2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { backgroundColor: "$color", borderRadius: "$3", padding: "$2" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.ZStack, { maxWidth: 50, maxHeight: 85, width: 100, flex: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { fullscreen: true, borderWidth: 2, borderRadius: "$4", padding: "$2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.YStack, { fullscreen: true, y: 10, x: 10, borderWidth: 2, borderRadius: "$4", padding: "$2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_tamagui.YStack,
+        {
+          fullscreen: true,
+          y: 20,
+          x: 20,
+          borderWidth: 2,
+          backgroundColor: "$color",
+          borderRadius: "$4",
+          padding: "$2"
+        }
+      )
     ] })
   ] });
 }

package/dist/cjs/StacksDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/StacksDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { XStack, YStack, ZStack } from 'tamagui'\n\nexport function StacksDemo() {\n  return (\n    <XStack maw={250} p=\"$2\" als=\"center\" space>\n      <YStack flex={1} space=\"$2\" bw={2} boc=\"$color\" br=\"$4\" p=\"$2\">\n        <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n        <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n        <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n      </YStack>\n\n      <XStack flex={1} space=\"$2\" bw={2} boc=\"$color\" br=\"$4\" p=\"$2\">\n        <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n        <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n        <YStack bc=\"$color\" br=\"$3\" p=\"$2\" />\n      </XStack>\n\n      <ZStack maw={50} mah={85} w={100} flex={1}>\n        <YStack fullscreen bw={2} br=\"$4\" p=\"$2\" />\n        <YStack fullscreen y={10} x={10} bw={2} br=\"$4\" p=\"$2\" />\n        <YStack fullscreen y={20} x={20} bw={2} bc=\"$color\" br=\"$4\" p=\"$2\" />\n      </ZStack>\n    </XStack>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMM;AALN,qBAAuC;AAEhC,SAAS,aAAa;AAC3B,SACE,6CAAC,yBAAO,KAAK,KAAK,GAAE,MAAK,KAAI,UAAS,OAAK,MACzC;AAAA,iDAAC,yBAAO,MAAM,GAAG,OAAM,MAAK,IAAI,GAAG,KAAI,UAAS,IAAG,MAAK,GAAE,MACxD;AAAA,kDAAC,yBAAO,IAAG,UAAS,IAAG,MAAK,GAAE,MAAK;AAAA,MACnC,4CAAC,yBAAO,IAAG,UAAS,IAAG,MAAK,GAAE,MAAK;AAAA,MACnC,4CAAC,yBAAO,IAAG,UAAS,IAAG,MAAK,GAAE,MAAK;AAAA,OACrC;AAAA,IAEA,6CAAC,yBAAO,MAAM,GAAG,OAAM,MAAK,IAAI,GAAG,KAAI,UAAS,IAAG,MAAK,GAAE,MACxD;AAAA,kDAAC,yBAAO,IAAG,UAAS,IAAG,MAAK,GAAE,MAAK;AAAA,MACnC,4CAAC,yBAAO,IAAG,UAAS,IAAG,MAAK,GAAE,MAAK;AAAA,MACnC,4CAAC,yBAAO,IAAG,UAAS,IAAG,MAAK,GAAE,MAAK;AAAA,OACrC;AAAA,IAEA,6CAAC,yBAAO,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM,GACtC;AAAA,kDAAC,yBAAO,YAAU,MAAC,IAAI,GAAG,IAAG,MAAK,GAAE,MAAK;AAAA,MACzC,4CAAC,yBAAO,YAAU,MAAC,GAAG,IAAI,GAAG,IAAI,IAAI,GAAG,IAAG,MAAK,GAAE,MAAK;AAAA,MACvD,4CAAC,yBAAO,YAAU,MAAC,GAAG,IAAI,GAAG,IAAI,IAAI,GAAG,IAAG,UAAS,IAAG,MAAK,GAAE,MAAK;AAAA,OACrE;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import React from 'react'\nimport { XStack, YStack, ZStack } from 'tamagui'\n\nexport function StacksDemo() {\n  return (\n    <XStack maxWidth={250} padding=\"$2\" alignSelf=\"center\" space>\n      <YStack\n        flex={1}\n        space=\"$2\"\n        borderWidth={2}\n        borderColor=\"$color\"\n        borderRadius=\"$4\"\n        padding=\"$2\"\n      >\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n      </YStack>\n\n      <XStack\n        flex={1}\n        space=\"$2\"\n        borderWidth={2}\n        borderColor=\"$color\"\n        borderRadius=\"$4\"\n        padding=\"$2\"\n      >\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n        <YStack backgroundColor=\"$color\" borderRadius=\"$3\" padding=\"$2\" />\n      </XStack>\n\n      <ZStack maxWidth={50} maxHeight={85} width={100} flex={1}>\n        <YStack fullscreen borderWidth={2} borderRadius=\"$4\" padding=\"$2\" />\n        <YStack fullscreen y={10} x={10} borderWidth={2} borderRadius=\"$4\" padding=\"$2\" />\n        <YStack\n          fullscreen\n          y={20}\n          x={20}\n          borderWidth={2}\n          backgroundColor=\"$color\"\n          borderRadius=\"$4\"\n          padding=\"$2\"\n        />\n      </ZStack>\n    </XStack>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMM;AALN,qBAAuC;AAEhC,SAAS,aAAa;AAC3B,SACE,6CAAC,yBAAO,UAAU,KAAK,SAAQ,MAAK,WAAU,UAAS,OAAK,MAC1D;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,OAAM;AAAA,QACN,aAAa;AAAA,QACb,aAAY;AAAA,QACZ,cAAa;AAAA,QACb,SAAQ;AAAA,QAER;AAAA,sDAAC,yBAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA,UAChE,4CAAC,yBAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA,UAChE,4CAAC,yBAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA;AAAA;AAAA,IAClE;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,OAAM;AAAA,QACN,aAAa;AAAA,QACb,aAAY;AAAA,QACZ,cAAa;AAAA,QACb,SAAQ;AAAA,QAER;AAAA,sDAAC,yBAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA,UAChE,4CAAC,yBAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA,UAChE,4CAAC,yBAAO,iBAAgB,UAAS,cAAa,MAAK,SAAQ,MAAK;AAAA;AAAA;AAAA,IAClE;AAAA,IAEA,6CAAC,yBAAO,UAAU,IAAI,WAAW,IAAI,OAAO,KAAK,MAAM,GACrD;AAAA,kDAAC,yBAAO,YAAU,MAAC,aAAa,GAAG,cAAa,MAAK,SAAQ,MAAK;AAAA,MAClE,4CAAC,yBAAO,YAAU,MAAC,GAAG,IAAI,GAAG,IAAI,aAAa,GAAG,cAAa,MAAK,SAAQ,MAAK;AAAA,MAChF;AAAA,QAAC;AAAA;AAAA,UACC,YAAU;AAAA,UACV,GAAG;AAAA,UACH,GAAG;AAAA,UACH,aAAa;AAAA,UACb,iBAAgB;AAAA,UAChB,cAAa;AAAA,UACb,SAAQ;AAAA;AAAA,MACV;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/SwitchDemo.js

@@ -24,7 +24,7 @@ module.exports = __toCommonJS(SwitchDemo_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_tamagui = require("tamagui");
 function SwitchDemo() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { w: 200, ai: "center", space: "$3", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.YStack, { width: 200, alignItems: "center", space: "$3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchWithLabel, { size: "$2" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchWithLabel, { size: "$3" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SwitchWithLabel, { size: "$4" }),
@@ -33,9 +33,19 @@ function SwitchDemo() {
 }
 function SwitchWithLabel(props) {
   const id = `switch-${props.size.toString().slice(1)}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { w: 200, ai: "center", space: "$4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Label, { pr: "$0", miw: 90, jc: "flex-end", size: props.size, htmlFor: id, children: "Dark mode" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, { mih: 20, vertical: true }),
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tamagui.XStack, { width: 200, alignItems: "center", space: "$4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_tamagui.Label,
+      {
+        paddingRight: "$0",
+        minWidth: 90,
+        justifyContent: "flex-end",
+        size: props.size,
+        htmlFor: id,
+        children: "Dark mode"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Separator, { minHeight: 20, vertical: true }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Switch, { id, size: props.size, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tamagui.Switch.Thumb, { animation: "quick" }) })
   ] });
 }

package/dist/cjs/SwitchDemo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SwitchDemo.tsx"],
-  "sourcesContent": ["import { Label, Separator, SizeTokens, Switch, XStack, YStack, styled } from 'tamagui'\n\nexport function SwitchDemo() {\n  return (\n    <YStack w={200} ai=\"center\" space=\"$3\">\n      <SwitchWithLabel size=\"$2\" />\n      <SwitchWithLabel size=\"$3\" />\n      <SwitchWithLabel size=\"$4\" />\n      <SwitchWithLabel size=\"$5\" />\n    </YStack>\n  )\n}\n\nfunction SwitchWithLabel(props: { size: SizeTokens }) {\n  const id = `switch-${props.size.toString().slice(1)}`\n  return (\n    <XStack w={200} ai=\"center\" space=\"$4\">\n      <Label pr=\"$0\" miw={90} jc=\"flex-end\" size={props.size} htmlFor={id}>\n        Dark mode\n      </Label>\n      <Separator mih={20} vertical />\n      <Switch id={id} size={props.size}>\n        <Switch.Thumb animation=\"quick\" />\n      </Switch>\n    </XStack>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAA6E;AAEtE,SAAS,aAAa;AAC3B,SACE,6CAAC,yBAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,gDAAC,mBAAgB,MAAK,MAAK;AAAA,IAC3B,4CAAC,mBAAgB,MAAK,MAAK;AAAA,IAC3B,4CAAC,mBAAgB,MAAK,MAAK;AAAA,IAC3B,4CAAC,mBAAgB,MAAK,MAAK;AAAA,KAC7B;AAEJ;AAEA,SAAS,gBAAgB,OAA6B;AACpD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC;AAClD,SACE,6CAAC,yBAAO,GAAG,KAAK,IAAG,UAAS,OAAM,MAChC;AAAA,gDAAC,wBAAM,IAAG,MAAK,KAAK,IAAI,IAAG,YAAW,MAAM,MAAM,MAAM,SAAS,IAAI,uBAErE;AAAA,IACA,4CAAC,4BAAU,KAAK,IAAI,UAAQ,MAAC;AAAA,IAC7B,4CAAC,yBAAO,IAAQ,MAAM,MAAM,MAC1B,sDAAC,sBAAO,OAAP,EAAa,WAAU,SAAQ,GAClC;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { Label, Separator, SizeTokens, Switch, XStack, YStack, styled } from 'tamagui'\n\nexport function SwitchDemo() {\n  return (\n    <YStack width={200} alignItems=\"center\" space=\"$3\">\n      <SwitchWithLabel size=\"$2\" />\n      <SwitchWithLabel size=\"$3\" />\n      <SwitchWithLabel size=\"$4\" />\n      <SwitchWithLabel size=\"$5\" />\n    </YStack>\n  )\n}\n\nfunction SwitchWithLabel(props: { size: SizeTokens }) {\n  const id = `switch-${props.size.toString().slice(1)}`\n  return (\n    <XStack width={200} alignItems=\"center\" space=\"$4\">\n      <Label\n        paddingRight=\"$0\"\n        minWidth={90}\n        justifyContent=\"flex-end\"\n        size={props.size}\n        htmlFor={id}\n      >\n        Dark mode\n      </Label>\n      <Separator minHeight={20} vertical />\n      <Switch id={id} size={props.size}>\n        <Switch.Thumb animation=\"quick\" />\n      </Switch>\n    </XStack>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAII;AAJJ,qBAA6E;AAEtE,SAAS,aAAa;AAC3B,SACE,6CAAC,yBAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA,gDAAC,mBAAgB,MAAK,MAAK;AAAA,IAC3B,4CAAC,mBAAgB,MAAK,MAAK;AAAA,IAC3B,4CAAC,mBAAgB,MAAK,MAAK;AAAA,IAC3B,4CAAC,mBAAgB,MAAK,MAAK;AAAA,KAC7B;AAEJ;AAEA,SAAS,gBAAgB,OAA6B;AACpD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC;AAClD,SACE,6CAAC,yBAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,cAAa;AAAA,QACb,UAAU;AAAA,QACV,gBAAe;AAAA,QACf,MAAM,MAAM;AAAA,QACZ,SAAS;AAAA,QACV;AAAA;AAAA,IAED;AAAA,IACA,4CAAC,4BAAU,WAAW,IAAI,UAAQ,MAAC;AAAA,IACnC,4CAAC,yBAAO,IAAQ,MAAM,MAAM,MAC1B,sDAAC,sBAAO,OAAP,EAAa,WAAU,SAAQ,GAClC;AAAA,KACF;AAEJ;",
   "names": []
 }