@tamagui/demos 1.89.26 → 1.89.27-1708112217600

package/dist/jsx/TabsAdvancedDemo.native.js

@@ -1,247 +1,318 @@
 import { useState } from "react";
-import {
-  AnimatePresence,
-  Button,
-  H5,
-  SizableText,
-  Tabs,
-  XStack,
-  YStack,
-  styled
-} from "tamagui";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-const demos = ["background", "underline"], demosTitle = {
+import { AnimatePresence, Button, H5, SizableText, Tabs, XStack, YStack, styled } from "tamagui";
+function _array_like_to_array(arr, len) {
+  (len == null || len > arr.length) && (len = arr.length);
+  for (var i = 0, arr2 = new Array(len); i < len; i++)
+    arr2[i] = arr[i];
+  return arr2;
+}
+function _array_with_holes(arr) {
+  if (Array.isArray(arr))
+    return arr;
+}
+function _define_property(obj, key, value) {
+  return key in obj ? Object.defineProperty(obj, key, {
+    value,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : obj[key] = value, obj;
+}
+function _iterable_to_array_limit(arr, i) {
+  var _i = arr == null ? null : typeof Symbol < "u" && arr[Symbol.iterator] || arr["@@iterator"];
+  if (_i != null) {
+    var _arr = [], _n = !0, _d = !1, _s, _e;
+    try {
+      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done) && (_arr.push(_s.value), !(i && _arr.length === i)); _n = !0)
+        ;
+    } catch (err) {
+      _d = !0, _e = err;
+    } finally {
+      try {
+        !_n && _i.return != null && _i.return();
+      } finally {
+        if (_d)
+          throw _e;
+      }
+    }
+    return _arr;
+  }
+}
+function _non_iterable_rest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {}, ownKeys2 = Object.keys(source);
+    typeof Object.getOwnPropertySymbols == "function" && (ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+    }))), ownKeys2.forEach(function(key) {
+      _define_property(target, key, source[key]);
+    });
+  }
+  return target;
+}
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _object_spread_props(target, source) {
+  return source = source ?? {}, Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+    Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+  }), target;
+}
+function _object_without_properties(source, excluded) {
+  if (source == null)
+    return {};
+  var target = _object_without_properties_loose(source, excluded), key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++)
+      key = sourceSymbolKeys[i], !(excluded.indexOf(key) >= 0) && Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]);
+  }
+  return target;
+}
+function _object_without_properties_loose(source, excluded) {
+  if (source == null)
+    return {};
+  var target = {}, sourceKeys = Object.keys(source), key, i;
+  for (i = 0; i < sourceKeys.length; i++)
+    key = sourceKeys[i], !(excluded.indexOf(key) >= 0) && (target[key] = source[key]);
+  return target;
+}
+function _sliced_to_array(arr, i) {
+  return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+  if (o) {
+    if (typeof o == "string")
+      return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor && (n = o.constructor.name), n === "Map" || n === "Set")
+      return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
+      return _array_like_to_array(o, minLen);
+  }
+}
+var demos = [
+  "background",
+  "underline"
+], demosTitle = {
   background: "Background Indicator",
   underline: "Underline Indicator"
-}, TabsAdvancedDemo = () => {
-  const [demoIndex, setDemoIndex] = useState(0), demo = demos[demoIndex];
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    demo === "underline" ? /* @__PURE__ */ jsx(TabsAdvancedUnderline, {}) : /* @__PURE__ */ jsx(TabsAdvancedBackground, {}),
-    /* @__PURE__ */ jsx(
-      XStack,
-      {
-        alignItems: "center",
-        space: !0,
-        position: "absolute",
-        bottom: "$3",
-        left: "$4",
-        $xxs: { display: "none" },
-        children: /* @__PURE__ */ jsx(Button, { size: "$2", onPress: () => setDemoIndex((x) => (x + 1) % demos.length), children: demosTitle[demo] })
-      }
-    )
-  ] });
-}, TabsAdvancedBackground = () => {
-  const [tabState, setTabState] = useState({
+}, TabsAdvancedDemo = function() {
+  var _useState = _sliced_to_array(useState(0), 2), demoIndex = _useState[0], setDemoIndex = _useState[1], demo = demos[demoIndex];
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, demo === "underline" ? /* @__PURE__ */ React.createElement(TabsAdvancedUnderline, null) : /* @__PURE__ */ React.createElement(TabsAdvancedBackground, null), /* @__PURE__ */ React.createElement(XStack, {
+    alignItems: "center",
+    space: !0,
+    position: "absolute",
+    bottom: "$3",
+    left: "$4",
+    $xxs: {
+      display: "none"
+    }
+  }, /* @__PURE__ */ React.createElement(Button, {
+    size: "$2",
+    onPress: function() {
+      return setDemoIndex(function(x) {
+        return (x + 1) % demos.length;
+      });
+    }
+  }, demosTitle[demo])));
+}, TabsAdvancedBackground = function() {
+  var _useState = _sliced_to_array(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, enterVariant = direction === 1 ? "isLeft" : direction === -1 ? "isRight" : "defaultFade", exitVariant = direction === 1 ? "isRight" : direction === -1 ? "isLeft" : "defaultFade", handleOnInteraction = (type, layout) => {
+  }), 2), tabState = _useState[0], setTabState = _useState[1], setCurrentTab = function(currentTab2) {
+    return setTabState(_object_spread_props(_object_spread({}, tabState), {
+      currentTab: currentTab2
+    }));
+  }, setIntentIndicator = function(intentAt2) {
+    return setTabState(_object_spread_props(_object_spread({}, tabState), {
+      intentAt: intentAt2
+    }));
+  }, setActiveIndicator = function(activeAt2) {
+    return setTabState(_object_spread_props(_object_spread({}, tabState), {
+      prevActiveAt: tabState.activeAt,
+      activeAt: activeAt2
+    }));
+  }, activeAt = tabState.activeAt, intentAt = tabState.intentAt, prevActiveAt = tabState.prevActiveAt, currentTab = tabState.currentTab, direction = function() {
+    return !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1;
+  }(), enterVariant = direction === 1 ? "isLeft" : direction === -1 ? "isRight" : "defaultFade", exitVariant = direction === 1 ? "isRight" : direction === -1 ? "isLeft" : "defaultFade", handleOnInteraction = function(type, layout) {
     type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
   };
-  return /* @__PURE__ */ jsxs(
-    Tabs,
-    {
-      value: currentTab,
-      onValueChange: setCurrentTab,
-      orientation: "horizontal",
-      size: "$4",
-      padding: "$2",
-      height: 150,
-      flexDirection: "column",
-      activationMode: "manual",
-      backgroundColor: "$background",
-      borderRadius: "$4",
-      position: "relative",
-      children: [
-        /* @__PURE__ */ jsxs(YStack, { children: [
-          /* @__PURE__ */ jsx(AnimatePresence, { children: intentAt && /* @__PURE__ */ jsx(
-            TabsRovingIndicator,
-            {
-              borderRadius: "$4",
-              width: intentAt.width,
-              height: intentAt.height,
-              x: intentAt.x,
-              y: intentAt.y
-            }
-          ) }),
-          /* @__PURE__ */ jsx(AnimatePresence, { children: activeAt && /* @__PURE__ */ jsx(
-            TabsRovingIndicator,
-            {
-              borderRadius: "$4",
-              theme: "active",
-              width: activeAt.width,
-              height: activeAt.height,
-              x: activeAt.x,
-              y: activeAt.y
-            }
-          ) }),
-          /* @__PURE__ */ jsxs(
-            Tabs.List,
-            {
-              disablePassBorderRadius: !0,
-              loop: !1,
-              "aria-label": "Manage your account",
-              gap: "$2",
-              backgroundColor: "transparent",
-              children: [
-                /* @__PURE__ */ jsx(
-                  Tabs.Tab,
-                  {
-                    unstyled: !0,
-                    paddingVertical: "$2",
-                    paddingHorizontal: "$3",
-                    value: "tab1",
-                    onInteraction: handleOnInteraction,
-                    children: /* @__PURE__ */ jsx(SizableText, { children: "Profile" })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Tabs.Tab,
-                  {
-                    unstyled: !0,
-                    paddingVertical: "$2",
-                    paddingHorizontal: "$3",
-                    value: "tab2",
-                    onInteraction: handleOnInteraction,
-                    children: /* @__PURE__ */ jsx(SizableText, { children: "Connections" })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Tabs.Tab,
-                  {
-                    unstyled: !0,
-                    paddingVertical: "$2",
-                    paddingHorizontal: "$3",
-                    value: "tab3",
-                    onInteraction: handleOnInteraction,
-                    children: /* @__PURE__ */ jsx(SizableText, { children: "Notifications" })
-                  }
-                )
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
-          AnimatePresence,
-          {
-            exitBeforeEnter: !0,
-            enterVariant,
-            exitVariant,
-            children: /* @__PURE__ */ jsx(AnimatedYStack, { animation: "100ms", x: 0, opacity: 1, flex: 1, children: /* @__PURE__ */ jsx(Tabs.Content, { value: currentTab, forceMount: !0, flex: 1, justifyContent: "center", children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: currentTab }) }) }, currentTab)
-          }
-        )
-      ]
-    }
-  );
-}, TabsAdvancedUnderline = () => {
-  const [tabState, setTabState] = useState({
+  return /* @__PURE__ */ React.createElement(Tabs, {
+    value: currentTab,
+    onValueChange: setCurrentTab,
+    orientation: "horizontal",
+    size: "$4",
+    padding: "$2",
+    height: 150,
+    flexDirection: "column",
+    activationMode: "manual",
+    backgroundColor: "$background",
+    borderRadius: "$4",
+    position: "relative"
+  }, /* @__PURE__ */ React.createElement(YStack, null, /* @__PURE__ */ React.createElement(AnimatePresence, null, intentAt && /* @__PURE__ */ React.createElement(TabsRovingIndicator, {
+    borderRadius: "$4",
+    width: intentAt.width,
+    height: intentAt.height,
+    x: intentAt.x,
+    y: intentAt.y
+  })), /* @__PURE__ */ React.createElement(AnimatePresence, null, activeAt && /* @__PURE__ */ React.createElement(TabsRovingIndicator, {
+    borderRadius: "$4",
+    theme: "active",
+    width: activeAt.width,
+    height: activeAt.height,
+    x: activeAt.x,
+    y: activeAt.y
+  })), /* @__PURE__ */ React.createElement(Tabs.List, {
+    disablePassBorderRadius: !0,
+    loop: !1,
+    "aria-label": "Manage your account",
+    gap: "$2",
+    backgroundColor: "transparent"
+  }, /* @__PURE__ */ React.createElement(Tabs.Tab, {
+    unstyled: !0,
+    paddingVertical: "$2",
+    paddingHorizontal: "$3",
+    value: "tab1",
+    onInteraction: handleOnInteraction
+  }, /* @__PURE__ */ React.createElement(SizableText, null, "Profile")), /* @__PURE__ */ React.createElement(Tabs.Tab, {
+    unstyled: !0,
+    paddingVertical: "$2",
+    paddingHorizontal: "$3",
+    value: "tab2",
+    onInteraction: handleOnInteraction
+  }, /* @__PURE__ */ React.createElement(SizableText, null, "Connections")), /* @__PURE__ */ React.createElement(Tabs.Tab, {
+    unstyled: !0,
+    paddingVertical: "$2",
+    paddingHorizontal: "$3",
+    value: "tab3",
+    onInteraction: handleOnInteraction
+  }, /* @__PURE__ */ React.createElement(SizableText, null, "Notifications")))), /* @__PURE__ */ React.createElement(AnimatePresence, {
+    exitBeforeEnter: !0,
+    enterVariant,
+    exitVariant
+  }, /* @__PURE__ */ React.createElement(AnimatedYStack, {
+    key: currentTab,
+    animation: "100ms",
+    x: 0,
+    opacity: 1,
+    flex: 1
+  }, /* @__PURE__ */ React.createElement(Tabs.Content, {
+    value: currentTab,
+    forceMount: !0,
+    flex: 1,
+    justifyContent: "center"
+  }, /* @__PURE__ */ React.createElement(H5, {
+    textAlign: "center"
+  }, currentTab)))));
+}, TabsAdvancedUnderline = function() {
+  var _useState = _sliced_to_array(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, enterVariant = direction === 1 ? "isLeft" : direction === -1 ? "isRight" : "defaultFade", exitVariant = direction === 1 ? "isRight" : direction === -1 ? "isLeft" : "defaultFade", handleOnInteraction = (type, layout) => {
+  }), 2), tabState = _useState[0], setTabState = _useState[1], setCurrentTab = function(currentTab2) {
+    return setTabState(_object_spread_props(_object_spread({}, tabState), {
+      currentTab: currentTab2
+    }));
+  }, setIntentIndicator = function(intentAt2) {
+    return setTabState(_object_spread_props(_object_spread({}, tabState), {
+      intentAt: intentAt2
+    }));
+  }, setActiveIndicator = function(activeAt2) {
+    return setTabState(_object_spread_props(_object_spread({}, tabState), {
+      prevActiveAt: tabState.activeAt,
+      activeAt: activeAt2
+    }));
+  }, activeAt = tabState.activeAt, intentAt = tabState.intentAt, prevActiveAt = tabState.prevActiveAt, currentTab = tabState.currentTab, direction = function() {
+    return !activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x ? 0 : activeAt.x > prevActiveAt.x ? -1 : 1;
+  }(), enterVariant = direction === 1 ? "isLeft" : direction === -1 ? "isRight" : "defaultFade", exitVariant = direction === 1 ? "isRight" : direction === -1 ? "isLeft" : "defaultFade", handleOnInteraction = function(type, layout) {
     type === "select" ? setActiveIndicator(layout) : setIntentIndicator(layout);
   };
-  return /* @__PURE__ */ jsxs(
-    Tabs,
-    {
-      value: currentTab,
-      onValueChange: setCurrentTab,
-      orientation: "horizontal",
-      size: "$4",
-      height: 150,
-      flexDirection: "column",
-      activationMode: "manual",
-      backgroundColor: "$background",
-      borderRadius: "$4",
-      children: [
-        /* @__PURE__ */ jsxs(YStack, { children: [
-          /* @__PURE__ */ jsx(AnimatePresence, { children: intentAt && /* @__PURE__ */ jsx(
-            TabsRovingIndicator,
-            {
-              width: intentAt.width,
-              height: "$0.5",
-              x: intentAt.x,
-              bottom: 0
-            }
-          ) }),
-          /* @__PURE__ */ jsx(AnimatePresence, { children: activeAt && /* @__PURE__ */ jsx(
-            TabsRovingIndicator,
-            {
-              theme: "active",
-              active: !0,
-              width: activeAt.width,
-              height: "$0.5",
-              x: activeAt.x,
-              bottom: 0
-            }
-          ) }),
-          /* @__PURE__ */ jsxs(
-            Tabs.List,
-            {
-              disablePassBorderRadius: !0,
-              loop: !1,
-              "aria-label": "Manage your account",
-              borderBottomLeftRadius: 0,
-              borderBottomRightRadius: 0,
-              paddingBottom: "$1.5",
-              borderColor: "$color3",
-              borderBottomWidth: "$0.5",
-              backgroundColor: "transparent",
-              children: [
-                /* @__PURE__ */ jsx(
-                  Tabs.Tab,
-                  {
-                    unstyled: !0,
-                    paddingHorizontal: "$3",
-                    paddingVertical: "$2",
-                    value: "tab1",
-                    onInteraction: handleOnInteraction,
-                    children: /* @__PURE__ */ jsx(SizableText, { children: "Profile" })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Tabs.Tab,
-                  {
-                    unstyled: !0,
-                    paddingHorizontal: "$3",
-                    paddingVertical: "$2",
-                    value: "tab2",
-                    onInteraction: handleOnInteraction,
-                    children: /* @__PURE__ */ jsx(SizableText, { children: "Connections" })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Tabs.Tab,
-                  {
-                    unstyled: !0,
-                    paddingHorizontal: "$3",
-                    paddingVertical: "$2",
-                    value: "tab3",
-                    onInteraction: handleOnInteraction,
-                    children: /* @__PURE__ */ jsx(SizableText, { children: "Notifications" })
-                  }
-                )
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
-          AnimatePresence,
-          {
-            exitBeforeEnter: !0,
-            enterVariant,
-            exitVariant,
-            children: /* @__PURE__ */ jsx(AnimatedYStack, { animation: "100ms", x: 0, opacity: 1, flex: 1, children: /* @__PURE__ */ jsx(Tabs.Content, { value: currentTab, forceMount: !0, flex: 1, justifyContent: "center", children: /* @__PURE__ */ jsx(H5, { textAlign: "center", children: currentTab }) }) }, currentTab)
-          }
-        )
-      ]
-    }
-  );
-}, TabsRovingIndicator = ({ active, ...props }) => /* @__PURE__ */ jsx(
-  YStack,
-  {
+  return /* @__PURE__ */ React.createElement(Tabs, {
+    value: currentTab,
+    onValueChange: setCurrentTab,
+    orientation: "horizontal",
+    size: "$4",
+    height: 150,
+    flexDirection: "column",
+    activationMode: "manual",
+    backgroundColor: "$background",
+    borderRadius: "$4"
+  }, /* @__PURE__ */ React.createElement(YStack, null, /* @__PURE__ */ React.createElement(AnimatePresence, null, intentAt && /* @__PURE__ */ React.createElement(TabsRovingIndicator, {
+    width: intentAt.width,
+    height: "$0.5",
+    x: intentAt.x,
+    bottom: 0
+  })), /* @__PURE__ */ React.createElement(AnimatePresence, null, activeAt && /* @__PURE__ */ React.createElement(TabsRovingIndicator, {
+    theme: "active",
+    active: !0,
+    width: activeAt.width,
+    height: "$0.5",
+    x: activeAt.x,
+    bottom: 0
+  })), /* @__PURE__ */ React.createElement(Tabs.List, {
+    disablePassBorderRadius: !0,
+    loop: !1,
+    "aria-label": "Manage your account",
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    paddingBottom: "$1.5",
+    borderColor: "$color3",
+    borderBottomWidth: "$0.5",
+    backgroundColor: "transparent"
+  }, /* @__PURE__ */ React.createElement(Tabs.Tab, {
+    unstyled: !0,
+    paddingHorizontal: "$3",
+    paddingVertical: "$2",
+    value: "tab1",
+    onInteraction: handleOnInteraction
+  }, /* @__PURE__ */ React.createElement(SizableText, null, "Profile")), /* @__PURE__ */ React.createElement(Tabs.Tab, {
+    unstyled: !0,
+    paddingHorizontal: "$3",
+    paddingVertical: "$2",
+    value: "tab2",
+    onInteraction: handleOnInteraction
+  }, /* @__PURE__ */ React.createElement(SizableText, null, "Connections")), /* @__PURE__ */ React.createElement(Tabs.Tab, {
+    unstyled: !0,
+    paddingHorizontal: "$3",
+    paddingVertical: "$2",
+    value: "tab3",
+    onInteraction: handleOnInteraction
+  }, /* @__PURE__ */ React.createElement(SizableText, null, "Notifications")))), /* @__PURE__ */ React.createElement(AnimatePresence, {
+    exitBeforeEnter: !0,
+    enterVariant,
+    exitVariant
+  }, /* @__PURE__ */ React.createElement(AnimatedYStack, {
+    key: currentTab,
+    animation: "100ms",
+    x: 0,
+    opacity: 1,
+    flex: 1
+  }, /* @__PURE__ */ React.createElement(Tabs.Content, {
+    value: currentTab,
+    forceMount: !0,
+    flex: 1,
+    justifyContent: "center"
+  }, /* @__PURE__ */ React.createElement(H5, {
+    textAlign: "center"
+  }, currentTab)))));
+}, TabsRovingIndicator = function(_param) {
+  var active = _param.active, props = _object_without_properties(_param, [
+    "active"
+  ]);
+  return /* @__PURE__ */ React.createElement(YStack, _object_spread({
     position: "absolute",
     backgroundColor: "$color5",
     opacity: 0.7,
@@ -251,18 +322,30 @@ const demos = ["background", "underline"], demosTitle = {
     },
     exitStyle: {
       opacity: 0
+    }
+  }, active && {
+    backgroundColor: "$color8",
+    opacity: 0.6
+  }, props));
+}, AnimatedYStack = styled(YStack, {
+  variants: {
+    isLeft: {
+      true: {
+        x: -25,
+        opacity: 0
+      }
     },
-    ...active && {
-      backgroundColor: "$color8",
-      opacity: 0.6
+    isRight: {
+      true: {
+        x: 25,
+        opacity: 0
+      }
     },
-    ...props
-  }
-), AnimatedYStack = styled(YStack, {
-  variants: {
-    isLeft: { true: { x: -25, opacity: 0 } },
-    isRight: { true: { x: 25, opacity: 0 } },
-    defaultFade: { true: { opacity: 0 } }
+    defaultFade: {
+      true: {
+        opacity: 0
+      }
+    }
   }
 });
 export {