@stackflow/plugin-basic-ui 1.0.2 → 1.0.3-alpha.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.
- package/dist/basicUIPlugin.css.d.ts +1 -0
- package/dist/index.css +5 -1
- package/dist/index.css.map +3 -3
- package/dist/index.js +7 -6
- package/dist/index.js.map +2 -2
- package/dist/index.mjs +7 -6
- package/dist/index.mjs.map +2 -2
- package/package.json +2 -2
- package/src/basicUIPlugin.css.ts +2 -0
- package/src/basicUIPlugin.tsx +3 -1
- package/src/components/AppScreen.tsx +1 -1
- package/src/components/BottomSheet.tsx +1 -1
- package/src/components/Modal.tsx +1 -1
- package/src/hooks/useStyleEffectOffset.ts +2 -1
package/dist/index.css
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
/* vanilla-extract-css-ns:src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+
|
|
1
|
+
/* vanilla-extract-css-ns:src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2V0U7DIBSG730KEm80GU07rUtqfBJjDC2nLXNwEA5z0fjusulujNq1JtsNKUkp/P8pB/hyKodIM1ZtX/dSkOCeRPPUrvCF21XolOG18KrhQXHqQcOdMNKhkg/s7Ywx/oe8jhOdw2Akb3CFrmLnbdveDrik0j84XVeLi3zGvlpWlJdDgcgJ4xUpNFwGJ7adiuXaD/ka1DYQyMkBhLXxw/EanQT3Wwb5YjCDb4G8eoWKFXZzqK8H1fVUsausdKDHuf6dvY6D0xagmvjP/Y2ZF/G5PtRKsKGJ1mm3de/GNbitoGK9khLMkK9GItTc9wC0P18npAo+nvBur97PRjDZBAuOlMFE5WmozLNyPJfzbHFiMEeuIJH5SWb2WDzfyOV8mSfcUhFMRfAYqBUJtVTZUmU7Fm7lDjeLylCUwRoMRZlBA1H2AdhLdKk1DgAA */
|
|
2
2
|
:root,
|
|
3
3
|
:root[data-stackflow-plugin-basic-ui-theme=android] {
|
|
4
4
|
--stackflow-plugin-basic-ui-background-color: #fff;
|
|
5
5
|
--stackflow-plugin-basic-ui-dim-background-color: rgba(0, 0, 0, 0.15);
|
|
6
6
|
--stackflow-plugin-basic-ui-transition-duration: 0ms;
|
|
7
|
+
--stackflow-plugin-basic-ui-computed-transition-duration: 0ms;
|
|
7
8
|
--stackflow-plugin-basic-ui-app-bar-border-color: rgba(0, 0, 0, 0.07);
|
|
8
9
|
--stackflow-plugin-basic-ui-app-bar-border-size: 1px;
|
|
9
10
|
--stackflow-plugin-basic-ui-app-bar-height: 3.5rem;
|
|
@@ -19,6 +20,7 @@
|
|
|
19
20
|
--stackflow-plugin-basic-ui-background-color: #fff;
|
|
20
21
|
--stackflow-plugin-basic-ui-dim-background-color: rgba(0, 0, 0, 0.15);
|
|
21
22
|
--stackflow-plugin-basic-ui-transition-duration: 0ms;
|
|
23
|
+
--stackflow-plugin-basic-ui-computed-transition-duration: 0ms;
|
|
22
24
|
--stackflow-plugin-basic-ui-app-bar-border-color: rgba(0, 0, 0, 0.07);
|
|
23
25
|
--stackflow-plugin-basic-ui-app-bar-border-size: 0.5px;
|
|
24
26
|
--stackflow-plugin-basic-ui-app-bar-height: 2.75rem;
|
|
@@ -34,6 +36,7 @@
|
|
|
34
36
|
--stackflow-plugin-basic-ui-background-color: #fff;
|
|
35
37
|
--stackflow-plugin-basic-ui-dim-background-color: rgba(0, 0, 0, 0.15);
|
|
36
38
|
--stackflow-plugin-basic-ui-transition-duration: 0ms;
|
|
39
|
+
--stackflow-plugin-basic-ui-computed-transition-duration: 0ms;
|
|
37
40
|
--stackflow-plugin-basic-ui-app-bar-border-color: rgba(0, 0, 0, 0.07);
|
|
38
41
|
--stackflow-plugin-basic-ui-app-bar-border-size: 1px;
|
|
39
42
|
--stackflow-plugin-basic-ui-app-bar-height: 3.5rem;
|
|
@@ -49,6 +52,7 @@
|
|
|
49
52
|
--stackflow-plugin-basic-ui-background-color: #fff;
|
|
50
53
|
--stackflow-plugin-basic-ui-dim-background-color: rgba(0, 0, 0, 0.15);
|
|
51
54
|
--stackflow-plugin-basic-ui-transition-duration: 0ms;
|
|
55
|
+
--stackflow-plugin-basic-ui-computed-transition-duration: 0ms;
|
|
52
56
|
--stackflow-plugin-basic-ui-app-bar-border-color: rgba(0, 0, 0, 0.07);
|
|
53
57
|
--stackflow-plugin-basic-ui-app-bar-border-size: 0.5px;
|
|
54
58
|
--stackflow-plugin-basic-ui-app-bar-height: 2.75rem;
|
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+
|
|
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-transition-duration: 0ms;\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: 0ms;\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-app-bar-overflow: hidden;\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-transition-duration: 0ms;\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: 0ms;\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-app-bar-overflow: hidden;\n --stackflow-plugin-basic-ui-bottom-sheet-border-radius: 1rem;\n}\n._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: 0ms;\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: 0ms;\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-app-bar-overflow: hidden;\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: 0ms;\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: 0ms;\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-app-bar-overflow: hidden;\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\n ._1q6dj2j0 ._1dlf434i,\n :root[data-stackflow-plugin-basic-ui-theme=android] ._1dlf434i\n {\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\n ._1q6dj2j1 ._1dlf434j,\n :root[data-stackflow-plugin-basic-ui-theme=cupertino] ._1dlf434j\n {\n transform: translate3d(100%, 0, 0);\n}\n\n ._1q6dj2j1 ._1dlf4349 ._1dlf434j,\n :root[data-stackflow-plugin-basic-ui-theme=cupertino] ._1dlf4349 ._1dlf434j,\n ._1q6dj2j1 ._1dlf434a ._1dlf434j,\n :root[data-stackflow-plugin-basic-ui-theme=cupertino] ._1dlf434a ._1dlf434j\n {\n transform: translate3d(0, 0, 0);\n}\n\n ._1q6dj2j0 ._1dlf434j,\n :root[data-stackflow-plugin-basic-ui-theme=android] ._1dlf434j\n {\n opacity: 0;\n transform: translate3d(0, 10rem, 0);\n}\n\n ._1q6dj2j0 ._1dlf4349 ._1dlf434j,\n :root[data-stackflow-plugin-basic-ui-theme=android] ._1dlf4349 ._1dlf434j,\n ._1q6dj2j0 ._1dlf434a ._1dlf434j,\n :root[data-stackflow-plugin-basic-ui-theme=android] ._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: 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\n ._1q6dj2j1 ._1dlf434l,\n :root[data-stackflow-plugin-basic-ui-theme=cupertino] ._1dlf434l\n {\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}", "._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}\n\n ._1q6dj2j1 ._1yk3a452,\n :root[data-stackflow-plugin-basic-ui-theme=cupertino] ._1yk3a452\n {\n position: absolute;\n}\n\n ._1q6dj2j1 ._1dlf434b ._1yk3a452,\n :root[data-stackflow-plugin-basic-ui-theme=cupertino] ._1dlf434b ._1yk3a452\n {\n transform: translate3d(100%, 0, 0);\n transition: 0s;\n}\n\n ._1q6dj2j0 ._1yk3a452,\n :root[data-stackflow-plugin-basic-ui-theme=android] ._1yk3a452\n {\n opacity: 0;\n transform: translate3d(0, 10rem, 0);\n transition: transform var(--_1dlf4340), opacity var(--_1dlf4340);\n}\n\n ._1q6dj2j0 ._1dlf4349 ._1yk3a452,\n :root[data-stackflow-plugin-basic-ui-theme=android] ._1dlf4349 ._1yk3a452,\n ._1q6dj2j0 ._1dlf434a ._1yk3a452,\n :root[data-stackflow-plugin-basic-ui-theme=android] ._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\n ._1q6dj2j1 ._1yk3a454,\n :root[data-stackflow-plugin-basic-ui-theme=cupertino] ._1yk3a454\n {\n transform: translate3d(0, 100vh, 0);\n transition: transform var(--_1dlf4340), opacity var(--_1dlf4340);\n}\n\n ._1q6dj2j1 ._1dlf4349 ._1yk3a454,\n :root[data-stackflow-plugin-basic-ui-theme=cupertino] ._1dlf4349 ._1yk3a454,\n ._1q6dj2j1 ._1dlf434a ._1yk3a454,\n :root[data-stackflow-plugin-basic-ui-theme=cupertino] ._1dlf434a ._1yk3a454\n {\n transform: translate3d(0, 0, 0);\n}\n\n ._1q6dj2j1 ._1dlf434b ._1yk3a454,\n :root[data-stackflow-plugin-basic-ui-theme=cupertino] ._1dlf434b ._1yk3a454\n {\n transform: translate3d(0, 100vh, 0);\n transition: transform var(--_1dlf4340), opacity var(--_1dlf4340);\n}\n._1yk3a455 {\n height: constant(safe-area-inset-top);\n height: 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;\n width: 2.25rem;\n height: 2.75rem;\n}\n._1yk3a458:active {\n opacity: 0.2;\n transition: opacity 0s;\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);\n}\n\n ._1q6dj2j0 ._1yk3a45b,\n :root[data-stackflow-plugin-basic-ui-theme=android] ._1yk3a45b\n {\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\n ._1q6dj2j1 ._1yk3a45b,\n :root[data-stackflow-plugin-basic-ui-theme=cupertino] ._1yk3a45b\n {\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\n ._1q6dj2j0 ._1yk3a45c,\n :root[data-stackflow-plugin-basic-ui-theme=android] ._1yk3a45c\n {\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\n ._1q6dj2j1 ._1yk3a45d,\n :root[data-stackflow-plugin-basic-ui-theme=cupertino] ._1yk3a45d\n {\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\n ._1q6dj2j0 ._1yk3a45f,\n :root[data-stackflow-plugin-basic-ui-theme=android] ._1yk3a45f\n {\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;AAAA;AACE;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;AAAA;AAEF;AACE;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;AAAA;AAEF;AACE;AAAA;;;
|
|
3
|
+
"sources": ["vanilla-extract-css-ns:src/basicUIPlugin.css.ts.vanilla.css?source=#H4sIAAAAAAAAE+2V0U7DIBSG730KEm80GU07rUtqfBJjDC2nLXNwEA5z0fjusulujNq1JtsNKUkp/P8pB/hyKodIM1ZtX/dSkOCeRPPUrvCF21XolOG18KrhQXHqQcOdMNKhkg/s7Ywx/oe8jhOdw2Akb3CFrmLnbdveDrik0j84XVeLi3zGvlpWlJdDgcgJ4xUpNFwGJ7adiuXaD/ka1DYQyMkBhLXxw/EanQT3Wwb5YjCDb4G8eoWKFXZzqK8H1fVUsausdKDHuf6dvY6D0xagmvjP/Y2ZF/G5PtRKsKGJ1mm3de/GNbitoGK9khLMkK9GItTc9wC0P18npAo+nvBur97PRjDZBAuOlMFE5WmozLNyPJfzbHFiMEeuIJH5SWb2WDzfyOV8mSfcUhFMRfAYqBUJtVTZUmU7Fm7lDjeLylCUwRoMRZlBA1H2AdhLdKk1DgAA", "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=#H4sIAAAAAAAAE7WW3bKaMBDH732K3HRGpsQJenrag9Mn6XQ6SxIhGhMagvZj+u4NoEhERM/xMFyAm/z2n91l19mPiMnV0+LpGf2dIJQA3aRGl4phqqU2MdqBmWJcWGdYSb3HuSxToXAChaC4FJiJLT7fFSwn/yazI/nzK8nXqV9qqjWgCmGFVnHzvNJmeyAfV5IgRDoHKuzvnsVD0hOywhyIEixfsGlEyIcQEXf7m0S96cCPEVm6tz9YKMZ/xWfuoqAy7oWUmGagUh4f91VEZ2ouh/75zNbzNUEnL2Frjo3W9hsDC1diZzO+5V9BMaMF+97hHDGV6IyLNLMxiojh26WXoxhJoTgYnBpggis7fVUdhMikCUxJE7gqdsH5URtdLxeP2v4GAydowx5dxibXsXQMS7xUrxvjjps6As5eUKOlrEKH9zzZCItba2MSKnVlpEuaXamLeb8u2iL0BcTx0U+DT8DUmpgocglOkNKKe6HolFN0Ou067Cy4o6BomXNjhdKdklqfULd/PiP6Xt5H6hD2kgR4Hwlwb+DISNTI23X228SZNL+7DQutG8mNYh+Q4r7u0QSThya4L2A4vd1WdVOyW9DmIZMuRDkw5voRtjofnb2Q5+7F4GZE4JNzzEoD1UPdszrIGFGQdHRM+OAAfURUK7fcTZgCVhyD4eC6ZMFtBQ0e5oWr3ZADr1QvNwMZekve2ANkF3b90z+0Tb8gtvWmvWA2c+U0m386jO+B8bLwd6vGZRXLO8O47PxnqNNQqUP4Xkwl5z+l8Vc0dwoAAA==", "vanilla-extract-css-ns:src/components/AppBar.css.ts.vanilla.css?source=#H4sIAAAAAAAAE81XS28aMRC+8yt8qQQVXnl55AHqpYfeeuqxqiLv2gtOvPbWNgRS9b/X630aloUkRGqUA9gz429e3wzBQ7h/muLZHIE/AwBSJuCastXaLMAWqyGE2uD4KeHyGWZ8s7LXEdYshhsGcZbZLwo2OqPl4O8gqCyGzqLcUpWrX26v0vCtTZy1yCqvlNwIAmPJpbrc6qGmtQ7AC2SC0F1l5SEkPJlNZzN3+cw4h/EaixVdAKOw0IlU6RjIDMfM7HN0Vqr6s0B/35DHyWMIGszjlsBCSWl+EmxwD1qzpin9Em8yqgwT8lfLVmMqD0QmNTNMigXAkZZ8Y2gvnsKv6NrQjs36KOuolQHk2NApGYYIfRoDZP9doN1V6Q3Sp/xA7wePBVGSkdNRLVNrYSxPo7e4Q6Ro2gW/VjmoKDSq6+boptfhQuj+ur73G+0CgD8CAD6fh7A/D2UJtWhiWtCE3EG9xiSnHSY0NQBlOxBjHg9hCD5fThpSEaqgZi90NALotXoV0Xj57aaK2dgTeSdZzNrGehrRlTLarj+olLtZ6P76Xp8z3AUDfxQM/KY81KV8Fnj0UcCj/6OAahBz93K1jsRSWKeEGWqcUIgVxdC1NjQyc29XglRsT8i0bN94ti/t63rN8T0tjl9pBTYWINkonH/wMd4Wkx4TwsTKziSAgrmdO77MgqaZDWQuSZjOOLasKaSgntSdu3/lxsRsxFu7UtvhKn1ThFJd7ErErBdgEkwKhE1oJ8HtEei7BY4N29KDmRtMTr1TbAW1fuQUyzf9Epo7rK/01NCdOeHpdVM7OOrr1lYTNc38rp0mGrT6tgxSvnHlrj1utGHJ3jorDBU2PQmnu/wNZZZNrUFOE3sXlqlMrLCbgfYoCO9uqxRzJmj9ayEM5rXsc3kWSU6W1ThmL66Ky9Foj7oDEr43IF3z0AtJ1+rcap48IvkB5mwlIDM01ZZ8bLCo6oxgc+XKyKm1T11EEpwybo3nhcIp1Htt8gXyqw3h03cc/3Dfv1nJoxjeIHSYgyr8LknzIrFd/DyE9tKjxrfwnMwu4F4n1Ue83VOtVf3xm0fZcQfEh9PLr2sUTI85iThBL6ZNades1h/mFO9g2XCVwgEn97DWmWYgV2sG0m6GGl/EZfzkRaSgZ1fUzY94yjnLNNMHNcnEmip2XL31ectucmqs5QFUuRNFFvDGSF+xb9b1UmtyJWpNPB459CD/YKH8A4KdXslTEQAA", "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": [":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-transition-duration: 0ms;\n --stackflow-plugin-basic-ui-computed-transition-duration: 0ms;\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: 0ms;\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-app-bar-overflow: hidden;\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-transition-duration: 0ms;\n --stackflow-plugin-basic-ui-computed-transition-duration: 0ms;\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: 0ms;\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-app-bar-overflow: hidden;\n --stackflow-plugin-basic-ui-bottom-sheet-border-radius: 1rem;\n}\n._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: 0ms;\n --stackflow-plugin-basic-ui-computed-transition-duration: 0ms;\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: 0ms;\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-app-bar-overflow: hidden;\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: 0ms;\n --stackflow-plugin-basic-ui-computed-transition-duration: 0ms;\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: 0ms;\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-app-bar-overflow: hidden;\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\n ._1q6dj2j0 ._1dlf434i,\n :root[data-stackflow-plugin-basic-ui-theme=android] ._1dlf434i\n {\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\n ._1q6dj2j1 ._1dlf434j,\n :root[data-stackflow-plugin-basic-ui-theme=cupertino] ._1dlf434j\n {\n transform: translate3d(100%, 0, 0);\n}\n\n ._1q6dj2j1 ._1dlf4349 ._1dlf434j,\n :root[data-stackflow-plugin-basic-ui-theme=cupertino] ._1dlf4349 ._1dlf434j,\n ._1q6dj2j1 ._1dlf434a ._1dlf434j,\n :root[data-stackflow-plugin-basic-ui-theme=cupertino] ._1dlf434a ._1dlf434j\n {\n transform: translate3d(0, 0, 0);\n}\n\n ._1q6dj2j0 ._1dlf434j,\n :root[data-stackflow-plugin-basic-ui-theme=android] ._1dlf434j\n {\n opacity: 0;\n transform: translate3d(0, 10rem, 0);\n}\n\n ._1q6dj2j0 ._1dlf4349 ._1dlf434j,\n :root[data-stackflow-plugin-basic-ui-theme=android] ._1dlf4349 ._1dlf434j,\n ._1q6dj2j0 ._1dlf434a ._1dlf434j,\n :root[data-stackflow-plugin-basic-ui-theme=android] ._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: 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\n ._1q6dj2j1 ._1dlf434l,\n :root[data-stackflow-plugin-basic-ui-theme=cupertino] ._1dlf434l\n {\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}", "._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}\n\n ._1q6dj2j1 ._1yk3a452,\n :root[data-stackflow-plugin-basic-ui-theme=cupertino] ._1yk3a452\n {\n position: absolute;\n}\n\n ._1q6dj2j1 ._1dlf434b ._1yk3a452,\n :root[data-stackflow-plugin-basic-ui-theme=cupertino] ._1dlf434b ._1yk3a452\n {\n transform: translate3d(100%, 0, 0);\n transition: 0s;\n}\n\n ._1q6dj2j0 ._1yk3a452,\n :root[data-stackflow-plugin-basic-ui-theme=android] ._1yk3a452\n {\n opacity: 0;\n transform: translate3d(0, 10rem, 0);\n transition: transform var(--_1dlf4340), opacity var(--_1dlf4340);\n}\n\n ._1q6dj2j0 ._1dlf4349 ._1yk3a452,\n :root[data-stackflow-plugin-basic-ui-theme=android] ._1dlf4349 ._1yk3a452,\n ._1q6dj2j0 ._1dlf434a ._1yk3a452,\n :root[data-stackflow-plugin-basic-ui-theme=android] ._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\n ._1q6dj2j1 ._1yk3a454,\n :root[data-stackflow-plugin-basic-ui-theme=cupertino] ._1yk3a454\n {\n transform: translate3d(0, 100vh, 0);\n transition: transform var(--_1dlf4340), opacity var(--_1dlf4340);\n}\n\n ._1q6dj2j1 ._1dlf4349 ._1yk3a454,\n :root[data-stackflow-plugin-basic-ui-theme=cupertino] ._1dlf4349 ._1yk3a454,\n ._1q6dj2j1 ._1dlf434a ._1yk3a454,\n :root[data-stackflow-plugin-basic-ui-theme=cupertino] ._1dlf434a ._1yk3a454\n {\n transform: translate3d(0, 0, 0);\n}\n\n ._1q6dj2j1 ._1dlf434b ._1yk3a454,\n :root[data-stackflow-plugin-basic-ui-theme=cupertino] ._1dlf434b ._1yk3a454\n {\n transform: translate3d(0, 100vh, 0);\n transition: transform var(--_1dlf4340), opacity var(--_1dlf4340);\n}\n._1yk3a455 {\n height: constant(safe-area-inset-top);\n height: 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;\n width: 2.25rem;\n height: 2.75rem;\n}\n._1yk3a458:active {\n opacity: 0.2;\n transition: opacity 0s;\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);\n}\n\n ._1q6dj2j0 ._1yk3a45b,\n :root[data-stackflow-plugin-basic-ui-theme=android] ._1yk3a45b\n {\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\n ._1q6dj2j1 ._1yk3a45b,\n :root[data-stackflow-plugin-basic-ui-theme=cupertino] ._1yk3a45b\n {\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\n ._1q6dj2j0 ._1yk3a45c,\n :root[data-stackflow-plugin-basic-ui-theme=android] ._1yk3a45c\n {\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\n ._1q6dj2j1 ._1yk3a45d,\n :root[data-stackflow-plugin-basic-ui-theme=cupertino] ._1yk3a45d\n {\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\n ._1q6dj2j0 ._1yk3a45f,\n :root[data-stackflow-plugin-basic-ui-theme=android] ._1yk3a45f\n {\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;AAAA;AACE;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;AAAA;AAEF;AACE;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;AAAA;AAEF;AACE;AAAA;;;ACjEF;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;AAGM;AAAA;AAGN;AACA;AAAA;AAGM;AAAA;AAGN;AAAA;AAGM;AAAA;AAGN;AAAA;AAEF;AACE;AACA;AACA;AACA;AAAA;AAEF;AACE;AAAA;AAGQ;AAAA;AAGR;AAAA;AAGQ;AAAA;AAAA;AAAA;AAKR;AAAA;AAGQ;AAAA;AAGR;AACA;AAAA;AAGQ;AAAA;AAAA;AAAA;AAKR;AACA;AAAA;AAEF;AACE;AAAA;AAAA;AAAA;AACA;AACA;AAAA;AAGU;AAAA;AAGV;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AACA;AAAA;;;AC5FF;AACE;AAAA;AAEF;AACE;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAGQ;AAAA;AAGR;AAAA;AAGQ;AAAA;AAGR;AACA;AAAA;AAGQ;AAAA;AAGR;AACA;AACA;AAAA;AAGQ;AAAA;AAAA;AAAA;AAKR;AACA;AAAA;AAEF;AACE;AAAA;AAGU;AAAA;AAGV;AACA;AAAA;AAGU;AAAA;AAAA;AAAA;AAKV;AAAA;AAGU;AAAA;AAGV;AACA;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;AAGM;AAAA;AAGN;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGM;AAAA;AAGN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAGU;AAAA;AAGV;AAAA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AAAA;AAGM;AAAA;AAGN;AAAA;AAEF;AACE;AACA;AACA;AAAA;AAEF;AACE;AACA;AAAA;AAEF;AACE;AAAA;AAGM;AAAA;AAGN;AAAA;;;ACjKF;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
|
@@ -107,7 +107,7 @@ var import_react = require("react");
|
|
|
107
107
|
|
|
108
108
|
// src/basicUIPlugin.css.ts
|
|
109
109
|
var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
110
|
-
var globalVars = { backgroundColor: "var(--stackflow-plugin-basic-ui-background-color)", dimBackgroundColor: "var(--stackflow-plugin-basic-ui-dim-background-color)", transitionDuration: "var(--stackflow-plugin-basic-ui-transition-duration)", appBar: { borderColor: "var(--stackflow-plugin-basic-ui-app-bar-border-color)", borderSize: "var(--stackflow-plugin-basic-ui-app-bar-border-size)", height: "var(--stackflow-plugin-basic-ui-app-bar-height)", heightTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration)", minHeight: "var(--stackflow-plugin-basic-ui-app-bar-min-height)", iconColor: "var(--stackflow-plugin-basic-ui-app-bar-icon-color)", textColor: "var(--stackflow-plugin-basic-ui-app-bar-text-color)", backgroundColor: "var(--stackflow-plugin-basic-ui-app-bar-background-color)", overflow: "var(--stackflow-plugin-basic-ui-app-bar-overflow)" }, bottomSheet: { borderRadius: "var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)" }, modal: { borderRadius: "var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)" } };
|
|
110
|
+
var globalVars = { backgroundColor: "var(--stackflow-plugin-basic-ui-background-color)", dimBackgroundColor: "var(--stackflow-plugin-basic-ui-dim-background-color)", transitionDuration: "var(--stackflow-plugin-basic-ui-transition-duration)", computedTransitionDuration: "var(--stackflow-plugin-basic-ui-computed-transition-duration)", appBar: { borderColor: "var(--stackflow-plugin-basic-ui-app-bar-border-color)", borderSize: "var(--stackflow-plugin-basic-ui-app-bar-border-size)", height: "var(--stackflow-plugin-basic-ui-app-bar-height)", heightTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration)", minHeight: "var(--stackflow-plugin-basic-ui-app-bar-min-height)", iconColor: "var(--stackflow-plugin-basic-ui-app-bar-icon-color)", textColor: "var(--stackflow-plugin-basic-ui-app-bar-text-color)", backgroundColor: "var(--stackflow-plugin-basic-ui-app-bar-background-color)", overflow: "var(--stackflow-plugin-basic-ui-app-bar-overflow)" }, bottomSheet: { borderRadius: "var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)" }, modal: { borderRadius: "var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)" } };
|
|
111
111
|
var stackWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1q6dj2j2", variantClassNames: { theme: { android: "_1q6dj2j0", cupertino: "_1q6dj2j1" }, loading: { true: "_1q6dj2j5" } }, defaultVariants: {}, compoundVariants: [] });
|
|
112
112
|
|
|
113
113
|
// src/utils/compact.ts
|
|
@@ -195,7 +195,8 @@ var basicUIPlugin = (options) => () => ({
|
|
|
195
195
|
compactMap({
|
|
196
196
|
[globalVars.backgroundColor]: options.backgroundColor,
|
|
197
197
|
[globalVars.dimBackgroundColor]: options.dimBackgroundColor,
|
|
198
|
-
[globalVars.transitionDuration]:
|
|
198
|
+
[globalVars.transitionDuration]: `${stack.transitionDuration}ms`,
|
|
199
|
+
[globalVars.computedTransitionDuration]: stack.globalTransitionState === "loading" ? `${stack.transitionDuration}ms` : "0ms",
|
|
199
200
|
[globalVars.appBar.borderColor]: (_a = options.appBar) == null ? void 0 : _a.borderColor,
|
|
200
201
|
[globalVars.appBar.borderSize]: (_b = options.appBar) == null ? void 0 : _b.borderSize,
|
|
201
202
|
[globalVars.appBar.height]: (_c = options.appBar) == null ? void 0 : _c.height,
|
|
@@ -392,7 +393,7 @@ function useStyleEffectOffset({
|
|
|
392
393
|
if (!ref.current) {
|
|
393
394
|
return;
|
|
394
395
|
}
|
|
395
|
-
ref.current.style.transition = globalVars.
|
|
396
|
+
ref.current.style.transition = globalVars.computedTransitionDuration;
|
|
396
397
|
ref.current.style.transform = transform;
|
|
397
398
|
});
|
|
398
399
|
switch (activityTransitionState) {
|
|
@@ -903,7 +904,7 @@ var AppScreen = ({
|
|
|
903
904
|
[vars.zIndexes.paper]: `${zIndexPaper}`,
|
|
904
905
|
[vars.zIndexes.edge]: `${zIndexEdge}`,
|
|
905
906
|
[vars.zIndexes.appBar]: `${zIndexAppBar}`,
|
|
906
|
-
[vars.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? globalVars.
|
|
907
|
+
[vars.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? globalVars.computedTransitionDuration : "0ms"
|
|
907
908
|
})
|
|
908
909
|
),
|
|
909
910
|
children: [
|
|
@@ -1008,7 +1009,7 @@ var BottomSheet = ({
|
|
|
1008
1009
|
[globalVars.dimBackgroundColor]: dimBackgroundColor,
|
|
1009
1010
|
[vars2.zIndexes.dim]: `${zIndexBase}`,
|
|
1010
1011
|
[vars2.zIndexes.paper]: `${zIndexPaper}`,
|
|
1011
|
-
[vars2.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? globalVars.
|
|
1012
|
+
[vars2.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? globalVars.computedTransitionDuration : "0ms"
|
|
1012
1013
|
})
|
|
1013
1014
|
),
|
|
1014
1015
|
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 }) })
|
|
@@ -1088,7 +1089,7 @@ var Modal = ({
|
|
|
1088
1089
|
[globalVars.dimBackgroundColor]: dimBackgroundColor,
|
|
1089
1090
|
[vars3.zIndexes.dim]: `${zIndexBase}`,
|
|
1090
1091
|
[vars3.zIndexes.paper]: `${zIndexPaper}`,
|
|
1091
|
-
[vars3.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? globalVars.
|
|
1092
|
+
[vars3.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? globalVars.computedTransitionDuration : "0ms"
|
|
1092
1093
|
})
|
|
1093
1094
|
),
|
|
1094
1095
|
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 }) })
|