@getmicdrop/venue-calendar 1.0.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 +548 -0
- package/dist/venue-calendar.css +1 -0
- package/dist/venue-calendar.es.js +3997 -0
- package/dist/venue-calendar.es.js.map +1 -0
- package/dist/venue-calendar.iife.js +7 -0
- package/dist/venue-calendar.iife.js.map +1 -0
- package/dist/venue-calendar.umd.js +7 -0
- package/dist/venue-calendar.umd.js.map +1 -0
- package/package.json +65 -0
package/README.md
ADDED
|
@@ -0,0 +1,548 @@
|
|
|
1
|
+
# @get-micdrop/venue-calendar
|
|
2
|
+
|
|
3
|
+
A beautiful, customizable calendar component built with Svelte for displaying comedy events. Perfect for comedy clubs, venues, and event organizers who want to showcase their upcoming shows.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
✨ **Three View Modes**: List, Gallery, and Calendar views
|
|
8
|
+
🎨 **Beautiful UI**: Modern, responsive design built with Tailwind CSS
|
|
9
|
+
📱 **Mobile-Friendly**: Fully responsive across all devices
|
|
10
|
+
🔌 **Easy Integration**: Works with React, Vue, vanilla JS, and more
|
|
11
|
+
🌐 **CDN Ready**: Use directly in HTML via JSDelivr
|
|
12
|
+
⚡ **Auto-Mount**: Automatically finds and mounts to designated containers
|
|
13
|
+
🎯 **Customizable**: Configure views, navigation, and more
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
### NPM/Yarn
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install @get-micdrop/venue-calendar
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
or
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
yarn add @get-micdrop/venue-calendar
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
### CDN (JSDelivr)
|
|
30
|
+
|
|
31
|
+
```html
|
|
32
|
+
<!-- Latest version -->
|
|
33
|
+
<script src="https://cdn.jsdelivr.net/npm/@get-micdrop/venue-calendar/dist/venue-calendar.iife.js"></script>
|
|
34
|
+
|
|
35
|
+
<!-- Specific version (recommended for production) -->
|
|
36
|
+
<script src="https://cdn.jsdelivr.net/npm/@get-micdrop/venue-calendar@1.0.0/dist/venue-calendar.iife.js"></script>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Quick Start
|
|
40
|
+
|
|
41
|
+
### Method 1: Auto-Mount (Easiest)
|
|
42
|
+
|
|
43
|
+
Simply add a div with the class `micdrop-calendar-container` and the calendar will automatically mount:
|
|
44
|
+
|
|
45
|
+
```html
|
|
46
|
+
<!DOCTYPE html>
|
|
47
|
+
<html>
|
|
48
|
+
<head>
|
|
49
|
+
<title>My Comedy Club</title>
|
|
50
|
+
</head>
|
|
51
|
+
<body>
|
|
52
|
+
<!-- Calendar will auto-mount here -->
|
|
53
|
+
<div class="micdrop-calendar-container"
|
|
54
|
+
data-venue-id="your-venue-id"
|
|
55
|
+
data-view="calendar"
|
|
56
|
+
data-show-view-options="true"
|
|
57
|
+
data-show-month-switcher="true">
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<!-- Load the script -->
|
|
61
|
+
<script src="https://cdn.jsdelivr.net/npm/@get-micdrop/venue-calendar/dist/venue-calendar.iife.js"></script>
|
|
62
|
+
</body>
|
|
63
|
+
</html>
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### Method 2: Web Component
|
|
67
|
+
|
|
68
|
+
Use the custom `<micdrop-calendar>` element:
|
|
69
|
+
|
|
70
|
+
```html
|
|
71
|
+
<!DOCTYPE html>
|
|
72
|
+
<html>
|
|
73
|
+
<head>
|
|
74
|
+
<title>My Comedy Club</title>
|
|
75
|
+
</head>
|
|
76
|
+
<body>
|
|
77
|
+
<!-- Web Component -->
|
|
78
|
+
<micdrop-calendar
|
|
79
|
+
venue-id="your-venue-id"
|
|
80
|
+
view="calendar"
|
|
81
|
+
show-view-options="true"
|
|
82
|
+
show-month-switcher="true">
|
|
83
|
+
</micdrop-calendar>
|
|
84
|
+
|
|
85
|
+
<script src="https://cdn.jsdelivr.net/npm/@get-micdrop/venue-calendar/dist/venue-calendar.iife.js"></script>
|
|
86
|
+
</body>
|
|
87
|
+
</html>
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
### Method 3: JavaScript API
|
|
91
|
+
|
|
92
|
+
For more control, use the JavaScript API:
|
|
93
|
+
|
|
94
|
+
```html
|
|
95
|
+
<!DOCTYPE html>
|
|
96
|
+
<html>
|
|
97
|
+
<head>
|
|
98
|
+
<title>My Comedy Club</title>
|
|
99
|
+
</head>
|
|
100
|
+
<body>
|
|
101
|
+
<div id="my-calendar"></div>
|
|
102
|
+
|
|
103
|
+
<script type="module">
|
|
104
|
+
import { initVenueCalendar } from 'https://cdn.jsdelivr.net/npm/@get-micdrop/venue-calendar/dist/venue-calendar.es.js';
|
|
105
|
+
|
|
106
|
+
initVenueCalendar({
|
|
107
|
+
target: '#my-calendar',
|
|
108
|
+
venueId: 'your-venue-id',
|
|
109
|
+
view: 'calendar',
|
|
110
|
+
events: [],
|
|
111
|
+
showViewOptions: true,
|
|
112
|
+
showMonthSwitcher: true,
|
|
113
|
+
});
|
|
114
|
+
</script>
|
|
115
|
+
</body>
|
|
116
|
+
</html>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
## Framework Integration
|
|
120
|
+
|
|
121
|
+
### React
|
|
122
|
+
|
|
123
|
+
```jsx
|
|
124
|
+
import React, { useEffect, useRef } from 'react';
|
|
125
|
+
import { initVenueCalendar } from '@get-micdrop/venue-calendar';
|
|
126
|
+
|
|
127
|
+
function VenueCalendarComponent({ venueId, view = 'calendar' }) {
|
|
128
|
+
const calendarRef = useRef(null);
|
|
129
|
+
const instanceRef = useRef(null);
|
|
130
|
+
|
|
131
|
+
useEffect(() => {
|
|
132
|
+
if (calendarRef.current) {
|
|
133
|
+
// Initialize calendar
|
|
134
|
+
instanceRef.current = initVenueCalendar({
|
|
135
|
+
target: calendarRef.current,
|
|
136
|
+
venueId,
|
|
137
|
+
view,
|
|
138
|
+
events: [],
|
|
139
|
+
showViewOptions: true,
|
|
140
|
+
showMonthSwitcher: true,
|
|
141
|
+
});
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
// Cleanup on unmount
|
|
145
|
+
return () => {
|
|
146
|
+
if (instanceRef.current && instanceRef.current.$destroy) {
|
|
147
|
+
instanceRef.current.$destroy();
|
|
148
|
+
}
|
|
149
|
+
};
|
|
150
|
+
}, [venueId, view]);
|
|
151
|
+
|
|
152
|
+
return <div ref={calendarRef}></div>;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
export default VenueCalendarComponent;
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
**Usage in React App:**
|
|
159
|
+
|
|
160
|
+
```jsx
|
|
161
|
+
import React, { useState } from "react";
|
|
162
|
+
import VenueCalendarComponent from "./VenueCalendarComponent";
|
|
163
|
+
|
|
164
|
+
function App() {
|
|
165
|
+
const [venueId, setVenueId] = useState("comedy-club-123");
|
|
166
|
+
const [view, setView] = useState("calendar");
|
|
167
|
+
|
|
168
|
+
return (
|
|
169
|
+
<div style={{ padding: "20px" }}>
|
|
170
|
+
<h1>Event Viewer</h1>
|
|
171
|
+
|
|
172
|
+
<div style={{ marginBottom: "20px" }}>
|
|
173
|
+
<label>Venue ID:</label>
|
|
174
|
+
<input
|
|
175
|
+
type="text"
|
|
176
|
+
value={venueId}
|
|
177
|
+
onChange={(e) => setVenueId(e.target.value)}
|
|
178
|
+
/>
|
|
179
|
+
</div>
|
|
180
|
+
|
|
181
|
+
<div style={{ marginBottom: "20px" }}>
|
|
182
|
+
<label>Select View:</label>
|
|
183
|
+
<label>
|
|
184
|
+
<input
|
|
185
|
+
type="radio"
|
|
186
|
+
value="list"
|
|
187
|
+
checked={view === "list"}
|
|
188
|
+
onChange={(e) => setView(e.target.value)}
|
|
189
|
+
/>
|
|
190
|
+
List
|
|
191
|
+
</label>
|
|
192
|
+
<label>
|
|
193
|
+
<input
|
|
194
|
+
type="radio"
|
|
195
|
+
value="gallery"
|
|
196
|
+
checked={view === "gallery"}
|
|
197
|
+
onChange={(e) => setView(e.target.value)}
|
|
198
|
+
/>
|
|
199
|
+
Gallery
|
|
200
|
+
</label>
|
|
201
|
+
<label>
|
|
202
|
+
<input
|
|
203
|
+
type="radio"
|
|
204
|
+
value="calendar"
|
|
205
|
+
checked={view === "calendar"}
|
|
206
|
+
onChange={(e) => setView(e.target.value)}
|
|
207
|
+
/>
|
|
208
|
+
Calendar
|
|
209
|
+
</label>
|
|
210
|
+
</div>
|
|
211
|
+
|
|
212
|
+
<VenueCalendarComponent venueId={venueId} view={view} />
|
|
213
|
+
</div>
|
|
214
|
+
);
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
export default App;
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
### Vue 3
|
|
221
|
+
|
|
222
|
+
```vue
|
|
223
|
+
<template>
|
|
224
|
+
<div ref="calendarContainer"></div>
|
|
225
|
+
</template>
|
|
226
|
+
|
|
227
|
+
<script setup>
|
|
228
|
+
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
|
229
|
+
import { initVenueCalendar } from '@get-micdrop/venue-calendar';
|
|
230
|
+
|
|
231
|
+
const props = defineProps({
|
|
232
|
+
venueId: String,
|
|
233
|
+
view: {
|
|
234
|
+
type: String,
|
|
235
|
+
default: 'calendar'
|
|
236
|
+
}
|
|
237
|
+
});
|
|
238
|
+
|
|
239
|
+
const calendarContainer = ref(null);
|
|
240
|
+
let calendarInstance = null;
|
|
241
|
+
|
|
242
|
+
onMounted(() => {
|
|
243
|
+
calendarInstance = initVenueCalendar({
|
|
244
|
+
target: calendarContainer.value,
|
|
245
|
+
venueId: props.venueId,
|
|
246
|
+
view: props.view,
|
|
247
|
+
events: [],
|
|
248
|
+
showViewOptions: true,
|
|
249
|
+
showMonthSwitcher: true,
|
|
250
|
+
});
|
|
251
|
+
});
|
|
252
|
+
|
|
253
|
+
onUnmounted(() => {
|
|
254
|
+
if (calendarInstance && calendarInstance.$destroy) {
|
|
255
|
+
calendarInstance.$destroy();
|
|
256
|
+
}
|
|
257
|
+
});
|
|
258
|
+
|
|
259
|
+
watch(() => props.venueId, (newId) => {
|
|
260
|
+
if (calendarInstance) {
|
|
261
|
+
calendarInstance.$destroy();
|
|
262
|
+
calendarInstance = initVenueCalendar({
|
|
263
|
+
target: calendarContainer.value,
|
|
264
|
+
venueId: newId,
|
|
265
|
+
view: props.view,
|
|
266
|
+
events: [],
|
|
267
|
+
showViewOptions: true,
|
|
268
|
+
showMonthSwitcher: true,
|
|
269
|
+
});
|
|
270
|
+
}
|
|
271
|
+
});
|
|
272
|
+
</script>
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
### Svelte
|
|
276
|
+
|
|
277
|
+
```svelte
|
|
278
|
+
<script>
|
|
279
|
+
import { VenueCalendar } from '@get-micdrop/venue-calendar';
|
|
280
|
+
import { Calendar, Grid, List } from 'carbon-icons-svelte';
|
|
281
|
+
import { writable } from 'svelte/store';
|
|
282
|
+
|
|
283
|
+
let venueId = 'your-venue-id';
|
|
284
|
+
let currentMonth = writable(new Date().getUTCMonth());
|
|
285
|
+
let currentYear = writable(new Date().getUTCFullYear());
|
|
286
|
+
|
|
287
|
+
function handleNext() {
|
|
288
|
+
currentMonth.update(m => m + 1);
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
function handlePrev() {
|
|
292
|
+
currentMonth.update(m => m - 1);
|
|
293
|
+
}
|
|
294
|
+
</script>
|
|
295
|
+
|
|
296
|
+
<VenueCalendar
|
|
297
|
+
showViewOptions={[
|
|
298
|
+
{ id: 0, text: "List view", icon: List },
|
|
299
|
+
{ id: 1, text: "Gallery view", icon: Grid },
|
|
300
|
+
{ id: 2, text: "Calendar view", icon: Calendar }
|
|
301
|
+
]}
|
|
302
|
+
showMonthSwitcher={true}
|
|
303
|
+
events={[]}
|
|
304
|
+
{currentMonth}
|
|
305
|
+
{currentYear}
|
|
306
|
+
handleNext={handleNext}
|
|
307
|
+
handlePrev={handlePrev}
|
|
308
|
+
on:eventClick={(e) => console.log('Event clicked:', e.detail)}
|
|
309
|
+
/>
|
|
310
|
+
```
|
|
311
|
+
|
|
312
|
+
### Angular
|
|
313
|
+
|
|
314
|
+
```typescript
|
|
315
|
+
import { Component, OnInit, OnDestroy, ElementRef, ViewChild } from '@angular/core';
|
|
316
|
+
import { initVenueCalendar } from '@get-micdrop/venue-calendar';
|
|
317
|
+
|
|
318
|
+
@Component({
|
|
319
|
+
selector: 'app-venue-calendar',
|
|
320
|
+
template: '<div #calendarContainer></div>',
|
|
321
|
+
})
|
|
322
|
+
export class VenueCalendarComponent implements OnInit, OnDestroy {
|
|
323
|
+
@ViewChild('calendarContainer', { static: true }) calendarContainer!: ElementRef;
|
|
324
|
+
private calendarInstance: any;
|
|
325
|
+
|
|
326
|
+
ngOnInit() {
|
|
327
|
+
this.calendarInstance = initVenueCalendar({
|
|
328
|
+
target: this.calendarContainer.nativeElement,
|
|
329
|
+
venueId: 'your-venue-id',
|
|
330
|
+
view: 'calendar',
|
|
331
|
+
events: [],
|
|
332
|
+
showViewOptions: true,
|
|
333
|
+
showMonthSwitcher: true,
|
|
334
|
+
});
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
ngOnDestroy() {
|
|
338
|
+
if (this.calendarInstance && this.calendarInstance.$destroy) {
|
|
339
|
+
this.calendarInstance.$destroy();
|
|
340
|
+
}
|
|
341
|
+
}
|
|
342
|
+
}
|
|
343
|
+
```
|
|
344
|
+
|
|
345
|
+
## Configuration Options
|
|
346
|
+
|
|
347
|
+
### Data Attributes (for auto-mount)
|
|
348
|
+
|
|
349
|
+
| Attribute | Type | Default | Description |
|
|
350
|
+
|-----------|------|---------|-------------|
|
|
351
|
+
| `data-venue-id` | string | `''` | The venue ID to fetch events for |
|
|
352
|
+
| `data-view` | string | `'calendar'` | Initial view: `'list'`, `'gallery'`, or `'calendar'` |
|
|
353
|
+
| `data-show-view-options` | boolean | `true` | Show view switcher buttons |
|
|
354
|
+
| `data-show-month-switcher` | boolean | `true` | Show month navigation controls |
|
|
355
|
+
|
|
356
|
+
### JavaScript API Options
|
|
357
|
+
|
|
358
|
+
```javascript
|
|
359
|
+
initVenueCalendar({
|
|
360
|
+
target: '.my-calendar', // CSS selector or HTMLElement (required)
|
|
361
|
+
venueId: 'venue-123', // Venue ID (optional)
|
|
362
|
+
view: 'calendar', // 'list', 'gallery', or 'calendar' (default: 'calendar')
|
|
363
|
+
events: [], // Array of event objects (default: [])
|
|
364
|
+
showViewOptions: true, // Show view switcher (default: true)
|
|
365
|
+
showMonthSwitcher: true, // Show month navigation (default: true)
|
|
366
|
+
});
|
|
367
|
+
```
|
|
368
|
+
|
|
369
|
+
### Event Object Structure
|
|
370
|
+
|
|
371
|
+
```javascript
|
|
372
|
+
{
|
|
373
|
+
id: 'event-123',
|
|
374
|
+
name: 'Comedy Night',
|
|
375
|
+
date: '2024-10-25T20:00:00Z',
|
|
376
|
+
image: 'https://example.com/image.jpg',
|
|
377
|
+
status: 'On Sale',
|
|
378
|
+
timeline: '8:00 PM - 10:00 PM',
|
|
379
|
+
// ... other fields
|
|
380
|
+
}
|
|
381
|
+
```
|
|
382
|
+
|
|
383
|
+
## Views
|
|
384
|
+
|
|
385
|
+
### Calendar View
|
|
386
|
+
The default view showing events in a monthly calendar grid. Perfect for venues with regular shows.
|
|
387
|
+
|
|
388
|
+
### List View
|
|
389
|
+
A vertical list layout showing all upcoming events with details. Great for mobile experiences.
|
|
390
|
+
|
|
391
|
+
### Gallery View
|
|
392
|
+
A grid layout displaying event posters in a gallery format. Ideal for showcasing event imagery.
|
|
393
|
+
|
|
394
|
+
## WordPress Integration
|
|
395
|
+
|
|
396
|
+
For WordPress sites, you can add this to your page/post HTML:
|
|
397
|
+
|
|
398
|
+
```html
|
|
399
|
+
<div class="micdrop-calendar-container"
|
|
400
|
+
data-venue-id="your-venue-id"
|
|
401
|
+
data-view="calendar">
|
|
402
|
+
</div>
|
|
403
|
+
|
|
404
|
+
<script src="https://cdn.jsdelivr.net/npm/@get-micdrop/venue-calendar/dist/venue-calendar.iife.js"></script>
|
|
405
|
+
```
|
|
406
|
+
|
|
407
|
+
Or add the script to your theme's footer and use the div anywhere in your content.
|
|
408
|
+
|
|
409
|
+
## Styling
|
|
410
|
+
|
|
411
|
+
The calendar comes with built-in styles using Tailwind CSS. If you need to customize the appearance, you can override the CSS classes or add your own styles.
|
|
412
|
+
|
|
413
|
+
```css
|
|
414
|
+
/* Example: Custom styling */
|
|
415
|
+
.micdrop-calendar-container {
|
|
416
|
+
max-width: 1200px;
|
|
417
|
+
margin: 0 auto;
|
|
418
|
+
padding: 20px;
|
|
419
|
+
}
|
|
420
|
+
```
|
|
421
|
+
|
|
422
|
+
## Browser Support
|
|
423
|
+
|
|
424
|
+
- Chrome (latest)
|
|
425
|
+
- Firefox (latest)
|
|
426
|
+
- Safari (latest)
|
|
427
|
+
- Edge (latest)
|
|
428
|
+
- Mobile browsers (iOS Safari, Chrome Mobile)
|
|
429
|
+
|
|
430
|
+
## Development
|
|
431
|
+
|
|
432
|
+
### Building the Package
|
|
433
|
+
|
|
434
|
+
```bash
|
|
435
|
+
# Install dependencies
|
|
436
|
+
npm install
|
|
437
|
+
|
|
438
|
+
# Build the library
|
|
439
|
+
npm run build:lib
|
|
440
|
+
|
|
441
|
+
# Development mode (SvelteKit app)
|
|
442
|
+
npm run dev
|
|
443
|
+
|
|
444
|
+
# Preview production build
|
|
445
|
+
npm run preview
|
|
446
|
+
```
|
|
447
|
+
|
|
448
|
+
### Project Structure
|
|
449
|
+
|
|
450
|
+
```
|
|
451
|
+
venue-calendar/
|
|
452
|
+
├── src/
|
|
453
|
+
│ ├── components/ # Svelte components
|
|
454
|
+
│ │ ├── Calendar/
|
|
455
|
+
│ │ ├── CalendarContainer/
|
|
456
|
+
│ │ └── Button/
|
|
457
|
+
│ ├── lib/ # Library entry points
|
|
458
|
+
│ │ ├── VenueCalendar.js
|
|
459
|
+
│ │ └── web-component.js
|
|
460
|
+
│ └── routes/ # SvelteKit routes (for dev)
|
|
461
|
+
├── dist/ # Built package (generated)
|
|
462
|
+
├── package.json
|
|
463
|
+
├── vite.config.lib.js # Library build config
|
|
464
|
+
└── README.md
|
|
465
|
+
```
|
|
466
|
+
|
|
467
|
+
## API Reference
|
|
468
|
+
|
|
469
|
+
### `initVenueCalendar(options)`
|
|
470
|
+
|
|
471
|
+
Initialize a calendar instance.
|
|
472
|
+
|
|
473
|
+
**Parameters:**
|
|
474
|
+
- `options` (Object): Configuration options
|
|
475
|
+
|
|
476
|
+
**Returns:** Svelte component instance
|
|
477
|
+
|
|
478
|
+
**Example:**
|
|
479
|
+
```javascript
|
|
480
|
+
const calendar = initVenueCalendar({
|
|
481
|
+
target: '#calendar',
|
|
482
|
+
venueId: 'venue-123',
|
|
483
|
+
view: 'calendar',
|
|
484
|
+
});
|
|
485
|
+
```
|
|
486
|
+
|
|
487
|
+
### `autoMount()`
|
|
488
|
+
|
|
489
|
+
Automatically mount calendars to all elements with class `micdrop-calendar-container`.
|
|
490
|
+
|
|
491
|
+
**Example:**
|
|
492
|
+
```javascript
|
|
493
|
+
import { autoMount } from '@get-micdrop/venue-calendar';
|
|
494
|
+
autoMount();
|
|
495
|
+
```
|
|
496
|
+
|
|
497
|
+
### Component Events
|
|
498
|
+
|
|
499
|
+
The calendar component emits events that you can listen to:
|
|
500
|
+
|
|
501
|
+
```javascript
|
|
502
|
+
const calendar = initVenueCalendar({
|
|
503
|
+
target: '#calendar',
|
|
504
|
+
// ... other options
|
|
505
|
+
});
|
|
506
|
+
|
|
507
|
+
// Listen to component events (if using Svelte component directly)
|
|
508
|
+
calendar.$on('eventClick', (event) => {
|
|
509
|
+
console.log('Event clicked:', event.detail);
|
|
510
|
+
});
|
|
511
|
+
```
|
|
512
|
+
|
|
513
|
+
## Troubleshooting
|
|
514
|
+
|
|
515
|
+
### Calendar not appearing
|
|
516
|
+
|
|
517
|
+
1. **Check the script is loaded**: Open browser console and verify no errors
|
|
518
|
+
2. **Verify container exists**: Make sure the target element exists in the DOM
|
|
519
|
+
3. **Check data attributes**: Ensure attributes are correctly formatted with `data-` prefix
|
|
520
|
+
|
|
521
|
+
### Styles not applying
|
|
522
|
+
|
|
523
|
+
1. **CSS not loaded**: The styles are bundled in the JS file and auto-injected
|
|
524
|
+
2. **CSS conflicts**: Check if other styles are overriding the calendar styles
|
|
525
|
+
3. **CDN issues**: Try using a specific version instead of `@latest`
|
|
526
|
+
|
|
527
|
+
### Events not showing
|
|
528
|
+
|
|
529
|
+
1. **Check event data format**: Ensure events match the expected structure
|
|
530
|
+
2. **Date format**: Use ISO 8601 format for dates (`YYYY-MM-DDTHH:mm:ssZ`)
|
|
531
|
+
3. **Venue ID**: Verify the venue ID is correct
|
|
532
|
+
|
|
533
|
+
## Contributing
|
|
534
|
+
|
|
535
|
+
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
536
|
+
|
|
537
|
+
## License
|
|
538
|
+
|
|
539
|
+
MIT © MicDrop
|
|
540
|
+
|
|
541
|
+
## Support
|
|
542
|
+
|
|
543
|
+
For issues, questions, or feature requests, please visit:
|
|
544
|
+
https://github.com/get-micdrop/venue-calendar/issues
|
|
545
|
+
|
|
546
|
+
---
|
|
547
|
+
|
|
548
|
+
Made with ❤️ by the MicDrop team
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.btn-default.svelte-yayskl{background-color:hsl(var(--Brand-Primary));color:#fff}.btn-default.svelte-yayskl:hover{background-color:hsl(var(--Brand-Primary));filter:brightness(1.1);color:#fff}.btn-default.svelte-yayskl:active{background-color:hsl(var(--Brand-Primary));filter:brightness(.9);color:#fff}.btn-default-stroke.svelte-yayskl{color:hsl(var(--Text-Primary));border-radius:var(--8, 8px);border:1px solid hsl(var(--Stroke-Secondary))}.btn-default-stroke.svelte-yayskl:hover{border:1px solid hsl(var(--Stroke-Secondary));background:hsl(var(--BG-Secondary))}.btn-default-stroke.svelte-yayskl:active{border:1px solid hsl(var(--Stroke-Secondary));background:hsl(var(--BG-Quaternary))}.btn-alert.svelte-yayskl{border-radius:var(--8, 8px);background:var(--Accent-Warning)}.btn-alert.svelte-yayskl:hover{background:linear-gradient(0deg,#fff3 0% 100%),var(--Accent-Warning)}.btn-alert.svelte-yayskl:active{background:linear-gradient(0deg,#0003 0% 100%),var(--Accent-Warning)}.btn-alert-stroke.svelte-yayskl{color:var(--Accent-Warning);border-radius:var(--8, 8px);border:1px solid hsl(var(--Stroke-Secondary))}.btn-alert-stroke.svelte-yayskl:hover{background:hsl(var(--BG-Secondary))}.btn-alert-stroke.svelte-yayskl:active{background:linear-gradient(0deg,#ff922e26 0% 100%),hsl(var(--BG-Primary))}.scheduledBtn.svelte-yayskl{background-color:hsla(var(--Brand-Primary),.15);height:34px}.scheduledBtn.svelte-yayskl:hover{background-color:hsla(var(--Brand-Primary),.3);color:hsl(var(--Brand-Primary))}.scheduledBtn.svelte-yayskl:active{background-color:hsla(var(--Brand-Primary),.6);color:hsl(var(--Brand-Primary))}.scheduledBtn-text-style.svelte-yayskl{color:hsl(var(--Brand-Primary));text-align:center;font-size:14px;font-style:normal;font-weight:500;line-height:14px}.btn-danger.svelte-yayskl{border-radius:8px;background:var(--Accent-Danger);color:#fff}.btn-danger.svelte-yayskl:hover{background:linear-gradient(0deg,#fff3 0% 100%),var(--Accent-Danger);color:#fff}.btn-danger.svelte-yayskl:active{background:linear-gradient(0deg,#0003 0% 100%),var(--Accent-Danger);color:#fff}.btn-danger-stroke.svelte-yayskl{color:var(--Accent-Danger);border-radius:var(--8, 8px);border:1px solid hsl(var(--Stroke-Secondary))}.btn-danger-stroke.svelte-yayskl:hover{border-radius:var(--8, 8px);border:1px solid hsl(var(--Stroke-Secondary));background:hsl(var(--BG-Secondary))}.btn-danger-stroke.svelte-yayskl:active{border-radius:var(--8, 8px);border:1px solid hsl(var(--Stroke-Secondary));background:linear-gradient(0deg,#ff666626 0% 100%),hsl(var(--BG-Primary))}.btn-disabled.svelte-yayskl,.btn-disabled.svelte-yayskl:hover{cursor:not-allowed;border-radius:var(--8, 8px);background:hsl(var(--Stroke-Secondary))}.btn-deEmphasized.svelte-yayskl{border-radius:var(--8, 8px);background:hsl(var(--BG-Quaternary));color:hsl(var(--Text-Tartiary))}.btn-deEmphasized.svelte-yayskl:hover{background:linear-gradient(0deg,#fff3 0% 100%),hsl(var(--BG-Quaternary))}.btn-deEmphasized.svelte-yayskl:active{background:linear-gradient(0deg,#0003 0% 100%),hsl(var(--BG-Quaternary))}.btn-light.svelte-yayskl{border-radius:var(--9999, 9999px);background:hsla(var(--Brand-Primary),.15)}.btn-light.svelte-yayskl:hover{background:hsl(var(--Brand-Primary))}.btn-light.svelte-yayskl:active{background:linear-gradient(0deg,#0003 0% 100%),hsl(var(--Brand-Primary))}.no-focus-ring.svelte-yayskl:focus{outline:none;box-shadow:none}.btn-text-style.svelte-yayskl{text-align:center;font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:500;line-height:14px;color:#fff}.btn-text-style-outline.svelte-yayskl{text-align:center;font-family:Inter,sans-serif;font-size:14px;font-style:normal;font-weight:500;line-height:14px;color:hsl(var(--Text-Primary))}.btn-text.svelte-yayskl,.btn-text.svelte-yayskl:hover,.btn-text.svelte-yayskl:active{background:none;border:none;color:hsl(var(--Text-Primary))}@media only screen and (max-width:768px){.scheduledBtn-text-style.svelte-yayskl{font-size:10px;font-weight:500;line-height:13px}.scheduledBtn.svelte-yayskl{padding:2px;height:20px}}.past-day.svelte-1twddf5{pointer-events:none;background-color:#fff}.calendar.svelte-1twddf5{display:grid;grid-template-columns:repeat(7,minmax(100px,1fr));grid-template-rows:auto;grid-auto-rows:minmax(60px,auto)}.day-container.svelte-1twddf5{padding:8px;gap:12px;display:flex;flex-direction:column;justify-content:flex-start;width:100%}.calendar.svelte-1twddf5>.day-container:where(.svelte-1twddf5),.calendar.svelte-1twddf5>div:where(.svelte-1twddf5){border-top:1px solid #d4d6d9;border-left:1px solid #d4d6d9}.calendar.svelte-1twddf5>.day-container:where(.svelte-1twddf5):not(:nth-child(7n+1)),.calendar.svelte-1twddf5>div:where(.svelte-1twddf5):not(:nth-child(7n+1)){border-left:1px solid #d4d6d9}.calendar.svelte-1twddf5>.day-container:where(.svelte-1twddf5):nth-last-child(-n+7),.calendar.svelte-1twddf5>div:where(.svelte-1twddf5):nth-last-child(-n+7){border-bottom:1px solid #d4d6d9}.calendar.svelte-1twddf5>.day-container:where(.svelte-1twddf5):last-of-type{border-right:1px solid #d4d6d9}.day.svelte-1twddf5{font-size:18px;color:hsl(var(--Text-Primary));font-weight:400;line-height:18px;font-style:normal}.embedCalendar.svelte-1twddf5{transition:box-shadow .3s ease-in-out,transform .3s ease-in-out;border:1px solid transparent;transition:all .3s ease-in-out}.embedCalendar.svelte-1twddf5:hover{transform:scale(1);border:1px solid #d4d6d9;background-color:#f9fafb;box-shadow:0 0 10px #0000001a;transition:all .3s ease-in-out}@media(max-width:1024px){.calendar.svelte-1twddf5{grid-template-columns:repeat(7,minmax(100px,1fr))}.day.svelte-1twddf5{font-size:16px}}@media(max-width:768px){.calendar.svelte-1twddf5{grid-template-columns:repeat(7,minmax(70px,1fr))}.day.svelte-1twddf5{font-size:14px}.day-container.svelte-1twddf5{padding:6px 4px}}@media(max-width:640px){.calendar.svelte-1twddf5{grid-template-columns:repeat(7,minmax(30px,1fr));grid-auto-rows:minmax(8px,auto)}.day.svelte-1twddf5{font-size:12px}.calendar.svelte-1twddf5>.day-container:where(.svelte-1twddf5),.calendar.svelte-1twddf5>div:where(.svelte-1twddf5){border-top:none}.calendar.svelte-1twddf5>.day-container:where(.svelte-1twddf5):not(:nth-child(7n+1)),.calendar.svelte-1twddf5>div:where(.svelte-1twddf5):not(:nth-child(7n+1)){border-left:none}.calendar.svelte-1twddf5>.day-container:where(.svelte-1twddf5):nth-last-child(-n+7),.calendar.svelte-1twddf5>div:where(.svelte-1twddf5):nth-last-child(-n+7){border-bottom:none}.calendar.svelte-1twddf5>.day-container:where(.svelte-1twddf5):last-of-type{border-right:none}}.event-view.svelte-syakdc{background-color:#f9fafb;transition:box-shadow .3s ease-in-out,transform .3s ease-in-out;border:1px solid transparent;transition:all .3s ease-in-out}.event-view.svelte-syakdc:hover{background-color:#f3f4f6;transform:scale(1);border:1px solid #e0e0e0;box-shadow:0 0 10px #0000001a;transition:all .3s ease-in-out}@media(max-width:767px){.event-view.svelte-syakdc p:where(.svelte-syakdc){overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical}}.skeleton-monthly.svelte-z2wcqx{display:grid;grid-template-columns:repeat(7,minmax(100px,1fr));grid-gap:1px;padding-top:4px}.skeleton-animation.svelte-z2wcqx{animation:svelte-z2wcqx-pulse 1.5s infinite ease-in-out}@keyframes svelte-z2wcqx-pulse{0%,to{opacity:1}50%{opacity:.5}}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media(min-width:640px){.container{max-width:640px}}@media(min-width:768px){.container{max-width:768px}}@media(min-width:1024px){.container{max-width:1024px}}@media(min-width:1280px){.container{max-width:1280px}}@media(min-width:1536px){.container{max-width:1536px}}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-4{left:1rem}.right-0{right:0}.right-2{right:.5rem}.right-4{right:1rem}.top-\[19\.5px\]{top:19.5px}.top-\[9px\]{top:9px}.top-full{top:100%}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.my-1\.5{margin-top:.375rem;margin-bottom:.375rem}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.-ml-1{margin-left:-.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.ml-2{margin-left:.5rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-auto{margin-top:auto}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.contents{display:contents}.hidden{display:none}.aspect-\[16\/9\]{aspect-ratio:16/9}.aspect-square{aspect-ratio:1 / 1}.size-4{width:1rem;height:1rem}.size-\[16px\]{width:16px;height:16px}.size-\[56px\]{width:56px;height:56px}.h-10{height:2.5rem}.h-16{height:4rem}.h-20{height:5rem}.h-24{height:6rem}.h-3{height:.75rem}.h-4{height:1rem}.h-40{height:10rem}.h-44{height:11rem}.h-5{height:1.25rem}.h-64{height:16rem}.h-80{height:20rem}.h-\[128px\]{height:128px}.h-\[22px\]{height:22px}.h-\[56px\]{height:56px}.h-full{height:100%}.w-12{width:3rem}.w-16{width:4rem}.w-20{width:5rem}.w-24{width:6rem}.w-28{width:7rem}.w-3{width:.75rem}.w-32{width:8rem}.w-4{width:1rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-56{width:14rem}.w-60{width:15rem}.w-64{width:16rem}.w-72{width:18rem}.w-80{width:20rem}.w-\[10\%\]{width:10%}.w-\[128px\]{width:128px}.w-\[15\%\]{width:15%}.w-\[22px\]{width:22px}.w-\[240px\]{width:240px}.w-\[30\%\]{width:30%}.w-\[85\%\]{width:85%}.w-auto{width:auto}.w-full{width:100%}.max-w-full{max-width:100%}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-\[128px_1fr\]{grid-template-columns:128px 1fr}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.text-nowrap{text-wrap:nowrap}.text-balance{text-wrap:balance}.rounded{border-radius:.25rem}.rounded-\[8px\]{border-radius:8px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-t{border-top-width:1px}.border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.border-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.bg-\[\#f0f0f0\]{--tw-bg-opacity: 1;background-color:rgb(240 240 240 / var(--tw-bg-opacity, 1))}.bg-blue-400{--tw-bg-opacity: 1;background-color:rgb(96 165 250 / var(--tw-bg-opacity, 1))}.bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.bg-gray-200{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-\[2px\]{padding-top:2px;padding-bottom:2px}.pb-2{padding-bottom:.5rem}.pl-10{padding-left:2.5rem}.pr-24{padding-right:6rem}.pt-6{padding-top:1.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-\[10px\]{font-size:10px}.text-\[12px\]{font-size:12px}.text-\[14px\]{font-size:14px}.text-base{font-size:1rem;line-height:1.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-normal{font-weight:400}.leading-4{line-height:1rem}.leading-\[15px\]{line-height:15px}.leading-\[18px\]{line-height:18px}.leading-\[20px\]{line-height:20px}.leading-normal{line-height:1.5}.leading-tight{line-height:1.25}.tracking-normal{letter-spacing:0em}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.text-blue-500{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.text-purple-600{--tw-text-opacity: 1;color:rgb(147 51 234 / var(--tw-text-opacity, 1))}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.opacity-25{opacity:.25}.opacity-75{opacity:.75}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.first\:border-l-0:first-child{border-left-width:0px}.checked\:border-blue-600:checked{--tw-border-opacity: 1;border-color:rgb(37 99 235 / var(--tw-border-opacity, 1))}.checked\:bg-blue-600:checked{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.checked\:ring-4:checked{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.checked\:ring-blue-100:checked{--tw-ring-opacity: 1;--tw-ring-color: rgb(219 234 254 / var(--tw-ring-opacity, 1))}.hover\:border-gray-400:hover{--tw-border-opacity: 1;border-color:rgb(156 163 175 / var(--tw-border-opacity, 1))}.hover\:bg-gray-50:hover{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-0:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}@media not all and (min-width:640px){.max-sm\:gap-\[2px\]{gap:2px}.max-sm\:rounded-\[8px\]{border-radius:8px}.max-sm\:border-b{border-bottom-width:1px}.max-sm\:bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.max-sm\:p-\[2px\]{padding:2px}.max-sm\:pr-7{padding-right:1.75rem}.max-sm\:pt-\[2px\]{padding-top:2px}}@media(min-width:640px){.sm\:flex{display:flex}.sm\:h-\[96px\]{height:96px}.sm\:h-full{height:100%}.sm\:w-\[96px\]{width:96px}.sm\:w-full{width:100%}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-\[200px_1fr\]{grid-template-columns:200px 1fr}.sm\:flex-row{flex-direction:row}.sm\:flex-col{flex-direction:column}.sm\:gap-2{gap:.5rem}.sm\:gap-4{gap:1rem}.sm\:p-1{padding:.25rem}.sm\:p-2\.5{padding:.625rem}.sm\:px-10{padding-left:2.5rem;padding-right:2.5rem}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-\[14px\]{font-size:14px}.sm\:text-\[16px\]{font-size:16px}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}@media(min-width:768px){.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:text-\[13px\]{font-size:13px}}@media(min-width:1024px){.lg\:mt-0{margin-top:0}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:gap-4{gap:1rem}.lg\:gap-6{gap:1.5rem}}@media(prefers-color-scheme:dark){.dark\:bg-gray-700{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}}
|