@tamagui/demos 2.0.0-rc.9 → 2.0.0

package/dist/cjs/TabsAdvancedDemo.cjs

@@ -2,304 +2,325 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 var TabsAdvancedDemo_exports = {};
 __export(TabsAdvancedDemo_exports, {
   TabsAdvancedDemo: () => TabsAdvancedDemo
 });
 module.exports = __toCommonJS(TabsAdvancedDemo_exports);
-var import_react = __toESM(require("react"), 1),
-  import_tamagui = require("tamagui"),
-  import_jsx_runtime = require("react/jsx-runtime");
-const demos = ["background", "underline"],
-  demosTitle = {
-    background: "Background Indicator",
-    underline: "Underline Indicator"
-  },
-  TabsAdvancedDemo = () => {
-    const [demoIndex, setDemoIndex] = import_react.default.useState(0),
-      demo = demos[demoIndex];
-    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-      children: [demo === "underline" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsAdvancedUnderline, {}) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsAdvancedBackground, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-        items: "center",
-        gap: "$4",
-        position: "absolute",
-        b: "$3",
-        l: "$4",
-        $xxs: {
-          display: "none"
-        },
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
-          size: "$2",
-          onPress: () => setDemoIndex(x => (x + 1) % demos.length),
-          children: demosTitle[demo]
+var import_react = __toESM(require("react"), 1);
+var import_tamagui = require("tamagui");
+var import_jsx_runtime = require("react/jsx-runtime");
+const demos = ["background", "underline"];
+const demosTitle = {
+  background: "Background Indicator",
+  underline: "Underline Indicator"
+};
+const TabsAdvancedDemo = () => {
+  const [demoIndex, setDemoIndex] = import_react.default.useState(0);
+  const demo = demos[demoIndex];
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [demo === "underline" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsAdvancedUnderline, {}) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsAdvancedBackground, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      items: "center",
+      gap: "$4",
+      position: "absolute",
+      b: "$3",
+      l: "$4",
+      $xxs: {
+        display: "none"
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+        size: "$2",
+        onPress: () => setDemoIndex(x => (x + 1) % demos.length),
+        children: demosTitle[demo]
+      })
+    })]
+  });
+};
+const TabsAdvancedBackground = () => {
+  const [tabState, setTabState] = import_react.default.useState({
+    activeAt: null,
+    currentTab: "tab1",
+    intentAt: null,
+    prevActiveAt: null
+  });
+  const setCurrentTab = currentTab2 => setTabState({
+    ...tabState,
+    currentTab: currentTab2
+  });
+  const setIntentIndicator = intentAt2 => setTabState({
+    ...tabState,
+    intentAt: intentAt2
+  });
+  const setActiveIndicator = activeAt2 => setTabState({
+    ...tabState,
+    prevActiveAt: tabState.activeAt,
+    activeAt: activeAt2
+  });
+  const {
+    activeAt,
+    intentAt,
+    prevActiveAt,
+    currentTab
+  } = tabState;
+  const direction = (() => {
+    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
+      return 0;
+    }
+    return activeAt.x > prevActiveAt.x ? -1 : 1;
+  })();
+  const handleOnInteraction = (type, layout) => {
+    if (type === "select") {
+      setActiveIndicator(layout);
+    } else {
+      setIntentIndicator(layout);
+    }
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tabs, {
+    value: currentTab,
+    onValueChange: setCurrentTab,
+    orientation: "horizontal",
+    size: "$4",
+    p: "$2",
+    height: 150,
+    flexDirection: "column",
+    activationMode: "manual",
+    bg: "$background",
+    rounded: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
+      children: intentAt && /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
+        rounded: "$4",
+        width: intentAt.width,
+        height: intentAt.height,
+        x: intentAt.x,
+        y: intentAt.y
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
+      children: activeAt && /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
+        rounded: "$4",
+        theme: "accent",
+        width: activeAt.width,
+        height: activeAt.height,
+        x: activeAt.x,
+        y: activeAt.y
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      position: "relative",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, {
+        loop: false,
+        "aria-label": "Manage your account",
+        gap: "$2",
+        backgroundColor: "transparent",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+          unstyled: true,
+          paddingHorizontal: "$3",
+          value: "tab1",
+          onInteraction: handleOnInteraction,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+            children: "Profile"
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+          unstyled: true,
+          paddingHorizontal: "$3",
+          value: "tab2",
+          onInteraction: handleOnInteraction,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+            children: "Connections"
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+          unstyled: true,
+          paddingHorizontal: "$3",
+          value: "tab3",
+          onInteraction: handleOnInteraction,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+            children: "Notifications"
+          })
+        })]
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
+      exitBeforeEnter: true,
+      custom: {
+        direction
+      },
+      initial: false,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedYStack, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, {
+          value: currentTab,
+          forceMount: true,
+          flex: 1,
+          justify: "center",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H5, {
+            text: "center",
+            children: currentTab
+          })
         })
-      })]
-    });
-  },
-  TabsAdvancedBackground = () => {
-    const [tabState, setTabState] = import_react.default.useState({
-        activeAt: null,
-        currentTab: "tab1",
-        intentAt: null,
-        prevActiveAt: null
-      }),
-      setCurrentTab = currentTab2 => setTabState({
-        ...tabState,
-        currentTab: currentTab2
-      }),
-      setIntentIndicator = intentAt2 => setTabState({
-        ...tabState,
-        intentAt: intentAt2
-      }),
-      setActiveIndicator = activeAt2 => setTabState({
-        ...tabState,
-        prevActiveAt: tabState.activeAt,
-        activeAt: activeAt2
-      }),
-      {
-        activeAt,
-        intentAt,
-        prevActiveAt,
-        currentTab
-      } = tabState,
-      direction = !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1,
-      handleOnInteraction = (type, layout) => {
-        type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
-      };
-    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tabs, {
-      value: currentTab,
-      onValueChange: setCurrentTab,
-      orientation: "horizontal",
-      size: "$4",
-      p: "$2",
-      height: 150,
-      flexDirection: "column",
-      activationMode: "manual",
-      bg: "$background",
-      rounded: "$4",
+      }, currentTab)
+    })]
+  });
+};
+const TabsAdvancedUnderline = () => {
+  const [tabState, setTabState] = import_react.default.useState({
+    activeAt: null,
+    currentTab: "tab1",
+    intentAt: null,
+    prevActiveAt: null
+  });
+  const setCurrentTab = currentTab2 => setTabState({
+    ...tabState,
+    currentTab: currentTab2
+  });
+  const setIntentIndicator = intentAt2 => setTabState({
+    ...tabState,
+    intentAt: intentAt2
+  });
+  const setActiveIndicator = activeAt2 => setTabState({
+    ...tabState,
+    prevActiveAt: tabState.activeAt,
+    activeAt: activeAt2
+  });
+  const {
+    activeAt,
+    intentAt,
+    prevActiveAt,
+    currentTab
+  } = tabState;
+  const direction = (() => {
+    if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
+      return 0;
+    }
+    return activeAt.x > prevActiveAt.x ? -1 : 1;
+  })();
+  const handleOnInteraction = (type, layout) => {
+    if (type === "select") {
+      setActiveIndicator(layout);
+    } else {
+      setIntentIndicator(layout);
+    }
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tabs, {
+    value: currentTab,
+    onValueChange: setCurrentTab,
+    orientation: "horizontal",
+    size: "$4",
+    height: 150,
+    flexDirection: "column",
+    activationMode: "manual",
+    bg: "$background",
+    rounded: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      position: "relative",
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
         children: intentAt && /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
-          rounded: "$4",
           width: intentAt.width,
-          height: intentAt.height,
+          height: "$0.5",
           x: intentAt.x,
-          y: intentAt.y
+          b: 0
         })
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
         children: activeAt && /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
-          rounded: "$4",
           theme: "accent",
+          active: true,
           width: activeAt.width,
-          height: activeAt.height,
+          height: "$0.5",
           x: activeAt.x,
-          y: activeAt.y
+          b: 0
         })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-        position: "relative",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, {
-          loop: !1,
-          "aria-label": "Manage your account",
-          gap: "$2",
-          backgroundColor: "transparent",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
-            unstyled: !0,
-            paddingVertical: "$2",
-            paddingHorizontal: "$3",
-            value: "tab1",
-            onInteraction: handleOnInteraction,
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
-              children: "Profile"
-            })
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
-            unstyled: !0,
-            paddingVertical: "$2",
-            paddingHorizontal: "$3",
-            value: "tab2",
-            onInteraction: handleOnInteraction,
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
-              children: "Connections"
-            })
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
-            unstyled: !0,
-            paddingVertical: "$2",
-            paddingHorizontal: "$3",
-            value: "tab3",
-            onInteraction: handleOnInteraction,
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
-              children: "Notifications"
-            })
-          })]
-        })
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
-        exitBeforeEnter: !0,
-        custom: {
-          direction
-        },
-        initial: !1,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedYStack, {
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, {
-            value: currentTab,
-            forceMount: !0,
-            flex: 1,
-            justify: "center",
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H5, {
-              text: "center",
-              children: currentTab
-            })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, {
+        loop: false,
+        "aria-label": "Manage your account",
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+        paddingBottom: "$1.5",
+        borderColor: "$color3",
+        borderBottomWidth: "$0.5",
+        backgroundColor: "transparent",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+          unstyled: true,
+          paddingHorizontal: "$3",
+          value: "tab1",
+          onInteraction: handleOnInteraction,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+            select: "none",
+            cursor: "default",
+            children: "Profile"
           })
-        }, currentTab)
-      })]
-    });
-  },
-  TabsAdvancedUnderline = () => {
-    const [tabState, setTabState] = import_react.default.useState({
-        activeAt: null,
-        currentTab: "tab1",
-        intentAt: null,
-        prevActiveAt: null
-      }),
-      setCurrentTab = currentTab2 => setTabState({
-        ...tabState,
-        currentTab: currentTab2
-      }),
-      setIntentIndicator = intentAt2 => setTabState({
-        ...tabState,
-        intentAt: intentAt2
-      }),
-      setActiveIndicator = activeAt2 => setTabState({
-        ...tabState,
-        prevActiveAt: tabState.activeAt,
-        activeAt: activeAt2
-      }),
-      {
-        activeAt,
-        intentAt,
-        prevActiveAt,
-        currentTab
-      } = tabState,
-      direction = !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1,
-      handleOnInteraction = (type, layout) => {
-        type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
-      };
-    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tabs, {
-      value: currentTab,
-      onValueChange: setCurrentTab,
-      orientation: "horizontal",
-      size: "$4",
-      height: 150,
-      flexDirection: "column",
-      activationMode: "manual",
-      bg: "$background",
-      rounded: "$4",
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        position: "relative",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
-          children: intentAt && /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
-            width: intentAt.width,
-            height: "$0.5",
-            x: intentAt.x,
-            b: 0
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+          unstyled: true,
+          paddingHorizontal: "$3",
+          value: "tab2",
+          onInteraction: handleOnInteraction,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+            select: "none",
+            cursor: "default",
+            children: "Connections"
           })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
-          children: activeAt && /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsRovingIndicator, {
-            theme: "accent",
-            active: !0,
-            width: activeAt.width,
-            height: "$0.5",
-            x: activeAt.x,
-            b: 0
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
+          unstyled: true,
+          paddingHorizontal: "$3",
+          value: "tab3",
+          onInteraction: handleOnInteraction,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+            select: "none",
+            cursor: "default",
+            children: "Notifications"
           })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tabs.List, {
-          loop: !1,
-          "aria-label": "Manage your account",
-          borderBottomLeftRadius: 0,
-          borderBottomRightRadius: 0,
-          paddingBottom: "$1.5",
-          borderColor: "$color3",
-          borderBottomWidth: "$0.5",
-          backgroundColor: "transparent",
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
-            unstyled: !0,
-            paddingHorizontal: "$3",
-            paddingVertical: "$2",
-            value: "tab1",
-            onInteraction: handleOnInteraction,
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
-              children: "Profile"
-            })
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
-            unstyled: !0,
-            paddingHorizontal: "$3",
-            paddingVertical: "$2",
-            value: "tab2",
-            onInteraction: handleOnInteraction,
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
-              children: "Connections"
-            })
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Tab, {
-            unstyled: !0,
-            paddingHorizontal: "$3",
-            paddingVertical: "$2",
-            value: "tab3",
-            onInteraction: handleOnInteraction,
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
-              children: "Notifications"
-            })
-          })]
         })]
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
-        exitBeforeEnter: !0,
-        custom: {
-          direction
-        },
-        initial: !1,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedYStack, {
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, {
-            value: currentTab,
-            forceMount: !0,
-            flex: 1,
-            justify: "center",
-            flexBasis: "auto",
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H5, {
-              text: "center",
-              children: currentTab
-            })
-          })
-        }, currentTab)
       })]
-    });
-  },
-  TabsRovingIndicator = ({
-    active,
-    ...props
-  }) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.AnimatePresence, {
+      mode: "wait",
+      custom: {
+        direction
+      },
+      initial: false,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedYStack, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, {
+          value: currentTab,
+          forceMount: true,
+          flex: 1,
+          justify: "center",
+          flexBasis: "auto",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.H5, {
+            text: "center",
+            children: currentTab
+          })
+        })
+      }, currentTab)
+    })]
+  });
+};
+const TabsRovingIndicator = ({
+  active,
+  ...props
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
     position: "absolute",
     backgroundColor: "$color5",
     opacity: 0.7,
@@ -311,30 +332,31 @@ const demos = ["background", "underline"],
       opacity: 0
     },
     ...(active && {
-      backgroundColor: "$color8",
+      backgroundColor: "$color5",
       opacity: 0.6
     }),
     ...props
-  }),
-  AnimatedYStack = (0, import_tamagui.styled)(import_tamagui.YStack, {
-    flex: 1,
-    x: 0,
-    opacity: 1,
-    transition: "100ms",
-    variants: {
-      // 1 = right, 0 = nowhere, -1 = left
-      direction: {
-        ":number": direction => ({
-          enterStyle: {
-            x: direction > 0 ? -25 : 25,
-            opacity: 0
-          },
-          exitStyle: {
-            zIndex: 0,
-            x: direction < 0 ? -25 : 25,
-            opacity: 0
-          }
-        })
-      }
+  });
+};
+const AnimatedYStack = (0, import_tamagui.styled)(import_tamagui.YStack, {
+  flex: 1,
+  x: 0,
+  opacity: 1,
+  transition: "100ms",
+  variants: {
+    // 1 = right, 0 = nowhere, -1 = left
+    direction: {
+      ":number": direction => ({
+        enterStyle: {
+          x: direction > 0 ? -25 : 25,
+          opacity: 0
+        },
+        exitStyle: {
+          zIndex: 0,
+          x: direction < 0 ? -25 : 25,
+          opacity: 0
+        }
+      })
     }
-  });
+  }
+});