@preprio/prepr-nextjs 1.0.0-beta.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/README.md +135 -0
- package/dist/chunk-IQXHJV5O.mjs +25 -0
- package/dist/chunk-IQXHJV5O.mjs.map +1 -0
- package/dist/components.css +326 -0
- package/dist/components.css.map +1 -0
- package/dist/components.d.mts +9 -0
- package/dist/components.d.ts +9 -0
- package/dist/components.js +270 -0
- package/dist/components.js.map +1 -0
- package/dist/components.mjs +243 -0
- package/dist/components.mjs.map +1 -0
- package/dist/index.d.mts +62 -0
- package/dist/index.d.ts +62 -0
- package/dist/index.js +166 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +119 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +68 -0
package/README.md
ADDED
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
# Prepr Nextjs
|
|
2
|
+
|
|
3
|
+
## Getting Started
|
|
4
|
+
<hr>
|
|
5
|
+
The Prepr NextJS package offers some helper functions and a PreviewBar component for an
|
|
6
|
+
easier personalization & A/B testing implementation in your NextJS project.
|
|
7
|
+
|
|
8
|
+
## Installation
|
|
9
|
+
<hr>
|
|
10
|
+
To install the Prepr NextJS package, run the following command:
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install @prepr/prepr-nextjs
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
Next you should navigate to your .env file and add the following environment variables:
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
PREPR_ENV=
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
Certain functionality like the PreviewBar component requires the `PREPR_ENV` environment variable to be set to `preview`.
|
|
23
|
+
To prevent unwanted display of the PreviewBar component in production, you can set the `PREPR_ENV` environment variable to `production`.
|
|
24
|
+
|
|
25
|
+
Next we will implement the PreprMiddleware function, navigate to your `middleware.js|middleware.ts`
|
|
26
|
+
file. If you don't have this file, you can create it in the root of your project.
|
|
27
|
+
|
|
28
|
+
Then add the following code to the `middleware.js|middleware.ts` file:
|
|
29
|
+
```javascript
|
|
30
|
+
import type { NextRequest } from 'next/server'
|
|
31
|
+
import { PreprMiddleware } from 'prepr-nextjs'
|
|
32
|
+
|
|
33
|
+
export function middleware(request: NextRequest) {
|
|
34
|
+
return PreprMiddleware(request)
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
The PreprMiddleware accepts a request and optional response property and returns a `NextRequest` object.
|
|
39
|
+
This is done so you are able to chain your own middleware to it.
|
|
40
|
+
|
|
41
|
+
### Middleware functionality
|
|
42
|
+
The PreprMiddleware function will check on every request if the `__prepr_uid` cookie is set. If it is not set it will generate a new UUID and set it as a cookie.
|
|
43
|
+
Then it returns a `Prepr-Customer-Id` header with the value of the `__prepr_uid` cookie. This makes for easy personalization & A/B testing implementation.
|
|
44
|
+
|
|
45
|
+
If the `PREPR_ENV` environment variable is set to `preview`, the PreprMiddleware function will also check for searchParams `segments` and `a-b-testing` in the URL.
|
|
46
|
+
If these searchParams are set, the PreprMiddleware will set the `Prepr-Segments` and `Prepr-AB-Testing` headers with the values of the searchParams, and store its value in a cookie.
|
|
47
|
+
|
|
48
|
+
## Usage
|
|
49
|
+
To setup the headers with your API calls, you can call the `getPreprHeaders()` helper function. This will return an array of headers that you can spread in your fetch call.
|
|
50
|
+
|
|
51
|
+
```javascript
|
|
52
|
+
import { getClient } from '@/lib/client'
|
|
53
|
+
import { GetPageBySlugDocument, GetPageBySlugQuery } from '@/gql/graphql'
|
|
54
|
+
import { getPreprHeaders } from 'prepr-nextjs'
|
|
55
|
+
|
|
56
|
+
const getData = async () => {
|
|
57
|
+
// Fetching the data using Apollo Client
|
|
58
|
+
const {data} = await getClient().query < GetPageBySlugQuery > ({
|
|
59
|
+
query: GetPageBySlugDocument,
|
|
60
|
+
variables: {
|
|
61
|
+
slug: '/',
|
|
62
|
+
},
|
|
63
|
+
context: {
|
|
64
|
+
// Call the getPreprHeaders function to get the appropriate headers
|
|
65
|
+
headers: getPreprHeaders(),
|
|
66
|
+
},
|
|
67
|
+
fetchPolicy: 'no-cache',
|
|
68
|
+
})
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### Installing the PreviewBar component
|
|
73
|
+
|
|
74
|
+
For the PreviewBar to work we need to fetch all the segments from the Prepr API. To do this navigate to Prepr -> Settings -> Access tokens and create a new access token with the following scopes:
|
|
75
|
+
- `segments`
|
|
76
|
+
|
|
77
|
+
THen copy the access token and navigate to your `.env` file and add the following environment variable:
|
|
78
|
+
```bash
|
|
79
|
+
PREPR_SEGMENTS_ACCESS_TOKEN=<YOUR_ACCESS_TOKEN>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
Next we will implement the PreviewBar component, navigate to your root layout file, this is usually `layout.tsx`.
|
|
83
|
+
|
|
84
|
+
Then add the following code to the `layout.tsx` file:
|
|
85
|
+
|
|
86
|
+
```javascript
|
|
87
|
+
// Helper function to get all the props for the PreviewBar component (this needs a server component)
|
|
88
|
+
import { getPreviewBarProps } from 'prepr-nextjs'
|
|
89
|
+
// Import the PreviewBar component
|
|
90
|
+
import { PreprPreviewBar } from 'prepr-nextjs/components'
|
|
91
|
+
// Import the PreviewBar CSS
|
|
92
|
+
import 'prepr-nextjs/dist/components.css'
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
export default async function RootLayout({children}: {children: React.ReactNode}) {
|
|
96
|
+
// Get the props for the PreviewBar component, pass the access token as an argument
|
|
97
|
+
const previewBarProps = await getPreviewBarProps(process.env.PREPR_SEGMENTS_ACCESS_TOKEN)
|
|
98
|
+
|
|
99
|
+
return (
|
|
100
|
+
<html>
|
|
101
|
+
<head>
|
|
102
|
+
{/*...*/}
|
|
103
|
+
</head>
|
|
104
|
+
<body>
|
|
105
|
+
{/* Render the PreviewBar component and spread the previewBarProps */}
|
|
106
|
+
<PreprPreviewBar {...previewBarProps} />
|
|
107
|
+
{children}
|
|
108
|
+
</body>
|
|
109
|
+
</html>
|
|
110
|
+
)
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
Now the PreviewBar component will be rendered on every page of your website. The PreviewBar component will show the segments and A/B testing variants in a dropdown. If you have added the `getPreprHeaders()` function
|
|
115
|
+
to your API calls it should automatically update the segments and A/B testing variants when you select a new one in the PreviewBar component.
|
|
116
|
+
|
|
117
|
+
### Helper functions
|
|
118
|
+
|
|
119
|
+
#### getPreprUUID()()
|
|
120
|
+
The `getPreprUUID()` function will return the value of the `__prepr_uid` cookie. This can be useful if you want to store the `__prepr_uid` in a cookie or local storage.
|
|
121
|
+
|
|
122
|
+
#### getActiveSegment()
|
|
123
|
+
Returns the active segment from the `Prepr-Segments` header.
|
|
124
|
+
|
|
125
|
+
#### getActiveVariant()
|
|
126
|
+
Returns the active variant from the `Prepr-AB-Testing` header.
|
|
127
|
+
|
|
128
|
+
#### getPreviewHeaders()
|
|
129
|
+
Helper function to only get the preview headers.
|
|
130
|
+
|
|
131
|
+
#### getPreprHeaders()
|
|
132
|
+
Helper function that will either return the customer id header or the preview headers depending on the `PREPR_ENV` environment variable.
|
|
133
|
+
|
|
134
|
+
#### getPreviewBarProps()
|
|
135
|
+
Helper function to get the props for the PreviewBar component. Will return the segments and A/B testing variants aswell as an aray of all the segments.
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
var __async = (__this, __arguments, generator) => {
|
|
2
|
+
return new Promise((resolve, reject) => {
|
|
3
|
+
var fulfilled = (value) => {
|
|
4
|
+
try {
|
|
5
|
+
step(generator.next(value));
|
|
6
|
+
} catch (e) {
|
|
7
|
+
reject(e);
|
|
8
|
+
}
|
|
9
|
+
};
|
|
10
|
+
var rejected = (value) => {
|
|
11
|
+
try {
|
|
12
|
+
step(generator.throw(value));
|
|
13
|
+
} catch (e) {
|
|
14
|
+
reject(e);
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
18
|
+
step((generator = generator.apply(__this, __arguments)).next());
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export {
|
|
23
|
+
__async
|
|
24
|
+
};
|
|
25
|
+
//# sourceMappingURL=chunk-IQXHJV5O.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,326 @@
|
|
|
1
|
+
@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";
|
|
2
|
+
|
|
3
|
+
/* src/main.css */
|
|
4
|
+
.prp-sticky {
|
|
5
|
+
position: sticky;
|
|
6
|
+
}
|
|
7
|
+
.prp-top-0 {
|
|
8
|
+
top: 0px;
|
|
9
|
+
}
|
|
10
|
+
.prp-z-\[1000\] {
|
|
11
|
+
z-index: 1000;
|
|
12
|
+
}
|
|
13
|
+
.prp-z-\[100\] {
|
|
14
|
+
z-index: 100;
|
|
15
|
+
}
|
|
16
|
+
.prp-z-\[9999\] {
|
|
17
|
+
z-index: 9999;
|
|
18
|
+
}
|
|
19
|
+
.prp-mr-1 {
|
|
20
|
+
margin-right: 0.25rem;
|
|
21
|
+
}
|
|
22
|
+
.prp-mr-10 {
|
|
23
|
+
margin-right: 2.5rem;
|
|
24
|
+
}
|
|
25
|
+
.prp-block {
|
|
26
|
+
display: block;
|
|
27
|
+
}
|
|
28
|
+
.prp-flex {
|
|
29
|
+
display: flex;
|
|
30
|
+
}
|
|
31
|
+
.prp-hidden {
|
|
32
|
+
display: none;
|
|
33
|
+
}
|
|
34
|
+
.prp-h-10 {
|
|
35
|
+
height: 2.5rem;
|
|
36
|
+
}
|
|
37
|
+
.prp-h-8 {
|
|
38
|
+
height: 2rem;
|
|
39
|
+
}
|
|
40
|
+
.prp-h-full {
|
|
41
|
+
height: 100%;
|
|
42
|
+
}
|
|
43
|
+
.prp-w-3 {
|
|
44
|
+
width: 0.75rem;
|
|
45
|
+
}
|
|
46
|
+
.prp-w-\[13rem\] {
|
|
47
|
+
width: 13rem;
|
|
48
|
+
}
|
|
49
|
+
.prp-w-\[var\(--button-width\)\] {
|
|
50
|
+
width: var(--button-width);
|
|
51
|
+
}
|
|
52
|
+
.prp-w-full {
|
|
53
|
+
width: 100%;
|
|
54
|
+
}
|
|
55
|
+
.prp-max-w-\[15rem\] {
|
|
56
|
+
max-width: 15rem;
|
|
57
|
+
}
|
|
58
|
+
.prp-max-w-\[312px\] {
|
|
59
|
+
max-width: 312px;
|
|
60
|
+
}
|
|
61
|
+
.prp-flex-initial {
|
|
62
|
+
flex: 0 1 auto;
|
|
63
|
+
}
|
|
64
|
+
.prp-cursor-pointer {
|
|
65
|
+
cursor: pointer;
|
|
66
|
+
}
|
|
67
|
+
.prp-flex-wrap {
|
|
68
|
+
flex-wrap: wrap;
|
|
69
|
+
}
|
|
70
|
+
.prp-items-center {
|
|
71
|
+
align-items: center;
|
|
72
|
+
}
|
|
73
|
+
.prp-justify-center {
|
|
74
|
+
justify-content: center;
|
|
75
|
+
}
|
|
76
|
+
.prp-justify-between {
|
|
77
|
+
justify-content: space-between;
|
|
78
|
+
}
|
|
79
|
+
.prp-gap-1 {
|
|
80
|
+
gap: 0.25rem;
|
|
81
|
+
}
|
|
82
|
+
.prp-gap-2 {
|
|
83
|
+
gap: 0.5rem;
|
|
84
|
+
}
|
|
85
|
+
.prp-gap-4 {
|
|
86
|
+
gap: 1rem;
|
|
87
|
+
}
|
|
88
|
+
.prp-gap-8 {
|
|
89
|
+
gap: 2rem;
|
|
90
|
+
}
|
|
91
|
+
.prp-gap-6 {
|
|
92
|
+
gap: 1.5rem;
|
|
93
|
+
}
|
|
94
|
+
.prp-gap-x-6 {
|
|
95
|
+
-moz-column-gap: 1.5rem;
|
|
96
|
+
column-gap: 1.5rem;
|
|
97
|
+
}
|
|
98
|
+
.prp-gap-y-4 {
|
|
99
|
+
row-gap: 1rem;
|
|
100
|
+
}
|
|
101
|
+
.prp-space-y-2 > :not([hidden]) ~ :not([hidden]) {
|
|
102
|
+
--tw-space-y-reverse: 0;
|
|
103
|
+
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
|
|
104
|
+
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
|
|
105
|
+
}
|
|
106
|
+
.prp-space-y-3 > :not([hidden]) ~ :not([hidden]) {
|
|
107
|
+
--tw-space-y-reverse: 0;
|
|
108
|
+
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
|
|
109
|
+
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
|
|
110
|
+
}
|
|
111
|
+
.prp-self-center {
|
|
112
|
+
align-self: center;
|
|
113
|
+
}
|
|
114
|
+
.prp-rounded-lg {
|
|
115
|
+
border-radius: 0.5rem;
|
|
116
|
+
}
|
|
117
|
+
.prp-rounded-md {
|
|
118
|
+
border-radius: 0.375rem;
|
|
119
|
+
}
|
|
120
|
+
.prp-rounded-b-md {
|
|
121
|
+
border-bottom-right-radius: 0.375rem;
|
|
122
|
+
border-bottom-left-radius: 0.375rem;
|
|
123
|
+
}
|
|
124
|
+
.prp-border {
|
|
125
|
+
border-width: 1px;
|
|
126
|
+
}
|
|
127
|
+
.prp-border-gray-300 {
|
|
128
|
+
--tw-border-opacity: 1;
|
|
129
|
+
border-color: rgb(209 213 219 / var(--tw-border-opacity));
|
|
130
|
+
}
|
|
131
|
+
.prp-bg-grey-400 {
|
|
132
|
+
--tw-bg-opacity: 1;
|
|
133
|
+
background-color: rgb(156 163 175 / var(--tw-bg-opacity));
|
|
134
|
+
}
|
|
135
|
+
.prp-bg-indigo-default {
|
|
136
|
+
--tw-bg-opacity: 1;
|
|
137
|
+
background-color: rgb(67 56 202 / var(--tw-bg-opacity));
|
|
138
|
+
}
|
|
139
|
+
.prp-bg-orange-400 {
|
|
140
|
+
--tw-bg-opacity: 1;
|
|
141
|
+
background-color: rgb(251 146 60 / var(--tw-bg-opacity));
|
|
142
|
+
}
|
|
143
|
+
.prp-bg-white {
|
|
144
|
+
--tw-bg-opacity: 1;
|
|
145
|
+
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
146
|
+
}
|
|
147
|
+
.prp-p-1 {
|
|
148
|
+
padding: 0.25rem;
|
|
149
|
+
}
|
|
150
|
+
.prp-p-4 {
|
|
151
|
+
padding: 1rem;
|
|
152
|
+
}
|
|
153
|
+
.prp-px-3 {
|
|
154
|
+
padding-left: 0.75rem;
|
|
155
|
+
padding-right: 0.75rem;
|
|
156
|
+
}
|
|
157
|
+
.prp-px-4 {
|
|
158
|
+
padding-left: 1rem;
|
|
159
|
+
padding-right: 1rem;
|
|
160
|
+
}
|
|
161
|
+
.prp-px-5 {
|
|
162
|
+
padding-left: 1.25rem;
|
|
163
|
+
padding-right: 1.25rem;
|
|
164
|
+
}
|
|
165
|
+
.prp-py-2 {
|
|
166
|
+
padding-top: 0.5rem;
|
|
167
|
+
padding-bottom: 0.5rem;
|
|
168
|
+
}
|
|
169
|
+
.prp-py-3 {
|
|
170
|
+
padding-top: 0.75rem;
|
|
171
|
+
padding-bottom: 0.75rem;
|
|
172
|
+
}
|
|
173
|
+
.prp-py-4 {
|
|
174
|
+
padding-top: 1rem;
|
|
175
|
+
padding-bottom: 1rem;
|
|
176
|
+
}
|
|
177
|
+
.prp-pb-0\.5 {
|
|
178
|
+
padding-bottom: 0.125rem;
|
|
179
|
+
}
|
|
180
|
+
.prp-pb-1 {
|
|
181
|
+
padding-bottom: 0.25rem;
|
|
182
|
+
}
|
|
183
|
+
.prp-pb-2 {
|
|
184
|
+
padding-bottom: 0.5rem;
|
|
185
|
+
}
|
|
186
|
+
.prp-pb-\[2px\] {
|
|
187
|
+
padding-bottom: 2px;
|
|
188
|
+
}
|
|
189
|
+
.prp-text-center {
|
|
190
|
+
text-align: center;
|
|
191
|
+
}
|
|
192
|
+
.prp-text-base {
|
|
193
|
+
font-size: 1rem;
|
|
194
|
+
line-height: 1.5rem;
|
|
195
|
+
}
|
|
196
|
+
.prp-text-lg {
|
|
197
|
+
font-size: 1.125rem;
|
|
198
|
+
line-height: 1.75rem;
|
|
199
|
+
}
|
|
200
|
+
.prp-text-sm {
|
|
201
|
+
font-size: 0.875rem;
|
|
202
|
+
line-height: 1.25rem;
|
|
203
|
+
}
|
|
204
|
+
.prp-text-xs {
|
|
205
|
+
font-size: 0.75rem;
|
|
206
|
+
line-height: 1rem;
|
|
207
|
+
}
|
|
208
|
+
.prp-font-black {
|
|
209
|
+
font-weight: 900;
|
|
210
|
+
}
|
|
211
|
+
.prp-font-bold {
|
|
212
|
+
font-weight: 700;
|
|
213
|
+
}
|
|
214
|
+
.prp-leading-\[1\.375rem\] {
|
|
215
|
+
line-height: 1.375rem;
|
|
216
|
+
}
|
|
217
|
+
.prp-leading-tight {
|
|
218
|
+
line-height: 1.25;
|
|
219
|
+
}
|
|
220
|
+
.prp-text-gray-500 {
|
|
221
|
+
--tw-text-opacity: 1;
|
|
222
|
+
color: rgb(107 114 128 / var(--tw-text-opacity));
|
|
223
|
+
}
|
|
224
|
+
.prp-text-gray-900 {
|
|
225
|
+
--tw-text-opacity: 1;
|
|
226
|
+
color: rgb(17 24 39 / var(--tw-text-opacity));
|
|
227
|
+
}
|
|
228
|
+
.prp-text-indigo-300 {
|
|
229
|
+
--tw-text-opacity: 1;
|
|
230
|
+
color: rgb(165 180 252 / var(--tw-text-opacity));
|
|
231
|
+
}
|
|
232
|
+
.prp-text-indigo-700 {
|
|
233
|
+
--tw-text-opacity: 1;
|
|
234
|
+
color: rgb(67 56 202 / var(--tw-text-opacity));
|
|
235
|
+
}
|
|
236
|
+
.prp-text-white {
|
|
237
|
+
--tw-text-opacity: 1;
|
|
238
|
+
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
239
|
+
}
|
|
240
|
+
.prp-ring-0 {
|
|
241
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
242
|
+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
243
|
+
box-shadow:
|
|
244
|
+
var(--tw-ring-offset-shadow),
|
|
245
|
+
var(--tw-ring-shadow),
|
|
246
|
+
var(--tw-shadow, 0 0 #0000);
|
|
247
|
+
}
|
|
248
|
+
.prp-regular-text {
|
|
249
|
+
font-size: 0.875rem;
|
|
250
|
+
line-height: 1.25rem;
|
|
251
|
+
font-weight: 500;
|
|
252
|
+
line-height: 1.5;
|
|
253
|
+
}
|
|
254
|
+
.prp-base {
|
|
255
|
+
font-family: Inter, sans-serif;
|
|
256
|
+
}
|
|
257
|
+
.prp-dropshadow {
|
|
258
|
+
box-shadow: 0px 0px 12px 0px #C3C3C3;
|
|
259
|
+
}
|
|
260
|
+
.prp-dropshadow-popover {
|
|
261
|
+
box-shadow: 0px 3px 16px 0px rgba(84, 84, 84, 0.45);
|
|
262
|
+
}
|
|
263
|
+
.hover\:prp-cursor-pointer:hover {
|
|
264
|
+
cursor: pointer;
|
|
265
|
+
}
|
|
266
|
+
.hover\:prp-bg-gray-100:hover {
|
|
267
|
+
--tw-bg-opacity: 1;
|
|
268
|
+
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
|
269
|
+
}
|
|
270
|
+
.hover\:prp-text-indigo-400:hover {
|
|
271
|
+
--tw-text-opacity: 1;
|
|
272
|
+
color: rgb(129 140 248 / var(--tw-text-opacity));
|
|
273
|
+
}
|
|
274
|
+
.focus\:prp-ring-0:focus {
|
|
275
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
276
|
+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
277
|
+
box-shadow:
|
|
278
|
+
var(--tw-ring-offset-shadow),
|
|
279
|
+
var(--tw-ring-shadow),
|
|
280
|
+
var(--tw-shadow, 0 0 #0000);
|
|
281
|
+
}
|
|
282
|
+
.data-\[open\]\:prp-rounded-b-none[data-open] {
|
|
283
|
+
border-bottom-right-radius: 0px;
|
|
284
|
+
border-bottom-left-radius: 0px;
|
|
285
|
+
}
|
|
286
|
+
.data-\[open\]\:prp-border-b-white[data-open] {
|
|
287
|
+
--tw-border-opacity: 1;
|
|
288
|
+
border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity));
|
|
289
|
+
}
|
|
290
|
+
.data-\[checked\]\:prp-bg-indigo-600[data-checked] {
|
|
291
|
+
--tw-bg-opacity: 1;
|
|
292
|
+
background-color: rgb(67 56 202 / var(--tw-bg-opacity));
|
|
293
|
+
}
|
|
294
|
+
.data-\[checked\]\:prp-text-white[data-checked] {
|
|
295
|
+
--tw-text-opacity: 1;
|
|
296
|
+
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
297
|
+
}
|
|
298
|
+
@media (min-width: 768px) {
|
|
299
|
+
.md\:prp-inline {
|
|
300
|
+
display: inline;
|
|
301
|
+
}
|
|
302
|
+
.md\:prp-w-\[15rem\] {
|
|
303
|
+
width: 15rem;
|
|
304
|
+
}
|
|
305
|
+
.md\:prp-w-auto {
|
|
306
|
+
width: auto;
|
|
307
|
+
}
|
|
308
|
+
.md\:prp-px-19\.5 {
|
|
309
|
+
padding-left: 4.875rem;
|
|
310
|
+
padding-right: 4.875rem;
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
@media (min-width: 1024px) {
|
|
314
|
+
.lg\:prp-block {
|
|
315
|
+
display: block;
|
|
316
|
+
}
|
|
317
|
+
.lg\:prp-gap-6 {
|
|
318
|
+
gap: 1.5rem;
|
|
319
|
+
}
|
|
320
|
+
}
|
|
321
|
+
@media (min-width: 1440px) {
|
|
322
|
+
.\32xl\:prp-flex {
|
|
323
|
+
display: flex;
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
/*# sourceMappingURL=components.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/main.css"],"sourcesContent":["@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');\n.prp-sticky{\n position: sticky;\n}\n.prp-top-0{\n top: 0px;\n}\n.prp-z-\\[1000\\]{\n z-index: 1000;\n}\n.prp-z-\\[100\\]{\n z-index: 100;\n}\n.prp-z-\\[9999\\]{\n z-index: 9999;\n}\n.prp-mr-1{\n margin-right: 0.25rem;\n}\n.prp-mr-10{\n margin-right: 2.5rem;\n}\n.prp-block{\n display: block;\n}\n.prp-flex{\n display: flex;\n}\n.prp-hidden{\n display: none;\n}\n.prp-h-10{\n height: 2.5rem;\n}\n.prp-h-8{\n height: 2rem;\n}\n.prp-h-full{\n height: 100%;\n}\n.prp-w-3{\n width: 0.75rem;\n}\n.prp-w-\\[13rem\\]{\n width: 13rem;\n}\n.prp-w-\\[var\\(--button-width\\)\\]{\n width: var(--button-width);\n}\n.prp-w-full{\n width: 100%;\n}\n.prp-max-w-\\[15rem\\]{\n max-width: 15rem;\n}\n.prp-max-w-\\[312px\\]{\n max-width: 312px;\n}\n.prp-flex-initial{\n flex: 0 1 auto;\n}\n.prp-cursor-pointer{\n cursor: pointer;\n}\n.prp-flex-wrap{\n flex-wrap: wrap;\n}\n.prp-items-center{\n align-items: center;\n}\n.prp-justify-center{\n justify-content: center;\n}\n.prp-justify-between{\n justify-content: space-between;\n}\n.prp-gap-1{\n gap: 0.25rem;\n}\n.prp-gap-2{\n gap: 0.5rem;\n}\n.prp-gap-4{\n gap: 1rem;\n}\n.prp-gap-8{\n gap: 2rem;\n}\n.prp-gap-6{\n gap: 1.5rem;\n}\n.prp-gap-x-6{\n -moz-column-gap: 1.5rem;\n column-gap: 1.5rem;\n}\n.prp-gap-y-4{\n row-gap: 1rem;\n}\n.prp-space-y-2 > :not([hidden]) ~ :not([hidden]){\n --tw-space-y-reverse: 0;\n margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));\n}\n.prp-space-y-3 > :not([hidden]) ~ :not([hidden]){\n --tw-space-y-reverse: 0;\n margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));\n}\n.prp-self-center{\n align-self: center;\n}\n.prp-rounded-lg{\n border-radius: 0.5rem;\n}\n.prp-rounded-md{\n border-radius: 0.375rem;\n}\n.prp-rounded-b-md{\n border-bottom-right-radius: 0.375rem;\n border-bottom-left-radius: 0.375rem;\n}\n.prp-border{\n border-width: 1px;\n}\n.prp-border-gray-300{\n --tw-border-opacity: 1;\n border-color: rgb(209 213 219 / var(--tw-border-opacity));\n}\n.prp-bg-grey-400{\n --tw-bg-opacity: 1;\n background-color: rgb(156 163 175 / var(--tw-bg-opacity));\n}\n.prp-bg-indigo-default{\n --tw-bg-opacity: 1;\n background-color: rgb(67 56 202 / var(--tw-bg-opacity));\n}\n.prp-bg-orange-400{\n --tw-bg-opacity: 1;\n background-color: rgb(251 146 60 / var(--tw-bg-opacity));\n}\n.prp-bg-white{\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.prp-p-1{\n padding: 0.25rem;\n}\n.prp-p-4{\n padding: 1rem;\n}\n.prp-px-3{\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.prp-px-4{\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.prp-px-5{\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n.prp-py-2{\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.prp-py-3{\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.prp-py-4{\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.prp-pb-0\\.5{\n padding-bottom: 0.125rem;\n}\n.prp-pb-1{\n padding-bottom: 0.25rem;\n}\n.prp-pb-2{\n padding-bottom: 0.5rem;\n}\n.prp-pb-\\[2px\\]{\n padding-bottom: 2px;\n}\n.prp-text-center{\n text-align: center;\n}\n.prp-text-base{\n font-size: 1rem;\n line-height: 1.5rem;\n}\n.prp-text-lg{\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.prp-text-sm{\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.prp-text-xs{\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.prp-font-black{\n font-weight: 900;\n}\n.prp-font-bold{\n font-weight: 700;\n}\n.prp-leading-\\[1\\.375rem\\]{\n line-height: 1.375rem;\n}\n.prp-leading-tight{\n line-height: 1.25;\n}\n.prp-text-gray-500{\n --tw-text-opacity: 1;\n color: rgb(107 114 128 / var(--tw-text-opacity));\n}\n.prp-text-gray-900{\n --tw-text-opacity: 1;\n color: rgb(17 24 39 / var(--tw-text-opacity));\n}\n.prp-text-indigo-300{\n --tw-text-opacity: 1;\n color: rgb(165 180 252 / var(--tw-text-opacity));\n}\n.prp-text-indigo-700{\n --tw-text-opacity: 1;\n color: rgb(67 56 202 / var(--tw-text-opacity));\n}\n.prp-text-white{\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.prp-ring-0{\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.prp-regular-text{\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 500;\n line-height: 1.5;\n}\n\n.prp-base {\n font-family: Inter, sans-serif;\n}\n\n.prp-dropshadow {\n box-shadow: 0px 0px 12px 0px #C3C3C3;\n}\n\n.prp-dropshadow-popover {\n box-shadow: 0px 3px 16px 0px rgba(84, 84, 84, 0.45);\n}\n\n.hover\\:prp-cursor-pointer:hover{\n cursor: pointer;\n}\n\n.hover\\:prp-bg-gray-100:hover{\n --tw-bg-opacity: 1;\n background-color: rgb(243 244 246 / var(--tw-bg-opacity));\n}\n\n.hover\\:prp-text-indigo-400:hover{\n --tw-text-opacity: 1;\n color: rgb(129 140 248 / var(--tw-text-opacity));\n}\n\n.focus\\:prp-ring-0:focus{\n --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.data-\\[open\\]\\:prp-rounded-b-none[data-open]{\n border-bottom-right-radius: 0px;\n border-bottom-left-radius: 0px;\n}\n\n.data-\\[open\\]\\:prp-border-b-white[data-open]{\n --tw-border-opacity: 1;\n border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity));\n}\n\n.data-\\[checked\\]\\:prp-bg-indigo-600[data-checked]{\n --tw-bg-opacity: 1;\n background-color: rgb(67 56 202 / var(--tw-bg-opacity));\n}\n\n.data-\\[checked\\]\\:prp-text-white[data-checked]{\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n\n@media (min-width: 768px){\n .md\\:prp-inline{\n display: inline;\n }\n .md\\:prp-w-\\[15rem\\]{\n width: 15rem;\n }\n .md\\:prp-w-auto{\n width: auto;\n }\n .md\\:prp-px-19\\.5{\n padding-left: 4.875rem;\n padding-right: 4.875rem;\n }\n}\n\n@media (min-width: 1024px){\n .lg\\:prp-block{\n display: block;\n }\n .lg\\:prp-gap-6{\n gap: 1.5rem;\n }\n}\n\n@media (min-width: 1440px){\n .\\32xl\\:prp-flex{\n display: flex;\n }\n}"],"mappings":"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","names":[]}
|