@tamagui/demos 1.61.3 → 1.62.1

package/dist/jsx/LabelDemo.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/LabelDemo.tsx"],
+  "mappings": "AAAA,SAAS,OAAO,OAAO,QAAQ,QAAQ,cAAc;AAE9C,SAAS,YAAY;AAC1B,SACE,CAAC,OAAO,QAAQ,KAAK,UAAU,KAAK,MAAM;AAAA,IACxC,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,MAChC,CAAC,MAAM,OAAO,IAAI,QAAQ,OAAO,IAEjC,EAFC;AAAA,MAGD,CAAC,MAAM,MAAM,GAAG,GAAG,OAAO,aAAa,eAAe;AAAA,IACxD,EALC;AAAA,IAOD,CAAC,OAAO,WAAW,SAAS,MAAM;AAAA,MAChC,CAAC,MAAM,OAAO,IAAI,QAAQ,SAAS,aAEnC,EAFC;AAAA,MAGD,CAAC,OAAO,GAAG,SACT,CAAC,OAAO,MAAM,UAAU,QAAQ,EAClC,EAFC;AAAA,IAGH,EAPC;AAAA,EAQH,EAhBC;AAkBL;",
+  "names": []
+}

package/dist/jsx/LinearGradientDemo.native.js

@@ -0,0 +1,32 @@
+import { XStack } from "tamagui";
+import { LinearGradient } from "tamagui/linear-gradient";
+function LinearGradientDemo() {
+  return <XStack space>
+    {
+      /* tokens */
+    }
+    <LinearGradient
+      width="$6"
+      height="$6"
+      borderRadius="$4"
+      colors={["$red10", "$yellow10"]}
+      start={[0, 1]}
+      end={[0, 0]}
+    />
+    {
+      /* theme values */
+    }
+    <LinearGradient
+      width="$6"
+      height="$6"
+      borderRadius="$4"
+      colors={["$background", "$color"]}
+      start={[1, 1]}
+      end={[0, 0]}
+    />
+  </XStack>;
+}
+export {
+  LinearGradientDemo
+};
+//# sourceMappingURL=LinearGradientDemo.js.map

package/dist/jsx/LinearGradientDemo.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/LinearGradientDemo.tsx"],
+  "mappings": "AAAA,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAExB,SAAS,qBAAqB;AACnC,SACE,CAAC,OAAO;AAAA;AAAA;AAAA;AAAA,IAEN,CAAC;AAAA,MACC,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,QAAQ,CAAC,UAAU,WAAW;AAAA,MAC9B,OAAO,CAAC,GAAG,CAAC;AAAA,MACZ,KAAK,CAAC,GAAG,CAAC;AAAA,IACZ;AAAA;AAAA;AAAA;AAAA,IAGA,CAAC;AAAA,MACC,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,QAAQ,CAAC,eAAe,QAAQ;AAAA,MAChC,OAAO,CAAC,GAAG,CAAC;AAAA,MACZ,KAAK,CAAC,GAAG,CAAC;AAAA,IACZ;AAAA,EACF,EApBC;AAsBL;",
+  "names": []
+}

package/dist/jsx/ListItemDemo.native.js

@@ -0,0 +1,40 @@
+import { ChevronRight, Cloud, Moon, Star, Sun } from "@tamagui/lucide-icons";
+import { ListItem, Separator, XStack, YGroup } from "tamagui";
+function ListItemDemo() {
+  return <XStack $sm={{ flexDirection: "column" }} paddingHorizontal="$4" space>
+    <ListItemDemo1 />
+    <ListItemDemo2 />
+  </XStack>;
+}
+function ListItemDemo1() {
+  return <YGroup alignSelf="center" bordered width={240} size="$4">
+    <YGroup.Item><ListItem hoverTheme icon={Star} title="Star" subTitle="Twinkles" /></YGroup.Item>
+    <YGroup.Item><ListItem hoverTheme icon={Moon}>Moon</ListItem></YGroup.Item>
+    <YGroup.Item><ListItem hoverTheme icon={Sun}>Sun</ListItem></YGroup.Item>
+    <YGroup.Item><ListItem hoverTheme icon={Cloud}>Cloud</ListItem></YGroup.Item>
+  </YGroup>;
+}
+function ListItemDemo2() {
+  return <YGroup alignSelf="center" bordered width={240} size="$5" separator={<Separator />}>
+    <YGroup.Item><ListItem
+      hoverTheme
+      pressTheme
+      title="Star"
+      subTitle="Subtitle"
+      icon={Star}
+      iconAfter={ChevronRight}
+    /></YGroup.Item>
+    <YGroup.Item><ListItem
+      hoverTheme
+      pressTheme
+      title="Moon"
+      subTitle="Subtitle"
+      icon={Moon}
+      iconAfter={ChevronRight}
+    /></YGroup.Item>
+  </YGroup>;
+}
+export {
+  ListItemDemo
+};
+//# sourceMappingURL=ListItemDemo.js.map

package/dist/jsx/ListItemDemo.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/ListItemDemo.tsx"],
+  "mappings": "AAAA,SAAS,cAAc,OAAO,MAAM,MAAM,WAAW;AACrD,SAAS,UAAU,WAAW,QAAQ,cAAc;AAE7C,SAAS,eAAe;AAC7B,SACE,CAAC,OAAO,KAAK,EAAE,eAAe,SAAS,GAAG,kBAAkB,KAAK;AAAA,IAC/D,CAAC,cAAc;AAAA,IACf,CAAC,cAAc;AAAA,EACjB,EAHC;AAKL;AAEA,SAAS,gBAAgB;AACvB,SACE,CAAC,OAAO,UAAU,SAAS,SAAS,OAAO,KAAK,KAAK;AAAA,IACnD,CAAC,OAAO,KACN,CAAC,SAAS,WAAW,MAAM,MAAM,MAAM,OAAO,SAAS,WAAW,EACpE,EAFC,OAAO;AAAA,IAGR,CAAC,OAAO,KACN,CAAC,SAAS,WAAW,MAAM,MAAM,IAEjC,EAFC,SAGH,EAJC,OAAO;AAAA,IAKR,CAAC,OAAO,KACN,CAAC,SAAS,WAAW,MAAM,KAAK,GAEhC,EAFC,SAGH,EAJC,OAAO;AAAA,IAKR,CAAC,OAAO,KACN,CAAC,SAAS,WAAW,MAAM,OAAO,KAElC,EAFC,SAGH,EAJC,OAAO;AAAA,EAKV,EAnBC;AAqBL;AAEA,SAAS,gBAAgB;AACvB,SACE,CAAC,OAAO,UAAU,SAAS,SAAS,OAAO,KAAK,KAAK,KAAK,WAAW,CAAC,UAAU;AAAA,IAC9E,CAAC,OAAO,KACN,CAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,IACb,EACF,EATC,OAAO;AAAA,IAUR,CAAC,OAAO,KACN,CAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,IACb,EACF,EATC,OAAO;AAAA,EAUV,EArBC;AAuBL;",
+  "names": []
+}

package/dist/jsx/LucideIconsDemo.js

@@ -5,17 +5,14 @@ import { Input, Paragraph, Spacer, YStack, useDebounceValue } from "tamagui";
 import { Grid } from "./Grid";
 const lucideIcons = Object.keys(
   // vite tree shaking workaround
-  typeof LucideIcons !== "undefined" ? LucideIcons : {}
+  typeof LucideIcons < "u" ? LucideIcons : {}
 ).map((name) => ({
   key: name.toLowerCase(),
   name,
   Icon: LucideIcons[name]
 }));
 function LucideIconsDemo() {
-  const [searchRaw, setSearch] = useState("");
-  const search = useDebounceValue(searchRaw, 400);
-  const size = 100;
-  const iconsMemo = useMemo(
+  const [searchRaw, setSearch] = useState(""), search = useDebounceValue(searchRaw, 400), size = 100, iconsMemo = useMemo(
     () => lucideIcons.filter((x) => x.key.includes(search.toLowerCase())).map(({ Icon, name }) => <YStack
       height={size + 20}
       alignItems="center"

package/dist/jsx/LucideIconsDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/LucideIconsDemo.tsx"],
-  "mappings": "AAAA,YAAY,iBAAiB;AAC7B,SAAS,SAAS,gBAAgB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,OAAO,WAAW,QAAQ,QAAQ,wBAAwB;AAEnE,SAAS,YAAY;AAErB,MAAM,cAAc,OAAO;AAAA;AAAA,EAEzB,OAAO,gBAAgB,cAAc,cAAc,CAAC;AACtD,EAAE,IAAI,CAAC,UAAU;AAAA,EACf,KAAK,KAAK,YAAY;AAAA,EACtB;AAAA,EACA,MAAM,YAAY,IAAI;AACxB,EAAE;AAEK,SAAS,kBAAkB;AAChC,QAAM,CAAC,WAAW,SAAS,IAAI,SAAS,EAAE;AAC1C,QAAM,SAAS,iBAAiB,WAAW,GAAG;AAE9C,QAAM,OAAO;AAEb,QAAM,YAAY;AAAA,IAChB,MACE,YACG,OAAO,CAAC,MAAM,EAAE,IAAI,SAAS,OAAO,YAAY,CAAC,CAAC,EAClD,IAAI,CAAC,EAAE,MAAM,KAAK,MACjB,CAAC;AAAA,MACC,QAAQ,OAAO;AAAA,MACf,WAAW;AAAA,MACX,eAAe;AAAA,MACf,KAAK;AAAA;AAAA,MAEL,CAAC,KAAK,MAAM,OAAO,MAAM;AAAA,MACzB,CAAC,OAAO;AAAA,MACR,CAAC;AAAA,QACC,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,kBAAkB;AAAA,QAClB,KAAK;AAAA,QACL,SAAS;AAAA,QAER,KACH,EAVC;AAAA,IAWH,EAnBC,OAoBF;AAAA,IACL,CAAC,MAAM;AAAA,EACT;AAEA,SACE,CAAC,OAAO,SAAS,OAAO,QAAQ,KAAK,cAAc,KAAK;AAAA,IACtD,CAAC,MAAM,OAAO,WAAW,cAAc,WAAW,YAAY,YAAY;AAAA,IAE1E,CAAC,OAAO,QAAQ,KACd,CAAC,WACC,CAAC,KAAK,cAAc,OAAO,UAAU,EAApC,KACH,EAFC,WAGH,EAJC;AAAA,EAKH,EARC;AAUL;",
+  "mappings": "AAAA,YAAY,iBAAiB;AAC7B,SAAS,SAAS,gBAAgB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,OAAO,WAAW,QAAQ,QAAQ,wBAAwB;AAEnE,SAAS,YAAY;AAErB,MAAM,cAAc,OAAO;AAAA;AAAA,EAEzB,OAAO,cAAgB,MAAc,cAAc,CAAC;AACtD,EAAE,IAAI,CAAC,UAAU;AAAA,EACf,KAAK,KAAK,YAAY;AAAA,EACtB;AAAA,EACA,MAAM,YAAY,IAAI;AACxB,EAAE;AAEK,SAAS,kBAAkB;AAChC,QAAM,CAAC,WAAW,SAAS,IAAI,SAAS,EAAE,GACpC,SAAS,iBAAiB,WAAW,GAAG,GAExC,OAAO,KAEP,YAAY;AAAA,IAChB,MACE,YACG,OAAO,CAAC,MAAM,EAAE,IAAI,SAAS,OAAO,YAAY,CAAC,CAAC,EAClD,IAAI,CAAC,EAAE,MAAM,KAAK,MACjB,CAAC;AAAA,MACC,QAAQ,OAAO;AAAA,MACf,WAAW;AAAA,MACX,eAAe;AAAA,MACf,KAAK;AAAA;AAAA,MAEL,CAAC,KAAK,MAAM,OAAO,MAAM;AAAA,MACzB,CAAC,OAAO;AAAA,MACR,CAAC;AAAA,QACC,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,kBAAkB;AAAA,QAClB,KAAK;AAAA,QACL,SAAS;AAAA,QAER,KACH,EAVC;AAAA,IAWH,EAnBC,OAoBF;AAAA,IACL,CAAC,MAAM;AAAA,EACT;AAEA,SACE,CAAC,OAAO,SAAS,OAAO,QAAQ,KAAK,cAAc,KAAK;AAAA,IACtD,CAAC,MAAM,OAAO,WAAW,cAAc,WAAW,YAAY,YAAY;AAAA,IAE1E,CAAC,OAAO,QAAQ,KACd,CAAC,WACC,CAAC,KAAK,cAAc,OAAO,UAAU,EAApC,KACH,EAFC,WAGH,EAJC;AAAA,EAKH,EARC;AAUL;",
   "names": []
 }

package/dist/jsx/LucideIconsDemo.native.js

@@ -0,0 +1,44 @@
+import * as LucideIcons from "@tamagui/lucide-icons";
+import { useMemo, useState } from "react";
+import { ScrollView } from "react-native";
+import { Input, Paragraph, Spacer, YStack, useDebounceValue } from "tamagui";
+import { Grid } from "./Grid";
+const lucideIcons = Object.keys(
+  // vite tree shaking workaround
+  typeof LucideIcons < "u" ? LucideIcons : {}
+).map((name) => ({
+  key: name.toLowerCase(),
+  name,
+  Icon: LucideIcons[name]
+}));
+function LucideIconsDemo() {
+  const [searchRaw, setSearch] = useState(""), search = useDebounceValue(searchRaw, 400), size = 100, iconsMemo = useMemo(
+    () => lucideIcons.filter((x) => x.key.includes(search.toLowerCase())).map(({ Icon, name }) => <YStack
+      height={size + 20}
+      alignItems="center"
+      justifyContent="center"
+      key={name}
+    >
+      <Icon size={size * 0.25} />
+      <Spacer />
+      <Paragraph
+        height="$6"
+        wordWrap="break-word"
+        maxWidth="100%"
+        textAlign="center"
+        paddingHorizontal="$2"
+        size="$1"
+        opacity={0.5}
+      >{name}</Paragraph>
+    </YStack>),
+    [search]
+  );
+  return <YStack minWidth="100%" padding="$4" paddingBottom="$0" space>
+    <Input value={searchRaw} onChangeText={setSearch} placeholder="Search..." />
+    <YStack height={420}><ScrollView><Grid itemMinWidth={size}>{iconsMemo}</Grid></ScrollView></YStack>
+  </YStack>;
+}
+export {
+  LucideIconsDemo
+};
+//# sourceMappingURL=LucideIconsDemo.js.map

package/dist/jsx/LucideIconsDemo.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/LucideIconsDemo.tsx"],
+  "mappings": "AAAA,YAAY,iBAAiB;AAC7B,SAAS,SAAS,gBAAgB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,OAAO,WAAW,QAAQ,QAAQ,wBAAwB;AAEnE,SAAS,YAAY;AAErB,MAAM,cAAc,OAAO;AAAA;AAAA,EAEzB,OAAO,cAAgB,MAAc,cAAc,CAAC;AACtD,EAAE,IAAI,CAAC,UAAU;AAAA,EACf,KAAK,KAAK,YAAY;AAAA,EACtB;AAAA,EACA,MAAM,YAAY,IAAI;AACxB,EAAE;AAEK,SAAS,kBAAkB;AAChC,QAAM,CAAC,WAAW,SAAS,IAAI,SAAS,EAAE,GACpC,SAAS,iBAAiB,WAAW,GAAG,GAExC,OAAO,KAEP,YAAY;AAAA,IAChB,MACE,YACG,OAAO,CAAC,MAAM,EAAE,IAAI,SAAS,OAAO,YAAY,CAAC,CAAC,EAClD,IAAI,CAAC,EAAE,MAAM,KAAK,MACjB,CAAC;AAAA,MACC,QAAQ,OAAO;AAAA,MACf,WAAW;AAAA,MACX,eAAe;AAAA,MACf,KAAK;AAAA;AAAA,MAEL,CAAC,KAAK,MAAM,OAAO,MAAM;AAAA,MACzB,CAAC,OAAO;AAAA,MACR,CAAC;AAAA,QACC,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,QACV,kBAAkB;AAAA,QAClB,KAAK;AAAA,QACL,SAAS;AAAA,QAER,KACH,EAVC;AAAA,IAWH,EAnBC,OAoBF;AAAA,IACL,CAAC,MAAM;AAAA,EACT;AAEA,SACE,CAAC,OAAO,SAAS,OAAO,QAAQ,KAAK,cAAc,KAAK;AAAA,IACtD,CAAC,MAAM,OAAO,WAAW,cAAc,WAAW,YAAY,YAAY;AAAA,IAE1E,CAAC,OAAO,QAAQ,KACd,CAAC,WACC,CAAC,KAAK,cAAc,OAAO,UAAU,EAApC,KACH,EAFC,WAGH,EAJC;AAAA,EAKH,EARC;AAUL;",
+  "names": []
+}

package/dist/jsx/PopoverDemo.js

@@ -42,7 +42,7 @@ function Demo({
         "quick",
         {
           opacity: {
-            overshootClamping: true
+            overshootClamping: !0
           }
         }
       ]}

package/dist/jsx/PopoverDemo.native.js

@@ -0,0 +1,70 @@
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "@tamagui/lucide-icons";
+import {
+  Adapt,
+  Button,
+  Input,
+  Label,
+  Popover,
+  XStack,
+  YStack
+} from "tamagui";
+import { SelectDemoItem } from "./SelectDemo";
+function PopoverDemo() {
+  return <XStack space="$2" flex={1} justifyContent="center" alignItems="center">
+    <Demo placement="left" Icon={ChevronLeft} Name="left-popover" />
+    <Demo placement="bottom" Icon={ChevronDown} Name="bottom-popover" />
+    <Demo placement="top" Icon={ChevronUp} Name="top-popover" />
+    <Demo placement="right" Icon={ChevronRight} Name="right-popover" />
+  </XStack>;
+}
+function Demo({
+  Icon,
+  Name,
+  ...props
+}) {
+  return <Popover size="$5" allowFlip {...props}>
+    <Popover.Trigger asChild><Button icon={Icon} /></Popover.Trigger>
+    <Adapt when="sm" platform="touch"><Popover.Sheet modal dismissOnSnapToBottom>
+      <Popover.Sheet.Frame padding="$4"><Adapt.Contents /></Popover.Sheet.Frame>
+      <Popover.Sheet.Overlay
+        animation="lazy"
+        enterStyle={{ opacity: 0 }}
+        exitStyle={{ opacity: 0 }}
+      />
+    </Popover.Sheet></Adapt>
+    <Popover.Content
+      borderWidth={1}
+      borderColor="$borderColor"
+      enterStyle={{ y: -10, opacity: 0 }}
+      exitStyle={{ y: -10, opacity: 0 }}
+      elevate
+      animation={[
+        "quick",
+        {
+          opacity: {
+            overshootClamping: !0
+          }
+        }
+      ]}
+    >
+      <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
+      <YStack space="$3">
+        <XStack space="$3">
+          <Label size="$3" htmlFor={Name}>Name</Label>
+          <Input size="$3" id={Name} />
+        </XStack>
+        <SelectDemoItem />
+        <Popover.Close asChild><Button
+          size="$3"
+          onPress={() => {
+          }}
+        >Submit</Button></Popover.Close>
+      </YStack>
+    </Popover.Content>
+  </Popover>;
+}
+export {
+  Demo,
+  PopoverDemo
+};
+//# sourceMappingURL=PopoverDemo.js.map

package/dist/jsx/PopoverDemo.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/PopoverDemo.tsx"],
+  "mappings": "AAAA,SAAS,aAAa,aAAa,cAAc,iBAAiB;AAClE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,sBAAsB;AAExB,SAAS,cAAc;AAC5B,SACE,CAAC,OAAO,MAAM,KAAK,MAAM,GAAG,eAAe,SAAS,WAAW;AAAA,IAC7D,CAAC,KAAK,UAAU,OAAO,MAAM,aAAa,KAAK,eAAe;AAAA,IAC9D,CAAC,KAAK,UAAU,SAAS,MAAM,aAAa,KAAK,iBAAiB;AAAA,IAClE,CAAC,KAAK,UAAU,MAAM,MAAM,WAAW,KAAK,cAAc;AAAA,IAC1D,CAAC,KAAK,UAAU,QAAQ,MAAM,cAAc,KAAK,gBAAgB;AAAA,EACnE,EALC;AAOL;AAEO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,SACE,CAAC,QAAQ,KAAK,KAAK,cAAc;AAAA,IAC/B,CAAC,QAAQ,QAAQ,QACf,CAAC,OAAO,MAAM,MAAM,EACtB,EAFC,QAAQ;AAAA,IAIT,CAAC,MAAM,KAAK,KAAK,SAAS,QACxB,CAAC,QAAQ,MAAM,MAAM;AAAA,MACnB,CAAC,QAAQ,MAAM,MAAM,QAAQ,KAC3B,CAAC,MAAM,SAAS,EAClB,EAFC,QAAQ,MAAM;AAAA,MAGf,CAAC,QAAQ,MAAM;AAAA,QACb,UAAU;AAAA,QACV,YAAY,EAAE,SAAS,EAAE;AAAA,QACzB,WAAW,EAAE,SAAS,EAAE;AAAA,MAC1B;AAAA,IACF,EATC,QAAQ,MAUX,EAXC;AAAA,IAaD,CAAC,QAAQ;AAAA,MACP,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,YAAY,EAAE,GAAG,KAAK,SAAS,EAAE;AAAA,MACjC,WAAW,EAAE,GAAG,KAAK,SAAS,EAAE;AAAA,MAChC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,SAAS;AAAA,YACP,mBAAmB;AAAA,UACrB;AAAA,QACF;AAAA,MACF;AAAA;AAAA,MAEA,CAAC,QAAQ,MAAM,aAAa,GAAG,YAAY,eAAe;AAAA,MAE1D,CAAC,OAAO,MAAM;AAAA,QACZ,CAAC,OAAO,MAAM;AAAA,UACZ,CAAC,MAAM,KAAK,KAAK,SAAS,MAAM,IAEhC,EAFC;AAAA,UAGD,CAAC,MAAM,KAAK,KAAK,IAAI,MAAM;AAAA,QAC7B,EALC;AAAA,QAOD,CAAC,eAAe;AAAA,QAEhB,CAAC,QAAQ,MAAM,QACb,CAAC;AAAA,UACC,KAAK;AAAA,UACL,SAAS,MAAM;AAAA,UAEf;AAAA,SACD,MAED,EAPC,OAQH,EATC,QAAQ;AAAA,MAUX,EApBC;AAAA,IAqBH,EAtCC,QAAQ;AAAA,EAuCX,EAzDC;AA2DL;",
+  "names": []
+}

package/dist/jsx/ProgressDemo.js

@@ -1,16 +1,13 @@
 import { useEffect, useState } from "react";
 import { Button, Paragraph, Progress, Slider, XStack, YStack } from "tamagui";
 function ProgressDemo() {
-  const [size, setSize] = useState(4);
-  const [progress, setProgress] = useState(20);
-  const sizeProp = `$${size}`;
-  useEffect(() => {
+  const [size, setSize] = useState(4), [progress, setProgress] = useState(20), sizeProp = `$${size}`;
+  return useEffect(() => {
     const timer = setTimeout(() => setProgress(60), 1e3);
     return () => {
       clearTimeout(timer);
     };
-  }, []);
-  return <>
+  }, []), <>
     <YStack height={60} alignItems="center" space>
       <Paragraph height={30} opacity={0.5}>
         {"Size: "}

package/dist/jsx/ProgressDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ProgressDemo.tsx"],
-  "mappings": "AAAA,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,WAAW,UAAsB,QAAQ,QAAQ,cAAc;AAEzE,SAAS,eAAe;AAC7B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAClC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,QAAM,WAAW,IAAI,IAAI;AAEzB,YAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM,YAAY,EAAE,GAAG,GAAI;AACpD,WAAO,MAAM;AACX,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IACE,CAAC,OAAO,QAAQ,IAAI,WAAW,SAAS;AAAA,MACtC,CAAC,UAAU,QAAQ,IAAI,SAAS;AAAA,SAAK;AAAA,SAC5B;AAAA,MACT,EAFC;AAAA,MAGD,CAAC,SAAS,MAAM,UAAU,OAAO,UAC/B,CAAC,SAAS,UAAU,UAAU,SAAS,EACzC,EAFC;AAAA,IAGH,EAPC;AAAA,IASD,CAAC;AAAA,MACC,WAAW;AAAA,MACX;AAAA,MACA,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,MACL,MAAM,EAAE,SAAS,OAAO;AAAA;AAAA,MAExB,CAAC;AAAA,QACC,KAAK;AAAA,QACL,OAAO;AAAA,QACP,cAAc,CAAC,CAAC;AAAA,QAChB,KAAK;AAAA,QACL,KAAK;AAAA,QACL,MAAM;AAAA,QACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,kBAAQ,GAAG;AAAA,QACb;AAAA;AAAA,QAEA,CAAC,OAAO,MAAM,aAAa,GAAG,YAAY,UACxC,CAAC,OAAO,YAAY,EACtB,EAFC,OAAO;AAAA,QAGR,CAAC,OAAO,MAAM,SAAS,OAAO,GAAG;AAAA,MACnC,EAfC;AAAA,MAiBD,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG,GAAG,IAE3E,EAFC;AAAA,IAGH,EA5BC;AAAA,EA6BH;AAEJ;",
+  "mappings": "AAAA,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,WAAW,UAAsB,QAAQ,QAAQ,cAAc;AAEzE,SAAS,eAAe;AAC7B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC,GAC5B,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE,GACrC,WAAW,IAAI,IAAI;AAEzB,mBAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM,YAAY,EAAE,GAAG,GAAI;AACpD,WAAO,MAAM;AACX,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC,GAGH;AAAA,IACE,CAAC,OAAO,QAAQ,IAAI,WAAW,SAAS;AAAA,MACtC,CAAC,UAAU,QAAQ,IAAI,SAAS;AAAA,SAAK;AAAA,SAC5B;AAAA,MACT,EAFC;AAAA,MAGD,CAAC,SAAS,MAAM,UAAU,OAAO,UAC/B,CAAC,SAAS,UAAU,UAAU,SAAS,EACzC,EAFC;AAAA,IAGH,EAPC;AAAA,IASD,CAAC;AAAA,MACC,WAAW;AAAA,MACX;AAAA,MACA,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,MACL,MAAM,EAAE,SAAS,OAAO;AAAA;AAAA,MAExB,CAAC;AAAA,QACC,KAAK;AAAA,QACL,OAAO;AAAA,QACP,cAAc,CAAC,CAAC;AAAA,QAChB,KAAK;AAAA,QACL,KAAK;AAAA,QACL,MAAM;AAAA,QACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,kBAAQ,GAAG;AAAA,QACb;AAAA;AAAA,QAEA,CAAC,OAAO,MAAM,aAAa,GAAG,YAAY,UACxC,CAAC,OAAO,YAAY,EACtB,EAFC,OAAO;AAAA,QAGR,CAAC,OAAO,MAAM,SAAS,OAAO,GAAG;AAAA,MACnC,EAfC;AAAA,MAiBD,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG,GAAG,IAE3E,EAFC;AAAA,IAGH,EA5BC;AAAA,EA6BH;AAEJ;",
   "names": []
 }

package/dist/jsx/ProgressDemo.native.js

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+import { Button, Paragraph, Progress, Slider, XStack, YStack } from "tamagui";
+function ProgressDemo() {
+  const [size, setSize] = useState(4), [progress, setProgress] = useState(20), sizeProp = `$${size}`;
+  return useEffect(() => {
+    const timer = setTimeout(() => setProgress(60), 1e3);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, []), <>
+    <YStack height={60} alignItems="center" space>
+      <Paragraph height={30} opacity={0.5}>
+        {"Size: "}
+        {size}
+      </Paragraph>
+      <Progress size={sizeProp} value={progress}><Progress.Indicator animation="bouncy" /></Progress>
+    </YStack>
+    <XStack
+      alignItems="center"
+      space
+      position="absolute"
+      bottom="$3"
+      left="$4"
+      $xxs={{ display: "none" }}
+    >
+      <Slider
+        size="$2"
+        width={130}
+        defaultValue={[4]}
+        min={2}
+        max={6}
+        step={1}
+        onValueChange={([val]) => {
+          setSize(val);
+        }}
+      >
+        <Slider.Track borderWidth={1} borderColor="$color5"><Slider.TrackActive /></Slider.Track>
+        <Slider.Thumb circular index={0} />
+      </Slider>
+      <Button size="$2" onPress={() => setProgress((prev) => (prev + 20) % 100)}>Load</Button>
+    </XStack>
+  </>;
+}
+export {
+  ProgressDemo
+};
+//# sourceMappingURL=ProgressDemo.js.map

package/dist/jsx/ProgressDemo.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/ProgressDemo.tsx"],
+  "mappings": "AAAA,SAAS,WAAW,gBAAgB;AACpC,SAAS,QAAQ,WAAW,UAAsB,QAAQ,QAAQ,cAAc;AAEzE,SAAS,eAAe;AAC7B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC,GAC5B,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE,GACrC,WAAW,IAAI,IAAI;AAEzB,mBAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM,YAAY,EAAE,GAAG,GAAI;AACpD,WAAO,MAAM;AACX,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC,GAGH;AAAA,IACE,CAAC,OAAO,QAAQ,IAAI,WAAW,SAAS;AAAA,MACtC,CAAC,UAAU,QAAQ,IAAI,SAAS;AAAA,SAAK;AAAA,SAC5B;AAAA,MACT,EAFC;AAAA,MAGD,CAAC,SAAS,MAAM,UAAU,OAAO,UAC/B,CAAC,SAAS,UAAU,UAAU,SAAS,EACzC,EAFC;AAAA,IAGH,EAPC;AAAA,IASD,CAAC;AAAA,MACC,WAAW;AAAA,MACX;AAAA,MACA,SAAS;AAAA,MACT,OAAO;AAAA,MACP,KAAK;AAAA,MACL,MAAM,EAAE,SAAS,OAAO;AAAA;AAAA,MAExB,CAAC;AAAA,QACC,KAAK;AAAA,QACL,OAAO;AAAA,QACP,cAAc,CAAC,CAAC;AAAA,QAChB,KAAK;AAAA,QACL,KAAK;AAAA,QACL,MAAM;AAAA,QACN,eAAe,CAAC,CAAC,GAAG,MAAM;AACxB,kBAAQ,GAAG;AAAA,QACb;AAAA;AAAA,QAEA,CAAC,OAAO,MAAM,aAAa,GAAG,YAAY,UACxC,CAAC,OAAO,YAAY,EACtB,EAFC,OAAO;AAAA,QAGR,CAAC,OAAO,MAAM,SAAS,OAAO,GAAG;AAAA,MACnC,EAfC;AAAA,MAiBD,CAAC,OAAO,KAAK,KAAK,SAAS,MAAM,YAAY,CAAC,UAAU,OAAO,MAAM,GAAG,GAAG,IAE3E,EAFC;AAAA,IAGH,EA5BC;AAAA,EA6BH;AAEJ;",
+  "names": []
+}

package/dist/jsx/RadioGroupDemo.native.js

@@ -0,0 +1,20 @@
+import { Label, RadioGroup, XStack, YStack } from "tamagui";
+function RadioGroupDemo() {
+  return <RadioGroup defaultValue="3" name="form"><YStack width={300} alignItems="center" space="$2">
+    <RadioGroupItemWithLabel size="$3" value="2" label="Second value" />
+    <RadioGroupItemWithLabel size="$4" value="3" label="Third value" />
+    <RadioGroupItemWithLabel size="$5" value="4" label="Fourth value" />
+  </YStack></RadioGroup>;
+}
+function RadioGroupItemWithLabel(props) {
+  const id = `radiogroup-${props.value}`;
+  return <XStack width={300} alignItems="center" space="$4">
+    <RadioGroup.Item value={props.value} id={id} size={props.size}><RadioGroup.Indicator /></RadioGroup.Item>
+    <Label size={props.size} htmlFor={id}>{props.label}</Label>
+  </XStack>;
+}
+export {
+  RadioGroupDemo,
+  RadioGroupItemWithLabel
+};
+//# sourceMappingURL=RadioGroupDemo.js.map

package/dist/jsx/RadioGroupDemo.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/RadioGroupDemo.tsx"],
+  "mappings": "AAAA,SAAS,OAAO,YAAwC,QAAQ,cAAc;AAEvE,SAAS,iBAAiB;AAC/B,SACE,CAAC,WAAW,aAAa,IAAI,KAAK,OAChC,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC,wBAAwB,KAAK,KAAK,MAAM,IAAI,MAAM,eAAe;AAAA,IAClE,CAAC,wBAAwB,KAAK,KAAK,MAAM,IAAI,MAAM,cAAc;AAAA,IACjE,CAAC,wBAAwB,KAAK,KAAK,MAAM,IAAI,MAAM,eAAe;AAAA,EACpE,EAJC,OAKH,EANC;AAQL;AAEO,SAAS,wBAAwB,OAIrC;AACD,QAAM,KAAK,cAAc,MAAM,KAAK;AACpC,SACE,CAAC,OAAO,OAAO,KAAK,WAAW,SAAS,MAAM;AAAA,IAC5C,CAAC,WAAW,KAAK,OAAO,MAAM,OAAO,IAAI,IAAI,MAAM,MAAM,MACvD,CAAC,WAAW,UAAU,EACxB,EAFC,WAAW;AAAA,IAIZ,CAAC,MAAM,MAAM,MAAM,MAAM,SAAS,KAC/B,MAAM,MACT,EAFC;AAAA,EAGH,EARC;AAUL;",
+  "names": []
+}

package/dist/jsx/ReplaceThemeDemo.js

@@ -10,20 +10,17 @@ import {
   useIsomorphicLayoutEffect
 } from "tamagui";
 function ReplaceThemeDemo() {
-  const [theme, setTheme] = useState();
-  const update = useForceUpdate();
-  useIsomorphicLayoutEffect(() => {
+  const [theme, setTheme] = useState(), update = useForceUpdate();
+  return useIsomorphicLayoutEffect(() => {
     addTheme({
       name: "mytheme",
-      insertCSS: true,
+      insertCSS: !0,
       theme: {
         color: "red",
         color2: "green"
       }
-    });
-    setTheme("mytheme");
-  }, []);
-  return <YStack alignItems="center" space>
+    }), setTheme("mytheme");
+  }, []), <YStack alignItems="center" space>
     <XStack gap="$5"><Theme name={theme ?? null}><Square borderRadius="$8" size={100} backgroundColor="$color" /></Theme></XStack>
     <Button
       onPress={() => {
@@ -32,8 +29,7 @@ function ReplaceThemeDemo() {
           theme: {
             color: "blue"
           }
-        });
-        update();
+        }), update();
       }}
     >Replace theme to only have $color: blue</Button>
   </YStack>;

package/dist/jsx/ReplaceThemeDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/ReplaceThemeDemo.tsx"],
-  "mappings": "AAAA,SAAS,UAAU,oBAAoB;AACvC,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,mBAAmB;AACjC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAc;AACxC,QAAM,SAAS,eAAe;AAE9B,4BAA0B,MAAM;AAC9B,aAAS;AAAA,MACP,MAAM;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,IACF,CAAC;AACD,aAAS,SAAS;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,SACE,CAAC,OAAO,WAAW,SAAS;AAAA,IAC1B,CAAC,OAAO,IAAI,KACV,CAAC,MAAM,MAAM,SAAS,MACpB,CAAC,OAAO,aAAa,KAAK,MAAM,KAAK,gBAAgB,SAAS,EAChE,EAFC,MAGH,EAJC;AAAA,IAMD,CAAC;AAAA,MACC,SAAS,MAAM;AACb,qBAAa;AAAA,UACX,MAAM;AAAA,UACN,OAAO;AAAA,YACL,OAAO;AAAA,UACT;AAAA,QACF,CAAC;AACD,eAAO;AAAA,MACT;AAAA,KACD,uCAED,EAZC;AAAA,EAaH,EApBC;AAsBL;",
+  "mappings": "AAAA,SAAS,UAAU,oBAAoB;AACvC,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,mBAAmB;AACjC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAc,GAClC,SAAS,eAAe;AAE9B,mCAA0B,MAAM;AAC9B,aAAS;AAAA,MACP,MAAM;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,IACF,CAAC,GACD,SAAS,SAAS;AAAA,EACpB,GAAG,CAAC,CAAC,GAGH,CAAC,OAAO,WAAW,SAAS;AAAA,IAC1B,CAAC,OAAO,IAAI,KACV,CAAC,MAAM,MAAM,SAAS,MACpB,CAAC,OAAO,aAAa,KAAK,MAAM,KAAK,gBAAgB,SAAS,EAChE,EAFC,MAGH,EAJC;AAAA,IAMD,CAAC;AAAA,MACC,SAAS,MAAM;AACb,qBAAa;AAAA,UACX,MAAM;AAAA,UACN,OAAO;AAAA,YACL,OAAO;AAAA,UACT;AAAA,QACF,CAAC,GACD,OAAO;AAAA,MACT;AAAA,KACD,uCAED,EAZC;AAAA,EAaH,EApBC;AAsBL;",
   "names": []
 }

package/dist/jsx/ReplaceThemeDemo.native.js

@@ -0,0 +1,40 @@
+import { addTheme, replaceTheme } from "@tamagui/theme";
+import { useState } from "react";
+import {
+  Button,
+  Square,
+  Theme,
+  XStack,
+  YStack,
+  useForceUpdate,
+  useIsomorphicLayoutEffect
+} from "tamagui";
+function ReplaceThemeDemo() {
+  const [theme, setTheme] = useState(), update = useForceUpdate();
+  return useIsomorphicLayoutEffect(() => {
+    addTheme({
+      name: "mytheme",
+      insertCSS: !0,
+      theme: {
+        color: "red",
+        color2: "green"
+      }
+    }), setTheme("mytheme");
+  }, []), <YStack alignItems="center" space>
+    <XStack gap="$5"><Theme name={theme ?? null}><Square borderRadius="$8" size={100} backgroundColor="$color" /></Theme></XStack>
+    <Button
+      onPress={() => {
+        replaceTheme({
+          name: "mytheme",
+          theme: {
+            color: "blue"
+          }
+        }), update();
+      }}
+    >Replace theme to only have $color: blue</Button>
+  </YStack>;
+}
+export {
+  ReplaceThemeDemo
+};
+//# sourceMappingURL=ReplaceThemeDemo.js.map

package/dist/jsx/ReplaceThemeDemo.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/ReplaceThemeDemo.tsx"],
+  "mappings": "AAAA,SAAS,UAAU,oBAAoB;AACvC,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,mBAAmB;AACjC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAc,GAClC,SAAS,eAAe;AAE9B,mCAA0B,MAAM;AAC9B,aAAS;AAAA,MACP,MAAM;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,IACF,CAAC,GACD,SAAS,SAAS;AAAA,EACpB,GAAG,CAAC,CAAC,GAGH,CAAC,OAAO,WAAW,SAAS;AAAA,IAC1B,CAAC,OAAO,IAAI,KACV,CAAC,MAAM,MAAM,SAAS,MACpB,CAAC,OAAO,aAAa,KAAK,MAAM,KAAK,gBAAgB,SAAS,EAChE,EAFC,MAGH,EAJC;AAAA,IAMD,CAAC;AAAA,MACC,SAAS,MAAM;AACb,qBAAa;AAAA,UACX,MAAM;AAAA,UACN,OAAO;AAAA,YACL,OAAO;AAAA,UACT;AAAA,QACF,CAAC,GACD,OAAO;AAAA,MACT;AAAA,KACD,uCAED,EAZC;AAAA,EAaH,EApBC;AAsBL;",
+  "names": []
+}

package/dist/jsx/ScrollViewDemo.native.js

@@ -0,0 +1,23 @@
+import { Circle, ScrollView, Square, XStack } from "tamagui";
+function ScrollViewDemo() {
+  return <ScrollView
+    maxHeight={250}
+    width="75%"
+    backgroundColor="$background"
+    padding="$4"
+    borderRadius="$4"
+  ><XStack flexWrap="wrap" alignItems="center" justifyContent="center">
+    <Square margin="$4" size={120} backgroundColor="$red9" />
+    <Circle margin="$4" size={120} backgroundColor="$orange9" />
+    <Square margin="$4" size={120} backgroundColor="$yellow9" />
+    <Circle margin="$4" size={120} backgroundColor="$green9" />
+    <Square margin="$4" size={120} backgroundColor="$blue9" />
+    <Circle margin="$4" size={120} backgroundColor="$purple9" />
+    <Square margin="$4" size={120} backgroundColor="$pink9" />
+    <Circle margin="$4" size={120} backgroundColor="$red9" />
+  </XStack></ScrollView>;
+}
+export {
+  ScrollViewDemo
+};
+//# sourceMappingURL=ScrollViewDemo.js.map

package/dist/jsx/ScrollViewDemo.native.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/ScrollViewDemo.tsx"],
+  "mappings": "AAAA,SAAS,QAAQ,YAAY,QAAQ,cAAc;AAE5C,SAAS,iBAAiB;AAC/B,SACE,CAAC;AAAA,IACC,WAAW;AAAA,IACX,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,aAAa;AAAA,GAEb,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,EAjBC;AAmBL;",
+  "names": []
+}

package/dist/jsx/SelectDemo.js

@@ -70,16 +70,14 @@ function SelectDemoItem(props) {
             /* for longer lists memoizing these is useful */
           }
           {useMemo(
-            () => items.map((item, i) => {
-              return <Select.Item
-                index={i}
-                key={item.name}
-                value={item.name.toLowerCase()}
-              >
-                <Select.ItemText>{item.name}</Select.ItemText>
-                <Select.ItemIndicator marginLeft="auto"><Check size={16} /></Select.ItemIndicator>
-              </Select.Item>;
-            }),
+            () => items.map((item, i) => <Select.Item
+              index={i}
+              key={item.name}
+              value={item.name.toLowerCase()}
+            >
+              <Select.ItemText>{item.name}</Select.ItemText>
+              <Select.ItemIndicator marginLeft="auto"><Check size={16} /></Select.ItemIndicator>
+            </Select.Item>),
             [items]
           )}
         </Select.Group>

package/dist/jsx/SelectDemo.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/SelectDemo.tsx"],
-  "mappings": "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",
+  "mappings": "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",
   "names": []
 }