@happychef/reservation-sidebar 2.5.2 → 2.5.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.
package/dist/index.css ADDED
@@ -0,0 +1,805 @@
1
+ /* src/components/ReservationStepOne/css/valueSelector.css */
2
+ .valueSelector_new-reservation-page .valueSelector_value-selector {
3
+ display: flex;
4
+ flex-direction: column;
5
+ gap: 15px;
6
+ margin-bottom: 20px;
7
+ }
8
+ .valueSelector_new-reservation-page .valueSelector_non-absolute {
9
+ position: relative !important;
10
+ }
11
+ .valueSelector_new-reservation-page .valueSelector_non-absolute::before {
12
+ background: none;
13
+ }
14
+ .valueSelector_new-reservation-page .valueSelector_predefined-values {
15
+ display: flex;
16
+ gap: 10px;
17
+ }
18
+ .valueSelector_new-reservation-page .valueSelector_predefined-value-button {
19
+ flex: 1;
20
+ padding: 10px;
21
+ border: 1px solid #ccc;
22
+ border-radius: var(--border-radius);
23
+ background-color: var(--color-white);
24
+ cursor: pointer;
25
+ font-size: 1rem;
26
+ transition: background-color 0.3s ease;
27
+ }
28
+ .valueSelector_new-reservation-page .valueSelector_predefined-value-button.valueSelector_active,
29
+ .valueSelector_new-reservation-page .valueSelector_predefined-value-button:hover {
30
+ background-color: var(--color-blue);
31
+ color: var(--color-white);
32
+ }
33
+ .valueSelector_new-reservation-page .valueSelector_slider-container {
34
+ display: flex;
35
+ align-items: center;
36
+ gap: 15px;
37
+ }
38
+ .valueSelector_new-reservation-page .valueSelector_slider {
39
+ flex: 1;
40
+ appearance: none;
41
+ -webkit-appearance: none;
42
+ height: 5px;
43
+ background: #ddd;
44
+ border-radius: 5px;
45
+ outline: none;
46
+ }
47
+ .valueSelector_new-reservation-page .valueSelector_slider::-webkit-slider-thumb {
48
+ -webkit-appearance: none;
49
+ appearance: none;
50
+ width: 20px;
51
+ height: 20px;
52
+ background: var(--color-blue);
53
+ cursor: pointer;
54
+ border-radius: 50%;
55
+ }
56
+ .valueSelector_new-reservation-page .valueSelector_value-input {
57
+ width: 80px;
58
+ padding: 10px;
59
+ border: 1px solid #ccc;
60
+ border-radius: var(--border-radius);
61
+ font-size: 1rem;
62
+ }
63
+
64
+ /* src/components/ReservationStepOne/css/calendar.css */
65
+ .calendar_new-reservation-page .calendar_calendar-container {
66
+ position: relative;
67
+ width: 100%;
68
+ }
69
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-display {
70
+ display: flex;
71
+ align-items: center;
72
+ justify-content: space-between;
73
+ width: 100%;
74
+ padding: 10px;
75
+ background-color: #fff;
76
+ border: #ccc 1px solid;
77
+ cursor: pointer;
78
+ user-select: none;
79
+ text-align: left;
80
+ border-radius: 5px;
81
+ }
82
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-display span:first-child {
83
+ flex-grow: 1;
84
+ }
85
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar {
86
+ position: absolute;
87
+ z-index: 1000;
88
+ width: 100%;
89
+ background-color: rgba(255, 255, 255, 1);
90
+ border: 1px solid #ccc;
91
+ margin-top: 5px;
92
+ padding: 10px;
93
+ border-radius: 10px;
94
+ animation: calendar_fadeInCalendar 0.3s ease-in-out;
95
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
96
+ }
97
+ @keyframes calendar_fadeInCalendar {
98
+ from {
99
+ opacity: 0;
100
+ }
101
+ to {
102
+ opacity: 1;
103
+ }
104
+ }
105
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_availability-hold-btn {
106
+ font-size: 10px;
107
+ }
108
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-header {
109
+ display: flex;
110
+ justify-content: space-between;
111
+ align-items: center;
112
+ margin-bottom: 10px;
113
+ gap: 8px;
114
+ flex-wrap: wrap;
115
+ }
116
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-header button {
117
+ background-color: transparent;
118
+ border: none;
119
+ cursor: pointer;
120
+ font-size: 18px;
121
+ }
122
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-header span {
123
+ font-size: 15px;
124
+ color: gray;
125
+ font-weight: 500;
126
+ }
127
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-weeks-wrapper {
128
+ overflow: hidden;
129
+ position: relative;
130
+ width: 100%;
131
+ }
132
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table {
133
+ width: 100%;
134
+ border-collapse: collapse;
135
+ }
136
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table th,
137
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td {
138
+ width: 14.28%;
139
+ text-align: center;
140
+ padding: 5px;
141
+ }
142
+ .calendar_calendar-container .calendar_calendar-table th {
143
+ color: #666;
144
+ font-weight: normal;
145
+ padding-bottom: 10px;
146
+ }
147
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td {
148
+ vertical-align: middle;
149
+ cursor: pointer;
150
+ border: none;
151
+ opacity: 1;
152
+ position: relative;
153
+ }
154
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td.calendar_empty-day {
155
+ cursor: default;
156
+ }
157
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td:hover .calendar_day-square.calendar_available {
158
+ transform: scale(1.05);
159
+ }
160
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_day-square {
161
+ position: relative;
162
+ width: 38px;
163
+ height: 38px;
164
+ border-radius: 4px;
165
+ display: inline-flex;
166
+ align-items: center;
167
+ justify-content: center;
168
+ flex-direction: column;
169
+ transition: all 0.2s ease;
170
+ font-size: 16px;
171
+ margin: 0 auto;
172
+ }
173
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_day-number {
174
+ line-height: 1;
175
+ z-index: 2;
176
+ }
177
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_available .calendar_day-square {
178
+ background-color: #ccffcc;
179
+ color: #006600;
180
+ }
181
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_available:hover .calendar_day-square {
182
+ background-color: #b3ffb3;
183
+ }
184
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_available:active .calendar_day-square {
185
+ background-color: #99ff99;
186
+ }
187
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_unavailable .calendar_day-square {
188
+ background-color: rgba(139, 0, 0, 0.13);
189
+ color: darkred;
190
+ }
191
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_gray-out .calendar_day-square {
192
+ background-color: #e0e0e0;
193
+ color: #999;
194
+ cursor: not-allowed;
195
+ }
196
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_selected .calendar_day-square {
197
+ background-color: #006600;
198
+ color: #ccffcc;
199
+ }
200
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td.calendar_unavailable,
201
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td.calendar_gray-out {
202
+ cursor: not-allowed;
203
+ }
204
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td.calendar_unavailable:hover .calendar_day-square,
205
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td.calendar_gray-out:hover .calendar_day-square {
206
+ transform: none;
207
+ }
208
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_calendar-table td {
209
+ border: none;
210
+ }
211
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_arrow {
212
+ margin-left: auto;
213
+ color: gray;
214
+ display: flex;
215
+ align-items: center;
216
+ }
217
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_available .calendar_availability-badge {
218
+ background: #38a169;
219
+ }
220
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_selected .calendar_availability-badge {
221
+ background: #2d3748;
222
+ }
223
+ @media screen and (max-width: 900px) {
224
+ .calendar_calendar-container .calendar_day-square {
225
+ width: 35px !important;
226
+ height: 35px !important;
227
+ font-size: 15px !important;
228
+ }
229
+ .calendar_calendar-container .calendar_calendar-header span {
230
+ font-size: 12px;
231
+ }
232
+ .calendar_new-reservation-page .calendar_calendar-container .calendar_availability-toggle-btn {
233
+ padding: 5px 8px;
234
+ font-size: 11px;
235
+ }
236
+ }
237
+
238
+ /* src/components/ReservationStepOne/css/timeSelector.css */
239
+ .timeSelector_new-reservation-page .timeSelector_time-selector-container {
240
+ position: relative;
241
+ }
242
+ .timeSelector_new-reservation-page .timeSelector_time-display {
243
+ display: flex;
244
+ align-items: center;
245
+ justify-content: space-between;
246
+ width: 100%;
247
+ padding: 10px;
248
+ background-color: #fff;
249
+ border: #ccc 1px solid;
250
+ cursor: pointer;
251
+ user-select: none;
252
+ text-align: left;
253
+ border-radius: 5px;
254
+ }
255
+ .timeSelector_new-reservation-page .timeSelector_time-display span:first-child {
256
+ flex-grow: 1;
257
+ }
258
+ .timeSelector_new-reservation-page .timeSelector_time-selector {
259
+ position: absolute;
260
+ z-index: 1000;
261
+ width: 100%;
262
+ max-height: 300px;
263
+ overflow-y: auto;
264
+ background-color: rgba(255, 255, 255, 1);
265
+ border: 1px solid #ccc;
266
+ margin-top: 5px;
267
+ padding: 10px;
268
+ border-radius: 10px;
269
+ animation: timeSelector_fadeInTimeSelector 0.3s ease-in-out;
270
+ top: 75px;
271
+ }
272
+ @keyframes timeSelector_fadeInTimeSelector {
273
+ from {
274
+ opacity: 0;
275
+ }
276
+ to {
277
+ opacity: 1;
278
+ }
279
+ }
280
+ .timeSelector_new-reservation-page .timeSelector_time-period {
281
+ margin-bottom: 15px;
282
+ }
283
+ .timeSelector_new-reservation-page .timeSelector_time-period-label {
284
+ font-weight: bold;
285
+ margin-bottom: 5px;
286
+ }
287
+ .timeSelector_new-reservation-page .timeSelector_time-options {
288
+ display: flex;
289
+ flex-wrap: wrap;
290
+ gap: 5px;
291
+ }
292
+ .timeSelector_new-reservation-page .timeSelector_time-option {
293
+ padding: 8px 12px;
294
+ background-color: #ccffcc;
295
+ color: #006600;
296
+ border-radius: 5px;
297
+ cursor: pointer;
298
+ transition: background-color 0.2s ease;
299
+ }
300
+ .timeSelector_new-reservation-page .timeSelector_time-option:hover {
301
+ background-color: #b3ffb3;
302
+ }
303
+ .timeSelector_new-reservation-page .timeSelector_time-option.timeSelector_selected {
304
+ background-color: #006600;
305
+ color: #ccffcc;
306
+ }
307
+ .timeSelector_new-reservation-page .timeSelector_info-text {
308
+ color: #666;
309
+ font-style: italic;
310
+ }
311
+ .timeSelector_new-reservation-page .timeSelector_arrow {
312
+ margin-left: auto;
313
+ color: gray;
314
+ display: flex;
315
+ align-items: center;
316
+ }
317
+ @media screen and (max-width: 480px) {
318
+ .timeSelector_new-reservation-page .timeSelector_time-option {
319
+ padding: 6px 10px;
320
+ font-size: 14px;
321
+ }
322
+ }
323
+
324
+ /* src/components/ReservationStepOne/css/tableSelector.css */
325
+ .tableSelector_new-reservation-page .tableSelector_table-selector-container {
326
+ margin-top: 15px;
327
+ padding: 10px;
328
+ border: 1px solid #eee;
329
+ border-radius: 4px;
330
+ background-color: #f9f9f9;
331
+ }
332
+ .tableSelector_new-reservation-page .tableSelector_table-selector-label {
333
+ display: block;
334
+ margin-bottom: 10px;
335
+ font-weight: bold;
336
+ color: #333;
337
+ font-size: 0.95rem;
338
+ }
339
+ .tableSelector_new-reservation-page .tableSelector_table-options {
340
+ display: flex;
341
+ flex-wrap: wrap;
342
+ gap: 10px;
343
+ }
344
+ .tableSelector_new-reservation-page .tableSelector_table-option {
345
+ display: inline-block;
346
+ margin-right: 15px;
347
+ margin-bottom: 5px;
348
+ padding: 5px 8px;
349
+ border: 1px solid #ccc;
350
+ border-radius: 4px;
351
+ background-color: #fff;
352
+ transition: background-color 0.2s ease;
353
+ }
354
+ .tableSelector_new-reservation-page .tableSelector_table-option label {
355
+ display: flex;
356
+ align-items: center;
357
+ cursor: pointer;
358
+ font-size: 0.9rem;
359
+ color: #555;
360
+ }
361
+ .tableSelector_new-reservation-page .tableSelector_table-option input[type=checkbox] {
362
+ margin-right: 8px;
363
+ cursor: pointer;
364
+ accent-color: var(--primary-color, #006600);
365
+ }
366
+ .tableSelector_new-reservation-page .tableSelector_table-option:has(input[type=checkbox]:checked) {
367
+ background-color: #e0f2e0;
368
+ border-color: #006600;
369
+ }
370
+ .tableSelector_new-reservation-page .tableSelector_table-option:hover {
371
+ background-color: #f0f0f0;
372
+ }
373
+ .tableSelector_new-reservation-page .tableSelector_info-text {
374
+ margin-top: 10px;
375
+ font-size: 0.85rem;
376
+ color: #666;
377
+ }
378
+ .tableSelector_new-reservation-page .tableSelector_selected-tables-info {
379
+ margin-top: 10px;
380
+ font-style: italic;
381
+ }
382
+ .tableSelector_new-reservation-page .tableSelector_info-text.tableSelector_loading-tables {
383
+ font-style: italic;
384
+ color: #006600;
385
+ }
386
+
387
+ /* src/components/ReservationStepOne/css/reservationMode.css */
388
+ .reservationMode_new-reservation-page .reservationMode_form-row .reservationMode_field-label {
389
+ display: block;
390
+ margin-bottom: 6px;
391
+ font-weight: 600;
392
+ }
393
+ .reservationMode_new-reservation-page .reservationMode_form-row .reservationMode_reservation-mode-buttons {
394
+ margin-top: 0;
395
+ }
396
+ .reservationMode_new-reservation-page .reservationMode_reservation-mode-buttons {
397
+ display: flex;
398
+ gap: 10px;
399
+ margin-top: 10px;
400
+ }
401
+ .reservationMode_new-reservation-page .reservationMode_reservation-mode-button {
402
+ flex: 1;
403
+ padding: 10px;
404
+ border: 1px solid #ccc;
405
+ border-radius: var(--border-radius);
406
+ background-color: var(--color-white);
407
+ cursor: pointer;
408
+ font-size: 1rem;
409
+ transition: background-color 0.3s ease, color 0.3s ease;
410
+ }
411
+ .reservationMode_new-reservation-page .reservationMode_reservation-mode-button.reservationMode_active,
412
+ .reservationMode_new-reservation-page .reservationMode_reservation-mode-button:hover {
413
+ background-color: var(--color-blue);
414
+ color: var(--color-white);
415
+ }
416
+ .reservationMode_new-reservation-page .reservationMode_reservation-modes-container {
417
+ display: flex;
418
+ flex-wrap: wrap;
419
+ margin: 0 -5px;
420
+ width: 100%;
421
+ }
422
+ .reservationMode_new-reservation-page .reservationMode_reservation-mode-button {
423
+ flex: 0 0 calc(50% - 10px);
424
+ margin: 5px;
425
+ padding: 10px;
426
+ box-sizing: border-box;
427
+ text-align: center;
428
+ border: 1px solid #ccc;
429
+ background: #f7f7f7;
430
+ cursor: pointer;
431
+ }
432
+ .reservationMode_new-reservation-page .reservationMode_reservation-mode-button:nth-child(3) {
433
+ flex: 0 0 100%;
434
+ }
435
+ .reservationMode_new-reservation-page .reservationMode_reservation-modes-container {
436
+ display: flex;
437
+ flex-wrap: wrap;
438
+ margin: 0 -5px;
439
+ width: 100%;
440
+ }
441
+ .reservationMode_new-reservation-page .reservationMode_reservation-mode-button {
442
+ flex: 0 0 calc(50% - 10px);
443
+ margin: 5px;
444
+ padding: 10px;
445
+ box-sizing: border-box;
446
+ text-align: center;
447
+ border: 1px solid #ccc;
448
+ background: #f7f7f7;
449
+ cursor: pointer;
450
+ }
451
+ .reservationMode_new-reservation-page .reservationMode_reservation-mode-button.reservationMode_active,
452
+ .reservationMode_new-reservation-page .reservationMode_reservation-mode-button:hover {
453
+ background-color: var(--color-blue);
454
+ color: var(--color-white);
455
+ }
456
+ .reservationMode_new-reservation-page .reservationMode_unlimited-mode-warning {
457
+ display: flex;
458
+ align-items: flex-start;
459
+ gap: 10px;
460
+ margin: 15px 0;
461
+ padding: 12px 15px;
462
+ background-color: #fff3cd;
463
+ border: 1px solid #ffeaa7;
464
+ border-radius: var(--border-radius, 4px);
465
+ border-left: 4px solid #e67e22;
466
+ font-size: 0.9rem;
467
+ line-height: 1.4;
468
+ }
469
+ .reservationMode_new-reservation-page .reservationMode_unlimited-mode-warning .reservationMode_warning-icon {
470
+ color: #e67e22;
471
+ font-size: 1.1rem;
472
+ margin-top: 2px;
473
+ flex-shrink: 0;
474
+ }
475
+ .reservationMode_new-reservation-page .reservationMode_unlimited-mode-warning .reservationMode_warning-text {
476
+ color: #856404;
477
+ margin: 0;
478
+ }
479
+ @media screen and (max-width: 480px) {
480
+ .reservationMode_new-reservation-page .reservationMode_unlimited-mode-warning {
481
+ margin: 10px 0;
482
+ padding: 10px 12px;
483
+ font-size: 0.85rem;
484
+ }
485
+ .reservationMode_new-reservation-page .reservationMode_unlimited-mode-warning .reservationMode_warning-icon {
486
+ font-size: 1rem;
487
+ }
488
+ }
489
+ .reservationMode_new-reservation-page .reservationMode_reservation-sidebar-component {
490
+ position: fixed;
491
+ top: 0;
492
+ right: -400px;
493
+ width: 400px;
494
+ height: 100%;
495
+ background-color: #fff;
496
+ box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
497
+ z-index: var(--z-index-sidebar-reservation);
498
+ display: flex;
499
+ flex-direction: column;
500
+ overflow-y: auto;
501
+ transition: right 0.3s ease-in-out;
502
+ }
503
+ .reservationMode_new-reservation-page .reservationMode_admin-title {
504
+ text-align: center;
505
+ margin-bottom: 30px;
506
+ }
507
+ .reservationMode_new-reservation-page .reservationMode_reservation-sidebar-component.reservationMode_open {
508
+ right: 0;
509
+ }
510
+ .reservationMode_new-reservation-page .reservationMode_reservation-sidebar-content {
511
+ padding: 20px;
512
+ padding-top: 60px;
513
+ }
514
+ .reservationMode_new-reservation-page .reservationMode_close-sidebar-button {
515
+ position: absolute;
516
+ top: 10px;
517
+ left: 10px;
518
+ background-color: transparent;
519
+ border: none;
520
+ cursor: pointer;
521
+ }
522
+ .reservationMode_new-reservation-page .reservationMode_close-sidebar-button svg {
523
+ color: #000;
524
+ }
525
+ .reservationMode_new-reservation-page .reservationMode_sidebar-section-one,
526
+ .reservationMode_new-reservation-page .reservationMode_sidebar-section-two {
527
+ margin-bottom: 20px;
528
+ }
529
+ .reservationMode_new-reservation-page .reservationMode_reservation-footer {
530
+ margin-top: auto;
531
+ }
532
+ .reservationMode_new-reservation-page .reservationMode_store-reservation-button {
533
+ width: 100%;
534
+ padding: 12px;
535
+ background-color: var(--color-blue);
536
+ color: #fff;
537
+ border: none;
538
+ border-radius: 5px;
539
+ cursor: pointer;
540
+ font-size: 1.1rem;
541
+ }
542
+ .reservationMode_new-reservation-page .reservationMode_open-sidebar-button {
543
+ position: fixed;
544
+ bottom: 20px;
545
+ right: 20px;
546
+ background-color: var(--color-blue);
547
+ color: #fff;
548
+ border: none;
549
+ border-radius: 50%;
550
+ width: 50px;
551
+ height: 50px;
552
+ cursor: pointer;
553
+ z-index: var(--z-index-modal) !important;
554
+ transition: all 0.3s ease;
555
+ }
556
+ .reservationMode_new-reservation-page .reservationMode_open-sidebar-button:hover {
557
+ background-color: var(--color-blue-hover-accent) !important;
558
+ }
559
+ .reservationMode_new-reservation-page .reservationMode_open-sidebar-button svg {
560
+ position: relative;
561
+ top: 2px;
562
+ }
563
+ @media screen and (max-width: 480px) {
564
+ .reservationMode_new-reservation-page .reservationMode_reservation-sidebar-component {
565
+ width: 100%;
566
+ }
567
+ }
568
+ .reservationMode_new-reservation-page .reservationMode_sidebar-section-personeel {
569
+ margin-bottom: 10px;
570
+ }
571
+
572
+ /* src/components/FormField/formField.css */
573
+ .formField_new-reservation-page .formField_form-group .formField_magic-tooltip {
574
+ transition: transform 0.2s ease;
575
+ transform-origin: bottom right;
576
+ }
577
+ .formField_new-reservation-page .formField_form-group .formField_magic-tooltip:hover {
578
+ transform: scale(1.05);
579
+ }
580
+
581
+ /* src/components/ReservationStepTwo/reservationStepTwo.css */
582
+ .reservationStepTwo_new-reservation-page .reservationStepTwo_name-fields {
583
+ display: flex;
584
+ gap: 20px;
585
+ }
586
+ .reservationStepTwo_input-container .reservationStepTwo_form-control {
587
+ display: flex;
588
+ align-items: center;
589
+ justify-content: space-between;
590
+ width: 100%;
591
+ padding: 10px;
592
+ background-color: #fff;
593
+ border: #ccc 1px solid;
594
+ cursor: pointer;
595
+ -webkit-user-select: none;
596
+ user-select: none;
597
+ text-align: left;
598
+ border-radius: 5px;
599
+ font-size: 16px;
600
+ }
601
+
602
+ /* src/components/ReservationSummary/reservationSummary.css */
603
+ .reservationSummary_new-reservation-page .reservationSummary_reservation-sidebar-component .reservationSummary_reservation-summary .reservationSummary_modal-title {
604
+ margin-top: 0;
605
+ margin-bottom: 20px;
606
+ }
607
+ .reservationSummary_new-reservation-page .reservationSummary_reservation-sidebar-component .reservationSummary_reservation-summary .reservationSummary_reservation-details {
608
+ list-style-type: none;
609
+ padding: 0;
610
+ margin: 0 0 20px 0;
611
+ width: 100%;
612
+ }
613
+ .reservationSummary_new-reservation-page .reservationSummary_reservation-sidebar-component .reservationSummary_reservation-summary .reservationSummary_reservation-details li {
614
+ margin-bottom: 10px;
615
+ font-size: 15px;
616
+ align-items: left;
617
+ text-align: left;
618
+ }
619
+ .reservationSummary_new-reservation-page .reservationSummary_reservation-sidebar-component .reservationSummary_reservation-summary .reservationSummary_reservation-details li strong {
620
+ font-weight: bold;
621
+ }
622
+ .reservationSummary_new-reservation-page .reservationSummary_reservation-sidebar-component .reservationSummary_reservation-summary {
623
+ align-items: left;
624
+ }
625
+
626
+ /* src/components/GiftcardSelection/giftcardSelection.css */
627
+ .giftcardSelection_new-reservation-page .giftcardSelection_giftcard-selection {
628
+ margin-bottom: 20px;
629
+ }
630
+ .giftcardSelection_new-reservation-page .giftcardSelection_giftcard-options {
631
+ display: flex;
632
+ gap: 20px;
633
+ margin: 10px 0;
634
+ }
635
+ .giftcardSelection_new-reservation-page .giftcardSelection_giftcard-option {
636
+ display: flex;
637
+ align-items: center;
638
+ gap: 8px;
639
+ cursor: pointer;
640
+ }
641
+ .giftcardSelection_new-reservation-page .giftcardSelection_form-label {
642
+ font-weight: 500;
643
+ margin-bottom: 8px;
644
+ display: block;
645
+ }
646
+ .giftcardSelection_new-reservation-page .giftcardSelection_giftcard-option input[type=radio] {
647
+ margin: 0;
648
+ cursor: pointer;
649
+ }
650
+ .giftcardSelection_new-reservation-page .giftcardSelection_giftcard-option label {
651
+ cursor: pointer;
652
+ }
653
+
654
+ /* src/components/ZitplaatsSelection/zitplaatsSelection.css */
655
+ .zitplaatsSelection_new-reservation-page .zitplaatsSelection_zitplaats-selection {
656
+ margin-bottom: 15px;
657
+ }
658
+ .zitplaatsSelection_new-reservation-page .zitplaatsSelection_zitplaats-selection select {
659
+ width: 100%;
660
+ padding: 10px;
661
+ border-radius: 4px;
662
+ border: 1px solid #ccc;
663
+ background-color: white;
664
+ }
665
+
666
+ /* src/styles/reservationSidebar.css */
667
+ .reservationSidebar_reservation-sidebar-component {
668
+ position: fixed;
669
+ top: 0;
670
+ right: -400px;
671
+ width: 400px;
672
+ height: 100%;
673
+ background-color: #fff;
674
+ box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
675
+ z-index: var(--z-index-sidebar-reservation);
676
+ display: flex;
677
+ flex-direction: column;
678
+ overflow-y: auto;
679
+ transition: right 0.3s ease-in-out;
680
+ }
681
+ .reservationSidebar_admin-title {
682
+ text-align: center;
683
+ margin-bottom: 30px;
684
+ }
685
+ .reservationSidebar_reservation-sidebar-component.reservationSidebar_open {
686
+ right: 0;
687
+ }
688
+ .reservationSidebar_reservation-sidebar-content {
689
+ padding: 20px;
690
+ padding-top: 60px;
691
+ }
692
+ .reservationSidebar_close-sidebar-button {
693
+ position: absolute;
694
+ top: 10px;
695
+ left: 10px;
696
+ background-color: transparent;
697
+ border: none;
698
+ cursor: pointer;
699
+ }
700
+ .reservationSidebar_close-sidebar-button svg {
701
+ color: #000;
702
+ }
703
+ .reservationSidebar_sidebar-section-one,
704
+ .reservationSidebar_sidebar-section-two {
705
+ margin-bottom: 20px;
706
+ }
707
+ .reservationSidebar_reservation-footer {
708
+ margin-top: auto;
709
+ }
710
+ .reservationSidebar_store-reservation-button {
711
+ width: 100%;
712
+ padding: 12px;
713
+ background-color: var(--color-blue);
714
+ color: #fff;
715
+ border: none;
716
+ border-radius: 5px;
717
+ cursor: pointer;
718
+ font-size: 1.1rem;
719
+ }
720
+ .reservationSidebar_open-sidebar-button {
721
+ position: fixed;
722
+ bottom: 20px;
723
+ right: 20px;
724
+ background-color: var(--color-blue);
725
+ color: #fff;
726
+ border: none;
727
+ border-radius: 50%;
728
+ width: 50px;
729
+ height: 50px;
730
+ cursor: pointer;
731
+ z-index: var(--z-index-modal) !important;
732
+ transition: all 0.3s ease;
733
+ }
734
+ .reservationSidebar_open-sidebar-button:hover {
735
+ background-color: var(--color-blue-hover-accent) !important;
736
+ }
737
+ .reservationSidebar_open-sidebar-button svg {
738
+ position: relative;
739
+ top: 2px;
740
+ }
741
+ @media screen and (max-width: 480px) {
742
+ .reservationSidebar_reservation-sidebar-component {
743
+ width: 100%;
744
+ }
745
+ }
746
+ .reservationSidebar_sidebar-section-personeel {
747
+ margin-bottom: 10px;
748
+ }
749
+
750
+ /* src/styles/newReservationAdmin.css */
751
+ .newReservationAdmin_account-manage-title {
752
+ text-align: center;
753
+ margin-bottom: 30px;
754
+ }
755
+ .newReservationAdmin_account-manage-container {
756
+ max-width: 800px;
757
+ margin: 0 auto;
758
+ }
759
+ .newReservationAdmin_account-manage-form {
760
+ display: flex;
761
+ flex-direction: column;
762
+ gap: 15px;
763
+ }
764
+ .newReservationAdmin_input-container {
765
+ position: relative;
766
+ }
767
+ .newReservationAdmin_input-icon {
768
+ position: absolute;
769
+ top: 50%;
770
+ left: 10px;
771
+ transform: translateY(-50%);
772
+ color: #6c757d;
773
+ pointer-events: none;
774
+ }
775
+ .newReservationAdmin_input-container input,
776
+ .newReservationAdmin_input-container textarea {
777
+ width: 100%;
778
+ padding: 10px 10px 10px 35px;
779
+ border: 1px solid #ccc;
780
+ border-radius: 5px;
781
+ font-size: 1rem;
782
+ transition: border-color 0.3s ease;
783
+ }
784
+ .newReservationAdmin_form-error {
785
+ color: #dc3545;
786
+ font-size: 0.9rem;
787
+ margin-top: 5px;
788
+ display: flex;
789
+ align-items: center;
790
+ gap: 5px;
791
+ }
792
+ .newReservationAdmin_account-manage__button {
793
+ padding: 12px;
794
+ background-color: var(--color-blue);
795
+ color: #fff;
796
+ border: none;
797
+ border-radius: 5px;
798
+ cursor: pointer;
799
+ font-size: 1.1rem;
800
+ display: flex;
801
+ align-items: center;
802
+ justify-content: center;
803
+ gap: 10px;
804
+ transition: background-color 0.3s ease;
805
+ }
package/dist/index.js CHANGED
@@ -9727,33 +9727,6 @@ var require_algorithm = __commonJS({
9727
9727
  };
9728
9728
  }
9729
9729
  });
9730
-
9731
- // #style-inject:#style-inject
9732
- function styleInject(css, { insertAt } = {}) {
9733
- if (!css || typeof document === "undefined") return;
9734
- const head = document.head || document.getElementsByTagName("head")[0];
9735
- const style = document.createElement("style");
9736
- style.type = "text/css";
9737
- if (insertAt === "top") {
9738
- if (head.firstChild) {
9739
- head.insertBefore(style, head.firstChild);
9740
- } else {
9741
- head.appendChild(style);
9742
- }
9743
- } else {
9744
- head.appendChild(style);
9745
- }
9746
- if (style.styleSheet) {
9747
- style.styleSheet.cssText = css;
9748
- } else {
9749
- style.appendChild(document.createTextNode(css));
9750
- }
9751
- }
9752
-
9753
- // src/components/ReservationStepOne/css/valueSelector.css
9754
- styleInject(".new-reservation-page .value-selector {\n display: flex;\n flex-direction: column;\n gap: 15px;\n margin-bottom: 20px;\n}\n.new-reservation-page .non-absolute {\n position: relative !important;\n}\n.new-reservation-page .non-absolute::before {\n background: none;\n}\n.new-reservation-page .predefined-values {\n display: flex;\n gap: 10px;\n}\n.new-reservation-page .predefined-value-button {\n flex: 1;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: var(--border-radius);\n background-color: var(--color-white);\n cursor: pointer;\n font-size: 1rem;\n transition: background-color 0.3s ease;\n}\n.new-reservation-page .predefined-value-button.active,\n.new-reservation-page .predefined-value-button:hover {\n background-color: var(--color-blue);\n color: var(--color-white);\n}\n.new-reservation-page .slider-container {\n display: flex;\n align-items: center;\n gap: 15px;\n}\n.new-reservation-page .slider {\n flex: 1;\n appearance: none;\n -webkit-appearance: none;\n height: 5px;\n background: #ddd;\n border-radius: 5px;\n outline: none;\n}\n.new-reservation-page .slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 20px;\n height: 20px;\n background: var(--color-blue);\n cursor: pointer;\n border-radius: 50%;\n}\n.new-reservation-page .value-input {\n width: 80px;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: var(--border-radius);\n font-size: 1rem;\n}\n");
9755
-
9756
- // src/components/ReservationStepOne/ValueSelector.js
9757
9730
  var ValueSelectorGuests = ({ setGuests, value, onChange }) => {
9758
9731
  const predefinedValues = [1, 2, 3, "4+"];
9759
9732
  const [selectedValue, setSelectedValue] = React9.useState(value || "");
@@ -9841,9 +9814,6 @@ var isWeekInPast = (weekStartDate) => {
9841
9814
  };
9842
9815
  var isSameDay = (date1, date2) => date1.isSame(date2, "day");
9843
9816
 
9844
- // src/components/ReservationStepOne/css/calendar.css
9845
- styleInject(".new-reservation-page .calendar-container {\n position: relative;\n width: 100%;\n}\n.new-reservation-page .calendar-container .calendar-display {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 10px;\n background-color: #fff;\n border: #ccc 1px solid;\n cursor: pointer;\n user-select: none;\n text-align: left;\n border-radius: 5px;\n}\n.new-reservation-page .calendar-container .calendar-display span:first-child {\n flex-grow: 1;\n}\n.new-reservation-page .calendar-container .calendar {\n position: absolute;\n z-index: 1000;\n width: 100%;\n background-color: rgba(255, 255, 255, 1);\n border: 1px solid #ccc;\n margin-top: 5px;\n padding: 10px;\n border-radius: 10px;\n animation: fadeInCalendar 0.3s ease-in-out;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n@keyframes fadeInCalendar {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n.new-reservation-page .calendar-container .availability-hold-btn {\n font-size: 10px;\n}\n.new-reservation-page .calendar-container .calendar-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 10px;\n gap: 8px;\n flex-wrap: wrap;\n}\n.new-reservation-page .calendar-container .calendar-header button {\n background-color: transparent;\n border: none;\n cursor: pointer;\n font-size: 18px;\n}\n.new-reservation-page .calendar-container .calendar-header span {\n font-size: 15px;\n color: gray;\n font-weight: 500;\n}\n.new-reservation-page .calendar-container .calendar-weeks-wrapper {\n overflow: hidden;\n position: relative;\n width: 100%;\n}\n.new-reservation-page .calendar-container .calendar-table {\n width: 100%;\n border-collapse: collapse;\n}\n.new-reservation-page .calendar-container .calendar-table th,\n.new-reservation-page .calendar-container .calendar-table td {\n width: 14.28%;\n text-align: center;\n padding: 5px;\n}\n.calendar-container .calendar-table th {\n color: #666;\n font-weight: normal;\n padding-bottom: 10px;\n}\n.new-reservation-page .calendar-container .calendar-table td {\n vertical-align: middle;\n cursor: pointer;\n border: none;\n opacity: 1;\n position: relative;\n}\n.new-reservation-page .calendar-container .calendar-table td.empty-day {\n cursor: default;\n}\n.new-reservation-page .calendar-container .calendar-table td:hover .day-square.available {\n transform: scale(1.05);\n}\n.new-reservation-page .calendar-container .day-square {\n position: relative;\n width: 38px;\n height: 38px;\n border-radius: 4px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n transition: all 0.2s ease;\n font-size: 16px;\n margin: 0 auto;\n}\n.new-reservation-page .calendar-container .day-number {\n line-height: 1;\n z-index: 2;\n}\n.new-reservation-page .calendar-container .available .day-square {\n background-color: #ccffcc;\n color: #006600;\n}\n.new-reservation-page .calendar-container .available:hover .day-square {\n background-color: #b3ffb3;\n}\n.new-reservation-page .calendar-container .available:active .day-square {\n background-color: #99ff99;\n}\n.new-reservation-page .calendar-container .unavailable .day-square {\n background-color: rgba(139, 0, 0, 0.13);\n color: darkred;\n}\n.new-reservation-page .calendar-container .gray-out .day-square {\n background-color: #e0e0e0;\n color: #999;\n cursor: not-allowed;\n}\n.new-reservation-page .calendar-container .selected .day-square {\n background-color: #006600;\n color: #ccffcc;\n}\n.new-reservation-page .calendar-container .calendar-table td.unavailable,\n.new-reservation-page .calendar-container .calendar-table td.gray-out {\n cursor: not-allowed;\n}\n.new-reservation-page .calendar-container .calendar-table td.unavailable:hover .day-square,\n.new-reservation-page .calendar-container .calendar-table td.gray-out:hover .day-square {\n transform: none;\n}\n.new-reservation-page .calendar-container .calendar-table td {\n border: none;\n}\n.new-reservation-page .calendar-container .arrow {\n margin-left: auto;\n color: gray;\n display: flex;\n align-items: center;\n}\n.new-reservation-page .calendar-container .available .availability-badge {\n background: #38a169;\n}\n.new-reservation-page .calendar-container .selected .availability-badge {\n background: #2d3748;\n}\n@media screen and (max-width: 900px) {\n .calendar-container .day-square {\n width: 35px !important;\n height: 35px !important;\n font-size: 15px !important;\n }\n .calendar-container .calendar-header span {\n font-size: 12px;\n }\n .new-reservation-page .calendar-container .availability-toggle-btn {\n padding: 5px 8px;\n font-size: 11px;\n }\n}\n");
9846
-
9847
9817
  // src/components/ReservationStepOne/Calendar.js
9848
9818
  var import_algorithm = __toESM(require_algorithm());
9849
9819
 
@@ -10482,11 +10452,6 @@ var DateSelector = ({
10482
10452
  ));
10483
10453
  };
10484
10454
  var DateSelector_default = DateSelector;
10485
-
10486
- // src/components/ReservationStepOne/css/timeSelector.css
10487
- styleInject(".new-reservation-page .time-selector-container {\n position: relative;\n}\n.new-reservation-page .time-display {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 10px;\n background-color: #fff;\n border: #ccc 1px solid;\n cursor: pointer;\n user-select: none;\n text-align: left;\n border-radius: 5px;\n}\n.new-reservation-page .time-display span:first-child {\n flex-grow: 1;\n}\n.new-reservation-page .time-selector {\n position: absolute;\n z-index: 1000;\n width: 100%;\n max-height: 300px;\n overflow-y: auto;\n background-color: rgba(255, 255, 255, 1);\n border: 1px solid #ccc;\n margin-top: 5px;\n padding: 10px;\n border-radius: 10px;\n animation: fadeInTimeSelector 0.3s ease-in-out;\n top: 75px;\n}\n@keyframes fadeInTimeSelector {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n.new-reservation-page .time-period {\n margin-bottom: 15px;\n}\n.new-reservation-page .time-period-label {\n font-weight: bold;\n margin-bottom: 5px;\n}\n.new-reservation-page .time-options {\n display: flex;\n flex-wrap: wrap;\n gap: 5px;\n}\n.new-reservation-page .time-option {\n padding: 8px 12px;\n background-color: #ccffcc;\n color: #006600;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.2s ease;\n}\n.new-reservation-page .time-option:hover {\n background-color: #b3ffb3;\n}\n.new-reservation-page .time-option.selected {\n background-color: #006600;\n color: #ccffcc;\n}\n.new-reservation-page .info-text {\n color: #666;\n font-style: italic;\n}\n.new-reservation-page .arrow {\n margin-left: auto;\n color: gray;\n display: flex;\n align-items: center;\n}\n@media screen and (max-width: 480px) {\n .new-reservation-page .time-option {\n padding: 6px 10px;\n font-size: 14px;\n }\n}\n");
10488
-
10489
- // src/components/ReservationStepOne/TimeSelector.js
10490
10455
  var import_moment_timezone4 = __toESM(require_moment_timezone2());
10491
10456
  var import_algorithm2 = __toESM(require_algorithm());
10492
10457
  var TimeSelector = React9.memo(({
@@ -10700,11 +10665,6 @@ var TimeSelector = React9.memo(({
10700
10665
  });
10701
10666
  TimeSelector.displayName = "TimeSelector";
10702
10667
  var TimeSelector_default = TimeSelector;
10703
-
10704
- // src/components/ReservationStepOne/css/tableSelector.css
10705
- styleInject(".new-reservation-page .table-selector-container {\n margin-top: 15px;\n padding: 10px;\n border: 1px solid #eee;\n border-radius: 4px;\n background-color: #f9f9f9;\n}\n.new-reservation-page .table-selector-label {\n display: block;\n margin-bottom: 10px;\n font-weight: bold;\n color: #333;\n font-size: 0.95rem;\n}\n.new-reservation-page .table-options {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n}\n.new-reservation-page .table-option {\n display: inline-block;\n margin-right: 15px;\n margin-bottom: 5px;\n padding: 5px 8px;\n border: 1px solid #ccc;\n border-radius: 4px;\n background-color: #fff;\n transition: background-color 0.2s ease;\n}\n.new-reservation-page .table-option label {\n display: flex;\n align-items: center;\n cursor: pointer;\n font-size: 0.9rem;\n color: #555;\n}\n.new-reservation-page .table-option input[type=checkbox] {\n margin-right: 8px;\n cursor: pointer;\n accent-color: var(--primary-color, #006600);\n}\n.new-reservation-page .table-option:has(input[type=checkbox]:checked) {\n background-color: #e0f2e0;\n border-color: #006600;\n}\n.new-reservation-page .table-option:hover {\n background-color: #f0f0f0;\n}\n.new-reservation-page .info-text {\n margin-top: 10px;\n font-size: 0.85rem;\n color: #666;\n}\n.new-reservation-page .selected-tables-info {\n margin-top: 10px;\n font-style: italic;\n}\n.new-reservation-page .info-text.loading-tables {\n font-style: italic;\n color: #006600;\n}\n");
10706
-
10707
- // src/components/ReservationStepOne/TableSelector.js
10708
10668
  var TableSelector = ({
10709
10669
  availableTables = [],
10710
10670
  isFetching = false,
@@ -10783,9 +10743,6 @@ var TableSelector = ({
10783
10743
  };
10784
10744
  var TableSelector_default = TableSelector;
10785
10745
 
10786
- // src/components/ReservationStepOne/css/reservationMode.css
10787
- styleInject(".new-reservation-page .form-row .field-label {\n display: block;\n margin-bottom: 6px;\n font-weight: 600;\n}\n.new-reservation-page .form-row .reservation-mode-buttons {\n margin-top: 0;\n}\n.new-reservation-page .reservation-mode-buttons {\n display: flex;\n gap: 10px;\n margin-top: 10px;\n}\n.new-reservation-page .reservation-mode-button {\n flex: 1;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: var(--border-radius);\n background-color: var(--color-white);\n cursor: pointer;\n font-size: 1rem;\n transition: background-color 0.3s ease, color 0.3s ease;\n}\n.new-reservation-page .reservation-mode-button.active,\n.new-reservation-page .reservation-mode-button:hover {\n background-color: var(--color-blue);\n color: var(--color-white);\n}\n.new-reservation-page .reservation-modes-container {\n display: flex;\n flex-wrap: wrap;\n margin: 0 -5px;\n width: 100%;\n}\n.new-reservation-page .reservation-mode-button {\n flex: 0 0 calc(50% - 10px);\n margin: 5px;\n padding: 10px;\n box-sizing: border-box;\n text-align: center;\n border: 1px solid #ccc;\n background: #f7f7f7;\n cursor: pointer;\n}\n.new-reservation-page .reservation-mode-button:nth-child(3) {\n flex: 0 0 100%;\n}\n.new-reservation-page .reservation-modes-container {\n display: flex;\n flex-wrap: wrap;\n margin: 0 -5px;\n width: 100%;\n}\n.new-reservation-page .reservation-mode-button {\n flex: 0 0 calc(50% - 10px);\n margin: 5px;\n padding: 10px;\n box-sizing: border-box;\n text-align: center;\n border: 1px solid #ccc;\n background: #f7f7f7;\n cursor: pointer;\n}\n.new-reservation-page .reservation-mode-button.active,\n.new-reservation-page .reservation-mode-button:hover {\n background-color: var(--color-blue);\n color: var(--color-white);\n}\n.new-reservation-page .unlimited-mode-warning {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n margin: 15px 0;\n padding: 12px 15px;\n background-color: #fff3cd;\n border: 1px solid #ffeaa7;\n border-radius: var(--border-radius, 4px);\n border-left: 4px solid #e67e22;\n font-size: 0.9rem;\n line-height: 1.4;\n}\n.new-reservation-page .unlimited-mode-warning .warning-icon {\n color: #e67e22;\n font-size: 1.1rem;\n margin-top: 2px;\n flex-shrink: 0;\n}\n.new-reservation-page .unlimited-mode-warning .warning-text {\n color: #856404;\n margin: 0;\n}\n@media screen and (max-width: 480px) {\n .new-reservation-page .unlimited-mode-warning {\n margin: 10px 0;\n padding: 10px 12px;\n font-size: 0.85rem;\n }\n .new-reservation-page .unlimited-mode-warning .warning-icon {\n font-size: 1rem;\n }\n}\n.new-reservation-page .reservation-sidebar-component {\n position: fixed;\n top: 0;\n right: -400px;\n width: 400px;\n height: 100%;\n background-color: #fff;\n box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);\n z-index: var(--z-index-sidebar-reservation);\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n transition: right 0.3s ease-in-out;\n}\n.new-reservation-page .admin-title {\n text-align: center;\n margin-bottom: 30px;\n}\n.new-reservation-page .reservation-sidebar-component.open {\n right: 0;\n}\n.new-reservation-page .reservation-sidebar-content {\n padding: 20px;\n padding-top: 60px;\n}\n.new-reservation-page .close-sidebar-button {\n position: absolute;\n top: 10px;\n left: 10px;\n background-color: transparent;\n border: none;\n cursor: pointer;\n}\n.new-reservation-page .close-sidebar-button svg {\n color: #000;\n}\n.new-reservation-page .sidebar-section-one,\n.new-reservation-page .sidebar-section-two {\n margin-bottom: 20px;\n}\n.new-reservation-page .reservation-footer {\n margin-top: auto;\n}\n.new-reservation-page .store-reservation-button {\n width: 100%;\n padding: 12px;\n background-color: var(--color-blue);\n color: #fff;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n font-size: 1.1rem;\n}\n.new-reservation-page .open-sidebar-button {\n position: fixed;\n bottom: 20px;\n right: 20px;\n background-color: var(--color-blue);\n color: #fff;\n border: none;\n border-radius: 50%;\n width: 50px;\n height: 50px;\n cursor: pointer;\n z-index: var(--z-index-modal) !important;\n transition: all 0.3s ease;\n}\n.new-reservation-page .open-sidebar-button:hover {\n background-color: var(--color-blue-hover-accent) !important;\n}\n.new-reservation-page .open-sidebar-button svg {\n position: relative;\n top: 2px;\n}\n@media screen and (max-width: 480px) {\n .new-reservation-page .reservation-sidebar-component {\n width: 100%;\n }\n}\n.new-reservation-page .sidebar-section-personeel {\n margin-bottom: 10px;\n}\n");
10788
-
10789
10746
  // src/components/ReservationStepOne/index.js
10790
10747
  var import_moment_timezone5 = __toESM(require_moment_timezone2());
10791
10748
  var useApi = () => {
@@ -11263,9 +11220,6 @@ var translations_default2 = {
11263
11220
  }
11264
11221
  };
11265
11222
 
11266
- // src/components/FormField/formField.css
11267
- styleInject(".new-reservation-page .form-group .magic-tooltip {\n transition: transform 0.2s ease;\n transform-origin: bottom right;\n}\n.new-reservation-page .form-group .magic-tooltip:hover {\n transform: scale(1.05);\n}\n");
11268
-
11269
11223
  // src/components/FormField/FormField.js
11270
11224
  var FormField = ({
11271
11225
  label,
@@ -11561,9 +11515,6 @@ var translations_default3 = {
11561
11515
  }
11562
11516
  };
11563
11517
 
11564
- // src/components/ReservationStepTwo/reservationStepTwo.css
11565
- styleInject(".new-reservation-page .name-fields {\n display: flex;\n gap: 20px;\n}\n.input-container .form-control {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 10px;\n background-color: #fff;\n border: #ccc 1px solid;\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n text-align: left;\n border-radius: 5px;\n font-size: 16px;\n}\n");
11566
-
11567
11518
  // src/components/ReservationStepTwo/ReservationStepTwo.js
11568
11519
  var ReservationStepTwo = React9__default.default.memo(({
11569
11520
  formData,
@@ -11863,9 +11814,6 @@ var translations_default4 = {
11863
11814
  }
11864
11815
  };
11865
11816
 
11866
- // src/components/ReservationSummary/reservationSummary.css
11867
- styleInject(".new-reservation-page .reservation-sidebar-component .reservation-summary .modal-title {\n margin-top: 0;\n margin-bottom: 20px;\n}\n.new-reservation-page .reservation-sidebar-component .reservation-summary .reservation-details {\n list-style-type: none;\n padding: 0;\n margin: 0 0 20px 0;\n width: 100%;\n}\n.new-reservation-page .reservation-sidebar-component .reservation-summary .reservation-details li {\n margin-bottom: 10px;\n font-size: 15px;\n align-items: left;\n text-align: left;\n}\n.new-reservation-page .reservation-sidebar-component .reservation-summary .reservation-details li strong {\n font-weight: bold;\n}\n.new-reservation-page .reservation-sidebar-component .reservation-summary {\n align-items: left;\n}\n");
11868
-
11869
11817
  // src/components/ReservationSummary/ReservationSummary.js
11870
11818
  var ReservationSummary = ({
11871
11819
  formData,
@@ -11910,9 +11858,6 @@ var translations_default5 = {
11910
11858
  }
11911
11859
  };
11912
11860
 
11913
- // src/components/GiftcardSelection/giftcardSelection.css
11914
- styleInject(".new-reservation-page .giftcard-selection {\n margin-bottom: 20px;\n}\n.new-reservation-page .giftcard-options {\n display: flex;\n gap: 20px;\n margin: 10px 0;\n}\n.new-reservation-page .giftcard-option {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n}\n.new-reservation-page .form-label {\n font-weight: 500;\n margin-bottom: 8px;\n display: block;\n}\n.new-reservation-page .giftcard-option input[type=radio] {\n margin: 0;\n cursor: pointer;\n}\n.new-reservation-page .giftcard-option label {\n cursor: pointer;\n}\n");
11915
-
11916
11861
  // src/components/GiftcardSelection/GiftcardSelection.js
11917
11862
  var GiftcardSelection = ({
11918
11863
  restaurantData,
@@ -11994,9 +11939,6 @@ var translations_default6 = {
11994
11939
  }
11995
11940
  };
11996
11941
 
11997
- // src/components/ZitplaatsSelection/zitplaatsSelection.css
11998
- styleInject(".new-reservation-page .zitplaats-selection {\n margin-bottom: 15px;\n}\n.new-reservation-page .zitplaats-selection select {\n width: 100%;\n padding: 10px;\n border-radius: 4px;\n border: 1px solid #ccc;\n background-color: white;\n}\n");
11999
-
12000
11942
  // src/components/ZitplaatsSelection/ZitplaatsSelection.js
12001
11943
  var ZitplaatsSelection = ({
12002
11944
  restaurantData,
@@ -12073,9 +12015,6 @@ var translationsReservationSidebar_default = {
12073
12015
  }
12074
12016
  };
12075
12017
 
12076
- // src/styles/reservationSidebar.css
12077
- styleInject(".reservation-sidebar-component {\n position: fixed;\n top: 0;\n right: -400px;\n width: 400px;\n height: 100%;\n background-color: #fff;\n box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);\n z-index: var(--z-index-sidebar-reservation);\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n transition: right 0.3s ease-in-out;\n}\n.admin-title {\n text-align: center;\n margin-bottom: 30px;\n}\n.reservation-sidebar-component.open {\n right: 0;\n}\n.reservation-sidebar-content {\n padding: 20px;\n padding-top: 60px;\n}\n.close-sidebar-button {\n position: absolute;\n top: 10px;\n left: 10px;\n background-color: transparent;\n border: none;\n cursor: pointer;\n}\n.close-sidebar-button svg {\n color: #000;\n}\n.sidebar-section-one,\n.sidebar-section-two {\n margin-bottom: 20px;\n}\n.reservation-footer {\n margin-top: auto;\n}\n.store-reservation-button {\n width: 100%;\n padding: 12px;\n background-color: var(--color-blue);\n color: #fff;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n font-size: 1.1rem;\n}\n.open-sidebar-button {\n position: fixed;\n bottom: 20px;\n right: 20px;\n background-color: var(--color-blue);\n color: #fff;\n border: none;\n border-radius: 50%;\n width: 50px;\n height: 50px;\n cursor: pointer;\n z-index: var(--z-index-modal) !important;\n transition: all 0.3s ease;\n}\n.open-sidebar-button:hover {\n background-color: var(--color-blue-hover-accent) !important;\n}\n.open-sidebar-button svg {\n position: relative;\n top: 2px;\n}\n@media screen and (max-width: 480px) {\n .reservation-sidebar-component {\n width: 100%;\n }\n}\n.sidebar-section-personeel {\n margin-bottom: 10px;\n}\n");
12078
-
12079
12018
  // src/ReservationSidebar.js
12080
12019
  var ReservationSidebar = React9.memo(({
12081
12020
  isOpen,
@@ -12250,9 +12189,6 @@ var ReservationSidebar = React9.memo(({
12250
12189
  });
12251
12190
  ReservationSidebar.displayName = "ReservationSidebar";
12252
12191
  var ReservationSidebar_default = ReservationSidebar;
12253
-
12254
- // src/styles/newReservationAdmin.css
12255
- styleInject(".account-manage-title {\n text-align: center;\n margin-bottom: 30px;\n}\n.account-manage-container {\n max-width: 800px;\n margin: 0 auto;\n}\n.account-manage-form {\n display: flex;\n flex-direction: column;\n gap: 15px;\n}\n.input-container {\n position: relative;\n}\n.input-icon {\n position: absolute;\n top: 50%;\n left: 10px;\n transform: translateY(-50%);\n color: #6c757d;\n pointer-events: none;\n}\n.input-container input,\n.input-container textarea {\n width: 100%;\n padding: 10px 10px 10px 35px;\n border: 1px solid #ccc;\n border-radius: 5px;\n font-size: 1rem;\n transition: border-color 0.3s ease;\n}\n.form-error {\n color: #dc3545;\n font-size: 0.9rem;\n margin-top: 5px;\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.account-manage__button {\n padding: 12px;\n background-color: var(--color-blue);\n color: #fff;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n font-size: 1.1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n transition: background-color 0.3s ease;\n}\n");
12256
12192
  /*! Bundled license information:
12257
12193
 
12258
12194
  moment/moment.js:
package/dist/index.mjs CHANGED
@@ -9719,33 +9719,6 @@ var require_algorithm = __commonJS({
9719
9719
  };
9720
9720
  }
9721
9721
  });
9722
-
9723
- // #style-inject:#style-inject
9724
- function styleInject(css, { insertAt } = {}) {
9725
- if (!css || typeof document === "undefined") return;
9726
- const head = document.head || document.getElementsByTagName("head")[0];
9727
- const style = document.createElement("style");
9728
- style.type = "text/css";
9729
- if (insertAt === "top") {
9730
- if (head.firstChild) {
9731
- head.insertBefore(style, head.firstChild);
9732
- } else {
9733
- head.appendChild(style);
9734
- }
9735
- } else {
9736
- head.appendChild(style);
9737
- }
9738
- if (style.styleSheet) {
9739
- style.styleSheet.cssText = css;
9740
- } else {
9741
- style.appendChild(document.createTextNode(css));
9742
- }
9743
- }
9744
-
9745
- // src/components/ReservationStepOne/css/valueSelector.css
9746
- styleInject(".new-reservation-page .value-selector {\n display: flex;\n flex-direction: column;\n gap: 15px;\n margin-bottom: 20px;\n}\n.new-reservation-page .non-absolute {\n position: relative !important;\n}\n.new-reservation-page .non-absolute::before {\n background: none;\n}\n.new-reservation-page .predefined-values {\n display: flex;\n gap: 10px;\n}\n.new-reservation-page .predefined-value-button {\n flex: 1;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: var(--border-radius);\n background-color: var(--color-white);\n cursor: pointer;\n font-size: 1rem;\n transition: background-color 0.3s ease;\n}\n.new-reservation-page .predefined-value-button.active,\n.new-reservation-page .predefined-value-button:hover {\n background-color: var(--color-blue);\n color: var(--color-white);\n}\n.new-reservation-page .slider-container {\n display: flex;\n align-items: center;\n gap: 15px;\n}\n.new-reservation-page .slider {\n flex: 1;\n appearance: none;\n -webkit-appearance: none;\n height: 5px;\n background: #ddd;\n border-radius: 5px;\n outline: none;\n}\n.new-reservation-page .slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 20px;\n height: 20px;\n background: var(--color-blue);\n cursor: pointer;\n border-radius: 50%;\n}\n.new-reservation-page .value-input {\n width: 80px;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: var(--border-radius);\n font-size: 1rem;\n}\n");
9747
-
9748
- // src/components/ReservationStepOne/ValueSelector.js
9749
9722
  var ValueSelectorGuests = ({ setGuests, value, onChange }) => {
9750
9723
  const predefinedValues = [1, 2, 3, "4+"];
9751
9724
  const [selectedValue, setSelectedValue] = useState(value || "");
@@ -9833,9 +9806,6 @@ var isWeekInPast = (weekStartDate) => {
9833
9806
  };
9834
9807
  var isSameDay = (date1, date2) => date1.isSame(date2, "day");
9835
9808
 
9836
- // src/components/ReservationStepOne/css/calendar.css
9837
- styleInject(".new-reservation-page .calendar-container {\n position: relative;\n width: 100%;\n}\n.new-reservation-page .calendar-container .calendar-display {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 10px;\n background-color: #fff;\n border: #ccc 1px solid;\n cursor: pointer;\n user-select: none;\n text-align: left;\n border-radius: 5px;\n}\n.new-reservation-page .calendar-container .calendar-display span:first-child {\n flex-grow: 1;\n}\n.new-reservation-page .calendar-container .calendar {\n position: absolute;\n z-index: 1000;\n width: 100%;\n background-color: rgba(255, 255, 255, 1);\n border: 1px solid #ccc;\n margin-top: 5px;\n padding: 10px;\n border-radius: 10px;\n animation: fadeInCalendar 0.3s ease-in-out;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n@keyframes fadeInCalendar {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n.new-reservation-page .calendar-container .availability-hold-btn {\n font-size: 10px;\n}\n.new-reservation-page .calendar-container .calendar-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 10px;\n gap: 8px;\n flex-wrap: wrap;\n}\n.new-reservation-page .calendar-container .calendar-header button {\n background-color: transparent;\n border: none;\n cursor: pointer;\n font-size: 18px;\n}\n.new-reservation-page .calendar-container .calendar-header span {\n font-size: 15px;\n color: gray;\n font-weight: 500;\n}\n.new-reservation-page .calendar-container .calendar-weeks-wrapper {\n overflow: hidden;\n position: relative;\n width: 100%;\n}\n.new-reservation-page .calendar-container .calendar-table {\n width: 100%;\n border-collapse: collapse;\n}\n.new-reservation-page .calendar-container .calendar-table th,\n.new-reservation-page .calendar-container .calendar-table td {\n width: 14.28%;\n text-align: center;\n padding: 5px;\n}\n.calendar-container .calendar-table th {\n color: #666;\n font-weight: normal;\n padding-bottom: 10px;\n}\n.new-reservation-page .calendar-container .calendar-table td {\n vertical-align: middle;\n cursor: pointer;\n border: none;\n opacity: 1;\n position: relative;\n}\n.new-reservation-page .calendar-container .calendar-table td.empty-day {\n cursor: default;\n}\n.new-reservation-page .calendar-container .calendar-table td:hover .day-square.available {\n transform: scale(1.05);\n}\n.new-reservation-page .calendar-container .day-square {\n position: relative;\n width: 38px;\n height: 38px;\n border-radius: 4px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n transition: all 0.2s ease;\n font-size: 16px;\n margin: 0 auto;\n}\n.new-reservation-page .calendar-container .day-number {\n line-height: 1;\n z-index: 2;\n}\n.new-reservation-page .calendar-container .available .day-square {\n background-color: #ccffcc;\n color: #006600;\n}\n.new-reservation-page .calendar-container .available:hover .day-square {\n background-color: #b3ffb3;\n}\n.new-reservation-page .calendar-container .available:active .day-square {\n background-color: #99ff99;\n}\n.new-reservation-page .calendar-container .unavailable .day-square {\n background-color: rgba(139, 0, 0, 0.13);\n color: darkred;\n}\n.new-reservation-page .calendar-container .gray-out .day-square {\n background-color: #e0e0e0;\n color: #999;\n cursor: not-allowed;\n}\n.new-reservation-page .calendar-container .selected .day-square {\n background-color: #006600;\n color: #ccffcc;\n}\n.new-reservation-page .calendar-container .calendar-table td.unavailable,\n.new-reservation-page .calendar-container .calendar-table td.gray-out {\n cursor: not-allowed;\n}\n.new-reservation-page .calendar-container .calendar-table td.unavailable:hover .day-square,\n.new-reservation-page .calendar-container .calendar-table td.gray-out:hover .day-square {\n transform: none;\n}\n.new-reservation-page .calendar-container .calendar-table td {\n border: none;\n}\n.new-reservation-page .calendar-container .arrow {\n margin-left: auto;\n color: gray;\n display: flex;\n align-items: center;\n}\n.new-reservation-page .calendar-container .available .availability-badge {\n background: #38a169;\n}\n.new-reservation-page .calendar-container .selected .availability-badge {\n background: #2d3748;\n}\n@media screen and (max-width: 900px) {\n .calendar-container .day-square {\n width: 35px !important;\n height: 35px !important;\n font-size: 15px !important;\n }\n .calendar-container .calendar-header span {\n font-size: 12px;\n }\n .new-reservation-page .calendar-container .availability-toggle-btn {\n padding: 5px 8px;\n font-size: 11px;\n }\n}\n");
9838
-
9839
9809
  // src/components/ReservationStepOne/Calendar.js
9840
9810
  var import_algorithm = __toESM(require_algorithm());
9841
9811
 
@@ -10474,11 +10444,6 @@ var DateSelector = ({
10474
10444
  ));
10475
10445
  };
10476
10446
  var DateSelector_default = DateSelector;
10477
-
10478
- // src/components/ReservationStepOne/css/timeSelector.css
10479
- styleInject(".new-reservation-page .time-selector-container {\n position: relative;\n}\n.new-reservation-page .time-display {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 10px;\n background-color: #fff;\n border: #ccc 1px solid;\n cursor: pointer;\n user-select: none;\n text-align: left;\n border-radius: 5px;\n}\n.new-reservation-page .time-display span:first-child {\n flex-grow: 1;\n}\n.new-reservation-page .time-selector {\n position: absolute;\n z-index: 1000;\n width: 100%;\n max-height: 300px;\n overflow-y: auto;\n background-color: rgba(255, 255, 255, 1);\n border: 1px solid #ccc;\n margin-top: 5px;\n padding: 10px;\n border-radius: 10px;\n animation: fadeInTimeSelector 0.3s ease-in-out;\n top: 75px;\n}\n@keyframes fadeInTimeSelector {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n.new-reservation-page .time-period {\n margin-bottom: 15px;\n}\n.new-reservation-page .time-period-label {\n font-weight: bold;\n margin-bottom: 5px;\n}\n.new-reservation-page .time-options {\n display: flex;\n flex-wrap: wrap;\n gap: 5px;\n}\n.new-reservation-page .time-option {\n padding: 8px 12px;\n background-color: #ccffcc;\n color: #006600;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.2s ease;\n}\n.new-reservation-page .time-option:hover {\n background-color: #b3ffb3;\n}\n.new-reservation-page .time-option.selected {\n background-color: #006600;\n color: #ccffcc;\n}\n.new-reservation-page .info-text {\n color: #666;\n font-style: italic;\n}\n.new-reservation-page .arrow {\n margin-left: auto;\n color: gray;\n display: flex;\n align-items: center;\n}\n@media screen and (max-width: 480px) {\n .new-reservation-page .time-option {\n padding: 6px 10px;\n font-size: 14px;\n }\n}\n");
10480
-
10481
- // src/components/ReservationStepOne/TimeSelector.js
10482
10447
  var import_moment_timezone4 = __toESM(require_moment_timezone2());
10483
10448
  var import_algorithm2 = __toESM(require_algorithm());
10484
10449
  var TimeSelector = memo(({
@@ -10692,11 +10657,6 @@ var TimeSelector = memo(({
10692
10657
  });
10693
10658
  TimeSelector.displayName = "TimeSelector";
10694
10659
  var TimeSelector_default = TimeSelector;
10695
-
10696
- // src/components/ReservationStepOne/css/tableSelector.css
10697
- styleInject(".new-reservation-page .table-selector-container {\n margin-top: 15px;\n padding: 10px;\n border: 1px solid #eee;\n border-radius: 4px;\n background-color: #f9f9f9;\n}\n.new-reservation-page .table-selector-label {\n display: block;\n margin-bottom: 10px;\n font-weight: bold;\n color: #333;\n font-size: 0.95rem;\n}\n.new-reservation-page .table-options {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n}\n.new-reservation-page .table-option {\n display: inline-block;\n margin-right: 15px;\n margin-bottom: 5px;\n padding: 5px 8px;\n border: 1px solid #ccc;\n border-radius: 4px;\n background-color: #fff;\n transition: background-color 0.2s ease;\n}\n.new-reservation-page .table-option label {\n display: flex;\n align-items: center;\n cursor: pointer;\n font-size: 0.9rem;\n color: #555;\n}\n.new-reservation-page .table-option input[type=checkbox] {\n margin-right: 8px;\n cursor: pointer;\n accent-color: var(--primary-color, #006600);\n}\n.new-reservation-page .table-option:has(input[type=checkbox]:checked) {\n background-color: #e0f2e0;\n border-color: #006600;\n}\n.new-reservation-page .table-option:hover {\n background-color: #f0f0f0;\n}\n.new-reservation-page .info-text {\n margin-top: 10px;\n font-size: 0.85rem;\n color: #666;\n}\n.new-reservation-page .selected-tables-info {\n margin-top: 10px;\n font-style: italic;\n}\n.new-reservation-page .info-text.loading-tables {\n font-style: italic;\n color: #006600;\n}\n");
10698
-
10699
- // src/components/ReservationStepOne/TableSelector.js
10700
10660
  var TableSelector = ({
10701
10661
  availableTables = [],
10702
10662
  isFetching = false,
@@ -10775,9 +10735,6 @@ var TableSelector = ({
10775
10735
  };
10776
10736
  var TableSelector_default = TableSelector;
10777
10737
 
10778
- // src/components/ReservationStepOne/css/reservationMode.css
10779
- styleInject(".new-reservation-page .form-row .field-label {\n display: block;\n margin-bottom: 6px;\n font-weight: 600;\n}\n.new-reservation-page .form-row .reservation-mode-buttons {\n margin-top: 0;\n}\n.new-reservation-page .reservation-mode-buttons {\n display: flex;\n gap: 10px;\n margin-top: 10px;\n}\n.new-reservation-page .reservation-mode-button {\n flex: 1;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: var(--border-radius);\n background-color: var(--color-white);\n cursor: pointer;\n font-size: 1rem;\n transition: background-color 0.3s ease, color 0.3s ease;\n}\n.new-reservation-page .reservation-mode-button.active,\n.new-reservation-page .reservation-mode-button:hover {\n background-color: var(--color-blue);\n color: var(--color-white);\n}\n.new-reservation-page .reservation-modes-container {\n display: flex;\n flex-wrap: wrap;\n margin: 0 -5px;\n width: 100%;\n}\n.new-reservation-page .reservation-mode-button {\n flex: 0 0 calc(50% - 10px);\n margin: 5px;\n padding: 10px;\n box-sizing: border-box;\n text-align: center;\n border: 1px solid #ccc;\n background: #f7f7f7;\n cursor: pointer;\n}\n.new-reservation-page .reservation-mode-button:nth-child(3) {\n flex: 0 0 100%;\n}\n.new-reservation-page .reservation-modes-container {\n display: flex;\n flex-wrap: wrap;\n margin: 0 -5px;\n width: 100%;\n}\n.new-reservation-page .reservation-mode-button {\n flex: 0 0 calc(50% - 10px);\n margin: 5px;\n padding: 10px;\n box-sizing: border-box;\n text-align: center;\n border: 1px solid #ccc;\n background: #f7f7f7;\n cursor: pointer;\n}\n.new-reservation-page .reservation-mode-button.active,\n.new-reservation-page .reservation-mode-button:hover {\n background-color: var(--color-blue);\n color: var(--color-white);\n}\n.new-reservation-page .unlimited-mode-warning {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n margin: 15px 0;\n padding: 12px 15px;\n background-color: #fff3cd;\n border: 1px solid #ffeaa7;\n border-radius: var(--border-radius, 4px);\n border-left: 4px solid #e67e22;\n font-size: 0.9rem;\n line-height: 1.4;\n}\n.new-reservation-page .unlimited-mode-warning .warning-icon {\n color: #e67e22;\n font-size: 1.1rem;\n margin-top: 2px;\n flex-shrink: 0;\n}\n.new-reservation-page .unlimited-mode-warning .warning-text {\n color: #856404;\n margin: 0;\n}\n@media screen and (max-width: 480px) {\n .new-reservation-page .unlimited-mode-warning {\n margin: 10px 0;\n padding: 10px 12px;\n font-size: 0.85rem;\n }\n .new-reservation-page .unlimited-mode-warning .warning-icon {\n font-size: 1rem;\n }\n}\n.new-reservation-page .reservation-sidebar-component {\n position: fixed;\n top: 0;\n right: -400px;\n width: 400px;\n height: 100%;\n background-color: #fff;\n box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);\n z-index: var(--z-index-sidebar-reservation);\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n transition: right 0.3s ease-in-out;\n}\n.new-reservation-page .admin-title {\n text-align: center;\n margin-bottom: 30px;\n}\n.new-reservation-page .reservation-sidebar-component.open {\n right: 0;\n}\n.new-reservation-page .reservation-sidebar-content {\n padding: 20px;\n padding-top: 60px;\n}\n.new-reservation-page .close-sidebar-button {\n position: absolute;\n top: 10px;\n left: 10px;\n background-color: transparent;\n border: none;\n cursor: pointer;\n}\n.new-reservation-page .close-sidebar-button svg {\n color: #000;\n}\n.new-reservation-page .sidebar-section-one,\n.new-reservation-page .sidebar-section-two {\n margin-bottom: 20px;\n}\n.new-reservation-page .reservation-footer {\n margin-top: auto;\n}\n.new-reservation-page .store-reservation-button {\n width: 100%;\n padding: 12px;\n background-color: var(--color-blue);\n color: #fff;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n font-size: 1.1rem;\n}\n.new-reservation-page .open-sidebar-button {\n position: fixed;\n bottom: 20px;\n right: 20px;\n background-color: var(--color-blue);\n color: #fff;\n border: none;\n border-radius: 50%;\n width: 50px;\n height: 50px;\n cursor: pointer;\n z-index: var(--z-index-modal) !important;\n transition: all 0.3s ease;\n}\n.new-reservation-page .open-sidebar-button:hover {\n background-color: var(--color-blue-hover-accent) !important;\n}\n.new-reservation-page .open-sidebar-button svg {\n position: relative;\n top: 2px;\n}\n@media screen and (max-width: 480px) {\n .new-reservation-page .reservation-sidebar-component {\n width: 100%;\n }\n}\n.new-reservation-page .sidebar-section-personeel {\n margin-bottom: 10px;\n}\n");
10780
-
10781
10738
  // src/components/ReservationStepOne/index.js
10782
10739
  var import_moment_timezone5 = __toESM(require_moment_timezone2());
10783
10740
  var useApi = () => {
@@ -11255,9 +11212,6 @@ var translations_default2 = {
11255
11212
  }
11256
11213
  };
11257
11214
 
11258
- // src/components/FormField/formField.css
11259
- styleInject(".new-reservation-page .form-group .magic-tooltip {\n transition: transform 0.2s ease;\n transform-origin: bottom right;\n}\n.new-reservation-page .form-group .magic-tooltip:hover {\n transform: scale(1.05);\n}\n");
11260
-
11261
11215
  // src/components/FormField/FormField.js
11262
11216
  var FormField = ({
11263
11217
  label,
@@ -11553,9 +11507,6 @@ var translations_default3 = {
11553
11507
  }
11554
11508
  };
11555
11509
 
11556
- // src/components/ReservationStepTwo/reservationStepTwo.css
11557
- styleInject(".new-reservation-page .name-fields {\n display: flex;\n gap: 20px;\n}\n.input-container .form-control {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 10px;\n background-color: #fff;\n border: #ccc 1px solid;\n cursor: pointer;\n -webkit-user-select: none;\n user-select: none;\n text-align: left;\n border-radius: 5px;\n font-size: 16px;\n}\n");
11558
-
11559
11510
  // src/components/ReservationStepTwo/ReservationStepTwo.js
11560
11511
  var ReservationStepTwo = React9.memo(({
11561
11512
  formData,
@@ -11855,9 +11806,6 @@ var translations_default4 = {
11855
11806
  }
11856
11807
  };
11857
11808
 
11858
- // src/components/ReservationSummary/reservationSummary.css
11859
- styleInject(".new-reservation-page .reservation-sidebar-component .reservation-summary .modal-title {\n margin-top: 0;\n margin-bottom: 20px;\n}\n.new-reservation-page .reservation-sidebar-component .reservation-summary .reservation-details {\n list-style-type: none;\n padding: 0;\n margin: 0 0 20px 0;\n width: 100%;\n}\n.new-reservation-page .reservation-sidebar-component .reservation-summary .reservation-details li {\n margin-bottom: 10px;\n font-size: 15px;\n align-items: left;\n text-align: left;\n}\n.new-reservation-page .reservation-sidebar-component .reservation-summary .reservation-details li strong {\n font-weight: bold;\n}\n.new-reservation-page .reservation-sidebar-component .reservation-summary {\n align-items: left;\n}\n");
11860
-
11861
11809
  // src/components/ReservationSummary/ReservationSummary.js
11862
11810
  var ReservationSummary = ({
11863
11811
  formData,
@@ -11902,9 +11850,6 @@ var translations_default5 = {
11902
11850
  }
11903
11851
  };
11904
11852
 
11905
- // src/components/GiftcardSelection/giftcardSelection.css
11906
- styleInject(".new-reservation-page .giftcard-selection {\n margin-bottom: 20px;\n}\n.new-reservation-page .giftcard-options {\n display: flex;\n gap: 20px;\n margin: 10px 0;\n}\n.new-reservation-page .giftcard-option {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n}\n.new-reservation-page .form-label {\n font-weight: 500;\n margin-bottom: 8px;\n display: block;\n}\n.new-reservation-page .giftcard-option input[type=radio] {\n margin: 0;\n cursor: pointer;\n}\n.new-reservation-page .giftcard-option label {\n cursor: pointer;\n}\n");
11907
-
11908
11853
  // src/components/GiftcardSelection/GiftcardSelection.js
11909
11854
  var GiftcardSelection = ({
11910
11855
  restaurantData,
@@ -11986,9 +11931,6 @@ var translations_default6 = {
11986
11931
  }
11987
11932
  };
11988
11933
 
11989
- // src/components/ZitplaatsSelection/zitplaatsSelection.css
11990
- styleInject(".new-reservation-page .zitplaats-selection {\n margin-bottom: 15px;\n}\n.new-reservation-page .zitplaats-selection select {\n width: 100%;\n padding: 10px;\n border-radius: 4px;\n border: 1px solid #ccc;\n background-color: white;\n}\n");
11991
-
11992
11934
  // src/components/ZitplaatsSelection/ZitplaatsSelection.js
11993
11935
  var ZitplaatsSelection = ({
11994
11936
  restaurantData,
@@ -12065,9 +12007,6 @@ var translationsReservationSidebar_default = {
12065
12007
  }
12066
12008
  };
12067
12009
 
12068
- // src/styles/reservationSidebar.css
12069
- styleInject(".reservation-sidebar-component {\n position: fixed;\n top: 0;\n right: -400px;\n width: 400px;\n height: 100%;\n background-color: #fff;\n box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);\n z-index: var(--z-index-sidebar-reservation);\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n transition: right 0.3s ease-in-out;\n}\n.admin-title {\n text-align: center;\n margin-bottom: 30px;\n}\n.reservation-sidebar-component.open {\n right: 0;\n}\n.reservation-sidebar-content {\n padding: 20px;\n padding-top: 60px;\n}\n.close-sidebar-button {\n position: absolute;\n top: 10px;\n left: 10px;\n background-color: transparent;\n border: none;\n cursor: pointer;\n}\n.close-sidebar-button svg {\n color: #000;\n}\n.sidebar-section-one,\n.sidebar-section-two {\n margin-bottom: 20px;\n}\n.reservation-footer {\n margin-top: auto;\n}\n.store-reservation-button {\n width: 100%;\n padding: 12px;\n background-color: var(--color-blue);\n color: #fff;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n font-size: 1.1rem;\n}\n.open-sidebar-button {\n position: fixed;\n bottom: 20px;\n right: 20px;\n background-color: var(--color-blue);\n color: #fff;\n border: none;\n border-radius: 50%;\n width: 50px;\n height: 50px;\n cursor: pointer;\n z-index: var(--z-index-modal) !important;\n transition: all 0.3s ease;\n}\n.open-sidebar-button:hover {\n background-color: var(--color-blue-hover-accent) !important;\n}\n.open-sidebar-button svg {\n position: relative;\n top: 2px;\n}\n@media screen and (max-width: 480px) {\n .reservation-sidebar-component {\n width: 100%;\n }\n}\n.sidebar-section-personeel {\n margin-bottom: 10px;\n}\n");
12070
-
12071
12010
  // src/ReservationSidebar.js
12072
12011
  var ReservationSidebar = memo(({
12073
12012
  isOpen,
@@ -12242,9 +12181,6 @@ var ReservationSidebar = memo(({
12242
12181
  });
12243
12182
  ReservationSidebar.displayName = "ReservationSidebar";
12244
12183
  var ReservationSidebar_default = ReservationSidebar;
12245
-
12246
- // src/styles/newReservationAdmin.css
12247
- styleInject(".account-manage-title {\n text-align: center;\n margin-bottom: 30px;\n}\n.account-manage-container {\n max-width: 800px;\n margin: 0 auto;\n}\n.account-manage-form {\n display: flex;\n flex-direction: column;\n gap: 15px;\n}\n.input-container {\n position: relative;\n}\n.input-icon {\n position: absolute;\n top: 50%;\n left: 10px;\n transform: translateY(-50%);\n color: #6c757d;\n pointer-events: none;\n}\n.input-container input,\n.input-container textarea {\n width: 100%;\n padding: 10px 10px 10px 35px;\n border: 1px solid #ccc;\n border-radius: 5px;\n font-size: 1rem;\n transition: border-color 0.3s ease;\n}\n.form-error {\n color: #dc3545;\n font-size: 0.9rem;\n margin-top: 5px;\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.account-manage__button {\n padding: 12px;\n background-color: var(--color-blue);\n color: #fff;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n font-size: 1.1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n transition: background-color 0.3s ease;\n}\n");
12248
12184
  /*! Bundled license information:
12249
12185
 
12250
12186
  moment/moment.js:
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@happychef/reservation-sidebar",
3
- "version": "2.5.2",
3
+ "version": "2.5.3",
4
4
  "description": "A compound component for managing restaurant reservations - JavaScript version with independent styles",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",