@stackflow/plugin-basic-ui 0.21.4-alpha.4 → 1.0.0

package/dist/index.mjs

@@ -24,7 +24,7 @@ var __export = (target, all) => {
 
 // src/basicUIPlugin.tsx
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import React, { createContext, useContext } from "react";
+import { createContext, useContext } from "react";
 
 // src/theme.css.ts
 var theme_css_exports = {};
@@ -37,7 +37,7 @@ __export(theme_css_exports, {
 });
 var android = "theme__1coppmz0";
 var cupertino = "theme__1coppmz1";
-var globalVars = { backgroundColor: "var(--stackflow-plugin-basic-ui-background-color)", dimBackgroundColor: "var(--stackflow-plugin-basic-ui-dim-background-color)", appBar: { borderColor: "var(--stackflow-plugin-basic-ui-app-bar-border-color)", borderSize: "var(--stackflow-plugin-basic-ui-app-bar-border-size)", height: "var(--stackflow-plugin-basic-ui-app-bar-height)", heightTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration)", minHeight: "var(--stackflow-plugin-basic-ui-app-bar-min-height)", iconColor: "var(--stackflow-plugin-basic-ui-app-bar-icon-color)", textColor: "var(--stackflow-plugin-basic-ui-app-bar-text-color)", backgroundColor: "var(--stackflow-plugin-basic-ui-app-bar-background-color)", overflow: "var(--stackflow-plugin-basic-ui-app-bar-overflow)" }, bottomSheet: { borderRadius: "var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)" }, modal: { borderRadius: "var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)" } };
+var globalVars = { backgroundColor: "var(--stackflow-plugin-basic-ui-background-color)", dimBackgroundColor: "var(--stackflow-plugin-basic-ui-dim-background-color)", transitionDuration: "var(--stackflow-plugin-basic-ui-transition-duration)", appBar: { borderColor: "var(--stackflow-plugin-basic-ui-app-bar-border-color)", borderSize: "var(--stackflow-plugin-basic-ui-app-bar-border-size)", height: "var(--stackflow-plugin-basic-ui-app-bar-height)", heightTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration)", minHeight: "var(--stackflow-plugin-basic-ui-app-bar-min-height)", iconColor: "var(--stackflow-plugin-basic-ui-app-bar-icon-color)", textColor: "var(--stackflow-plugin-basic-ui-app-bar-text-color)", backgroundColor: "var(--stackflow-plugin-basic-ui-app-bar-background-color)", overflow: "var(--stackflow-plugin-basic-ui-app-bar-overflow)" }, bottomSheet: { borderRadius: "var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)" }, modal: { borderRadius: "var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)" } };
 var rootAndroid = ":root[data-stackflow-plugin-basic-ui-theme=android]";
 var rootCupertino = ":root[data-stackflow-plugin-basic-ui-theme=cupertino]";
 
@@ -100,6 +100,7 @@ function requestNextFrame(cb) {
 }
 
 // src/basicUIPlugin.tsx
+import { jsx } from "react/jsx-runtime";
 var GlobalOptionsContext = createContext({
   theme: "android"
 });
@@ -111,31 +112,34 @@ var basicUIPlugin = (options) => () => ({
   key: "basic-ui",
   wrapStack({ stack }) {
     var _a, _b, _c, _d, _e, _f, _g;
-    return /* @__PURE__ */ React.createElement(GlobalOptionsProvider, {
-      value: options
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: isBrowser() ? compact([theme_css_exports[options.theme], options.rootClassName]).join(" ") : options.rootClassName,
-      style: assignInlineVars(
-        compactMap({
-          [globalVars.backgroundColor]: options.backgroundColor,
-          [globalVars.dimBackgroundColor]: options.dimBackgroundColor,
-          [globalVars.appBar.borderColor]: (_a = options.appBar) == null ? void 0 : _a.borderColor,
-          [globalVars.appBar.borderSize]: (_b = options.appBar) == null ? void 0 : _b.borderSize,
-          [globalVars.appBar.height]: (_c = options.appBar) == null ? void 0 : _c.height,
-          [globalVars.appBar.iconColor]: (_d = options.appBar) == null ? void 0 : _d.iconColor,
-          [globalVars.appBar.textColor]: (_e = options.appBar) == null ? void 0 : _e.textColor,
-          [globalVars.bottomSheet.borderRadius]: (_f = options.bottomSheet) == null ? void 0 : _f.borderRadius,
-          [globalVars.modal.borderRadius]: (_g = options.modal) == null ? void 0 : _g.borderRadius
-        })
-      )
-    }, stack.render()));
+    return /* @__PURE__ */ jsx(GlobalOptionsProvider, { value: options, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: isBrowser() ? compact([theme_css_exports[options.theme], options.rootClassName]).join(" ") : options.rootClassName,
+        style: assignInlineVars(
+          compactMap({
+            [globalVars.backgroundColor]: options.backgroundColor,
+            [globalVars.dimBackgroundColor]: options.dimBackgroundColor,
+            [globalVars.transitionDuration]: stack.globalTransitionState === "loading" ? `${stack.transitionDuration}ms` : "0ms",
+            [globalVars.appBar.borderColor]: (_a = options.appBar) == null ? void 0 : _a.borderColor,
+            [globalVars.appBar.borderSize]: (_b = options.appBar) == null ? void 0 : _b.borderSize,
+            [globalVars.appBar.height]: (_c = options.appBar) == null ? void 0 : _c.height,
+            [globalVars.appBar.iconColor]: (_d = options.appBar) == null ? void 0 : _d.iconColor,
+            [globalVars.appBar.textColor]: (_e = options.appBar) == null ? void 0 : _e.textColor,
+            [globalVars.bottomSheet.borderRadius]: (_f = options.bottomSheet) == null ? void 0 : _f.borderRadius,
+            [globalVars.modal.borderRadius]: (_g = options.modal) == null ? void 0 : _g.borderRadius
+          })
+        ),
+        children: stack.render()
+      }
+    ) });
   }
 });
 
 // src/components/AppScreen.tsx
 import { useActions as useActions2 } from "@stackflow/react";
 import { assignInlineVars as assignInlineVars3 } from "@vanilla-extract/dynamic";
-import React5, { createContext as createContext2, useContext as useContext2, useMemo, useRef as useRef2 } from "react";
+import { createContext as createContext2, useContext as useContext2, useMemo, useRef as useRef2 } from "react";
 
 // src/hooks/useLazy.tsx
 import { useEffect, useState } from "react";
@@ -313,7 +317,7 @@ function useStyleEffectOffset({
             if (!ref.current) {
               return;
             }
-            ref.current.style.transition = `var(--stackflow-transition-duration)`;
+            ref.current.style.transition = globalVars.transitionDuration;
             ref.current.style.transform = transform;
           });
           switch (activityTransitionState) {
@@ -404,15 +408,15 @@ function useStyleEffectSwipeBack({
         return new Promise((resolve) => {
           requestAnimationFrame(() => {
             $dim.style.opacity = `${swiped ? 0 : 1}`;
-            $dim.style.transition = "var(--stackflow-transition-duration)";
+            $dim.style.transition = globalVars.transitionDuration;
             $paper.style.overflowY = "hidden";
             $paper.style.transform = `translateX(${swiped ? "100%" : "0"})`;
-            $paper.style.transition = "var(--stackflow-transition-duration)";
+            $paper.style.transition = globalVars.transitionDuration;
             refs.forEach((ref) => {
               if (!ref.current) {
                 return;
               }
-              ref.current.style.transition = `var(--stackflow-transition-duration)`;
+              ref.current.style.transition = globalVars.transitionDuration;
               ref.current.style.transform = `translate3d(${swiped ? "0" : `-${OFFSET_PX_CUPERTINO / 16}rem`}, 0, 0)`;
             });
             const _cachedRefs = [...cachedRefs];
@@ -511,39 +515,59 @@ function useStyleEffectSwipeBack({
 // src/components/AppBar.tsx
 import { useActions } from "@stackflow/react";
 import { assignInlineVars as assignInlineVars2 } from "@vanilla-extract/dynamic";
-import React4, { useRef } from "react";
+import { forwardRef, useRef } from "react";
 
 // src/assets/IconBack.tsx
-import React2 from "react";
-var IconBack = (props) => /* @__PURE__ */ React2.createElement("svg", {
-  className: props.className,
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, /* @__PURE__ */ React2.createElement("path", {
-  d: "M11.5659 5.56564C11.8783 5.25322 11.8783 4.74669 11.5659 4.43427C11.2535 4.12185 10.7469 4.12185 10.4345 4.43427L3.43451 11.4343C3.12209 11.7467 3.12209 12.2532 3.43451 12.5656L10.4345 19.5656C10.7469 19.8781 11.2535 19.8781 11.5659 19.5656C11.8783 19.2532 11.8783 18.7467 11.5659 18.4343L5.93157 12.8H20.0002C20.442 12.8 20.8002 12.4418 20.8002 12C20.8002 11.5581 20.442 11.2 20.0002 11.2H5.93157L11.5659 5.56564Z",
-  fill: "currentColor"
-}));
+import { jsx as jsx2 } from "react/jsx-runtime";
+var IconBack = (props) => /* @__PURE__ */ jsx2(
+  "svg",
+  {
+    className: props.className,
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx2(
+      "path",
+      {
+        d: "M11.5659 5.56564C11.8783 5.25322 11.8783 4.74669 11.5659 4.43427C11.2535 4.12185 10.7469 4.12185 10.4345 4.43427L3.43451 11.4343C3.12209 11.7467 3.12209 12.2532 3.43451 12.5656L10.4345 19.5656C10.7469 19.8781 11.2535 19.8781 11.5659 19.5656C11.8783 19.2532 11.8783 18.7467 11.5659 18.4343L5.93157 12.8H20.0002C20.442 12.8 20.8002 12.4418 20.8002 12C20.8002 11.5581 20.442 11.2 20.0002 11.2H5.93157L11.5659 5.56564Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
 var IconBack_default = IconBack;
 
 // src/assets/IconClose.tsx
-import React3 from "react";
-var IconClose = (props) => /* @__PURE__ */ React3.createElement("svg", {
-  className: props.className,
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, /* @__PURE__ */ React3.createElement("path", {
-  d: "M6.56588 5.43433C6.25346 5.12191 5.74693 5.12191 5.43451 5.43433C5.12209 5.74675 5.12209 6.25328 5.43451 6.5657L10.8688 12L5.43451 17.4343C5.12209 17.7467 5.12209 18.2533 5.43451 18.5657C5.74693 18.8781 6.25346 18.8781 6.56588 18.5657L12.0002 13.1314L17.4345 18.5657C17.7469 18.8781 18.2535 18.8781 18.5659 18.5657C18.8783 18.2533 18.8783 17.7467 18.5659 17.4343L13.1316 12L18.5659 6.5657C18.8783 6.25328 18.8783 5.74675 18.5659 5.43433C18.2535 5.12191 17.7469 5.12191 17.4345 5.43433L12.0002 10.8686L6.56588 5.43433Z",
-  fill: "currentColor"
-}), /* @__PURE__ */ React3.createElement("path", {
-  d: "M6.56588 5.43433C6.25346 5.12191 5.74693 5.12191 5.43451 5.43433C5.12209 5.74675 5.12209 6.25328 5.43451 6.5657L10.8688 12L5.43451 17.4343C5.12209 17.7467 5.12209 18.2533 5.43451 18.5657C5.74693 18.8781 6.25346 18.8781 6.56588 18.5657L12.0002 13.1314L17.4345 18.5657C17.7469 18.8781 18.2535 18.8781 18.5659 18.5657C18.8783 18.2533 18.8783 17.7467 18.5659 17.4343L13.1316 12L18.5659 6.5657C18.8783 6.25328 18.8783 5.74675 18.5659 5.43433C18.2535 5.12191 17.7469 5.12191 17.4345 5.43433L12.0002 10.8686L6.56588 5.43433Z",
-  fill: "currentColor"
-}));
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var IconClose = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className: props.className,
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx3(
+        "path",
+        {
+          d: "M6.56588 5.43433C6.25346 5.12191 5.74693 5.12191 5.43451 5.43433C5.12209 5.74675 5.12209 6.25328 5.43451 6.5657L10.8688 12L5.43451 17.4343C5.12209 17.7467 5.12209 18.2533 5.43451 18.5657C5.74693 18.8781 6.25346 18.8781 6.56588 18.5657L12.0002 13.1314L17.4345 18.5657C17.7469 18.8781 18.2535 18.8781 18.5659 18.5657C18.8783 18.2533 18.8783 17.7467 18.5659 17.4343L13.1316 12L18.5659 6.5657C18.8783 6.25328 18.8783 5.74675 18.5659 5.43433C18.2535 5.12191 17.7469 5.12191 17.4345 5.43433L12.0002 10.8686L6.56588 5.43433Z",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        "path",
+        {
+          d: "M6.56588 5.43433C6.25346 5.12191 5.74693 5.12191 5.43451 5.43433C5.12209 5.74675 5.12209 6.25328 5.43451 6.5657L10.8688 12L5.43451 17.4343C5.12209 17.7467 5.12209 18.2533 5.43451 18.5657C5.74693 18.8781 6.25346 18.8781 6.56588 18.5657L12.0002 13.1314L17.4345 18.5657C17.7469 18.8781 18.2535 18.8781 18.5659 18.5657C18.8783 18.2533 18.8783 17.7467 18.5659 17.4343L13.1316 12L18.5659 6.5657C18.8783 6.25328 18.8783 5.74675 18.5659 5.43433C18.2535 5.12191 17.7469 5.12191 17.4345 5.43433L12.0002 10.8686L6.56588 5.43433Z",
+          fill: "currentColor"
+        }
+      )
+    ]
+  }
+);
 var IconClose_default = IconClose;
 
 // src/components/AppBar.css.ts
@@ -569,7 +593,8 @@ var paper = _7a4682({ defaultClassName: "AppScreen__1dlf434j f__dhthxq4 f__dhthx
 var vars = { transitionDuration: "var(--transitionDuration__1dlf4340)", zIndexes: { dim: "var(--zIndexes-dim__1dlf4341)", paper: "var(--zIndexes-paper__1dlf4342)", edge: "var(--zIndexes-edge__1dlf4343)", appBar: "var(--zIndexes-appBar__1dlf4344)" }, appBar: { center: { mainWidth: "var(--appBar-center-mainWidth__1dlf4345)" } } };
 
 // src/components/AppBar.tsx
-var AppBar = React4.forwardRef(
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var AppBar = forwardRef(
   ({
     title,
     appendLeft,
@@ -619,11 +644,15 @@ var AppBar = React4.forwardRef(
         return null;
       }
       if (!backButton2 && !globalBackButton) {
-        return /* @__PURE__ */ React4.createElement("button", {
-          type: "button",
-          className: backButton,
-          onClick: onBackClick
-        }, /* @__PURE__ */ React4.createElement(IconBack_default, null));
+        return /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            className: backButton,
+            onClick: onBackClick,
+            children: /* @__PURE__ */ jsx4(IconBack_default, {})
+          }
+        );
       }
       if (backButton2 && "render" in backButton2 && backButton2.render) {
         return (_a2 = backButton2.render) == null ? void 0 : _a2.call(backButton2);
@@ -631,23 +660,27 @@ var AppBar = React4.forwardRef(
       if (globalBackButton && "render" in globalBackButton && globalBackButton.render) {
         return (_b2 = globalBackButton.render) == null ? void 0 : _b2.call(globalBackButton);
       }
-      return /* @__PURE__ */ React4.createElement("button", {
-        type: "button",
-        className: backButton,
-        "aria-label": backButton2 && "ariaLabel" in backButton2 ? backButton2.ariaLabel : globalBackButton && "ariaLabel" in globalBackButton ? globalBackButton.ariaLabel : void 0,
-        onClick: onBackClick
-      }, (() => {
-        if (backButton2 && "renderIcon" in backButton2 && backButton2.renderIcon) {
-          return backButton2.renderIcon();
-        }
-        if (globalBackButton && "renderIcon" in globalBackButton && globalBackButton.renderIcon) {
-          return globalBackButton.renderIcon();
-        }
-        if (presentModalFullScreen) {
-          return /* @__PURE__ */ React4.createElement(IconClose_default, null);
+      return /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: backButton,
+          "aria-label": backButton2 && "ariaLabel" in backButton2 ? backButton2.ariaLabel : globalBackButton && "ariaLabel" in globalBackButton ? globalBackButton.ariaLabel : void 0,
+          onClick: onBackClick,
+          children: (() => {
+            if (backButton2 && "renderIcon" in backButton2 && backButton2.renderIcon) {
+              return backButton2.renderIcon();
+            }
+            if (globalBackButton && "renderIcon" in globalBackButton && globalBackButton.renderIcon) {
+              return globalBackButton.renderIcon();
+            }
+            if (presentModalFullScreen) {
+              return /* @__PURE__ */ jsx4(IconClose_default, {});
+            }
+            return /* @__PURE__ */ jsx4(IconBack_default, {});
+          })()
         }
-        return /* @__PURE__ */ React4.createElement(IconBack_default, null);
-      })());
+      );
     };
     const onCloseClick = (e) => {
       var _a2;
@@ -671,70 +704,90 @@ var AppBar = React4.forwardRef(
       if (globalCloseButton && "render" in globalCloseButton && globalCloseButton.render) {
         return globalCloseButton.render();
       }
-      return /* @__PURE__ */ React4.createElement("button", {
-        type: "button",
-        className: closeButton,
-        "aria-label": closeButton2 && "ariaLabel" in closeButton2 ? closeButton2.ariaLabel : globalCloseButton && "ariaLabel" in globalCloseButton ? globalCloseButton.ariaLabel : void 0,
-        onClick: onCloseClick
-      }, (() => {
-        if (closeButton2 && "renderIcon" in closeButton2 && closeButton2.renderIcon) {
-          return closeButton2.renderIcon();
-        }
-        if (globalCloseButton && "renderIcon" in globalCloseButton && globalCloseButton.renderIcon) {
-          return globalCloseButton.renderIcon();
+      return /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: closeButton,
+          "aria-label": closeButton2 && "ariaLabel" in closeButton2 ? closeButton2.ariaLabel : globalCloseButton && "ariaLabel" in globalCloseButton ? globalCloseButton.ariaLabel : void 0,
+          onClick: onCloseClick,
+          children: (() => {
+            if (closeButton2 && "renderIcon" in closeButton2 && closeButton2.renderIcon) {
+              return closeButton2.renderIcon();
+            }
+            if (globalCloseButton && "renderIcon" in globalCloseButton && globalCloseButton.renderIcon) {
+              return globalCloseButton.renderIcon();
+            }
+            return /* @__PURE__ */ jsx4(IconClose_default, {});
+          })()
         }
-        return /* @__PURE__ */ React4.createElement(IconClose_default, null);
-      })());
+      );
     };
     const hasLeft = !!(closeButtonLocation === "left" && closeButton2 || backButton2 || appendLeft);
-    return /* @__PURE__ */ React4.createElement("div", {
-      ref,
-      className: appBar({
-        border,
-        presentModalFullScreen
-      }),
-      style: assignInlineVars2(
-        compactMap({
-          [globalVars.appBar.iconColor]: iconColor,
-          [globalVars.appBar.textColor]: textColor,
-          [globalVars.appBar.borderColor]: borderColor,
-          [globalVars.appBar.borderSize]: borderSize,
-          [globalVars.appBar.height]: height,
-          [globalVars.appBar.heightTransitionDuration]: heightTransitionDuration,
-          [globalVars.appBar.overflow]: overflow,
-          [globalVars.appBar.backgroundColor]: backgroundColor || globalVars.backgroundColor,
-          [vars.appBar.center.mainWidth]: `${maxWidth}px`
-        })
-      )
-    }, /* @__PURE__ */ React4.createElement("div", {
-      className: safeArea
-    }), /* @__PURE__ */ React4.createElement("div", {
-      className: container
-    }, /* @__PURE__ */ React4.createElement("div", {
-      className: left
-    }, closeButtonLocation === "left" && renderCloseButton(), renderBackButton(), appendLeft == null ? void 0 : appendLeft()), /* @__PURE__ */ React4.createElement("div", {
-      ref: centerRef,
-      className: center
-    }, /* @__PURE__ */ React4.createElement("div", {
-      className: centerMain({
-        hasLeft
-      })
-    }, typeof title === "string" ? /* @__PURE__ */ React4.createElement("div", {
-      className: centerText
-    }, title) : title, /* @__PURE__ */ React4.createElement("button", {
-      className: centerMainEdge,
-      type: "button",
-      "aria-hidden": "true",
-      onClick: onTopClick
-    }))), /* @__PURE__ */ React4.createElement("div", {
-      className: right
-    }, appendRight == null ? void 0 : appendRight(), closeButtonLocation === "right" && renderCloseButton())));
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref,
+        className: appBar({
+          border,
+          presentModalFullScreen
+        }),
+        style: assignInlineVars2(
+          compactMap({
+            [globalVars.appBar.iconColor]: iconColor,
+            [globalVars.appBar.textColor]: textColor,
+            [globalVars.appBar.borderColor]: borderColor,
+            [globalVars.appBar.borderSize]: borderSize,
+            [globalVars.appBar.height]: height,
+            [globalVars.appBar.heightTransitionDuration]: heightTransitionDuration,
+            [globalVars.appBar.overflow]: overflow,
+            [globalVars.appBar.backgroundColor]: backgroundColor || globalVars.backgroundColor,
+            [vars.appBar.center.mainWidth]: `${maxWidth}px`
+          })
+        ),
+        children: [
+          /* @__PURE__ */ jsx4("div", { className: safeArea }),
+          /* @__PURE__ */ jsxs2("div", { className: container, children: [
+            /* @__PURE__ */ jsxs2("div", { className: left, children: [
+              closeButtonLocation === "left" && renderCloseButton(),
+              renderBackButton(),
+              appendLeft == null ? void 0 : appendLeft()
+            ] }),
+            /* @__PURE__ */ jsx4("div", { ref: centerRef, className: center, children: /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                className: centerMain({
+                  hasLeft
+                }),
+                children: [
+                  typeof title === "string" ? /* @__PURE__ */ jsx4("div", { className: centerText, children: title }) : title,
+                  /* @__PURE__ */ jsx4(
+                    "button",
+                    {
+                      className: centerMainEdge,
+                      type: "button",
+                      "aria-hidden": "true",
+                      onClick: onTopClick
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxs2("div", { className: right, children: [
+              appendRight == null ? void 0 : appendRight(),
+              closeButtonLocation === "right" && renderCloseButton()
+            ] })
+          ] })
+        ]
+      }
+    );
   }
 );
 AppBar.displayName = "AppBar";
 var AppBar_default = AppBar;
 
 // src/components/AppScreen.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var Context = createContext2(null);
 function useAppScreen() {
   return useContext2(Context);
@@ -796,55 +849,69 @@ var AppScreen = ({
       });
     }
   };
-  return /* @__PURE__ */ React5.createElement(Context.Provider, {
-    value: useMemo(
-      () => ({
-        scroll({ top }) {
-          var _a2;
-          (_a2 = paperRef == null ? void 0 : paperRef.current) == null ? void 0 : _a2.scroll({
-            top,
-            behavior: "smooth"
-          });
+  return /* @__PURE__ */ jsx5(
+    Context.Provider,
+    {
+      value: useMemo(
+        () => ({
+          scroll({ top }) {
+            var _a2;
+            (_a2 = paperRef == null ? void 0 : paperRef.current) == null ? void 0 : _a2.scroll({
+              top,
+              behavior: "smooth"
+            });
+          }
+        }),
+        [paperRef]
+      ),
+      children: /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          ref: appScreenRef,
+          className: appScreen({
+            transitionState: transitionState === "enter-done" || transitionState === "exit-done" ? transitionState : lazyTransitionState
+          }),
+          style: assignInlineVars3(
+            compactMap({
+              [globalVars.backgroundColor]: backgroundColor,
+              [globalVars.dimBackgroundColor]: dimBackgroundColor,
+              [globalVars.appBar.height]: appBar2 == null ? void 0 : appBar2.height,
+              [globalVars.appBar.heightTransitionDuration]: appBar2 == null ? void 0 : appBar2.heightTransitionDuration,
+              [vars.zIndexes.dim]: `${zIndexDim}`,
+              [vars.zIndexes.paper]: `${zIndexPaper}`,
+              [vars.zIndexes.edge]: `${zIndexEdge}`,
+              [vars.zIndexes.appBar]: `${zIndexAppBar}`,
+              [vars.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? globalVars.transitionDuration : "0ms"
+            })
+          ),
+          children: [
+            /* @__PURE__ */ jsx5("div", { className: dim, ref: dimRef }),
+            appBar2 && /* @__PURE__ */ jsx5(
+              AppBar_default,
+              __spreadProps(__spreadValues({}, appBar2), {
+                ref: appBarRef,
+                modalPresentationStyle,
+                onTopClick: onAppBarTopClick
+              })
+            ),
+            /* @__PURE__ */ jsx5(
+              "div",
+              {
+                className: paper({
+                  hasAppBar,
+                  presentModalFullScreen
+                }),
+                ref: paperRef,
+                children
+              },
+              activity == null ? void 0 : activity.id
+            ),
+            !(activity == null ? void 0 : activity.isRoot) && globalOptions.theme === "cupertino" && !swipeBackPrevented && /* @__PURE__ */ jsx5("div", { className: edge({ hasAppBar }), ref: edgeRef })
+          ]
         }
-      }),
-      [paperRef]
-    )
-  }, /* @__PURE__ */ React5.createElement("div", {
-    ref: appScreenRef,
-    className: appScreen({
-      transitionState: transitionState === "enter-done" || transitionState === "exit-done" ? transitionState : lazyTransitionState
-    }),
-    style: assignInlineVars3(
-      compactMap({
-        [globalVars.backgroundColor]: backgroundColor,
-        [globalVars.dimBackgroundColor]: dimBackgroundColor,
-        [globalVars.appBar.height]: appBar2 == null ? void 0 : appBar2.height,
-        [globalVars.appBar.heightTransitionDuration]: appBar2 == null ? void 0 : appBar2.heightTransitionDuration,
-        [vars.zIndexes.dim]: `${zIndexDim}`,
-        [vars.zIndexes.paper]: `${zIndexPaper}`,
-        [vars.zIndexes.edge]: `${zIndexEdge}`,
-        [vars.zIndexes.appBar]: `${zIndexAppBar}`,
-        [vars.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? `var(--stackflow-transition-duration)` : "0ms"
-      })
-    )
-  }, /* @__PURE__ */ React5.createElement("div", {
-    className: dim,
-    ref: dimRef
-  }), appBar2 && /* @__PURE__ */ React5.createElement(AppBar_default, __spreadProps(__spreadValues({}, appBar2), {
-    ref: appBarRef,
-    modalPresentationStyle,
-    onTopClick: onAppBarTopClick
-  })), /* @__PURE__ */ React5.createElement("div", {
-    key: activity == null ? void 0 : activity.id,
-    className: paper({
-      hasAppBar,
-      presentModalFullScreen
-    }),
-    ref: paperRef
-  }, children), !(activity == null ? void 0 : activity.isRoot) && globalOptions.theme === "cupertino" && !swipeBackPrevented && /* @__PURE__ */ React5.createElement("div", {
-    className: edge({ hasAppBar }),
-    ref: edgeRef
-  })));
+      )
+    }
+  );
 };
 AppScreen.displayName = "AppScreen";
 var AppScreen_default = AppScreen;
@@ -852,7 +919,7 @@ var AppScreen_default = AppScreen;
 // src/components/BottomSheet.tsx
 import { useActions as useActions3 } from "@stackflow/react";
 import { assignInlineVars as assignInlineVars4 } from "@vanilla-extract/dynamic";
-import React6, { useRef as useRef3 } from "react";
+import { useRef as useRef3 } from "react";
 
 // src/components/BottomSheet.css.ts
 import { createRuntimeFn as _7a4683 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -862,6 +929,7 @@ var paper2 = "BottomSheet__1ht38h0e f__dhthxqc BottomSheet__1ht38h03";
 var vars2 = { transitionDuration: "var(--transitionDuration__1ht38h00)", zIndexes: { dim: "var(--zIndexes-dim__1ht38h01)", paper: "var(--zIndexes-paper__1ht38h02)" } };
 
 // src/components/BottomSheet.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
 var BottomSheet = ({
   borderRadius = "1rem",
   backgroundColor,
@@ -904,29 +972,26 @@ var BottomSheet = ({
   const zIndexBase = ((_a = activity == null ? void 0 : activity.zIndex) != null ? _a : 0) * 5 + 3;
   const zIndexPaper = ((_b = activity == null ? void 0 : activity.zIndex) != null ? _b : 0) * 5 + 4;
   const transitionState = (_c = activity == null ? void 0 : activity.transitionState) != null ? _c : "enter-done";
-  return /* @__PURE__ */ React6.createElement("div", {
-    className: container2({
-      transitionState: useLazy(transitionState)
-    }),
-    ref: containerRef,
-    style: assignInlineVars4(
-      compactMap({
-        [globalVars.bottomSheet.borderRadius]: borderRadius,
-        [globalVars.backgroundColor]: backgroundColor,
-        [globalVars.dimBackgroundColor]: dimBackgroundColor,
-        [vars2.zIndexes.dim]: `${zIndexBase}`,
-        [vars2.zIndexes.paper]: `${zIndexPaper}`,
-        [vars2.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? `var(--stackflow-transition-duration)` : "0ms"
-      })
-    )
-  }, /* @__PURE__ */ React6.createElement("div", {
-    className: dim2,
-    ref: paperRef,
-    onClick: onDimClick
-  }, /* @__PURE__ */ React6.createElement("div", {
-    className: paper2,
-    onClick: onPaperClick
-  }, children)));
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: container2({
+        transitionState: useLazy(transitionState)
+      }),
+      ref: containerRef,
+      style: assignInlineVars4(
+        compactMap({
+          [globalVars.bottomSheet.borderRadius]: borderRadius,
+          [globalVars.backgroundColor]: backgroundColor,
+          [globalVars.dimBackgroundColor]: dimBackgroundColor,
+          [vars2.zIndexes.dim]: `${zIndexBase}`,
+          [vars2.zIndexes.paper]: `${zIndexPaper}`,
+          [vars2.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? globalVars.transitionDuration : "0ms"
+        })
+      ),
+      children: /* @__PURE__ */ jsx6("div", { className: dim2, ref: paperRef, onClick: onDimClick, children: /* @__PURE__ */ jsx6("div", { className: paper2, onClick: onPaperClick, children }) })
+    }
+  );
 };
 BottomSheet.displayName = "BottomSheet";
 var BottomSheet_default = BottomSheet;
@@ -934,7 +999,7 @@ var BottomSheet_default = BottomSheet;
 // src/components/Modal.tsx
 import { useActions as useActions4 } from "@stackflow/react";
 import { assignInlineVars as assignInlineVars5 } from "@vanilla-extract/dynamic";
-import React7, { useRef as useRef4 } from "react";
+import { useRef as useRef4 } from "react";
 
 // src/components/Modal.css.ts
 import { createRuntimeFn as _7a4684 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -944,6 +1009,7 @@ var paper3 = "Modal__5ozg8ce f__dhthxqc Modal__5ozg8c3";
 var vars3 = { transitionDuration: "var(--transitionDuration__5ozg8c0)", zIndexes: { dim: "var(--zIndexes-dim__5ozg8c1)", paper: "var(--zIndexes-paper__5ozg8c2)" } };
 
 // src/components/Modal.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
 var Modal = ({
   backgroundColor,
   dimBackgroundColor,
@@ -986,29 +1052,26 @@ var Modal = ({
   const zIndexBase = ((_a = activity == null ? void 0 : activity.zIndex) != null ? _a : 0) * 5 + 3;
   const zIndexPaper = ((_b = activity == null ? void 0 : activity.zIndex) != null ? _b : 0) * 5 + 4;
   const transitionState = (_c = activity == null ? void 0 : activity.transitionState) != null ? _c : "enter-done";
-  return /* @__PURE__ */ React7.createElement("div", {
-    className: container3({
-      transitionState: useLazy(transitionState)
-    }),
-    ref: containerRef,
-    style: assignInlineVars5(
-      compactMap({
-        [globalVars.bottomSheet.borderRadius]: borderRadius,
-        [globalVars.backgroundColor]: backgroundColor,
-        [globalVars.dimBackgroundColor]: dimBackgroundColor,
-        [vars3.zIndexes.dim]: `${zIndexBase}`,
-        [vars3.zIndexes.paper]: `${zIndexPaper}`,
-        [vars3.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? `var(--stackflow-transition-duration)` : "0ms"
-      })
-    )
-  }, /* @__PURE__ */ React7.createElement("div", {
-    className: dim3,
-    ref: paperRef,
-    onClick: onDimClick
-  }, /* @__PURE__ */ React7.createElement("div", {
-    className: paper3,
-    onClick: onPaperClick
-  }, children)));
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: container3({
+        transitionState: useLazy(transitionState)
+      }),
+      ref: containerRef,
+      style: assignInlineVars5(
+        compactMap({
+          [globalVars.bottomSheet.borderRadius]: borderRadius,
+          [globalVars.backgroundColor]: backgroundColor,
+          [globalVars.dimBackgroundColor]: dimBackgroundColor,
+          [vars3.zIndexes.dim]: `${zIndexBase}`,
+          [vars3.zIndexes.paper]: `${zIndexPaper}`,
+          [vars3.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? globalVars.transitionDuration : "0ms"
+        })
+      ),
+      children: /* @__PURE__ */ jsx7("div", { className: dim3, ref: paperRef, onClick: onDimClick, children: /* @__PURE__ */ jsx7("div", { className: paper3, onClick: onPaperClick, children }) })
+    }
+  );
 };
 Modal.displayName = "Modal";
 var Modal_default = Modal;