@stackflow/plugin-basic-ui 1.3.5-alpha.3 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/dist/components/AppBar.css.d.ts +17 -2
  2. package/dist/components/AppBar.d.ts +3 -2
  3. package/dist/components/AppScreen.css.d.ts +11 -2
  4. package/dist/components/AppScreen.d.ts +2 -1
  5. package/dist/hooks/useStyleEffectOffset.d.ts +2 -1
  6. package/dist/index.css +34 -20
  7. package/dist/index.css.map +3 -3
  8. package/dist/index.js +89 -40
  9. package/dist/index.js.map +2 -2
  10. package/dist/index.mjs +89 -40
  11. package/dist/index.mjs.map +2 -2
  12. package/package.json +5 -5
  13. package/src/components/AppBar.css.ts +19 -2
  14. package/src/components/AppBar.tsx +12 -11
  15. package/src/components/AppScreen.css.ts +11 -2
  16. package/src/components/AppScreen.tsx +67 -26
  17. package/src/components/BottomSheet.tsx +3 -0
  18. package/src/components/Modal.tsx +3 -0
  19. package/src/hooks/useStyleEffectOffset.ts +24 -5
package/dist/components/AppBar.css.d.ts CHANGED
@@ -4,8 +4,8 @@ export declare const appBar: import("@vanilla-extract/recipes/dist/declarations/
4
4
  boxShadow: `inset 0px calc(-1 * var(--${string})) 0 var(--${string})` | `inset 0px calc(-1 * var(--${string})) 0 var(--${string}, ${string})` | `inset 0px calc(-1 * var(--${string})) 0 var(--${string}, ${number})` | `inset 0px calc(-1 * var(--${string}, ${string})) 0 var(--${string})` | `inset 0px calc(-1 * var(--${string}, ${string})) 0 var(--${string}, ${string})` | `inset 0px calc(-1 * var(--${string}, ${string})) 0 var(--${string}, ${number})` | `inset 0px calc(-1 * var(--${string}, ${number})) 0 var(--${string})` | `inset 0px calc(-1 * var(--${string}, ${number})) 0 var(--${string}, ${string})` | `inset 0px calc(-1 * var(--${string}, ${number})) 0 var(--${string}, ${number})`;
5
5
  };
6
6
  };
7
- presentModalFullScreen: {
8
- true: {
7
+ modalPresentationStyle: {
8
+ fullScreen: {
9
9
  selectors: {
10
10
  [x: string]: {
11
11
  transform: "translate3d(0, 100vh, 0)";
@@ -17,6 +17,21 @@ export declare const appBar: import("@vanilla-extract/recipes/dist/declarations/
17
17
  };
18
18
  };
19
19
  };
20
+ activityEnterStyle: {
21
+ slideInLeft: {
22
+ selectors: {
23
+ [x: string]: {
24
+ opacity: number;
25
+ transform: "translate3d(0, 0, 0)";
26
+ transition?: undefined;
27
+ } | {
28
+ transform: "translate3d(100%, 0, 0)";
29
+ transition: string;
30
+ opacity?: undefined;
31
+ };
32
+ };
33
+ };
34
+ };
20
35
  }>;
21
36
  export declare const safeArea: string;
22
37
  export declare const container: string;
package/dist/components/AppBar.d.ts CHANGED
@@ -16,8 +16,8 @@ declare const AppBar: import("react").ForwardRefExoticComponent<Partial<Pick<{
16
16
  minSafeAreaInsetTop: string;
17
17
  }, "height" | "backgroundColor" | "borderColor" | "overflow" | "borderColorTransitionDuration" | "borderSize" | "heightTransitionDuration" | "iconColor" | "iconColorTransitionDuration" | "textColor" | "textColorTransitionDuration" | "backgroundColorTransitionDuration">> & {
18
18
  title?: React.ReactNode;
19
- appendLeft?: (() => React.ReactNode) | undefined;
20
- appendRight?: (() => React.ReactNode) | undefined;
19
+ renderLeft?: (() => React.ReactNode) | undefined;
20
+ renderRight?: (() => React.ReactNode) | undefined;
21
21
  backButton?: {
22
22
  renderIcon?: (() => React.ReactNode) | undefined;
23
23
  ariaLabel?: string | undefined;
@@ -35,6 +35,7 @@ declare const AppBar: import("react").ForwardRefExoticComponent<Partial<Pick<{
35
35
  closeButtonLocation?: "left" | "right" | undefined;
36
36
  border?: boolean | undefined;
37
37
  modalPresentationStyle?: "fullScreen" | undefined;
38
+ activityEnterStyle?: "slideInLeft" | undefined;
38
39
  onTopClick?: ((e: React.MouseEvent) => void) | undefined;
39
40
  } & import("react").RefAttributes<HTMLDivElement>>;
40
41
  export default AppBar;
package/dist/components/AppScreen.css.d.ts CHANGED
@@ -42,8 +42,8 @@ export declare const paper: import("@vanilla-extract/recipes/dist/declarations/s
42
42
  };
43
43
  })[];
44
44
  };
45
- presentModalFullScreen: {
46
- true: {
45
+ modalPresentationStyle: {
46
+ fullScreen: {
47
47
  selectors: {
48
48
  [x: string]: {
49
49
  transform: "translate3d(0, 100%, 0)";
@@ -51,6 +51,15 @@ export declare const paper: import("@vanilla-extract/recipes/dist/declarations/s
51
51
  };
52
52
  };
53
53
  };
54
+ activityEnterStyle: {
55
+ slideInLeft: {
56
+ selectors: {
57
+ [x: string]: {
58
+ transform: "translate3d(50%, 0, 0)";
59
+ };
60
+ };
61
+ };
62
+ };
54
63
  }>;
55
64
  export declare const edge: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
56
65
  hasAppBar: {
package/dist/components/AppScreen.d.ts CHANGED
@@ -11,7 +11,8 @@ export declare function useAppScreen(): AppScreenContext;
11
11
  export declare type AppScreenProps = Partial<Pick<GlobalVars, "backgroundColor" | "dimBackgroundColor">> & {
12
12
  appBar?: Omit<PropOf<typeof AppBar>, "theme" | "modalPresentationStyle" | "ref" | "key">;
13
13
  preventSwipeBack?: boolean;
14
- modalPresentationStyle?: "fullScreen";
14
+ CUPERTINO_ONLY_modalPresentationStyle?: "fullScreen";
15
+ ANDROID_ONLY_activityEnterStyle?: "slideInLeft";
15
16
  children: React.ReactNode;
16
17
  };
17
18
  declare const AppScreen: React.FC<AppScreenProps>;
package/dist/hooks/useStyleEffectOffset.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  /// <reference types="react" />
2
2
  export declare const OFFSET_PX_ANDROID = 32;
3
3
  export declare const OFFSET_PX_CUPERTINO = 80;
4
- export declare function useStyleEffectOffset({ refs, theme, hasEffect, }: {
4
+ export declare function useStyleEffectOffset({ refs, theme, activityEnterStyle, hasEffect, }: {
5
5
  refs: Array<React.RefObject<any>>;
6
6
  theme: "android" | "cupertino";
7
+ activityEnterStyle?: "slideInLeft";
7
8
  hasEffect?: boolean;
8
9
  }): void;
package/dist/index.css CHANGED
@@ -105,7 +105,7 @@
105
105
  background: none;
106
106
  }
107
107
 
108
- /* vanilla-extract-css-ns:src/components/AppScreen.css.ts.vanilla.css?source=#H4sIAAAAAAAAE9WU0bKaMBCG732K3HRGpsQJenpOizd9k05IIgZDQkPQ03bOuzcEUAIK6vSmjhfisl/+f3ezqx8RFbuXzcsr+LMAIMHkkGpVSQqJEkrH4Ij1EsLS2MBOqBMsRJVyCRNccgIrDinP4TAr2C4+FquO/PYkeZr61VGNxrLkhisZN793SuctuXsTBSFQBSbc/BpFPCS5IGtMSxTYsA1dRgh9CgGyXz+Ju6SWHwO0tU+/IZeUvceD46KgDp64EJDssUxZ3OW1xJ+vNFtnCAzge8bTvYlBhDTLt14tYyC4ZFjDVGPKmTTLp/oVAp0meIkag7VHZ9Ie1XzOgr71tIXjMO6Fu6hXnug6NpnGkjks8lqSNcEj064CNl4SrYSoSwdPLDlwA8/RJsRlatutKrKf6N963L/zsPgC4rg7p8EnWDtNlJeFwFaQVJJ5TY/AQP59Y3iulavWCNVrVxbOvNvrXXZ5dUIK8q/DaHizKzfjNsoN95Qt9IAtdI+t/lDea7IBHf7J7glBgSm1kweNKma3IS4K+6Bhswzg5XBIK43rH246e8j5Deszg1sDKWamoJ1Jv0a5Szpxava2wqv1l3Z33bhbGz9bNkc+ZeKyMAkWxN0YAB/FODnfy6oolDYlWHp1JUpakF22Jd4xiDXD1lTJTB0NAid9MCuDxjhhDyoCn0GO3+/Oyu2f1+SFM+pdAT8mzDN5/D993xTeWf4LpNp3kwwJAAA= */
108
+ /* vanilla-extract-css-ns:src/components/AppScreen.css.ts.vanilla.css?source=#H4sIAAAAAAAAE9WU0bKaMBCG732K3HRGpsQJes5pizd9k05IIgZDQkPQ03bOuzcEUAIK6vSmjhfisl/+3f2zqx8RFbuXzcsb+LMAIMHkkGpVSQqJEkrH4Ij1EsLS2MBOqBMsRJVyCRNccgIrDinP4TAr2C4+FquO/OVJ8jT1q6MajWXJDVcybn7vlM5bcvcmCkKgCky4+TWKeEhyQdaYliiwYRu6jBD6FAJkv34Sd0ktPwZoa59+Qy4pe48Hx0VBHTxxISDZY5myuMtriT/faLbOEBjA94ynexODCGmWb71exkBwybCGqcaUM2mWT80rBDpN8BI1BdY1uiLtUc3nLOhbT1s4DuNeuIt67YmuY5NpLJnDIm8kWRM8Mu06YOMl0UqIunXwxJIDN/AcbUJcpnbcqiL7ifmtx/M7m8UXEMfdOQ0+wdpporwsBLaCpJLMG3oEBvLvs+G5V65bI1RvXFk4825vdtnl1QkpyL8OI/NmV27GbZQz91RZ6IGy0D1l9U15b5EN6PBPdk8ICkypdR40qpjdhrgo7IOGzTKAl8MhrTSufzh39pDzG9ZnBrcMKWZc0HryphHyqfzX62tVupwTp2ZvB7Rav7ar78bV3PjZqjnxqR5c9i3BgrgLB+CjGCfne1kVhdKmBEtvLERJC7K7usQ7BrFm2BZVMlNHg8BJH1htMFcn7EFF4DPI8fvdWbn985q8cEa9a+DHRPFMHv/Pum8K70r+CyWqxT1LCQAA */
109
109
  ._1dlf4346 {
110
110
  background-color: var(--stackflow-plugin-basic-ui-dim-background-color);
111
111
  }
@@ -170,11 +170,14 @@
170
170
  ._1q6dj2j1 ._1dlf434l {
171
171
  transform: translate3d(0, 100%, 0);
172
172
  }
173
- ._1dlf434m {
173
+ ._1q6dj2j0 ._1dlf434m {
174
+ transform: translate3d(50%, 0, 0);
175
+ }
176
+ ._1dlf434n {
174
177
  width: 1.25rem;
175
178
  z-index: var(--_1dlf4343);
176
179
  }
177
- ._1dlf434n {
180
+ ._1dlf434o {
178
181
  top: var(--stackflow-plugin-basic-ui-app-bar-height);
179
182
  height: calc(100% - var(--stackflow-plugin-basic-ui-app-bar-height));
180
183
  }
@@ -189,7 +192,7 @@
189
192
  }
190
193
  }
191
194
 
192
- /* vanilla-extract-css-ns:src/components/AppBar.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+1YS2/bMAy+91foMiAZIkPOo+2c2w677bQfUMi2nKhRJM9SXh323yfJL9mOnaQIdiga5GBLJEV+/Egx8V7802aG5wsE/jwAsKUcrgldrVUA9jgbQSgVjjYJEweYst1Kb4dY0gjuKMRpql8yWOuMlw9/H7zSom8tij3JjPr19kqNprWptRZq5VUmdjyGkWAiu95qW1NbB+ANUh6TY2nlxY9ZMp/N53bzQBmD0RrzFQmAyjCXici2EyBSHFF1MiJ2lSoqeNBx7d2ewdoqjHcZNg/jCQjFEco1jsXhessii0k2YLVA+Pdj/Dp99UEL7FSUseFQCrZTpCufAxa2VSu4CuQYVmQWj3yEvkwA0t/xR4BvUscJkGyAg9qIFKwJAFr246OR8VFGth8RoGaJoXFVSJ0dA6QOvvw0Mc2FvjnwTi7IYke2Fm3kxB/OSUFYpxvN8m5UQRYAyiVRAKVHEGEWjaAPvt6Ko6RvZDwG6F3499byfKggLeHQfv1JOIdEDo38s5SbTy5KO6Sbu8LDuXCJNtRkP3N6VU4rvBYWr3Kw2eLj6JbhRuKEQJwRDG2RQyVSfXAkuFbnanRu2wJ/3/MI3/cd5UT62Ij02lOr8a3Jlnz5RitDg0bu41M+XeA4pnylL0SAvIW+9JoyAdmmOq1GMqYyZVi3aS44aUg92/0bJ0GqM+fMgG7AJZlmCG3lBNxWIrXdHgjMSBmrdQCm3jQPuM7U1HvqYPAc4EjRPWnND960z210f58dd0LrRxFCs9wWNrob86DIUfXk4X7EuxWQ2qnLA7Mz4zWwMVOuieh1JxVNTtocV4TrJCeMHI0PmVrWBQAZSfSeXxAi0cJ2EtBLnv/8VBKFUU6qn2a+t6hkD8VaKFi8LIcS+mZLq+iteqlvOgh7J32n7ozfZgEzuuKQKrKVAYh0SCQ7G2e9ZeG0au6q9TvBW8q0cQM9I1CepDKD73cd6OYnjn7Z9x9ashPpI0JtpEqQLJSLHP5z1+MI6s1Gc35PixTp/7tE7njYpRukw+rIbdQFT5E363aq2Ao20K+pWvW64YToGGFRQKVCq/EPNJ/z5I6b10fIRLRp+J23VkvS+n8KwhhNJZUtjlG+JhntsrFad+wmfTecCTMzacuxwjslmooXrr1OinpOMg9a5R/4yDzf3hEAAA== */
195
+ /* vanilla-extract-css-ns:src/components/AppBar.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+1YyZLbIBC9z1dwSZWdMirkZRb5lkNuOeUDppCEbMYYFIG3SeXfA2hDkuWtXDlMxuWDBd1N9+vXTcveq39YTfB0hsDvBwDWlMMloYulCsAWZwMIpcLRKmFiB1O2WejtEEsawQ2FOE31QwZrneH84c+DV1r0rUWxJZlRv9xeqdG0NrbWQq28yMSGxzASTGSXW21rausAvEPKY7Ivrbz6MUumk+nUbu4oYzBaYr4gAVAZ5jIR2XoERIojqg5GxK5SRQUPOq7d7BmsrcJ4k2HzYzgCodhDucSx2F1uWWQxyU5YLRD+9Ri/jd980AI7FWVsOJSCbRTpyueAhW3VCq4COYYVmcQDH6EvI4D0d/gR4BvVcQIkG+CgNiIFawKA5v34aGR8lJH1RwSoWWJoWBVSZ8cAqYMvP01Mc6EXB97RGVnsyNaijZz4p3NSENbpRpO8G1WQBYBySRRA6R5EmEUD6IOv1+Io6TsZDgG6Cf/eWp6eKkhLOLRdfhLOIZFDI/8o5aajs9IO6aau8OlcuEQ71WQ/c3pRTo9149nNld9pLGHb6n986+UwPFoYygFyjfeDa4ZIiRMCcUYwtM0UKpHqwyLBtTpXg2PbFtD7nkf4tu8oJ9KnRqSXnlqNyU0W5MtXWjk10OU+PudTHI5jyhd68ADIm+nhoikTkHWqy8dIxlSmDOui4IKThtSL3b9y4qY6c86s7QZcFu0EobUcgeuoX9vtgcCM7rFaBmDsjfOA60yNvacOBi8BjhTdktac5o373Eb399lxJ7J+FCE029rMRndlHhTZq5483I941wJSO3X+xcTp3g1sTF81Eb1tpKLJQZvjinCd5ISRvfEhU/O6ACAjid7zC0IkWthOXHrJ85+fSqIwykn1Cux7s0p2V6yFgsXzcvij77a0ip6pl/qmsKj3jcqpO+O3WcCMLjikiqxlACIdEsmOxllvWTitmrtq/U7wmjJt3EDPCJQHqcwLxjcd6OoHjn7a5+9ashPpI0JtpEqQLJSzHP5jt94A6s1Gc76lRYr0310idzzs3A3SYXXsNuqCp8ibdDtV3qIa6NdUrXrd6YToGGFRQKVCq/GfaD7HyU2a10fIRLRq+J3k45Ehaf1/EGGMppLKFscoX5KMdtlYrTt2F303nAkzM2nLscIbJZqKZ669Top6TjI/tMpfW56iAkYTAAA= */
193
196
  ._1yk3a450 {
194
197
  min-height: var(--stackflow-plugin-basic-ui-app-bar-min-height);
195
198
  }
@@ -249,36 +252,47 @@
249
252
  transform var(--_1dlf4340),
250
253
  opacity var(--_1dlf4340);
251
254
  }
252
- ._1yk3a455 {
255
+ ._1q6dj2j0 ._1yk3a455 {
256
+ opacity: 1;
257
+ transform: translate3d(0, 0, 0);
258
+ }
259
+ ._1q6dj2j0 ._1dlf434b ._1yk3a455 {
260
+ transform: translate3d(100%, 0, 0);
261
+ transition:
262
+ background-color var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration),
263
+ box-shadow var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration),
264
+ transform 0s;
265
+ }
266
+ ._1yk3a456 {
253
267
  height: max(var(--stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top), constant(safe-area-inset-top));
254
268
  height: max(var(--stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top), env(safe-area-inset-top));
255
269
  }
256
- ._1yk3a456 {
270
+ ._1yk3a457 {
257
271
  height: var(--stackflow-plugin-basic-ui-app-bar-height);
258
272
  transition: height var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration);
259
273
  }
260
- ._1yk3a457 {
274
+ ._1yk3a458 {
261
275
  padding: 0 0.5rem;
262
276
  }
263
- ._1yk3a457:empty {
277
+ ._1yk3a458:empty {
264
278
  display: none;
265
279
  }
266
- ._1yk3a458 {
280
+ ._1yk3a459 {
267
281
  color: var(--stackflow-plugin-basic-ui-app-bar-icon-color);
268
282
  transition: opacity 300ms, color var(--stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration);
269
283
  width: 2.25rem;
270
284
  height: 2.75rem;
271
285
  }
272
- ._1yk3a458:active {
286
+ ._1yk3a459:active {
273
287
  opacity: 0.2;
274
288
  transition: opacity 0s, color var(--stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration);
275
289
  }
276
- ._1yk3a45b {
290
+ ._1yk3a45c {
277
291
  width: var(--_1dlf4345);
278
292
  color: var(--stackflow-plugin-basic-ui-app-bar-text-color);
279
293
  transition: height var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration), color var(--stackflow-plugin-basic-ui-app-bar-text-color-transition-duration);
280
294
  }
281
- ._1q6dj2j0 ._1yk3a45b {
295
+ ._1q6dj2j0 ._1yk3a45c {
282
296
  width: 100%;
283
297
  justify-content: flex-start;
284
298
  padding-left: 1rem;
@@ -287,7 +301,7 @@
287
301
  font-weight: bold;
288
302
  box-sizing: border-box;
289
303
  }
290
- ._1q6dj2j1 ._1yk3a45b {
304
+ ._1q6dj2j1 ._1yk3a45c {
291
305
  position: absolute;
292
306
  display: flex;
293
307
  align-items: center;
@@ -302,10 +316,10 @@
302
316
  top: max(var(--stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top), constant(safe-area-inset-top));
303
317
  top: max(var(--stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top), env(safe-area-inset-top));
304
318
  }
305
- ._1q6dj2j0 ._1yk3a45c {
319
+ ._1q6dj2j0 ._1yk3a45d {
306
320
  padding-left: 0.375rem;
307
321
  }
308
- ._1yk3a45d {
322
+ ._1yk3a45e {
309
323
  left: 50%;
310
324
  height: 1.25rem;
311
325
  transform: translate(-50%);
@@ -313,22 +327,22 @@
313
327
  display: none;
314
328
  width: var(--_1dlf4345);
315
329
  }
316
- ._1q6dj2j1 ._1yk3a45d {
330
+ ._1q6dj2j1 ._1yk3a45e {
317
331
  display: block;
318
332
  }
319
- ._1yk3a45e {
333
+ ._1yk3a45f {
320
334
  text-overflow: ellipsis;
321
335
  font-size: inherit;
322
336
  font-weight: inherit;
323
337
  }
324
- ._1yk3a45f {
338
+ ._1yk3a45g {
325
339
  padding: 0 0.5rem;
326
340
  margin-left: auto;
327
341
  }
328
- ._1yk3a45f:empty {
342
+ ._1yk3a45g:empty {
329
343
  display: none;
330
344
  }
331
- ._1q6dj2j0 ._1yk3a45f {
345
+ ._1q6dj2j0 ._1yk3a45g {
332
346
  padding: 0 0.5rem 0 0;
333
347
  }
334
348
 
package/dist/index.css.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["vanilla-extract-css-ns:src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U30rDMBTG7/cUAW8UTGmrdVAfRtLktD1bmxPzZw7FdzcbG95s1LaCCKW9SML55XyQ73zJS/b6pDb5JmUfK8Y4d17Ibd3RGzddaFDzSjiUPGBcyG1jKWjFJXVkS3ZT1/XzAKWwv0DaphK36T07/UlW3A1d5K3QDj2S5ipYcViULHVDmKTeBA9qKi+MiRvLK7IK7DX96XpQ/6WLfkmUw3coWWb2P+VawKb1JXtICgv9OGqu5j4eTuuPMrY8Wy/P4vc4Hp0r38PeTxTxjc5+90mjeI2eq4Z2YA8FJWtRKdBjnOBEDVxYEBy1g2guMrH1sJMr8p567lqI0GkMrFAYXByEo6c+V8k527Il2/55tqVJMT7d8mT9t/E2UsCSb0u+Tcq34phvhlD7WAY70D6WadIQy74Agy2ZNuIJAAA=", "vanilla-extract-css-ns:src/styles/f.css.ts.vanilla.css?source=LmRodGh4cTAgewogIHdpZHRoOiAxMDAlOwp9Ci5kaHRoeHExIHsKICBoZWlnaHQ6IDEwMCU7Cn0KLmRodGh4cTIgewogIHRvcDogMDsKfQouZGh0aHhxMyB7CiAgbGVmdDogMDsKfQouZGh0aHhxNCB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5kaHRoeHE1IHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLmRodGh4cTcgewogIGRpc3BsYXk6IGZsZXg7Cn0KLmRodGh4cTggewogIGZsZXg6IDE7Cn0KLmRodGh4cTkgewogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KLmRodGh4cWEgewogIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDsKfQouZGh0aHhxYiB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLmRodGh4cWMgewogIG92ZXJmbG93OiBoaWRkZW47Cn0KLmRodGh4cWQgewogIHdoaXRlLXNwYWNlOiBub3dyYXA7Cn0KLmRodGh4cWUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKfQouZGh0aHhxZiB7CiAgY3Vyc29yOiBwb2ludGVyOwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0KLmRodGh4cWcgewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KLmRodGh4cWggewogIGJveC1zaXppbmc6IGNvbnRlbnQtYm94Owp9Ci5kaHRoeHFpIHsKICBhcHBlYXJhbmNlOiBub25lOwogIGJvcmRlcjogMDsKICBwYWRkaW5nOiAwOwogIGJhY2tncm91bmQ6IG5vbmU7Cn0=", "vanilla-extract-css-ns:src/components/AppScreen.css.ts.vanilla.css?source=#H4sIAAAAAAAAE9WU0bKaMBCG732K3HRGpsQJenpOizd9k05IIgZDQkPQ03bOuzcEUAIK6vSmjhfisl/+f3ezqx8RFbuXzcsr+LMAIMHkkGpVSQqJEkrH4Ij1EsLS2MBOqBMsRJVyCRNccgIrDinP4TAr2C4+FquO/PYkeZr61VGNxrLkhisZN793SuctuXsTBSFQBSbc/BpFPCS5IGtMSxTYsA1dRgh9CgGyXz+Ju6SWHwO0tU+/IZeUvceD46KgDp64EJDssUxZ3OW1xJ+vNFtnCAzge8bTvYlBhDTLt14tYyC4ZFjDVGPKmTTLp/oVAp0meIkag7VHZ9Ie1XzOgr71tIXjMO6Fu6hXnug6NpnGkjks8lqSNcEj064CNl4SrYSoSwdPLDlwA8/RJsRlatutKrKf6N963L/zsPgC4rg7p8EnWDtNlJeFwFaQVJJ5TY/AQP59Y3iulavWCNVrVxbOvNvrXXZ5dUIK8q/DaHizKzfjNsoN95Qt9IAtdI+t/lDea7IBHf7J7glBgSm1kweNKma3IS4K+6Bhswzg5XBIK43rH246e8j5Deszg1sDKWamoJ1Jv0a5Szpxava2wqv1l3Z33bhbGz9bNkc+ZeKyMAkWxN0YAB/FODnfy6oolDYlWHp1JUpakF22Jd4xiDXD1lTJTB0NAid9MCuDxjhhDyoCn0GO3+/Oyu2f1+SFM+pdAT8mzDN5/D993xTeWf4LpNp3kwwJAAA=", "vanilla-extract-css-ns:src/components/AppBar.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+1YS2/bMAy+91foMiAZIkPOo+2c2w677bQfUMi2nKhRJM9SXh323yfJL9mOnaQIdiga5GBLJEV+/Egx8V7802aG5wsE/jwAsKUcrgldrVUA9jgbQSgVjjYJEweYst1Kb4dY0gjuKMRpql8yWOuMlw9/H7zSom8tij3JjPr19kqNprWptRZq5VUmdjyGkWAiu95qW1NbB+ANUh6TY2nlxY9ZMp/N53bzQBmD0RrzFQmAyjCXici2EyBSHFF1MiJ2lSoqeNBx7d2ewdoqjHcZNg/jCQjFEco1jsXhessii0k2YLVA+Pdj/Dp99UEL7FSUseFQCrZTpCufAxa2VSu4CuQYVmQWj3yEvkwA0t/xR4BvUscJkGyAg9qIFKwJAFr246OR8VFGth8RoGaJoXFVSJ0dA6QOvvw0Mc2FvjnwTi7IYke2Fm3kxB/OSUFYpxvN8m5UQRYAyiVRAKVHEGEWjaAPvt6Ko6RvZDwG6F3499byfKggLeHQfv1JOIdEDo38s5SbTy5KO6Sbu8LDuXCJNtRkP3N6VU4rvBYWr3Kw2eLj6JbhRuKEQJwRDG2RQyVSfXAkuFbnanRu2wJ/3/MI3/cd5UT62Ij02lOr8a3Jlnz5RitDg0bu41M+XeA4pnylL0SAvIW+9JoyAdmmOq1GMqYyZVi3aS44aUg92/0bJ0GqM+fMgG7AJZlmCG3lBNxWIrXdHgjMSBmrdQCm3jQPuM7U1HvqYPAc4EjRPWnND960z210f58dd0LrRxFCs9wWNrob86DIUfXk4X7EuxWQ2qnLA7Mz4zWwMVOuieh1JxVNTtocV4TrJCeMHI0PmVrWBQAZSfSeXxAi0cJ2EtBLnv/8VBKFUU6qn2a+t6hkD8VaKFi8LIcS+mZLq+iteqlvOgh7J32n7ozfZgEzuuKQKrKVAYh0SCQ7G2e9ZeG0au6q9TvBW8q0cQM9I1CepDKD73cd6OYnjn7Z9x9ashPpI0JtpEqQLJSLHP5z1+MI6s1Gc35PixTp/7tE7njYpRukw+rIbdQFT5E363aq2Ao20K+pWvW64YToGGFRQKVCq/EPNJ/z5I6b10fIRLRp+J23VkvS+n8KwhhNJZUtjlG+JhntsrFad+wmfTecCTMzacuxwjslmooXrr1OinpOMg9a5R/4yDzf3hEAAA==", "vanilla-extract-css-ns:src/components/BottomSheet.css.ts.vanilla.css?source=Ll8xaHQzOGgwMyB7CiAgdHJhbnNpdGlvbjogdmFyKC0tXzFodDM4aDAwKTsKfQouXzFodDM4aDA3IHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDEwMCUsIDAsIDApOwp9Ci5fMWh0MzhoMGQgewogIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXN0YWNrZmxvdy1wbHVnaW4tYmFzaWMtdWktZGltLWJhY2tncm91bmQtY29sb3IpOwogIHotaW5kZXg6IHZhcigtLV8xaHQzOGgwMSk7CiAgb3BhY2l0eTogMDsKfQouXzFodDM4aDA0IC5fMWh0MzhoMGQsIC5fMWh0MzhoMDUgLl8xaHQzOGgwZCB7CiAgb3BhY2l0eTogMTsKfQouXzFodDM4aDA2IC5fMWh0MzhoMGQsIC5fMWh0MzhoMDcgLl8xaHQzOGgwZCB7CiAgb3BhY2l0eTogMDsKfQouXzFodDM4aDBlIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdGFja2Zsb3ctcGx1Z2luLWJhc2ljLXVpLWJhY2tncm91bmQtY29sb3IpOwogIHdpZHRoOiAxMDAlOwogIGJvcmRlci1yYWRpdXM6IHZhcigtLXN0YWNrZmxvdy1wbHVnaW4tYmFzaWMtdWktYm90dG9tLXNoZWV0LWJvcmRlci1yYWRpdXMpIHZhcigtLXN0YWNrZmxvdy1wbHVnaW4tYmFzaWMtdWktYm90dG9tLXNoZWV0LWJvcmRlci1yYWRpdXMpIDAgMDsKICB3aWxsLWNoYW5nZTogdHJhbnNmb3JtLCBvcGFjaXR5OwogIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgMTAwJSwgMCk7CiAgb3BhY2l0eTogMDsKfQouXzFodDM4aDA0IC5fMWh0MzhoMGUsIC5fMWh0MzhoMDUgLl8xaHQzOGgwZSB7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTsKICBvcGFjaXR5OiAxOwp9Ci5fMWh0MzhoMDYgLl8xaHQzOGgwZSwgLl8xaHQzOGgwNyAuXzFodDM4aDBlIHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDEwMCUsIDApOwogIG9wYWNpdHk6IDA7Cn0=", "vanilla-extract-css-ns:src/components/Modal.css.ts.vanilla.css?source=Ll81b3pnOGMzIHsKICB0cmFuc2l0aW9uOiB2YXIoLS1fNW96ZzhjMCk7Cn0KLl81b3pnOGM3IHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDEwMCUsIDAsIDApOwp9Ci5fNW96ZzhjZCB7CiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3RhY2tmbG93LXBsdWdpbi1iYXNpYy11aS1kaW0tYmFja2dyb3VuZC1jb2xvcik7CiAgei1pbmRleDogdmFyKC0tXzVvemc4YzEpOwogIG9wYWNpdHk6IDA7Cn0KLl81b3pnOGM0IC5fNW96ZzhjZCwgLl81b3pnOGM1IC5fNW96ZzhjZCB7CiAgb3BhY2l0eTogMTsKfQouXzVvemc4YzYgLl81b3pnOGNkLCAuXzVvemc4YzcgLl81b3pnOGNkIHsKICBvcGFjaXR5OiAwOwp9Ci5fNW96ZzhjZSB7CiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3RhY2tmbG93LXBsdWdpbi1iYXNpYy11aS1iYWNrZ3JvdW5kLWNvbG9yKTsKICB3aWR0aDogMTAwJTsKICBtYXJnaW46IDAgMi41cmVtOwogIGJveC1zaGFkb3c6IDBweCAwLjYyNXJlbSAyLjM3NXJlbSByZ2JhKDAsIDAsIDAsIDAuMTUpLCAwcHggLjU2MjVyZW0gMi44NzVyZW0gcmdiYSgwLCAwLCAwLCAwLjEyKSwgMHB4IC4zMTI1cmVtIC45Mzc1cmVtIHJnYmEoMCwgMCwgMCwgMC4xKTsKICBib3JkZXItcmFkaXVzOiB2YXIoLS1zdGFja2Zsb3ctcGx1Z2luLWJhc2ljLXVpLWJvdHRvbS1zaGVldC1ib3JkZXItcmFkaXVzKTsKICB3aWxsLWNoYW5nZTogdHJhbnNmb3JtLCBvcGFjaXR5OwogIHRyYW5zZm9ybTogc2NhbGUoMS4xKTsKICBvcGFjaXR5OiAwOwp9Ci5fNW96ZzhjNCAuXzVvemc4Y2UsIC5fNW96ZzhjNSAuXzVvemc4Y2UgewogIHRyYW5zZm9ybTogc2NhbGUoMSk7CiAgb3BhY2l0eTogMTsKfQouXzVvemc4YzYgLl81b3pnOGNlLCAuXzVvemc4YzcgLl81b3pnOGNlIHsKICB0cmFuc2Zvcm06IHNjYWxlKDEuMSk7CiAgb3BhY2l0eTogMDsKfQ=="],
4
- "sourcesContent": ["._1q6dj2j0 {\n --stackflow-plugin-basic-ui-background-color: #fff;\n --stackflow-plugin-basic-ui-dim-background-color: rgba(0, 0, 0, 0.15);\n --stackflow-plugin-basic-ui-transition-duration: 0s;\n --stackflow-plugin-basic-ui-computed-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-border-color: rgba(0, 0, 0, 0.07);\n --stackflow-plugin-basic-ui-app-bar-border-color-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-border-size: 1px;\n --stackflow-plugin-basic-ui-app-bar-height: 3.5rem;\n --stackflow-plugin-basic-ui-app-bar-height-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-min-height: 3.5rem;\n --stackflow-plugin-basic-ui-app-bar-icon-color: #212124;\n --stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-text-color: #212124;\n --stackflow-plugin-basic-ui-app-bar-text-color-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-background-color: #fff;\n --stackflow-plugin-basic-ui-app-bar-background-color-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-overflow: hidden;\n --stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top: 0px;\n --stackflow-plugin-basic-ui-bottom-sheet-border-radius: 1rem;\n}\n._1q6dj2j1 {\n --stackflow-plugin-basic-ui-background-color: #fff;\n --stackflow-plugin-basic-ui-dim-background-color: rgba(0, 0, 0, 0.15);\n --stackflow-plugin-basic-ui-transition-duration: 0s;\n --stackflow-plugin-basic-ui-computed-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-border-color: rgba(0, 0, 0, 0.07);\n --stackflow-plugin-basic-ui-app-bar-border-color-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-border-size: 0.5px;\n --stackflow-plugin-basic-ui-app-bar-height: 2.75rem;\n --stackflow-plugin-basic-ui-app-bar-height-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-min-height: 2.75rem;\n --stackflow-plugin-basic-ui-app-bar-icon-color: #212124;\n --stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-text-color: #212124;\n --stackflow-plugin-basic-ui-app-bar-text-color-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-background-color: #fff;\n --stackflow-plugin-basic-ui-app-bar-background-color-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-overflow: hidden;\n --stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top: 0px;\n --stackflow-plugin-basic-ui-bottom-sheet-border-radius: 1rem;\n}\n._1q6dj2j5 {\n pointer-events: none;\n}", ".dhthxq0 {\n width: 100%;\n}\n.dhthxq1 {\n height: 100%;\n}\n.dhthxq2 {\n top: 0;\n}\n.dhthxq3 {\n left: 0;\n}\n.dhthxq4 {\n position: absolute;\n}\n.dhthxq5 {\n position: relative;\n}\n.dhthxq7 {\n display: flex;\n}\n.dhthxq8 {\n flex: 1;\n}\n.dhthxq9 {\n align-items: center;\n}\n.dhthxqa {\n align-items: flex-end;\n}\n.dhthxqb {\n justify-content: center;\n}\n.dhthxqc {\n overflow: hidden;\n}\n.dhthxqd {\n white-space: nowrap;\n}\n.dhthxqe {\n text-align: center;\n}\n.dhthxqf {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n}\n.dhthxqg {\n box-sizing: border-box;\n}\n.dhthxqh {\n box-sizing: content-box;\n}\n.dhthxqi {\n appearance: none;\n border: 0;\n padding: 0;\n background: none;\n}", "._1dlf4346 {\n background-color: var(--stackflow-plugin-basic-ui-dim-background-color);\n}\n._1dlf4347 {\n background-color: var(--stackflow-plugin-basic-ui-background-color);\n}\n._1dlf4348 {\n transition: transform var(--_1dlf4340), opacity var(--_1dlf4340);\n}\n._1dlf434c {\n transform: translate3d(100%, 0, 0);\n}\n._1dlf434i {\n opacity: 0;\n z-index: var(--_1dlf4341);\n will-change: opacity;\n}\n._1q6dj2j0 ._1dlf434i {\n height: 10rem;\n background: linear-gradient(var(--stackflow-plugin-basic-ui-dim-background-color), rgba(0, 0, 0, 0));\n}\n\n ._1dlf4349 ._1dlf434i,\n ._1dlf434a ._1dlf434i\n {\n opacity: 1;\n}\n\n ._1dlf434b ._1dlf434i,\n ._1dlf434c ._1dlf434i\n {\n opacity: 0;\n}\n._1dlf434j {\n overflow-y: scroll;\n -webkit-overflow-scrolling: touch;\n z-index: var(--_1dlf4342);\n will-change: transform;\n}\n._1dlf434j::-webkit-scrollbar {\n display: none;\n}\n._1q6dj2j1 ._1dlf434j {\n transform: translate3d(100%, 0, 0);\n}\n\n ._1q6dj2j1 ._1dlf4349 ._1dlf434j,\n ._1q6dj2j1 ._1dlf434a ._1dlf434j\n {\n transform: translate3d(0, 0, 0);\n}\n._1q6dj2j0 ._1dlf434j {\n opacity: 0;\n transform: translate3d(0, 10rem, 0);\n}\n\n ._1q6dj2j0 ._1dlf4349 ._1dlf434j,\n ._1q6dj2j0 ._1dlf434a ._1dlf434j\n {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n}\n._1dlf434k {\n transition: transform var(--_1dlf4340), opacity var(--_1dlf4340), padding-top var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration);\n padding-top: var(--stackflow-plugin-basic-ui-app-bar-height);\n}\n._1q6dj2j1 ._1dlf434l {\n transform: translate3d(0, 100%, 0);\n}\n._1dlf434m {\n width: 1.25rem;\n z-index: var(--_1dlf4343);\n}\n._1dlf434n {\n top: var(--stackflow-plugin-basic-ui-app-bar-height);\n height: calc(100% - var(--stackflow-plugin-basic-ui-app-bar-height));\n}\n@supports (padding-top: constant(safe-area-inset-top)) {\n ._1dlf434k {\n padding-top: calc(var(--stackflow-plugin-basic-ui-app-bar-height) + max(var(--stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top), constant(safe-area-inset-top)));\n }\n}\n@supports (padding-top: env(safe-area-inset-top)) {\n ._1dlf434k {\n padding-top: calc(var(--stackflow-plugin-basic-ui-app-bar-height) + max(var(--stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top), env(safe-area-inset-top)));\n }\n}", "._1yk3a450 {\n min-height: var(--stackflow-plugin-basic-ui-app-bar-min-height);\n}\n._1yk3a451 {\n overflow: var(--stackflow-plugin-basic-ui-app-bar-overflow);\n}\n._1yk3a452 {\n background-color: var(--stackflow-plugin-basic-ui-app-bar-background-color);\n z-index: var(--_1dlf4344);\n will-change: transform, opacity;\n transition: background-color var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration), box-shadow var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration);\n}\n._1q6dj2j1 ._1yk3a452 {\n position: absolute;\n}\n._1q6dj2j1 ._1dlf434b ._1yk3a452 {\n transform: translate3d(100%, 0, 0);\n transition: background-color var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration), box-shadow var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration), transform 0s;\n}\n._1q6dj2j0 ._1yk3a452 {\n opacity: 0;\n transform: translate3d(0, 10rem, 0);\n transition: background-color var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration), box-shadow var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration), transform var(--_1dlf4340), opacity var(--_1dlf4340);\n}\n\n ._1q6dj2j0 ._1dlf4349 ._1yk3a452,\n ._1q6dj2j0 ._1dlf434a ._1yk3a452\n {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n}\n._1yk3a453 {\n box-shadow: inset 0px calc(-1 * var(--stackflow-plugin-basic-ui-app-bar-border-size)) 0 var(--stackflow-plugin-basic-ui-app-bar-border-color);\n}\n._1q6dj2j1 ._1yk3a454 {\n transform: translate3d(0, 100vh, 0);\n transition: background-color var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration), box-shadow var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration), transform var(--_1dlf4340), opacity var(--_1dlf4340);\n}\n\n ._1q6dj2j1 ._1dlf4349 ._1yk3a454,\n ._1q6dj2j1 ._1dlf434a ._1yk3a454\n {\n transform: translate3d(0, 0, 0);\n}\n._1q6dj2j1 ._1dlf434b ._1yk3a454 {\n transform: translate3d(0, 100vh, 0);\n transition: background-color var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration), box-shadow var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration), transform var(--_1dlf4340), opacity var(--_1dlf4340);\n}\n._1yk3a455 {\n height: max(var(--stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top), constant(safe-area-inset-top));\n height: max(var(--stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top), env(safe-area-inset-top));\n}\n._1yk3a456 {\n height: var(--stackflow-plugin-basic-ui-app-bar-height);\n transition: height var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration);\n}\n._1yk3a457 {\n padding: 0 0.5rem;\n}\n._1yk3a457:empty {\n display: none;\n}\n._1yk3a458 {\n color: var(--stackflow-plugin-basic-ui-app-bar-icon-color);\n transition: opacity 300ms, color var(--stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration);\n width: 2.25rem;\n height: 2.75rem;\n}\n._1yk3a458:active {\n opacity: 0.2;\n transition: opacity 0s, color var(--stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration);\n}\n._1yk3a45b {\n width: var(--_1dlf4345);\n color: var(--stackflow-plugin-basic-ui-app-bar-text-color);\n transition: height var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration), color var(--stackflow-plugin-basic-ui-app-bar-text-color-transition-duration);\n}\n._1q6dj2j0 ._1yk3a45b {\n width: 100%;\n justify-content: flex-start;\n padding-left: 1rem;\n font-size: 1.1875rem;\n line-height: 1.5;\n font-weight: bold;\n box-sizing: border-box;\n}\n._1q6dj2j1 ._1yk3a45b {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n font-family: -apple-system, BlinkMacSystemFont;\n font-weight: 600;\n font-size: 1rem;\n left: 50%;\n transform: translate(-50%);\n height: var(--stackflow-plugin-basic-ui-app-bar-height);\n top: max(var(--stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top), constant(safe-area-inset-top));\n top: max(var(--stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top), env(safe-area-inset-top));\n}\n._1q6dj2j0 ._1yk3a45c {\n padding-left: 0.375rem;\n}\n._1yk3a45d {\n left: 50%;\n height: 1.25rem;\n transform: translate(-50%);\n max-width: 5rem;\n display: none;\n width: var(--_1dlf4345);\n}\n._1q6dj2j1 ._1yk3a45d {\n display: block;\n}\n._1yk3a45e {\n text-overflow: ellipsis;\n font-size: inherit;\n font-weight: inherit;\n}\n._1yk3a45f {\n padding: 0 0.5rem;\n margin-left: auto;\n}\n._1yk3a45f:empty {\n display: none;\n}\n._1q6dj2j0 ._1yk3a45f {\n padding: 0 0.5rem 0 0;\n}", "._1ht38h03 {\n transition: var(--_1ht38h00);\n}\n._1ht38h07 {\n transform: translate3d(100%, 0, 0);\n}\n._1ht38h0d {\n background-color: var(--stackflow-plugin-basic-ui-dim-background-color);\n z-index: var(--_1ht38h01);\n opacity: 0;\n}\n._1ht38h04 ._1ht38h0d, ._1ht38h05 ._1ht38h0d {\n opacity: 1;\n}\n._1ht38h06 ._1ht38h0d, ._1ht38h07 ._1ht38h0d {\n opacity: 0;\n}\n._1ht38h0e {\n background-color: var(--stackflow-plugin-basic-ui-background-color);\n width: 100%;\n border-radius: var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius) var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius) 0 0;\n will-change: transform, opacity;\n transform: translate3d(0, 100%, 0);\n opacity: 0;\n}\n._1ht38h04 ._1ht38h0e, ._1ht38h05 ._1ht38h0e {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n}\n._1ht38h06 ._1ht38h0e, ._1ht38h07 ._1ht38h0e {\n transform: translate3d(0, 100%, 0);\n opacity: 0;\n}", "._5ozg8c3 {\n transition: var(--_5ozg8c0);\n}\n._5ozg8c7 {\n transform: translate3d(100%, 0, 0);\n}\n._5ozg8cd {\n background-color: var(--stackflow-plugin-basic-ui-dim-background-color);\n z-index: var(--_5ozg8c1);\n opacity: 0;\n}\n._5ozg8c4 ._5ozg8cd, ._5ozg8c5 ._5ozg8cd {\n opacity: 1;\n}\n._5ozg8c6 ._5ozg8cd, ._5ozg8c7 ._5ozg8cd {\n opacity: 0;\n}\n._5ozg8ce {\n background-color: var(--stackflow-plugin-basic-ui-background-color);\n width: 100%;\n margin: 0 2.5rem;\n box-shadow: 0px 0.625rem 2.375rem rgba(0, 0, 0, 0.15), 0px .5625rem 2.875rem rgba(0, 0, 0, 0.12), 0px .3125rem .9375rem rgba(0, 0, 0, 0.1);\n border-radius: var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius);\n will-change: transform, opacity;\n transform: scale(1.1);\n opacity: 0;\n}\n._5ozg8c4 ._5ozg8ce, ._5ozg8c5 ._5ozg8ce {\n transform: scale(1);\n opacity: 1;\n}\n._5ozg8c6 ._5ozg8ce, ._5ozg8c7 ._5ozg8ce {\n transform: scale(1.1);\n opacity: 0;\n}"],
5
- "mappings": ";AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;;;AC3CF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AAAA;;;ACxDF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAGM;AAAA;AAGN;AAAA;AAGM;AAAA;AAGN;AAAA;AAEF;AACE;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGQ;AAAA;AAGR;AAAA;AAEF;AACE;AACA;AAAA;AAGQ;AAAA;AAGR;AACA;AAAA;AAEF;AACE;AAAA;AAAA;AAAA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AACE;AAAA;AAAA;AAGJ;AACE;AACE;AAAA;AAAA;;;ACpFJ;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AAAA;AAAA;AAAA;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGQ;AAAA;AAGR;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGU;AAAA;AAGV;AAAA;AAEF;AACE;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;;;AChIF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;;;AC/BF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;",
3
+ "sources": ["vanilla-extract-css-ns:src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U30rDMBTG7/cUAW8UTGmrdVAfRtLktD1bmxPzZw7FdzcbG95s1LaCCKW9SML55XyQ73zJS/b6pDb5JmUfK8Y4d17Ibd3RGzddaFDzSjiUPGBcyG1jKWjFJXVkS3ZT1/XzAKWwv0DaphK36T07/UlW3A1d5K3QDj2S5ipYcViULHVDmKTeBA9qKi+MiRvLK7IK7DX96XpQ/6WLfkmUw3coWWb2P+VawKb1JXtICgv9OGqu5j4eTuuPMrY8Wy/P4vc4Hp0r38PeTxTxjc5+90mjeI2eq4Z2YA8FJWtRKdBjnOBEDVxYEBy1g2guMrH1sJMr8p567lqI0GkMrFAYXByEo6c+V8k527Il2/55tqVJMT7d8mT9t/E2UsCSb0u+Tcq34phvhlD7WAY70D6WadIQy74Agy2ZNuIJAAA=", "vanilla-extract-css-ns:src/styles/f.css.ts.vanilla.css?source=LmRodGh4cTAgewogIHdpZHRoOiAxMDAlOwp9Ci5kaHRoeHExIHsKICBoZWlnaHQ6IDEwMCU7Cn0KLmRodGh4cTIgewogIHRvcDogMDsKfQouZGh0aHhxMyB7CiAgbGVmdDogMDsKfQouZGh0aHhxNCB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5kaHRoeHE1IHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLmRodGh4cTcgewogIGRpc3BsYXk6IGZsZXg7Cn0KLmRodGh4cTggewogIGZsZXg6IDE7Cn0KLmRodGh4cTkgewogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KLmRodGh4cWEgewogIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDsKfQouZGh0aHhxYiB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLmRodGh4cWMgewogIG92ZXJmbG93OiBoaWRkZW47Cn0KLmRodGh4cWQgewogIHdoaXRlLXNwYWNlOiBub3dyYXA7Cn0KLmRodGh4cWUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKfQouZGh0aHhxZiB7CiAgY3Vyc29yOiBwb2ludGVyOwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0KLmRodGh4cWcgewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KLmRodGh4cWggewogIGJveC1zaXppbmc6IGNvbnRlbnQtYm94Owp9Ci5kaHRoeHFpIHsKICBhcHBlYXJhbmNlOiBub25lOwogIGJvcmRlcjogMDsKICBwYWRkaW5nOiAwOwogIGJhY2tncm91bmQ6IG5vbmU7Cn0=", "vanilla-extract-css-ns:src/components/AppScreen.css.ts.vanilla.css?source=#H4sIAAAAAAAAE9WU0bKaMBCG732K3HRGpsQJes5pizd9k05IIgZDQkPQ03bOuzcEUAIK6vSmjhfisl/+3f2zqx8RFbuXzcsb+LMAIMHkkGpVSQqJEkrH4Ij1EsLS2MBOqBMsRJVyCRNccgIrDinP4TAr2C4+FquO/OVJ8jT1q6MajWXJDVcybn7vlM5bcvcmCkKgCky4+TWKeEhyQdaYliiwYRu6jBD6FAJkv34Sd0ktPwZoa59+Qy4pe48Hx0VBHTxxISDZY5myuMtriT/faLbOEBjA94ynexODCGmWb71exkBwybCGqcaUM2mWT80rBDpN8BI1BdY1uiLtUc3nLOhbT1s4DuNeuIt67YmuY5NpLJnDIm8kWRM8Mu06YOMl0UqIunXwxJIDN/AcbUJcpnbcqiL7ifmtx/M7m8UXEMfdOQ0+wdpporwsBLaCpJLMG3oEBvLvs+G5V65bI1RvXFk4825vdtnl1QkpyL8OI/NmV27GbZQz91RZ6IGy0D1l9U15b5EN6PBPdk8ICkypdR40qpjdhrgo7IOGzTKAl8MhrTSufzh39pDzG9ZnBrcMKWZc0HryphHyqfzX62tVupwTp2ZvB7Rav7ar78bV3PjZqjnxqR5c9i3BgrgLB+CjGCfne1kVhdKmBEtvLERJC7K7usQ7BrFm2BZVMlNHg8BJH1htMFcn7EFF4DPI8fvdWbn985q8cEa9a+DHRPFMHv/Pum8K70r+CyWqxT1LCQAA", "vanilla-extract-css-ns:src/components/AppBar.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+1YyZLbIBC9z1dwSZWdMirkZRb5lkNuOeUDppCEbMYYFIG3SeXfA2hDkuWtXDlMxuWDBd1N9+vXTcveq39YTfB0hsDvBwDWlMMloYulCsAWZwMIpcLRKmFiB1O2WejtEEsawQ2FOE31QwZrneH84c+DV1r0rUWxJZlRv9xeqdG0NrbWQq28yMSGxzASTGSXW21rausAvEPKY7Ivrbz6MUumk+nUbu4oYzBaYr4gAVAZ5jIR2XoERIojqg5GxK5SRQUPOq7d7BmsrcJ4k2HzYzgCodhDucSx2F1uWWQxyU5YLRD+9Ri/jd980AI7FWVsOJSCbRTpyueAhW3VCq4COYYVmcQDH6EvI4D0d/gR4BvVcQIkG+CgNiIFawKA5v34aGR8lJH1RwSoWWJoWBVSZ8cAqYMvP01Mc6EXB97RGVnsyNaijZz4p3NSENbpRpO8G1WQBYBySRRA6R5EmEUD6IOv1+Io6TsZDgG6Cf/eWp6eKkhLOLRdfhLOIZFDI/8o5aajs9IO6aau8OlcuEQ71WQ/c3pRTo9149nNld9pLGHb6n986+UwPFoYygFyjfeDa4ZIiRMCcUYwtM0UKpHqwyLBtTpXg2PbFtD7nkf4tu8oJ9KnRqSXnlqNyU0W5MtXWjk10OU+PudTHI5jyhd68ADIm+nhoikTkHWqy8dIxlSmDOui4IKThtSL3b9y4qY6c86s7QZcFu0EobUcgeuoX9vtgcCM7rFaBmDsjfOA60yNvacOBi8BjhTdktac5o373Eb399lxJ7J+FCE029rMRndlHhTZq5483I941wJSO3X+xcTp3g1sTF81Eb1tpKLJQZvjinCd5ISRvfEhU/O6ACAjid7zC0IkWthOXHrJ85+fSqIwykn1Cux7s0p2V6yFgsXzcvij77a0ip6pl/qmsKj3jcqpO+O3WcCMLjikiqxlACIdEsmOxllvWTitmrtq/U7wmjJt3EDPCJQHqcwLxjcd6OoHjn7a5+9ashPpI0JtpEqQLJSzHP5jt94A6s1Gc76lRYr0310idzzs3A3SYXXsNuqCp8ibdDtV3qIa6NdUrXrd6YToGGFRQKVCq/GfaD7HyU2a10fIRLRq+J3k45Ehaf1/EGGMppLKFscoX5KMdtlYrTt2F303nAkzM2nLscIbJZqKZ669Top6TjI/tMpfW56iAkYTAAA=", "vanilla-extract-css-ns:src/components/BottomSheet.css.ts.vanilla.css?source=Ll8xaHQzOGgwMyB7CiAgdHJhbnNpdGlvbjogdmFyKC0tXzFodDM4aDAwKTsKfQouXzFodDM4aDA3IHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDEwMCUsIDAsIDApOwp9Ci5fMWh0MzhoMGQgewogIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXN0YWNrZmxvdy1wbHVnaW4tYmFzaWMtdWktZGltLWJhY2tncm91bmQtY29sb3IpOwogIHotaW5kZXg6IHZhcigtLV8xaHQzOGgwMSk7CiAgb3BhY2l0eTogMDsKfQouXzFodDM4aDA0IC5fMWh0MzhoMGQsIC5fMWh0MzhoMDUgLl8xaHQzOGgwZCB7CiAgb3BhY2l0eTogMTsKfQouXzFodDM4aDA2IC5fMWh0MzhoMGQsIC5fMWh0MzhoMDcgLl8xaHQzOGgwZCB7CiAgb3BhY2l0eTogMDsKfQouXzFodDM4aDBlIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zdGFja2Zsb3ctcGx1Z2luLWJhc2ljLXVpLWJhY2tncm91bmQtY29sb3IpOwogIHdpZHRoOiAxMDAlOwogIGJvcmRlci1yYWRpdXM6IHZhcigtLXN0YWNrZmxvdy1wbHVnaW4tYmFzaWMtdWktYm90dG9tLXNoZWV0LWJvcmRlci1yYWRpdXMpIHZhcigtLXN0YWNrZmxvdy1wbHVnaW4tYmFzaWMtdWktYm90dG9tLXNoZWV0LWJvcmRlci1yYWRpdXMpIDAgMDsKICB3aWxsLWNoYW5nZTogdHJhbnNmb3JtLCBvcGFjaXR5OwogIHRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgMTAwJSwgMCk7CiAgb3BhY2l0eTogMDsKfQouXzFodDM4aDA0IC5fMWh0MzhoMGUsIC5fMWh0MzhoMDUgLl8xaHQzOGgwZSB7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTsKICBvcGFjaXR5OiAxOwp9Ci5fMWh0MzhoMDYgLl8xaHQzOGgwZSwgLl8xaHQzOGgwNyAuXzFodDM4aDBlIHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDAsIDEwMCUsIDApOwogIG9wYWNpdHk6IDA7Cn0=", "vanilla-extract-css-ns:src/components/Modal.css.ts.vanilla.css?source=Ll81b3pnOGMzIHsKICB0cmFuc2l0aW9uOiB2YXIoLS1fNW96ZzhjMCk7Cn0KLl81b3pnOGM3IHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKDEwMCUsIDAsIDApOwp9Ci5fNW96ZzhjZCB7CiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3RhY2tmbG93LXBsdWdpbi1iYXNpYy11aS1kaW0tYmFja2dyb3VuZC1jb2xvcik7CiAgei1pbmRleDogdmFyKC0tXzVvemc4YzEpOwogIG9wYWNpdHk6IDA7Cn0KLl81b3pnOGM0IC5fNW96ZzhjZCwgLl81b3pnOGM1IC5fNW96ZzhjZCB7CiAgb3BhY2l0eTogMTsKfQouXzVvemc4YzYgLl81b3pnOGNkLCAuXzVvemc4YzcgLl81b3pnOGNkIHsKICBvcGFjaXR5OiAwOwp9Ci5fNW96ZzhjZSB7CiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc3RhY2tmbG93LXBsdWdpbi1iYXNpYy11aS1iYWNrZ3JvdW5kLWNvbG9yKTsKICB3aWR0aDogMTAwJTsKICBtYXJnaW46IDAgMi41cmVtOwogIGJveC1zaGFkb3c6IDBweCAwLjYyNXJlbSAyLjM3NXJlbSByZ2JhKDAsIDAsIDAsIDAuMTUpLCAwcHggLjU2MjVyZW0gMi44NzVyZW0gcmdiYSgwLCAwLCAwLCAwLjEyKSwgMHB4IC4zMTI1cmVtIC45Mzc1cmVtIHJnYmEoMCwgMCwgMCwgMC4xKTsKICBib3JkZXItcmFkaXVzOiB2YXIoLS1zdGFja2Zsb3ctcGx1Z2luLWJhc2ljLXVpLWJvdHRvbS1zaGVldC1ib3JkZXItcmFkaXVzKTsKICB3aWxsLWNoYW5nZTogdHJhbnNmb3JtLCBvcGFjaXR5OwogIHRyYW5zZm9ybTogc2NhbGUoMS4xKTsKICBvcGFjaXR5OiAwOwp9Ci5fNW96ZzhjNCAuXzVvemc4Y2UsIC5fNW96ZzhjNSAuXzVvemc4Y2UgewogIHRyYW5zZm9ybTogc2NhbGUoMSk7CiAgb3BhY2l0eTogMTsKfQouXzVvemc4YzYgLl81b3pnOGNlLCAuXzVvemc4YzcgLl81b3pnOGNlIHsKICB0cmFuc2Zvcm06IHNjYWxlKDEuMSk7CiAgb3BhY2l0eTogMDsKfQ=="],
4
+ "sourcesContent": ["._1q6dj2j0 {\n --stackflow-plugin-basic-ui-background-color: #fff;\n --stackflow-plugin-basic-ui-dim-background-color: rgba(0, 0, 0, 0.15);\n --stackflow-plugin-basic-ui-transition-duration: 0s;\n --stackflow-plugin-basic-ui-computed-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-border-color: rgba(0, 0, 0, 0.07);\n --stackflow-plugin-basic-ui-app-bar-border-color-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-border-size: 1px;\n --stackflow-plugin-basic-ui-app-bar-height: 3.5rem;\n --stackflow-plugin-basic-ui-app-bar-height-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-min-height: 3.5rem;\n --stackflow-plugin-basic-ui-app-bar-icon-color: #212124;\n --stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-text-color: #212124;\n --stackflow-plugin-basic-ui-app-bar-text-color-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-background-color: #fff;\n --stackflow-plugin-basic-ui-app-bar-background-color-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-overflow: hidden;\n --stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top: 0px;\n --stackflow-plugin-basic-ui-bottom-sheet-border-radius: 1rem;\n}\n._1q6dj2j1 {\n --stackflow-plugin-basic-ui-background-color: #fff;\n --stackflow-plugin-basic-ui-dim-background-color: rgba(0, 0, 0, 0.15);\n --stackflow-plugin-basic-ui-transition-duration: 0s;\n --stackflow-plugin-basic-ui-computed-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-border-color: rgba(0, 0, 0, 0.07);\n --stackflow-plugin-basic-ui-app-bar-border-color-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-border-size: 0.5px;\n --stackflow-plugin-basic-ui-app-bar-height: 2.75rem;\n --stackflow-plugin-basic-ui-app-bar-height-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-min-height: 2.75rem;\n --stackflow-plugin-basic-ui-app-bar-icon-color: #212124;\n --stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-text-color: #212124;\n --stackflow-plugin-basic-ui-app-bar-text-color-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-background-color: #fff;\n --stackflow-plugin-basic-ui-app-bar-background-color-transition-duration: 0s;\n --stackflow-plugin-basic-ui-app-bar-overflow: hidden;\n --stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top: 0px;\n --stackflow-plugin-basic-ui-bottom-sheet-border-radius: 1rem;\n}\n._1q6dj2j5 {\n pointer-events: none;\n}", ".dhthxq0 {\n width: 100%;\n}\n.dhthxq1 {\n height: 100%;\n}\n.dhthxq2 {\n top: 0;\n}\n.dhthxq3 {\n left: 0;\n}\n.dhthxq4 {\n position: absolute;\n}\n.dhthxq5 {\n position: relative;\n}\n.dhthxq7 {\n display: flex;\n}\n.dhthxq8 {\n flex: 1;\n}\n.dhthxq9 {\n align-items: center;\n}\n.dhthxqa {\n align-items: flex-end;\n}\n.dhthxqb {\n justify-content: center;\n}\n.dhthxqc {\n overflow: hidden;\n}\n.dhthxqd {\n white-space: nowrap;\n}\n.dhthxqe {\n text-align: center;\n}\n.dhthxqf {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n}\n.dhthxqg {\n box-sizing: border-box;\n}\n.dhthxqh {\n box-sizing: content-box;\n}\n.dhthxqi {\n appearance: none;\n border: 0;\n padding: 0;\n background: none;\n}", "._1dlf4346 {\n background-color: var(--stackflow-plugin-basic-ui-dim-background-color);\n}\n._1dlf4347 {\n background-color: var(--stackflow-plugin-basic-ui-background-color);\n}\n._1dlf4348 {\n transition: transform var(--_1dlf4340), opacity var(--_1dlf4340);\n}\n._1dlf434c {\n transform: translate3d(100%, 0, 0);\n}\n._1dlf434i {\n opacity: 0;\n z-index: var(--_1dlf4341);\n will-change: opacity;\n}\n._1q6dj2j0 ._1dlf434i {\n height: 10rem;\n background: linear-gradient(var(--stackflow-plugin-basic-ui-dim-background-color), rgba(0, 0, 0, 0));\n}\n\n ._1dlf4349 ._1dlf434i,\n ._1dlf434a ._1dlf434i\n {\n opacity: 1;\n}\n\n ._1dlf434b ._1dlf434i,\n ._1dlf434c ._1dlf434i\n {\n opacity: 0;\n}\n._1dlf434j {\n overflow-y: scroll;\n -webkit-overflow-scrolling: touch;\n z-index: var(--_1dlf4342);\n will-change: transform;\n}\n._1dlf434j::-webkit-scrollbar {\n display: none;\n}\n._1q6dj2j1 ._1dlf434j {\n transform: translate3d(100%, 0, 0);\n}\n\n ._1q6dj2j1 ._1dlf4349 ._1dlf434j,\n ._1q6dj2j1 ._1dlf434a ._1dlf434j\n {\n transform: translate3d(0, 0, 0);\n}\n._1q6dj2j0 ._1dlf434j {\n opacity: 0;\n transform: translate3d(0, 10rem, 0);\n}\n\n ._1q6dj2j0 ._1dlf4349 ._1dlf434j,\n ._1q6dj2j0 ._1dlf434a ._1dlf434j\n {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n}\n._1dlf434k {\n transition: transform var(--_1dlf4340), opacity var(--_1dlf4340), padding-top var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration);\n padding-top: var(--stackflow-plugin-basic-ui-app-bar-height);\n}\n._1q6dj2j1 ._1dlf434l {\n transform: translate3d(0, 100%, 0);\n}\n._1q6dj2j0 ._1dlf434m {\n transform: translate3d(50%, 0, 0);\n}\n._1dlf434n {\n width: 1.25rem;\n z-index: var(--_1dlf4343);\n}\n._1dlf434o {\n top: var(--stackflow-plugin-basic-ui-app-bar-height);\n height: calc(100% - var(--stackflow-plugin-basic-ui-app-bar-height));\n}\n@supports (padding-top: constant(safe-area-inset-top)) {\n ._1dlf434k {\n padding-top: calc(var(--stackflow-plugin-basic-ui-app-bar-height) + max(var(--stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top), constant(safe-area-inset-top)));\n }\n}\n@supports (padding-top: env(safe-area-inset-top)) {\n ._1dlf434k {\n padding-top: calc(var(--stackflow-plugin-basic-ui-app-bar-height) + max(var(--stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top), env(safe-area-inset-top)));\n }\n}", "._1yk3a450 {\n min-height: var(--stackflow-plugin-basic-ui-app-bar-min-height);\n}\n._1yk3a451 {\n overflow: var(--stackflow-plugin-basic-ui-app-bar-overflow);\n}\n._1yk3a452 {\n background-color: var(--stackflow-plugin-basic-ui-app-bar-background-color);\n z-index: var(--_1dlf4344);\n will-change: transform, opacity;\n transition: background-color var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration), box-shadow var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration);\n}\n._1q6dj2j1 ._1yk3a452 {\n position: absolute;\n}\n._1q6dj2j1 ._1dlf434b ._1yk3a452 {\n transform: translate3d(100%, 0, 0);\n transition: background-color var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration), box-shadow var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration), transform 0s;\n}\n._1q6dj2j0 ._1yk3a452 {\n opacity: 0;\n transform: translate3d(0, 10rem, 0);\n transition: background-color var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration), box-shadow var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration), transform var(--_1dlf4340), opacity var(--_1dlf4340);\n}\n\n ._1q6dj2j0 ._1dlf4349 ._1yk3a452,\n ._1q6dj2j0 ._1dlf434a ._1yk3a452\n {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n}\n._1yk3a453 {\n box-shadow: inset 0px calc(-1 * var(--stackflow-plugin-basic-ui-app-bar-border-size)) 0 var(--stackflow-plugin-basic-ui-app-bar-border-color);\n}\n._1q6dj2j1 ._1yk3a454 {\n transform: translate3d(0, 100vh, 0);\n transition: background-color var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration), box-shadow var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration), transform var(--_1dlf4340), opacity var(--_1dlf4340);\n}\n\n ._1q6dj2j1 ._1dlf4349 ._1yk3a454,\n ._1q6dj2j1 ._1dlf434a ._1yk3a454\n {\n transform: translate3d(0, 0, 0);\n}\n._1q6dj2j1 ._1dlf434b ._1yk3a454 {\n transform: translate3d(0, 100vh, 0);\n transition: background-color var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration), box-shadow var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration), transform var(--_1dlf4340), opacity var(--_1dlf4340);\n}\n._1q6dj2j0 ._1yk3a455 {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n}\n._1q6dj2j0 ._1dlf434b ._1yk3a455 {\n transform: translate3d(100%, 0, 0);\n transition: background-color var(--stackflow-plugin-basic-ui-app-bar-background-color-transition-duration), box-shadow var(--stackflow-plugin-basic-ui-app-bar-border-color-transition-duration), transform 0s;\n}\n._1yk3a456 {\n height: max(var(--stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top), constant(safe-area-inset-top));\n height: max(var(--stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top), env(safe-area-inset-top));\n}\n._1yk3a457 {\n height: var(--stackflow-plugin-basic-ui-app-bar-height);\n transition: height var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration);\n}\n._1yk3a458 {\n padding: 0 0.5rem;\n}\n._1yk3a458:empty {\n display: none;\n}\n._1yk3a459 {\n color: var(--stackflow-plugin-basic-ui-app-bar-icon-color);\n transition: opacity 300ms, color var(--stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration);\n width: 2.25rem;\n height: 2.75rem;\n}\n._1yk3a459:active {\n opacity: 0.2;\n transition: opacity 0s, color var(--stackflow-plugin-basic-ui-app-bar-icon-color-transition-duration);\n}\n._1yk3a45c {\n width: var(--_1dlf4345);\n color: var(--stackflow-plugin-basic-ui-app-bar-text-color);\n transition: height var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration), color var(--stackflow-plugin-basic-ui-app-bar-text-color-transition-duration);\n}\n._1q6dj2j0 ._1yk3a45c {\n width: 100%;\n justify-content: flex-start;\n padding-left: 1rem;\n font-size: 1.1875rem;\n line-height: 1.5;\n font-weight: bold;\n box-sizing: border-box;\n}\n._1q6dj2j1 ._1yk3a45c {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n font-family: -apple-system, BlinkMacSystemFont;\n font-weight: 600;\n font-size: 1rem;\n left: 50%;\n transform: translate(-50%);\n height: var(--stackflow-plugin-basic-ui-app-bar-height);\n top: max(var(--stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top), constant(safe-area-inset-top));\n top: max(var(--stackflow-plugin-basic-ui-app-bar-min-safe-area-inset-top), env(safe-area-inset-top));\n}\n._1q6dj2j0 ._1yk3a45d {\n padding-left: 0.375rem;\n}\n._1yk3a45e {\n left: 50%;\n height: 1.25rem;\n transform: translate(-50%);\n max-width: 5rem;\n display: none;\n width: var(--_1dlf4345);\n}\n._1q6dj2j1 ._1yk3a45e {\n display: block;\n}\n._1yk3a45f {\n text-overflow: ellipsis;\n font-size: inherit;\n font-weight: inherit;\n}\n._1yk3a45g {\n padding: 0 0.5rem;\n margin-left: auto;\n}\n._1yk3a45g:empty {\n display: none;\n}\n._1q6dj2j0 ._1yk3a45g {\n padding: 0 0.5rem 0 0;\n}", "._1ht38h03 {\n transition: var(--_1ht38h00);\n}\n._1ht38h07 {\n transform: translate3d(100%, 0, 0);\n}\n._1ht38h0d {\n background-color: var(--stackflow-plugin-basic-ui-dim-background-color);\n z-index: var(--_1ht38h01);\n opacity: 0;\n}\n._1ht38h04 ._1ht38h0d, ._1ht38h05 ._1ht38h0d {\n opacity: 1;\n}\n._1ht38h06 ._1ht38h0d, ._1ht38h07 ._1ht38h0d {\n opacity: 0;\n}\n._1ht38h0e {\n background-color: var(--stackflow-plugin-basic-ui-background-color);\n width: 100%;\n border-radius: var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius) var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius) 0 0;\n will-change: transform, opacity;\n transform: translate3d(0, 100%, 0);\n opacity: 0;\n}\n._1ht38h04 ._1ht38h0e, ._1ht38h05 ._1ht38h0e {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n}\n._1ht38h06 ._1ht38h0e, ._1ht38h07 ._1ht38h0e {\n transform: translate3d(0, 100%, 0);\n opacity: 0;\n}", "._5ozg8c3 {\n transition: var(--_5ozg8c0);\n}\n._5ozg8c7 {\n transform: translate3d(100%, 0, 0);\n}\n._5ozg8cd {\n background-color: var(--stackflow-plugin-basic-ui-dim-background-color);\n z-index: var(--_5ozg8c1);\n opacity: 0;\n}\n._5ozg8c4 ._5ozg8cd, ._5ozg8c5 ._5ozg8cd {\n opacity: 1;\n}\n._5ozg8c6 ._5ozg8cd, ._5ozg8c7 ._5ozg8cd {\n opacity: 0;\n}\n._5ozg8ce {\n background-color: var(--stackflow-plugin-basic-ui-background-color);\n width: 100%;\n margin: 0 2.5rem;\n box-shadow: 0px 0.625rem 2.375rem rgba(0, 0, 0, 0.15), 0px .5625rem 2.875rem rgba(0, 0, 0, 0.12), 0px .3125rem .9375rem rgba(0, 0, 0, 0.1);\n border-radius: var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius);\n will-change: transform, opacity;\n transform: scale(1.1);\n opacity: 0;\n}\n._5ozg8c4 ._5ozg8ce, ._5ozg8c5 ._5ozg8ce {\n transform: scale(1);\n opacity: 1;\n}\n._5ozg8c6 ._5ozg8ce, ._5ozg8c7 ._5ozg8ce {\n transform: scale(1.1);\n opacity: 0;\n}"],
5
+ "mappings": ";AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;;;AC3CF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AAAA;;;ACxDF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAGM;AAAA;AAGN;AAAA;AAGM;AAAA;AAGN;AAAA;AAEF;AACE;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAGQ;AAAA;AAGR;AAAA;AAEF;AACE;AACA;AAAA;AAGQ;AAAA;AAGR;AACA;AAAA;AAEF;AACE;AAAA;AAAA;AAAA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AACE;AAAA;AAAA;AAGJ;AACE;AACE;AAAA;AAAA;;;ACvFJ;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AAAA;AAAA;AAAA;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGQ;AAAA;AAGR;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGU;AAAA;AAGV;AAAA;AAEF;AACE;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAAA;AAAA;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;;;ACxIF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;;;AC/BF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;",
6
6
  "names": []
7
7
  }
package/dist/index.js CHANGED
@@ -365,13 +365,28 @@ var OFFSET_PX_CUPERTINO = 80;
365
365
  function useStyleEffectOffset({
366
366
  refs,
367
367
  theme,
368
- hasEffect
368
+ activityEnterStyle,
369
+ hasEffect = false
369
370
  }) {
370
371
  useStyleEffect({
371
372
  styleName: "offset",
372
373
  refs,
373
374
  effect: hasEffect ? ({ activityTransitionState, refs: refs2 }) => {
374
- const transform = theme === "cupertino" ? `translate3d(-${OFFSET_PX_CUPERTINO / 16}rem, 0, 0)` : `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`;
375
+ let transform;
376
+ let opacity;
377
+ switch (theme) {
378
+ case "cupertino": {
379
+ transform = `translate3d(-${OFFSET_PX_CUPERTINO / 16}rem, 0, 0)`;
380
+ opacity = "1";
381
+ break;
382
+ }
383
+ case "android":
384
+ default: {
385
+ transform = activityEnterStyle === "slideInLeft" ? `translate3d(-50%, 0, 0)` : `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`;
386
+ opacity = activityEnterStyle === "slideInLeft" ? "0" : "1";
387
+ break;
388
+ }
389
+ }
375
390
  const cleanup = () => {
376
391
  requestNextFrame(() => {
377
392
  refs2.forEach((ref) => {
@@ -380,6 +395,7 @@ function useStyleEffectOffset({
380
395
  }
381
396
  const $el = ref.current;
382
397
  $el.style.transform = "";
398
+ $el.style.opacity = "";
383
399
  listenOnce($el, "transitionend", () => {
384
400
  $el.style.transition = "";
385
401
  });
@@ -395,6 +411,7 @@ function useStyleEffectOffset({
395
411
  }
396
412
  ref.current.style.transition = globalVars.computedTransitionDuration;
397
413
  ref.current.style.transform = transform;
414
+ ref.current.style.opacity = opacity;
398
415
  });
399
416
  switch (activityTransitionState) {
400
417
  case "enter-done":
@@ -425,10 +442,10 @@ function useStyleEffectOffset({
425
442
  var import_createRuntimeFn2 = require("@vanilla-extract/recipes/createRuntimeFn");
426
443
  var appScreen = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 dhthxqc", variantClassNames: { transitionState: { "enter-active": "_1dlf4349", "enter-done": "_1dlf434a", "exit-active": "_1dlf434b", "exit-done": "_1dlf434c" } }, defaultVariants: {}, compoundVariants: [] });
427
444
  var dim = "_1dlf434i dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4346 _1dlf4348";
428
- var edge = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1dlf434m dhthxq4 dhthxq2 dhthxq3 dhthxq1", variantClassNames: { hasAppBar: { true: "_1dlf434n" } }, defaultVariants: {}, compoundVariants: [] });
445
+ var edge = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1dlf434n dhthxq4 dhthxq2 dhthxq3 dhthxq1", variantClassNames: { hasAppBar: { true: "_1dlf434o" } }, defaultVariants: {}, compoundVariants: [] });
429
446
  var exitActive = "_1dlf434b";
430
447
  var exitDone = "_1dlf434c";
431
- var paper = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1dlf434j dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4347 _1dlf4348", variantClassNames: { hasAppBar: { true: "_1dlf434k dhthxqg" }, presentModalFullScreen: { true: "_1dlf434l" } }, defaultVariants: {}, compoundVariants: [] });
448
+ var paper = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1dlf434j dhthxq4 dhthxq0 dhthxq1 dhthxq2 dhthxq3 _1dlf4347 _1dlf4348", variantClassNames: { hasAppBar: { true: "_1dlf434k dhthxqg" }, modalPresentationStyle: { fullScreen: "_1dlf434l" }, activityEnterStyle: { slideInLeft: "_1dlf434m" } }, defaultVariants: {}, compoundVariants: [] });
432
449
  var vars = { transitionDuration: "var(--_1dlf4340)", zIndexes: { dim: "var(--_1dlf4341)", paper: "var(--_1dlf4342)", edge: "var(--_1dlf4343)", appBar: "var(--_1dlf4344)" }, appBar: { center: { mainWidth: "var(--_1dlf4345)" } } };
433
450
 
434
451
  // src/hooks/useStyleEffectSwipeBack.ts
@@ -611,30 +628,31 @@ var import_react7 = require("react");
611
628
 
612
629
  // src/components/AppBar.css.ts
613
630
  var import_createRuntimeFn3 = require("@vanilla-extract/recipes/createRuntimeFn");
614
- var appBar = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_1yk3a452 dhthxq4 dhthxq0 dhthxqh _1dlf4347 _1yk3a451", variantClassNames: { border: { true: "_1yk3a453" }, presentModalFullScreen: { true: "_1yk3a454" } }, defaultVariants: {}, compoundVariants: [] });
615
- var backButton = "_1yk3a458 dhthxq9 dhthxq7 dhthxqb dhthxqf dhthxqi";
631
+ var appBar = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_1yk3a452 dhthxq4 dhthxq0 dhthxqh _1dlf4347 _1yk3a451", variantClassNames: { border: { true: "_1yk3a453" }, modalPresentationStyle: { fullScreen: "_1yk3a454" }, activityEnterStyle: { slideInLeft: "_1yk3a455" } }, defaultVariants: {}, compoundVariants: [] });
632
+ var backButton = "_1yk3a459 dhthxq9 dhthxq7 dhthxqb dhthxqf dhthxqi";
616
633
  var center = "dhthxq9 dhthxq7 dhthxq8 _1yk3a450";
617
- var centerMain = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_1yk3a45b", variantClassNames: { hasLeft: { true: "_1yk3a45c" } }, defaultVariants: {}, compoundVariants: [] });
618
- var centerMainEdge = "_1yk3a45d dhthxqi dhthxq4 dhthxq2 dhthxqf";
619
- var centerText = "_1yk3a45e dhthxqc dhthxqd dhthxq0";
620
- var closeButton = "_1yk3a458 dhthxq9 dhthxq7 dhthxqb dhthxqf dhthxqi";
621
- var container = "_1yk3a456 dhthxqa dhthxq7 _1yk3a451";
622
- var left = "_1yk3a457 dhthxq9 dhthxq7 dhthxq1 _1yk3a450";
623
- var right = "_1yk3a45f dhthxq9 dhthxq7 dhthxq1 dhthxq5 _1yk3a450";
624
- var safeArea = "_1yk3a455";
634
+ var centerMain = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_1yk3a45c", variantClassNames: { hasLeft: { true: "_1yk3a45d" } }, defaultVariants: {}, compoundVariants: [] });
635
+ var centerMainEdge = "_1yk3a45e dhthxqi dhthxq4 dhthxq2 dhthxqf";
636
+ var centerText = "_1yk3a45f dhthxqc dhthxqd dhthxq0";
637
+ var closeButton = "_1yk3a459 dhthxq9 dhthxq7 dhthxqb dhthxqf dhthxqi";
638
+ var container = "_1yk3a457 dhthxqa dhthxq7 _1yk3a451";
639
+ var left = "_1yk3a458 dhthxq9 dhthxq7 dhthxq1 _1yk3a450";
640
+ var right = "_1yk3a45g dhthxq9 dhthxq7 dhthxq1 dhthxq5 _1yk3a450";
641
+ var safeArea = "_1yk3a456";
625
642
 
626
643
  // src/components/AppBar.tsx
627
644
  var import_jsx_runtime4 = require("react/jsx-runtime");
628
645
  var AppBar = (0, import_react7.forwardRef)(
629
646
  ({
630
647
  title,
631
- appendLeft,
632
- appendRight,
648
+ renderLeft,
649
+ renderRight,
633
650
  backButton: backButton2,
634
651
  closeButton: closeButton2,
635
652
  closeButtonLocation = "left",
636
653
  border = true,
637
654
  modalPresentationStyle,
655
+ activityEnterStyle,
638
656
  iconColor,
639
657
  iconColorTransitionDuration,
640
658
  textColor,
@@ -661,7 +679,6 @@ var AppBar = (0, import_react7.forwardRef)(
661
679
  innerRef: centerRef,
662
680
  enable: globalOptions.theme === "cupertino"
663
681
  });
664
- const presentModalFullScreen = modalPresentationStyle === "fullScreen";
665
682
  const onBackClick = (e) => {
666
683
  if (backButton2 && "onClick" in backButton2 && backButton2.onClick) {
667
684
  backButton2.onClick(e);
@@ -709,7 +726,7 @@ var AppBar = (0, import_react7.forwardRef)(
709
726
  if (globalBackButton && "renderIcon" in globalBackButton && globalBackButton.renderIcon) {
710
727
  return globalBackButton.renderIcon();
711
728
  }
712
- if (presentModalFullScreen) {
729
+ if (modalPresentationStyle === "fullScreen") {
713
730
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconClose_default, {});
714
731
  }
715
732
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconBack_default, {});
@@ -758,14 +775,15 @@ var AppBar = (0, import_react7.forwardRef)(
758
775
  }
759
776
  );
760
777
  };
761
- const hasLeft = !!(closeButtonLocation === "left" && closeButton2 || backButton2 || appendLeft);
778
+ const hasLeft = !!(closeButtonLocation === "left" && closeButton2 || backButton2 || renderLeft);
762
779
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
763
780
  "div",
764
781
  {
765
782
  ref,
766
783
  className: appBar({
767
784
  border,
768
- presentModalFullScreen
785
+ modalPresentationStyle,
786
+ activityEnterStyle
769
787
  }),
770
788
  style: (0, import_dynamic2.assignInlineVars)(
771
789
  compactMap({
@@ -790,7 +808,7 @@ var AppBar = (0, import_react7.forwardRef)(
790
808
  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: left, children: [
791
809
  closeButtonLocation === "left" && renderCloseButton(),
792
810
  renderBackButton(),
793
- appendLeft == null ? void 0 : appendLeft()
811
+ renderLeft == null ? void 0 : renderLeft()
794
812
  ] }),
795
813
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: centerRef, className: center, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
796
814
  "div",
@@ -813,7 +831,7 @@ var AppBar = (0, import_react7.forwardRef)(
813
831
  }
814
832
  ) }),
815
833
  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: right, children: [
816
- appendRight == null ? void 0 : appendRight(),
834
+ renderRight == null ? void 0 : renderRight(),
817
835
  closeButtonLocation === "right" && renderCloseButton()
818
836
  ] })
819
837
  ] })
@@ -836,7 +854,8 @@ var AppScreen = ({
836
854
  dimBackgroundColor,
837
855
  appBar: appBar2,
838
856
  preventSwipeBack,
839
- modalPresentationStyle,
857
+ CUPERTINO_ONLY_modalPresentationStyle,
858
+ ANDROID_ONLY_activityEnterStyle,
840
859
  children
841
860
  }) => {
842
861
  var _a, _b;
@@ -848,36 +867,55 @@ var AppScreen = ({
848
867
  const paperRef = (0, import_react9.useRef)(null);
849
868
  const edgeRef = (0, import_react9.useRef)(null);
850
869
  const appBarRef = (0, import_react9.useRef)(null);
851
- const presentModalFullScreen = modalPresentationStyle === "fullScreen";
852
- const swipeBackPrevented = preventSwipeBack || presentModalFullScreen;
870
+ const modalPresentationStyle = globalOptions.theme === "cupertino" ? CUPERTINO_ONLY_modalPresentationStyle : void 0;
871
+ const activityEnterStyle = globalOptions.theme === "android" ? ANDROID_ONLY_activityEnterStyle : void 0;
872
+ const swipeBackPrevented = preventSwipeBack || modalPresentationStyle === "fullScreen";
873
+ const hasAppBar = !!appBar2;
874
+ const zIndexBase = ((_a = activity == null ? void 0 : activity.zIndex) != null ? _a : 0) * 5;
875
+ let zIndexDim;
876
+ let zIndexPaper;
877
+ let zIndexEdge;
878
+ let zIndexAppBar;
879
+ switch (globalOptions.theme) {
880
+ case "cupertino": {
881
+ zIndexDim = zIndexBase + (modalPresentationStyle === "fullScreen" ? 2 : 0);
882
+ zIndexPaper = zIndexBase + (hasAppBar && modalPresentationStyle !== "fullScreen" ? 1 : 3);
883
+ zIndexEdge = zIndexBase + 4;
884
+ zIndexAppBar = zIndexBase + 7;
885
+ break;
886
+ }
887
+ case "android":
888
+ default: {
889
+ zIndexDim = zIndexBase;
890
+ zIndexPaper = zIndexBase + (activityEnterStyle === "slideInLeft" ? 1 : 3);
891
+ zIndexEdge = zIndexBase + 4;
892
+ zIndexAppBar = zIndexBase + (activityEnterStyle === "slideInLeft" ? 7 : 4);
893
+ break;
894
+ }
895
+ }
896
+ const transitionState = (_b = activity == null ? void 0 : activity.transitionState) != null ? _b : "enter-done";
897
+ const lazyTransitionState = useLazy(transitionState);
853
898
  useStyleEffectHide({
854
899
  refs: [appScreenRef],
855
900
  hasEffect: true
856
901
  });
857
902
  useStyleEffectOffset({
903
+ refs: globalOptions.theme === "cupertino" || activityEnterStyle === "slideInLeft" ? [paperRef] : [paperRef, appBarRef],
858
904
  theme: globalOptions.theme,
859
- refs: globalOptions.theme === "cupertino" ? [paperRef] : [paperRef, appBarRef],
860
- hasEffect: !presentModalFullScreen
905
+ activityEnterStyle,
906
+ hasEffect: modalPresentationStyle !== "fullScreen"
861
907
  });
862
908
  useStyleEffectSwipeBack({
863
- theme: globalOptions.theme,
864
909
  dimRef,
865
910
  edgeRef,
866
911
  paperRef,
867
- hasEffect: true,
912
+ theme: globalOptions.theme,
868
913
  prevented: swipeBackPrevented,
869
914
  onSwiped() {
870
915
  pop();
871
- }
916
+ },
917
+ hasEffect: true
872
918
  });
873
- const hasAppBar = !!appBar2;
874
- const zIndexBase = ((_a = activity == null ? void 0 : activity.zIndex) != null ? _a : 0) * 5;
875
- const zIndexDim = zIndexBase;
876
- const zIndexPaper = zIndexBase + (globalOptions.theme === "cupertino" && hasAppBar ? 1 : 3);
877
- const zIndexEdge = zIndexBase + 4;
878
- const zIndexAppBar = globalOptions.theme === "cupertino" ? zIndexBase + 7 : zIndexBase + 4;
879
- const transitionState = (_b = activity == null ? void 0 : activity.transitionState) != null ? _b : "enter-done";
880
- const lazyTransitionState = useLazy(transitionState);
881
919
  const onAppBarTopClick = (e) => {
882
920
  var _a2, _b2;
883
921
  (_a2 = appBar2 == null ? void 0 : appBar2.onTopClick) == null ? void 0 : _a2.call(appBar2, e);
@@ -923,13 +961,17 @@ var AppScreen = ({
923
961
  [vars.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? globalVars.computedTransitionDuration : "0ms"
924
962
  })
925
963
  ),
964
+ "data-stackflow-component-name": "AppScreen",
965
+ "data-stackflow-activity-id": activity == null ? void 0 : activity.id,
966
+ "data-stackflow-activity-is-active": activity == null ? void 0 : activity.isActive,
926
967
  children: [
927
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: dim, ref: dimRef }),
968
+ activityEnterStyle !== "slideInLeft" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: dim, ref: dimRef }),
928
969
  appBar2 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
929
970
  AppBar_default,
930
971
  __spreadProps(__spreadValues({}, appBar2), {
931
972
  ref: appBarRef,
932
973
  modalPresentationStyle,
974
+ activityEnterStyle,
933
975
  onTopClick: onAppBarTopClick
934
976
  })
935
977
  ),
@@ -938,7 +980,8 @@ var AppScreen = ({
938
980
  {
939
981
  className: paper({
940
982
  hasAppBar,
941
- presentModalFullScreen
983
+ modalPresentationStyle,
984
+ activityEnterStyle
942
985
  }),
943
986
  ref: paperRef,
944
987
  children
@@ -1028,6 +1071,9 @@ var BottomSheet = ({
1028
1071
  [vars2.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? globalVars.computedTransitionDuration : "0ms"
1029
1072
  })
1030
1073
  ),
1074
+ "data-stackflow-component-name": "BottomSheet",
1075
+ "data-stackflow-activity-id": activity == null ? void 0 : activity.id,
1076
+ "data-stackflow-activity-is-active": activity == null ? void 0 : activity.isActive,
1031
1077
  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: dim2, ref: paperRef, onClick: onDimClick, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: paper2, onClick: onPaperClick, children }) })
1032
1078
  }
1033
1079
  );
@@ -1108,6 +1154,9 @@ var Modal = ({
1108
1154
  [vars3.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? globalVars.computedTransitionDuration : "0ms"
1109
1155
  })
1110
1156
  ),
1157
+ "data-stackflow-component-name": "Modal",
1158
+ "data-stackflow-activity-id": activity == null ? void 0 : activity.id,
1159
+ "data-stackflow-activity-is-active": activity == null ? void 0 : activity.isActive,
1111
1160
  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: dim3, ref: paperRef, onClick: onDimClick, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: paper3, onClick: onPaperClick, children }) })
1112
1161
  }
1113
1162
  );