@travelswitchhq/flight-search-react 1.0.0 → 1.0.2

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.
Files changed (5) hide show
  1. package/dist/index.cjs +266 -206
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.mjs +266 -206
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +47 -47
package/dist/index.cjs CHANGED
@@ -34,31 +34,36 @@ var import_jsencrypt = require("jsencrypt");
34
34
 
35
35
  // src/flight-search-widget.styles.ts
36
36
  var flightSearchWidgetStyles = `
37
- :root {
38
- --font-family: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
39
- --ar-font-family: Arial, sans-serif;
40
- --label-color: #66797F;
41
- --body-text: #0B1215;
42
- --btn-radius: 8px;
43
- --radius: 12px;
44
- --primary-btn: #2C0A82;
45
- --primary-button-text: #ffffff;
46
- --button-primary-border: #2C0A82;
47
- --form-border: #d8dcde;
48
- --white: #ffffff;
49
- --gray: #999;
50
- --widget-bg: #f5f5f8;
51
- --widget-font-size: 1.4rem;
52
- --widget-z-index-base: 1000;
53
- --widget-transition: all 0.2s ease;
54
- --widget-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
55
- --widget-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
56
- --grid-gap-sm: 2px;
57
- --grid-gap-md: 10px;
58
- --grid-gap-lg: 20px;
59
- --flex-gap-sm: 5px;
60
- --flex-gap-md: 15px;
61
- --flex-gap-lg: 20px;
37
+ .sw-container {
38
+ --sw-font-family: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
39
+ --sw-en-font-family: Arial, sans-serif;
40
+ --sw-label-color: #66797F;
41
+ --sw-body-text: #0B1215;
42
+ --sw-btn-radius: 8px;
43
+ --sw-radius: var(--sw-size-md-1);
44
+ --sw-primary-btn: var(--primary);
45
+ --sw-primary-button-text: #ffffff;
46
+ --sw-button-primary-border: var(--primary);
47
+ --sw-form-border: #d8dcde;
48
+ --sw-white: #ffffff;
49
+ --sw-gray: #999;
50
+ --sw-error: #f60b0b;
51
+ --sw-widget-bg: #f5f5f8;
52
+ --sw-widget-font-size: 1.4rem;
53
+ --sw-widget-z-index-base: 1000;
54
+ --sw-widget-transition: all 0.2s ease;
55
+ --sw-widget-shadow: 0 var(--sw-size-sm) 8px rgba(0, 0, 0, 0.1);
56
+ --sw-widget-shadow-hover: 0 4px var(--sw-size-md-1) rgba(0, 0, 0, 0.15);
57
+ --sw-space-sm: 2px;
58
+ --sw-space-md: 10px;
59
+ --sw-space-lg: 20px;
60
+ --sw-size-sm: 2px;
61
+ --sw-size-md: 10px;
62
+ --sw-size-md-1: 12px;
63
+ --sw-size-md-2: 14px;
64
+ --sw-size-md-3: 16px;
65
+ --sw-size-md-4: 18px;
66
+ --sw-size-lg: 20px;
62
67
  }
63
68
  .sw-container {
64
69
  contain: layout;
@@ -69,15 +74,15 @@ var flightSearchWidgetStyles = `
69
74
  margin: 0;
70
75
  padding: 0;
71
76
  box-sizing: border-box;
72
- color: var(--body-text);
73
- font-family: var(--font-family);
74
- font-size: var(--widget-font-size);
77
+ color: var(--sw-body-text);
78
+ font-family: var(--sw-font-family);
79
+ font-size: var(--sw-widget-font-size);
75
80
  font-weight: 400;
76
81
  line-height: 1.5;
77
82
  -webkit-font-smoothing: antialiased;
78
83
  -moz-osx-font-smoothing: grayscale;
79
84
  -webkit-tap-highlight-color: transparent;
80
- background: var(--widget-bg);
85
+ background: var(--sw-widget-bg);
81
86
  *,
82
87
  *::before,
83
88
  *::after {
@@ -86,7 +91,7 @@ var flightSearchWidgetStyles = `
86
91
  }
87
92
  .sw-container button,
88
93
  .sw-container input {
89
- font-family: var(--font-family);
94
+ font-family: var(--sw-font-family);
90
95
  }
91
96
  .sw-container h1,
92
97
  .sw-container h2,
@@ -98,7 +103,7 @@ var flightSearchWidgetStyles = `
98
103
  display: block;
99
104
  margin: 0;
100
105
  color: inherit;
101
- font-family: var(--font-family);
106
+ font-family: var(--sw-font-family);
102
107
  font-weight: normal;
103
108
  line-height: 1.4;
104
109
  }
@@ -141,7 +146,7 @@ var flightSearchWidgetStyles = `
141
146
  justify-content: space-between;
142
147
  }
143
148
  .sw-container .enFont{
144
- font-family: var(--ar-font-family);
149
+ font-family: var(--sw-en-font-family);
145
150
  }
146
151
  .sw-container .sw-text-ellipsis {
147
152
  display: -webkit-box;
@@ -150,34 +155,35 @@ var flightSearchWidgetStyles = `
150
155
  text-overflow: ellipsis;
151
156
  }
152
157
  .sw-container .sw-text-label {
153
- color: var(--label-color);
158
+ color: var(--sw-label-color);
154
159
  }
155
160
  .sw-booking-form {
156
161
  position: relative;
157
162
  display: grid;
158
163
  grid-template-columns: 1fr repeat(4, minmax(0, 1fr)) minmax(80px, 0.8fr);
159
- gap: var(--grid-gap-sm);
164
+ gap: var(--sw-space-sm);
160
165
  min-height: 55px;
161
166
  min-width: 0;
162
- border-radius: var(--radius);
167
+ border-radius: var(--sw-radius);
163
168
  overflow: visible;
164
169
  }
165
170
  .sw-card-box {
166
171
  position: relative;
167
172
  display: block;
168
173
  padding: 20px;
169
- background-color: var(--white);
170
- border-radius: var(--radius);
174
+ background-color: var(--sw-white);
175
+ border-radius: var(--sw-radius);
176
+ }
177
+ .sw-card-box .br-right{
178
+ border-top-right-radius: var(--sw-radius);
179
+ border-bottom-right-radius: var(--sw-radius);
171
180
  }
172
- body[dir="ltr"] .sw-card-box .br-right,
173
- body[dir="rtl"] .sw-card-box .br-left{
174
- border-top-right-radius: var(--radius);
175
- border-bottom-right-radius: var(--radius);
181
+ .sw-card-box .br-left{
182
+ border-top-left-radius: var(--sw-radius);
183
+ border-bottom-left-radius: var(--sw-radius);
176
184
  }
177
- body[dir="rtl"] .sw-card-box .br-right,
178
- body[dir="ltr"] .sw-card-box .br-left{
179
- border-top-left-radius: var(--radius);
180
- border-bottom-left-radius: var(--radius);
185
+ .sw-com-cal .p-disabled{
186
+ opacity: 0.3;
181
187
  }
182
188
  .sw-form-field {
183
189
  display: flex;
@@ -199,11 +205,12 @@ body[dir="ltr"] .sw-card-box .br-left{
199
205
  padding: 0;
200
206
  overflow: hidden;
201
207
  white-space: nowrap;
202
- color: var(--label-color);
208
+ color: var(--sw-label-color);
203
209
  font-size: 12px;
204
210
  font-weight: 500;
205
211
  -webkit-box-orient: vertical;
206
212
  text-overflow: ellipsis;
213
+ text-align: initial;
207
214
  }
208
215
  .p-button-label {
209
216
  flex: unset;
@@ -219,13 +226,13 @@ body[dir="ltr"] .sw-card-box .br-left{
219
226
  outline: none;
220
227
  background: transparent;
221
228
  box-shadow: none;
222
- color: var(--body-text);
229
+ color: var(--sw-body-text);
223
230
  font-size: 14px;
224
231
  font-weight: 500;
225
232
  }
226
233
  .sw-form-field input::placeholder,
227
234
  .sw-form-field .p-inputtext::placeholder {
228
- color: var(--label-color) !important;
235
+ color: var(--sw-label-color) !important;
229
236
  }
230
237
  .sw-form-swap {
231
238
  position: absolute;
@@ -236,7 +243,7 @@ body[dir="ltr"] .sw-card-box .br-left{
236
243
  align-items: center;
237
244
  justify-content: center;
238
245
  padding: 3px;
239
- border: 1px solid var(--form-border);
246
+ border: 1px solid var(--sw-form-border);
240
247
  border-radius: 50%;
241
248
  background-color: #fff;
242
249
  cursor: pointer;
@@ -262,16 +269,16 @@ padding-inline-start: 25px;
262
269
  outline: none;
263
270
  background: transparent;
264
271
  cursor: pointer;
265
- color: var(--body-text);
272
+ color: var(--sw-body-text);
266
273
  font-size: 14px;
267
274
  font-weight: 500;
268
275
  }
269
276
  .sw-custom-dropdown-trigger .sw-placeholder {
270
- color: var(--label-color);
277
+ color: var(--sw-label-color);
271
278
  }
272
279
  .sw-dropdown-arrow {
273
280
  margin-left: 8px;
274
- color: var(--label-color);
281
+ color: var(--sw-label-color);
275
282
  font-size: 10px;
276
283
  transition: transform 0.2s ease;
277
284
  }
@@ -280,7 +287,7 @@ padding-inline-start: 25px;
280
287
  top: calc(100% + 5px);
281
288
  left: 0;
282
289
  right: 0;
283
- z-index: calc(var(--widget-z-index-base) + 5);
290
+ z-index: calc(var(--sw-widget-z-index-base) + 5);
284
291
  display: block;
285
292
  visibility: visible;
286
293
  opacity: 1;
@@ -293,10 +300,10 @@ padding-inline-start: 25px;
293
300
  padding: 0;
294
301
  overflow: auto;
295
302
  overflow-x: hidden;
296
- background: var(--white);
297
- border: 1px solid var(--form-border);
298
- border-radius: var(--radius);
299
- box-shadow: var(--widget-shadow);
303
+ background: var(--sw-white);
304
+ border: 1px solid var(--sw-form-border);
305
+ border-radius: var(--sw-radius);
306
+ box-shadow: var(--sw-widget-shadow);
300
307
  }
301
308
  .sw-dropdown::-webkit-scrollbar {
302
309
  display: none;
@@ -310,7 +317,7 @@ padding-inline-start: 25px;
310
317
  margin: 0 20px;
311
318
  padding: 10px 0;
312
319
  cursor: pointer;
313
- font-family: var(--font-family);
320
+ font-family: var(--sw-font-family);
314
321
  }
315
322
  .p-autocomplete-item{
316
323
  font-size: 14px;
@@ -349,7 +356,7 @@ padding-inline-start: 25px;
349
356
  margin: 0;
350
357
  padding: 0;
351
358
  cursor: pointer;
352
- color: var(--body-text);
359
+ color: var(--sw-body-text);
353
360
  font-size: 14px;
354
361
  transition: background-color 0.2s ease;
355
362
  }
@@ -369,26 +376,26 @@ padding-inline-start: 25px;
369
376
  background-color: var(--secondary-light);
370
377
  }
371
378
  .sw-custom-dropdown-item:first-child {
372
- border-top-left-radius: var(--btn-radius);
373
- border-top-right-radius: var(--btn-radius);
379
+ border-top-left-radius: var(--sw-btn-radius);
380
+ border-top-right-radius: var(--sw-btn-radius);
374
381
  }
375
382
  .sw-custom-dropdown-item:last-child {
376
- border-bottom-left-radius: var(--btn-radius);
377
- border-bottom-right-radius: var(--btn-radius);
383
+ border-bottom-left-radius: var(--sw-btn-radius);
384
+ border-bottom-right-radius: var(--sw-btn-radius);
378
385
  }
379
386
  .sw-rooms-guests-menu {
380
387
  position: absolute;
381
388
  top: 100%;
382
389
  right: 0;
383
- z-index: var(--widget-z-index-base);
390
+ z-index: var(--sw-widget-z-index-base);
384
391
  display: block;
385
392
  width: 75%;
386
393
  margin-top: 4px;
387
394
  padding: 20px;
388
- background: var(--white);
389
- border: 1px solid var(--form-border);
390
- border-radius: var(--radius);
391
- box-shadow: var(--widget-shadow);
395
+ background: var(--sw-white);
396
+ border: 1px solid var(--sw-form-border);
397
+ border-radius: var(--sw-radius);
398
+ box-shadow: var(--sw-widget-shadow);
392
399
  }
393
400
  .sw-pos-rel {
394
401
  position: relative;
@@ -421,29 +428,29 @@ padding-inline-start: 25px;
421
428
  .sw-room-controls-child {
422
429
  display: grid;
423
430
  grid-template-columns: repeat(4, minmax(0, 1fr));
424
- gap: var(--grid-gap-lg);
431
+ gap: var(--sw-space-lg);
425
432
  min-width: 0;
426
433
  }
427
434
  .sw-room-controls-child .p-dropdown {
428
435
  padding: 10px;
429
- border: 1px solid var(--form-border);
430
- border-radius: var(--radius);
436
+ border: 1px solid var(--sw-form-border);
437
+ border-radius: var(--sw-radius);
431
438
  }
432
439
  .sw-room-controls-child .p-dropdown-item {
433
440
  padding: 10px;
434
441
  font-size: 14px;
435
442
  }
436
443
  .sw-room-controls-child .p-dropdown-panel {
437
- background: var(--white);
438
- border: 1px solid var(--form-border);
439
- border-radius: var(--btn-radius);
444
+ background: var(--sw-white);
445
+ border: 1px solid var(--sw-form-border);
446
+ border-radius: var(--sw-btn-radius);
440
447
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
441
448
  }
442
449
  .sw-room-controls-group {
443
450
  display: grid;
444
451
  grid-template-columns: repeat(2, minmax(0, 1fr));
445
452
  justify-content: center;
446
- gap: var(--grid-gap-md);
453
+ gap: var(--sw-space-md);
447
454
  min-width: 0;
448
455
  }
449
456
  .sw-room-control-item {
@@ -451,11 +458,11 @@ padding-inline-start: 25px;
451
458
  flex-direction: column;
452
459
  flex: 1 1 auto;
453
460
  justify-content: space-between;
454
- gap: var(--flex-gap-sm);
461
+ gap: var(--sw-space-sm);
455
462
  min-width: 0;
456
463
  }
457
464
  .sw-room-control-label {
458
- color: var(--body-text);
465
+ color: var(--sw-body-text);
459
466
  font-size: 14px;
460
467
  font-weight: 400;
461
468
  }
@@ -477,19 +484,13 @@ padding-inline-start: 25px;
477
484
  border-radius: 50%;
478
485
  background: var(--primary);
479
486
  cursor: pointer;
480
- color: var(--white);
487
+ color: var(--sw-white);
481
488
  font-size: 20px;
482
489
  font-weight: 500;
483
- transition: var(--widget-transition);
490
+ transition: var(--sw-widget-transition);
484
491
  }
485
492
  .sw-count-button:focus-visible {
486
- outline: 2px solid var(--primary);
487
- outline-offset: 2px;
488
- }
489
- .sw-count-button:hover:not(:disabled) {
490
- background: var(--primary-btn);
491
- opacity: 0.9;
492
- transform: scale(1.05);
493
+ outline: none;
493
494
  }
494
495
  .sw-count-button.sw-disabled {
495
496
  opacity: 0.6;
@@ -501,7 +502,7 @@ padding-inline-start: 25px;
501
502
  .sw-count-value {
502
503
  min-width: 30px;
503
504
  text-align: center;
504
- color: var(--body-text);
505
+ color: var(--sw-body-text);
505
506
  font-size: 16px;
506
507
  font-weight: 500;
507
508
  }
@@ -514,7 +515,7 @@ padding-inline-start: 25px;
514
515
  margin: 0 !important;
515
516
  padding: 1rem;
516
517
  border: 1px solid var(--primary);
517
- border-radius: var(--radius);
518
+ border-radius: var(--sw-radius);
518
519
  background-color: transparent;
519
520
  cursor: pointer;
520
521
  color: var(--primary);
@@ -531,12 +532,12 @@ padding-inline-start: 25px;
531
532
  gap: 10px;
532
533
  margin-top: 15px;
533
534
  padding-top: 15px;
534
- border-top: 1px solid var(--form-border);
535
+ border-top: 1px solid var(--sw-form-border);
535
536
  }
536
537
  .sw-reset-button {
537
538
  padding: 10px 20px;
538
539
  border: 1px solid var(--primary);
539
- border-radius: var(--btn-radius);
540
+ border-radius: var(--sw-btn-radius);
540
541
  background: transparent;
541
542
  cursor: pointer;
542
543
  color: var(--primary);
@@ -544,24 +545,17 @@ padding-inline-start: 25px;
544
545
  font-weight: 500;
545
546
  transition: all 0.2s ease;
546
547
  }
547
- .sw-reset-button:hover {
548
- background: var(--primary-light);
549
- }
550
548
  .sw-apply-button {
551
549
  padding: 10px 20px;
552
- border: 1px solid var(--button-primary-border);
553
- border-radius: var(--btn-radius);
554
- background: var(--primary-btn);
550
+ border: 1px solid var(--sw-button-primary-border);
551
+ border-radius: var(--sw-btn-radius);
552
+ background: var(--sw-primary-btn);
555
553
  cursor: pointer;
556
- color: var(--primary-button-text);
554
+ color: var(--sw-primary-button-text);
557
555
  font-size: 14px;
558
556
  font-weight: 500;
559
557
  transition: all 0.2s ease;
560
558
  }
561
- .sw-apply-button:hover {
562
- opacity: 0.9;
563
- background: var(--primary);
564
- }
565
559
  .sw-search-button,
566
560
  .sw-search-button.p-button {
567
561
  display: flex;
@@ -573,25 +567,19 @@ padding-inline-start: 25px;
573
567
  min-height: 56px;
574
568
  margin: 0;
575
569
  padding: 0 15px;
576
- border: 1px solid var(--button-primary-border);
577
- background-color: var(--primary-btn);
570
+ border: 1px solid var(--sw-button-primary-border);
571
+ background-color: var(--sw-primary-btn);
578
572
  cursor: pointer;
579
- color: var(--primary-button-text);
573
+ color: var(--sw-primary-button-text);
580
574
  font-size: 16px;
581
575
  font-weight: 400;
582
- transition: var(--widget-transition);
576
+ transition: var(--sw-widget-transition);
583
577
  }
584
578
  .sw-search-button:focus-visible,
585
579
  .sw-search-button.p-button:focus-visible {
586
580
  outline: 2px solid var(--primary);
587
581
  outline-offset: 2px;
588
582
  }
589
- .sw-search-button:hover:not(:disabled),
590
- .sw-search-button.p-button:hover:not(:disabled) {
591
- background-color: var(--primary);
592
- opacity: 0.9;
593
- box-shadow: var(--widget-shadow-hover);
594
- }
595
583
  .sw-search-button .p-button-icon-left {
596
584
  margin: 0;
597
585
  }
@@ -605,17 +593,17 @@ padding-inline-start: 25px;
605
593
  min-width: 100%;
606
594
  margin-top: 5px !important;
607
595
  padding: 15px;
608
- background-color: var(--white);
609
- border: 1px solid var(--form-border);
610
- border-radius: var(--radius);
611
- box-shadow: var(--widget-shadow);
596
+ background-color: var(--sw-white);
597
+ border: 1px solid var(--sw-form-border);
598
+ border-radius: var(--sw-radius);
599
+ box-shadow: var(--sw-widget-shadow);
612
600
  }
613
601
  .sw-srh-wrap {
614
602
  display: flex;
615
603
  gap: 2px;
616
604
  }
617
605
  .sw-com-cal p{
618
- color: var(--body-text);
606
+ color: var(--sw-body-text);
619
607
  font-size: 14px;
620
608
  font-weight: 500;
621
609
  }
@@ -650,10 +638,10 @@ padding-inline-start: 25px;
650
638
  margin: 0;
651
639
  padding: 0 5px;
652
640
  border: 0;
653
- border-color: var(--white);
641
+ border-color: var(--sw-white);
654
642
  outline: none;
655
643
  background: transparent;
656
- color: var(--body-text);
644
+ color: var(--sw-body-text);
657
645
  font-size: 16px;
658
646
  font-weight: 500;
659
647
  line-height: 20px;
@@ -666,18 +654,18 @@ padding-inline-start: 25px;
666
654
  }
667
655
  .p-datepicker .p-datepicker-header button {
668
656
  border: 0;
669
- border-color: var(--white);
657
+ border-color: var(--sw-white);
670
658
  outline: none;
671
659
  box-shadow: none !important;
672
660
  background: transparent;
673
- color: var(--body-text);
661
+ color: var(--sw-body-text);
674
662
  font-size: 16px;
675
663
  font-weight: 500;
676
664
  line-height: 20px;
677
665
  }
678
666
  .p-datepicker .p-datepicker-calendar-container th {
679
667
  padding: 10px 0;
680
- color: var(--body-text);
668
+ color: var(--sw-body-text);
681
669
  font-size: 14px;
682
670
  font-weight: 400;
683
671
  line-height: 1.4;
@@ -693,7 +681,7 @@ padding-inline-start: 25px;
693
681
  height: 45px;
694
682
  }
695
683
  .p-datepicker-group-container .p-datepicker-group:not(:last-child) {
696
- border-inline-end: 1px solid var(--form-border);
684
+ border-inline-end: 1px solid var(--sw-form-border);
697
685
  padding-inline-end: 10px;
698
686
  margin-inline-end: 10px;
699
687
  }
@@ -703,7 +691,7 @@ padding-inline-start: 25px;
703
691
  .p-datepicker .p-highlight {
704
692
  position: relative;
705
693
  background: var(--primary) !important;
706
- color: var(--white) !important;
694
+ color: var(--sw-white) !important;
707
695
  }
708
696
  .sw-product-tabs {
709
697
  position: relative;
@@ -744,7 +732,7 @@ padding-inline-start: 25px;
744
732
  gap: 10px;
745
733
  width: fit-content;
746
734
  margin-top: 15px;
747
- color: var(--body-text);
735
+ color: var(--sw-body-text);
748
736
  font-size: 14px;
749
737
  }
750
738
  .sw-advanced-search-options .p-toggleable-content {
@@ -765,7 +753,7 @@ padding-inline-start: 25px;
765
753
  gap: 10px;
766
754
  cursor: pointer;
767
755
  user-select: none;
768
- color: var(--body-text);
756
+ color: var(--sw-body-text);
769
757
  font-size: 14px;
770
758
  }
771
759
  .sw-material-checkbox input {
@@ -794,7 +782,7 @@ padding-inline-start: 25px;
794
782
  min-width: 20px;
795
783
  height: 20px;
796
784
  background-color: #fff;
797
- border: 1px solid var(--form-border);
785
+ border: 1px solid var(--sw-form-border);
798
786
  border-radius: 4px;
799
787
  transition: background-color 0.3s, border-color 0.3s;
800
788
  }
@@ -821,8 +809,8 @@ padding-inline-start: 25px;
821
809
  .sw-tab-content {
822
810
  height: 40px;
823
811
  padding: 6px 15px;
824
- border: 1px solid var(--form-border);
825
- border-radius: var(--radius);
812
+ border: 1px solid var(--sw-form-border);
813
+ border-radius: var(--sw-radius);
826
814
  align-content: center;
827
815
  }
828
816
  @media print {
@@ -854,9 +842,9 @@ padding-inline-start: 25px;
854
842
  .sw-srh-grid {
855
843
  display: grid;
856
844
  grid-template-columns: minmax(200px, 2fr) minmax(100px, 1fr) minmax(80px, 0.6fr) minmax(60px, 0.4fr);
857
- gap: var(--grid-gap-sm, 2px);
845
+ gap: var(--sw-space-sm, 2px);
858
846
  margin-top: 15px;
859
- border-radius: var(--radius);
847
+ border-radius: var(--sw-radius);
860
848
  min-width: 0;
861
849
  overflow: visible;
862
850
  }
@@ -907,7 +895,7 @@ padding-inline-start: 25px;
907
895
  position: relative;
908
896
  }
909
897
  .sw-srh-mc {
910
- grid-template-columns: 6.3fr 2.5fr 1.15fr !important;
898
+ grid-template-columns: 43% 20% 25% 11.5% !important;
911
899
  min-width: 0;
912
900
  }
913
901
  .sw-srh-mc .sw-com-cal .p-inputtext{
@@ -922,7 +910,7 @@ padding-inline-start: 25px;
922
910
  display: flex;
923
911
  align-items: flex-end;
924
912
  width: fit-content;
925
- grid-column-start: 2;
913
+ grid-column-start: 3;
926
914
  }
927
915
  .sw-srh-mc .sw-srh-mc-foot button {
928
916
  display: flex;
@@ -950,12 +938,12 @@ padding-inline-start: 25px;
950
938
  font-size: 1.4rem;
951
939
  }
952
940
  .sw-srh-mc .sw-traveller {
953
- grid-row-start: 1;
954
- grid-column-start: 2;
941
+ grid-row-start: 1;
942
+ grid-column-start: 3;
955
943
  }
956
944
  .sw-srh-mc button {
957
- grid-row-start: 1;
958
- grid-column-start: 3;
945
+ grid-row-start: 1;
946
+ grid-column-start: 4;
959
947
  }
960
948
  .sw-srh-box {
961
949
  grid-column-start: 1;
@@ -965,8 +953,8 @@ padding-inline-start: 25px;
965
953
  min-width: 270px;
966
954
  padding: 10px;
967
955
  padding-inline-end: 2rem;
968
- border: 1px solid var(--form-border);
969
- border-radius: var(--radius);
956
+ border: 1px solid var(--sw-form-border);
957
+ border-radius: var(--sw-radius);
970
958
  gap: 0.5rem;
971
959
  font-size: 14px;
972
960
  }
@@ -1007,7 +995,7 @@ padding-inline-start: 25px;
1007
995
  font-size: 14px;
1008
996
  }
1009
997
  .sw-srh-pax p {
1010
- color: var(--label-color);
998
+ color: var(--sw-label-color);
1011
999
  font-size: 12px;
1012
1000
  }
1013
1001
  .sw-srh-button-wrapper button {
@@ -1023,15 +1011,15 @@ padding-inline-start: 25px;
1023
1011
  }
1024
1012
  .sw-srh-button-wrapper button.sw-active-button {
1025
1013
  background-color: var(--secondary);
1026
- color: var(--white);
1014
+ color: var(--sw-white);
1027
1015
  }
1028
1016
  .sw-traveller .sw-rooms-guests-menu {
1029
- width: 460px;
1017
+ width: 500px;
1030
1018
  }
1031
1019
  .sw-srh-class {
1032
1020
  display: flex;
1033
1021
  flex-wrap: wrap;
1034
- gap: var(--flex-gap-md, 10px);
1022
+ gap: var(--sw-space-md, 10px);
1035
1023
  align-items: stretch;
1036
1024
  }
1037
1025
  .sw-srh-class .sw-tab-content {
@@ -1044,22 +1032,22 @@ padding-inline-start: 25px;
1044
1032
  .sw-srh-class .sw-tab-checkbox input:checked + .sw-tab-content,
1045
1033
  .sw-srh-class .sw-tab-checkbox input[type=radio]:checked + .sw-tab-content {
1046
1034
  background-color: var(--primary);
1047
- color: var(--white);
1035
+ color: var(--sw-white);
1048
1036
  }
1049
1037
  .sw-srh-h-grid {
1050
1038
  position: relative;
1051
1039
  display: grid;
1052
1040
  grid-template-columns: 2.2fr 1.8fr 3fr 1.8fr 1.15fr;
1053
- gap: var(--grid-gap-sm, 2px);
1041
+ gap: var(--sw-space-sm, 2px);
1054
1042
  min-height: 55px;
1055
1043
  min-width: 0;
1056
1044
  overflow: visible;
1057
- border-radius: var(--radius);
1045
+ border-radius: var(--sw-radius);
1058
1046
  }
1059
1047
  .sw-srh-loc {
1060
1048
  display: block !important;
1061
1049
  padding: 15px 0 12px;
1062
- border-bottom: 1px solid var(--form-border);
1050
+ border-bottom: 1px solid var(--sw-form-border);
1063
1051
  }
1064
1052
  .sw-srh-count-wrapper,
1065
1053
  .sw-srh-loc {
@@ -1075,7 +1063,7 @@ padding-inline-start: 25px;
1075
1063
  width: 40px;
1076
1064
  height: 40px;
1077
1065
  background: #f4f5f5;
1078
- border-radius: var(--radius);
1066
+ border-radius: var(--sw-radius);
1079
1067
  }
1080
1068
  .sw-hotel-search-form-icon.sw-fill {
1081
1069
  background: var(--primary-light);
@@ -1106,7 +1094,7 @@ padding-inline-start: 25px;
1106
1094
  align-items: center;
1107
1095
  gap: 5px;
1108
1096
  padding: 8px 12px;
1109
- border: 1px solid var(--form-border);
1097
+ border: 1px solid var(--sw-form-border);
1110
1098
  border-radius: 20px;
1111
1099
  font-size: 14px;
1112
1100
  line-height: 1;
@@ -1123,7 +1111,7 @@ padding-inline-start: 25px;
1123
1111
  }
1124
1112
  .sw-hsrh-chk-main {
1125
1113
  display: flex;
1126
- gap: var(--flex-gap-md, 10px);
1114
+ gap: var(--sw-space-md, 10px);
1127
1115
  font-size: 1.4rem;
1128
1116
  font-weight: 400;
1129
1117
  flex-wrap: wrap;
@@ -1131,7 +1119,7 @@ padding-inline-start: 25px;
1131
1119
  .sw-srh-class {
1132
1120
  display: flex;
1133
1121
  flex-wrap: wrap;
1134
- gap: var(--flex-gap-md, 10px);
1122
+ gap: var(--sw-space-md, 10px);
1135
1123
  align-items: stretch;
1136
1124
  }
1137
1125
  .sw-srh-class .sw-tab-content {
@@ -1271,10 +1259,11 @@ function FlightSearchWidget({
1271
1259
  const [airlineQuery, setAirlineQuery] = (0, import_react.useState)("");
1272
1260
  const [airlineSuggestions, setAirlineSuggestions] = (0, import_react.useState)([]);
1273
1261
  const [selectedAirlines, setSelectedAirlines] = (0, import_react.useState)([]);
1262
+ const [airlineLimitError, setAirlineLimitError] = (0, import_react.useState)(null);
1274
1263
  const [validationErrors, setValidationErrors] = (0, import_react.useState)({});
1275
1264
  const createDefaultSegment = () => ({
1276
- origin: "Origin",
1277
- destination: "Destination",
1265
+ origin: "",
1266
+ destination: "",
1278
1267
  departureDate: /* @__PURE__ */ new Date(),
1279
1268
  returnDate: new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() + 1)),
1280
1269
  dateRange: [/* @__PURE__ */ new Date(), new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() + 1))],
@@ -1286,8 +1275,8 @@ function FlightSearchWidget({
1286
1275
  const [formState, setFormState] = (0, import_react.useState)(() => ({
1287
1276
  tripType: "round-trip",
1288
1277
  segments: [{
1289
- origin: "Origin",
1290
- destination: "Destination",
1278
+ origin: "",
1279
+ destination: "",
1291
1280
  departureDate: /* @__PURE__ */ new Date(),
1292
1281
  returnDate: new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() + 1)),
1293
1282
  dateRange: [/* @__PURE__ */ new Date(), new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() + 1))],
@@ -1408,7 +1397,16 @@ function FlightSearchWidget({
1408
1397
  const updated = [...prev];
1409
1398
  if (!updated[segmentIndex]) return prev;
1410
1399
  if (dropdownType === "origin") updated[segmentIndex] = { ...updated[segmentIndex], origin: display };
1411
- else updated[segmentIndex] = { ...updated[segmentIndex], destination: display };
1400
+ else {
1401
+ updated[segmentIndex] = { ...updated[segmentIndex], destination: display };
1402
+ if (tripType === "multi-city" || tripType === "custom-search") {
1403
+ const nextIndex = segmentIndex + 1;
1404
+ const nextSeg = updated[nextIndex];
1405
+ if (nextSeg) {
1406
+ updated[nextIndex] = { ...nextSeg, origin: display };
1407
+ }
1408
+ }
1409
+ }
1412
1410
  return updated;
1413
1411
  });
1414
1412
  closeAirportDropdown(dropdownType, segmentIndex);
@@ -1558,12 +1556,14 @@ function FlightSearchWidget({
1558
1556
  if (tripType === "multi-city" || tripType === "custom-search") {
1559
1557
  setSegments((prev) => {
1560
1558
  const maxSegments = getMaxSegments();
1559
+ const baseDate = prev[0]?.departureDate;
1560
+ const fallbackDate = baseDate instanceof Date && !isNaN(baseDate.getTime()) ? baseDate : /* @__PURE__ */ new Date();
1561
1561
  if (prev.length === 0) {
1562
1562
  const first = createDefaultSegment();
1563
1563
  const second = {
1564
- origin: "Origin",
1565
- destination: "Destination",
1566
- departureDate: /* @__PURE__ */ new Date(),
1564
+ origin: "",
1565
+ destination: "",
1566
+ departureDate: fallbackDate,
1567
1567
  returnDate: null,
1568
1568
  dateRange: null,
1569
1569
  travelerClass: first.travelerClass,
@@ -1576,9 +1576,9 @@ function FlightSearchWidget({
1576
1576
  if (prev.length === 1) {
1577
1577
  const first = prev[0];
1578
1578
  const second = {
1579
- origin: "Origin",
1580
- destination: "Destination",
1581
- departureDate: /* @__PURE__ */ new Date(),
1579
+ origin: "",
1580
+ destination: "",
1581
+ departureDate: fallbackDate,
1582
1582
  returnDate: null,
1583
1583
  dateRange: null,
1584
1584
  travelerClass: first.travelerClass,
@@ -1604,15 +1604,41 @@ function FlightSearchWidget({
1604
1604
  const trimmed = value.trim();
1605
1605
  return trimmed.length > 0 && trimmed !== placeholder;
1606
1606
  };
1607
+ const normalizeMultiCityDates = (list) => {
1608
+ let prevDate = null;
1609
+ return list.map((segment, idx) => {
1610
+ const current = segment.departureDate;
1611
+ let nextDate = current;
1612
+ const currentValid = current instanceof Date && !isNaN(current.getTime());
1613
+ const prevValid = prevDate instanceof Date && !isNaN(prevDate.getTime());
1614
+ if (prevValid && (!currentValid || current.getTime() < prevDate.getTime())) {
1615
+ nextDate = prevDate;
1616
+ }
1617
+ const nextSegment = nextDate === segment.departureDate ? segment : { ...segment, departureDate: nextDate };
1618
+ if (nextDate instanceof Date && !isNaN(nextDate.getTime())) {
1619
+ prevDate = nextDate;
1620
+ } else if (idx === 0) {
1621
+ prevDate = null;
1622
+ }
1623
+ return nextSegment;
1624
+ });
1625
+ };
1626
+ const getLastValidDepartureDate = (list) => {
1627
+ for (let i = list.length - 1; i >= 0; i -= 1) {
1628
+ const date = list[i]?.departureDate;
1629
+ if (date instanceof Date && !isNaN(date.getTime())) {
1630
+ return date;
1631
+ }
1632
+ }
1633
+ return null;
1634
+ };
1607
1635
  const handleSegmentFieldChange = (index, field, value) => {
1608
1636
  setSegments((prev) => {
1609
1637
  const updated = [...prev];
1610
1638
  if (!updated[index]) return prev;
1611
1639
  updated[index] = { ...updated[index], [field]: value };
1612
- if (field === "departureDate" && (tripType === "multi-city" || tripType === "custom-search") && value instanceof Date && !isNaN(value.getTime())) {
1613
- for (let i = index + 1; i < updated.length; i += 1) {
1614
- updated[i] = { ...updated[i], departureDate: value };
1615
- }
1640
+ if (field === "departureDate" && (tripType === "multi-city" || tripType === "custom-search")) {
1641
+ return normalizeMultiCityDates(updated);
1616
1642
  }
1617
1643
  return updated;
1618
1644
  });
@@ -1647,16 +1673,26 @@ function FlightSearchWidget({
1647
1673
  }
1648
1674
  }));
1649
1675
  };
1676
+ const swapSegmentLocations = (index) => {
1677
+ setSegments((prev) => {
1678
+ const updated = [...prev];
1679
+ const current = updated[index];
1680
+ if (!current) return prev;
1681
+ updated[index] = { ...current, origin: current.destination, destination: current.origin };
1682
+ return updated;
1683
+ });
1684
+ };
1650
1685
  const addFlightSegment = () => {
1651
1686
  const maxSegments = getMaxSegments();
1652
1687
  if (segments.length < maxSegments) {
1653
1688
  const template = segments[0] ?? createDefaultSegment();
1689
+ const lastDeparture = getLastValidDepartureDate(segments) ?? /* @__PURE__ */ new Date();
1654
1690
  setSegments((prev) => [
1655
1691
  ...prev,
1656
1692
  {
1657
- origin: "Origin",
1658
- destination: "Destination",
1659
- departureDate: /* @__PURE__ */ new Date(),
1693
+ origin: "",
1694
+ destination: "",
1695
+ departureDate: lastDeparture,
1660
1696
  returnDate: null,
1661
1697
  dateRange: null,
1662
1698
  travelerClass: template.travelerClass,
@@ -1858,7 +1894,11 @@ function FlightSearchWidget({
1858
1894
  className: `sw-custom-dropdown-trigger ${value === placeholder || !value ? "sw-placeholder" : ""}`,
1859
1895
  value: value === placeholder ? "" : value ?? "",
1860
1896
  placeholder,
1861
- onFocus: onOpen,
1897
+ onFocus: (e) => {
1898
+ onOpen();
1899
+ e.currentTarget.select();
1900
+ },
1901
+ onClick: (e) => e.currentTarget.select(),
1862
1902
  onChange: (e) => {
1863
1903
  const val = e.target.value;
1864
1904
  handleSegmentFieldChange(segmentIndex, dropdownType, val);
@@ -1908,44 +1948,49 @@ function FlightSearchWidget({
1908
1948
  };
1909
1949
  const isOriginOpen = segmentDropdowns[index]?.origin ?? false;
1910
1950
  const isDestOpen = segmentDropdowns[index]?.destination ?? false;
1911
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-srh-wrap sw-srh-box", children: [
1912
- renderAirportDropdown(index, "origin", originDropdownRef || originRef, isOriginOpen, () => toggleSegmentDropdown(index, "origin")),
1913
- renderAirportDropdown(index, "destination", destinationDropdownRef || destinationRef, isDestOpen, () => toggleSegmentDropdown(index, "destination")),
1914
- isMultiCityOrCustom && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-srh-wrap sw-pos-rel", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-form-field sw-com-cal", children: [
1915
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: `departure-${index}`, children: "Departure" }),
1916
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1917
- import_calendar.Calendar,
1951
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
1952
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-srh-wrap sw-srh-box sw-pos-rel", children: [
1953
+ renderAirportDropdown(index, "origin", originDropdownRef || originRef, isOriginOpen, () => toggleSegmentDropdown(index, "origin")),
1954
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-form-swap", "aria-label": "Swap origin and destination", onClick: () => swapSegmentLocations(index), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "30px", height: "30px", fill: "var(--sw-body-text)", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fillRule: "evenodd", d: "M14.6403 5.2477a.7483.7483 0 0 1 1.0612.0084l4.0871 4.1684a.7555.7555 0 0 1 .1573.8195.7502.7502 0 0 1-.6921.4623H6.8305c-.4145 0-.7504-.3373-.7504-.7533 0-.4161.336-.7534.7504-.7534h10.6317L14.632 6.3131a.7556.7556 0 0 1 .0083-1.0654ZM9.368 18.8148a.7483.7483 0 0 1-1.0611-.0084l-4.087-4.1684a.7555.7555 0 0 1-.1574-.8195.7503.7503 0 0 1 .6921-.4623H17.178c.4144 0 .7503.3373.7503.7533 0 .4161-.3359.7534-.7503.7534H6.5463l2.8301 2.8865a.7555.7555 0 0 1-.0083 1.0654Z", clipRule: "evenodd" }) }) }),
1955
+ renderAirportDropdown(index, "destination", destinationDropdownRef || destinationRef, isDestOpen, () => toggleSegmentDropdown(index, "destination"))
1956
+ ] }, index),
1957
+ isMultiCityOrCustom && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-srh-wrap sw-pos-rel", children: [
1958
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-form-field sw-com-cal", children: [
1959
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: `departure-${index}`, children: "Departure" }),
1960
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1961
+ import_calendar.Calendar,
1962
+ {
1963
+ numberOfMonths: 2,
1964
+ id: `departure-${index}`,
1965
+ appendTo: "self",
1966
+ value: segment.departureDate ?? null,
1967
+ onChange: (e) => {
1968
+ const raw = e.value;
1969
+ const nextDate = raw instanceof Date ? raw : typeof raw === "string" ? new Date(raw) : null;
1970
+ handleSegmentFieldChange(
1971
+ index,
1972
+ "departureDate",
1973
+ nextDate && !isNaN(nextDate.getTime()) ? nextDate : null
1974
+ );
1975
+ },
1976
+ dateFormat: "dd M yy",
1977
+ placeholder: "29 Jan 2026",
1978
+ className: "p-inputtext-sm",
1979
+ minDate: getMinDateForSegment(index)
1980
+ }
1981
+ )
1982
+ ] }),
1983
+ canRemove && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-srh-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1984
+ "a",
1918
1985
  {
1919
- numberOfMonths: 2,
1920
- id: `departure-${index}`,
1921
- appendTo: "self",
1922
- value: segment.departureDate ?? null,
1923
- onChange: (e) => {
1924
- const raw = e.value;
1925
- const nextDate = raw instanceof Date ? raw : typeof raw === "string" ? new Date(raw) : null;
1926
- handleSegmentFieldChange(
1927
- index,
1928
- "departureDate",
1929
- nextDate && !isNaN(nextDate.getTime()) ? nextDate : null
1930
- );
1931
- },
1932
- dateFormat: "dd M yy",
1933
- placeholder: "29 Jan 2026",
1934
- className: "p-inputtext-sm",
1935
- minDate: getMinDateForSegment(index)
1986
+ type: "button",
1987
+ className: "sw-remove-segment",
1988
+ onClick: () => removeFlightSegment(index),
1989
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 200 200", width: "35", height: "35", xmlns: "http://www.w3.org/2000/svg", role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M124.697 135.303L100 110.606l-24.697 24.697l-10.606-10.606L89.393 100L64.697 75.303l10.606-10.606L100 89.394l24.697-24.697l10.606 10.606L110.607 100l24.696 24.697z" }) })
1936
1990
  }
1937
- )
1938
- ] }) }),
1939
- canRemove && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-srh-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1940
- "a",
1941
- {
1942
- type: "button",
1943
- className: "sw-remove-segment",
1944
- onClick: () => removeFlightSegment(index),
1945
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 200 200", width: "35", height: "35", xmlns: "http://www.w3.org/2000/svg", role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M124.697 135.303L100 110.606l-24.697 24.697l-10.606-10.606L89.393 100L64.697 75.303l10.606-10.606L100 89.394l24.697-24.697l10.606 10.606L110.607 100l24.696 24.697z" }) })
1946
- }
1947
- ) })
1948
- ] }, index);
1991
+ ) })
1992
+ ] })
1993
+ ] });
1949
1994
  };
1950
1995
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_api.PrimeReactProvider, { value: { hideOverlaysOnDocumentScrolling: false }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tfsw-root sw-container", style: themeStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-card-box", children: [
1951
1996
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-srh-main-head", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-srh-head", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-srh-round-text", children: [
@@ -1967,8 +2012,17 @@ function FlightSearchWidget({
1967
2012
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h5", { className: "sw-tab-content", children: option.label })
1968
2013
  ] }, option.value)) }) }) }),
1969
2014
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { className: `sw-srh-grid ${tripType === "multi-city" || tripType === "custom-search" ? "sw-srh-mc" : ""}`, onSubmit: handleSubmit, children: [
1970
- tripType === "multi-city" || tripType === "custom-search" ? segments.map((segment, index) => renderFlightSegment(index, segment, true)) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-srh-wrap sw-srh-box", children: [
2015
+ tripType === "multi-city" || tripType === "custom-search" ? segments.map((segment, index) => renderFlightSegment(index, segment, true)) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-srh-wrap sw-srh-box sw-pos-rel", children: [
1971
2016
  renderAirportDropdown(0, "origin", originDropdownRef, isOriginDropdownOpen, () => setIsOriginDropdownOpen(true)),
2017
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
2018
+ "div",
2019
+ {
2020
+ className: "sw-form-swap",
2021
+ "aria-label": "Swap origin and destination",
2022
+ onClick: () => swapSegmentLocations(0),
2023
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "30px", height: "30px", fill: "var(--body-text)", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { "fill-rule": "evenodd", d: "M14.6403 5.2477a.7483.7483 0 0 1 1.0612.0084l4.0871 4.1684a.7555.7555 0 0 1 .1573.8195.7502.7502 0 0 1-.6921.4623H6.8305c-.4145 0-.7504-.3373-.7504-.7533 0-.4161.336-.7534.7504-.7534h10.6317L14.632 6.3131a.7556.7556 0 0 1 .0083-1.0654ZM9.368 18.8148a.7483.7483 0 0 1-1.0611-.0084l-4.087-4.1684a.7555.7555 0 0 1-.1574-.8195.7503.7503 0 0 1 .6921-.4623H17.178c.4144 0 .7503.3373.7503.7533 0 .4161-.3359.7534-.7503.7534H6.5463l2.8301 2.8865a.7555.7555 0 0 1-.0083 1.0654Z", "clip-rule": "evenodd" }) })
2024
+ }
2025
+ ),
1972
2026
  renderAirportDropdown(0, "destination", destinationDropdownRef, isDestinationDropdownOpen, () => setIsDestinationDropdownOpen(true))
1973
2027
  ] }),
1974
2028
  (tripType === "round-trip" || tripType === "one-way") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-srh-wrap sw-pos-rel ", children: tripType === "round-trip" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
@@ -2222,6 +2276,11 @@ function FlightSearchWidget({
2222
2276
  },
2223
2277
  onChange: (e) => {
2224
2278
  const next = e.value ?? [];
2279
+ if (next.length > 3) {
2280
+ setAirlineLimitError("You can select up to 3 airlines.");
2281
+ return;
2282
+ }
2283
+ setAirlineLimitError(null);
2225
2284
  setSelectedAirlines(next);
2226
2285
  setAdvancedOptions((prev) => ({
2227
2286
  ...prev,
@@ -2234,6 +2293,7 @@ function FlightSearchWidget({
2234
2293
  placeholder: "Preferred airline"
2235
2294
  }
2236
2295
  ),
2296
+ airlineLimitError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { style: { color: "var(--sw-error)" }, children: airlineLimitError }),
2237
2297
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sw-fsrh-chk-main", children: [
2238
2298
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "sw-material-checkbox", children: [
2239
2299
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(