@stackflow/plugin-basic-ui 1.14.2 → 1.15.1

package/dist/components/AppBar.d.ts

@@ -39,6 +39,7 @@ declare const AppBar: import("react").ForwardRefExoticComponent<Partial<Pick<{
     activityEnterStyle?: "slideInLeft";
     onTopClick?: (e: React.MouseEvent) => void;
     enterStyle?: "cover";
+    className?: string;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export default AppBar;
 //# sourceMappingURL=AppBar.d.ts.map

package/dist/components/AppBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppBar.d.ts","sourceRoot":"","sources":["../../src/components/AppBar.tsx"],"names":[],"mappings":"AAgEA,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;YA5BF,KAAK,CAAC,SAAS;iBACV,MAAM,KAAK,CAAC,SAAS;kBACpB,MAAM,KAAK,CAAC,SAAS;iBAE/B;QACE,UAAU,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;QACnC,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KAC5D,GACD;QACE,MAAM,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;KAChC;kBAED;QACE,UAAU,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;QACnC,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KAC5D,GACD;QACE,MAAM,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;KAChC;0BACiB,MAAM,GAAG,OAAO;aAC7B,OAAO;6BACS,YAAY;yBAChB,aAAa;iBACrB,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI;iBAC7B,OAAO;kDAmSrB,CAAC;AAIF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"AppBar.d.ts","sourceRoot":"","sources":["../../src/components/AppBar.tsx"],"names":[],"mappings":"AAkEA,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;YA7BF,KAAK,CAAC,SAAS;iBACV,MAAM,KAAK,CAAC,SAAS;kBACpB,MAAM,KAAK,CAAC,SAAS;iBAE/B;QACE,UAAU,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;QACnC,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KAC5D,GACD;QACE,MAAM,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;KAChC;kBAED;QACE,UAAU,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;QACnC,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KAC5D,GACD;QACE,MAAM,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;KAChC;0BACiB,MAAM,GAAG,OAAO;aAC7B,OAAO;6BACS,YAAY;yBAChB,aAAa;iBACrB,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI;iBAC7B,OAAO;gBACR,MAAM;kDAuSnB,CAAC;AAIF,eAAe,MAAM,CAAC"}

package/dist/components/AppScreen.d.ts

@@ -20,6 +20,7 @@ export type AppScreenProps = Partial<Pick<GlobalVars, "backgroundColor" | "backg
     preventSwipeBack?: boolean;
     CUPERTINO_ONLY_modalPresentationStyle?: "fullScreen";
     ANDROID_ONLY_activityEnterStyle?: "slideInLeft";
+    className?: string;
     children: React.ReactNode;
 };
 declare const AppScreen: React.FC<AppScreenProps>;

package/dist/components/AppScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppScreen.d.ts","sourceRoot":"","sources":["../../src/components/AppScreen.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,OAAO,MAAM,MAAM,UAAU,CAAC;AAG9B,eAAO,MAAM,iBAAiB,KAAK,CAAC;AACpC,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAEtC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE;QACR,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,CAAC;AAGF,wBAAgB,YAAY,qBAE3B;AAED,MAAM,MAAM,cAAc,GAAG,OAAO,CAClC,IAAI,CAAC,UAAU,EAAE,iBAAiB,GAAG,iBAAiB,GAAG,oBAAoB,CAAC,CAC/E,GAAG;IACF,MAAM,CAAC,EAAE,IAAI,CACX,MAAM,CAAC,OAAO,MAAM,CAAC,EACrB,OAAO,GAAG,wBAAwB,GAAG,KAAK,GAAG,KAAK,CACnD,CAAC;IACF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qCAAqC,CAAC,EAAE,YAAY,CAAC;IACrD,+BAA+B,CAAC,EAAE,aAAa,CAAC;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AACF,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA4PvC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AppScreen.d.ts","sourceRoot":"","sources":["../../src/components/AppScreen.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,OAAO,MAAM,MAAM,UAAU,CAAC;AAG9B,eAAO,MAAM,iBAAiB,KAAK,CAAC;AACpC,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAEtC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE;QACR,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH,CAAC;AAGF,wBAAgB,YAAY,qBAE3B;AAED,MAAM,MAAM,cAAc,GAAG,OAAO,CAClC,IAAI,CAAC,UAAU,EAAE,iBAAiB,GAAG,iBAAiB,GAAG,oBAAoB,CAAC,CAC/E,GAAG;IACF,MAAM,CAAC,EAAE,IAAI,CACX,MAAM,CAAC,OAAO,MAAM,CAAC,EACrB,OAAO,GAAG,wBAAwB,GAAG,KAAK,GAAG,KAAK,CACnD,CAAC;IACF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qCAAqC,CAAC,EAAE,YAAY,CAAC;IACrD,+BAA+B,CAAC,EAAE,aAAa,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AACF,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAuQvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/BottomSheet.d.ts

@@ -3,6 +3,7 @@ export type BottomSheetProps = Partial<Pick<GlobalVars, "backgroundColor" | "bac
     paperRef?: React.Ref<HTMLDivElement>;
     onOutsideClick?: React.MouseEventHandler;
     children: React.ReactNode;
+    className?: string;
 };
 declare const BottomSheet: React.FC<BottomSheetProps>;
 export default BottomSheet;

package/dist/components/BottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/components/BottomSheet.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAKvD,MAAM,MAAM,gBAAgB,GAAG,OAAO,CACpC,IAAI,CAAC,UAAU,EAAE,iBAAiB,GAAG,iBAAiB,GAAG,oBAAoB,CAAC,CAC/E,GACC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,GAAG;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACrC,cAAc,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AACJ,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAwF3C,CAAC;AAIF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/components/BottomSheet.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAKvD,MAAM,MAAM,gBAAgB,GAAG,OAAO,CACpC,IAAI,CAAC,UAAU,EAAE,iBAAiB,GAAG,iBAAiB,GAAG,oBAAoB,CAAC,CAC/E,GACC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,GAAG;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACrC,cAAc,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AACJ,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4F3C,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/dist/components/Modal.d.ts

@@ -2,6 +2,7 @@ import type { GlobalVars } from "../basicUIPlugin.css";
 export type ModalProps = Partial<Pick<GlobalVars, "backgroundColor" | "backgroundImage" | "dimBackgroundColor">> & Partial<GlobalVars["modal"]> & {
     onOutsideClick?: React.MouseEventHandler;
     children: React.ReactNode;
+    className?: string;
 };
 declare const Modal: React.FC<ModalProps>;
 export default Modal;

package/dist/components/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAKvD,MAAM,MAAM,UAAU,GAAG,OAAO,CAC9B,IAAI,CAAC,UAAU,EAAE,iBAAiB,GAAG,iBAAiB,GAAG,oBAAoB,CAAC,CAC/E,GACC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG;IAC7B,cAAc,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AACJ,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAyF/B,CAAC;AAIF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAKvD,MAAM,MAAM,UAAU,GAAG,OAAO,CAC9B,IAAI,CAAC,UAAU,EAAE,iBAAiB,GAAG,iBAAiB,GAAG,oBAAoB,CAAC,CAC/E,GACC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG;IAC7B,cAAc,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AACJ,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA6F/B,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 export { IconBack, IconClose } from "./assets";
 export { basicUIPlugin } from "./basicUIPlugin";
 export { globalVars as cssVars } from "./basicUIPlugin.css";
-export { default as AppScreen, AppScreenContext, AppScreenProps, useAppScreen, } from "./components/AppScreen";
+export { AppScreenContext, AppScreenProps, default as AppScreen, useAppScreen, } from "./components/AppScreen";
 export { vars as appScreenVars } from "./components/AppScreen.css";
-export { default as BottomSheet, BottomSheetProps, } from "./components/BottomSheet";
+export { BottomSheetProps, default as BottomSheet, } from "./components/BottomSheet";
 export { vars as bottomSheetVars } from "./components/BottomSheet.css";
 export { default as Modal, ModalProps } from "./components/Modal";
 export { vars as modalVars } from "./components/Modal.css";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,IAAI,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,gBAAgB,EAChB,cAAc,EACd,YAAY,GACb,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,gBAAgB,GACjB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAClE,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,IAAI,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,OAAO,IAAI,SAAS,EACpB,YAAY,GACb,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EACL,gBAAgB,EAChB,OAAO,IAAI,WAAW,GACvB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAClE,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/index.js

@@ -1,10 +1,12 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -32,6 +34,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   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: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -181,12 +191,14 @@ var basicUIPlugin = (options) => () => ({
 var import_react4 = require("@stackflow/react");
 var import_react_ui_core2 = require("@stackflow/react-ui-core");
 var import_dynamic3 = require("@vanilla-extract/dynamic");
+var import_clsx2 = __toESM(require("clsx"));
 var import_react5 = require("react");
 
 // src/components/AppBar.tsx
 var import_react2 = require("@stackflow/react");
 var import_react_ui_core = require("@stackflow/react-ui-core");
 var import_dynamic2 = require("@vanilla-extract/dynamic");
+var import_clsx = __toESM(require("clsx"));
 var import_react3 = require("react");
 
 // src/components/AppBar.css.ts
@@ -244,7 +256,8 @@ var AppBar = (0, import_react3.forwardRef)(
     backgroundImage,
     backgroundImageTransitionDuration,
     onTopClick,
-    enterStyle
+    enterStyle,
+    className
   }, ref) => {
     var _a, _b;
     const actions = (0, import_react2.useActions)();
@@ -362,12 +375,15 @@ var AppBar = (0, import_react3.forwardRef)(
       "div",
       __spreadProps(__spreadValues({
         ref,
-        className: appBar({
-          border,
-          modalPresentationStyle,
-          activityEnterStyle,
-          enterStyle
-        }),
+        className: (0, import_clsx.default)(
+          appBar({
+            border,
+            modalPresentationStyle,
+            activityEnterStyle,
+            enterStyle
+          }),
+          className
+        ),
         style: (0, import_dynamic2.assignInlineVars)(
           compactMap({
             [globalVars.appBar.iconColor]: iconColor,
@@ -437,6 +453,7 @@ var AppScreen = ({
   preventSwipeBack,
   CUPERTINO_ONLY_modalPresentationStyle,
   ANDROID_ONLY_activityEnterStyle,
+  className,
   children
 }) => {
   var _a;
@@ -450,6 +467,7 @@ var AppScreen = ({
   const paperRef = (0, import_react5.useRef)(null);
   const edgeRef = (0, import_react5.useRef)(null);
   const appBarRef = (0, import_react5.useRef)(null);
+  const paperContentRef = (0, import_react5.useRef)(null);
   const modalPresentationStyle = globalOptions.theme === "cupertino" ? CUPERTINO_ONLY_modalPresentationStyle : void 0;
   const activityEnterStyle = globalOptions.theme === "android" ? ANDROID_ONLY_activityEnterStyle : void 0;
   const isSwipeBackPrevented = preventSwipeBack || modalPresentationStyle === "fullScreen";
@@ -534,7 +552,7 @@ var AppScreen = ({
     var _a2, _b;
     (_a2 = appBar2 == null ? void 0 : appBar2.onTopClick) == null ? void 0 : _a2.call(appBar2, e);
     if (!e.defaultPrevented) {
-      (_b = paperRef.current) == null ? void 0 : _b.scroll({
+      (_b = paperContentRef.current) == null ? void 0 : _b.scroll({
         top: 0,
         behavior: "smooth"
       });
@@ -550,7 +568,7 @@ var AppScreen = ({
         () => ({
           scroll({ top }) {
             var _a2;
-            (_a2 = paperRef == null ? void 0 : paperRef.current) == null ? void 0 : _a2.scroll({
+            (_a2 = paperContentRef == null ? void 0 : paperContentRef.current) == null ? void 0 : _a2.scroll({
               top,
               behavior: "smooth"
             });
@@ -562,15 +580,18 @@ var AppScreen = ({
             appBar: zIndexAppBar
           }
         }),
-        [paperRef, zIndexDim, zIndexPaper, zIndexEdge, zIndexAppBar]
+        [paperContentRef, zIndexDim, zIndexPaper, zIndexEdge, zIndexAppBar]
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "div",
         __spreadProps(__spreadValues({
           ref: appScreenRef,
-          className: appScreen({
-            transitionState: transitionState === "enter-done" || transitionState === "exit-done" ? transitionState : lazyTransitionState
-          }),
+          className: (0, import_clsx2.default)(
+            appScreen({
+              transitionState: transitionState === "enter-done" || transitionState === "exit-done" ? transitionState : lazyTransitionState
+            }),
+            className
+          ),
           style: (0, import_dynamic3.assignInlineVars)(
             compactMap({
               [globalVars.backgroundColor]: backgroundColor,
@@ -616,7 +637,14 @@ var AppScreen = ({
                 }),
                 "data-part": "paper"
               }, activityDataAttributes), {
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: paperContent({ hasAppBar }), children })
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "div",
+                  {
+                    ref: paperContentRef,
+                    className: paperContent({ hasAppBar }),
+                    children
+                  }
+                )
               }),
               activity == null ? void 0 : activity.id
             ),
@@ -638,9 +666,10 @@ var AppScreen_default = AppScreen;
 
 // src/components/BottomSheet.tsx
 var import_react6 = require("@stackflow/react");
+var import_react_ui_core3 = require("@stackflow/react-ui-core");
 var import_dynamic4 = require("@vanilla-extract/dynamic");
+var import_clsx3 = __toESM(require("clsx"));
 var import_react7 = require("react");
-var import_react_ui_core3 = require("@stackflow/react-ui-core");
 
 // src/components/BottomSheet.css.ts
 var import_createRuntimeFn4 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -658,7 +687,8 @@ var BottomSheet = ({
   dimBackgroundColor,
   paperRef,
   onOutsideClick,
-  children
+  children,
+  className
 }) => {
   var _a;
   const activity = (0, import_react_ui_core3.useNullableActivity)();
@@ -701,9 +731,12 @@ var BottomSheet = ({
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
-      className: container2({
-        transitionState: (0, import_react_ui_core3.useLazy)(transitionState)
-      }),
+      className: (0, import_clsx3.default)(
+        container2({
+          transitionState: (0, import_react_ui_core3.useLazy)(transitionState)
+        }),
+        className
+      ),
       ref: containerRef,
       style: (0, import_dynamic4.assignInlineVars)(
         compactMap({
@@ -728,9 +761,10 @@ var BottomSheet_default = BottomSheet;
 
 // src/components/Modal.tsx
 var import_react8 = require("@stackflow/react");
+var import_react_ui_core4 = require("@stackflow/react-ui-core");
 var import_dynamic5 = require("@vanilla-extract/dynamic");
+var import_clsx4 = __toESM(require("clsx"));
 var import_react9 = require("react");
-var import_react_ui_core4 = require("@stackflow/react-ui-core");
 
 // src/components/Modal.css.ts
 var import_createRuntimeFn5 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -748,7 +782,8 @@ var Modal = ({
   borderRadius = "1rem",
   maxWidth,
   onOutsideClick,
-  children
+  children,
+  className
 }) => {
   var _a;
   const activity = (0, import_react_ui_core4.useNullableActivity)();
@@ -791,9 +826,12 @@ var Modal = ({
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
-      className: container3({
-        transitionState: (0, import_react_ui_core4.useLazy)(transitionState)
-      }),
+      className: (0, import_clsx4.default)(
+        container3({
+          transitionState: (0, import_react_ui_core4.useLazy)(transitionState)
+        }),
+        className
+      ),
       ref: containerRef,
       style: (0, import_dynamic5.assignInlineVars)(
         compactMap({