kupos-ui-components-lib 9.7.6 → 9.7.7

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/styles.css CHANGED
@@ -60,9 +60,15 @@
60
60
  .top-\[88\%\] {
61
61
  top: 88%;
62
62
  }
63
+ .top-\[calc\(100\%\+10px\)\] {
64
+ top: calc(100% + 10px);
65
+ }
63
66
  .right-\[0px\] {
64
67
  right: 0px;
65
68
  }
69
+ .right-\[18px\] {
70
+ right: 18px;
71
+ }
66
72
  .-bottom-\[9\%\] {
67
73
  bottom: calc(9% * -1);
68
74
  }
@@ -75,6 +81,9 @@
75
81
  .-bottom-\[36px\] {
76
82
  bottom: calc(36px * -1);
77
83
  }
84
+ .bottom-\[11px\] {
85
+ bottom: 11px;
86
+ }
78
87
  .bottom-\[35px\] {
79
88
  bottom: 35px;
80
89
  }
@@ -168,9 +177,18 @@
168
177
  .m-\[auto\] {
169
178
  margin: auto;
170
179
  }
180
+ .mx-\[10px\] {
181
+ margin-inline: 10px;
182
+ }
171
183
  .mx-auto {
172
184
  margin-inline: auto;
173
185
  }
186
+ .my-\[8px\] {
187
+ margin-block: 8px;
188
+ }
189
+ .my-\[14px\] {
190
+ margin-block: 14px;
191
+ }
174
192
  .-mt-\[15px\] {
175
193
  margin-top: calc(15px * -1);
176
194
  }
@@ -189,12 +207,21 @@
189
207
  .mt-\[5px\] {
190
208
  margin-top: 5px;
191
209
  }
210
+ .mt-\[6px\] {
211
+ margin-top: 6px;
212
+ }
192
213
  .mt-\[10px\] {
193
214
  margin-top: 10px;
194
215
  }
216
+ .mt-\[12px\] {
217
+ margin-top: 12px;
218
+ }
195
219
  .mt-\[13px\] {
196
220
  margin-top: 13px;
197
221
  }
222
+ .mt-\[14px\] {
223
+ margin-top: 14px;
224
+ }
198
225
  .mt-\[15px\] {
199
226
  margin-top: 15px;
200
227
  }
@@ -345,6 +372,9 @@
345
372
  .h-\[30px\] {
346
373
  height: 30px;
347
374
  }
375
+ .h-\[34px\] {
376
+ height: 34px;
377
+ }
348
378
  .h-\[100\%\] {
349
379
  height: 100%;
350
380
  }
@@ -381,6 +411,9 @@
381
411
  .w-\[20px\] {
382
412
  width: 20px;
383
413
  }
414
+ .w-\[34px\] {
415
+ width: 34px;
416
+ }
384
417
  .w-\[50\%\] {
385
418
  width: 50%;
386
419
  }
@@ -449,6 +482,12 @@
449
482
  .max-w-\[165px\] {
450
483
  max-width: 165px;
451
484
  }
485
+ .max-w-\[220px\] {
486
+ max-width: 220px;
487
+ }
488
+ .max-w-full {
489
+ max-width: 100%;
490
+ }
452
491
  .min-w-\[75px\] {
453
492
  min-width: 75px;
454
493
  }
@@ -470,6 +509,9 @@
470
509
  --tw-translate-y: -10px;
471
510
  translate: var(--tw-translate-x) var(--tw-translate-y);
472
511
  }
512
+ .rotate-0 {
513
+ rotate: 0deg;
514
+ }
473
515
  .rotate-180 {
474
516
  rotate: 180deg;
475
517
  }
@@ -479,6 +521,9 @@
479
521
  .cursor-default {
480
522
  cursor: default;
481
523
  }
524
+ .cursor-not-allowed {
525
+ cursor: not-allowed;
526
+ }
482
527
  .cursor-pointer {
483
528
  cursor: pointer;
484
529
  }
@@ -491,12 +536,21 @@
491
536
  .grid-cols-2 {
492
537
  grid-template-columns: repeat(2, minmax(0, 1fr));
493
538
  }
539
+ .grid-cols-3 {
540
+ grid-template-columns: repeat(3, minmax(0, 1fr));
541
+ }
542
+ .grid-cols-4 {
543
+ grid-template-columns: repeat(4, minmax(0, 1fr));
544
+ }
494
545
  .grid-cols-\[0\.8fr_auto_26\%_1fr\] {
495
546
  grid-template-columns: 0.8fr auto 26% 1fr;
496
547
  }
497
548
  .grid-cols-\[1\.5fr_1fr_auto\] {
498
549
  grid-template-columns: 1.5fr 1fr auto;
499
550
  }
551
+ .grid-cols-\[25\%_48\%_27\%\] {
552
+ grid-template-columns: 25% 48% 27%;
553
+ }
500
554
  .grid-cols-\[26px_auto_26\%_1fr\] {
501
555
  grid-template-columns: 26px auto 26% 1fr;
502
556
  }
@@ -524,6 +578,9 @@
524
578
  .items-start {
525
579
  align-items: flex-start;
526
580
  }
581
+ .items-stretch {
582
+ align-items: stretch;
583
+ }
527
584
  .justify-between {
528
585
  justify-content: space-between;
529
586
  }
@@ -566,6 +623,12 @@
566
623
  .gap-\[14px\] {
567
624
  gap: 14px;
568
625
  }
626
+ .gap-\[16px\] {
627
+ gap: 16px;
628
+ }
629
+ .gap-\[20px\] {
630
+ gap: 20px;
631
+ }
569
632
  .gap-x-\[2\%\] {
570
633
  -moz-column-gap: 2%;
571
634
  column-gap: 2%;
@@ -574,12 +637,20 @@
574
637
  -moz-column-gap: 8px;
575
638
  column-gap: 8px;
576
639
  }
640
+ .truncate {
641
+ overflow: hidden;
642
+ text-overflow: ellipsis;
643
+ white-space: nowrap;
644
+ }
577
645
  .overflow-hidden {
578
646
  overflow: hidden;
579
647
  }
580
648
  .overflow-y-hidden {
581
649
  overflow-y: hidden;
582
650
  }
651
+ .rounded-\[4px\] {
652
+ border-radius: 4px;
653
+ }
583
654
  .rounded-\[8px\] {
584
655
  border-radius: 8px;
585
656
  }
@@ -592,6 +663,9 @@
592
663
  .rounded-\[15px\] {
593
664
  border-radius: 15px;
594
665
  }
666
+ .rounded-\[16px\] {
667
+ border-radius: 16px;
668
+ }
595
669
  .rounded-\[18px\] {
596
670
  border-radius: 18px;
597
671
  }
@@ -635,6 +709,10 @@
635
709
  border-top-style: var(--tw-border-style);
636
710
  border-top-width: 8px;
637
711
  }
712
+ .border-r {
713
+ border-right-style: var(--tw-border-style);
714
+ border-right-width: 1px;
715
+ }
638
716
  .border-r-8 {
639
717
  border-right-style: var(--tw-border-style);
640
718
  border-right-width: 8px;
@@ -663,6 +741,10 @@
663
741
  border-bottom-style: var(--tw-border-style);
664
742
  border-bottom-width: 8px;
665
743
  }
744
+ .border-l {
745
+ border-left-style: var(--tw-border-style);
746
+ border-left-width: 1px;
747
+ }
666
748
  .border-l-8 {
667
749
  border-left-style: var(--tw-border-style);
668
750
  border-left-width: 8px;
@@ -679,6 +761,9 @@
679
761
  --tw-border-style: none;
680
762
  border-style: none;
681
763
  }
764
+ .border-\[\#363c48\] {
765
+ border-color: #363c48;
766
+ }
682
767
  .border-\[\#ccc\] {
683
768
  border-color: #ccc;
684
769
  }
@@ -697,9 +782,24 @@
697
782
  .border-l-transparent {
698
783
  border-left-color: transparent;
699
784
  }
785
+ .bg-\[\#0C1421\] {
786
+ background-color: #0C1421;
787
+ }
788
+ .bg-\[\#2d374d\] {
789
+ background-color: #2d374d;
790
+ }
791
+ .bg-\[\#222b3d\] {
792
+ background-color: #222b3d;
793
+ }
700
794
  .bg-\[\#E6E6E6\] {
701
795
  background-color: #E6E6E6;
702
796
  }
797
+ .bg-\[\#FF5C60\] {
798
+ background-color: #FF5C60;
799
+ }
800
+ .bg-\[\#FF8F45\] {
801
+ background-color: #FF8F45;
802
+ }
703
803
  .bg-\[\#FFF2F2\] {
704
804
  background-color: #FFF2F2;
705
805
  }
@@ -718,6 +818,9 @@
718
818
  .bg-\[lightgray\] {
719
819
  background-color: lightgray;
720
820
  }
821
+ .bg-transparent {
822
+ background-color: transparent;
823
+ }
721
824
  .bg-\[length\:200\%_200\%\] {
722
825
  background-size: 200% 200%;
723
826
  }
@@ -740,6 +843,9 @@
740
843
  .p-\[10px_15px\] {
741
844
  padding: 10px 15px;
742
845
  }
846
+ .p-\[14px\] {
847
+ padding: 14px;
848
+ }
743
849
  .p-\[15px\] {
744
850
  padding: 15px;
745
851
  }
@@ -773,9 +879,18 @@
773
879
  .px-\[15px\] {
774
880
  padding-inline: 15px;
775
881
  }
882
+ .px-\[16px\] {
883
+ padding-inline: 16px;
884
+ }
776
885
  .px-\[20px\] {
777
886
  padding-inline: 20px;
778
887
  }
888
+ .px-\[22px\] {
889
+ padding-inline: 22px;
890
+ }
891
+ .py-\[2px\] {
892
+ padding-block: 2px;
893
+ }
779
894
  .py-\[4px\] {
780
895
  padding-block: 4px;
781
896
  }
@@ -788,6 +903,9 @@
788
903
  .py-\[8px\] {
789
904
  padding-block: 8px;
790
905
  }
906
+ .py-\[9px\] {
907
+ padding-block: 9px;
908
+ }
791
909
  .py-\[10px\] {
792
910
  padding-block: 10px;
793
911
  }
@@ -803,6 +921,9 @@
803
921
  .pt-\[10px\] {
804
922
  padding-top: 10px;
805
923
  }
924
+ .pt-\[14px\] {
925
+ padding-top: 14px;
926
+ }
806
927
  .pt-\[20px\] {
807
928
  padding-top: 20px;
808
929
  }
@@ -818,6 +939,9 @@
818
939
  .pt-\[50px\] {
819
940
  padding-top: 50px;
820
941
  }
942
+ .pr-\[10px\] {
943
+ padding-right: 10px;
944
+ }
821
945
  .pr-\[15px\] {
822
946
  padding-right: 15px;
823
947
  }
@@ -827,6 +951,9 @@
827
951
  .pr-\[22px\] {
828
952
  padding-right: 22px;
829
953
  }
954
+ .pb-\[6px\] {
955
+ padding-bottom: 6px;
956
+ }
830
957
  .pb-\[7px\] {
831
958
  padding-bottom: 7px;
832
959
  }
@@ -845,6 +972,9 @@
845
972
  .pl-\[6px\] {
846
973
  padding-left: 6px;
847
974
  }
975
+ .pl-\[22px\] {
976
+ padding-left: 22px;
977
+ }
848
978
  .text-center {
849
979
  text-align: center;
850
980
  }
@@ -881,6 +1011,9 @@
881
1011
  .text-\[14px\] {
882
1012
  font-size: 14px;
883
1013
  }
1014
+ .text-\[15px\] {
1015
+ font-size: 15px;
1016
+ }
884
1017
  .text-\[17\.33px\] {
885
1018
  font-size: 17.33px;
886
1019
  }
@@ -890,9 +1023,21 @@
890
1023
  .text-\[18px\] {
891
1024
  font-size: 18px;
892
1025
  }
1026
+ .text-\[20px\] {
1027
+ font-size: 20px;
1028
+ }
893
1029
  .text-\[22px\] {
894
1030
  font-size: 22px;
895
1031
  }
1032
+ .text-\[25px\] {
1033
+ font-size: 25px;
1034
+ }
1035
+ .text-\[26px\] {
1036
+ font-size: 26px;
1037
+ }
1038
+ .text-\[28px\] {
1039
+ font-size: 28px;
1040
+ }
896
1041
  .text-\[42px\] {
897
1042
  font-size: 42px;
898
1043
  }
@@ -900,6 +1045,10 @@
900
1045
  --tw-leading: 1.3;
901
1046
  line-height: 1.3;
902
1047
  }
1048
+ .leading-\[14px\] {
1049
+ --tw-leading: 14px;
1050
+ line-height: 14px;
1051
+ }
903
1052
  .leading-\[20px\] {
904
1053
  --tw-leading: 20px;
905
1054
  line-height: 20px;
@@ -920,6 +1069,10 @@
920
1069
  --tw-leading: 1;
921
1070
  line-height: 1;
922
1071
  }
1072
+ .font-\[9px\] {
1073
+ --tw-font-weight: 9px;
1074
+ font-weight: 9px;
1075
+ }
923
1076
  .font-\[14px\] {
924
1077
  --tw-font-weight: 14px;
925
1078
  font-weight: 14px;
@@ -941,12 +1094,27 @@
941
1094
  .whitespace-nowrap {
942
1095
  white-space: nowrap;
943
1096
  }
1097
+ .text-\[\#1a1a1a\] {
1098
+ color: #1a1a1a;
1099
+ }
1100
+ .text-\[\#4a4a4a\] {
1101
+ color: #4a4a4a;
1102
+ }
944
1103
  .text-\[\#9f9f9f\] {
945
1104
  color: #9f9f9f;
946
1105
  }
1106
+ .text-\[\#666\] {
1107
+ color: #666;
1108
+ }
1109
+ .text-\[\#272727\] {
1110
+ color: #272727;
1111
+ }
947
1112
  .text-\[\#464647\] {
948
1113
  color: #464647;
949
1114
  }
1115
+ .text-\[\#FF8F45\] {
1116
+ color: #FF8F45;
1117
+ }
950
1118
  .text-\[\#c0c0c0\] {
951
1119
  color: #c0c0c0;
952
1120
  }
@@ -965,6 +1133,9 @@
965
1133
  .text-\[red\] {
966
1134
  color: red;
967
1135
  }
1136
+ .text-\[white\] {
1137
+ color: white;
1138
+ }
968
1139
  .capitalize {
969
1140
  text-transform: capitalize;
970
1141
  }
@@ -984,9 +1155,16 @@
984
1155
  .opacity-0 {
985
1156
  opacity: 0%;
986
1157
  }
1158
+ .opacity-50 {
1159
+ opacity: 50%;
1160
+ }
987
1161
  .opacity-100 {
988
1162
  opacity: 100%;
989
1163
  }
1164
+ .outline {
1165
+ outline-style: var(--tw-outline-style);
1166
+ outline-width: 1px;
1167
+ }
990
1168
  .grayscale {
991
1169
  --tw-grayscale: grayscale(100%);
992
1170
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -1014,6 +1192,10 @@
1014
1192
  transition-timing-function: var(--tw-ease, ease);
1015
1193
  transition-duration: var(--tw-duration, 0s);
1016
1194
  }
1195
+ .duration-200 {
1196
+ --tw-duration: 200ms;
1197
+ transition-duration: 200ms;
1198
+ }
1017
1199
  .duration-300 {
1018
1200
  --tw-duration: 300ms;
1019
1201
  transition-duration: 300ms;
@@ -1022,6 +1204,11 @@
1022
1204
  --tw-outline-style: none;
1023
1205
  outline-style: none;
1024
1206
  }
1207
+ .select-none {
1208
+ -webkit-user-select: none;
1209
+ -moz-user-select: none;
1210
+ user-select: none;
1211
+ }
1025
1212
  .group-hover\:block {
1026
1213
  &:is(:where(.group):hover *) {
1027
1214
  @media (hover: hover) {
@@ -1161,6 +1348,19 @@
1161
1348
  .hide-scrollbar::-webkit-scrollbar {
1162
1349
  display: none;
1163
1350
  }
1351
+ .kupos-time-dd > summary {
1352
+ list-style: none;
1353
+ }
1354
+ .kupos-time-dd > summary::-webkit-details-marker {
1355
+ display: none;
1356
+ }
1357
+ .kupos-time-chevron {
1358
+ transition: transform 200ms ease;
1359
+ flex-shrink: 0;
1360
+ }
1361
+ .kupos-time-dd[open] .kupos-time-chevron {
1362
+ transform: rotate(180deg);
1363
+ }
1164
1364
  .hide-scrollbar {
1165
1365
  -ms-overflow-style: none;
1166
1366
  scrollbar-width: none;
@@ -1233,6 +1433,11 @@
1233
1433
  syntax: "*";
1234
1434
  inherits: false;
1235
1435
  }
1436
+ @property --tw-outline-style {
1437
+ syntax: "*";
1438
+ inherits: false;
1439
+ initial-value: solid;
1440
+ }
1236
1441
  @property --tw-blur {
1237
1442
  syntax: "*";
1238
1443
  inherits: false;
@@ -1324,6 +1529,7 @@
1324
1529
  --tw-numeric-figure: initial;
1325
1530
  --tw-numeric-spacing: initial;
1326
1531
  --tw-numeric-fraction: initial;
1532
+ --tw-outline-style: solid;
1327
1533
  --tw-blur: initial;
1328
1534
  --tw-brightness: initial;
1329
1535
  --tw-contrast: initial;
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- declare const FeatureServiceUiMobile: ({ serviceItem, showTopLabel, colors, isSoldOut, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, }: {
2
+ declare const FeatureServiceUiMobile: ({ serviceItem, showTopLabel, colors, isSoldOut, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, }: {
3
3
  serviceItem: any;
4
4
  showTopLabel: any;
5
5
  colors: any;
@@ -14,5 +14,9 @@ declare const FeatureServiceUiMobile: ({ serviceItem, showTopLabel, colors, isSo
14
14
  onIncreaseTicketQuantity: any;
15
15
  onDecreaseTicketQuantity: any;
16
16
  onBookButtonPress: any;
17
+ selectedTimeSlot?: string;
18
+ onTimeSlotChange: any;
19
+ isTimeDropdownOpen: any;
20
+ onTimeDropdownToggle: any;
17
21
  }) => React.JSX.Element;
18
22
  export default FeatureServiceUiMobile;