@stackflow/plugin-basic-ui 0.20.0 → 0.20.2-alpha.3

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 (21) hide show
  1. package/dist/components/AppScreen.d.ts +7 -1
  2. package/dist/components/BottomSheet.d.ts +1 -1
  3. package/dist/components/Modal.d.ts +1 -1
  4. package/dist/index.css +25 -20
  5. package/dist/index.css.map +3 -3
  6. package/dist/index.d.ts +3 -3
  7. package/dist/index.js +25 -7
  8. package/dist/index.js.map +2 -2
  9. package/dist/index.mjs +26 -8
  10. package/dist/index.mjs.map +3 -3
  11. package/package.json +3 -3
  12. package/src/components/AppBar.css.ts +5 -4
  13. package/src/components/AppScreen.css.ts +9 -7
  14. package/src/components/AppScreen.tsx +64 -42
  15. package/src/components/BottomSheet.css.ts +5 -4
  16. package/src/components/BottomSheet.tsx +1 -1
  17. package/src/components/Modal.css.ts +2 -1
  18. package/src/components/Modal.tsx +1 -1
  19. package/src/hooks/useStyleEffectOffset.ts +2 -2
  20. package/src/hooks/useStyleEffectSwipeBack.ts +5 -5
  21. package/src/index.ts +11 -3
package/dist/components/AppScreen.d.ts CHANGED
@@ -2,7 +2,13 @@ import React from "react";
2
2
  import type { GlobalVars } from "../theme.css";
3
3
  import type { PropOf } from "../utils";
4
4
  import AppBar from "./AppBar";
5
- declare type AppScreenProps = Partial<Pick<GlobalVars, "backgroundColor" | "dimBackgroundColor">> & {
5
+ export declare type AppScreenContext = {
6
+ scroll: (args: {
7
+ top: number;
8
+ }) => void;
9
+ };
10
+ export declare function useAppScreen(): AppScreenContext;
11
+ export declare type AppScreenProps = Partial<Pick<GlobalVars, "backgroundColor" | "dimBackgroundColor">> & {
6
12
  appBar?: Omit<PropOf<typeof AppBar>, "theme" | "ref" | "key">;
7
13
  preventSwipeBack?: boolean;
8
14
  children: React.ReactNode;
package/dist/components/BottomSheet.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import type { GlobalVars } from "../theme.css";
3
- declare type BottomSheetProps = Partial<Pick<GlobalVars, "backgroundColor" | "dimBackgroundColor">> & Partial<GlobalVars["bottomSheet"]> & {
3
+ export declare type BottomSheetProps = Partial<Pick<GlobalVars, "backgroundColor" | "dimBackgroundColor">> & Partial<GlobalVars["bottomSheet"]> & {
4
4
  onOutsideClick?: React.MouseEventHandler;
5
5
  children: React.ReactNode;
6
6
  };
package/dist/components/Modal.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import type { GlobalVars } from "../theme.css";
3
- declare type ModalProps = Partial<Pick<GlobalVars, "backgroundColor" | "dimBackgroundColor">> & Partial<GlobalVars["modal"]> & {
3
+ export declare type ModalProps = Partial<Pick<GlobalVars, "backgroundColor" | "dimBackgroundColor">> & Partial<GlobalVars["modal"]> & {
4
4
  onOutsideClick?: React.MouseEventHandler;
5
5
  children: React.ReactNode;
6
6
  };
package/dist/index.css CHANGED
@@ -113,7 +113,7 @@
113
113
  background: none;
114
114
  }
115
115
 
116
- /* vanilla-extract-css-ns:src/components/AppScreen.css.ts.vanilla.css?source=#H4sIAAAAAAAAE71WTY/TMBC991f4gtSIukp2F9hNxQHEhTMXEELVxHYTt45tOU4LRfx3nI9Nu+Bkk1IhRWpce968mXmZ8fKd1p+IYUyu1xEVm7vbu9fo5wyhBMguNaqUFBMllInRHswc48K6jY1QB6xFmXKJEyg4wSXHlOf4T6tgNfs1W/7t482FPsbi39f41oAsuOVKxs37Rpm89XHa+1AaqH474zBYIKWBcPtjzOEeCuREoXLbMhBg2ed5FIYv+ux4bdf6j1G4cqsj5pKy74/5OX6sVqyoUt7ZRQ2gzVjO3J9EaZ0fQ+TzsECxUcp+pWBhINk11FuQ1ChOv3mRaq4Z42lmYxSFhuWrJ3WNkeCSgcGpAcqZtPOLVLRAJk1gHi5Q+wR92Xvop9mlNOqxhX+wTUbYhr1Kudx22xzbM1Nn050siFFCVGXAB5bsuMXdbrPFZerEqEqSDUlLg2amc3PTl+9tHD+6adATMDUlygstwPGRSjKPMiNf0NtJyiSlo2i5VF5tbkd9fyNIeSV1TaZ+BwP0w9HcvZK+Jne/g6ncvW1qGs2hNrX1tFQfuy/zuoWNZngFZQzRHtDFeT/qi2V8pq+gkqE4BjQyIY4TRAaFW7wHs7amZB3i7j/O/AXSQKnrpNgq/eytBbR2C4ObQXmGjGkLHVThn0HGiIAgzw7Lp8ABeomIku64m7MFbBgGw8D194LZCjS4mhcm930OvFNC1KU5cGozV+rlzav2otA3fBhNT3W9HVn/vKl/FdbEiFZnl5g6I9V8QHgqTMXzN8arQmZQCwAA */
116
+ /* vanilla-extract-css-ns:src/components/AppScreen.css.ts.vanilla.css?source=#H4sIAAAAAAAAE71WwY7aMBC98xW+VAIVo2TZbtugHlr10nOPVbWa2CYxOLblONBS9d9rJxDYrpMlNKqEBJZn3ryZecx48VHrr8QwJh8fYyrW98v7B/RrglAKZJsZVUmKiRLKJGgHZopxad3FWqg91qLKuMQplJzgimPKC/y312w1+T1ZPI/x9sYY1+K/q/GtAVlyy5VMmt9rZYpjjPPd58qA/26do9kcKQ2E25/XGHdQIGcKPuyRgQDLlnQaR9GrOYrcp8ud1+5HGgmKVu50wFxS9uNUpsMXf2Klr3zrF8+85Z4LgUkOMmPJCaQOZHNWMGdMlNbFIUKhyHOUGKXsNwoWenpRQ30ASY3i9HsQqc4hZzzLbYLiyLBi9aTtCRJcMjA4M0A5k3Z6k8jmyGQpTKOmor6oXVV9302zLXXc4Qv/4Jte4Rt1Cul2301jtmOmrqazLIlRQvg24D1Lt9zi9ra54jJzWlUVyfskp0Ez04a5ey66VvhdzJLkRKCJm4KpyVJeagGOqVSSBTQbh8qxGaRZUjnylksVVO1myB/3Cm5BzY1JOBygL4toYApB6Y+ZQjjAjSkEp9owtn1TbROYzN0k66k3hOgIculj3yOWyyk2Wt1HkE5fOj3CGZ7OGSmH0h0+gXm0pmIt8PY/PivmSAOlbhpjq/SLDyPQ2h0MbpbtBTKmR+h6RF9AJoiAIC8u3KfAM/QaESWdudvVJawZBsPA7YiSWQ86Gy0Kk7uuAMF9IurW7Dm1uev44u7N8bHRtcAYzc59XV7Z/6Lpv09rYEari4dQXRG/SBAeCuN5/gG9kduZswsAAA== */
117
117
  .AppScreen__1dlf4346 {
118
118
  background-color: var(--stackflow-plugin-basic-ui-dim-background-color);
119
119
  }
@@ -124,11 +124,12 @@
124
124
  transition: transform var(--transitionDuration__1dlf4340), opacity var(--transitionDuration__1dlf4340);
125
125
  }
126
126
  .AppScreen__1dlf434c {
127
- transform: translateX(100%);
127
+ transform: translate3d(100%, 0, 0);
128
128
  }
129
129
  .AppScreen__1dlf434i {
130
130
  opacity: 0;
131
131
  z-index: var(--zIndexes-dim__1dlf4341);
132
+ will-change: opacity;
132
133
  }
133
134
  .theme__1coppmz0 .AppScreen__1dlf434i,
134
135
  :root[data-stackflow-plugin-basic-ui-theme=android] .AppScreen__1dlf434i {
@@ -151,36 +152,37 @@
151
152
  overflow-y: scroll;
152
153
  -webkit-overflow-scrolling: touch;
153
154
  z-index: var(--zIndexes-paper__1dlf4342);
155
+ will-change: transform;
154
156
  }
155
157
  .AppScreen__1dlf434j::-webkit-scrollbar {
156
158
  display: none;
157
159
  }
158
160
  .theme__1coppmz1 .AppScreen__1dlf434j,
159
161
  :root[data-stackflow-plugin-basic-ui-theme=cupertino] .AppScreen__1dlf434j {
160
- transform: translateX(100%);
162
+ transform: translate3d(100%, 0, 0);
161
163
  }
162
164
  .theme__1coppmz1 .AppScreen__1dlf4349 .AppScreen__1dlf434j,
163
165
  :root[data-stackflow-plugin-basic-ui-theme=cupertino] .AppScreen__1dlf4349 .AppScreen__1dlf434j {
164
- transform: translateX(0);
166
+ transform: translate3d(0, 0, 0);
165
167
  }
166
168
  .theme__1coppmz1 .AppScreen__1dlf434a .AppScreen__1dlf434j,
167
169
  :root[data-stackflow-plugin-basic-ui-theme=cupertino] .AppScreen__1dlf434a .AppScreen__1dlf434j {
168
- transform: translateX(0);
170
+ transform: translate3d(0, 0, 0);
169
171
  }
170
172
  .theme__1coppmz0 .AppScreen__1dlf434j,
171
173
  :root[data-stackflow-plugin-basic-ui-theme=android] .AppScreen__1dlf434j {
172
174
  opacity: 0;
173
- transform: translateY(10rem);
175
+ transform: translate3d(0, 10rem, 0);
174
176
  }
175
177
  .theme__1coppmz0 .AppScreen__1dlf4349 .AppScreen__1dlf434j,
176
178
  :root[data-stackflow-plugin-basic-ui-theme=android] .AppScreen__1dlf4349 .AppScreen__1dlf434j {
177
179
  opacity: 1;
178
- transform: translateY(0);
180
+ transform: translate3d(0, 0, 0);
179
181
  }
180
182
  .theme__1coppmz0 .AppScreen__1dlf434a .AppScreen__1dlf434j,
181
183
  :root[data-stackflow-plugin-basic-ui-theme=android] .AppScreen__1dlf434a .AppScreen__1dlf434j {
182
184
  opacity: 1;
183
- transform: translateY(0);
185
+ transform: translate3d(0, 0, 0);
184
186
  }
185
187
  .AppScreen_hasAppBar_true__1dlf434k {
186
188
  transition:
@@ -199,13 +201,14 @@
199
201
  height: calc(100% - var(--stackflow-plugin-basic-ui-app-bar-height));
200
202
  }
201
203
 
202
- /* vanilla-extract-css-ns:src/components/AppBar.css.ts.vanilla.css?source=#H4sIAAAAAAAAE7VWS4/TMBC+76/wBalF6yjpY5em4sAKISHBiQMghFZO7LSmjh3ZTl+I/47tPPpK2pQtpzb2zHjm8zff2HuXZU9IPj8Hm8UQjcY++H0HQEo5nBM6m+sQLJHsQag0ihcJEyuYsXxmtiOkaAxzClGWmQ8Jdz796d2fO+8ocOACRybKTIqcYxgLJmT38Mee5hAAtpByTNZVlO1H+0WUdSrOxiwZDUejIiM9Jykxi7HIsnQbgJMU70EohdA/MNLoTEouzts4z4jUlIufp4FcrZlQVFPBQ4AiJViuSWsWX2JJCK/zjW6b2uXoLl8tEVeJkGlY/GVIk2+9wPdfNcHnvzBHxLEUFLeBJzIUU70JgT9tSe27SU2StF/vl2DXtiUpdnvvc4nsb42E37+vDupi3IrCEcCTW0JzOfYhXkE7Xt0rQP+xgobY11ZQ+kdCYiKftcxJHWtQyIxYQzVHWKxCQLkiGvjZGsSIxT0YgNfdRcedABXdkn4f+Nf6VUJ1qoZDl2YlsbHgJibXPYUSApEkCLqsoRaZ43dlSPiyxeb0iNHBEV0zrxX8sKmK5Suj7HUTxGU7NaY6LvQSYUz5zLQ88L2xae1G05CkmWlX64CpyhgyjOGCkybjB2d25aCh5jb2Rsw+CpVWDH0/VXZzRbGeh2DgDYp8d3gPvMe2Eh5CFGu6JEc65w3ajvNVU5iJ8y8zKIorxh6MCdeGfSmi/Kvdrltv7Cq6Eg9N1roFjxuz4tKAmdxmwBwAZ8ebLetXrjRNNqZQgx03F5gwsrZnSD3dcRMykpi9oLzsxBg7cTBLXvDmsSIBo5zU76fAG9e2q3ItEgxPK52iW8f6UjPMUqfHynVgnHmsTFofK3sdZtGwC4jRGYdUk1QZ2XI8a0Rvt+Xo49z2Vx0aCUopM8EtQRiBaqNM3HvwZOBbfEbxF/f9wVie4Pfg+8f4V9C7CxoXl9o0RHpw7B40L5NGkXVQbWd1VrLbGD9H6pMp5HC0oZfRvznmvvKW7Pa9Yat2Rc7+AOQdz2sRPI97itaw7L7K4UjJ/0HWOnRMdKuOiQ6nT8REvGgCKy6e1bYBxJJIe5jhA2M0U1Qd8ZfyOZH0lOn1+ml43DY1LcTSllTcE8q1aPQ/O0oviTG+jRi3FGH/mDT+AjaxaDCeDgAA */
204
+ /* vanilla-extract-css-ns:src/components/AppBar.css.ts.vanilla.css?source=#H4sIAAAAAAAAE7VWyW7bMBC95yt4KWAXoUB5SRoFPTQoChRoTzn0UBQBJVI2G4oUSCpeiv57SWqxLUteEhcI4IicGc48vnnD4FOeP2D19BSunsd4MkXgzxUAGRNwTtlsbiLwgtUAQm1w8pxyuYA5L2Z2O8aaJbBgEOe5/VBw4zO8v/p7FbQChz5wbKPMlCwEgYnkUp0evu1pDwFgDZkgdFlHWX91X1Q7p/JswtPJeDLxxgvGOUzmWMxoBIzCQqdSZddA5jhhZuWTNnOaUeuXyDzP1iHYq+IaREpK85Nggw9k7eN8TIqcKsOE/LUfyMORS80MkyICONaSF4b2ZvGYKEpFU1J82dSOR/f5NqhVAHJs6JgMQoTeXQNk/4Yd+aM3pooFUZKRPgyr64sAuu/P0OYWIkWzMsXKrIK+calYtNn7XCjsfhtc0LChyynGvWC04L67JELHY+/CFh6G7fCttg7D/7GQjtivLKQKE0tFqHoyqqBNyFGpUnIJ9RwTuYgAE5oagPIlSDBPBjAE70/XLH8C1GxNh0OAzvWrdW5fTMc+zVqhEylsTGEGGqcUYkUx9FlDI3PP9tqQipcem/0jJjtHnJp5MwB2W6xcPjPKVm9BUjVXZ6rTUksxIUzMrA4AFExtr3eaRjTLbfM6B8J0zrEljpCCdhnfeLMz5xSzt7E1obZRqJVjjFCmy4lEzDwCo2BU5rvBexTc9pVwE+HEsBfaEr9g1Hcc0l1h7rx/lUFZXDk1YUKFsezLMBM/3HbTgVNf0Zl4GLo0PXhcmBXHps7dZabODnBu8rmyfhfasHRlC7XYCXuBKadLd4Yy9xtuQk5TuxdWl51aYy8OdikIP9zWJOBM0Ob5FQbTxnZRrcWSk/tap9jas77SDLt00kPmPDAOPGTueh8yWx3m0HALmLOZgMzQTFvZ8jzrRG+z5enj3bZXPRopzhi3wR1BOIV6pY0b8A8WvufvOHn031+s5R5+Nwi18a+h9xc0LS+1a5YMoN3cEdXXSKPMT1Btb3VQsvsYP8f6my1kd7Tht9G/O+a28lbsRsG4V7tib78D8obnjQgexj3DS1h1X+3QUvJXyNoJHRNfqmPi3ekTc5k8d4GVlE9u1wDyhSp3mOUD5yzXTLf4y8ScKrbP9GZ9Pzzpm5oOYuVKKu8JF0Z2+h8cpcfEmFxGjHuKcP/YNP4BuwZEPN0OAAA= */
203
205
  .AppBar__1yk3a450 {
204
206
  min-height: var(--stackflow-plugin-basic-ui-app-bar-min-height);
205
207
  }
206
208
  .AppBar__1yk3a451 {
207
209
  background-color: var(--stackflow-plugin-basic-ui-app-bar-background-color);
208
210
  z-index: var(--zIndexes-appBar__1dlf4344);
211
+ will-change: transform, opacity;
209
212
  }
210
213
  .theme__1coppmz1 .AppBar__1yk3a451,
211
214
  :root[data-stackflow-plugin-basic-ui-theme=cupertino] .AppBar__1yk3a451 {
@@ -213,23 +216,23 @@
213
216
  }
214
217
  .theme__1coppmz1 .AppScreen__1dlf434b .AppBar__1yk3a451,
215
218
  :root[data-stackflow-plugin-basic-ui-theme=cupertino] .AppScreen__1dlf434b .AppBar__1yk3a451 {
216
- transform: translateX(100%);
219
+ transform: translate3d(100%, 0, 0);
217
220
  }
218
221
  .theme__1coppmz0 .AppBar__1yk3a451,
219
222
  :root[data-stackflow-plugin-basic-ui-theme=android] .AppBar__1yk3a451 {
220
223
  opacity: 0;
221
- transform: translateY(10rem);
224
+ transform: translate3d(0, 10rem, 0);
222
225
  transition: transform var(--transitionDuration__1dlf4340), opacity var(--transitionDuration__1dlf4340);
223
226
  }
224
227
  .theme__1coppmz0 .AppScreen__1dlf4349 .AppBar__1yk3a451,
225
228
  :root[data-stackflow-plugin-basic-ui-theme=android] .AppScreen__1dlf4349 .AppBar__1yk3a451 {
226
229
  opacity: 1;
227
- transform: translateY(0);
230
+ transform: translate3d(0, 0, 0);
228
231
  }
229
232
  .theme__1coppmz0 .AppScreen__1dlf434a .AppBar__1yk3a451,
230
233
  :root[data-stackflow-plugin-basic-ui-theme=android] .AppScreen__1dlf434a .AppBar__1yk3a451 {
231
234
  opacity: 1;
232
- transform: translateY(0);
235
+ transform: translate3d(0, 0, 0);
233
236
  }
234
237
  .AppBar_border_true__1yk3a452 {
235
238
  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);
@@ -322,12 +325,12 @@
322
325
  padding: 0 0.5rem 0 0;
323
326
  }
324
327
 
325
- /* vanilla-extract-css-ns:src/components/BottomSheet.css.ts.vanilla.css?source=#H4sIAAAAAAAAE6VTPU/DMBDd8yu8IKUSVzkqUBS2qgszC50qJ3abE4ld+YNCEf+dOCipiuyqoZPt8717787P04WyVjUvlRB2vc4qO3us6Ix8JYRYzaRBi0rm5J3pFOAYWTrN/DpA6OQp+U6moWrzY7WN0k3+u62ZFa9pRulNHMk7ZMHKt61WTnIoVa10r8bY9mJTqz3sardFCQUzWIJD4NjAX1TLQsgBUHLx0Vc4PPuTMB4wkGZdptqxEu1nTmhU3R0Ji74Nx+8j6V2PA10WpXsYRze/iC7enfjn7INz3yO3Vdtc+9r+WCjNhQbNODpzQclOHhivD06wk6uw1Lcfduaqd+Y1ThDjnCCi/2SV0lMpo10SkxJxyTkp4cH8ANGgQNlIBAAA */
328
+ /* vanilla-extract-css-ns:src/components/BottomSheet.css.ts.vanilla.css?source=#H4sIAAAAAAAAE6VT3U7DIBS+71NwY7IlPQtN1ZnuznjjtQ+wUGAtkcIC1OmM7y5U20ZT3GaTJpSf7+ccPlb32jndPNWcu+02q11+V+McvScIOUOUFU5oVaAXYhYA48pDa0gYBwhebpKPZDXFth7Zdto0xdevJI7nbJFhfJUi7L84AesISkKfK6NbxYBqqU1vyjq/sZP6AHvZVkJBSayg0ApgooHfKK+C0BGEYvy1Zzg+hhm3ATCIZt1JvSdUuLcC4ai7azRtOp1ev4kc72oc5LKo3O1lcuuz5OLV8X/2frLvB8Fc7Yvzdx6mpTaMGzCEidaeQdnZAxv8wQ/schYWh/KDOSmB1kRVvBjTmvZN2sQz7NP7HeOZmeGXZYb/9bDw8KrmxCrmKBKrU46ibfoES/9iF4cEAAA= */
326
329
  .BottomSheet__1ht38h03 {
327
330
  transition: var(--transitionDuration__1ht38h00);
328
331
  }
329
332
  .BottomSheet__1ht38h07 {
330
- transform: translateX(100%);
333
+ transform: translate3d(100%, 0, 0);
331
334
  }
332
335
  .BottomSheet__1ht38h0d {
333
336
  background-color: var(--stackflow-plugin-basic-ui-dim-background-color);
@@ -346,26 +349,27 @@
346
349
  background-color: var(--stackflow-plugin-basic-ui-background-color);
347
350
  width: 100%;
348
351
  border-radius: var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius) var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius) 0 0;
349
- transform: translateY(100%);
352
+ will-change: transform, opacity;
353
+ transform: translate3d(0, 100%, 0);
350
354
  opacity: 0;
351
355
  }
352
356
  .BottomSheet__1ht38h04 .BottomSheet__1ht38h0e,
353
357
  .BottomSheet__1ht38h05 .BottomSheet__1ht38h0e {
354
- transform: translateY(0);
358
+ transform: translate3d(0, 0, 0);
355
359
  opacity: 1;
356
360
  }
357
361
  .BottomSheet__1ht38h06 .BottomSheet__1ht38h0e,
358
362
  .BottomSheet__1ht38h07 .BottomSheet__1ht38h0e {
359
- transform: translateY(100%);
363
+ transform: translate3d(0, 100%, 0);
360
364
  opacity: 0;
361
365
  }
362
366
 
363
- /* vanilla-extract-css-ns:src/components/Modal.css.ts.vanilla.css?source=#H4sIAAAAAAAAE51TT2+CMBS/8yl6WQKJbUCHOnfdZYfddzMPWrEZ8ExbhmPZd18B0Ykw3RIS2tffv1ce7AU5pOt1iFWyjGfk0yHEKMi1NBLzFXkH5VJ6qjwVCup3x/C9R+fLYWcqi5PKBlW2apcpGPHqBr5/N0DhDSWC+C1RWOScxpii6uy1sQebFEu6S4tE5jQCLWNaSMplRvssK09IRWXOxb5TqJ7rndA1ofMMGiDuIJbmY0X8y1T3pJdy0iuEfUDTxlEyuJScX5Nc/C45kFL88+4G762U3GxtcvuZ6m0GynKsLZmyUImsrkW4p3oLHEtb3+2Jz+bT+sxCZotmoZIIXH9CDg8LQm/SQFl4hC5HoNMOOgtaKHsYU/XaNIoLRRVwWegbmkZjMLP5hTD0jNuo/RhaHUMq3ID9fUzEtTER/R/k4HXudMP0XDj1p2fMaairb4Wf5DcLBAAA */
367
+ /* vanilla-extract-css-ns:src/components/Modal.css.ts.vanilla.css?source=#H4sIAAAAAAAAE51T0W6CMBR99yv6sgQT2hQZ0+HrXvawbzCXtmKzQk1bpnPZv6+AaECcbkkT2ttzzj339kLeNAe1WiX6kC9YjL4mCDkDpZVO6jJFH2ACjM+Rl8pA/e0YdLqcfE9IT2V+VllrU6TtVoETMQ8iSh9CRP0aYfKGmQF7z42uSo6ZVtp0LqzzF2uld3irqlyWOAMrGa4k5rLAQ5aXR+iAZcnFvlM4vNYnYWtClzNqgHoLTLrPFNFLV49o4DIcBJIhoCnjJBldSj7dkpz/LjniUvyzd6N920nuNt65f6z6WIDxHJ8WzUhiRFHHMr3HdgNc73x8u0eUPM3qOw+J583G5BkEtH1sv0iUTMMGSpITdHEFOuugcdRCyfM11WnrxnBhsAEuK3tH0do5XXj/Qjjc4x7LVwqzDZS5SM+DHHb9X/bH2zJQIojI3ydJ3JokMfyVjrn6me4YsItMwwG7lmmsqh+//tn1NQQAAA== */
364
368
  .Modal__5ozg8c3 {
365
369
  transition: var(--transitionDuration__5ozg8c0);
366
370
  }
367
371
  .Modal__5ozg8c7 {
368
- transform: translateX(100%);
372
+ transform: translate3d(100%, 0, 0);
369
373
  }
370
374
  .Modal__5ozg8cd {
371
375
  background-color: var(--stackflow-plugin-basic-ui-dim-background-color);
@@ -389,6 +393,7 @@
389
393
  0px .5625rem 2.875rem rgba(0, 0, 0, 0.12),
390
394
  0px .3125rem .9375rem rgba(0, 0, 0, 0.1);
391
395
  border-radius: var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius);
396
+ will-change: transform, opacity;
392
397
  transform: scale(1.1);
393
398
  opacity: 0;
394
399
  }
package/dist/index.css.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["vanilla-extract-css-ns:src/theme.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U30rDMBTG7/cUAW8UltJWyyDik4iMNEnbYJMTTk5xTHx3s+Hu1LW9kdmRQP5+X044P45AAFozcRietSTJI0n12vTwxkM/tNbzWkar+GA5dcaZJ+k1gtUv7H3FGP/lep0OWoTBa66gBxTspmmaxzMqbd03SmxreZuv2VfPiurunJEMIS2Q14Da4E9G+WaqUbR7I1gRdmN1nbFtR4LdZxUaN03FCaWPlix4rgeUh4lg5aZycayRS5vzQrAqvXpKXVmk9jBWSmZHM6XzsKmBCByPnTF0yhRKbYeYcnX888dqAuRqCAbJelg45nlWTQe9zDZ/TvrEGP4b6tkR4+22UBCC2+fLpvharC+e4GLZBF/r8EVS/AmYPn1EXgsAAA==", "vanilla-extract-css-ns:src/styles/f.css.ts.vanilla.css?source=LmZfX2RodGh4cTAgewogIHdpZHRoOiAxMDAlOwp9Ci5mX19kaHRoeHExIHsKICBoZWlnaHQ6IDEwMCU7Cn0KLmZfX2RodGh4cTIgewogIHRvcDogMDsKfQouZl9fZGh0aHhxMyB7CiAgbGVmdDogMDsKfQouZl9fZGh0aHhxNCB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5mX19kaHRoeHE1IHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLmZfX2RodGh4cTcgewogIGRpc3BsYXk6IGZsZXg7Cn0KLmZfX2RodGh4cTggewogIGZsZXg6IDE7Cn0KLmZfX2RodGh4cTkgewogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KLmZfX2RodGh4cWEgewogIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDsKfQouZl9fZGh0aHhxYiB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLmZfX2RodGh4cWMgewogIG92ZXJmbG93OiBoaWRkZW47Cn0KLmZfX2RodGh4cWQgewogIHdoaXRlLXNwYWNlOiBub3dyYXA7Cn0KLmZfX2RodGh4cWUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKfQouZl9fZGh0aHhxZiB7CiAgY3Vyc29yOiBwb2ludGVyOwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0KLmZfX2RodGh4cWcgewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KLmZfX2RodGh4cWggewogIGJveC1zaXppbmc6IGNvbnRlbnQtYm94Owp9Ci5mX19kaHRoeHFpIHsKICBhcHBlYXJhbmNlOiBub25lOwogIGJvcmRlcjogMDsKICBwYWRkaW5nOiAwOwogIGJhY2tncm91bmQ6IG5vbmU7Cn0=", "vanilla-extract-css-ns:src/components/AppScreen.css.ts.vanilla.css?source=#H4sIAAAAAAAAE71WTY/TMBC991f4gtSIukp2F9hNxQHEhTMXEELVxHYTt45tOU4LRfx3nI9Nu+Bkk1IhRWpce968mXmZ8fKd1p+IYUyu1xEVm7vbu9fo5wyhBMguNaqUFBMllInRHswc48K6jY1QB6xFmXKJEyg4wSXHlOf4T6tgNfs1W/7t482FPsbi39f41oAsuOVKxs37Rpm89XHa+1AaqH474zBYIKWBcPtjzOEeCuREoXLbMhBg2ed5FIYv+ux4bdf6j1G4cqsj5pKy74/5OX6sVqyoUt7ZRQ2gzVjO3J9EaZ0fQ+TzsECxUcp+pWBhINk11FuQ1ChOv3mRaq4Z42lmYxSFhuWrJ3WNkeCSgcGpAcqZtPOLVLRAJk1gHi5Q+wR92Xvop9mlNOqxhX+wTUbYhr1Kudx22xzbM1Nn050siFFCVGXAB5bsuMXdbrPFZerEqEqSDUlLg2amc3PTl+9tHD+6adATMDUlygstwPGRSjKPMiNf0NtJyiSlo2i5VF5tbkd9fyNIeSV1TaZ+BwP0w9HcvZK+Jne/g6ncvW1qGs2hNrX1tFQfuy/zuoWNZngFZQzRHtDFeT/qi2V8pq+gkqE4BjQyIY4TRAaFW7wHs7amZB3i7j/O/AXSQKnrpNgq/eytBbR2C4ObQXmGjGkLHVThn0HGiIAgzw7Lp8ABeomIku64m7MFbBgGw8D194LZCjS4mhcm930OvFNC1KU5cGozV+rlzav2otA3fBhNT3W9HVn/vKl/FdbEiFZnl5g6I9V8QHgqTMXzN8arQmZQCwAA", "vanilla-extract-css-ns:src/components/AppBar.css.ts.vanilla.css?source=#H4sIAAAAAAAAE7VWS4/TMBC+76/wBalF6yjpY5em4sAKISHBiQMghFZO7LSmjh3ZTl+I/47tPPpK2pQtpzb2zHjm8zff2HuXZU9IPj8Hm8UQjcY++H0HQEo5nBM6m+sQLJHsQag0ihcJEyuYsXxmtiOkaAxzClGWmQ8Jdz796d2fO+8ocOACRybKTIqcYxgLJmT38Mee5hAAtpByTNZVlO1H+0WUdSrOxiwZDUejIiM9Jykxi7HIsnQbgJMU70EohdA/MNLoTEouzts4z4jUlIufp4FcrZlQVFPBQ4AiJViuSWsWX2JJCK/zjW6b2uXoLl8tEVeJkGlY/GVIk2+9wPdfNcHnvzBHxLEUFLeBJzIUU70JgT9tSe27SU2StF/vl2DXtiUpdnvvc4nsb42E37+vDupi3IrCEcCTW0JzOfYhXkE7Xt0rQP+xgobY11ZQ+kdCYiKftcxJHWtQyIxYQzVHWKxCQLkiGvjZGsSIxT0YgNfdRcedABXdkn4f+Nf6VUJ1qoZDl2YlsbHgJibXPYUSApEkCLqsoRaZ43dlSPiyxeb0iNHBEV0zrxX8sKmK5Suj7HUTxGU7NaY6LvQSYUz5zLQ88L2xae1G05CkmWlX64CpyhgyjOGCkybjB2d25aCh5jb2Rsw+CpVWDH0/VXZzRbGeh2DgDYp8d3gPvMe2Eh5CFGu6JEc65w3ajvNVU5iJ8y8zKIorxh6MCdeGfSmi/Kvdrltv7Cq6Eg9N1roFjxuz4tKAmdxmwBwAZ8ebLetXrjRNNqZQgx03F5gwsrZnSD3dcRMykpi9oLzsxBg7cTBLXvDmsSIBo5zU76fAG9e2q3ItEgxPK52iW8f6UjPMUqfHynVgnHmsTFofK3sdZtGwC4jRGYdUk1QZ2XI8a0Rvt+Xo49z2Vx0aCUopM8EtQRiBaqNM3HvwZOBbfEbxF/f9wVie4Pfg+8f4V9C7CxoXl9o0RHpw7B40L5NGkXVQbWd1VrLbGD9H6pMp5HC0oZfRvznmvvKW7Pa9Yat2Rc7+AOQdz2sRPI97itaw7L7K4UjJ/0HWOnRMdKuOiQ6nT8REvGgCKy6e1bYBxJJIe5jhA2M0U1Qd8ZfyOZH0lOn1+ml43DY1LcTSllTcE8q1aPQ/O0oviTG+jRi3FGH/mDT+AjaxaDCeDgAA", "vanilla-extract-css-ns:src/components/BottomSheet.css.ts.vanilla.css?source=#H4sIAAAAAAAAE6VTPU/DMBDd8yu8IKUSVzkqUBS2qgszC50qJ3abE4ld+YNCEf+dOCipiuyqoZPt8717787P04WyVjUvlRB2vc4qO3us6Ix8JYRYzaRBi0rm5J3pFOAYWTrN/DpA6OQp+U6moWrzY7WN0k3+u62ZFa9pRulNHMk7ZMHKt61WTnIoVa10r8bY9mJTqz3sardFCQUzWIJD4NjAX1TLQsgBUHLx0Vc4PPuTMB4wkGZdptqxEu1nTmhU3R0Ji74Nx+8j6V2PA10WpXsYRze/iC7enfjn7INz3yO3Vdtc+9r+WCjNhQbNODpzQclOHhivD06wk6uw1Lcfduaqd+Y1ThDjnCCi/2SV0lMpo10SkxJxyTkp4cH8ANGgQNlIBAAA", "vanilla-extract-css-ns:src/components/Modal.css.ts.vanilla.css?source=#H4sIAAAAAAAAE51TT2+CMBS/8yl6WQKJbUCHOnfdZYfddzMPWrEZ8ExbhmPZd18B0Ykw3RIS2tffv1ce7AU5pOt1iFWyjGfk0yHEKMi1NBLzFXkH5VJ6qjwVCup3x/C9R+fLYWcqi5PKBlW2apcpGPHqBr5/N0DhDSWC+C1RWOScxpii6uy1sQebFEu6S4tE5jQCLWNaSMplRvssK09IRWXOxb5TqJ7rndA1ofMMGiDuIJbmY0X8y1T3pJdy0iuEfUDTxlEyuJScX5Nc/C45kFL88+4G762U3GxtcvuZ6m0GynKsLZmyUImsrkW4p3oLHEtb3+2Jz+bT+sxCZotmoZIIXH9CDg8LQm/SQFl4hC5HoNMOOgtaKHsYU/XaNIoLRRVwWegbmkZjMLP5hTD0jNuo/RhaHUMq3ID9fUzEtTER/R/k4HXudMP0XDj1p2fMaairb4Wf5DcLBAAA"],
4
- "sourcesContent": [":root, :root[data-stackflow-plugin-basic-ui-theme=android] {\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-app-bar-border-color: rgba(0, 0, 0, 0.07);\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: 275ms;\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-text-color: #212124;\n --stackflow-plugin-basic-ui-app-bar-background-color: #fff;\n --stackflow-plugin-basic-ui-bottom-sheet-border-radius: 1rem;\n}\n:root[data-stackflow-plugin-basic-ui-theme=cupertino] {\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-app-bar-border-color: rgba(0, 0, 0, 0.07);\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: 275ms;\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-text-color: #212124;\n --stackflow-plugin-basic-ui-app-bar-background-color: #fff;\n --stackflow-plugin-basic-ui-bottom-sheet-border-radius: 1rem;\n}\n.theme__1coppmz0 {\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-app-bar-border-color: rgba(0, 0, 0, 0.07);\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: 275ms;\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-text-color: #212124;\n --stackflow-plugin-basic-ui-app-bar-background-color: #fff;\n --stackflow-plugin-basic-ui-bottom-sheet-border-radius: 1rem;\n}\n.theme__1coppmz1 {\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-app-bar-border-color: rgba(0, 0, 0, 0.07);\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: 275ms;\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-text-color: #212124;\n --stackflow-plugin-basic-ui-app-bar-background-color: #fff;\n --stackflow-plugin-basic-ui-bottom-sheet-border-radius: 1rem;\n}", ".f__dhthxq0 {\n width: 100%;\n}\n.f__dhthxq1 {\n height: 100%;\n}\n.f__dhthxq2 {\n top: 0;\n}\n.f__dhthxq3 {\n left: 0;\n}\n.f__dhthxq4 {\n position: absolute;\n}\n.f__dhthxq5 {\n position: relative;\n}\n.f__dhthxq7 {\n display: flex;\n}\n.f__dhthxq8 {\n flex: 1;\n}\n.f__dhthxq9 {\n align-items: center;\n}\n.f__dhthxqa {\n align-items: flex-end;\n}\n.f__dhthxqb {\n justify-content: center;\n}\n.f__dhthxqc {\n overflow: hidden;\n}\n.f__dhthxqd {\n white-space: nowrap;\n}\n.f__dhthxqe {\n text-align: center;\n}\n.f__dhthxqf {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n}\n.f__dhthxqg {\n box-sizing: border-box;\n}\n.f__dhthxqh {\n box-sizing: content-box;\n}\n.f__dhthxqi {\n appearance: none;\n border: 0;\n padding: 0;\n background: none;\n}", ".AppScreen__1dlf4346 {\n background-color: var(--stackflow-plugin-basic-ui-dim-background-color);\n}\n.AppScreen__1dlf4347 {\n background-color: var(--stackflow-plugin-basic-ui-background-color);\n}\n.AppScreen__1dlf4348 {\n transition: transform var(--transitionDuration__1dlf4340), opacity var(--transitionDuration__1dlf4340);\n}\n.AppScreen__1dlf434c {\n transform: translateX(100%);\n}\n.AppScreen__1dlf434i {\n opacity: 0;\n z-index: var(--zIndexes-dim__1dlf4341);\n}\n.theme__1coppmz0 .AppScreen__1dlf434i, :root[data-stackflow-plugin-basic-ui-theme=android] .AppScreen__1dlf434i {\n height: 10rem;\n background: linear-gradient(var(--stackflow-plugin-basic-ui-dim-background-color), rgba(0, 0, 0, 0));\n}\n.AppScreen__1dlf4349 .AppScreen__1dlf434i {\n opacity: 1;\n}\n.AppScreen__1dlf434a .AppScreen__1dlf434i {\n opacity: 1;\n}\n.AppScreen__1dlf434b .AppScreen__1dlf434i {\n opacity: 0;\n}\n.AppScreen__1dlf434c .AppScreen__1dlf434i {\n opacity: 0;\n}\n.AppScreen__1dlf434j {\n overflow-y: scroll;\n -webkit-overflow-scrolling: touch;\n z-index: var(--zIndexes-paper__1dlf4342);\n}\n.AppScreen__1dlf434j::-webkit-scrollbar {\n display: none;\n}\n.theme__1coppmz1 .AppScreen__1dlf434j, :root[data-stackflow-plugin-basic-ui-theme=cupertino] .AppScreen__1dlf434j {\n transform: translateX(100%);\n}\n.theme__1coppmz1 .AppScreen__1dlf4349 .AppScreen__1dlf434j, :root[data-stackflow-plugin-basic-ui-theme=cupertino] .AppScreen__1dlf4349 .AppScreen__1dlf434j {\n transform: translateX(0);\n}\n.theme__1coppmz1 .AppScreen__1dlf434a .AppScreen__1dlf434j, :root[data-stackflow-plugin-basic-ui-theme=cupertino] .AppScreen__1dlf434a .AppScreen__1dlf434j {\n transform: translateX(0);\n}\n.theme__1coppmz0 .AppScreen__1dlf434j, :root[data-stackflow-plugin-basic-ui-theme=android] .AppScreen__1dlf434j {\n opacity: 0;\n transform: translateY(10rem);\n}\n.theme__1coppmz0 .AppScreen__1dlf4349 .AppScreen__1dlf434j, :root[data-stackflow-plugin-basic-ui-theme=android] .AppScreen__1dlf4349 .AppScreen__1dlf434j {\n opacity: 1;\n transform: translateY(0);\n}\n.theme__1coppmz0 .AppScreen__1dlf434a .AppScreen__1dlf434j, :root[data-stackflow-plugin-basic-ui-theme=android] .AppScreen__1dlf434a .AppScreen__1dlf434j {\n opacity: 1;\n transform: translateY(0);\n}\n.AppScreen_hasAppBar_true__1dlf434k {\n transition: transform var(--transitionDuration__1dlf4340), opacity var(--transitionDuration__1dlf4340), padding-top var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration);\n padding-top: calc(var(--stackflow-plugin-basic-ui-app-bar-height) + constant(safe-area-inset-top));\n padding-top: calc(var(--stackflow-plugin-basic-ui-app-bar-height) + env(safe-area-inset-top));\n}\n.AppScreen__1dlf434l {\n width: 1.25rem;\n z-index: var(--zIndexes-edge__1dlf4343);\n}\n.AppScreen_hasAppBar_true__1dlf434m {\n top: var(--stackflow-plugin-basic-ui-app-bar-height);\n height: calc(100% - var(--stackflow-plugin-basic-ui-app-bar-height));\n}", ".AppBar__1yk3a450 {\n min-height: var(--stackflow-plugin-basic-ui-app-bar-min-height);\n}\n.AppBar__1yk3a451 {\n background-color: var(--stackflow-plugin-basic-ui-app-bar-background-color);\n z-index: var(--zIndexes-appBar__1dlf4344);\n}\n.theme__1coppmz1 .AppBar__1yk3a451, :root[data-stackflow-plugin-basic-ui-theme=cupertino] .AppBar__1yk3a451 {\n position: absolute;\n}\n.theme__1coppmz1 .AppScreen__1dlf434b .AppBar__1yk3a451, :root[data-stackflow-plugin-basic-ui-theme=cupertino] .AppScreen__1dlf434b .AppBar__1yk3a451 {\n transform: translateX(100%);\n}\n.theme__1coppmz0 .AppBar__1yk3a451, :root[data-stackflow-plugin-basic-ui-theme=android] .AppBar__1yk3a451 {\n opacity: 0;\n transform: translateY(10rem);\n transition: transform var(--transitionDuration__1dlf4340), opacity var(--transitionDuration__1dlf4340);\n}\n.theme__1coppmz0 .AppScreen__1dlf4349 .AppBar__1yk3a451, :root[data-stackflow-plugin-basic-ui-theme=android] .AppScreen__1dlf4349 .AppBar__1yk3a451 {\n opacity: 1;\n transform: translateY(0);\n}\n.theme__1coppmz0 .AppScreen__1dlf434a .AppBar__1yk3a451, :root[data-stackflow-plugin-basic-ui-theme=android] .AppScreen__1dlf434a .AppBar__1yk3a451 {\n opacity: 1;\n transform: translateY(0);\n}\n.AppBar_border_true__1yk3a452 {\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.AppBar__1yk3a453 {\n height: constant(safe-area-inset-top);\n height: env(safe-area-inset-top);\n}\n.AppBar__1yk3a454 {\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.AppBar__1yk3a455 {\n padding: 0 0.5rem;\n}\n.AppBar__1yk3a455:empty {\n display: none;\n}\n.AppBar__1yk3a456 {\n color: var(--stackflow-plugin-basic-ui-app-bar-icon-color);\n transition: opacity 300ms;\n width: 2.25rem;\n height: 2.75rem;\n}\n.AppBar__1yk3a456:active {\n opacity: 0.2;\n transition: opacity 0s;\n}\n.AppBar__1yk3a459 {\n width: var(--appBar-center-mainWidth__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);\n}\n.theme__1coppmz0 .AppBar__1yk3a459, :root[data-stackflow-plugin-basic-ui-theme=android] .AppBar__1yk3a459 {\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.theme__1coppmz1 .AppBar__1yk3a459, :root[data-stackflow-plugin-basic-ui-theme=cupertino] .AppBar__1yk3a459 {\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: constant(safe-area-inset-top);\n top: env(safe-area-inset-top);\n}\n.theme__1coppmz0 .AppBar_hasLeft_true__1yk3a45a, :root[data-stackflow-plugin-basic-ui-theme=android] .AppBar_hasLeft_true__1yk3a45a {\n padding-left: 0.375rem;\n}\n.AppBar__1yk3a45b {\n left: 50%;\n height: 1.25rem;\n transform: translate(-50%);\n max-width: 5rem;\n display: none;\n width: var(--appBar-center-mainWidth__1dlf4345);\n}\n.theme__1coppmz1 .AppBar__1yk3a45b, :root[data-stackflow-plugin-basic-ui-theme=cupertino] .AppBar__1yk3a45b {\n display: block;\n}\n.AppBar__1yk3a45c {\n text-overflow: ellipsis;\n font-size: inherit;\n font-weight: inherit;\n}\n.AppBar__1yk3a45d {\n padding: 0 0.5rem;\n margin-left: auto;\n}\n.AppBar__1yk3a45d:empty {\n display: none;\n}\n.theme__1coppmz0 .AppBar__1yk3a45d, :root[data-stackflow-plugin-basic-ui-theme=android] .AppBar__1yk3a45d {\n padding: 0 0.5rem 0 0;\n}", ".BottomSheet__1ht38h03 {\n transition: var(--transitionDuration__1ht38h00);\n}\n.BottomSheet__1ht38h07 {\n transform: translateX(100%);\n}\n.BottomSheet__1ht38h0d {\n background-color: var(--stackflow-plugin-basic-ui-dim-background-color);\n z-index: var(--zIndexes-dim__1ht38h01);\n opacity: 0;\n}\n.BottomSheet__1ht38h04 .BottomSheet__1ht38h0d, .BottomSheet__1ht38h05 .BottomSheet__1ht38h0d {\n opacity: 1;\n}\n.BottomSheet__1ht38h06 .BottomSheet__1ht38h0d, .BottomSheet__1ht38h07 .BottomSheet__1ht38h0d {\n opacity: 0;\n}\n.BottomSheet__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 transform: translateY(100%);\n opacity: 0;\n}\n.BottomSheet__1ht38h04 .BottomSheet__1ht38h0e, .BottomSheet__1ht38h05 .BottomSheet__1ht38h0e {\n transform: translateY(0);\n opacity: 1;\n}\n.BottomSheet__1ht38h06 .BottomSheet__1ht38h0e, .BottomSheet__1ht38h07 .BottomSheet__1ht38h0e {\n transform: translateY(100%);\n opacity: 0;\n}", ".Modal__5ozg8c3 {\n transition: var(--transitionDuration__5ozg8c0);\n}\n.Modal__5ozg8c7 {\n transform: translateX(100%);\n}\n.Modal__5ozg8cd {\n background-color: var(--stackflow-plugin-basic-ui-dim-background-color);\n z-index: var(--zIndexes-dim__5ozg8c1);\n opacity: 0;\n}\n.Modal__5ozg8c4 .Modal__5ozg8cd, .Modal__5ozg8c5 .Modal__5ozg8cd {\n opacity: 1;\n}\n.Modal__5ozg8c6 .Modal__5ozg8cd, .Modal__5ozg8c7 .Modal__5ozg8cd {\n opacity: 0;\n}\n.Modal__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 transform: scale(1.1);\n opacity: 0;\n}\n.Modal__5ozg8c4 .Modal__5ozg8ce, .Modal__5ozg8c5 .Modal__5ozg8ce {\n transform: scale(1);\n opacity: 1;\n}\n.Modal__5ozg8c6 .Modal__5ozg8ce, .Modal__5ozg8c7 .Modal__5ozg8ce {\n transform: scale(1.1);\n opacity: 0;\n}"],
5
- "mappings": ";AAAA;AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AClDF;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;AAAA;AAEF;AAAA;AACE;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AAAA;AACE;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;AAEF;AACE;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;;;ACxEF;AACE;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AAAA;AACE;AACA;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;AAEF;AACE;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;AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AAAA;AACE;AAAA;;;AC7GF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;;;AC9BF;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;AAAA;AAEF;AAAA;AACE;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;",
3
+ "sources": ["vanilla-extract-css-ns:src/theme.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2U30rDMBTG7/cUAW8UltJWyyDik4iMNEnbYJMTTk5xTHx3s+Hu1LW9kdmRQP5+X044P45AAFozcRietSTJI0n12vTwxkM/tNbzWkar+GA5dcaZJ+k1gtUv7H3FGP/lep0OWoTBa66gBxTspmmaxzMqbd03SmxreZuv2VfPiurunJEMIS2Q14Da4E9G+WaqUbR7I1gRdmN1nbFtR4LdZxUaN03FCaWPlix4rgeUh4lg5aZycayRS5vzQrAqvXpKXVmk9jBWSmZHM6XzsKmBCByPnTF0yhRKbYeYcnX888dqAuRqCAbJelg45nlWTQe9zDZ/TvrEGP4b6tkR4+22UBCC2+fLpvharC+e4GLZBF/r8EVS/AmYPn1EXgsAAA==", "vanilla-extract-css-ns:src/styles/f.css.ts.vanilla.css?source=LmZfX2RodGh4cTAgewogIHdpZHRoOiAxMDAlOwp9Ci5mX19kaHRoeHExIHsKICBoZWlnaHQ6IDEwMCU7Cn0KLmZfX2RodGh4cTIgewogIHRvcDogMDsKfQouZl9fZGh0aHhxMyB7CiAgbGVmdDogMDsKfQouZl9fZGh0aHhxNCB7CiAgcG9zaXRpb246IGFic29sdXRlOwp9Ci5mX19kaHRoeHE1IHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLmZfX2RodGh4cTcgewogIGRpc3BsYXk6IGZsZXg7Cn0KLmZfX2RodGh4cTggewogIGZsZXg6IDE7Cn0KLmZfX2RodGh4cTkgewogIGFsaWduLWl0ZW1zOiBjZW50ZXI7Cn0KLmZfX2RodGh4cWEgewogIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDsKfQouZl9fZGh0aHhxYiB7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KLmZfX2RodGh4cWMgewogIG92ZXJmbG93OiBoaWRkZW47Cn0KLmZfX2RodGh4cWQgewogIHdoaXRlLXNwYWNlOiBub3dyYXA7Cn0KLmZfX2RodGh4cWUgewogIHRleHQtYWxpZ246IGNlbnRlcjsKfQouZl9fZGh0aHhxZiB7CiAgY3Vyc29yOiBwb2ludGVyOwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0KLmZfX2RodGh4cWcgewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KLmZfX2RodGh4cWggewogIGJveC1zaXppbmc6IGNvbnRlbnQtYm94Owp9Ci5mX19kaHRoeHFpIHsKICBhcHBlYXJhbmNlOiBub25lOwogIGJvcmRlcjogMDsKICBwYWRkaW5nOiAwOwogIGJhY2tncm91bmQ6IG5vbmU7Cn0=", "vanilla-extract-css-ns:src/components/AppScreen.css.ts.vanilla.css?source=#H4sIAAAAAAAAE71WwY7aMBC98xW+VAIVo2TZbtugHlr10nOPVbWa2CYxOLblONBS9d9rJxDYrpMlNKqEBJZn3ryZecx48VHrr8QwJh8fYyrW98v7B/RrglAKZJsZVUmKiRLKJGgHZopxad3FWqg91qLKuMQplJzgimPKC/y312w1+T1ZPI/x9sYY1+K/q/GtAVlyy5VMmt9rZYpjjPPd58qA/26do9kcKQ2E25/XGHdQIGcKPuyRgQDLlnQaR9GrOYrcp8ud1+5HGgmKVu50wFxS9uNUpsMXf2Klr3zrF8+85Z4LgUkOMmPJCaQOZHNWMGdMlNbFIUKhyHOUGKXsNwoWenpRQ30ASY3i9HsQqc4hZzzLbYLiyLBi9aTtCRJcMjA4M0A5k3Z6k8jmyGQpTKOmor6oXVV9302zLXXc4Qv/4Jte4Rt1Cul2301jtmOmrqazLIlRQvg24D1Lt9zi9ra54jJzWlUVyfskp0Ez04a5ey66VvhdzJLkRKCJm4KpyVJeagGOqVSSBTQbh8qxGaRZUjnylksVVO1myB/3Cm5BzY1JOBygL4toYApB6Y+ZQjjAjSkEp9owtn1TbROYzN0k66k3hOgIculj3yOWyyk2Wt1HkE5fOj3CGZ7OGSmH0h0+gXm0pmIt8PY/PivmSAOlbhpjq/SLDyPQ2h0MbpbtBTKmR+h6RF9AJoiAIC8u3KfAM/QaESWdudvVJawZBsPA7YiSWQ86Gy0Kk7uuAMF9IurW7Dm1uev44u7N8bHRtcAYzc59XV7Z/6Lpv09rYEari4dQXRG/SBAeCuN5/gG9kduZswsAAA==", "vanilla-extract-css-ns:src/components/AppBar.css.ts.vanilla.css?source=#H4sIAAAAAAAAE7VWyW7bMBC95yt4KWAXoUB5SRoFPTQoChRoTzn0UBQBJVI2G4oUSCpeiv57SWqxLUteEhcI4IicGc48vnnD4FOeP2D19BSunsd4MkXgzxUAGRNwTtlsbiLwgtUAQm1w8pxyuYA5L2Z2O8aaJbBgEOe5/VBw4zO8v/p7FbQChz5wbKPMlCwEgYnkUp0evu1pDwFgDZkgdFlHWX91X1Q7p/JswtPJeDLxxgvGOUzmWMxoBIzCQqdSZddA5jhhZuWTNnOaUeuXyDzP1iHYq+IaREpK85Nggw9k7eN8TIqcKsOE/LUfyMORS80MkyICONaSF4b2ZvGYKEpFU1J82dSOR/f5NqhVAHJs6JgMQoTeXQNk/4Yd+aM3pooFUZKRPgyr64sAuu/P0OYWIkWzMsXKrIK+calYtNn7XCjsfhtc0LChyynGvWC04L67JELHY+/CFh6G7fCttg7D/7GQjtivLKQKE0tFqHoyqqBNyFGpUnIJ9RwTuYgAE5oagPIlSDBPBjAE70/XLH8C1GxNh0OAzvWrdW5fTMc+zVqhEylsTGEGGqcUYkUx9FlDI3PP9tqQipcem/0jJjtHnJp5MwB2W6xcPjPKVm9BUjVXZ6rTUksxIUzMrA4AFExtr3eaRjTLbfM6B8J0zrEljpCCdhnfeLMz5xSzt7E1obZRqJVjjFCmy4lEzDwCo2BU5rvBexTc9pVwE+HEsBfaEr9g1Hcc0l1h7rx/lUFZXDk1YUKFsezLMBM/3HbTgVNf0Zl4GLo0PXhcmBXHps7dZabODnBu8rmyfhfasHRlC7XYCXuBKadLd4Yy9xtuQk5TuxdWl51aYy8OdikIP9zWJOBM0Ob5FQbTxnZRrcWSk/tap9jas77SDLt00kPmPDAOPGTueh8yWx3m0HALmLOZgMzQTFvZ8jzrRG+z5enj3bZXPRopzhi3wR1BOIV6pY0b8A8WvufvOHn031+s5R5+Nwi18a+h9xc0LS+1a5YMoN3cEdXXSKPMT1Btb3VQsvsYP8f6my1kd7Tht9G/O+a28lbsRsG4V7tib78D8obnjQgexj3DS1h1X+3QUvJXyNoJHRNfqmPi3ekTc5k8d4GVlE9u1wDyhSp3mOUD5yzXTLf4y8ScKrbP9GZ9Pzzpm5oOYuVKKu8JF0Z2+h8cpcfEmFxGjHuKcP/YNP4BuwZEPN0OAAA=", "vanilla-extract-css-ns:src/components/BottomSheet.css.ts.vanilla.css?source=#H4sIAAAAAAAAE6VT3U7DIBS+71NwY7IlPQtN1ZnuznjjtQ+wUGAtkcIC1OmM7y5U20ZT3GaTJpSf7+ccPlb32jndPNWcu+02q11+V+McvScIOUOUFU5oVaAXYhYA48pDa0gYBwhebpKPZDXFth7Zdto0xdevJI7nbJFhfJUi7L84AesISkKfK6NbxYBqqU1vyjq/sZP6AHvZVkJBSayg0ApgooHfKK+C0BGEYvy1Zzg+hhm3ATCIZt1JvSdUuLcC4ai7azRtOp1ev4kc72oc5LKo3O1lcuuz5OLV8X/2frLvB8Fc7Yvzdx6mpTaMGzCEidaeQdnZAxv8wQ/schYWh/KDOSmB1kRVvBjTmvZN2sQz7NP7HeOZmeGXZYb/9bDw8KrmxCrmKBKrU46ibfoES/9iF4cEAAA=", "vanilla-extract-css-ns:src/components/Modal.css.ts.vanilla.css?source=#H4sIAAAAAAAAE51T0W6CMBR99yv6sgQT2hQZ0+HrXvawbzCXtmKzQk1bpnPZv6+AaECcbkkT2ttzzj339kLeNAe1WiX6kC9YjL4mCDkDpZVO6jJFH2ACjM+Rl8pA/e0YdLqcfE9IT2V+VllrU6TtVoETMQ8iSh9CRP0aYfKGmQF7z42uSo6ZVtp0LqzzF2uld3irqlyWOAMrGa4k5rLAQ5aXR+iAZcnFvlM4vNYnYWtClzNqgHoLTLrPFNFLV49o4DIcBJIhoCnjJBldSj7dkpz/LjniUvyzd6N920nuNt65f6z6WIDxHJ8WzUhiRFHHMr3HdgNc73x8u0eUPM3qOw+J583G5BkEtH1sv0iUTMMGSpITdHEFOuugcdRCyfM11WnrxnBhsAEuK3tH0do5XXj/Qjjc4x7LVwqzDZS5SM+DHHb9X/bH2zJQIojI3ydJ3JokMfyVjrn6me4YsItMwwG7lmmsqh+//tn1NQQAAA=="],
4
+ "sourcesContent": [":root, :root[data-stackflow-plugin-basic-ui-theme=android] {\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-app-bar-border-color: rgba(0, 0, 0, 0.07);\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: 275ms;\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-text-color: #212124;\n --stackflow-plugin-basic-ui-app-bar-background-color: #fff;\n --stackflow-plugin-basic-ui-bottom-sheet-border-radius: 1rem;\n}\n:root[data-stackflow-plugin-basic-ui-theme=cupertino] {\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-app-bar-border-color: rgba(0, 0, 0, 0.07);\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: 275ms;\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-text-color: #212124;\n --stackflow-plugin-basic-ui-app-bar-background-color: #fff;\n --stackflow-plugin-basic-ui-bottom-sheet-border-radius: 1rem;\n}\n.theme__1coppmz0 {\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-app-bar-border-color: rgba(0, 0, 0, 0.07);\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: 275ms;\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-text-color: #212124;\n --stackflow-plugin-basic-ui-app-bar-background-color: #fff;\n --stackflow-plugin-basic-ui-bottom-sheet-border-radius: 1rem;\n}\n.theme__1coppmz1 {\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-app-bar-border-color: rgba(0, 0, 0, 0.07);\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: 275ms;\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-text-color: #212124;\n --stackflow-plugin-basic-ui-app-bar-background-color: #fff;\n --stackflow-plugin-basic-ui-bottom-sheet-border-radius: 1rem;\n}", ".f__dhthxq0 {\n width: 100%;\n}\n.f__dhthxq1 {\n height: 100%;\n}\n.f__dhthxq2 {\n top: 0;\n}\n.f__dhthxq3 {\n left: 0;\n}\n.f__dhthxq4 {\n position: absolute;\n}\n.f__dhthxq5 {\n position: relative;\n}\n.f__dhthxq7 {\n display: flex;\n}\n.f__dhthxq8 {\n flex: 1;\n}\n.f__dhthxq9 {\n align-items: center;\n}\n.f__dhthxqa {\n align-items: flex-end;\n}\n.f__dhthxqb {\n justify-content: center;\n}\n.f__dhthxqc {\n overflow: hidden;\n}\n.f__dhthxqd {\n white-space: nowrap;\n}\n.f__dhthxqe {\n text-align: center;\n}\n.f__dhthxqf {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n}\n.f__dhthxqg {\n box-sizing: border-box;\n}\n.f__dhthxqh {\n box-sizing: content-box;\n}\n.f__dhthxqi {\n appearance: none;\n border: 0;\n padding: 0;\n background: none;\n}", ".AppScreen__1dlf4346 {\n background-color: var(--stackflow-plugin-basic-ui-dim-background-color);\n}\n.AppScreen__1dlf4347 {\n background-color: var(--stackflow-plugin-basic-ui-background-color);\n}\n.AppScreen__1dlf4348 {\n transition: transform var(--transitionDuration__1dlf4340), opacity var(--transitionDuration__1dlf4340);\n}\n.AppScreen__1dlf434c {\n transform: translate3d(100%, 0, 0);\n}\n.AppScreen__1dlf434i {\n opacity: 0;\n z-index: var(--zIndexes-dim__1dlf4341);\n will-change: opacity;\n}\n.theme__1coppmz0 .AppScreen__1dlf434i, :root[data-stackflow-plugin-basic-ui-theme=android] .AppScreen__1dlf434i {\n height: 10rem;\n background: linear-gradient(var(--stackflow-plugin-basic-ui-dim-background-color), rgba(0, 0, 0, 0));\n}\n.AppScreen__1dlf4349 .AppScreen__1dlf434i {\n opacity: 1;\n}\n.AppScreen__1dlf434a .AppScreen__1dlf434i {\n opacity: 1;\n}\n.AppScreen__1dlf434b .AppScreen__1dlf434i {\n opacity: 0;\n}\n.AppScreen__1dlf434c .AppScreen__1dlf434i {\n opacity: 0;\n}\n.AppScreen__1dlf434j {\n overflow-y: scroll;\n -webkit-overflow-scrolling: touch;\n z-index: var(--zIndexes-paper__1dlf4342);\n will-change: transform;\n}\n.AppScreen__1dlf434j::-webkit-scrollbar {\n display: none;\n}\n.theme__1coppmz1 .AppScreen__1dlf434j, :root[data-stackflow-plugin-basic-ui-theme=cupertino] .AppScreen__1dlf434j {\n transform: translate3d(100%, 0, 0);\n}\n.theme__1coppmz1 .AppScreen__1dlf4349 .AppScreen__1dlf434j, :root[data-stackflow-plugin-basic-ui-theme=cupertino] .AppScreen__1dlf4349 .AppScreen__1dlf434j {\n transform: translate3d(0, 0, 0);\n}\n.theme__1coppmz1 .AppScreen__1dlf434a .AppScreen__1dlf434j, :root[data-stackflow-plugin-basic-ui-theme=cupertino] .AppScreen__1dlf434a .AppScreen__1dlf434j {\n transform: translate3d(0, 0, 0);\n}\n.theme__1coppmz0 .AppScreen__1dlf434j, :root[data-stackflow-plugin-basic-ui-theme=android] .AppScreen__1dlf434j {\n opacity: 0;\n transform: translate3d(0, 10rem, 0);\n}\n.theme__1coppmz0 .AppScreen__1dlf4349 .AppScreen__1dlf434j, :root[data-stackflow-plugin-basic-ui-theme=android] .AppScreen__1dlf4349 .AppScreen__1dlf434j {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n}\n.theme__1coppmz0 .AppScreen__1dlf434a .AppScreen__1dlf434j, :root[data-stackflow-plugin-basic-ui-theme=android] .AppScreen__1dlf434a .AppScreen__1dlf434j {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n}\n.AppScreen_hasAppBar_true__1dlf434k {\n transition: transform var(--transitionDuration__1dlf4340), opacity var(--transitionDuration__1dlf4340), padding-top var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration);\n padding-top: calc(var(--stackflow-plugin-basic-ui-app-bar-height) + constant(safe-area-inset-top));\n padding-top: calc(var(--stackflow-plugin-basic-ui-app-bar-height) + env(safe-area-inset-top));\n}\n.AppScreen__1dlf434l {\n width: 1.25rem;\n z-index: var(--zIndexes-edge__1dlf4343);\n}\n.AppScreen_hasAppBar_true__1dlf434m {\n top: var(--stackflow-plugin-basic-ui-app-bar-height);\n height: calc(100% - var(--stackflow-plugin-basic-ui-app-bar-height));\n}", ".AppBar__1yk3a450 {\n min-height: var(--stackflow-plugin-basic-ui-app-bar-min-height);\n}\n.AppBar__1yk3a451 {\n background-color: var(--stackflow-plugin-basic-ui-app-bar-background-color);\n z-index: var(--zIndexes-appBar__1dlf4344);\n will-change: transform, opacity;\n}\n.theme__1coppmz1 .AppBar__1yk3a451, :root[data-stackflow-plugin-basic-ui-theme=cupertino] .AppBar__1yk3a451 {\n position: absolute;\n}\n.theme__1coppmz1 .AppScreen__1dlf434b .AppBar__1yk3a451, :root[data-stackflow-plugin-basic-ui-theme=cupertino] .AppScreen__1dlf434b .AppBar__1yk3a451 {\n transform: translate3d(100%, 0, 0);\n}\n.theme__1coppmz0 .AppBar__1yk3a451, :root[data-stackflow-plugin-basic-ui-theme=android] .AppBar__1yk3a451 {\n opacity: 0;\n transform: translate3d(0, 10rem, 0);\n transition: transform var(--transitionDuration__1dlf4340), opacity var(--transitionDuration__1dlf4340);\n}\n.theme__1coppmz0 .AppScreen__1dlf4349 .AppBar__1yk3a451, :root[data-stackflow-plugin-basic-ui-theme=android] .AppScreen__1dlf4349 .AppBar__1yk3a451 {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n}\n.theme__1coppmz0 .AppScreen__1dlf434a .AppBar__1yk3a451, :root[data-stackflow-plugin-basic-ui-theme=android] .AppScreen__1dlf434a .AppBar__1yk3a451 {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n}\n.AppBar_border_true__1yk3a452 {\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.AppBar__1yk3a453 {\n height: constant(safe-area-inset-top);\n height: env(safe-area-inset-top);\n}\n.AppBar__1yk3a454 {\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.AppBar__1yk3a455 {\n padding: 0 0.5rem;\n}\n.AppBar__1yk3a455:empty {\n display: none;\n}\n.AppBar__1yk3a456 {\n color: var(--stackflow-plugin-basic-ui-app-bar-icon-color);\n transition: opacity 300ms;\n width: 2.25rem;\n height: 2.75rem;\n}\n.AppBar__1yk3a456:active {\n opacity: 0.2;\n transition: opacity 0s;\n}\n.AppBar__1yk3a459 {\n width: var(--appBar-center-mainWidth__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);\n}\n.theme__1coppmz0 .AppBar__1yk3a459, :root[data-stackflow-plugin-basic-ui-theme=android] .AppBar__1yk3a459 {\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.theme__1coppmz1 .AppBar__1yk3a459, :root[data-stackflow-plugin-basic-ui-theme=cupertino] .AppBar__1yk3a459 {\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: constant(safe-area-inset-top);\n top: env(safe-area-inset-top);\n}\n.theme__1coppmz0 .AppBar_hasLeft_true__1yk3a45a, :root[data-stackflow-plugin-basic-ui-theme=android] .AppBar_hasLeft_true__1yk3a45a {\n padding-left: 0.375rem;\n}\n.AppBar__1yk3a45b {\n left: 50%;\n height: 1.25rem;\n transform: translate(-50%);\n max-width: 5rem;\n display: none;\n width: var(--appBar-center-mainWidth__1dlf4345);\n}\n.theme__1coppmz1 .AppBar__1yk3a45b, :root[data-stackflow-plugin-basic-ui-theme=cupertino] .AppBar__1yk3a45b {\n display: block;\n}\n.AppBar__1yk3a45c {\n text-overflow: ellipsis;\n font-size: inherit;\n font-weight: inherit;\n}\n.AppBar__1yk3a45d {\n padding: 0 0.5rem;\n margin-left: auto;\n}\n.AppBar__1yk3a45d:empty {\n display: none;\n}\n.theme__1coppmz0 .AppBar__1yk3a45d, :root[data-stackflow-plugin-basic-ui-theme=android] .AppBar__1yk3a45d {\n padding: 0 0.5rem 0 0;\n}", ".BottomSheet__1ht38h03 {\n transition: var(--transitionDuration__1ht38h00);\n}\n.BottomSheet__1ht38h07 {\n transform: translate3d(100%, 0, 0);\n}\n.BottomSheet__1ht38h0d {\n background-color: var(--stackflow-plugin-basic-ui-dim-background-color);\n z-index: var(--zIndexes-dim__1ht38h01);\n opacity: 0;\n}\n.BottomSheet__1ht38h04 .BottomSheet__1ht38h0d, .BottomSheet__1ht38h05 .BottomSheet__1ht38h0d {\n opacity: 1;\n}\n.BottomSheet__1ht38h06 .BottomSheet__1ht38h0d, .BottomSheet__1ht38h07 .BottomSheet__1ht38h0d {\n opacity: 0;\n}\n.BottomSheet__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.BottomSheet__1ht38h04 .BottomSheet__1ht38h0e, .BottomSheet__1ht38h05 .BottomSheet__1ht38h0e {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n}\n.BottomSheet__1ht38h06 .BottomSheet__1ht38h0e, .BottomSheet__1ht38h07 .BottomSheet__1ht38h0e {\n transform: translate3d(0, 100%, 0);\n opacity: 0;\n}", ".Modal__5ozg8c3 {\n transition: var(--transitionDuration__5ozg8c0);\n}\n.Modal__5ozg8c7 {\n transform: translate3d(100%, 0, 0);\n}\n.Modal__5ozg8cd {\n background-color: var(--stackflow-plugin-basic-ui-dim-background-color);\n z-index: var(--zIndexes-dim__5ozg8c1);\n opacity: 0;\n}\n.Modal__5ozg8c4 .Modal__5ozg8cd, .Modal__5ozg8c5 .Modal__5ozg8cd {\n opacity: 1;\n}\n.Modal__5ozg8c6 .Modal__5ozg8cd, .Modal__5ozg8c7 .Modal__5ozg8cd {\n opacity: 0;\n}\n.Modal__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.Modal__5ozg8c4 .Modal__5ozg8ce, .Modal__5ozg8c5 .Modal__5ozg8ce {\n transform: scale(1);\n opacity: 1;\n}\n.Modal__5ozg8c6 .Modal__5ozg8ce, .Modal__5ozg8c7 .Modal__5ozg8ce {\n transform: scale(1.1);\n opacity: 0;\n}"],
5
+ "mappings": ";AAAA;AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;;AClDF;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;AAAA;AACE;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AAAA;AACE;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;AAEF;AACE;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;;;AC1EF;AACE;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AAAA;AACE;AACA;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;AAEF;AAAA;AACE;AACA;AAAA;AAEF;AACE;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;AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAEF;AAAA;AACE;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AAAA;AAEF;AAAA;AACE;AAAA;;;AC9GF;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.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export { basicUIPlugin } from "./basicUIPlugin";
2
- export { default as AppScreen } from "./components/AppScreen";
3
- export { default as BottomSheet } from "./components/BottomSheet";
4
- export { default as Modal } from "./components/Modal";
2
+ export { default as AppScreen, AppScreenContext, AppScreenProps, useAppScreen, } from "./components/AppScreen";
3
+ export { default as BottomSheet, BottomSheetProps, } from "./components/BottomSheet";
4
+ export { default as Modal, ModalProps } from "./components/Modal";
5
5
  export { globalVars as cssVars } from "./theme.css";
package/dist/index.js CHANGED
@@ -47,7 +47,8 @@ __export(src_exports, {
47
47
  BottomSheet: () => BottomSheet_default,
48
48
  Modal: () => Modal_default,
49
49
  basicUIPlugin: () => basicUIPlugin,
50
- cssVars: () => globalVars
50
+ cssVars: () => globalVars,
51
+ useAppScreen: () => useAppScreen
51
52
  });
52
53
  module.exports = __toCommonJS(src_exports);
53
54
 
@@ -313,7 +314,7 @@ function useStyleEffectOffset({
313
314
  styleName: "offset",
314
315
  refs,
315
316
  effect: hasEffect ? ({ activityTransitionState, refs: refs2 }) => {
316
- const transform = theme === "cupertino" ? `translateX(-${OFFSET_PX_CUPERTINO / 16}rem)` : `translateY(-${OFFSET_PX_ANDROID / 16}rem)`;
317
+ const transform = theme === "cupertino" ? `translate3d(-${OFFSET_PX_CUPERTINO / 16}rem, 0, 0)` : `translate3d(0, -${OFFSET_PX_ANDROID / 16}rem, 0)`;
317
318
  const cleanup = () => {
318
319
  requestNextFrame(() => {
319
320
  refs2.forEach((ref) => {
@@ -409,14 +410,14 @@ function useStyleEffectSwipeBack({
409
410
  $dim.style.opacity = `${1 - p}`;
410
411
  $dim.style.transition = "0s";
411
412
  $paper.style.overflowY = "hidden";
412
- $paper.style.transform = `translateX(${dx}px)`;
413
+ $paper.style.transform = `translate3d(${dx}px, 0, 0)`;
413
414
  $paper.style.transition = "0s";
414
415
  refs.forEach((ref) => {
415
416
  var _a;
416
417
  if (!ref.current) {
417
418
  return;
418
419
  }
419
- ref.current.style.transform = `translateX(${-1 * (1 - p) * OFFSET_PX_CUPERTINO}px)`;
420
+ ref.current.style.transform = `translate3d(${-1 * (1 - p) * OFFSET_PX_CUPERTINO}px, 0, 0)`;
420
421
  ref.current.style.transition = "0s";
421
422
  if (((_a = ref.current.parentElement) == null ? void 0 : _a.style.display) === "none") {
422
423
  ref.current.parentElement.style.display = "block";
@@ -439,7 +440,7 @@ function useStyleEffectSwipeBack({
439
440
  return;
440
441
  }
441
442
  ref.current.style.transition = `var(--stackflow-transition-duration)`;
442
- ref.current.style.transform = `translateX(${swiped ? "0" : `-${OFFSET_PX_CUPERTINO / 16}rem`})`;
443
+ ref.current.style.transform = `translate3d(${swiped ? "0" : `-${OFFSET_PX_CUPERTINO / 16}rem`}, 0, 0)`;
443
444
  });
444
445
  const _cachedRefs = [...cachedRefs];
445
446
  resolve();
@@ -735,6 +736,10 @@ AppBar.displayName = "AppBar";
735
736
  var AppBar_default = AppBar;
736
737
 
737
738
  // src/components/AppScreen.tsx
739
+ var Context = (0, import_react11.createContext)(null);
740
+ function useAppScreen() {
741
+ return (0, import_react11.useContext)(Context);
742
+ }
738
743
  var AppScreen = ({
739
744
  backgroundColor,
740
745
  dimBackgroundColor,
@@ -788,7 +793,20 @@ var AppScreen = ({
788
793
  });
789
794
  }
790
795
  };
791
- return /* @__PURE__ */ import_react11.default.createElement("div", {
796
+ return /* @__PURE__ */ import_react11.default.createElement(Context.Provider, {
797
+ value: (0, import_react11.useMemo)(
798
+ () => ({
799
+ scroll({ top }) {
800
+ var _a2;
801
+ (_a2 = paperRef == null ? void 0 : paperRef.current) == null ? void 0 : _a2.scroll({
802
+ top,
803
+ behavior: "smooth"
804
+ });
805
+ }
806
+ }),
807
+ [paperRef]
808
+ )
809
+ }, /* @__PURE__ */ import_react11.default.createElement("div", {
792
810
  ref: appScreenRef,
793
811
  className: appScreen({
794
812
  transitionState: transitionState === "enter-done" || transitionState === "exit-done" ? transitionState : lazyTransitionState
@@ -821,7 +839,7 @@ var AppScreen = ({
821
839
  }), appBar2 && /* @__PURE__ */ import_react11.default.createElement(AppBar_default, __spreadProps(__spreadValues({}, appBar2), {
822
840
  ref: appBarRef,
823
841
  onTopClick: onAppBarTopClick
824
- })));
842
+ }))));
825
843
  };
826
844
  AppScreen.displayName = "AppScreen";
827
845
  var AppScreen_default = AppScreen;