@crestbase/web-shared-ui 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,6 +4,14 @@ interface CalendarProps {
4
4
  onDateSelect: (date: Date) => void;
5
5
  bookedDates?: Date[];
6
6
  maxSelections?: number;
7
+ /** Enable time selection after clicking a date */
8
+ enableTimeSelection?: boolean;
9
+ /** Allow selecting past dates (default false) */
10
+ allowPastDates?: boolean;
11
+ /** Minute step for available times, default 30 */
12
+ timeStepMinutes?: number;
13
+ /** Display format for time options */
14
+ timeFormat?: "12h" | "24h";
7
15
  }
8
16
  declare const _default: (props: CalendarProps) => React.JSX.Element;
9
17
  export default _default;
@@ -1,8 +1,49 @@
1
1
  "use client";
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { useState } from "react";
4
- const Calendar = ({ selectedDates, onDateSelect, bookedDates = [], maxSelections, }) => {
2
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
+ import { useEffect, useMemo, useState, useId, useCallback } from "react";
4
+ // Pure helper: parse a 24h time string "HH:MM" into minutes of day
5
+ const parseTimeString = (value) => {
6
+ const parts = value.split(":");
7
+ if (parts.length !== 2)
8
+ return null;
9
+ const hh = Number(parts[0]);
10
+ const mm = Number(parts[1]);
11
+ if (Number.isNaN(hh) || Number.isNaN(mm) || hh < 0 || hh > 23 || mm < 0 || mm > 59) {
12
+ return null;
13
+ }
14
+ return hh * 60 + mm;
15
+ };
16
+ const Calendar = ({ selectedDates, onDateSelect, bookedDates = [], maxSelections, enableTimeSelection = false, allowPastDates = false, timeStepMinutes = 30, timeFormat = "12h", }) => {
17
+ const defaultPeriod = useMemo(() => (new Date().getHours() >= 12 ? "PM" : "AM"), []);
5
18
  const [currentMonth, setCurrentMonth] = useState(new Date());
19
+ const [showTimePanel, setShowTimePanel] = useState(false);
20
+ const [tempDate, setTempDate] = useState(null);
21
+ // Redesigned time selection state
22
+ const [selectedHour, setSelectedHour] = useState(null);
23
+ const [selectedMinute, setSelectedMinute] = useState(null);
24
+ const [period, setPeriod] = useState(defaultPeriod);
25
+ const [editingPart, setEditingPart] = useState("hour");
26
+ const [minuteTens, setMinuteTens] = useState(null);
27
+ const [minuteOnes, setMinuteOnes] = useState(null);
28
+ // Derived minutes from current hour/minute/period selection
29
+ const minutesOfDayFromSelection = useMemo(() => {
30
+ if (selectedHour == null || selectedMinute == null)
31
+ return null;
32
+ const hours24 = timeFormat === "24h"
33
+ ? selectedHour
34
+ : (selectedHour % 12) + (period === "PM" ? 12 : 0);
35
+ return hours24 * 60 + selectedMinute;
36
+ }, [selectedHour, selectedMinute, period, timeFormat]);
37
+ // Derived minutes even when only hour or only minute is selected (for preview)
38
+ const minutesOfDayFromPartialSelection = useMemo(() => {
39
+ if (selectedHour == null && selectedMinute == null)
40
+ return null;
41
+ const minutes = selectedMinute ?? 0;
42
+ const hours24 = timeFormat === "24h"
43
+ ? selectedHour ?? 0
44
+ : ((selectedHour ?? 12) % 12) + (period === "PM" ? 12 : 0);
45
+ return hours24 * 60 + minutes;
46
+ }, [selectedHour, selectedMinute, period, timeFormat]);
6
47
  const today = new Date();
7
48
  const year = currentMonth.getFullYear();
8
49
  const month = currentMonth.getMonth();
@@ -26,73 +67,374 @@ const Calendar = ({ selectedDates, onDateSelect, bookedDates = [], maxSelections
26
67
  "November",
27
68
  "December",
28
69
  ];
29
- const handleDateClick = (day) => {
70
+ // Helper: date-only timestamp (moved earlier for predicate/useCallback ordering)
71
+ const toDateOnlyTs = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
72
+ // Helper: two-digit pad
73
+ const pad2 = (n) => String(n).padStart(2, "0");
74
+ // Helper: format minutes-of-day to label respecting 12h/24h
75
+ const formatTimeLabel = (minutesOfDay, fmt) => {
76
+ const hh = Math.floor(minutesOfDay / 60);
77
+ const mm = minutesOfDay % 60;
78
+ if (fmt === "24h") {
79
+ return `${pad2(hh)}:${pad2(mm)}`;
80
+ }
81
+ const periodLabel = hh >= 12 ? "PM" : "AM";
82
+ const h12 = hh % 12 === 0 ? 12 : hh % 12;
83
+ return `${h12}:${pad2(mm)} ${periodLabel}`;
84
+ };
85
+ // Predicates defined before usage to avoid TDZ/lint issues
86
+ const isDateSelected = useCallback((day) => {
87
+ const date = new Date(year, month, day);
88
+ const currentDateOnlyTs = toDateOnlyTs(date);
89
+ return selectedDates.some((selectedDate) => toDateOnlyTs(selectedDate) === currentDateOnlyTs);
90
+ }, [year, month, selectedDates]);
91
+ const isDateBooked = useCallback((day) => {
92
+ const date = new Date(year, month, day);
93
+ const currentDateOnlyTs = toDateOnlyTs(date);
94
+ return bookedDates.some((bookedDate) => toDateOnlyTs(bookedDate) === currentDateOnlyTs);
95
+ }, [year, month, bookedDates]);
96
+ const todayOnlyTs = useMemo(() => toDateOnlyTs(today), [today]);
97
+ const isDateDisabled = useCallback((day) => {
98
+ const date = new Date(year, month, day);
99
+ const dateOnlyTs = toDateOnlyTs(date);
100
+ return (!allowPastDates && dateOnlyTs < todayOnlyTs) || isDateBooked(day);
101
+ }, [year, month, todayOnlyTs, allowPastDates, isDateBooked]);
102
+ const handleDateClick = useCallback((day) => {
30
103
  const clickedDate = new Date(year, month, day);
104
+ const clickedDateOnlyTs = toDateOnlyTs(clickedDate);
31
105
  // Don't allow past dates or booked dates
32
- if (clickedDate < today || isDateBooked(day))
106
+ if ((!allowPastDates && clickedDateOnlyTs < todayOnlyTs) || isDateBooked(day))
33
107
  return;
34
108
  // Check if we've reached max selections and this date isn't already selected
35
109
  if (maxSelections &&
36
110
  selectedDates.length >= maxSelections &&
37
111
  !isDateSelected(day)) {
112
+ // When only one selection is allowed, permit switching days (replace later)
113
+ if (maxSelections !== 1) {
114
+ return;
115
+ }
116
+ }
117
+ if (!enableTimeSelection) {
118
+ onDateSelect(clickedDate);
38
119
  return;
39
120
  }
40
- onDateSelect(clickedDate);
41
- };
42
- const handlePrevMonth = () => {
121
+ // Time selection flow
122
+ setTempDate(clickedDate);
123
+ setShowTimePanel(true);
124
+ // Prefill time if this day is already selected; otherwise default to 00 minutes
125
+ const existingForDay = selectedDates.find((selectedDate) => toDateOnlyTs(selectedDate) === clickedDateOnlyTs);
126
+ if (existingForDay) {
127
+ const hours24 = existingForDay.getHours();
128
+ const minutes = existingForDay.getMinutes();
129
+ if (timeFormat === "24h") {
130
+ setSelectedHour(hours24);
131
+ }
132
+ else {
133
+ const newPeriod = hours24 >= 12 ? "PM" : "AM";
134
+ const hour12 = hours24 % 12 === 0 ? 12 : hours24 % 12;
135
+ setPeriod(newPeriod);
136
+ setSelectedHour(hour12);
137
+ }
138
+ setSelectedMinute(minutes);
139
+ setMinuteTens(Math.floor(minutes / 10));
140
+ setMinuteOnes(minutes % 10);
141
+ }
142
+ else {
143
+ // reset redesigned time selection state
144
+ setSelectedHour(null);
145
+ setSelectedMinute(0);
146
+ setMinuteTens(0);
147
+ setMinuteOnes(0);
148
+ setPeriod(defaultPeriod);
149
+ }
150
+ setEditingPart("hour");
151
+ }, [
152
+ year,
153
+ month,
154
+ todayOnlyTs,
155
+ allowPastDates,
156
+ isDateBooked,
157
+ maxSelections,
158
+ selectedDates,
159
+ isDateSelected,
160
+ enableTimeSelection,
161
+ onDateSelect,
162
+ timeFormat,
163
+ defaultPeriod,
164
+ ]);
165
+ const handlePrevMonth = useCallback(() => {
43
166
  setCurrentMonth(new Date(year, month - 1, 1));
44
- };
45
- const handleNextMonth = () => {
167
+ }, [year, month]);
168
+ const handleNextMonth = useCallback(() => {
46
169
  setCurrentMonth(new Date(year, month + 1, 1));
47
- };
48
- const isDateSelected = (day) => {
49
- const date = new Date(year, month, day);
50
- return selectedDates.some((selectedDate) => selectedDate.getTime() === date.getTime());
51
- };
52
- const isDateBooked = (day) => {
53
- const date = new Date(year, month, day);
54
- return bookedDates.some((bookedDate) => {
55
- const bookedDateOnly = new Date(bookedDate.getFullYear(), bookedDate.getMonth(), bookedDate.getDate());
56
- const currentDateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());
57
- return bookedDateOnly.getTime() === currentDateOnly.getTime();
170
+ }, [year, month]);
171
+ const isToday = useMemo(() => {
172
+ if (!tempDate)
173
+ return false;
174
+ const d = tempDate;
175
+ return (d.getFullYear() === today.getFullYear() &&
176
+ d.getMonth() === today.getMonth() &&
177
+ d.getDate() === today.getDate());
178
+ }, [tempDate, today]);
179
+ // Accessibility: dynamic regions for date/time views
180
+ const dateViewHeadingId = useId();
181
+ const timeViewHeadingId = useId();
182
+ // Memoized hour options to avoid recreating arrays per render
183
+ const hourOptions24 = useMemo(() => Array.from({ length: 24 }, (_, i) => i), []);
184
+ const hourOptions12 = useMemo(() => Array.from({ length: 12 }, (_, i) => i + 1), []);
185
+ // Suggested quick-pick times, driven by timeStepMinutes while preserving defaults
186
+ const suggestedTimes = useMemo(() => {
187
+ const step = Math.max(1, timeStepMinutes ?? 30);
188
+ // Base anchors; for step=30 these remain 10:00, 12:00, 14:00
189
+ const anchors = [10 * 60, 12 * 60, 14 * 60];
190
+ return anchors.map((base) => {
191
+ const m = Math.floor(base / step) * step;
192
+ const label = formatTimeLabel(m, timeFormat);
193
+ let disabled = false;
194
+ if (isToday) {
195
+ const nowMinutes = today.getHours() * 60 + today.getMinutes();
196
+ disabled = m < nowMinutes;
197
+ }
198
+ return { label, minutes: m, disabled };
58
199
  });
59
- };
60
- const isDateDisabled = (day) => {
61
- const date = new Date(year, month, day);
62
- return date < today || isDateBooked(day);
63
- };
64
- // Generate calendar days
65
- const calendarDays = [];
66
- // Add empty cells for days before the first day of the month
67
- for (let i = 0; i < startingDayOfWeek; i++) {
68
- calendarDays.push(_jsx("div", { className: "h-10" }, `empty-${i}`));
69
- }
70
- // Add days of the month
71
- for (let day = 1; day <= daysInMonth; day++) {
72
- const isDisabled = isDateDisabled(day);
73
- const isSelected = isDateSelected(day);
74
- const isBooked = isDateBooked(day);
75
- const isPast = new Date(year, month, day) < today;
76
- let buttonClass = "h-8 w-8 rounded-full flex items-center justify-center text-[11px] transition-all duration-200 ";
77
- if (isDisabled) {
78
- if (isBooked) {
200
+ }, [timeStepMinutes, timeFormat, isToday, today]);
201
+ // Manual time entry (input[type="time"]) state
202
+ const [manualTime, setManualTime] = useState("");
203
+ // Sync manual time display when selection changes
204
+ useEffect(() => {
205
+ const m = minutesOfDayFromPartialSelection;
206
+ if (m == null)
207
+ return;
208
+ const hh = Math.floor(m / 60);
209
+ const mm = m % 60;
210
+ const value = `${String(hh).padStart(2, "0")}:${String(mm).padStart(2, "0")}`;
211
+ setManualTime(value);
212
+ }, [/* sync with selection */ tempDate, minutesOfDayFromPartialSelection]);
213
+ const setSelectionFromMinutes = useCallback((minutesOfDay) => {
214
+ const hours24 = Math.floor(minutesOfDay / 60);
215
+ const minutes = minutesOfDay % 60;
216
+ if (timeFormat === "24h") {
217
+ setSelectedHour(hours24);
218
+ setSelectedMinute(minutes);
219
+ }
220
+ else {
221
+ const newPeriod = hours24 >= 12 ? "PM" : "AM";
222
+ const hour12 = hours24 % 12 === 0 ? 12 : hours24 % 12;
223
+ setPeriod(newPeriod);
224
+ setSelectedHour(hour12);
225
+ setSelectedMinute(minutes);
226
+ }
227
+ }, [timeFormat]);
228
+ const handleManualTimeChange = useCallback((value) => {
229
+ setManualTime(value);
230
+ const m = parseTimeString(value);
231
+ if (m != null) {
232
+ setSelectionFromMinutes(m);
233
+ }
234
+ }, [setSelectionFromMinutes]);
235
+ const handleTimeSelect = useCallback((minutesOfDay) => {
236
+ if (!tempDate)
237
+ return;
238
+ const d = new Date(tempDate);
239
+ const hours = Math.floor(minutesOfDay / 60);
240
+ const minutes = minutesOfDay % 60;
241
+ d.setHours(hours, minutes, 0, 0);
242
+ onDateSelect(d);
243
+ setShowTimePanel(false);
244
+ setTempDate(null);
245
+ // clear state
246
+ setSelectedHour(null);
247
+ setSelectedMinute(null);
248
+ setPeriod(defaultPeriod);
249
+ }, [tempDate, onDateSelect, defaultPeriod]);
250
+ // moved above to ensure availability for effects using it
251
+ const effectiveMinutesOfDay = useMemo(() => {
252
+ const manual = parseTimeString(manualTime);
253
+ return manual != null ? manual : minutesOfDayFromSelection;
254
+ }, [manualTime, minutesOfDayFromSelection]);
255
+ const isSelectedTimePast = useMemo(() => {
256
+ if (!isToday || effectiveMinutesOfDay == null)
257
+ return false;
258
+ const nowMinutes = today.getHours() * 60 + today.getMinutes();
259
+ return effectiveMinutesOfDay < nowMinutes;
260
+ }, [isToday, effectiveMinutesOfDay, today]);
261
+ // formatPreviewTime removed; use formatTimeLabel directly where needed
262
+ const handleConfirmSelection = useCallback(() => {
263
+ if (effectiveMinutesOfDay == null)
264
+ return;
265
+ if (isSelectedTimePast)
266
+ return;
267
+ handleTimeSelect(effectiveMinutesOfDay);
268
+ }, [effectiveMinutesOfDay, isSelectedTimePast, handleTimeSelect]);
269
+ // Generate calendar days (memoized)
270
+ const calendarDays = useMemo(() => {
271
+ const days = [];
272
+ // Add empty cells for days before the first day of the month
273
+ for (let i = 0; i < startingDayOfWeek; i++) {
274
+ days.push(_jsx("div", { className: "h-10" }, `empty-${i}`));
275
+ }
276
+ // Add days of the month
277
+ for (let day = 1; day <= daysInMonth; day++) {
278
+ const isDisabled = isDateDisabled(day);
279
+ const isSelected = isDateSelected(day);
280
+ const isBooked = isDateBooked(day);
281
+ const dateOnly = new Date(year, month, day);
282
+ const todayOnly = new Date(today.getFullYear(), today.getMonth(), today.getDate());
283
+ const isPast = dateOnly < todayOnly;
284
+ const isCurrent = dateOnly.getTime() === todayOnly.getTime();
285
+ let buttonClass = "h-8 w-8 rounded-full flex items-center justify-center text-[11px] transition-all duration-200 ";
286
+ if (isDisabled) {
287
+ if (isBooked) {
288
+ buttonClass +=
289
+ "bg-gray-100 text-gray-400 cursor-not-allowed border border-gray-200";
290
+ }
291
+ else if (isPast) {
292
+ buttonClass += "text-gray-300 cursor-not-allowed";
293
+ }
294
+ }
295
+ else if (isSelected) {
79
296
  buttonClass +=
80
- "bg-gray-100 text-gray-400 cursor-not-allowed border border-gray-200";
297
+ "bg-blue-500 text-white shadow-md transform scale-105 cursor-pointer";
81
298
  }
82
- else if (isPast) {
83
- buttonClass += "text-gray-300 cursor-not-allowed";
299
+ else {
300
+ buttonClass +=
301
+ "text-gray-700 hover:bg-blue-50 hover:text-blue-600 cursor-pointer";
84
302
  }
303
+ days.push(_jsx("button", { onClick: () => handleDateClick(day), disabled: isDisabled, className: buttonClass, "aria-selected": isSelected, "aria-current": isCurrent ? "date" : undefined, title: isBooked ? "This date is already booked" : isPast ? "Past date" : "", children: day }, day));
85
304
  }
86
- else if (isSelected) {
87
- buttonClass +=
88
- "bg-blue-500 text-white shadow-md transform scale-105 cursor-pointer";
89
- }
90
- else {
91
- buttonClass +=
92
- "text-gray-700 hover:bg-blue-50 hover:text-blue-600 cursor-pointer";
93
- }
94
- calendarDays.push(_jsx("button", { onClick: () => handleDateClick(day), disabled: isDisabled, className: buttonClass, title: isBooked ? "This date is already booked" : isPast ? "Past date" : "", children: day }, day));
95
- }
96
- return (_jsxs("div", { className: "calendar ", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("button", { onClick: handlePrevMonth, className: "p-2 rounded-full hover:bg-gray-100 transition-colors cursor-pointer", children: _jsx("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), _jsxs("h3", { className: "text-sm font-medium text-gray-800", children: [monthNames[month], " ", year] }), _jsx("button", { onClick: handleNextMonth, className: "p-2 rounded-full hover:bg-gray-100 transition-colors cursor-pointer", children: _jsx("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }) })] }), _jsx("div", { className: "grid grid-cols-7 gap-1 mb-2", children: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day) => (_jsx("div", { className: "h-8 flex items-center justify-center text-xs font-medium text-gray-500", children: day }, day))) }), _jsx("div", { className: "grid grid-cols-7 gap-1", children: calendarDays }), _jsx("div", { className: "mt-3", children: _jsxs("div", { className: "flex justify-center gap-4 text-xs", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-3 h-3 bg-blue-500 rounded-full" }), _jsx("span", { className: "text-gray-600", children: "Selected" })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-3 h-3 bg-gray-100 border border-gray-200 rounded-full" }), _jsx("span", { className: "text-gray-600", children: "Booked" })] })] }) })] }));
305
+ return days;
306
+ }, [
307
+ startingDayOfWeek,
308
+ daysInMonth,
309
+ year,
310
+ month,
311
+ today,
312
+ isDateDisabled,
313
+ isDateSelected,
314
+ isDateBooked,
315
+ handleDateClick,
316
+ ]);
317
+ return (_jsxs("div", { className: "calendar ", children: [!(enableTimeSelection && showTimePanel && tempDate) && (_jsxs("div", { role: "region", "aria-labelledby": dateViewHeadingId, "aria-hidden": enableTimeSelection && showTimePanel && !!tempDate, className: "transition-all duration-300 ease-out", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("button", { onClick: handlePrevMonth, className: "p-2 rounded-full hover:bg-gray-100 transition-colors cursor-pointer", "aria-label": "Previous month", children: _jsx("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), _jsxs("h3", { id: dateViewHeadingId, className: "text-sm font-medium text-gray-800", children: [monthNames[month], " ", year] }), _jsx("button", { onClick: handleNextMonth, className: "p-2 rounded-full hover:bg-gray-100 transition-colors cursor-pointer", "aria-label": "Next month", children: _jsx("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }) })] }), _jsx("div", { className: "grid grid-cols-7 gap-1 mb-2", children: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day) => (_jsx("div", { className: "h-8 flex items-center justify-center text-xs font-medium text-gray-500", children: day }, day))) }), _jsx("div", { className: "grid grid-cols-7 gap-1", children: calendarDays }), _jsx("div", { className: "mt-3", children: _jsxs("div", { className: "flex justify-center gap-4 text-xs", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-3 h-3 bg-blue-500 rounded-full" }), _jsx("span", { className: "text-gray-600", children: "Selected" })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-3 h-3 bg-gray-100 border border-gray-200 rounded-full" }), _jsx("span", { className: "text-gray-600", children: "Booked" })] })] }) })] })), enableTimeSelection && showTimePanel && tempDate && (_jsx("div", { role: "region", "aria-labelledby": timeViewHeadingId, "aria-hidden": !(enableTimeSelection && showTimePanel && tempDate), className: "transition-all duration-300 ease-out", children: _jsxs("div", { className: "", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("button", { onClick: () => {
318
+ setShowTimePanel(false);
319
+ setTempDate(null);
320
+ setSelectedHour(null);
321
+ setSelectedMinute(null);
322
+ setPeriod(defaultPeriod);
323
+ }, className: "p-2 rounded-full hover:bg-gray-100 transition-colors cursor-pointer", "aria-label": "Back to date selection", type: "button", children: _jsx("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), _jsx("h4", { id: timeViewHeadingId, className: "text-sm font-medium text-gray-800", children: "Choose time" }), _jsx("span", { className: "text-xs text-gray-600", children: tempDate.toLocaleDateString(undefined, {
324
+ weekday: "short",
325
+ day: "numeric",
326
+ month: "short",
327
+ year: "numeric",
328
+ }) })] }), _jsxs("div", { className: "mb-3", children: [_jsx("span", { className: "text-xs text-gray-600 mr-2", children: "Quick picks:" }), _jsx("div", { className: "flex flex-wrap gap-2", role: "group", "aria-label": "Quick time suggestions", children: suggestedTimes.map((t) => (_jsx("button", { type: "button", "aria-disabled": t.disabled, disabled: t.disabled, onClick: () => handleTimeSelect(t.minutes), className: `text-[11px] px-3 py-1 rounded-full border transition-colors ${t.disabled
329
+ ? "text-gray-400 bg-gray-100 cursor-not-allowed border-gray-200"
330
+ : "text-gray-700 hover:bg-blue-50 hover:text-blue-600 border-gray-300 cursor-pointer"}`, title: t.disabled ? "Unavailable in the past" : `Set ${t.label}`, children: t.label }, `suggest-${t.minutes}`))) })] }), timeFormat === "12h" && (_jsx("div", { className: "mb-3 flex items-center gap-2", role: "group", "aria-label": "AM/PM", children: ["AM", "PM"].map((p) => (_jsx("button", { type: "button", onClick: () => setPeriod(p), className: `text-[11px] px-3 py-1 rounded-full border ${period === p
331
+ ? "bg-blue-50 text-blue-700 border-blue-300 cursor-pointer"
332
+ : "text-gray-700 hover:bg-blue-50 hover:text-blue-600 border-gray-300 cursor-pointer"}`, "aria-pressed": period === p, children: p }, p))) })), _jsx("div", { className: "mb-3", role: "group", "aria-label": editingPart === "hour" ? "Select hour" : "Select minute", children: _jsx("div", { className: "flex flex-wrap gap-2", children: (editingPart === "hour"
333
+ ? timeFormat === "24h"
334
+ ? hourOptions24
335
+ : hourOptions12
336
+ : [
337
+ { label: "00", value: 0, type: "combo" },
338
+ { label: "30", value: 30, type: "combo" },
339
+ ...Array.from({ length: 10 }, (_, i) => ({
340
+ label: String(i),
341
+ value: i,
342
+ type: "digit",
343
+ })),
344
+ ]).map((item) => {
345
+ const val = typeof item === "number" ? item : item.value;
346
+ const isDigit = typeof item !== "number" && item.type === "digit";
347
+ const isCombo = typeof item !== "number" && item.type === "combo";
348
+ const isDisabled = editingPart === "minute" &&
349
+ isDigit &&
350
+ minuteTens == null &&
351
+ val > 5;
352
+ let btnClass = "h-8 w-8 rounded-full flex items-center justify-center text-[11px] transition-all duration-200 border ";
353
+ if (isDisabled) {
354
+ btnClass +=
355
+ "text-gray-400 bg-gray-100 cursor-not-allowed border-gray-200";
356
+ }
357
+ else {
358
+ btnClass +=
359
+ "text-gray-700 hover:bg-blue-50 hover:text-blue-600 cursor-pointer border-gray-300";
360
+ }
361
+ return (_jsx("button", { type: "button", onClick: () => {
362
+ if (editingPart === "hour") {
363
+ setSelectedHour(val);
364
+ }
365
+ else {
366
+ if (isDisabled)
367
+ return;
368
+ if (isCombo) {
369
+ const minute = val;
370
+ setSelectedMinute(minute);
371
+ setMinuteTens(Math.floor(minute / 10));
372
+ setMinuteOnes(minute % 10);
373
+ setEditingPart("hour");
374
+ }
375
+ else if (isDigit) {
376
+ if (minuteTens == null ||
377
+ (minuteTens != null && minuteOnes != null)) {
378
+ setMinuteTens(val);
379
+ setMinuteOnes(null);
380
+ setSelectedMinute(null);
381
+ }
382
+ else {
383
+ setMinuteOnes(val);
384
+ const minute = (minuteTens ?? 0) * 10 + val;
385
+ setSelectedMinute(minute);
386
+ setEditingPart("hour");
387
+ }
388
+ }
389
+ }
390
+ }, className: btnClass, children: editingPart === "hour"
391
+ ? String(val).padStart(2, "0")
392
+ : typeof item !== "number" &&
393
+ item.type === "combo"
394
+ ? item.label
395
+ : String(val) }, `${editingPart}-${typeof item === "number" ? val : item.label}`));
396
+ }) }) }), _jsxs("div", { className: "flex items-center justify-between mt-4", children: [_jsxs("div", { className: "flex items-center justify-center gap-2 flex-1", children: [(() => {
397
+ const hourActive = editingPart === "hour";
398
+ const minuteActive = editingPart === "minute";
399
+ const hourVal = (() => {
400
+ if (selectedHour == null)
401
+ return "--";
402
+ return String(selectedHour).padStart(2, "0");
403
+ })();
404
+ const minuteVal = (() => {
405
+ if (selectedMinute != null)
406
+ return String(selectedMinute).padStart(2, "0");
407
+ if (minuteTens != null || minuteOnes != null) {
408
+ const tens = minuteTens != null ? String(minuteTens) : "-";
409
+ const ones = minuteOnes != null ? String(minuteOnes) : "-";
410
+ return `${tens}${ones}`;
411
+ }
412
+ return "--";
413
+ })();
414
+ const baseCls = "h-8 w-8 rounded-full flex items-center justify-center text-[11px] transition-all duration-200 border ";
415
+ const hourCls = baseCls +
416
+ (hourActive
417
+ ? "bg-blue-500 text-white shadow-md transform scale-105 cursor-pointer border-blue-600"
418
+ : "text-gray-700 hover:bg-blue-50 hover:text-blue-600 cursor-pointer border-gray-300");
419
+ const minuteCls = baseCls +
420
+ (minuteActive
421
+ ? "bg-blue-500 text-white shadow-md transform scale-105 cursor-pointer border-blue-600"
422
+ : "text-gray-700 hover:bg-blue-50 hover:text-blue-600 cursor-pointer border-gray-300");
423
+ return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: hourCls, "aria-pressed": hourActive, onClick: () => setEditingPart("hour"), children: hourVal }), _jsx("span", { className: "text-gray-600", children: ":" }), _jsx("button", { type: "button", className: minuteCls, "aria-pressed": minuteActive, onClick: () => {
424
+ setEditingPart("minute");
425
+ setMinuteTens(null);
426
+ setMinuteOnes(null);
427
+ setSelectedMinute(null);
428
+ }, children: minuteVal })] }));
429
+ })(), isSelectedTimePast && (_jsx("span", { className: "text-[11px] text-red-600", children: "Time must be in the future" }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", onClick: handleConfirmSelection, disabled: effectiveMinutesOfDay == null || isSelectedTimePast, className: `text-[11px] px-3 py-2 rounded-xl border transition-colors ${effectiveMinutesOfDay == null || isSelectedTimePast
430
+ ? "bg-gray-100 text-gray-400 cursor-not-allowed"
431
+ : "bg-blue-50 text-blue-700 hover:bg-blue-100 cursor-pointer"}`, "aria-label": "Confirm selected time", children: "Confirm" }), _jsx("button", { type: "button", onClick: () => {
432
+ setSelectedHour(null);
433
+ setSelectedMinute(null);
434
+ setPeriod(defaultPeriod);
435
+ setManualTime("");
436
+ setMinuteTens(null);
437
+ setMinuteOnes(null);
438
+ }, className: "text-[11px] px-3 py-2 rounded-xl border text-gray-700 hover:bg-gray-50 cursor-pointer", children: "Reset" })] })] })] }) }))] }));
97
439
  };
98
440
  export default Calendar;
@@ -13,6 +13,15 @@ export interface CalendarExtendedProps {
13
13
  start: MonthSelection;
14
14
  end: MonthSelection;
15
15
  }) => void;
16
+ /**
17
+ * When provided, highlights this range in the months grid.
18
+ * The component still manages internal clicks, but visual state
19
+ * uses this range preferentially if set.
20
+ */
21
+ selectedRange?: {
22
+ start: MonthSelection;
23
+ end: MonthSelection;
24
+ };
16
25
  minSelectableMonth?: MonthSelection;
17
26
  maxSelectableMonth?: MonthSelection;
18
27
  /** Convenience flag: when true, disallow selecting months beyond the current month */
@@ -24,4 +33,4 @@ export interface CalendarExtendedProps {
24
33
  bookedDates?: Date[];
25
34
  maxSelections?: number;
26
35
  }
27
- export default function CalendarExtended({ selectionGranularity, allowRange, startYear, endYear, selectedMonths, onMonthSelectionChange, onMonthRangeChange, minSelectableMonth, maxSelectableMonth, disableFutureMonths, containerHeight, enableYearTransition: _enableYearTransition, selectedDates, onDateSelect, bookedDates, maxSelections, }: Readonly<CalendarExtendedProps>): import("react/jsx-runtime").JSX.Element;
36
+ export default function CalendarExtended({ selectionGranularity, allowRange, startYear, endYear, selectedMonths, onMonthSelectionChange, onMonthRangeChange, selectedRange, minSelectableMonth, maxSelectableMonth, disableFutureMonths, containerHeight, enableYearTransition: _enableYearTransition, selectedDates, onDateSelect, bookedDates, maxSelections, }: Readonly<CalendarExtendedProps>): import("react/jsx-runtime").JSX.Element;
@@ -16,7 +16,7 @@ const monthNames = [
16
16
  "November",
17
17
  "December",
18
18
  ];
19
- export default function CalendarExtended({ selectionGranularity = "day", allowRange = false, startYear, endYear, selectedMonths = [], onMonthSelectionChange, onMonthRangeChange, minSelectableMonth, maxSelectableMonth, disableFutureMonths, containerHeight = 560, enableYearTransition: _enableYearTransition = true, selectedDates = [], onDateSelect, bookedDates, maxSelections, }) {
19
+ export default function CalendarExtended({ selectionGranularity = "day", allowRange = false, startYear, endYear, selectedMonths = [], onMonthSelectionChange, onMonthRangeChange, selectedRange, minSelectableMonth, maxSelectableMonth, disableFutureMonths, containerHeight = 560, enableYearTransition: _enableYearTransition = true, selectedDates = [], onDateSelect, bookedDates, maxSelections, }) {
20
20
  // Derive year bounds
21
21
  const currentYear = new Date().getFullYear();
22
22
  const DEFAULT_START_YEAR = 1900;
@@ -26,6 +26,9 @@ export default function CalendarExtended({ selectionGranularity = "day", allowRa
26
26
  // Internal range state if consumer enables range
27
27
  const [rangeStart, setRangeStart] = useState(null);
28
28
  const [rangeEnd, setRangeEnd] = useState(null);
29
+ // Effective visual range: prefer controlled selectedRange if provided
30
+ const effectiveRangeStart = selectedRange?.start ?? rangeStart ?? null;
31
+ const effectiveRangeEnd = selectedRange?.end ?? rangeEnd ?? null;
29
32
  // Accessibility: grid id for aria-controls
30
33
  const gridIdRef = useRef(`calendar-extended-grid-${Math.random().toString(36).slice(2)}`);
31
34
  const allMonths = useMemo(() => {
@@ -42,10 +45,10 @@ export default function CalendarExtended({ selectionGranularity = "day", allowRa
42
45
  }, [fromYear, toYear]);
43
46
  const isSelected = (y, m) => selectedMonths.some((sel) => sel.year === y && sel.month === m);
44
47
  const isInRange = (y, m) => {
45
- if (!rangeStart || !rangeEnd)
48
+ if (!effectiveRangeStart || !effectiveRangeEnd)
46
49
  return false;
47
- const startKey = rangeStart.year * 12 + rangeStart.month;
48
- const endKey = rangeEnd.year * 12 + rangeEnd.month;
50
+ const startKey = effectiveRangeStart.year * 12 + effectiveRangeStart.month;
51
+ const endKey = effectiveRangeEnd.year * 12 + effectiveRangeEnd.month;
49
52
  const currentKey = y * 12 + m;
50
53
  const [minKey, maxKey] = startKey <= endKey ? [startKey, endKey] : [endKey, startKey];
51
54
  return currentKey >= minKey && currentKey <= maxKey;
@@ -109,8 +112,12 @@ export default function CalendarExtended({ selectionGranularity = "day", allowRa
109
112
  const selected = isSelected(y, m);
110
113
  const inRange = isInRange(y, m);
111
114
  const disabled = isMonthDisabled(y, m);
112
- const isStart = !!rangeStart && rangeStart.year === y && rangeStart.month === m;
113
- const isEnd = !!rangeEnd && rangeEnd.year === y && rangeEnd.month === m;
115
+ const isStart = !!effectiveRangeStart &&
116
+ effectiveRangeStart.year === y &&
117
+ effectiveRangeStart.month === m;
118
+ const isEnd = !!effectiveRangeEnd &&
119
+ effectiveRangeEnd.year === y &&
120
+ effectiveRangeEnd.month === m;
114
121
  const isCurrent = (() => {
115
122
  const d = new Date();
116
123
  return d.getFullYear() === y && d.getMonth() === m;
@@ -120,13 +127,13 @@ export default function CalendarExtended({ selectionGranularity = "day", allowRa
120
127
  const stateClasses = disabled
121
128
  ? "opacity-50 cursor-not-allowed bg-gray-50 text-gray-400"
122
129
  : isStart && isEnd
123
- ? "bg-primaryblue/20 border-primaryblue text-white"
130
+ ? "bg-primaryblue text-white ring-2 ring-primaryblue"
124
131
  : isStart
125
- ? "bg-primaryblue/20 text-primaryblue ring-2 ring-primaryblue"
132
+ ? "bg-primaryblue text-white ring-2 ring-primaryblue"
126
133
  : isEnd
127
- ? "bg-primaryblue/20 text-primaryblue ring-2 ring-primaryblue/70"
134
+ ? "bg-primaryblue text-white ring-2 ring-primaryblue"
128
135
  : inRange
129
- ? "bg-primaryblue/10 text-primaryblue"
136
+ ? "bg-primaryblue/10 text-primaryblue ring-1 ring-primaryblue/30"
130
137
  : isSinglePreRange || selected
131
138
  ? "bg-primaryblue/5 text-primaryblue"
132
139
  : "bg-gray-100 hover:bg-gray-50";
@@ -31,9 +31,9 @@ const CustomDropdown = ({ label, placeholder = "Select an option", options, valu
31
31
  onChange("");
32
32
  setIsOpen(false);
33
33
  };
34
- return (_jsxs("div", { className: `w-full ${minimal ? "text-[11px]" : "text-base sm:text-xs"} ${className}`, ref: dropdownRef, children: [label && (_jsx("label", { className: `${labelClass} block mb-2 text-[10px] text-gray-500`, children: label })), _jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `${minimal
34
+ return (_jsxs("div", { className: `w-full ${minimal ? "text-[11px]" : "text-base sm:text-xs"}`, ref: dropdownRef, children: [label && (_jsx("label", { className: `${labelClass} block mb-2 text-[10px] text-gray-500`, children: label })), _jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `${minimal
35
35
  ? "flex gap-1 items-center"
36
- : "w-full p-0 px-4 sm:p-4 rounded-xl bg-gray-50 border outline-none text-left flex items-center justify-between h-13.5 sm:h-auto"} ${error ? "border-red-500" : "border-gray-200"} ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`, children: [_jsx("span", { className: `${selectedOption ? "text-gray-900" : "text-gray-400"}`, children: selectedOption ? selectedOption.label : placeholder }), !disabled && (_jsx(ChevronDownIcon, { className: `w-4 h-4 text-gray-800 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}` }))] }), isOpen && !disabled && (_jsx("div", { className: "absolute z-50 min-w-full mt-1 bg-white border border-gray-200 rounded-xl shadow-lg max-h-60 overflow-y-auto", children: options.map((option) => (_jsxs("div", { className: `flex items-center justify-between hover:bg-gray-50 transition-colors ${value === option.value
36
+ : "w-full p-0 px-4 sm:p-4 rounded-xl bg-gray-50 border outline-none text-left flex items-center justify-between h-13.5 sm:h-auto"} ${error ? "border-red-500" : "border-gray-200"} ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${className}`, children: [_jsx("span", { className: `${selectedOption ? "text-gray-900" : "text-gray-400"}`, children: selectedOption ? selectedOption.label : placeholder }), !disabled && (_jsx(ChevronDownIcon, { className: `w-4 h-4 text-gray-800 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}` }))] }), isOpen && !disabled && (_jsx("div", { className: "absolute z-50 min-w-full mt-1 bg-white border border-gray-200 rounded-xl shadow-lg max-h-60 overflow-y-auto", children: options.map((option) => (_jsxs("div", { className: `flex items-center justify-between hover:bg-gray-50 transition-colors ${value === option.value
37
37
  ? "bg-blue-50 text-blue-600"
38
38
  : "text-gray-900"} first:rounded-t-xl last:rounded-b-xl`, children: [_jsx("button", { type: "button", onClick: () => handleOptionClick(option.value), className: "flex-1 text-left text-nowrap px-4 py-3", children: option.label }), value === option.value && (_jsx("button", { type: "button", onClick: handleClear, className: "p-0.5 hover:bg-gray-100 rounded-full transition-colors ml-2", children: _jsx(X, { className: "w-3 h-3 text-gray-400 hover:text-gray-600" }) }))] }, option.value))) }))] }), error && _jsx("p", { className: "mt-1 text-red-500", children: error })] }));
39
39
  };
@@ -1,17 +1,35 @@
1
1
  import React, { ReactNode } from "react";
2
+ export type DropdownRenderHelpers = {
3
+ /** Close the dropdown programmatically */
4
+ close: () => void;
5
+ };
2
6
  export interface OptionItem {
3
7
  id: string;
4
8
  label: string;
5
9
  onClick: () => void;
6
10
  disabled?: boolean;
11
+ /** Optional icon node shown before the label */
12
+ icon?: ReactNode;
7
13
  }
8
14
  export interface OptionsDropdownProps {
9
- options: OptionItem[];
15
+ /**
16
+ * Array of options to render as the dropdown menu. When `dropdownContent` is provided,
17
+ * this array is optional and ignored. Kept for backward compatibility.
18
+ */
19
+ options?: OptionItem[];
10
20
  trigger?: ReactNode;
11
21
  listClassName?: string;
12
22
  optionClassName?: string;
13
23
  containerClassName?: string;
14
24
  disabled?: boolean;
25
+ /**
26
+ * Custom content to render inside the dropdown. Accepts either a React node
27
+ * or a render function. When a function is provided, it will receive a
28
+ * helpers object with a `close()` method that can be used to close the
29
+ * dropdown programmatically (e.g., from an internal button).
30
+ * Backward compatible with previous ReactNode usage.
31
+ */
32
+ dropdownContent?: ReactNode | ((helpers: DropdownRenderHelpers) => ReactNode);
15
33
  }
16
34
  declare const _default: (props: OptionsDropdownProps) => React.JSX.Element;
17
35
  export default _default;
@@ -2,13 +2,14 @@
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { MoreVertical } from "lucide-react";
4
4
  import { useEffect, useRef, useState } from "react";
5
- const OptionsDropdown = ({ options, trigger, listClassName = "", optionClassName = "", containerClassName = "", disabled = false, }) => {
5
+ const OptionsDropdown = ({ options = [], trigger, listClassName = "", optionClassName = "", containerClassName = "", disabled = false, dropdownContent, }) => {
6
6
  const [isOpen, setIsOpen] = useState(false);
7
7
  const dropdownRef = useRef(null);
8
8
  // Close dropdown when clicking outside
9
9
  useEffect(() => {
10
10
  const handleClickOutside = (event) => {
11
- if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
11
+ if (dropdownRef.current &&
12
+ !dropdownRef.current.contains(event.target)) {
12
13
  setIsOpen(false);
13
14
  }
14
15
  };
@@ -35,10 +36,15 @@ const OptionsDropdown = ({ options, trigger, listClassName = "", optionClassName
35
36
  e.preventDefault();
36
37
  e.stopPropagation();
37
38
  handleToggle();
38
- }, className: "cursor-pointer", children: trigger || defaultTrigger }), isOpen && (_jsx("div", { className: `${listClassName} absolute right-0 top-full mt-2 bg-white border border-gray-100 rounded-xl divide-y divide-gray-100 shadow-lg z-50 min-w-48 overflow-hidden`, children: options.map((option) => (_jsx("button", { onClick: (e) => {
39
+ }, className: "cursor-pointer", children: trigger || defaultTrigger }), isOpen && (_jsx("div", { className: `${listClassName} absolute right-0 top-full mt-2 bg-white border border-gray-100 rounded-xl divide-y divide-gray-100 shadow-lg z-50 min-w-48 overflow-hidden flex flex-col`, children: dropdownContent ? (_jsx("div", { onClick: (e) => {
40
+ // allow interactive content without closing automatically
41
+ e.stopPropagation();
42
+ }, children: typeof dropdownContent === "function"
43
+ ? dropdownContent({ close: () => setIsOpen(false) })
44
+ : dropdownContent })) : (options.map((option) => (_jsxs("button", { onClick: (e) => {
39
45
  e.preventDefault();
40
46
  e.stopPropagation();
41
47
  handleOptionClick(option);
42
- }, disabled: option.disabled, className: `w-full text-left px-3 py-2.5 cursor-pointer text-xs text-gray-500 hover:text-black hover:bg-gray-100 transition-colors duration-200 ${optionClassName}`, children: option.label }, option.id))) }))] }));
48
+ }, disabled: option.disabled, className: `w-full text-left px-3 py-2.5 cursor-pointer text-xs text-gray-500 hover:text-black hover:bg-gray-100 transition-colors duration-200 flex items-center gap-3 ${optionClassName}`, children: [option.icon ? (_jsx("span", { className: "inline-flex items-center", children: option.icon })) : null, _jsx("span", { children: option.label })] }, option.id)))) }))] }));
43
49
  };
44
50
  export default OptionsDropdown;
package/dist/styles.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2
- @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-200:oklch(88.5% .062 18.334);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-green-50:oklch(98.2% .018 155.826);--color-green-200:oklch(92.5% .084 155.995);--color-green-500:oklch(72.3% .219 149.579);--color-blue-50:oklch(97% .014 254.604);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-800:oklch(42.4% .199 265.638);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--ease-out:cubic-bezier(0,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-spin:spin 1s linear infinite;--blur-xs:4px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-primaryblue:var(--primaryblue)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}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;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.-top-0\.5{top:calc(var(--spacing)*-.5)}.top-1{top:calc(var(--spacing)*1)}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing)*2)}.top-4{top:calc(var(--spacing)*4)}.top-full{top:100%}.right-0{right:calc(var(--spacing)*0)}.right-1{right:calc(var(--spacing)*1)}.right-2{right:calc(var(--spacing)*2)}.right-3{right:calc(var(--spacing)*3)}.right-4{right:calc(var(--spacing)*4)}.left-0\.5{left:calc(var(--spacing)*.5)}.left-2{left:calc(var(--spacing)*2)}.left-5{left:calc(var(--spacing)*5)}.z-12{z-index:12}.z-30{z-index:30}.z-50{z-index:50}.z-\[80\]{z-index:80}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.ml-2{margin-left:calc(var(--spacing)*2)}.ml-4{margin-left:calc(var(--spacing)*4)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.size-1\.5{width:calc(var(--spacing)*1.5);height:calc(var(--spacing)*1.5)}.size-4{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.size-5{width:calc(var(--spacing)*5);height:calc(var(--spacing)*5)}.size-10{width:calc(var(--spacing)*10);height:calc(var(--spacing)*10)}.size-14{width:calc(var(--spacing)*14);height:calc(var(--spacing)*14)}.size-16{width:calc(var(--spacing)*16);height:calc(var(--spacing)*16)}.size-full{width:100%;height:100%}.h-3{height:calc(var(--spacing)*3)}.h-3\.5{height:calc(var(--spacing)*3.5)}.h-4{height:calc(var(--spacing)*4)}.h-4\.5{height:calc(var(--spacing)*4.5)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-10{height:calc(var(--spacing)*10)}.h-12{height:calc(var(--spacing)*12)}.h-13\.5{height:calc(var(--spacing)*13.5)}.h-20{height:calc(var(--spacing)*20)}.h-25{height:calc(var(--spacing)*25)}.h-full{height:100%}.max-h-60{max-height:calc(var(--spacing)*60)}.max-h-\[80vh\]{max-height:80vh}.min-h-\[160px\]{min-height:160px}.w-0{width:calc(var(--spacing)*0)}.w-3{width:calc(var(--spacing)*3)}.w-3\.5{width:calc(var(--spacing)*3.5)}.w-4{width:calc(var(--spacing)*4)}.w-4\.5{width:calc(var(--spacing)*4.5)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-9{width:calc(var(--spacing)*9)}.w-10{width:calc(var(--spacing)*10)}.w-12{width:calc(var(--spacing)*12)}.w-full{width:100%}.max-w-96{max-width:calc(var(--spacing)*96)}.max-w-\[120px\]{max-width:120px}.max-w-md{max-width:var(--container-md)}.min-w-48{min-width:calc(var(--spacing)*48)}.min-w-80{min-width:calc(var(--spacing)*80)}.min-w-full{min-width:100%}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.translate-x-0{--tw-translate-x:calc(var(--spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-1{--tw-translate-x:calc(var(--spacing)*1);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-4{--tw-translate-x:calc(var(--spacing)*4);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-full{--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.scale-105{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}.rotate-45{rotate:45deg}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.\[appearance\:textfield\]{appearance:textfield}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.gap-x-2{column-gap:calc(var(--spacing)*2)}:where(.space-x-3>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*3)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-x-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-gray-100>:not(:last-child)){border-color:var(--color-gray-100)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-3xl{border-top-left-radius:var(--radius-3xl);border-top-right-radius:var(--radius-3xl)}.border,.border-1{border-style:var(--tw-border-style);border-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-black{border-color:var(--color-black)}.border-blue-200{border-color:var(--color-blue-200)}.border-blue-400{border-color:var(--color-blue-400)}.border-blue-500{border-color:var(--color-blue-500)}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-400{border-color:var(--color-gray-400)}.border-green-200{border-color:var(--color-green-200)}.border-primaryblue{border-color:var(--color-primaryblue)}.border-red-200{border-color:var(--color-red-200)}.border-red-500{border-color:var(--color-red-500)}.bg-\[\#F1A5C2\]{background-color:#f1a5c2}.bg-black{background-color:var(--color-black)}.bg-black\/40{background-color:#0006}@supports (color:color-mix(in lab, red, red)){.bg-black\/40{background-color:color-mix(in oklab,var(--color-black)40%,transparent)}}.bg-black\/70{background-color:#000000b3}@supports (color:color-mix(in lab, red, red)){.bg-black\/70{background-color:color-mix(in oklab,var(--color-black)70%,transparent)}}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-400{background-color:var(--color-gray-400)}.bg-green-50{background-color:var(--color-green-50)}.bg-green-500{background-color:var(--color-green-500)}.bg-primaryblue,.bg-primaryblue\/5{background-color:var(--color-primaryblue)}@supports (color:color-mix(in lab, red, red)){.bg-primaryblue\/5{background-color:color-mix(in oklab,var(--color-primaryblue)5%,transparent)}}.bg-primaryblue\/10{background-color:var(--color-primaryblue)}@supports (color:color-mix(in lab, red, red)){.bg-primaryblue\/10{background-color:color-mix(in oklab,var(--color-primaryblue)10%,transparent)}}.bg-primaryblue\/20{background-color:var(--color-primaryblue)}@supports (color:color-mix(in lab, red, red)){.bg-primaryblue\/20{background-color:color-mix(in oklab,var(--color-primaryblue)20%,transparent)}}.bg-red-50{background-color:var(--color-red-50)}.bg-red-500{background-color:var(--color-red-500)}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.p-0{padding:calc(var(--spacing)*0)}.p-0\.5{padding:calc(var(--spacing)*.5)}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-3\.5{padding:calc(var(--spacing)*3.5)}.p-4{padding:calc(var(--spacing)*4)}.p-\[2\.5px\]{padding:2.5px}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2\.5{padding-block:calc(var(--spacing)*2.5)}.py-3{padding-block:calc(var(--spacing)*3)}.py-12{padding-block:calc(var(--spacing)*12)}.pt-0{padding-top:calc(var(--spacing)*0)}.pr-12{padding-right:calc(var(--spacing)*12)}.pb-2{padding-bottom:calc(var(--spacing)*2)}.pl-8{padding-left:calc(var(--spacing)*8)}.text-center{text-align:center}.text-left{text-align:left}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[13px\]{font-size:13px}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-nowrap{text-wrap:nowrap}.whitespace-nowrap{white-space:nowrap}.text-\[\#011B33\]{color:#011b33}.text-black{color:var(--color-black)}.text-blue-500{color:var(--color-blue-500)}.text-blue-600{color:var(--color-blue-600)}.text-blue-800{color:var(--color-blue-800)}.text-gray-300{color:var(--color-gray-300)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.text-green-500{color:var(--color-green-500)}.text-primaryblue{color:var(--color-primaryblue)}.text-red-500{color:var(--color-red-500)}.text-white{color:var(--color-white)}.placeholder-gray-300::placeholder{color:var(--color-gray-300)}.placeholder-gray-400::placeholder{color:var(--color-gray-400)}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-100{opacity:1}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-blue-300{--tw-ring-color:var(--color-blue-300)}.ring-primaryblue,.ring-primaryblue\/70{--tw-ring-color:var(--color-primaryblue)}@supports (color:color-mix(in lab, red, red)){.ring-primaryblue\/70{--tw-ring-color:color-mix(in oklab,var(--color-primaryblue)70%,transparent)}}.backdrop-blur-xs{--tw-backdrop-blur:blur(var(--blur-xs));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.first\:rounded-t-xl:first-child{border-top-left-radius:var(--radius-xl);border-top-right-radius:var(--radius-xl)}.last\:rounded-b-xl:last-child{border-bottom-right-radius:var(--radius-xl);border-bottom-left-radius:var(--radius-xl)}.focus-within\:border-gray-300:focus-within{border-color:var(--color-gray-300)}.focus-within\:bg-white:focus-within{background-color:var(--color-white)}@media (hover:hover){.hover\:border-gray-400:hover{border-color:var(--color-gray-400)}.hover\:bg-blue-50:hover{background-color:var(--color-blue-50)}.hover\:bg-blue-200:hover{background-color:var(--color-blue-200)}.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:bg-primaryblue\/70:hover{background-color:var(--color-primaryblue)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primaryblue\/70:hover{background-color:color-mix(in oklab,var(--color-primaryblue)70%,transparent)}}.hover\:bg-red-600:hover{background-color:var(--color-red-600)}.hover\:text-black:hover{color:var(--color-black)}.hover\:text-blue-600:hover{color:var(--color-blue-600)}.hover\:text-gray-600:hover{color:var(--color-gray-600)}.hover\:opacity-100:hover{opacity:1}}.focus\:border-gray-300:focus{border-color:var(--color-gray-300)}.focus\:border-primaryblue:focus{border-color:var(--color-primaryblue)}.focus\:bg-white:focus{background-color:var(--color-white)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-primaryblue\/60:focus-visible{--tw-ring-color:var(--color-primaryblue)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-primaryblue\/60:focus-visible{--tw-ring-color:color-mix(in oklab,var(--color-primaryblue)60%,transparent)}}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}@media (min-width:40rem){.sm\:left-4{left:calc(var(--spacing)*4)}.sm\:h-\[220px\]{height:220px}.sm\:h-auto{height:auto}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:p-3{padding:calc(var(--spacing)*3)}.sm\:p-4{padding:calc(var(--spacing)*4)}.sm\:px-4{padding-inline:calc(var(--spacing)*4)}.sm\:py-6{padding-block:calc(var(--spacing)*6)}.sm\:pl-7{padding-left:calc(var(--spacing)*7)}.sm\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.sm\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.sm\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.sm\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.sm\:text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}}@media (min-width:48rem){.md\:size-12{width:calc(var(--spacing)*12);height:calc(var(--spacing)*12)}.md\:size-16{width:calc(var(--spacing)*16);height:calc(var(--spacing)*16)}.md\:size-20{width:calc(var(--spacing)*20);height:calc(var(--spacing)*20)}.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:gap-4{gap:calc(var(--spacing)*4)}}@media (min-width:80rem){.xl\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button{appearance:none}.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{appearance:none}}.cb-btn{height:calc(var(--spacing)*13.5);cursor:pointer;border-radius:var(--radius-xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-200);background-color:var(--color-primaryblue);width:100%;padding:calc(var(--spacing)*3.5);padding-inline:calc(var(--spacing)*6);color:var(--color-white);--tw-outline-style:none;outline-style:none;font-size:13px}@media (hover:hover){.cb-btn:hover{background-color:var(--color-primaryblue)}@supports (color:color-mix(in lab, red, red)){.cb-btn:hover{background-color:color-mix(in oklab,var(--color-primaryblue)70%,transparent)}}}.cb-btn:focus{border-color:var(--color-primaryblue)}@media (min-width:40rem){.cb-btn{height:auto}}.cb-btn--disabled{cursor:not-allowed;background-color:var(--color-gray-400)}.cb-input{height:calc(var(--spacing)*13.5);border-radius:var(--radius-xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-200);background-color:var(--color-gray-50);width:100%;padding:calc(var(--spacing)*0);padding-inline:calc(var(--spacing)*3);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));color:var(--color-black)}.cb-input::placeholder{color:var(--color-gray-300)}.cb-input{--tw-outline-style:none;outline-style:none}.cb-input:focus{border-color:var(--color-gray-300);background-color:var(--color-white)}@media (min-width:40rem){.cb-input{height:auto;padding:calc(var(--spacing)*4);padding-inline:calc(var(--spacing)*4);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}}.cb-input--error{border-color:var(--color-red-500)}.cb-input--password{padding-right:calc(var(--spacing)*12)}.cb-checkbox-container{height:calc(var(--spacing)*13.5);border-radius:var(--radius-xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-200);background-color:var(--color-gray-50);width:100%;padding:calc(var(--spacing)*0);padding-inline:calc(var(--spacing)*3);justify-content:space-between;align-items:center;display:flex}.cb-checkbox-container:focus-within{border-color:var(--color-gray-300);background-color:var(--color-white)}@media (min-width:40rem){.cb-checkbox-container{height:auto;padding:calc(var(--spacing)*3)}}.cb-checkbox-label{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));color:var(--color-gray-400)}@media (min-width:40rem){.cb-checkbox-label{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}}.cb-checkbox-box{height:calc(var(--spacing)*6);width:calc(var(--spacing)*6);cursor:pointer;border-radius:var(--radius-lg);border-style:var(--tw-border-style);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));border-width:1px;justify-content:center;align-items:center;display:flex}.cb-checkbox-box--checked{border-color:var(--color-black);background-color:var(--color-black)}.cb-checkbox-box--unchecked{border-color:var(--color-gray-300);background-color:var(--color-white)}.cb-checkbox-box--disabled{cursor:not-allowed;opacity:.5}.cb-square-checkbox{cursor:pointer;align-items:center;gap:calc(var(--spacing)*4);-webkit-user-select:none;user-select:none;display:flex}.cb-square-checkbox--disabled{cursor:not-allowed;opacity:.6}.cb-square-checkbox--checked .cb-square-checkbox__label{color:var(--color-gray-800)}.cb-square-checkbox--unchecked .cb-square-checkbox__label{color:var(--color-gray-600)}.cb-square-checkbox__box{height:calc(var(--spacing)*11);width:calc(var(--spacing)*11);border-radius:var(--radius-xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-200);background-color:var(--color-gray-50);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.cb-square-checkbox__box--checked{border-color:var(--color-primaryblue);background-color:var(--color-white);--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:var(--color-primaryblue)}.cb-square-checkbox__box--unchecked{border-color:var(--color-gray-200);background-color:var(--color-gray-50)}.cb-square-checkbox__box--disabled{opacity:.5}.cb-square-checkbox__label{--tw-font-weight:var(--font-weight-medium);font-size:15px;font-weight:var(--font-weight-medium);color:var(--color-gray-600)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}
2
+ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-200:oklch(88.5% .062 18.334);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-green-50:oklch(98.2% .018 155.826);--color-green-200:oklch(92.5% .084 155.995);--color-green-500:oklch(72.3% .219 149.579);--color-blue-50:oklch(97% .014 254.604);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--ease-out:cubic-bezier(0,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-spin:spin 1s linear infinite;--blur-xs:4px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-primaryblue:var(--primaryblue)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}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;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.-top-0\.5{top:calc(var(--spacing)*-.5)}.top-1{top:calc(var(--spacing)*1)}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing)*2)}.top-4{top:calc(var(--spacing)*4)}.top-full{top:100%}.right-0{right:calc(var(--spacing)*0)}.right-1{right:calc(var(--spacing)*1)}.right-2{right:calc(var(--spacing)*2)}.right-3{right:calc(var(--spacing)*3)}.right-4{right:calc(var(--spacing)*4)}.left-0\.5{left:calc(var(--spacing)*.5)}.left-2{left:calc(var(--spacing)*2)}.left-5{left:calc(var(--spacing)*5)}.z-12{z-index:12}.z-30{z-index:30}.z-50{z-index:50}.z-\[80\]{z-index:80}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.ml-2{margin-left:calc(var(--spacing)*2)}.ml-4{margin-left:calc(var(--spacing)*4)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.size-1\.5{width:calc(var(--spacing)*1.5);height:calc(var(--spacing)*1.5)}.size-4{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.size-5{width:calc(var(--spacing)*5);height:calc(var(--spacing)*5)}.size-10{width:calc(var(--spacing)*10);height:calc(var(--spacing)*10)}.size-14{width:calc(var(--spacing)*14);height:calc(var(--spacing)*14)}.size-16{width:calc(var(--spacing)*16);height:calc(var(--spacing)*16)}.size-full{width:100%;height:100%}.h-3{height:calc(var(--spacing)*3)}.h-3\.5{height:calc(var(--spacing)*3.5)}.h-4{height:calc(var(--spacing)*4)}.h-4\.5{height:calc(var(--spacing)*4.5)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-10{height:calc(var(--spacing)*10)}.h-12{height:calc(var(--spacing)*12)}.h-13\.5{height:calc(var(--spacing)*13.5)}.h-20{height:calc(var(--spacing)*20)}.h-25{height:calc(var(--spacing)*25)}.h-full{height:100%}.max-h-60{max-height:calc(var(--spacing)*60)}.max-h-\[80vh\]{max-height:80vh}.min-h-\[160px\]{min-height:160px}.w-0{width:calc(var(--spacing)*0)}.w-3{width:calc(var(--spacing)*3)}.w-3\.5{width:calc(var(--spacing)*3.5)}.w-4{width:calc(var(--spacing)*4)}.w-4\.5{width:calc(var(--spacing)*4.5)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-9{width:calc(var(--spacing)*9)}.w-10{width:calc(var(--spacing)*10)}.w-12{width:calc(var(--spacing)*12)}.w-full{width:100%}.max-w-96{max-width:calc(var(--spacing)*96)}.max-w-\[120px\]{max-width:120px}.max-w-md{max-width:var(--container-md)}.min-w-48{min-width:calc(var(--spacing)*48)}.min-w-80{min-width:calc(var(--spacing)*80)}.min-w-full{min-width:100%}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.translate-x-0{--tw-translate-x:calc(var(--spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-1{--tw-translate-x:calc(var(--spacing)*1);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-4{--tw-translate-x:calc(var(--spacing)*4);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-full{--tw-translate-x:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.scale-105{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}.rotate-45{rotate:45deg}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.\[appearance\:textfield\]{appearance:textfield}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.gap-x-2{column-gap:calc(var(--spacing)*2)}:where(.space-x-3>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*3)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-x-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-gray-100>:not(:last-child)){border-color:var(--color-gray-100)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-3xl{border-top-left-radius:var(--radius-3xl);border-top-right-radius:var(--radius-3xl)}.border,.border-1{border-style:var(--tw-border-style);border-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-black{border-color:var(--color-black)}.border-blue-200{border-color:var(--color-blue-200)}.border-blue-300{border-color:var(--color-blue-300)}.border-blue-400{border-color:var(--color-blue-400)}.border-blue-500{border-color:var(--color-blue-500)}.border-blue-600{border-color:var(--color-blue-600)}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-400{border-color:var(--color-gray-400)}.border-green-200{border-color:var(--color-green-200)}.border-red-200{border-color:var(--color-red-200)}.border-red-500{border-color:var(--color-red-500)}.bg-\[\#F1A5C2\]{background-color:#f1a5c2}.bg-black{background-color:var(--color-black)}.bg-black\/40{background-color:#0006}@supports (color:color-mix(in lab, red, red)){.bg-black\/40{background-color:color-mix(in oklab,var(--color-black)40%,transparent)}}.bg-black\/70{background-color:#000000b3}@supports (color:color-mix(in lab, red, red)){.bg-black\/70{background-color:color-mix(in oklab,var(--color-black)70%,transparent)}}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-400{background-color:var(--color-gray-400)}.bg-green-50{background-color:var(--color-green-50)}.bg-green-500{background-color:var(--color-green-500)}.bg-primaryblue,.bg-primaryblue\/5{background-color:var(--color-primaryblue)}@supports (color:color-mix(in lab, red, red)){.bg-primaryblue\/5{background-color:color-mix(in oklab,var(--color-primaryblue)5%,transparent)}}.bg-primaryblue\/10{background-color:var(--color-primaryblue)}@supports (color:color-mix(in lab, red, red)){.bg-primaryblue\/10{background-color:color-mix(in oklab,var(--color-primaryblue)10%,transparent)}}.bg-red-50{background-color:var(--color-red-50)}.bg-red-500{background-color:var(--color-red-500)}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.p-0{padding:calc(var(--spacing)*0)}.p-0\.5{padding:calc(var(--spacing)*.5)}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-3\.5{padding:calc(var(--spacing)*3.5)}.p-4{padding:calc(var(--spacing)*4)}.p-\[2\.5px\]{padding:2.5px}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\.5{padding-block:calc(var(--spacing)*2.5)}.py-3{padding-block:calc(var(--spacing)*3)}.py-12{padding-block:calc(var(--spacing)*12)}.pt-0{padding-top:calc(var(--spacing)*0)}.pr-12{padding-right:calc(var(--spacing)*12)}.pb-2{padding-bottom:calc(var(--spacing)*2)}.pl-8{padding-left:calc(var(--spacing)*8)}.text-center{text-align:center}.text-left{text-align:left}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[13px\]{font-size:13px}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-nowrap{text-wrap:nowrap}.whitespace-nowrap{white-space:nowrap}.text-\[\#011B33\]{color:#011b33}.text-black{color:var(--color-black)}.text-blue-500{color:var(--color-blue-500)}.text-blue-600{color:var(--color-blue-600)}.text-blue-700{color:var(--color-blue-700)}.text-blue-800{color:var(--color-blue-800)}.text-gray-300{color:var(--color-gray-300)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.text-green-500{color:var(--color-green-500)}.text-primaryblue{color:var(--color-primaryblue)}.text-red-500{color:var(--color-red-500)}.text-red-600{color:var(--color-red-600)}.text-white{color:var(--color-white)}.placeholder-gray-300::placeholder{color:var(--color-gray-300)}.placeholder-gray-400::placeholder{color:var(--color-gray-400)}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-100{opacity:1}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-blue-300{--tw-ring-color:var(--color-blue-300)}.ring-primaryblue,.ring-primaryblue\/30{--tw-ring-color:var(--color-primaryblue)}@supports (color:color-mix(in lab, red, red)){.ring-primaryblue\/30{--tw-ring-color:color-mix(in oklab,var(--color-primaryblue)30%,transparent)}}.backdrop-blur-xs{--tw-backdrop-blur:blur(var(--blur-xs));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.first\:rounded-t-xl:first-child{border-top-left-radius:var(--radius-xl);border-top-right-radius:var(--radius-xl)}.last\:rounded-b-xl:last-child{border-bottom-right-radius:var(--radius-xl);border-bottom-left-radius:var(--radius-xl)}.focus-within\:border-gray-300:focus-within{border-color:var(--color-gray-300)}.focus-within\:bg-white:focus-within{background-color:var(--color-white)}@media (hover:hover){.hover\:border-gray-400:hover{border-color:var(--color-gray-400)}.hover\:bg-blue-50:hover{background-color:var(--color-blue-50)}.hover\:bg-blue-100:hover{background-color:var(--color-blue-100)}.hover\:bg-blue-200:hover{background-color:var(--color-blue-200)}.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:bg-primaryblue\/70:hover{background-color:var(--color-primaryblue)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primaryblue\/70:hover{background-color:color-mix(in oklab,var(--color-primaryblue)70%,transparent)}}.hover\:bg-red-600:hover{background-color:var(--color-red-600)}.hover\:text-black:hover{color:var(--color-black)}.hover\:text-blue-600:hover{color:var(--color-blue-600)}.hover\:text-gray-600:hover{color:var(--color-gray-600)}.hover\:opacity-100:hover{opacity:1}}.focus\:border-gray-300:focus{border-color:var(--color-gray-300)}.focus\:border-primaryblue:focus{border-color:var(--color-primaryblue)}.focus\:bg-white:focus{background-color:var(--color-white)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-primaryblue\/60:focus-visible{--tw-ring-color:var(--color-primaryblue)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-primaryblue\/60:focus-visible{--tw-ring-color:color-mix(in oklab,var(--color-primaryblue)60%,transparent)}}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}@media (min-width:40rem){.sm\:left-4{left:calc(var(--spacing)*4)}.sm\:h-\[220px\]{height:220px}.sm\:h-auto{height:auto}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:p-3{padding:calc(var(--spacing)*3)}.sm\:p-4{padding:calc(var(--spacing)*4)}.sm\:px-4{padding-inline:calc(var(--spacing)*4)}.sm\:py-6{padding-block:calc(var(--spacing)*6)}.sm\:pl-7{padding-left:calc(var(--spacing)*7)}.sm\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.sm\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.sm\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.sm\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.sm\:text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}}@media (min-width:48rem){.md\:size-12{width:calc(var(--spacing)*12);height:calc(var(--spacing)*12)}.md\:size-16{width:calc(var(--spacing)*16);height:calc(var(--spacing)*16)}.md\:size-20{width:calc(var(--spacing)*20);height:calc(var(--spacing)*20)}.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:gap-4{gap:calc(var(--spacing)*4)}}@media (min-width:80rem){.xl\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button{appearance:none}.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{appearance:none}}.cb-btn{height:calc(var(--spacing)*13.5);cursor:pointer;border-radius:var(--radius-xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-200);background-color:var(--color-primaryblue);width:100%;padding:calc(var(--spacing)*3.5);padding-inline:calc(var(--spacing)*6);color:var(--color-white);--tw-outline-style:none;outline-style:none;font-size:13px}@media (hover:hover){.cb-btn:hover{background-color:var(--color-primaryblue)}@supports (color:color-mix(in lab, red, red)){.cb-btn:hover{background-color:color-mix(in oklab,var(--color-primaryblue)70%,transparent)}}}.cb-btn:focus{border-color:var(--color-primaryblue)}@media (min-width:40rem){.cb-btn{height:auto}}.cb-btn--disabled{cursor:not-allowed;background-color:var(--color-gray-400)}.cb-input{height:calc(var(--spacing)*13.5);border-radius:var(--radius-xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-200);background-color:var(--color-gray-50);width:100%;padding:calc(var(--spacing)*0);padding-inline:calc(var(--spacing)*3);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));color:var(--color-black)}.cb-input::placeholder{color:var(--color-gray-300)}.cb-input{--tw-outline-style:none;outline-style:none}.cb-input:focus{border-color:var(--color-gray-300);background-color:var(--color-white)}@media (min-width:40rem){.cb-input{height:auto;padding:calc(var(--spacing)*4);padding-inline:calc(var(--spacing)*4);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}}.cb-input--error{border-color:var(--color-red-500)}.cb-input--password{padding-right:calc(var(--spacing)*12)}.cb-checkbox-container{height:calc(var(--spacing)*13.5);border-radius:var(--radius-xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-200);background-color:var(--color-gray-50);width:100%;padding:calc(var(--spacing)*0);padding-inline:calc(var(--spacing)*3);justify-content:space-between;align-items:center;display:flex}.cb-checkbox-container:focus-within{border-color:var(--color-gray-300);background-color:var(--color-white)}@media (min-width:40rem){.cb-checkbox-container{height:auto;padding:calc(var(--spacing)*3)}}.cb-checkbox-label{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));color:var(--color-gray-400)}@media (min-width:40rem){.cb-checkbox-label{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}}.cb-checkbox-box{height:calc(var(--spacing)*6);width:calc(var(--spacing)*6);cursor:pointer;border-radius:var(--radius-lg);border-style:var(--tw-border-style);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));border-width:1px;justify-content:center;align-items:center;display:flex}.cb-checkbox-box--checked{border-color:var(--color-black);background-color:var(--color-black)}.cb-checkbox-box--unchecked{border-color:var(--color-gray-300);background-color:var(--color-white)}.cb-checkbox-box--disabled{cursor:not-allowed;opacity:.5}.cb-square-checkbox{cursor:pointer;align-items:center;gap:calc(var(--spacing)*4);-webkit-user-select:none;user-select:none;display:flex}.cb-square-checkbox--disabled{cursor:not-allowed;opacity:.6}.cb-square-checkbox--checked .cb-square-checkbox__label{color:var(--color-gray-800)}.cb-square-checkbox--unchecked .cb-square-checkbox__label{color:var(--color-gray-600)}.cb-square-checkbox__box{height:calc(var(--spacing)*11);width:calc(var(--spacing)*11);border-radius:var(--radius-xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-200);background-color:var(--color-gray-50);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.cb-square-checkbox__box--checked{border-color:var(--color-primaryblue);background-color:var(--color-white);--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:var(--color-primaryblue)}.cb-square-checkbox__box--unchecked{border-color:var(--color-gray-200);background-color:var(--color-gray-50)}.cb-square-checkbox__box--disabled{opacity:.5}.cb-square-checkbox__label{--tw-font-weight:var(--font-weight-medium);font-size:15px;font-weight:var(--font-weight-medium);color:var(--color-gray-600)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crestbase/web-shared-ui",
3
- "version": "1.0.2",
3
+ "version": "1.0.3",
4
4
  "description": "Shared UI components for Crestbase web app and admin",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",