@tamagui/demos 1.15.13 → 1.15.15

package/dist/jsx/ScrollViewDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ScrollViewDemo.tsx"],
-  "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,SAAS,QAAQ,YAAY,QAAQ,cAAc;AAE5C,SAAS,iBAAiB;AAC/B,SACE,CAAC,WAAW,WAAW,KAAK,MAAM,MAAM,gBAAgB,cAAc,QAAQ,KAAK,aAAa,KAC9F,CAAC,OAAO,SAAS,OAAO,WAAW,SAAS,eAAe;AAAA,IACzD,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,QAAQ;AAAA,IACvD,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,WAAW;AAAA,IAC1D,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,WAAW;AAAA,IAC1D,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,UAAU;AAAA,IACzD,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,SAAS;AAAA,IACxD,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,WAAW;AAAA,IAC1D,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,SAAS;AAAA,IACxD,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,QAAQ;AAAA,EACzD,EATC,OAUH,EAXC;AAaL;",
   "names": []
 }

package/dist/jsx/ScrollViewDemo.mjs.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ScrollViewDemo.tsx"],
-  "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,SAAS,QAAQ,YAAY,QAAQ,cAAc;AAE5C,SAAS,iBAAiB;AAC/B,SACE,CAAC,WAAW,WAAW,KAAK,MAAM,MAAM,gBAAgB,cAAc,QAAQ,KAAK,aAAa,KAC9F,CAAC,OAAO,SAAS,OAAO,WAAW,SAAS,eAAe;AAAA,IACzD,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,QAAQ;AAAA,IACvD,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,WAAW;AAAA,IAC1D,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,WAAW;AAAA,IAC1D,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,UAAU;AAAA,IACzD,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,SAAS;AAAA,IACxD,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,WAAW;AAAA,IAC1D,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,SAAS;AAAA,IACxD,CAAC,OAAO,OAAO,KAAK,MAAM,KAAK,gBAAgB,QAAQ;AAAA,EACzD,EATC,OAUH,EAXC;AAaL;",
   "names": []
 }

package/dist/jsx/SelectDemo.js.map

@@ -1,7 +1,6 @@
 {
   "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 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": "AAAA,SAAS,OAAO,aAAa,iBAAiB;AAC9C,SAAS,gBAAgB;AACzB,SAAS,OAAO,QAAQ,OAAO,cAAc;AAC7C,SAAS,sBAAsB;AAExB,SAAS,aAAa;AAC3B,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,OAAO;AACtC,SACE,CAAC,OAAO,GAAG,OAAO,OAAO,KAAK,eAAe;AAAA,IAC3C,CAAC,OAAO,QAAQ,OAAO,KAAK,WAAW,aACrC,CAAC,OAAO,MAAM,YAAY,YAAY,EACxC,EAFC,OAAO;AAAA,IAIR,CAAC,MAAM,KAAK,KAAK,SAAS,QACxB,CAAC,MAAM,MAAM;AAAA,MACX,CAAC,MAAM,MACL,CAAC,MAAM,WACL,CAAC,MAAM,SAAS,EAClB,EAFC,MAAM,WAGT,EAJC,MAAM;AAAA,MAKP,CAAC,MAAM,QAAQ;AAAA,IACjB,EAPC,MAQH,EATC;AAAA,IAWD,CAAC,OAAO,QAAQ,QAAQ;AAAA,MACtB,CAAC,OAAO,eAAe,WAAW,SAAS,eAAe,SAAS,SAAS,WAAW,MAAM,OAAO,OAAO;AAAA,QACzG,CAAC,OAAO,QAAQ,IACd,CAAC,UAAU,MAAM,IAAI,EACvB,EAFC;AAAA,QAGD,CAAC;AAAA,UACC,OAAO,CAAC,GAAG,CAAC;AAAA,UACZ,KAAK,CAAC,GAAG,CAAC;AAAA,UACV;AAAA,UACA,QAAQ,CAAC,eAAe,wBAAwB;AAAA,UAChD,aAAa;AAAA,QACf;AAAA,MACF,EAXC,OAAO;AAAA,MAaR,CAAC,OAAO,SAAS,UAAU,KACzB,CAAC,OAAO,MAAM,MAAM;AAAA,QAClB,CAAC,OAAO,MAAM,MAAM,EAAnB,OAAO;AAAA,SACP,MAAM,IAAI,CAAC,MAAM,MAAM;AACtB,iBACE,CAAC,OAAO,KAAK,OAAO,GAAG,KAAK,KAAK,MAAM,OAAO,KAAK,KAAK,YAAY;AAAA,YAClE,CAAC,OAAO,UAAU,KAAK,KAAK,EAA3B,OAAO;AAAA,YACR,CAAC,OAAO,cAAc,WAAW,OAC/B,CAAC,MAAM,MAAM,IAAI,EACnB,EAFC,OAAO;AAAA,UAGV,EALC,OAAO;AAAA,QAOZ,CAAC;AAAA,MACH,EAZC,OAAO,MAaV,EAdC,OAAO;AAAA,MAgBR,CAAC,OAAO,iBAAiB,WAAW,SAAS,eAAe,SAAS,SAAS,WAAW,MAAM,OAAO,OAAO;AAAA,QAC3G,CAAC,OAAO,QAAQ,IACd,CAAC,YAAY,MAAM,IAAI,EACzB,EAFC;AAAA,QAGD,CAAC;AAAA,UACC,OAAO,CAAC,GAAG,CAAC;AAAA,UACZ,KAAK,CAAC,GAAG,CAAC;AAAA,UACV;AAAA,UACA,QAAQ,CAAC,0BAA0B,aAAa;AAAA,UAChD,aAAa;AAAA,QACf;AAAA,MACF,EAXC,OAAO;AAAA,IAYV,EA1CC,OAAO;AAAA,EA2CV,EA3DC;AA6DL;AAEA,MAAM,QAAQ;AAAA,EACZ,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,OAAO;AAAA,EACf,EAAE,MAAM,aAAa;AAAA,EACrB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,UAAU;AAAA,EAClB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,WAAW;AAAA,EACnB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,aAAa;AAAA,EACrB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,OAAO;AAAA,EACf,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,UAAU;AAAA,EAClB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,SAAS;AAAA,EACjB,EAAE,MAAM,SAAS;AAAA,EACjB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,SAAS;AACnB;",
   "names": []
 }

package/dist/jsx/SelectDemo.mjs.map

@@ -1,7 +1,6 @@
 {
   "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 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": "AAAA,SAAS,OAAO,aAAa,iBAAiB;AAC9C,SAAS,gBAAgB;AACzB,SAAS,OAAO,QAAQ,OAAO,cAAc;AAC7C,SAAS,sBAAsB;AAExB,SAAS,aAAa;AAC3B,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,OAAO;AACtC,SACE,CAAC,OAAO,GAAG,OAAO,OAAO,KAAK,eAAe;AAAA,IAC3C,CAAC,OAAO,QAAQ,OAAO,KAAK,WAAW,aACrC,CAAC,OAAO,MAAM,YAAY,YAAY,EACxC,EAFC,OAAO;AAAA,IAIR,CAAC,MAAM,KAAK,KAAK,SAAS,QACxB,CAAC,MAAM,MAAM;AAAA,MACX,CAAC,MAAM,MACL,CAAC,MAAM,WACL,CAAC,MAAM,SAAS,EAClB,EAFC,MAAM,WAGT,EAJC,MAAM;AAAA,MAKP,CAAC,MAAM,QAAQ;AAAA,IACjB,EAPC,MAQH,EATC;AAAA,IAWD,CAAC,OAAO,QAAQ,QAAQ;AAAA,MACtB,CAAC,OAAO,eAAe,WAAW,SAAS,eAAe,SAAS,SAAS,WAAW,MAAM,OAAO,OAAO;AAAA,QACzG,CAAC,OAAO,QAAQ,IACd,CAAC,UAAU,MAAM,IAAI,EACvB,EAFC;AAAA,QAGD,CAAC;AAAA,UACC,OAAO,CAAC,GAAG,CAAC;AAAA,UACZ,KAAK,CAAC,GAAG,CAAC;AAAA,UACV;AAAA,UACA,QAAQ,CAAC,eAAe,wBAAwB;AAAA,UAChD,aAAa;AAAA,QACf;AAAA,MACF,EAXC,OAAO;AAAA,MAaR,CAAC,OAAO,SAAS,UAAU,KACzB,CAAC,OAAO,MAAM,MAAM;AAAA,QAClB,CAAC,OAAO,MAAM,MAAM,EAAnB,OAAO;AAAA,SACP,MAAM,IAAI,CAAC,MAAM,MAAM;AACtB,iBACE,CAAC,OAAO,KAAK,OAAO,GAAG,KAAK,KAAK,MAAM,OAAO,KAAK,KAAK,YAAY;AAAA,YAClE,CAAC,OAAO,UAAU,KAAK,KAAK,EAA3B,OAAO;AAAA,YACR,CAAC,OAAO,cAAc,WAAW,OAC/B,CAAC,MAAM,MAAM,IAAI,EACnB,EAFC,OAAO;AAAA,UAGV,EALC,OAAO;AAAA,QAOZ,CAAC;AAAA,MACH,EAZC,OAAO,MAaV,EAdC,OAAO;AAAA,MAgBR,CAAC,OAAO,iBAAiB,WAAW,SAAS,eAAe,SAAS,SAAS,WAAW,MAAM,OAAO,OAAO;AAAA,QAC3G,CAAC,OAAO,QAAQ,IACd,CAAC,YAAY,MAAM,IAAI,EACzB,EAFC;AAAA,QAGD,CAAC;AAAA,UACC,OAAO,CAAC,GAAG,CAAC;AAAA,UACZ,KAAK,CAAC,GAAG,CAAC;AAAA,UACV;AAAA,UACA,QAAQ,CAAC,0BAA0B,aAAa;AAAA,UAChD,aAAa;AAAA,QACf;AAAA,MACF,EAXC,OAAO;AAAA,IAYV,EA1CC,OAAO;AAAA,EA2CV,EA3DC;AA6DL;AAEA,MAAM,QAAQ;AAAA,EACZ,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,OAAO;AAAA,EACf,EAAE,MAAM,aAAa;AAAA,EACrB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,UAAU;AAAA,EAClB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,WAAW;AAAA,EACnB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,aAAa;AAAA,EACrB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,OAAO;AAAA,EACf,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,UAAU;AAAA,EAClB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,SAAS;AAAA,EACjB,EAAE,MAAM,SAAS;AAAA,EACjB,EAAE,MAAM,QAAQ;AAAA,EAChB,EAAE,MAAM,YAAY;AAAA,EACpB,EAAE,MAAM,SAAS;AACnB;",
   "names": []
 }

package/dist/jsx/SeparatorDemo.js.map

@@ -1,7 +1,6 @@
 {
   "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 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": "AACA,SAAS,WAAW,WAAW,QAAQ,cAAc;AAE9C,SAAS,gBAAgB;AAC9B,SACE,CAAC,OAAO,MAAM,OAAO,UAAU,KAAK,kBAAkB;AAAA,IACpD,CAAC,UAAU,WAAW,MAAM,OAAO,EAAlC;AAAA,IACD,CAAC,UAAU,mCAAmC,EAA7C;AAAA,IACD,CAAC,UAAU,gBAAgB,IAAI;AAAA,IAC/B,CAAC,OAAO,QAAQ,IAAI,WAAW;AAAA,MAC7B,CAAC,UAAU,IAAI,EAAd;AAAA,MACD,CAAC,UAAU,UAAU,UAAU,SAAS,kBAAkB,IAAI;AAAA,MAC9D,CAAC,UAAU,IAAI,EAAd;AAAA,MACD,CAAC,UAAU,UAAU,UAAU,SAAS,kBAAkB,IAAI;AAAA,MAC9D,CAAC,UAAU,MAAM,EAAhB;AAAA,IACH,EANC;AAAA,EAOH,EAXC;AAaL;",
   "names": []
 }

package/dist/jsx/SeparatorDemo.mjs.map

@@ -1,7 +1,6 @@
 {
   "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 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": "AACA,SAAS,WAAW,WAAW,QAAQ,cAAc;AAE9C,SAAS,gBAAgB;AAC9B,SACE,CAAC,OAAO,MAAM,OAAO,UAAU,KAAK,kBAAkB;AAAA,IACpD,CAAC,UAAU,WAAW,MAAM,OAAO,EAAlC;AAAA,IACD,CAAC,UAAU,mCAAmC,EAA7C;AAAA,IACD,CAAC,UAAU,gBAAgB,IAAI;AAAA,IAC/B,CAAC,OAAO,QAAQ,IAAI,WAAW;AAAA,MAC7B,CAAC,UAAU,IAAI,EAAd;AAAA,MACD,CAAC,UAAU,UAAU,UAAU,SAAS,kBAAkB,IAAI;AAAA,MAC9D,CAAC,UAAU,IAAI,EAAd;AAAA,MACD,CAAC,UAAU,UAAU,UAAU,SAAS,kBAAkB,IAAI;AAAA,MAC9D,CAAC,UAAU,MAAM,EAAhB;AAAA,IACH,EANC;AAAA,EAOH,EAXC;AAaL;",
   "names": []
 }

package/dist/jsx/ShapesDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ShapesDemo.tsx"],
-  "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,SAAS,QAAQ,QAAQ,cAAc;AAEhC,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,QAAQ,KAAK,MAAM;AAAA,IACzB,CAAC,OAAO,MAAM,KAAK,gBAAgB,SAAS,UAAU,KAAK;AAAA,IAC3D,CAAC,OAAO,MAAM,KAAK,gBAAgB,SAAS,UAAU,KAAK;AAAA,EAC7D,EAHC;AAKL;",
   "names": []
 }

package/dist/jsx/ShapesDemo.mjs.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ShapesDemo.tsx"],
-  "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,SAAS,QAAQ,QAAQ,cAAc;AAEhC,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,QAAQ,KAAK,MAAM;AAAA,IACzB,CAAC,OAAO,MAAM,KAAK,gBAAgB,SAAS,UAAU,KAAK;AAAA,IAC3D,CAAC,OAAO,MAAM,KAAK,gBAAgB,SAAS,UAAU,KAAK;AAAA,EAC7D,EAHC;AAKL;",
   "names": []
 }

package/dist/jsx/SheetDemo.js.map

@@ -1,7 +1,6 @@
 {
   "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 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,SAAS,aAAa,iBAAiB;AACvC,SAAS,aAAa;AAEtB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,OAAO,WAAW,cAAc;AAElD,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAC;AAC1C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,SACE;AAAA,IACE,CAAC,OAAO;AAAA,MACN,CAAC,OAAO,SAAS,MAAM,QAAQ,IAAI,GAAG,IAAI,EAAzC;AAAA,MACD,CAAC,OAAO,SAAS,MAAM,SAAS,CAAC,MAAM,CAAC,CAAC,IACtC,QAAQ,gBAAgB,eAC3B,EAFC;AAAA,IAGH,EALC;AAAA,IAOD,CAAC;AAAA,MACC,0BAA0B;AAAA,MAC1B,OAAO;AAAA,MACP,MAAM;AAAA,MACN,cAAc;AAAA,MACd,YAAY,CAAC,IAAI,IAAI,EAAE;AAAA,MACvB;AAAA,MACA,UAAU;AAAA,MACV,kBAAkB;AAAA,MAClB,QAAQ;AAAA,MACR,UAAU;AAAA;AAAA,MAEV,CAAC,MAAM,QAAQ;AAAA,MACf,CAAC,MAAM,OAAO;AAAA,MACd,CAAC,MAAM,MAAM,MAAM,GAAG,QAAQ,KAAK,eAAe,SAAS,WAAW,SAAS,MAAM;AAAA,QACnF,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,aAAa,SAAS,MAAM,QAAQ,KAAK,GAAG;AAAA,QAC7E,CAAC,MAAM,OAAO,KAAK;AAAA,SAClB,SACC;AAAA,UACE,CAAC,WAAW,MAAM,WAAW,cAAc,cAAc;AAAA,UACzD,CAAC;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA,MAAM;AAAA,YACN,SAAS,MAAM,aAAa,IAAI;AAAA,UACjC;AAAA,QACH;AAAA,MAEJ,EAdC,MAAM;AAAA,IAeT,EA7BC;AAAA,EA8BH;AAEJ;AAEA,SAAS,WAAW,OAAmB;AACrC,SACE,CAAC,MAAM,MAAM,YAAY,CAAC,EAAE,GAAG,0BAA0B;AAAA,IACvD,CAAC,MAAM,QAAQ;AAAA,IACf,CAAC,MAAM,OAAO;AAAA,IACd,CAAC,MAAM,MAAM,MAAM,GAAG,eAAe,SAAS,WAAW,SAAS,MAAM,KACtE,CAAC,MAAM,WAAW,QAAQ,KAAK;AAAA,MAC7B,CAAC;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS,MAAM,MAAM,eAAe,KAAK;AAAA,MAC3C;AAAA,MACA,CAAC,GAAG,WAAW,EAAd;AAAA,MACD,CAAC,GAAG,iBAAiB,EAApB;AAAA,OACA,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MACd,CAAC,UAAU,KAAK,GAAG,KAAK,MAAM,0WAM9B,EANC,UAOF;AAAA,IACH,EAnBC,MAAM,WAoBT,EArBC,MAAM;AAAA,EAsBT,EAzBC;AA2BL;",
   "names": []
 }

package/dist/jsx/SheetDemo.mjs.map

@@ -1,7 +1,6 @@
 {
   "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 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,SAAS,aAAa,iBAAiB;AACvC,SAAS,aAAa;AAEtB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,OAAO,WAAW,cAAc;AAElD,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAC;AAC1C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,SACE;AAAA,IACE,CAAC,OAAO;AAAA,MACN,CAAC,OAAO,SAAS,MAAM,QAAQ,IAAI,GAAG,IAAI,EAAzC;AAAA,MACD,CAAC,OAAO,SAAS,MAAM,SAAS,CAAC,MAAM,CAAC,CAAC,IACtC,QAAQ,gBAAgB,eAC3B,EAFC;AAAA,IAGH,EALC;AAAA,IAOD,CAAC;AAAA,MACC,0BAA0B;AAAA,MAC1B,OAAO;AAAA,MACP,MAAM;AAAA,MACN,cAAc;AAAA,MACd,YAAY,CAAC,IAAI,IAAI,EAAE;AAAA,MACvB;AAAA,MACA,UAAU;AAAA,MACV,kBAAkB;AAAA,MAClB,QAAQ;AAAA,MACR,UAAU;AAAA;AAAA,MAEV,CAAC,MAAM,QAAQ;AAAA,MACf,CAAC,MAAM,OAAO;AAAA,MACd,CAAC,MAAM,MAAM,MAAM,GAAG,QAAQ,KAAK,eAAe,SAAS,WAAW,SAAS,MAAM;AAAA,QACnF,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,aAAa,SAAS,MAAM,QAAQ,KAAK,GAAG;AAAA,QAC7E,CAAC,MAAM,OAAO,KAAK;AAAA,SAClB,SACC;AAAA,UACE,CAAC,WAAW,MAAM,WAAW,cAAc,cAAc;AAAA,UACzD,CAAC;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA,MAAM;AAAA,YACN,SAAS,MAAM,aAAa,IAAI;AAAA,UACjC;AAAA,QACH;AAAA,MAEJ,EAdC,MAAM;AAAA,IAeT,EA7BC;AAAA,EA8BH;AAEJ;AAEA,SAAS,WAAW,OAAmB;AACrC,SACE,CAAC,MAAM,MAAM,YAAY,CAAC,EAAE,GAAG,0BAA0B;AAAA,IACvD,CAAC,MAAM,QAAQ;AAAA,IACf,CAAC,MAAM,OAAO;AAAA,IACd,CAAC,MAAM,MAAM,MAAM,GAAG,eAAe,SAAS,WAAW,SAAS,MAAM,KACtE,CAAC,MAAM,WAAW,QAAQ,KAAK;AAAA,MAC7B,CAAC;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,UAAU;AAAA,QACV,MAAM;AAAA,QACN,SAAS,MAAM,MAAM,eAAe,KAAK;AAAA,MAC3C;AAAA,MACA,CAAC,GAAG,WAAW,EAAd;AAAA,MACD,CAAC,GAAG,iBAAiB,EAApB;AAAA,OACA,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MACd,CAAC,UAAU,KAAK,GAAG,KAAK,MAAM,0WAM9B,EANC,UAOF;AAAA,IACH,EAnBC,MAAM,WAoBT,EArBC,MAAM;AAAA,EAsBT,EAzBC;AA2BL;",
   "names": []
 }

package/dist/jsx/SliderDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/SliderDemo.tsx"],
-  "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,SAAS,QAA6B,cAAc;AAE7C,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,QAAQ,KAAK,WAAW,SAAS,MAAM;AAAA,IAC7C,CAAC,aAAa,QAAQ,KAAK,YAAY,WAAW;AAAA,IAClD,CAAC,aAAa,OAAO,KAAK;AAAA,EAC5B,EAHC;AAKL;AAEA,SAAS,aAAa,EAAE,UAAU,GAAG,MAAM,GAAgB;AACzD,SACE,CAAC,OAAO,cAAc,CAAC,EAAE,GAAG,KAAK,KAAK,MAAM,OAAO;AAAA,IACjD,CAAC,OAAO,MACN,CAAC,OAAO,YAAY,EACtB,EAFC,OAAO;AAAA,IAGR,CAAC,OAAO,MAAM,OAAO,GAAG,SAAS,QAAQ;AAAA,KACxC;AAAA,EACH,EANC;AAQL;",
   "names": []
 }

package/dist/jsx/SliderDemo.mjs.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/SliderDemo.tsx"],
-  "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,SAAS,QAA6B,cAAc;AAE7C,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,QAAQ,KAAK,WAAW,SAAS,MAAM;AAAA,IAC7C,CAAC,aAAa,QAAQ,KAAK,YAAY,WAAW;AAAA,IAClD,CAAC,aAAa,OAAO,KAAK;AAAA,EAC5B,EAHC;AAKL;AAEA,SAAS,aAAa,EAAE,UAAU,GAAG,MAAM,GAAgB;AACzD,SACE,CAAC,OAAO,cAAc,CAAC,EAAE,GAAG,KAAK,KAAK,MAAM,OAAO;AAAA,IACjD,CAAC,OAAO,MACN,CAAC,OAAO,YAAY,EACtB,EAFC,OAAO;AAAA,IAGR,CAAC,OAAO,MAAM,OAAO,GAAG,SAAS,QAAQ;AAAA,KACxC;AAAA,EACH,EANC;AAQL;",
   "names": []
 }

package/dist/jsx/SpinnerDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/SpinnerDemo.tsx"],
-  "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,SAAS,SAAS,cAAc;AAEzB,SAAS,cAAc;AAC5B,SACE,CAAC,OAAO,QAAQ,KAAK,MAAM,KAAK,WAAW;AAAA,IACzC,CAAC,QAAQ,KAAK,QAAQ,MAAM,WAAW;AAAA,IACvC,CAAC,QAAQ,KAAK,QAAQ,MAAM,YAAY;AAAA,EAC1C,EAHC;AAKL;",
   "names": []
 }

package/dist/jsx/SpinnerDemo.mjs.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/SpinnerDemo.tsx"],
-  "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,SAAS,SAAS,cAAc;AAEzB,SAAS,cAAc;AAC5B,SACE,CAAC,OAAO,QAAQ,KAAK,MAAM,KAAK,WAAW;AAAA,IACzC,CAAC,QAAQ,KAAK,QAAQ,MAAM,WAAW;AAAA,IACvC,CAAC,QAAQ,KAAK,QAAQ,MAAM,YAAY;AAAA,EAC1C,EAHC;AAKL;",
   "names": []
 }

package/dist/jsx/StacksDemo.js

@@ -1,6 +1,6 @@
 import { XStack, YStack, ZStack } from "tamagui";
 function StacksDemo() {
-  return <XStack maxWidth={250} padding="$2" alignSelf="center" space>
+  return <XStack maw={250} p="$2" als="center" space>
     <YStack
       flex={1}
       space="$2"

package/dist/jsx/StacksDemo.js.map

@@ -1,7 +1,6 @@
 {
   "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 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": "AACA,SAAS,QAAQ,QAAQ,cAAc;AAEhC,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,UAAU,KAAK,QAAQ,KAAK,UAAU,SAAS;AAAA,IACrD,CAAC;AAAA,MACC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,QAAQ;AAAA;AAAA,MAER,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,IAClE,EAXC;AAAA,IAaD,CAAC;AAAA,MACC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,QAAQ;AAAA;AAAA,MAER,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,IAClE,EAXC;AAAA,IAaD,CAAC,OAAO,UAAU,IAAI,WAAW,IAAI,OAAO,KAAK,MAAM;AAAA,MACrD,CAAC,OAAO,WAAW,aAAa,GAAG,aAAa,KAAK,QAAQ,KAAK;AAAA,MAClE,CAAC,OAAO,WAAW,GAAG,IAAI,GAAG,IAAI,aAAa,GAAG,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChF,CAAC;AAAA,QACC;AAAA,QACA,GAAG;AAAA,QACH,GAAG;AAAA,QACH,aAAa;AAAA,QACb,gBAAgB;AAAA,QAChB,aAAa;AAAA,QACb,QAAQ;AAAA,MACV;AAAA,IACF,EAZC;AAAA,EAaH,EAxCC;AA0CL;",
+  "mappings": "AACA,SAAS,QAAQ,QAAQ,cAAc;AAEhC,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,KAAK,KAAK,EAAE,KAAK,IAAI,SAAS;AAAA,IACpC,CAAC;AAAA,MACC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,QAAQ;AAAA;AAAA,MAER,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,IAClE,EAXC;AAAA,IAaD,CAAC;AAAA,MACC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,QAAQ;AAAA;AAAA,MAER,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,IAClE,EAXC;AAAA,IAaD,CAAC,OAAO,UAAU,IAAI,WAAW,IAAI,OAAO,KAAK,MAAM;AAAA,MACrD,CAAC,OAAO,WAAW,aAAa,GAAG,aAAa,KAAK,QAAQ,KAAK;AAAA,MAClE,CAAC,OAAO,WAAW,GAAG,IAAI,GAAG,IAAI,aAAa,GAAG,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChF,CAAC;AAAA,QACC;AAAA,QACA,GAAG;AAAA,QACH,GAAG;AAAA,QACH,aAAa;AAAA,QACb,gBAAgB;AAAA,QAChB,aAAa;AAAA,QACb,QAAQ;AAAA,MACV;AAAA,IACF,EAZC;AAAA,EAaH,EAxCC;AA0CL;",
   "names": []
 }

package/dist/jsx/StacksDemo.mjs

@@ -1,6 +1,6 @@
 import { XStack, YStack, ZStack } from "tamagui";
 function StacksDemo() {
-  return <XStack maxWidth={250} padding="$2" alignSelf="center" space>
+  return <XStack maw={250} p="$2" als="center" space>
     <YStack
       flex={1}
       space="$2"

package/dist/jsx/StacksDemo.mjs.map

@@ -1,7 +1,6 @@
 {
   "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 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": "AACA,SAAS,QAAQ,QAAQ,cAAc;AAEhC,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,UAAU,KAAK,QAAQ,KAAK,UAAU,SAAS;AAAA,IACrD,CAAC;AAAA,MACC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,QAAQ;AAAA;AAAA,MAER,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,IAClE,EAXC;AAAA,IAaD,CAAC;AAAA,MACC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,QAAQ;AAAA;AAAA,MAER,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,IAClE,EAXC;AAAA,IAaD,CAAC,OAAO,UAAU,IAAI,WAAW,IAAI,OAAO,KAAK,MAAM;AAAA,MACrD,CAAC,OAAO,WAAW,aAAa,GAAG,aAAa,KAAK,QAAQ,KAAK;AAAA,MAClE,CAAC,OAAO,WAAW,GAAG,IAAI,GAAG,IAAI,aAAa,GAAG,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChF,CAAC;AAAA,QACC;AAAA,QACA,GAAG;AAAA,QACH,GAAG;AAAA,QACH,aAAa;AAAA,QACb,gBAAgB;AAAA,QAChB,aAAa;AAAA,QACb,QAAQ;AAAA,MACV;AAAA,IACF,EAZC;AAAA,EAaH,EAxCC;AA0CL;",
+  "mappings": "AACA,SAAS,QAAQ,QAAQ,cAAc;AAEhC,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,KAAK,KAAK,EAAE,KAAK,IAAI,SAAS;AAAA,IACpC,CAAC;AAAA,MACC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,QAAQ;AAAA;AAAA,MAER,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,IAClE,EAXC;AAAA,IAaD,CAAC;AAAA,MACC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,QAAQ;AAAA;AAAA,MAER,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChE,CAAC,OAAO,gBAAgB,SAAS,aAAa,KAAK,QAAQ,KAAK;AAAA,IAClE,EAXC;AAAA,IAaD,CAAC,OAAO,UAAU,IAAI,WAAW,IAAI,OAAO,KAAK,MAAM;AAAA,MACrD,CAAC,OAAO,WAAW,aAAa,GAAG,aAAa,KAAK,QAAQ,KAAK;AAAA,MAClE,CAAC,OAAO,WAAW,GAAG,IAAI,GAAG,IAAI,aAAa,GAAG,aAAa,KAAK,QAAQ,KAAK;AAAA,MAChF,CAAC;AAAA,QACC;AAAA,QACA,GAAG;AAAA,QACH,GAAG;AAAA,QACH,aAAa;AAAA,QACb,gBAAgB;AAAA,QAChB,aAAa;AAAA,QACb,QAAQ;AAAA,MACV;AAAA,IACF,EAZC;AAAA,EAaH,EAxCC;AA0CL;",
   "names": []
 }

package/dist/jsx/SwitchDemo.js.map

@@ -1,7 +1,6 @@
 {
   "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 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,SAAS,OAAO,WAAuB,QAAQ,QAAQ,cAAsB;AAEtE,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC,gBAAgB,KAAK,KAAK;AAAA,IAC3B,CAAC,gBAAgB,KAAK,KAAK;AAAA,IAC3B,CAAC,gBAAgB,KAAK,KAAK;AAAA,IAC3B,CAAC,gBAAgB,KAAK,KAAK;AAAA,EAC7B,EALC;AAOL;AAEA,SAAS,gBAAgB,OAA6B;AACpD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC;AAClD,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC;AAAA,MACC,aAAa;AAAA,MACb,UAAU;AAAA,MACV,eAAe;AAAA,MACf,MAAM,MAAM;AAAA,MACZ,SAAS;AAAA,KACV,SAED,EARC;AAAA,IASD,CAAC,UAAU,WAAW,IAAI,SAAS;AAAA,IACnC,CAAC,OAAO,IAAI,IAAI,MAAM,MAAM,MAC1B,CAAC,OAAO,MAAM,UAAU,QAAQ,EAClC,EAFC;AAAA,EAGH,EAdC;AAgBL;",
   "names": []
 }

package/dist/jsx/SwitchDemo.mjs.map

@@ -1,7 +1,6 @@
 {
   "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 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,SAAS,OAAO,WAAuB,QAAQ,QAAQ,cAAsB;AAEtE,SAAS,aAAa;AAC3B,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC,gBAAgB,KAAK,KAAK;AAAA,IAC3B,CAAC,gBAAgB,KAAK,KAAK;AAAA,IAC3B,CAAC,gBAAgB,KAAK,KAAK;AAAA,IAC3B,CAAC,gBAAgB,KAAK,KAAK;AAAA,EAC7B,EALC;AAOL;AAEA,SAAS,gBAAgB,OAA6B;AACpD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC;AAClD,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC;AAAA,MACC,aAAa;AAAA,MACb,UAAU;AAAA,MACV,eAAe;AAAA,MACf,MAAM,MAAM;AAAA,MACZ,SAAS;AAAA,KACV,SAED,EARC;AAAA,IASD,CAAC,UAAU,WAAW,IAAI,SAAS;AAAA,IACnC,CAAC,OAAO,IAAI,IAAI,MAAM,MAAM,MAC1B,CAAC,OAAO,MAAM,UAAU,QAAQ,EAClC,EAFC;AAAA,EAGH,EAdC;AAgBL;",
   "names": []
 }

package/dist/jsx/TabsAdvancedDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/TabsAdvancedDemo.tsx"],
-  "sourcesContent": ["import { useState } from 'react'\nimport {\n  AnimatePresence,\n  Button,\n  H5,\n  SizableText,\n  Stack,\n  TabLayout,\n  Tabs,\n  TabsTabProps,\n  XStack,\n  YStack,\n  styled,\n} from 'tamagui'\n\nconst demos = ['background', 'underline'] as const\nconst demosTitle: Record<(typeof demos)[number], string> = {\n  background: 'Background Indicator',\n  underline: 'Underline Indicator',\n}\n\nexport const TabsAdvancedDemo = () => {\n  const [demoIndex, setDemoIndex] = useState(0)\n  const demo = demos[demoIndex]\n  return (\n    <>\n      {demo === 'underline' ? <TabsAdvancedUnderline /> : <TabsAdvancedBackground />}\n\n      <XStack ai=\"center\" space pos=\"absolute\" b=\"$3\" l=\"$4\" $xxs={{ dsp: 'none' }}>\n        <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n          {demosTitle[demo]}\n        </Button>\n      </XStack>\n    </>\n  )\n}\n\nconst TabsAdvancedBackground = () => {\n  const [tabState, setTabState] = useState<{\n    currentTab: string\n    /**\n     * Layout of the Tab user might intend to select (hovering / focusing)\n     */\n    intentAt: TabLayout | null\n    /**\n     * Layout of the Tab user selected\n     */\n    activeAt: TabLayout | null\n    /**\n     * Used to get the direction of activation for animating the active indicator\n     */\n    prevActiveAt: TabLayout | null\n  }>({\n    activeAt: null,\n    currentTab: 'tab1',\n    intentAt: null,\n    prevActiveAt: null,\n  })\n\n  const setCurrentTab = (currentTab: string) => setTabState({ ...tabState, currentTab })\n  const setIntentIndicator = (intentAt) => setTabState({ ...tabState, intentAt })\n  const setActiveIndicator = (activeAt) =>\n    setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt })\n  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState\n\n  /**\n   * -1: from left\n   *  0: n/a\n   *  1: from right\n   */\n  const direction = (() => {\n    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {\n      return 0\n    }\n    return activeAt.x > prevActiveAt.x ? -1 : 1\n  })()\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : 'defaultFade'\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : 'defaultFade'\n\n  const handleOnInteraction: TabsTabProps['onInteraction'] = (type, layout) => {\n    if (type === 'select') {\n      setActiveIndicator(layout)\n    } else {\n      setIntentIndicator(layout)\n    }\n  }\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      size=\"$4\"\n      padding=\"$2\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n      backgroundColor=\"$background\"\n      borderRadius=\"$4\"\n      position=\"relative\"\n    >\n      <YStack>\n        <AnimatePresence>\n          {intentAt && (\n            <TabsRovingIndicator\n              borderRadius=\"$4\"\n              width={intentAt.width}\n              height={intentAt.height}\n              x={intentAt.x}\n              y={intentAt.y}\n            />\n          )}\n        </AnimatePresence>\n        <AnimatePresence>\n          {activeAt && (\n            <TabsRovingIndicator\n              borderRadius=\"$4\"\n              theme=\"active\"\n              width={activeAt.width}\n              height={activeAt.height}\n              x={activeAt.x}\n              y={activeAt.y}\n            />\n          )}\n        </AnimatePresence>\n\n        <Tabs.List\n          disablePassBorderRadius\n          loop={false}\n          aria-label=\"Manage your account\"\n          space=\"$2\"\n          backgroundColor=\"transparent\"\n        >\n          <Tabs.Tab unstyled value=\"tab1\" onInteraction={handleOnInteraction}>\n            <SizableText>Profile</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab unstyled value=\"tab2\" onInteraction={handleOnInteraction}>\n            <SizableText>Connections</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab unstyled value=\"tab3\" onInteraction={handleOnInteraction}>\n            <SizableText>Notifications</SizableText>\n          </Tabs.Tab>\n        </Tabs.List>\n      </YStack>\n\n      <AnimatePresence\n        exitBeforeEnter\n        enterVariant={enterVariant}\n        exitVariant={exitVariant}\n      >\n        <AnimatedYStack key={currentTab} animation=\"100ms\" x={0} opacity={1} flex={1}>\n          <Tabs.Content value={currentTab} forceMount flex={1} justifyContent=\"center\">\n            <H5 textAlign=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n\nconst TabsAdvancedUnderline = () => {\n  const [tabState, setTabState] = useState<{\n    currentTab: string\n    /**\n     * Layout of the Tab user might intend to select (hovering / focusing)\n     */\n    intentAt: TabLayout | null\n    /**\n     * Layout of the Tab user selected\n     */\n    activeAt: TabLayout | null\n    /**\n     * Used to get the direction of activation for animating the active indicator\n     */\n    prevActiveAt: TabLayout | null\n  }>({\n    activeAt: null,\n    currentTab: 'tab1',\n    intentAt: null,\n    prevActiveAt: null,\n  })\n\n  const setCurrentTab = (currentTab: string) => setTabState({ ...tabState, currentTab })\n  const setIntentIndicator = (intentAt) => setTabState({ ...tabState, intentAt })\n  const setActiveIndicator = (activeAt) =>\n    setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt })\n  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState\n\n  /**\n   * -1: from left\n   *  0: n/a\n   *  1: from right\n   */\n  const direction = (() => {\n    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {\n      return 0\n    }\n    return activeAt.x > prevActiveAt.x ? -1 : 1\n  })()\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : 'defaultFade'\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : 'defaultFade'\n\n  const handleOnInteraction: TabsTabProps['onInteraction'] = (type, layout) => {\n    if (type === 'select') {\n      setActiveIndicator(layout)\n    } else {\n      setIntentIndicator(layout)\n    }\n  }\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      size=\"$4\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n      backgroundColor=\"$background\"\n      borderRadius=\"$4\"\n    >\n      <YStack>\n        <AnimatePresence>\n          {intentAt && (\n            <TabsRovingIndicator\n              width={intentAt.width}\n              height=\"$0.5\"\n              x={intentAt.x}\n              bottom={0}\n            />\n          )}\n        </AnimatePresence>\n        <AnimatePresence>\n          {activeAt && (\n            <TabsRovingIndicator\n              theme=\"active\"\n              active\n              width={activeAt.width}\n              height=\"$0.5\"\n              x={activeAt.x}\n              bottom={0}\n            />\n          )}\n        </AnimatePresence>\n        <Tabs.List\n          disablePassBorderRadius\n          loop={false}\n          aria-label=\"Manage your account\"\n          borderBottomLeftRadius={0}\n          borderBottomRightRadius={0}\n          paddingBottom=\"$1.5\"\n          borderColor=\"$color3\"\n          borderBottomWidth=\"$0.5\"\n          backgroundColor=\"transparent\"\n        >\n          <Tabs.Tab\n            unstyled\n            padding=\"$5\"\n            value=\"tab1\"\n            onInteraction={handleOnInteraction}\n          >\n            <SizableText>Profile</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab\n            unstyled\n            padding=\"$5\"\n            value=\"tab2\"\n            onInteraction={handleOnInteraction}\n          >\n            <SizableText>Connections</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab\n            unstyled\n            padding=\"$5\"\n            value=\"tab3\"\n            onInteraction={handleOnInteraction}\n          >\n            <SizableText>Notifications</SizableText>\n          </Tabs.Tab>\n        </Tabs.List>\n      </YStack>\n\n      <AnimatePresence\n        exitBeforeEnter\n        enterVariant={enterVariant}\n        exitVariant={exitVariant}\n      >\n        <AnimatedYStack key={currentTab} animation=\"100ms\" x={0} opacity={1} flex={1}>\n          <Tabs.Content value={currentTab} forceMount flex={1} justifyContent=\"center\">\n            <H5 textAlign=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n\nconst TabsRovingIndicator = styled(Stack, {\n  position: 'absolute',\n  backgroundColor: '$color5',\n  opacity: 0.7,\n  animation: '100ms',\n  enterStyle: {\n    opacity: 0,\n  },\n  exitStyle: {\n    opacity: 0,\n  },\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$color8',\n        opacity: 0.6,\n      },\n    },\n  },\n})\n\nconst AnimatedYStack = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -25, opacity: 0 } },\n    isRight: { true: { x: 25, opacity: 0 } },\n    defaultFade: { true: { opacity: 0 } },\n  } as const,\n})\n"],
   "mappings": "AAAA,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,QAAQ,CAAC,cAAc,WAAW;AACxC,MAAM,aAAqD;AAAA,EACzD,YAAY;AAAA,EACZ,WAAW;AACb;AAEO,MAAM,mBAAmB,MAAM;AACpC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,CAAC;AAC5C,QAAM,OAAO,MAAM,SAAS;AAC5B,SACE;AAAA,KACG,SAAS,cAAc,CAAC,sBAAsB,KAAK,CAAC,uBAAuB;AAAA,IAE5E,CAAC,OAAO,GAAG,SAAS,MAAM,IAAI,WAAW,EAAE,KAAK,EAAE,KAAK,MAAM,EAAE,KAAK,OAAO,GACzE,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,aAAa,CAAC,OAAO,IAAI,KAAK,MAAM,MAAM,IACxE,WAAW,IAAI,EAClB,EAFC,OAGH,EAJC;AAAA,EAKH;AAEJ;AAEA,MAAM,yBAAyB,MAAM;AACnC,QAAM,CAAC,UAAU,WAAW,IAAI,SAc7B;AAAA,IACD,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,cAAc;AAAA,EAChB,CAAC;AAED,QAAM,gBAAgB,CAACA,gBAAuB,YAAY,EAAE,GAAG,UAAU,YAAAA,YAAW,CAAC;AACrF,QAAM,qBAAqB,CAACC,cAAa,YAAY,EAAE,GAAG,UAAU,UAAAA,UAAS,CAAC;AAC9E,QAAM,qBAAqB,CAACC,cAC1B,YAAY,EAAE,GAAG,UAAU,cAAc,SAAS,UAAU,UAAAA,UAAS,CAAC;AACxE,QAAM,EAAE,UAAU,UAAU,cAAc,WAAW,IAAI;AAOzD,QAAM,aAAa,MAAM;AACvB,QAAI,CAAC,YAAY,CAAC,gBAAgB,SAAS,MAAM,aAAa,GAAG;AAC/D,aAAO;AAAA,IACT;AACA,WAAO,SAAS,IAAI,aAAa,IAAI,KAAK;AAAA,EAC5C,GAAG;AAEH,QAAM,eACJ,cAAc,IAAI,WAAW,cAAc,KAAK,YAAY;AAC9D,QAAM,cACJ,cAAc,IAAI,YAAY,cAAc,KAAK,WAAW;AAE9D,QAAM,sBAAqD,CAAC,MAAM,WAAW;AAC3E,QAAI,SAAS,UAAU;AACrB,yBAAmB,MAAM;AAAA,IAC3B,OAAO;AACL,yBAAmB,MAAM;AAAA,IAC3B;AAAA,EACF;AAEA,SACE,CAAC;AAAA,IACC,OAAO;AAAA,IACP,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,SAAS;AAAA;AAAA,IAET,CAAC;AAAA,MACC,CAAC,iBACE,YACC,CAAC;AAAA,QACC,aAAa;AAAA,QACb,OAAO,SAAS;AAAA,QAChB,QAAQ,SAAS;AAAA,QACjB,GAAG,SAAS;AAAA,QACZ,GAAG,SAAS;AAAA,MACd,GAEJ,EAVC;AAAA,MAWD,CAAC,iBACE,YACC,CAAC;AAAA,QACC,aAAa;AAAA,QACb,MAAM;AAAA,QACN,OAAO,SAAS;AAAA,QAChB,QAAQ,SAAS;AAAA,QACjB,GAAG,SAAS;AAAA,QACZ,GAAG,SAAS;AAAA,MACd,GAEJ,EAXC;AAAA,MAaD,CAAC,KAAK;AAAA,QACJ;AAAA,QACA,MAAM;AAAA,QACN,WAAW;AAAA,QACX,MAAM;AAAA,QACN,gBAAgB;AAAA;AAAA,QAEhB,CAAC,KAAK,IAAI,SAAS,MAAM,OAAO,eAAe,qBAC7C,CAAC,YAAY,OAAO,EAAnB,YACH,EAFC,KAAK;AAAA,QAGN,CAAC,KAAK,IAAI,SAAS,MAAM,OAAO,eAAe,qBAC7C,CAAC,YAAY,WAAW,EAAvB,YACH,EAFC,KAAK;AAAA,QAGN,CAAC,KAAK,IAAI,SAAS,MAAM,OAAO,eAAe,qBAC7C,CAAC,YAAY,aAAa,EAAzB,YACH,EAFC,KAAK;AAAA,MAGR,EAhBC,KAAK;AAAA,IAiBR,EA1CC;AAAA,IA4CD,CAAC;AAAA,MACC;AAAA,MACA,cAAc;AAAA,MACd,aAAa;AAAA,KAEb,CAAC,eAAe,KAAK,YAAY,UAAU,QAAQ,GAAG,GAAG,SAAS,GAAG,MAAM,GACzE,CAAC,KAAK,QAAQ,OAAO,YAAY,WAAW,MAAM,GAAG,eAAe,SAClE,CAAC,GAAG,UAAU,UAAU,WAAW,EAAlC,GACH,EAFC,KAAK,QAGR,EAJC,eAKH,EAVC;AAAA,EAWH,EApEC;AAsEL;AAEA,MAAM,wBAAwB,MAAM;AAClC,QAAM,CAAC,UAAU,WAAW,IAAI,SAc7B;AAAA,IACD,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,cAAc;AAAA,EAChB,CAAC;AAED,QAAM,gBAAgB,CAACF,gBAAuB,YAAY,EAAE,GAAG,UAAU,YAAAA,YAAW,CAAC;AACrF,QAAM,qBAAqB,CAACC,cAAa,YAAY,EAAE,GAAG,UAAU,UAAAA,UAAS,CAAC;AAC9E,QAAM,qBAAqB,CAACC,cAC1B,YAAY,EAAE,GAAG,UAAU,cAAc,SAAS,UAAU,UAAAA,UAAS,CAAC;AACxE,QAAM,EAAE,UAAU,UAAU,cAAc,WAAW,IAAI;AAOzD,QAAM,aAAa,MAAM;AACvB,QAAI,CAAC,YAAY,CAAC,gBAAgB,SAAS,MAAM,aAAa,GAAG;AAC/D,aAAO;AAAA,IACT;AACA,WAAO,SAAS,IAAI,aAAa,IAAI,KAAK;AAAA,EAC5C,GAAG;AAEH,QAAM,eACJ,cAAc,IAAI,WAAW,cAAc,KAAK,YAAY;AAC9D,QAAM,cACJ,cAAc,IAAI,YAAY,cAAc,KAAK,WAAW;AAE9D,QAAM,sBAAqD,CAAC,MAAM,WAAW;AAC3E,QAAI,SAAS,UAAU;AACrB,yBAAmB,MAAM;AAAA,IAC3B,OAAO;AACL,yBAAmB,MAAM;AAAA,IAC3B;AAAA,EACF;AAEA,SACE,CAAC;AAAA,IACC,OAAO;AAAA,IACP,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,aAAa;AAAA;AAAA,IAEb,CAAC;AAAA,MACC,CAAC,iBACE,YACC,CAAC;AAAA,QACC,OAAO,SAAS;AAAA,QAChB,OAAO;AAAA,QACP,GAAG,SAAS;AAAA,QACZ,QAAQ;AAAA,MACV,GAEJ,EATC;AAAA,MAUD,CAAC,iBACE,YACC,CAAC;AAAA,QACC,MAAM;AAAA,QACN;AAAA,QACA,OAAO,SAAS;AAAA,QAChB,OAAO;AAAA,QACP,GAAG,SAAS;AAAA,QACZ,QAAQ;AAAA,MACV,GAEJ,EAXC;AAAA,MAYD,CAAC,KAAK;AAAA,QACJ;AAAA,QACA,MAAM;AAAA,QACN,WAAW;AAAA,QACX,wBAAwB;AAAA,QACxB,yBAAyB;AAAA,QACzB,cAAc;AAAA,QACd,YAAY;AAAA,QACZ,kBAAkB;AAAA,QAClB,gBAAgB;AAAA;AAAA,QAEhB,CAAC,KAAK;AAAA,UACJ;AAAA,UACA,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,eAAe;AAAA,SAEf,CAAC,YAAY,OAAO,EAAnB,YACH,EAPC,KAAK;AAAA,QAQN,CAAC,KAAK;AAAA,UACJ;AAAA,UACA,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,eAAe;AAAA,SAEf,CAAC,YAAY,WAAW,EAAvB,YACH,EAPC,KAAK;AAAA,QAQN,CAAC,KAAK;AAAA,UACJ;AAAA,UACA,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,eAAe;AAAA,SAEf,CAAC,YAAY,aAAa,EAAzB,YACH,EAPC,KAAK;AAAA,MAQR,EAnCC,KAAK;AAAA,IAoCR,EA3DC;AAAA,IA6DD,CAAC;AAAA,MACC;AAAA,MACA,cAAc;AAAA,MACd,aAAa;AAAA,KAEb,CAAC,eAAe,KAAK,YAAY,UAAU,QAAQ,GAAG,GAAG,SAAS,GAAG,MAAM,GACzE,CAAC,KAAK,QAAQ,OAAO,YAAY,WAAW,MAAM,GAAG,eAAe,SAClE,CAAC,GAAG,UAAU,UAAU,WAAW,EAAlC,GACH,EAFC,KAAK,QAGR,EAJC,eAKH,EAVC;AAAA,EAWH,EAnFC;AAqFL;AAEA,MAAM,sBAAsB,OAAO,OAAO;AAAA,EACxC,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,WAAW;AAAA,EACX,YAAY;AAAA,IACV,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,QACJ,iBAAiB;AAAA,QACjB,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAED,MAAM,iBAAiB,OAAO,QAAQ;AAAA,EACpC,UAAU;AAAA,IACR,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,SAAS,EAAE,EAAE;AAAA,IACvC,SAAS,EAAE,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,EAAE;AAAA,IACvC,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;AAAA,EACtC;AACF,CAAC;",
   "names": ["currentTab", "intentAt", "activeAt"]
 }

package/dist/jsx/TabsAdvancedDemo.mjs.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/TabsAdvancedDemo.tsx"],
-  "sourcesContent": ["import { useState } from 'react'\nimport {\n  AnimatePresence,\n  Button,\n  H5,\n  SizableText,\n  Stack,\n  TabLayout,\n  Tabs,\n  TabsTabProps,\n  XStack,\n  YStack,\n  styled,\n} from 'tamagui'\n\nconst demos = ['background', 'underline'] as const\nconst demosTitle: Record<(typeof demos)[number], string> = {\n  background: 'Background Indicator',\n  underline: 'Underline Indicator',\n}\n\nexport const TabsAdvancedDemo = () => {\n  const [demoIndex, setDemoIndex] = useState(0)\n  const demo = demos[demoIndex]\n  return (\n    <>\n      {demo === 'underline' ? <TabsAdvancedUnderline /> : <TabsAdvancedBackground />}\n\n      <XStack ai=\"center\" space pos=\"absolute\" b=\"$3\" l=\"$4\" $xxs={{ dsp: 'none' }}>\n        <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n          {demosTitle[demo]}\n        </Button>\n      </XStack>\n    </>\n  )\n}\n\nconst TabsAdvancedBackground = () => {\n  const [tabState, setTabState] = useState<{\n    currentTab: string\n    /**\n     * Layout of the Tab user might intend to select (hovering / focusing)\n     */\n    intentAt: TabLayout | null\n    /**\n     * Layout of the Tab user selected\n     */\n    activeAt: TabLayout | null\n    /**\n     * Used to get the direction of activation for animating the active indicator\n     */\n    prevActiveAt: TabLayout | null\n  }>({\n    activeAt: null,\n    currentTab: 'tab1',\n    intentAt: null,\n    prevActiveAt: null,\n  })\n\n  const setCurrentTab = (currentTab: string) => setTabState({ ...tabState, currentTab })\n  const setIntentIndicator = (intentAt) => setTabState({ ...tabState, intentAt })\n  const setActiveIndicator = (activeAt) =>\n    setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt })\n  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState\n\n  /**\n   * -1: from left\n   *  0: n/a\n   *  1: from right\n   */\n  const direction = (() => {\n    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {\n      return 0\n    }\n    return activeAt.x > prevActiveAt.x ? -1 : 1\n  })()\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : 'defaultFade'\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : 'defaultFade'\n\n  const handleOnInteraction: TabsTabProps['onInteraction'] = (type, layout) => {\n    if (type === 'select') {\n      setActiveIndicator(layout)\n    } else {\n      setIntentIndicator(layout)\n    }\n  }\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      size=\"$4\"\n      padding=\"$2\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n      backgroundColor=\"$background\"\n      borderRadius=\"$4\"\n      position=\"relative\"\n    >\n      <YStack>\n        <AnimatePresence>\n          {intentAt && (\n            <TabsRovingIndicator\n              borderRadius=\"$4\"\n              width={intentAt.width}\n              height={intentAt.height}\n              x={intentAt.x}\n              y={intentAt.y}\n            />\n          )}\n        </AnimatePresence>\n        <AnimatePresence>\n          {activeAt && (\n            <TabsRovingIndicator\n              borderRadius=\"$4\"\n              theme=\"active\"\n              width={activeAt.width}\n              height={activeAt.height}\n              x={activeAt.x}\n              y={activeAt.y}\n            />\n          )}\n        </AnimatePresence>\n\n        <Tabs.List\n          disablePassBorderRadius\n          loop={false}\n          aria-label=\"Manage your account\"\n          space=\"$2\"\n          backgroundColor=\"transparent\"\n        >\n          <Tabs.Tab unstyled value=\"tab1\" onInteraction={handleOnInteraction}>\n            <SizableText>Profile</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab unstyled value=\"tab2\" onInteraction={handleOnInteraction}>\n            <SizableText>Connections</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab unstyled value=\"tab3\" onInteraction={handleOnInteraction}>\n            <SizableText>Notifications</SizableText>\n          </Tabs.Tab>\n        </Tabs.List>\n      </YStack>\n\n      <AnimatePresence\n        exitBeforeEnter\n        enterVariant={enterVariant}\n        exitVariant={exitVariant}\n      >\n        <AnimatedYStack key={currentTab} animation=\"100ms\" x={0} opacity={1} flex={1}>\n          <Tabs.Content value={currentTab} forceMount flex={1} justifyContent=\"center\">\n            <H5 textAlign=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n\nconst TabsAdvancedUnderline = () => {\n  const [tabState, setTabState] = useState<{\n    currentTab: string\n    /**\n     * Layout of the Tab user might intend to select (hovering / focusing)\n     */\n    intentAt: TabLayout | null\n    /**\n     * Layout of the Tab user selected\n     */\n    activeAt: TabLayout | null\n    /**\n     * Used to get the direction of activation for animating the active indicator\n     */\n    prevActiveAt: TabLayout | null\n  }>({\n    activeAt: null,\n    currentTab: 'tab1',\n    intentAt: null,\n    prevActiveAt: null,\n  })\n\n  const setCurrentTab = (currentTab: string) => setTabState({ ...tabState, currentTab })\n  const setIntentIndicator = (intentAt) => setTabState({ ...tabState, intentAt })\n  const setActiveIndicator = (activeAt) =>\n    setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt })\n  const { activeAt, intentAt, prevActiveAt, currentTab } = tabState\n\n  /**\n   * -1: from left\n   *  0: n/a\n   *  1: from right\n   */\n  const direction = (() => {\n    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {\n      return 0\n    }\n    return activeAt.x > prevActiveAt.x ? -1 : 1\n  })()\n\n  const enterVariant =\n    direction === 1 ? 'isLeft' : direction === -1 ? 'isRight' : 'defaultFade'\n  const exitVariant =\n    direction === 1 ? 'isRight' : direction === -1 ? 'isLeft' : 'defaultFade'\n\n  const handleOnInteraction: TabsTabProps['onInteraction'] = (type, layout) => {\n    if (type === 'select') {\n      setActiveIndicator(layout)\n    } else {\n      setIntentIndicator(layout)\n    }\n  }\n\n  return (\n    <Tabs\n      value={currentTab}\n      onValueChange={setCurrentTab}\n      orientation=\"horizontal\"\n      size=\"$4\"\n      height={150}\n      flexDirection=\"column\"\n      activationMode=\"manual\"\n      backgroundColor=\"$background\"\n      borderRadius=\"$4\"\n    >\n      <YStack>\n        <AnimatePresence>\n          {intentAt && (\n            <TabsRovingIndicator\n              width={intentAt.width}\n              height=\"$0.5\"\n              x={intentAt.x}\n              bottom={0}\n            />\n          )}\n        </AnimatePresence>\n        <AnimatePresence>\n          {activeAt && (\n            <TabsRovingIndicator\n              theme=\"active\"\n              active\n              width={activeAt.width}\n              height=\"$0.5\"\n              x={activeAt.x}\n              bottom={0}\n            />\n          )}\n        </AnimatePresence>\n        <Tabs.List\n          disablePassBorderRadius\n          loop={false}\n          aria-label=\"Manage your account\"\n          borderBottomLeftRadius={0}\n          borderBottomRightRadius={0}\n          paddingBottom=\"$1.5\"\n          borderColor=\"$color3\"\n          borderBottomWidth=\"$0.5\"\n          backgroundColor=\"transparent\"\n        >\n          <Tabs.Tab\n            unstyled\n            padding=\"$5\"\n            value=\"tab1\"\n            onInteraction={handleOnInteraction}\n          >\n            <SizableText>Profile</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab\n            unstyled\n            padding=\"$5\"\n            value=\"tab2\"\n            onInteraction={handleOnInteraction}\n          >\n            <SizableText>Connections</SizableText>\n          </Tabs.Tab>\n          <Tabs.Tab\n            unstyled\n            padding=\"$5\"\n            value=\"tab3\"\n            onInteraction={handleOnInteraction}\n          >\n            <SizableText>Notifications</SizableText>\n          </Tabs.Tab>\n        </Tabs.List>\n      </YStack>\n\n      <AnimatePresence\n        exitBeforeEnter\n        enterVariant={enterVariant}\n        exitVariant={exitVariant}\n      >\n        <AnimatedYStack key={currentTab} animation=\"100ms\" x={0} opacity={1} flex={1}>\n          <Tabs.Content value={currentTab} forceMount flex={1} justifyContent=\"center\">\n            <H5 textAlign=\"center\">{currentTab}</H5>\n          </Tabs.Content>\n        </AnimatedYStack>\n      </AnimatePresence>\n    </Tabs>\n  )\n}\n\nconst TabsRovingIndicator = styled(Stack, {\n  position: 'absolute',\n  backgroundColor: '$color5',\n  opacity: 0.7,\n  animation: '100ms',\n  enterStyle: {\n    opacity: 0,\n  },\n  exitStyle: {\n    opacity: 0,\n  },\n  variants: {\n    active: {\n      true: {\n        backgroundColor: '$color8',\n        opacity: 0.6,\n      },\n    },\n  },\n})\n\nconst AnimatedYStack = styled(YStack, {\n  variants: {\n    isLeft: { true: { x: -25, opacity: 0 } },\n    isRight: { true: { x: 25, opacity: 0 } },\n    defaultFade: { true: { opacity: 0 } },\n  } as const,\n})\n"],
   "mappings": "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",
   "names": ["currentTab", "intentAt", "activeAt"]
 }

package/dist/jsx/TabsDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/TabsDemo.tsx"],
-  "sourcesContent": ["import { useState } from 'react'\nimport {\n  Button,\n  H5,\n  Separator,\n  SizableText,\n  Tabs,\n  TabsContentProps,\n  XStack,\n  YStack,\n} from 'tamagui'\n\nconst demos = ['horizontal', 'vertical'] as const\nconst demosTitle: Record<(typeof demos)[number], string> = {\n  horizontal: 'Horizontal',\n  vertical: 'Vertical',\n}\n\nexport function TabsDemo() {\n  const [demoIndex, setDemoIndex] = useState(0)\n  const demo = demos[demoIndex]\n\n  return (\n    // web only fix for position relative\n    <YStack paddingHorizontal=\"$4\" position={'unset' as any}>\n      {demo === 'horizontal' ? <HorizontalTabs /> : <VerticalTabs />}\n\n      <XStack\n        alignItems=\"center\"\n        space\n        position=\"absolute\"\n        bottom=\"$3\"\n        left=\"$4\"\n        $xxs={{ display: 'none' }}\n      >\n        <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n          {demosTitle[demo]}\n        </Button>\n      </XStack>\n    </YStack>\n  )\n}\n\nconst HorizontalTabs = () => {\n  return (\n    <Tabs\n      defaultValue=\"tab1\"\n      orientation=\"horizontal\"\n      flexDirection=\"column\"\n      width={400}\n      height={150}\n      borderRadius=\"$4\"\n      borderWidth=\"$0.25\"\n      overflow=\"hidden\"\n      borderColor=\"$borderColor\"\n    >\n      <Tabs.List\n        separator={<Separator vertical />}\n        disablePassBorderRadius=\"bottom\"\n        aria-label=\"Manage your account\"\n      >\n        <Tabs.Tab flex={1} value=\"tab1\">\n          <SizableText fontFamily=\"$body\">Profile</SizableText>\n        </Tabs.Tab>\n        <Tabs.Tab flex={1} value=\"tab2\">\n          <SizableText fontFamily=\"$body\">Connections</SizableText>\n        </Tabs.Tab>\n        <Tabs.Tab flex={1} value=\"tab3\">\n          <SizableText fontFamily=\"$body\">Notifications</SizableText>\n        </Tabs.Tab>\n      </Tabs.List>\n      <Separator />\n      <TabsContent value=\"tab1\">\n        <H5>Profile</H5>\n      </TabsContent>\n\n      <TabsContent value=\"tab2\">\n        <H5>Connections</H5>\n      </TabsContent>\n\n      <TabsContent value=\"tab3\">\n        <H5>Notifications</H5>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst VerticalTabs = () => {\n  return (\n    <Tabs\n      defaultValue=\"tab1\"\n      flexDirection=\"row\"\n      orientation=\"vertical\"\n      width={400}\n      borderRadius=\"$4\"\n      borderWidth=\"$0.25\"\n      overflow=\"hidden\"\n      borderColor=\"$borderColor\"\n    >\n      <Tabs.List\n        disablePassBorderRadius=\"end\"\n        aria-label=\"Manage your account\"\n        separator={<Separator />}\n      >\n        <Tabs.Tab value=\"tab1\">\n          <SizableText>Profile</SizableText>\n        </Tabs.Tab>\n        <Tabs.Tab value=\"tab2\">\n          <SizableText>Connections</SizableText>\n        </Tabs.Tab>\n        <Tabs.Tab value=\"tab3\">\n          <SizableText>Notifications</SizableText>\n        </Tabs.Tab>\n      </Tabs.List>\n      <Separator vertical />\n      <TabsContent value=\"tab1\">\n        <H5 textAlign=\"center\">Profile</H5>\n      </TabsContent>\n      <TabsContent value=\"tab2\">\n        <H5 textAlign=\"center\">Connections</H5>\n      </TabsContent>\n      <TabsContent value=\"tab3\">\n        <H5 textAlign=\"center\">Notifications</H5>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst TabsContent = (props: TabsContentProps) => {\n  return (\n    <Tabs.Content\n      backgroundColor=\"$background\"\n      key=\"tab3\"\n      padding=\"$2\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      flex={1}\n      borderColor=\"$background\"\n      borderRadius=\"$2\"\n      borderTopLeftRadius={0}\n      borderTopRightRadius={0}\n      borderWidth=\"$2\"\n      {...props}\n    >\n      {props.children}\n    </Tabs.Content>\n  )\n}\n"],
   "mappings": "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",
   "names": []
 }

package/dist/jsx/TabsDemo.mjs.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/TabsDemo.tsx"],
-  "sourcesContent": ["import { useState } from 'react'\nimport {\n  Button,\n  H5,\n  Separator,\n  SizableText,\n  Tabs,\n  TabsContentProps,\n  XStack,\n  YStack,\n} from 'tamagui'\n\nconst demos = ['horizontal', 'vertical'] as const\nconst demosTitle: Record<(typeof demos)[number], string> = {\n  horizontal: 'Horizontal',\n  vertical: 'Vertical',\n}\n\nexport function TabsDemo() {\n  const [demoIndex, setDemoIndex] = useState(0)\n  const demo = demos[demoIndex]\n\n  return (\n    // web only fix for position relative\n    <YStack paddingHorizontal=\"$4\" position={'unset' as any}>\n      {demo === 'horizontal' ? <HorizontalTabs /> : <VerticalTabs />}\n\n      <XStack\n        alignItems=\"center\"\n        space\n        position=\"absolute\"\n        bottom=\"$3\"\n        left=\"$4\"\n        $xxs={{ display: 'none' }}\n      >\n        <Button size=\"$2\" onPress={() => setDemoIndex((x) => (x + 1) % demos.length)}>\n          {demosTitle[demo]}\n        </Button>\n      </XStack>\n    </YStack>\n  )\n}\n\nconst HorizontalTabs = () => {\n  return (\n    <Tabs\n      defaultValue=\"tab1\"\n      orientation=\"horizontal\"\n      flexDirection=\"column\"\n      width={400}\n      height={150}\n      borderRadius=\"$4\"\n      borderWidth=\"$0.25\"\n      overflow=\"hidden\"\n      borderColor=\"$borderColor\"\n    >\n      <Tabs.List\n        separator={<Separator vertical />}\n        disablePassBorderRadius=\"bottom\"\n        aria-label=\"Manage your account\"\n      >\n        <Tabs.Tab flex={1} value=\"tab1\">\n          <SizableText fontFamily=\"$body\">Profile</SizableText>\n        </Tabs.Tab>\n        <Tabs.Tab flex={1} value=\"tab2\">\n          <SizableText fontFamily=\"$body\">Connections</SizableText>\n        </Tabs.Tab>\n        <Tabs.Tab flex={1} value=\"tab3\">\n          <SizableText fontFamily=\"$body\">Notifications</SizableText>\n        </Tabs.Tab>\n      </Tabs.List>\n      <Separator />\n      <TabsContent value=\"tab1\">\n        <H5>Profile</H5>\n      </TabsContent>\n\n      <TabsContent value=\"tab2\">\n        <H5>Connections</H5>\n      </TabsContent>\n\n      <TabsContent value=\"tab3\">\n        <H5>Notifications</H5>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst VerticalTabs = () => {\n  return (\n    <Tabs\n      defaultValue=\"tab1\"\n      flexDirection=\"row\"\n      orientation=\"vertical\"\n      width={400}\n      borderRadius=\"$4\"\n      borderWidth=\"$0.25\"\n      overflow=\"hidden\"\n      borderColor=\"$borderColor\"\n    >\n      <Tabs.List\n        disablePassBorderRadius=\"end\"\n        aria-label=\"Manage your account\"\n        separator={<Separator />}\n      >\n        <Tabs.Tab value=\"tab1\">\n          <SizableText>Profile</SizableText>\n        </Tabs.Tab>\n        <Tabs.Tab value=\"tab2\">\n          <SizableText>Connections</SizableText>\n        </Tabs.Tab>\n        <Tabs.Tab value=\"tab3\">\n          <SizableText>Notifications</SizableText>\n        </Tabs.Tab>\n      </Tabs.List>\n      <Separator vertical />\n      <TabsContent value=\"tab1\">\n        <H5 textAlign=\"center\">Profile</H5>\n      </TabsContent>\n      <TabsContent value=\"tab2\">\n        <H5 textAlign=\"center\">Connections</H5>\n      </TabsContent>\n      <TabsContent value=\"tab3\">\n        <H5 textAlign=\"center\">Notifications</H5>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst TabsContent = (props: TabsContentProps) => {\n  return (\n    <Tabs.Content\n      backgroundColor=\"$background\"\n      key=\"tab3\"\n      padding=\"$2\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      flex={1}\n      borderColor=\"$background\"\n      borderRadius=\"$2\"\n      borderTopLeftRadius={0}\n      borderTopRightRadius={0}\n      borderWidth=\"$2\"\n      {...props}\n    >\n      {props.children}\n    </Tabs.Content>\n  )\n}\n"],
   "mappings": "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",
   "names": []
 }

package/dist/jsx/TextDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/TextDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { Paragraph, SizableText, Text, XStack, YStack } from 'tamagui'\n\nexport function TextDemo() {\n  return (\n    <YStack space=\"$2\" alignItems=\"center\">\n      <SizableText size=\"$3\">SizableText</SizableText>\n      <XStack space>\n        <SizableText theme=\"alt1\" size=\"$3\">\n          alt1\n        </SizableText>\n        <SizableText theme=\"alt2\" size=\"$3\">\n          alt2\n        </SizableText>\n      </XStack>\n      <Paragraph size=\"$2\" fontWeight=\"800\">\n        Paragraph\n      </Paragraph>\n    </YStack>\n  )\n}\n"],
   "mappings": "AACA,SAAS,WAAW,aAAmB,QAAQ,cAAc;AAEtD,SAAS,WAAW;AACzB,SACE,CAAC,OAAO,MAAM,KAAK,WAAW;AAAA,IAC5B,CAAC,YAAY,KAAK,KAAK,WAAW,EAAjC;AAAA,IACD,CAAC,OAAO;AAAA,MACN,CAAC,YAAY,MAAM,OAAO,KAAK,KAAK,IAEpC,EAFC;AAAA,MAGD,CAAC,YAAY,MAAM,OAAO,KAAK,KAAK,IAEpC,EAFC;AAAA,IAGH,EAPC;AAAA,IAQD,CAAC,UAAU,KAAK,KAAK,WAAW,MAAM,SAEtC,EAFC;AAAA,EAGH,EAbC;AAeL;",
   "names": []
 }

package/dist/jsx/TextDemo.mjs.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/TextDemo.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { Paragraph, SizableText, Text, XStack, YStack } from 'tamagui'\n\nexport function TextDemo() {\n  return (\n    <YStack space=\"$2\" alignItems=\"center\">\n      <SizableText size=\"$3\">SizableText</SizableText>\n      <XStack space>\n        <SizableText theme=\"alt1\" size=\"$3\">\n          alt1\n        </SizableText>\n        <SizableText theme=\"alt2\" size=\"$3\">\n          alt2\n        </SizableText>\n      </XStack>\n      <Paragraph size=\"$2\" fontWeight=\"800\">\n        Paragraph\n      </Paragraph>\n    </YStack>\n  )\n}\n"],
   "mappings": "AACA,SAAS,WAAW,aAAmB,QAAQ,cAAc;AAEtD,SAAS,WAAW;AACzB,SACE,CAAC,OAAO,MAAM,KAAK,WAAW;AAAA,IAC5B,CAAC,YAAY,KAAK,KAAK,WAAW,EAAjC;AAAA,IACD,CAAC,OAAO;AAAA,MACN,CAAC,YAAY,MAAM,OAAO,KAAK,KAAK,IAEpC,EAFC;AAAA,MAGD,CAAC,YAAY,MAAM,OAAO,KAAK,KAAK,IAEpC,EAFC;AAAA,IAGH,EAPC;AAAA,IAQD,CAAC,UAAU,KAAK,KAAK,WAAW,MAAM,SAEtC,EAFC;AAAA,EAGH,EAbC;AAeL;",
   "names": []
 }

package/dist/jsx/ThemeInverseDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ThemeInverseDemo.tsx"],
-  "sourcesContent": ["import { Button, Theme, XStack, YStack } from 'tamagui'\n\nexport function ThemeInverseDemo() {\n  return (\n    <XStack space>\n      <Buttons />\n      <Theme inverse>\n        <Buttons />\n      </Theme>\n    </XStack>\n  )\n}\n\nfunction Buttons() {\n  return (\n    <YStack backgroundColor=\"$background\" padding=\"$3\" borderRadius=\"$3\" space>\n      <Button>Dark</Button>\n      <Button themeInverse>Inversed</Button>\n      <Button theme=\"alt1\">Alt1 Dark</Button>\n      <Theme name=\"yellow\">\n        <Button>Yellow dark</Button>\n      </Theme>\n    </YStack>\n  )\n}\n"],
   "mappings": "AAAA,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAEvC,SAAS,mBAAmB;AACjC,SACE,CAAC,OAAO;AAAA,IACN,CAAC,QAAQ;AAAA,IACT,CAAC,MAAM,QACL,CAAC,QAAQ,EACX,EAFC;AAAA,EAGH,EALC;AAOL;AAEA,SAAS,UAAU;AACjB,SACE,CAAC,OAAO,gBAAgB,cAAc,QAAQ,KAAK,aAAa,KAAK;AAAA,IACnE,CAAC,OAAO,IAAI,EAAX;AAAA,IACD,CAAC,OAAO,aAAa,QAAQ,EAA5B;AAAA,IACD,CAAC,OAAO,MAAM,OAAO,SAAS,EAA7B;AAAA,IACD,CAAC,MAAM,KAAK,SACV,CAAC,OAAO,WAAW,EAAlB,OACH,EAFC;AAAA,EAGH,EAPC;AASL;",
   "names": []
 }

package/dist/jsx/ThemeInverseDemo.mjs.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ThemeInverseDemo.tsx"],
-  "sourcesContent": ["import { Button, Theme, XStack, YStack } from 'tamagui'\n\nexport function ThemeInverseDemo() {\n  return (\n    <XStack space>\n      <Buttons />\n      <Theme inverse>\n        <Buttons />\n      </Theme>\n    </XStack>\n  )\n}\n\nfunction Buttons() {\n  return (\n    <YStack backgroundColor=\"$background\" padding=\"$3\" borderRadius=\"$3\" space>\n      <Button>Dark</Button>\n      <Button themeInverse>Inversed</Button>\n      <Button theme=\"alt1\">Alt1 Dark</Button>\n      <Theme name=\"yellow\">\n        <Button>Yellow dark</Button>\n      </Theme>\n    </YStack>\n  )\n}\n"],
   "mappings": "AAAA,SAAS,QAAQ,OAAO,QAAQ,cAAc;AAEvC,SAAS,mBAAmB;AACjC,SACE,CAAC,OAAO;AAAA,IACN,CAAC,QAAQ;AAAA,IACT,CAAC,MAAM,QACL,CAAC,QAAQ,EACX,EAFC;AAAA,EAGH,EALC;AAOL;AAEA,SAAS,UAAU;AACjB,SACE,CAAC,OAAO,gBAAgB,cAAc,QAAQ,KAAK,aAAa,KAAK;AAAA,IACnE,CAAC,OAAO,IAAI,EAAX;AAAA,IACD,CAAC,OAAO,aAAa,QAAQ,EAA5B;AAAA,IACD,CAAC,OAAO,MAAM,OAAO,SAAS,EAA7B;AAAA,IACD,CAAC,MAAM,KAAK,SACV,CAAC,OAAO,WAAW,EAAlB,OACH,EAFC;AAAA,EAGH,EAPC;AASL;",
   "names": []
 }

package/dist/jsx/ToastDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ToastDemo.tsx"],
-  "sourcesContent": ["import { Toast, useToastController, useToastState } from '@tamagui/toast'\nimport React from 'react'\nimport { Button, SizableText, Switch, XStack, YStack } from 'tamagui'\n\nexport const ToastDemo = () => {\n  const [native, setNative] = React.useState(false)\n\n  return (\n    <YStack space alignItems=\"center\">\n      <ToastControl native={native} />\n      <CurrentToast />\n\n      <NativeOptions native={native} setNative={setNative} />\n    </YStack>\n  )\n}\n\nconst CurrentToast = () => {\n  const currentToast = useToastState()\n\n  if (!currentToast || currentToast.isHandledNatively) return null\n  return (\n    <Toast\n      key={currentToast.id}\n      duration={currentToast.duration}\n      enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n      exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n      y={0}\n      opacity={1}\n      scale={1}\n      animation=\"100ms\"\n      viewportName={currentToast.viewportName}\n    >\n      <YStack>\n        <Toast.Title>{currentToast.title}</Toast.Title>\n        {!!currentToast.message && (\n          <Toast.Description>{currentToast.message}</Toast.Description>\n        )}\n      </YStack>\n    </Toast>\n  )\n}\n\nconst ToastControl = ({ native }: { native: boolean }) => {\n  const toast = useToastController()\n  return (\n    <XStack space=\"$2\" justifyContent=\"center\">\n      <Button\n        onPress={() => {\n          toast.show('Successfully saved!', {\n            message: \"Don't worry, we've got your data.\",\n            native,\n          })\n        }}\n      >\n        Show\n      </Button>\n      <Button\n        onPress={() => {\n          toast.hide()\n        }}\n      >\n        Hide\n      </Button>\n    </XStack>\n  )\n}\n\nconst NativeOptions = ({\n  native,\n  setNative,\n}: {\n  native: boolean\n  setNative: (native: boolean) => void\n}) => {\n  return (\n    <XStack space=\"$3\">\n      <SizableText size=\"$1\">Custom</SizableText>\n\n      <Switch\n        theme=\"active\"\n        size=\"$1\"\n        checked={!!native}\n        onCheckedChange={(val) => setNative(val)}\n      >\n        <Switch.Thumb\n          animation={[\n            'quick',\n            {\n              transform: {\n                overshootClamping: true,\n              },\n            },\n          ]}\n        />\n      </Switch>\n\n      <SizableText size=\"$1\">Native</SizableText>\n    </XStack>\n  )\n}\n"],
   "mappings": "AAAA,SAAS,OAAO,oBAAoB,qBAAqB;AACzD,OAAO,WAAW;AAClB,SAAS,QAAQ,aAAa,QAAQ,QAAQ,cAAc;AAErD,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAEhD,SACE,CAAC,OAAO,MAAM,WAAW;AAAA,IACvB,CAAC,aAAa,QAAQ,QAAQ;AAAA,IAC9B,CAAC,aAAa;AAAA,IAEd,CAAC,cAAc,QAAQ,QAAQ,WAAW,WAAW;AAAA,EACvD,EALC;AAOL;AAEA,MAAM,eAAe,MAAM;AACzB,QAAM,eAAe,cAAc;AAEnC,MAAI,CAAC,gBAAgB,aAAa;AAAmB,WAAO;AAC5D,SACE,CAAC;AAAA,IACC,KAAK,aAAa;AAAA,IAClB,UAAU,aAAa;AAAA,IACvB,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,IAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,IAC1C,GAAG;AAAA,IACH,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,cAAc,aAAa;AAAA,GAE3B,CAAC;AAAA,IACC,CAAC,MAAM,OAAO,aAAa,MAAM,EAAhC,MAAM;AAAA,KACN,CAAC,CAAC,aAAa,WACd,CAAC,MAAM,aAAa,aAAa,QAAQ,EAAxC,MAAM;AAAA,EAEX,EALC,OAMH,EAjBC;AAmBL;AAEA,MAAM,eAAe,CAAC,EAAE,OAAO,MAA2B;AACxD,QAAM,QAAQ,mBAAmB;AACjC,SACE,CAAC,OAAO,MAAM,KAAK,eAAe;AAAA,IAChC,CAAC;AAAA,MACC,SAAS,MAAM;AACb,cAAM,KAAK,uBAAuB;AAAA,UAChC,SAAS;AAAA,UACT;AAAA,QACF,CAAC;AAAA,MACH;AAAA,KACD,IAED,EATC;AAAA,IAUD,CAAC;AAAA,MACC,SAAS,MAAM;AACb,cAAM,KAAK;AAAA,MACb;AAAA,KACD,IAED,EANC;AAAA,EAOH,EAlBC;AAoBL;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AACF,MAGM;AACJ,SACE,CAAC,OAAO,MAAM;AAAA,IACZ,CAAC,YAAY,KAAK,KAAK,MAAM,EAA5B;AAAA,IAED,CAAC;AAAA,MACC,MAAM;AAAA,MACN,KAAK;AAAA,MACL,SAAS,CAAC,CAAC;AAAA,MACX,iBAAiB,CAAC,QAAQ,UAAU,GAAG;AAAA,KAEvC,CAAC,OAAO;AAAA,MACN,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,WAAW;AAAA,YACT,mBAAmB;AAAA,UACrB;AAAA,QACF;AAAA,MACF;AAAA,IACF,EACF,EAhBC;AAAA,IAkBD,CAAC,YAAY,KAAK,KAAK,MAAM,EAA5B;AAAA,EACH,EAtBC;AAwBL;",
   "names": []
 }

package/dist/jsx/ToastDemo.mjs.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ToastDemo.tsx"],
-  "sourcesContent": ["import { Toast, useToastController, useToastState } from '@tamagui/toast'\nimport React from 'react'\nimport { Button, SizableText, Switch, XStack, YStack } from 'tamagui'\n\nexport const ToastDemo = () => {\n  const [native, setNative] = React.useState(false)\n\n  return (\n    <YStack space alignItems=\"center\">\n      <ToastControl native={native} />\n      <CurrentToast />\n\n      <NativeOptions native={native} setNative={setNative} />\n    </YStack>\n  )\n}\n\nconst CurrentToast = () => {\n  const currentToast = useToastState()\n\n  if (!currentToast || currentToast.isHandledNatively) return null\n  return (\n    <Toast\n      key={currentToast.id}\n      duration={currentToast.duration}\n      enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n      exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n      y={0}\n      opacity={1}\n      scale={1}\n      animation=\"100ms\"\n      viewportName={currentToast.viewportName}\n    >\n      <YStack>\n        <Toast.Title>{currentToast.title}</Toast.Title>\n        {!!currentToast.message && (\n          <Toast.Description>{currentToast.message}</Toast.Description>\n        )}\n      </YStack>\n    </Toast>\n  )\n}\n\nconst ToastControl = ({ native }: { native: boolean }) => {\n  const toast = useToastController()\n  return (\n    <XStack space=\"$2\" justifyContent=\"center\">\n      <Button\n        onPress={() => {\n          toast.show('Successfully saved!', {\n            message: \"Don't worry, we've got your data.\",\n            native,\n          })\n        }}\n      >\n        Show\n      </Button>\n      <Button\n        onPress={() => {\n          toast.hide()\n        }}\n      >\n        Hide\n      </Button>\n    </XStack>\n  )\n}\n\nconst NativeOptions = ({\n  native,\n  setNative,\n}: {\n  native: boolean\n  setNative: (native: boolean) => void\n}) => {\n  return (\n    <XStack space=\"$3\">\n      <SizableText size=\"$1\">Custom</SizableText>\n\n      <Switch\n        theme=\"active\"\n        size=\"$1\"\n        checked={!!native}\n        onCheckedChange={(val) => setNative(val)}\n      >\n        <Switch.Thumb\n          animation={[\n            'quick',\n            {\n              transform: {\n                overshootClamping: true,\n              },\n            },\n          ]}\n        />\n      </Switch>\n\n      <SizableText size=\"$1\">Native</SizableText>\n    </XStack>\n  )\n}\n"],
   "mappings": "AAAA,SAAS,OAAO,oBAAoB,qBAAqB;AACzD,OAAO,WAAW;AAClB,SAAS,QAAQ,aAAa,QAAQ,QAAQ,cAAc;AAErD,MAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAEhD,SACE,CAAC,OAAO,MAAM,WAAW;AAAA,IACvB,CAAC,aAAa,QAAQ,QAAQ;AAAA,IAC9B,CAAC,aAAa;AAAA,IAEd,CAAC,cAAc,QAAQ,QAAQ,WAAW,WAAW;AAAA,EACvD,EALC;AAOL;AAEA,MAAM,eAAe,MAAM;AACzB,QAAM,eAAe,cAAc;AAEnC,MAAI,CAAC,gBAAgB,aAAa;AAAmB,WAAO;AAC5D,SACE,CAAC;AAAA,IACC,KAAK,aAAa;AAAA,IAClB,UAAU,aAAa;AAAA,IACvB,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,IAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,IAC1C,GAAG;AAAA,IACH,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,cAAc,aAAa;AAAA,GAE3B,CAAC;AAAA,IACC,CAAC,MAAM,OAAO,aAAa,MAAM,EAAhC,MAAM;AAAA,KACN,CAAC,CAAC,aAAa,WACd,CAAC,MAAM,aAAa,aAAa,QAAQ,EAAxC,MAAM;AAAA,EAEX,EALC,OAMH,EAjBC;AAmBL;AAEA,MAAM,eAAe,CAAC,EAAE,OAAO,MAA2B;AACxD,QAAM,QAAQ,mBAAmB;AACjC,SACE,CAAC,OAAO,MAAM,KAAK,eAAe;AAAA,IAChC,CAAC;AAAA,MACC,SAAS,MAAM;AACb,cAAM,KAAK,uBAAuB;AAAA,UAChC,SAAS;AAAA,UACT;AAAA,QACF,CAAC;AAAA,MACH;AAAA,KACD,IAED,EATC;AAAA,IAUD,CAAC;AAAA,MACC,SAAS,MAAM;AACb,cAAM,KAAK;AAAA,MACb;AAAA,KACD,IAED,EANC;AAAA,EAOH,EAlBC;AAoBL;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AACF,MAGM;AACJ,SACE,CAAC,OAAO,MAAM;AAAA,IACZ,CAAC,YAAY,KAAK,KAAK,MAAM,EAA5B;AAAA,IAED,CAAC;AAAA,MACC,MAAM;AAAA,MACN,KAAK;AAAA,MACL,SAAS,CAAC,CAAC;AAAA,MACX,iBAAiB,CAAC,QAAQ,UAAU,GAAG;AAAA,KAEvC,CAAC,OAAO;AAAA,MACN,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,WAAW;AAAA,YACT,mBAAmB;AAAA,UACrB;AAAA,QACF;AAAA,MACF;AAAA,IACF,EACF,EAhBC;AAAA,IAkBD,CAAC,YAAY,KAAK,KAAK,MAAM,EAA5B;AAAA,EACH,EAtBC;AAwBL;",
   "names": []
 }

package/dist/jsx/ToastDuplicateDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ToastDuplicateDemo.tsx"],
-  "sourcesContent": ["import { CheckCircle2 } from '@tamagui/lucide-icons'\nimport { Toast } from '@tamagui/toast'\nimport React from 'react'\nimport { Button, XStack, YStack } from 'tamagui'\n\nexport const ToastDuplicateDemo = () => {\n  const [savedCount, setSavedCount] = React.useState(0)\n\n  return (\n    <YStack alignItems=\"center\">\n      <Button\n        onPress={() => {\n          setSavedCount((old) => old + 1)\n        }}\n      >\n        Show toast\n      </Button>\n      {[...Array(savedCount)].map((_, index) => (\n        <Toast\n          viewportName=\"viewport-multiple\" // Sends to a viewport that supports multiple toasts with the `multipleToasts` prop\n          key={index}\n          duration={4000}\n          enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n          exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n          y={0}\n          opacity={1}\n          scale={1}\n          animation=\"100ms\"\n        >\n          <XStack space alignItems=\"center\">\n            <YStack>\n              <CheckCircle2 />\n            </YStack>\n\n            <YStack>\n              <Toast.Title>Successfully saved!</Toast.Title>\n              <Toast.Description>Don't worry... We've got your data.</Toast.Description>\n            </YStack>\n          </XStack>\n        </Toast>\n      ))}\n    </YStack>\n  )\n}\n"],
   "mappings": "AAAA,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AACtB,OAAO,WAAW;AAClB,SAAS,QAAQ,QAAQ,cAAc;AAEhC,MAAM,qBAAqB,MAAM;AACtC,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC;AAEpD,SACE,CAAC,OAAO,WAAW;AAAA,IACjB,CAAC;AAAA,MACC,SAAS,MAAM;AACb,sBAAc,CAAC,QAAQ,MAAM,CAAC;AAAA,MAChC;AAAA,KACD,UAED,EANC;AAAA,KAOA,CAAC,GAAG,MAAM,UAAU,CAAC,EAAE,IAAI,CAAC,GAAG,UAC9B,CAAC;AAAA,MACC,aAAa;AAAA,MACb,KAAK;AAAA,MACL,UAAU;AAAA,MACV,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,MAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,MAC1C,GAAG;AAAA,MACH,SAAS;AAAA,MACT,OAAO;AAAA,MACP,UAAU;AAAA,KAEV,CAAC,OAAO,MAAM,WAAW;AAAA,MACvB,CAAC,OACC,CAAC,aAAa,EAChB,EAFC;AAAA,MAID,CAAC;AAAA,QACC,CAAC,MAAM,MAAM,mBAAmB,EAA/B,MAAM;AAAA,QACP,CAAC,MAAM,YAAY,mCAAmC,EAArD,MAAM;AAAA,MACT,EAHC;AAAA,IAIH,EATC,OAUH,EArBC,MAsBF;AAAA,EACH,EAhCC;AAkCL;",
   "names": []
 }

package/dist/jsx/ToastDuplicateDemo.mjs.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ToastDuplicateDemo.tsx"],
-  "sourcesContent": ["import { CheckCircle2 } from '@tamagui/lucide-icons'\nimport { Toast } from '@tamagui/toast'\nimport React from 'react'\nimport { Button, XStack, YStack } from 'tamagui'\n\nexport const ToastDuplicateDemo = () => {\n  const [savedCount, setSavedCount] = React.useState(0)\n\n  return (\n    <YStack alignItems=\"center\">\n      <Button\n        onPress={() => {\n          setSavedCount((old) => old + 1)\n        }}\n      >\n        Show toast\n      </Button>\n      {[...Array(savedCount)].map((_, index) => (\n        <Toast\n          viewportName=\"viewport-multiple\" // Sends to a viewport that supports multiple toasts with the `multipleToasts` prop\n          key={index}\n          duration={4000}\n          enterStyle={{ opacity: 0, scale: 0.5, y: -25 }}\n          exitStyle={{ opacity: 0, scale: 1, y: -20 }}\n          y={0}\n          opacity={1}\n          scale={1}\n          animation=\"100ms\"\n        >\n          <XStack space alignItems=\"center\">\n            <YStack>\n              <CheckCircle2 />\n            </YStack>\n\n            <YStack>\n              <Toast.Title>Successfully saved!</Toast.Title>\n              <Toast.Description>Don't worry... We've got your data.</Toast.Description>\n            </YStack>\n          </XStack>\n        </Toast>\n      ))}\n    </YStack>\n  )\n}\n"],
   "mappings": "AAAA,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AACtB,OAAO,WAAW;AAClB,SAAS,QAAQ,QAAQ,cAAc;AAEhC,MAAM,qBAAqB,MAAM;AACtC,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC;AAEpD,SACE,CAAC,OAAO,WAAW;AAAA,IACjB,CAAC;AAAA,MACC,SAAS,MAAM;AACb,sBAAc,CAAC,QAAQ,MAAM,CAAC;AAAA,MAChC;AAAA,KACD,UAED,EANC;AAAA,KAOA,CAAC,GAAG,MAAM,UAAU,CAAC,EAAE,IAAI,CAAC,GAAG,UAC9B,CAAC;AAAA,MACC,aAAa;AAAA,MACb,KAAK;AAAA,MACL,UAAU;AAAA,MACV,YAAY,EAAE,SAAS,GAAG,OAAO,KAAK,GAAG,IAAI;AAAA,MAC7C,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,GAAG,IAAI;AAAA,MAC1C,GAAG;AAAA,MACH,SAAS;AAAA,MACT,OAAO;AAAA,MACP,UAAU;AAAA,KAEV,CAAC,OAAO,MAAM,WAAW;AAAA,MACvB,CAAC,OACC,CAAC,aAAa,EAChB,EAFC;AAAA,MAID,CAAC;AAAA,QACC,CAAC,MAAM,MAAM,mBAAmB,EAA/B,MAAM;AAAA,QACP,CAAC,MAAM,YAAY,mCAAmC,EAArD,MAAM;AAAA,MACT,EAHC;AAAA,IAIH,EATC,OAUH,EArBC,MAsBF;AAAA,EACH,EAhCC;AAkCL;",
   "names": []
 }

package/dist/jsx/ToggleGroupDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ToggleGroupDemo.tsx"],
-  "sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n  return (\n    <YStack paddingHorizontal=\"$4\">\n      <XStack alignItems=\"center\" space=\"$10\">\n        <YStack alignItems=\"center\" space=\"$6\">\n          <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n          <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n        </YStack>\n        <XStack alignItems=\"center\" space=\"$6\">\n          <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n          <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n        </XStack>\n      </XStack>\n    </YStack>\n  )\n}\n\nfunction ToggleGroupComponent(props: {\n  size: SizeTokens\n  type: 'single' | 'multiple'\n  orientation: 'vertical' | 'horizontal'\n}) {\n  const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n  return (\n    <XStack\n      flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      space=\"$4\"\n    >\n      <Label paddingRight=\"$0\" justifyContent=\"flex-end\" size={props.size} htmlFor={id}>\n        {props.type === 'single' ? 'Single' : 'Multiple'}\n      </Label>\n      {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n      <ToggleGroup\n        orientation={props.orientation}\n        id={id}\n        type={props.type}\n        size={props.size}\n        disableDeactivation={props.type === 'single' ? true : undefined}\n      >\n        <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n          <AlignLeft />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n          <AlignCenter />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n          <AlignRight />\n        </ToggleGroup.Item>\n      </ToggleGroup>\n    </XStack>\n  )\n}\n"],
   "mappings": "AAAA,SAAS,aAAa,WAAW,kBAAkB;AACnD,SAAS,OAAmB,aAAa,QAAQ,cAAc;AAExD,SAAS,kBAAkB;AAChC,SACE,CAAC,OAAO,kBAAkB,KACxB,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,IAChC,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,MAChC,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,aAAa;AAAA,MACvE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,aAAa;AAAA,IAC3E,EAHC;AAAA,IAID,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,MAChC,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,WAAW;AAAA,MACrE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,WAAW;AAAA,IACzE,EAHC;AAAA,EAIH,EATC,OAUH,EAXC;AAaL;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE,CAAC;AAAA,IACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,IAC5D,WAAW;AAAA,IACX,eAAe;AAAA,IACf,MAAM;AAAA;AAAA,IAEN,CAAC,MAAM,aAAa,KAAK,eAAe,WAAW,MAAM,MAAM,MAAM,SAAS,KAC3E,MAAM,SAAS,WAAW,WAAW,WACxC,EAFC;AAAA,IAKD,CAAC;AAAA,MACC,aAAa,MAAM;AAAA,MACnB,IAAI;AAAA,MACJ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,qBAAqB,MAAM,SAAS,WAAW,OAAO;AAAA;AAAA,MAEtD,CAAC,YAAY,KAAK,MAAM,OAAO,WAAW,eACxC,CAAC,UAAU,EACb,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,SAAS,WAAW,iBAC1C,CAAC,YAAY,EACf,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,QAAQ,WAAW,gBACzC,CAAC,WAAW,EACd,EAFC,YAAY;AAAA,IAGf,EAhBC;AAAA,EAiBH,EA5BC;AA8BL;",
   "names": []
 }

package/dist/jsx/ToggleGroupDemo.mjs.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ToggleGroupDemo.tsx"],
-  "sourcesContent": ["import { AlignCenter, AlignLeft, AlignRight } from '@tamagui/lucide-icons'\nimport { Label, SizeTokens, ToggleGroup, XStack, YStack } from 'tamagui'\n\nexport function ToggleGroupDemo() {\n  return (\n    <YStack paddingHorizontal=\"$4\">\n      <XStack alignItems=\"center\" space=\"$10\">\n        <YStack alignItems=\"center\" space=\"$6\">\n          <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"horizontal\" />\n          <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"horizontal\" />\n        </YStack>\n        <XStack alignItems=\"center\" space=\"$6\">\n          <ToggleGroupComponent type=\"single\" size=\"$3\" orientation=\"vertical\" />\n          <ToggleGroupComponent type=\"multiple\" size=\"$4\" orientation=\"vertical\" />\n        </XStack>\n      </XStack>\n    </YStack>\n  )\n}\n\nfunction ToggleGroupComponent(props: {\n  size: SizeTokens\n  type: 'single' | 'multiple'\n  orientation: 'vertical' | 'horizontal'\n}) {\n  const id = `switch-${props.size.toString().slice(1)}-${props.type}`\n  return (\n    <XStack\n      flexDirection={props.orientation === 'horizontal' ? 'row' : 'column'}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      space=\"$4\"\n    >\n      <Label paddingRight=\"$0\" justifyContent=\"flex-end\" size={props.size} htmlFor={id}>\n        {props.type === 'single' ? 'Single' : 'Multiple'}\n      </Label>\n      {/* <Separator vertical={props.orientation === 'horizontal'} /> */}\n\n      <ToggleGroup\n        orientation={props.orientation}\n        id={id}\n        type={props.type}\n        size={props.size}\n        disableDeactivation={props.type === 'single' ? true : undefined}\n      >\n        <ToggleGroup.Item value=\"left\" aria-label=\"Left aligned\">\n          <AlignLeft />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"center\" aria-label=\"Center aligned\">\n          <AlignCenter />\n        </ToggleGroup.Item>\n        <ToggleGroup.Item value=\"right\" aria-label=\"Right aligned\">\n          <AlignRight />\n        </ToggleGroup.Item>\n      </ToggleGroup>\n    </XStack>\n  )\n}\n"],
   "mappings": "AAAA,SAAS,aAAa,WAAW,kBAAkB;AACnD,SAAS,OAAmB,aAAa,QAAQ,cAAc;AAExD,SAAS,kBAAkB;AAChC,SACE,CAAC,OAAO,kBAAkB,KACxB,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,IAChC,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,MAChC,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,aAAa;AAAA,MACvE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,aAAa;AAAA,IAC3E,EAHC;AAAA,IAID,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,MAChC,CAAC,qBAAqB,KAAK,SAAS,KAAK,KAAK,YAAY,WAAW;AAAA,MACrE,CAAC,qBAAqB,KAAK,WAAW,KAAK,KAAK,YAAY,WAAW;AAAA,IACzE,EAHC;AAAA,EAIH,EATC,OAUH,EAXC;AAaL;AAEA,SAAS,qBAAqB,OAI3B;AACD,QAAM,KAAK,UAAU,MAAM,KAAK,SAAS,EAAE,MAAM,CAAC,KAAK,MAAM;AAC7D,SACE,CAAC;AAAA,IACC,eAAe,MAAM,gBAAgB,eAAe,QAAQ;AAAA,IAC5D,WAAW;AAAA,IACX,eAAe;AAAA,IACf,MAAM;AAAA;AAAA,IAEN,CAAC,MAAM,aAAa,KAAK,eAAe,WAAW,MAAM,MAAM,MAAM,SAAS,KAC3E,MAAM,SAAS,WAAW,WAAW,WACxC,EAFC;AAAA,IAKD,CAAC;AAAA,MACC,aAAa,MAAM;AAAA,MACnB,IAAI;AAAA,MACJ,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,qBAAqB,MAAM,SAAS,WAAW,OAAO;AAAA;AAAA,MAEtD,CAAC,YAAY,KAAK,MAAM,OAAO,WAAW,eACxC,CAAC,UAAU,EACb,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,SAAS,WAAW,iBAC1C,CAAC,YAAY,EACf,EAFC,YAAY;AAAA,MAGb,CAAC,YAAY,KAAK,MAAM,QAAQ,WAAW,gBACzC,CAAC,WAAW,EACd,EAFC,YAAY;AAAA,IAGf,EAhBC;AAAA,EAiBH,EA5BC;AA8BL;",
   "names": []
 }

package/dist/jsx/TokensDemo.js.map

@@ -1,7 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/TokensDemo.tsx"],
-  "sourcesContent": ["import { Tokens, getConfig } from '@tamagui/core'\nimport { useState } from 'react'\nimport { Button, H2, H3, H4, Separator, Square, XGroup, XStack, YStack } from 'tamagui'\n\ntype Section = 'spaceNegative' | keyof Tokens\n\nconst sections: { name: string; key: Section }[] = [\n  {\n    name: `Size`,\n    key: `size`,\n  },\n  {\n    name: `Space`,\n    key: 'space',\n  },\n  {\n    name: `Space (-)`,\n    key: `spaceNegative`,\n  },\n  {\n    name: `Radius`,\n    key: `radius`,\n  },\n]\n\nexport function TokensDemo() {\n  const [section, setSection] = useState<Section>('size')\n\n  return (\n    <YStack space>\n      <XGroup alignItems=\"center\" alignSelf=\"center\">\n        {sections.map(({ name, key }) => {\n          return (\n            <XGroup.Item key={key}>\n              <Button\n                size=\"$3\"\n                theme={section === key ? 'active' : null}\n                fontFamily=\"$silkscreen\"\n                onPress={() => setSection(key)}\n              >\n                {name}\n              </Button>\n            </XGroup.Item>\n          )\n        })}\n      </XGroup>\n\n      {(section === 'size' ||\n        section === 'spaceNegative' ||\n        section === 'space' ||\n        section === 'radius') && <SizeSection section={section} />}\n    </YStack>\n  )\n}\n\nfunction SizeSection({ section }: { section: Section }) {\n  const allTokens = getConfig().tokens\n  const tokens = allTokens[section.startsWith('space') ? 'space' : section]\n  const st = Object.keys(tokens).sort((a, b) => (parseFloat(a) > parseFloat(b) ? 1 : -1))\n  const spaceTokens = st.filter((t) => parseFloat(t) >= 0)\n  const spaceTokensNegative = st\n    .filter((t) => parseFloat(t) < 0)\n    .sort((a, b) => (parseFloat(a) > parseFloat(b) ? -1 : 1))\n\n  return (\n    <YStack flex={1} space>\n      <H2>Sizes</H2>\n      <YStack width=\"100%\" space=\"$2\" separator={<Separator />}>\n        {(section === 'spaceNegative' ? spaceTokensNegative : spaceTokens).map(\n          (token) => {\n            return (\n              <XStack width=\"100%\" alignItems=\"center\" key={token}>\n                <YStack width=\"25%\">\n                  <H3 size=\"$6\">${token}</H3>\n                </YStack>\n                <YStack width=\"20%\">\n                  <H4 size=\"$5\">{tokens[token]?.val}px</H4>\n                </YStack>\n                <Square\n                  size={tokens[token]?.val}\n                  backgroundColor=\"$color5\"\n                  {...(section === 'spaceNegative' && {\n                    backgroundColor: '$red5',\n                    size: -tokens[\n                      spaceTokensNegative.find(\n                        (t) => parseFloat(t) === -parseFloat(token)\n                      ) ?? token\n                    ]?.val,\n                  })}\n                  {...(section === 'radius' && {\n                    // @ts-ignore\n                    size: allTokens.size[token]?.val,\n                    borderRadius: tokens[token]?.val,\n                  })}\n                />\n              </XStack>\n            )\n          }\n        )}\n      </YStack>\n    </YStack>\n  )\n}\n"],
   "mappings": "AAAA,SAAiB,iBAAiB;AAClC,SAAS,gBAAgB;AACzB,SAAS,QAAQ,IAAI,IAAI,IAAI,WAAW,QAAQ,QAAQ,QAAQ,cAAc;AAI9E,MAAM,WAA6C;AAAA,EACjD;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AACF;AAEO,SAAS,aAAa;AAC3B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAkB,MAAM;AAEtD,SACE,CAAC,OAAO;AAAA,IACN,CAAC,OAAO,WAAW,SAAS,UAAU,UACnC,SAAS,IAAI,CAAC,EAAE,MAAM,IAAI,MAAM;AAC/B,aACE,CAAC,OAAO,KAAK,KAAK,KAChB,CAAC;AAAA,QACC,KAAK;AAAA,QACL,OAAO,YAAY,MAAM,WAAW;AAAA,QACpC,WAAW;AAAA,QACX,SAAS,MAAM,WAAW,GAAG;AAAA,QAE5B,KACH,EAPC,OAQH,EATC,OAAO;AAAA,IAWZ,CAAC,EACH,EAfC;AAAA,MAiBC,YAAY,UACZ,YAAY,mBACZ,YAAY,WACZ,YAAY,aAAa,CAAC,YAAY,SAAS,SAAS;AAAA,EAC5D,EAtBC;AAwBL;AAEA,SAAS,YAAY,EAAE,QAAQ,GAAyB;AACtD,QAAM,YAAY,UAAU,EAAE;AAC9B,QAAM,SAAS,UAAU,QAAQ,WAAW,OAAO,IAAI,UAAU,OAAO;AACxE,QAAM,KAAK,OAAO,KAAK,MAAM,EAAE,KAAK,CAAC,GAAG,MAAO,WAAW,CAAC,IAAI,WAAW,CAAC,IAAI,IAAI,EAAG;AACtF,QAAM,cAAc,GAAG,OAAO,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC;AACvD,QAAM,sBAAsB,GACzB,OAAO,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,EAC/B,KAAK,CAAC,GAAG,MAAO,WAAW,CAAC,IAAI,WAAW,CAAC,IAAI,KAAK,CAAE;AAE1D,SACE,CAAC,OAAO,MAAM,GAAG;AAAA,IACf,CAAC,GAAG,KAAK,EAAR;AAAA,IACD,CAAC,OAAO,MAAM,OAAO,MAAM,KAAK,WAAW,CAAC,UAAU,MAClD,YAAY,kBAAkB,sBAAsB,aAAa;AAAA,MACjE,CAAC,UAAU;AACT,eACE,CAAC,OAAO,MAAM,OAAO,WAAW,SAAS,KAAK;AAAA,UAC5C,CAAC,OAAO,MAAM,MACZ,CAAC,GAAG,KAAK;AAAA,aAAK;AAAA,aAAE;AAAA,UAAM,EAArB,GACH,EAFC;AAAA,UAGD,CAAC,OAAO,MAAM,MACZ,CAAC,GAAG,KAAK;AAAA,aAAM,OAAO,KAAK,GAAG;AAAA,aAAI;AAAA,UAAE,EAAnC,GACH,EAFC;AAAA,UAGD,CAAC;AAAA,YACC,MAAM,OAAO,KAAK,GAAG;AAAA,YACrB,gBAAgB;AAAA,gBACX,YAAY,mBAAmB;AAAA,cAClC,iBAAiB;AAAA,cACjB,MAAM,CAAC,OACL,oBAAoB;AAAA,gBAClB,CAAC,MAAM,WAAW,CAAC,MAAM,CAAC,WAAW,KAAK;AAAA,cAC5C,KAAK,KACP,GAAG;AAAA,YACL;AAAA,gBACK,YAAY,YAAY;AAAA;AAAA,cAE3B,MAAM,UAAU,KAAK,KAAK,GAAG;AAAA,cAC7B,cAAc,OAAO,KAAK,GAAG;AAAA,YAC/B;AAAA,UACF;AAAA,QACF,EAxBC;AAAA,MA0BL;AAAA,IACF,EACF,EAhCC;AAAA,EAiCH,EAnCC;AAqCL;",
   "names": []
 }