mautourco-components 0.2.4 → 0.2.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.
Files changed (297) hide show
  1. package/README.md +190 -190
  2. package/dist/components/atoms/Avatar/Avatar.d.ts +14 -14
  3. package/dist/components/atoms/Avatar/Avatar.js +31 -31
  4. package/dist/components/atoms/Button/Button.css +320 -320
  5. package/dist/components/atoms/Button/Button.d.ts +27 -27
  6. package/dist/components/atoms/Button/Button.js +35 -35
  7. package/dist/components/atoms/Checkbox/Checkbox.d.ts +13 -13
  8. package/dist/components/atoms/Checkbox/Checkbox.js +39 -39
  9. package/dist/components/atoms/Icon/Icon.d.ts +10 -10
  10. package/dist/components/atoms/Icon/Icon.js +123 -123
  11. package/dist/components/atoms/Icon/icons/ArrivalIcon.d.ts +8 -8
  12. package/dist/components/atoms/Icon/icons/ArrivalIcon.js +31 -31
  13. package/dist/components/atoms/Icon/icons/BuildingIcon.d.ts +8 -8
  14. package/dist/components/atoms/Icon/icons/BuildingIcon.js +36 -36
  15. package/dist/components/atoms/Icon/icons/CalendarIcon.d.ts +12 -12
  16. package/dist/components/atoms/Icon/icons/CalendarIcon.js +41 -41
  17. package/dist/components/atoms/Icon/icons/CalendarOutlineIcon.d.ts +8 -8
  18. package/dist/components/atoms/Icon/icons/CalendarOutlineIcon.js +36 -36
  19. package/dist/components/atoms/Icon/icons/CarIcon.d.ts +8 -8
  20. package/dist/components/atoms/Icon/icons/CarIcon.js +30 -30
  21. package/dist/components/atoms/Icon/icons/Check.d.ts +8 -8
  22. package/dist/components/atoms/Icon/icons/Check.js +30 -30
  23. package/dist/components/atoms/Icon/icons/CheckCircleIcon.d.ts +8 -8
  24. package/dist/components/atoms/Icon/icons/CheckCircleIcon.js +30 -30
  25. package/dist/components/atoms/Icon/icons/Chevron.d.ts +9 -9
  26. package/dist/components/atoms/Icon/icons/Chevron.js +54 -54
  27. package/dist/components/atoms/Icon/icons/ChevronDownIcon.d.ts +8 -8
  28. package/dist/components/atoms/Icon/icons/ChevronDownIcon.js +30 -30
  29. package/dist/components/atoms/Icon/icons/Close.d.ts +8 -8
  30. package/dist/components/atoms/Icon/icons/Close.js +30 -30
  31. package/dist/components/atoms/Icon/icons/DeleteIcon.d.ts +8 -8
  32. package/dist/components/atoms/Icon/icons/DeleteIcon.js +30 -30
  33. package/dist/components/atoms/Icon/icons/DepartureIcon.d.ts +8 -8
  34. package/dist/components/atoms/Icon/icons/DepartureIcon.js +30 -30
  35. package/dist/components/atoms/Icon/icons/EyeIcon.d.ts +8 -8
  36. package/dist/components/atoms/Icon/icons/EyeIcon.js +30 -30
  37. package/dist/components/atoms/Icon/icons/FacebookIcon.d.ts +8 -8
  38. package/dist/components/atoms/Icon/icons/FacebookIcon.js +36 -36
  39. package/dist/components/atoms/Icon/icons/HomeIcon.d.ts +8 -8
  40. package/dist/components/atoms/Icon/icons/HomeIcon.js +25 -25
  41. package/dist/components/atoms/Icon/icons/InfoIcon.d.ts +8 -8
  42. package/dist/components/atoms/Icon/icons/InfoIcon.js +30 -30
  43. package/dist/components/atoms/Icon/icons/LinkedInIcon.d.ts +8 -8
  44. package/dist/components/atoms/Icon/icons/LinkedInIcon.js +36 -36
  45. package/dist/components/atoms/Icon/icons/MapPinIcon.d.ts +8 -8
  46. package/dist/components/atoms/Icon/icons/MapPinIcon.js +30 -30
  47. package/dist/components/atoms/Icon/icons/MautoucoLogo.d.ts +8 -8
  48. package/dist/components/atoms/Icon/icons/MautoucoLogo.js +37 -37
  49. package/dist/components/atoms/Icon/icons/MenuIcon.d.ts +8 -8
  50. package/dist/components/atoms/Icon/icons/MenuIcon.js +37 -37
  51. package/dist/components/atoms/Icon/icons/MinusIcon.d.ts +8 -8
  52. package/dist/components/atoms/Icon/icons/MinusIcon.js +25 -25
  53. package/dist/components/atoms/Icon/icons/MoreIcon.d.ts +8 -8
  54. package/dist/components/atoms/Icon/icons/MoreIcon.js +30 -30
  55. package/dist/components/atoms/Icon/icons/PlaneIcon.d.ts +8 -8
  56. package/dist/components/atoms/Icon/icons/PlaneIcon.js +36 -36
  57. package/dist/components/atoms/Icon/icons/PlusIcon.d.ts +8 -8
  58. package/dist/components/atoms/Icon/icons/PlusIcon.js +25 -25
  59. package/dist/components/atoms/Icon/icons/Search.d.ts +8 -8
  60. package/dist/components/atoms/Icon/icons/Search.js +30 -30
  61. package/dist/components/atoms/Icon/icons/Settings.d.ts +8 -8
  62. package/dist/components/atoms/Icon/icons/Settings.js +30 -30
  63. package/dist/components/atoms/Icon/icons/ShipIcon.d.ts +8 -8
  64. package/dist/components/atoms/Icon/icons/ShipIcon.js +36 -36
  65. package/dist/components/atoms/Icon/icons/StrollerIcon.d.ts +8 -8
  66. package/dist/components/atoms/Icon/icons/StrollerIcon.js +30 -30
  67. package/dist/components/atoms/Icon/icons/TwitterIcon.d.ts +8 -8
  68. package/dist/components/atoms/Icon/icons/TwitterIcon.js +36 -36
  69. package/dist/components/atoms/Icon/icons/User.d.ts +8 -8
  70. package/dist/components/atoms/Icon/icons/User.js +30 -30
  71. package/dist/components/atoms/Icon/icons/UserIcon.d.ts +12 -12
  72. package/dist/components/atoms/Icon/icons/UserIcon.js +41 -41
  73. package/dist/components/atoms/Icon/icons/Youtube.d.ts +8 -8
  74. package/dist/components/atoms/Icon/icons/Youtube.js +36 -36
  75. package/dist/components/atoms/Illustration/Illustration.d.ts +14 -14
  76. package/dist/components/atoms/Illustration/Illustration.js +33 -33
  77. package/dist/components/atoms/Illustration/illustrations.d.ts +51 -51
  78. package/dist/components/atoms/Illustration/illustrations.js +97 -97
  79. package/dist/components/atoms/Inputs/DropdownInput/DropdownInput.d.ts +12 -12
  80. package/dist/components/atoms/Inputs/DropdownInput/DropdownInput.js +53 -53
  81. package/dist/components/atoms/Inputs/Input/Input.d.ts +15 -15
  82. package/dist/components/atoms/Inputs/Input/Input.js +27 -27
  83. package/dist/components/atoms/Inputs/Textarea/Textarea.d.ts +14 -14
  84. package/dist/components/atoms/Inputs/Textarea/Textarea.js +15 -15
  85. package/dist/components/atoms/Link/Link.d.ts +44 -44
  86. package/dist/components/atoms/Link/Link.js +76 -76
  87. package/dist/components/atoms/RatingStar/RatingStar.d.ts +40 -40
  88. package/dist/components/atoms/RatingStar/RatingStar.js +54 -54
  89. package/dist/components/atoms/SegmentedButton/SegmentedButton.d.ts +27 -27
  90. package/dist/components/atoms/SegmentedButton/SegmentedButton.js +49 -49
  91. package/dist/components/atoms/SelectedValue/SelectedValue.d.ts +11 -11
  92. package/dist/components/atoms/SelectedValue/SelectedValue.js +29 -29
  93. package/dist/components/atoms/Slider/Slider.d.ts +52 -52
  94. package/dist/components/atoms/Slider/Slider.js +30 -30
  95. package/dist/components/atoms/Spinner/Spinner.d.ts +9 -9
  96. package/dist/components/atoms/Spinner/Spinner.js +38 -38
  97. package/dist/components/atoms/Spinner/variants/ButtonSpinner.d.ts +8 -8
  98. package/dist/components/atoms/Spinner/variants/ButtonSpinner.js +19 -19
  99. package/dist/components/atoms/Spinner/variants/LoadingSpinner.d.ts +7 -7
  100. package/dist/components/atoms/Spinner/variants/LoadingSpinner.js +7 -7
  101. package/dist/components/atoms/Tab/Tab.css +266 -266
  102. package/dist/components/atoms/Tab/Tab.d.ts +22 -22
  103. package/dist/components/atoms/Tab/Tab.js +54 -54
  104. package/dist/components/atoms/Typography/Typography.d.ts +24 -24
  105. package/dist/components/atoms/Typography/Typography.js +100 -100
  106. package/dist/components/molecules/Calendar/CalendarInput.d.ts +34 -34
  107. package/dist/components/molecules/Calendar/CalendarInput.js +49 -49
  108. package/dist/components/molecules/Calendar/DateTime.d.ts +25 -25
  109. package/dist/components/molecules/Calendar/DateTime.js +106 -106
  110. package/dist/components/molecules/Calendar/TimePicker.d.ts +16 -16
  111. package/dist/components/molecules/Calendar/TimePicker.js +91 -91
  112. package/dist/components/molecules/LocationDropdown/LocationDropdown.d.ts +34 -34
  113. package/dist/components/molecules/LocationDropdown/LocationDropdown.js +120 -120
  114. package/dist/components/molecules/LocationDropdown/index.d.ts +2 -2
  115. package/dist/components/molecules/LocationDropdown/index.js +1 -1
  116. package/dist/components/molecules/MultiSelectDropdown/MultiSelectDropdown.d.ts +29 -29
  117. package/dist/components/molecules/MultiSelectDropdown/MultiSelectDropdown.js +106 -106
  118. package/dist/components/molecules/RatingTab/RatingTab.d.ts +39 -39
  119. package/dist/components/molecules/RatingTab/RatingTab.js +41 -41
  120. package/dist/components/molecules/TabGroup/TabGroup.d.ts +17 -17
  121. package/dist/components/molecules/TabGroup/TabGroup.js +30 -30
  122. package/dist/components/molecules/UserCard/UserCard.d.ts +20 -20
  123. package/dist/components/molecules/UserCard/UserCard.js +57 -57
  124. package/dist/components/organisms/CardContainer/CardContainer.d.ts +37 -37
  125. package/dist/components/organisms/CardContainer/CardContainer.js +27 -27
  126. package/dist/components/organisms/DateTimePicker/DateTimePicker.d.ts +15 -15
  127. package/dist/components/organisms/DateTimePicker/DateTimePicker.js +66 -66
  128. package/dist/components/organisms/Dialog/Dialog.d.ts +103 -103
  129. package/dist/components/organisms/Dialog/Dialog.js +162 -162
  130. package/dist/components/organisms/Footer/Footer.d.ts +38 -38
  131. package/dist/components/organisms/Footer/Footer.js +74 -74
  132. package/dist/components/organisms/PaxSelector/PaxSelector.d.ts +63 -63
  133. package/dist/components/organisms/PaxSelector/PaxSelector.js +402 -402
  134. package/dist/components/organisms/RoundTrip/RoundTrip.d.ts +54 -54
  135. package/dist/components/organisms/RoundTrip/RoundTrip.js +179 -179
  136. package/dist/components/organisms/RoundTrip/index.d.ts +2 -2
  137. package/dist/components/organisms/RoundTrip/index.js +1 -1
  138. package/dist/components/organisms/SearchBarTransfer/SearchBarTransfer.d.ts +35 -35
  139. package/dist/components/organisms/SearchBarTransfer/SearchBarTransfer.js +192 -192
  140. package/dist/components/organisms/SearchBarTransfer/index.d.ts +2 -2
  141. package/dist/components/organisms/SearchBarTransfer/index.js +1 -1
  142. package/dist/components/organisms/TopNavigation/DesktopNav.d.ts +33 -33
  143. package/dist/components/organisms/TopNavigation/DesktopNav.js +32 -26
  144. package/dist/components/organisms/TopNavigation/MobileNav.d.ts +32 -32
  145. package/dist/components/organisms/TopNavigation/MobileNav.js +45 -45
  146. package/dist/components/organisms/TopNavigation/TopNavigation.d.ts +33 -33
  147. package/dist/components/organisms/TopNavigation/TopNavigation.js +20 -20
  148. package/dist/components/organisms/TransferLine/TransferLine.d.ts +53 -53
  149. package/dist/components/organisms/TransferLine/TransferLine.js +179 -179
  150. package/dist/components/ui/button.d.ts +10 -10
  151. package/dist/components/ui/button.js +56 -56
  152. package/dist/components/ui/calendar.d.ts +8 -8
  153. package/dist/components/ui/calendar.js +87 -87
  154. package/dist/components/ui/popover.d.ts +7 -7
  155. package/dist/components/ui/popover.js +42 -42
  156. package/dist/hooks/useMobile.d.ts +5 -5
  157. package/dist/hooks/useMobile.js +26 -26
  158. package/dist/index.d.ts +49 -49
  159. package/dist/index.js +46 -46
  160. package/dist/lib/utils.d.ts +7 -7
  161. package/dist/lib/utils.js +13 -13
  162. package/dist/styles/components/avatar.css +122 -122
  163. package/dist/styles/components/calendar.css +140 -140
  164. package/dist/styles/components/checkbox.css +206 -206
  165. package/dist/styles/components/dropdown.css +269 -269
  166. package/dist/styles/components/forms.css +209 -209
  167. package/dist/styles/components/illustration.css +123 -123
  168. package/dist/styles/components/molecule/calendarInput.css +133 -133
  169. package/dist/styles/components/molecule/dateTime.css +126 -126
  170. package/dist/styles/components/molecule/location-dropdown.css +132 -132
  171. package/dist/styles/components/molecule/timePicker.css +122 -122
  172. package/dist/styles/components/multiselect-dropdown.css +286 -286
  173. package/dist/styles/components/organism/card-container.css +148 -148
  174. package/dist/styles/components/organism/dialog.css +168 -168
  175. package/dist/styles/components/organism/footer.css +119 -119
  176. package/dist/styles/components/organism/pax-selector.css +617 -617
  177. package/dist/styles/components/organism/round-trip.css +139 -139
  178. package/dist/styles/components/organism/search-bar-transfer.css +158 -161
  179. package/dist/styles/components/organism/topnavigation.css +143 -143
  180. package/dist/styles/components/organism/transfer-line.css +138 -138
  181. package/dist/styles/components/rating-star.css +145 -145
  182. package/dist/styles/components/rating-tab.css +179 -179
  183. package/dist/styles/components/scrollbar.css +155 -155
  184. package/dist/styles/components/segmented-button.css +214 -214
  185. package/dist/styles/components/selected-value.css +175 -175
  186. package/dist/styles/components/slider.css +182 -182
  187. package/dist/styles/components/typography.css +245 -245
  188. package/dist/styles/tokens/tokens.css +119 -119
  189. package/dist/styles/tokens/tokens.d.ts +3108 -3108
  190. package/dist/styles/tokens/tokens.js +2652 -2652
  191. package/package.json +103 -103
  192. package/src/components/atoms/Avatar/Avatar.tsx +60 -60
  193. package/src/components/atoms/Button/Button.css +200 -200
  194. package/src/components/atoms/Button/Button.tsx +82 -82
  195. package/src/components/atoms/Checkbox/Checkbox.tsx +83 -83
  196. package/src/components/atoms/Icon/Icon.tsx +163 -163
  197. package/src/components/atoms/Icon/icons/ArrivalIcon.tsx +52 -52
  198. package/src/components/atoms/Icon/icons/BuildingIcon.tsx +50 -50
  199. package/src/components/atoms/Icon/icons/CalendarIcon.tsx +63 -63
  200. package/src/components/atoms/Icon/icons/CalendarOutlineIcon.tsx +50 -50
  201. package/src/components/atoms/Icon/icons/CarIcon.tsx +44 -44
  202. package/src/components/atoms/Icon/icons/Check.tsx +36 -36
  203. package/src/components/atoms/Icon/icons/CheckCircleIcon.tsx +48 -48
  204. package/src/components/atoms/Icon/icons/Chevron.tsx +73 -73
  205. package/src/components/atoms/Icon/icons/ChevronDownIcon.tsx +46 -46
  206. package/src/components/atoms/Icon/icons/Close.tsx +39 -39
  207. package/src/components/atoms/Icon/icons/DeleteIcon.tsx +44 -44
  208. package/src/components/atoms/Icon/icons/DepartureIcon.tsx +50 -50
  209. package/src/components/atoms/Icon/icons/EyeIcon.tsx +44 -44
  210. package/src/components/atoms/Icon/icons/FacebookIcon.tsx +50 -50
  211. package/src/components/atoms/Icon/icons/HomeIcon.tsx +52 -52
  212. package/src/components/atoms/Icon/icons/InfoIcon.tsx +44 -44
  213. package/src/components/atoms/Icon/icons/LinkedInIcon.tsx +50 -50
  214. package/src/components/atoms/Icon/icons/MapPinIcon.tsx +44 -44
  215. package/src/components/atoms/Icon/icons/MautoucoLogo.tsx +93 -93
  216. package/src/components/atoms/Icon/icons/MenuIcon.tsx +49 -49
  217. package/src/components/atoms/Icon/icons/MinusIcon.tsx +45 -45
  218. package/src/components/atoms/Icon/icons/MoreIcon.tsx +44 -44
  219. package/src/components/atoms/Icon/icons/PlaneIcon.tsx +50 -50
  220. package/src/components/atoms/Icon/icons/PlusIcon.tsx +45 -45
  221. package/src/components/atoms/Icon/icons/Search.tsx +37 -37
  222. package/src/components/atoms/Icon/icons/Settings.tsx +38 -38
  223. package/src/components/atoms/Icon/icons/ShipIcon.tsx +50 -50
  224. package/src/components/atoms/Icon/icons/StrollerIcon.tsx +44 -44
  225. package/src/components/atoms/Icon/icons/TwitterIcon.tsx +50 -50
  226. package/src/components/atoms/Icon/icons/User.tsx +37 -37
  227. package/src/components/atoms/Icon/icons/UserIcon.tsx +63 -63
  228. package/src/components/atoms/Icon/icons/Youtube.tsx +50 -50
  229. package/src/components/atoms/Illustration/Illustration.tsx +28 -28
  230. package/src/components/atoms/Illustration/illustrations.ts +116 -116
  231. package/src/components/atoms/Inputs/DropdownInput/DropdownInput.tsx +96 -96
  232. package/src/components/atoms/Inputs/Textarea/Textarea.tsx +51 -51
  233. package/src/components/atoms/Link/Link.tsx +168 -168
  234. package/src/components/atoms/RatingStar/RatingStar.tsx +114 -114
  235. package/src/components/atoms/SegmentedButton/SegmentedButton.tsx +94 -94
  236. package/src/components/atoms/SelectedValue/SelectedValue.tsx +59 -59
  237. package/src/components/atoms/Slider/Slider.tsx +95 -95
  238. package/src/components/atoms/Spinner/Spinner.tsx +56 -56
  239. package/src/components/atoms/Spinner/variants/ButtonSpinner.tsx +37 -37
  240. package/src/components/atoms/Spinner/variants/LoadingSpinner.tsx +22 -22
  241. package/src/components/atoms/Tab/Tab.css +147 -147
  242. package/src/components/atoms/Tab/Tab.tsx +96 -96
  243. package/src/components/atoms/Typography/Typography.tsx +153 -153
  244. package/src/components/molecules/Calendar/CalendarInput.tsx +135 -135
  245. package/src/components/molecules/Calendar/DateTime.tsx +172 -172
  246. package/src/components/molecules/Calendar/TimePicker.tsx +174 -174
  247. package/src/components/molecules/LocationDropdown/LocationDropdown.tsx +234 -234
  248. package/src/components/molecules/LocationDropdown/index.ts +2 -2
  249. package/src/components/molecules/RatingTab/RatingTab.tsx +96 -96
  250. package/src/components/molecules/TabGroup/TabGroup.tsx +60 -60
  251. package/src/components/molecules/UserCard/UserCard.stories.tsx +36 -36
  252. package/src/components/molecules/UserCard/UserCard.tsx +173 -173
  253. package/src/components/organisms/CardContainer/CardContainer.tsx +66 -66
  254. package/src/components/organisms/DateTimePicker/DateTimePicker.tsx +110 -110
  255. package/src/components/organisms/Dialog/Dialog.tsx +352 -352
  256. package/src/components/organisms/Footer/Footer.tsx +290 -290
  257. package/src/components/organisms/PaxSelector/PaxSelector.tsx +979 -979
  258. package/src/components/organisms/RoundTrip/RoundTrip.tsx +335 -335
  259. package/src/components/organisms/RoundTrip/index.ts +2 -2
  260. package/src/components/organisms/SearchBarTransfer/SearchBarTransfer.tsx +388 -388
  261. package/src/components/organisms/SearchBarTransfer/index.ts +2 -2
  262. package/src/components/organisms/TopNavigation/DesktopNav.tsx +133 -122
  263. package/src/components/organisms/TopNavigation/MobileNav.tsx +212 -212
  264. package/src/components/organisms/TopNavigation/TopNavigation.tsx +45 -45
  265. package/src/components/organisms/TransferLine/TransferLine.tsx +369 -369
  266. package/src/components/ui/button.tsx +60 -60
  267. package/src/components/ui/calendar.tsx +246 -246
  268. package/src/components/ui/popover.tsx +46 -46
  269. package/src/styles/components/avatar.css +58 -58
  270. package/src/styles/components/calendar.css +85 -85
  271. package/src/styles/components/checkbox.css +130 -130
  272. package/src/styles/components/dropdown.css +214 -214
  273. package/src/styles/components/forms.css +147 -147
  274. package/src/styles/components/illustration.css +7 -7
  275. package/src/styles/components/molecule/calendarInput.css +156 -156
  276. package/src/styles/components/molecule/dateTime.css +14 -14
  277. package/src/styles/components/molecule/location-dropdown.css +204 -204
  278. package/src/styles/components/molecule/timePicker.css +78 -78
  279. package/src/styles/components/multiselect-dropdown.css +230 -230
  280. package/src/styles/components/organism/card-container.css +49 -49
  281. package/src/styles/components/organism/dialog.css +241 -241
  282. package/src/styles/components/organism/footer.css +113 -113
  283. package/src/styles/components/organism/pax-selector.css +702 -702
  284. package/src/styles/components/organism/round-trip.css +55 -55
  285. package/src/styles/components/organism/search-bar-transfer.css +128 -127
  286. package/src/styles/components/organism/topnavigation.css +161 -161
  287. package/src/styles/components/organism/transfer-line.css +86 -86
  288. package/src/styles/components/rating-star.css +39 -39
  289. package/src/styles/components/rating-tab.css +83 -83
  290. package/src/styles/components/scrollbar.css +63 -63
  291. package/src/styles/components/segmented-button.css +134 -134
  292. package/src/styles/components/selected-value.css +80 -80
  293. package/src/styles/components/slider.css +86 -86
  294. package/src/styles/components/typography.css +251 -251
  295. package/src/styles/fonts.css +50 -0
  296. package/src/styles/tokens/tokens.css +119 -119
  297. package/src/styles/tokens/tokens.js +12 -6
@@ -559,15 +559,15 @@
559
559
  --border-radius-rounded-tr-none: 0px;
560
560
  --border-radius-rounded-tr-xl: 12px;
561
561
  --border-radius-rounded-xl: 12px;
562
- --font-weight-font-black: 900px;
563
- --font-weight-font-bold: 700px;
564
- --font-weight-font-extrabold: 800px;
565
- --font-weight-font-extralight: 200px;
566
- --font-weight-font-light: 300px;
567
- --font-weight-font-medium: 500px;
568
- --font-weight-font-normal: 400px;
569
- --font-weight-font-semibold: 600px;
570
- --font-weight-font-thin: 100px;
562
+ --font-weight-font-black: 900;
563
+ --font-weight-font-bold: 700;
564
+ --font-weight-font-extrabold: 800;
565
+ --font-weight-font-extralight: 200;
566
+ --font-weight-font-light: 300;
567
+ --font-weight-font-medium: 500;
568
+ --font-weight-font-normal: 400;
569
+ --font-weight-font-semibold: 600;
570
+ --font-weight-font-thin: 100;
571
571
  --font-leading-leading-base: 16px;
572
572
  --font-leading-leading-xxs: 14px;
573
573
  --font-leading-leading-xxxs: 12px;
@@ -1092,116 +1092,116 @@
1092
1092
  --backdrop-blur-backdrop-blur-none: 0px;
1093
1093
  --backdrop-blur-backdrop-blur-sm: 4px;
1094
1094
  --backdrop-blur-backdrop-blur-xl: 24px;
1095
- --heading-3xl-light: 300px 72px/72px satoshi;
1096
- --heading-3xl-regular: 400px 72px/72px satoshi;
1097
- --heading-3xl-medium: 500px 72px/72px satoshi;
1098
- --heading-3xl-bold: 700px 72px/72px satoshi;
1099
- --heading-3xl-black: 900px 72px/72px satoshi;
1100
- --heading-2xl-light: 300px 60px/64px satoshi;
1101
- --heading-2xl-regular: 400px 60px/64px satoshi;
1102
- --heading-2xl-medium: 500px 60px/64px satoshi;
1103
- --heading-2xl-bold: 700px 60px/64px satoshi;
1104
- --heading-2xl-black: 900px 60px/64px satoshi;
1105
- --heading-xl-light: 300px 48px/52px satoshi;
1106
- --heading-xl-regular: 400px 48px/52px satoshi;
1107
- --heading-xl-medium: 500px 48px/52px satoshi;
1108
- --heading-xl-bold: 700px 48px/52px satoshi;
1109
- --heading-xl-black: 900px 48px/52px satoshi;
1110
- --heading-lg-light: 300px 36px/40px satoshi;
1111
- --heading-lg-regular: 400px 36px/40px satoshi;
1112
- --heading-lg-medium: 500px 36px/40px satoshi;
1113
- --heading-lg-bold: 700px 36px/40px satoshi;
1114
- --heading-lg-black: 900px 36px/40px satoshi;
1115
- --heading-md-light: 300px 30px/36px satoshi;
1116
- --heading-md-regular: 400px 30px/36px satoshi;
1117
- --heading-md-medium: 500px 30px/36px satoshi;
1118
- --heading-md-bold: 700px 30px/36px satoshi;
1119
- --heading-md-black: 900px 30px/36px satoshi;
1120
- --heading-md-leading-none-light: 300px 18px/32px satoshi;
1121
- --heading-md-leading-none-regular: 400px 18px/32px satoshi;
1122
- --heading-md-leading-none-medium: 500px 18px/32px satoshi;
1123
- --heading-md-leading-none-bold: 700px 18px/32px satoshi;
1124
- --heading-md-leading-none-black: 900px 18px/32px satoshi;
1125
- --heading-md-leading-6-light: 300px 18px/24px satoshi;
1126
- --heading-md-leading-6-regular: 400px 18px/24px satoshi;
1127
- --heading-md-leading-6-medium: 500px 18px/24px satoshi;
1128
- --heading-md-leading-6-bold: 700px 18px/24px satoshi;
1129
- --heading-md-leading-6-black: 900px 18px/24px satoshi;
1130
- --heading-md-leading-7-light: 300px 18px/28px satoshi;
1131
- --heading-md-leading-7-regular: 400px 18px/28px satoshi;
1132
- --heading-md-leading-7-medium: 500px 18px/28px satoshi;
1133
- --heading-md-leading-7-bold: 700px 18px/28px satoshi;
1134
- --heading-md-leading-7-black: 900px 18px/28px satoshi;
1135
- --heading-sm-light: 300px 24px/32px satoshi;
1136
- --heading-sm-regular: 400px 24px/32px satoshi;
1137
- --heading-sm-medium: 500px 24px/32px satoshi;
1138
- --heading-sm-bold: 700px 24px/32px satoshi;
1139
- --heading-sm-black: 900px 24px/32px satoshi;
1140
- --body-lg-leading-none-light: 300px 18px/18px satoshi;
1141
- --body-lg-leading-none-regular: 400px 18px/18px satoshi;
1142
- --body-lg-leading-none-medium: 500px 18px/18px satoshi;
1143
- --body-lg-leading-none-bold: 700px 18px/18px satoshi;
1144
- --body-lg-leading-none-black: 900px 18px/18px satoshi;
1145
- --body-lg-leading-6-light: 300px 18px/24px satoshi;
1146
- --body-lg-leading-6-regular: 400px 18px/24px satoshi;
1147
- --body-lg-leading-6-medium: 500px 18px/24px satoshi;
1148
- --body-lg-leading-6-bold: 700px 18px/24px satoshi;
1149
- --body-lg-leading-6-black: 900px 18px/24px satoshi;
1150
- --body-lg-leading-7-light: 300px 18px/28px satoshi;
1151
- --body-lg-leading-7-regular: 400px 18px/28px satoshi;
1152
- --body-lg-leading-7-medium: 500px 18px/28px satoshi;
1153
- --body-lg-leading-7-bold: 700px 18px/28px satoshi;
1154
- --body-lg-leading-7-black: 900px 18px/28px satoshi;
1155
- --body-md-leading-none-light: 300px 16px/16px satoshi;
1156
- --body-md-leading-none-regular: 400px 16px/16px satoshi;
1157
- --body-md-leading-none-medium: 500px 16px/16px satoshi;
1158
- --body-md-leading-none-bold: 700px 16px/16px satoshi;
1159
- --body-md-leading-none-black: 900px 16px/16px satoshi;
1160
- --body-md-leading-6-light: 300px 16px/24px satoshi;
1161
- --body-md-leading-6-regular: 400px 16px/24px satoshi;
1162
- --body-md-leading-6-medium: 500px 16px/24px satoshi;
1163
- --body-md-leading-6-bold: 700px 16px/24px satoshi;
1164
- --body-md-leading-6-black: 900px 16px/24px satoshi;
1165
- --body-md-leading-7-light: 300px 16px/28px satoshi;
1166
- --body-md-leading-7-regular: 400px 16px/28px satoshi;
1167
- --body-md-leading-7-medium: 500px 16px/28px satoshi;
1168
- --body-md-leading-7-bold: 700px 16px/28px satoshi;
1169
- --body-md-leading-7-black: 900px 16px/28px satoshi;
1170
- --heading-xs-light: 300px 24px/32px satoshi;
1171
- --heading-xs-regular: 400px 24px/32px satoshi;
1172
- --heading-xs-medium: 500px 24px/32px satoshi;
1173
- --heading-xs-bold: 700px 24px/32px satoshi;
1174
- --heading-xs-black: 900px 24px/32px satoshi;
1175
- --body-sm-leading-none-light: 300px 14px/14px satoshi;
1176
- --body-sm-leading-none-regular: 400px 14px/14px satoshi;
1177
- --body-sm-leading-none-medium: 500px 14px/14px satoshi;
1178
- --body-sm-leading-none-bold: 700px 14px/14px satoshi;
1179
- --body-sm-leading-none-black: 900px 14px/14px satoshi;
1180
- --body-sm-leading-5-light: 300px 14px/20px satoshi;
1181
- --body-sm-leading-5-regular: 400px 14px/20px satoshi;
1182
- --body-sm-leading-5-medium: 500px 14px/20px satoshi;
1183
- --body-sm-leading-5-bold: 700px 14px/20px satoshi;
1184
- --body-sm-leading-5-black: 900px 14px/20px satoshi;
1185
- --body-sm-leading-6-light: 300px 14px/24px satoshi;
1186
- --body-sm-leading-6-regular: 400px 14px/24px satoshi;
1187
- --body-sm-leading-6-medium: 500px 14px/24px satoshi;
1188
- --body-sm-leading-6-bold: 700px 14px/24px satoshi;
1189
- --body-sm-leading-6-black: 900px 14px/24px satoshi;
1190
- --body-xs-leading-none-light: 300px 12px/12px satoshi;
1191
- --body-xs-leading-none-regular: 400px 12px/12px satoshi;
1192
- --body-xs-leading-none-medium: 500px 12px/12px satoshi;
1193
- --body-xs-leading-none-bold: 700px 12px/12px satoshi;
1194
- --body-xs-leading-none-black: 900px 12px/12px satoshi;
1195
- --body-xs-leading-4-light: 300px 12px/16px satoshi;
1196
- --body-xs-leading-4-regular: 400px 12px/16px satoshi;
1197
- --body-xs-leading-4-medium: 500px 12px/16px satoshi;
1198
- --body-xs-leading-4-bold: 700px 12px/16px satoshi;
1199
- --body-xs-leading-4-black: 900px 12px/16px satoshi;
1200
- --body-xs-leading-5-light: 300px 12px/20px satoshi;
1201
- --body-xs-leading-5-regular: 400px 12px/20px satoshi;
1202
- --body-xs-leading-5-medium: 500px 12px/20px satoshi;
1203
- --body-xs-leading-5-bold: 700px 12px/20px satoshi;
1204
- --body-xs-leading-5-black: 900px 12px/20px satoshi;
1095
+ --heading-3xl-light: [object Object];
1096
+ --heading-3xl-regular: [object Object];
1097
+ --heading-3xl-medium: [object Object];
1098
+ --heading-3xl-bold: [object Object];
1099
+ --heading-3xl-black: [object Object];
1100
+ --heading-2xl-light: [object Object];
1101
+ --heading-2xl-regular: [object Object];
1102
+ --heading-2xl-medium: [object Object];
1103
+ --heading-2xl-bold: [object Object];
1104
+ --heading-2xl-black: [object Object];
1105
+ --heading-xl-light: [object Object];
1106
+ --heading-xl-regular: [object Object];
1107
+ --heading-xl-medium: [object Object];
1108
+ --heading-xl-bold: [object Object];
1109
+ --heading-xl-black: [object Object];
1110
+ --heading-lg-light: [object Object];
1111
+ --heading-lg-regular: [object Object];
1112
+ --heading-lg-medium: [object Object];
1113
+ --heading-lg-bold: [object Object];
1114
+ --heading-lg-black: [object Object];
1115
+ --heading-md-light: [object Object];
1116
+ --heading-md-regular: [object Object];
1117
+ --heading-md-medium: [object Object];
1118
+ --heading-md-bold: [object Object];
1119
+ --heading-md-black: [object Object];
1120
+ --heading-md-leading-none-light: [object Object];
1121
+ --heading-md-leading-none-regular: [object Object];
1122
+ --heading-md-leading-none-medium: [object Object];
1123
+ --heading-md-leading-none-bold: [object Object];
1124
+ --heading-md-leading-none-black: [object Object];
1125
+ --heading-md-leading-6-light: [object Object];
1126
+ --heading-md-leading-6-regular: [object Object];
1127
+ --heading-md-leading-6-medium: [object Object];
1128
+ --heading-md-leading-6-bold: [object Object];
1129
+ --heading-md-leading-6-black: [object Object];
1130
+ --heading-md-leading-7-light: [object Object];
1131
+ --heading-md-leading-7-regular: [object Object];
1132
+ --heading-md-leading-7-medium: [object Object];
1133
+ --heading-md-leading-7-bold: [object Object];
1134
+ --heading-md-leading-7-black: [object Object];
1135
+ --heading-sm-light: [object Object];
1136
+ --heading-sm-regular: [object Object];
1137
+ --heading-sm-medium: [object Object];
1138
+ --heading-sm-bold: [object Object];
1139
+ --heading-sm-black: [object Object];
1140
+ --body-lg-leading-none-light: [object Object];
1141
+ --body-lg-leading-none-regular: [object Object];
1142
+ --body-lg-leading-none-medium: [object Object];
1143
+ --body-lg-leading-none-bold: [object Object];
1144
+ --body-lg-leading-none-black: [object Object];
1145
+ --body-lg-leading-6-light: [object Object];
1146
+ --body-lg-leading-6-regular: [object Object];
1147
+ --body-lg-leading-6-medium: [object Object];
1148
+ --body-lg-leading-6-bold: [object Object];
1149
+ --body-lg-leading-6-black: [object Object];
1150
+ --body-lg-leading-7-light: [object Object];
1151
+ --body-lg-leading-7-regular: [object Object];
1152
+ --body-lg-leading-7-medium: [object Object];
1153
+ --body-lg-leading-7-bold: [object Object];
1154
+ --body-lg-leading-7-black: [object Object];
1155
+ --body-md-leading-none-light: [object Object];
1156
+ --body-md-leading-none-regular: [object Object];
1157
+ --body-md-leading-none-medium: [object Object];
1158
+ --body-md-leading-none-bold: [object Object];
1159
+ --body-md-leading-none-black: [object Object];
1160
+ --body-md-leading-6-light: [object Object];
1161
+ --body-md-leading-6-regular: [object Object];
1162
+ --body-md-leading-6-medium: [object Object];
1163
+ --body-md-leading-6-bold: [object Object];
1164
+ --body-md-leading-6-black: [object Object];
1165
+ --body-md-leading-7-light: [object Object];
1166
+ --body-md-leading-7-regular: [object Object];
1167
+ --body-md-leading-7-medium: [object Object];
1168
+ --body-md-leading-7-bold: [object Object];
1169
+ --body-md-leading-7-black: [object Object];
1170
+ --heading-xs-light: [object Object];
1171
+ --heading-xs-regular: [object Object];
1172
+ --heading-xs-medium: [object Object];
1173
+ --heading-xs-bold: [object Object];
1174
+ --heading-xs-black: [object Object];
1175
+ --body-sm-leading-none-light: [object Object];
1176
+ --body-sm-leading-none-regular: [object Object];
1177
+ --body-sm-leading-none-medium: [object Object];
1178
+ --body-sm-leading-none-bold: [object Object];
1179
+ --body-sm-leading-none-black: [object Object];
1180
+ --body-sm-leading-5-light: [object Object];
1181
+ --body-sm-leading-5-regular: [object Object];
1182
+ --body-sm-leading-5-medium: [object Object];
1183
+ --body-sm-leading-5-bold: [object Object];
1184
+ --body-sm-leading-5-black: [object Object];
1185
+ --body-sm-leading-6-light: [object Object];
1186
+ --body-sm-leading-6-regular: [object Object];
1187
+ --body-sm-leading-6-medium: [object Object];
1188
+ --body-sm-leading-6-bold: [object Object];
1189
+ --body-sm-leading-6-black: [object Object];
1190
+ --body-xs-leading-none-light: [object Object];
1191
+ --body-xs-leading-none-regular: [object Object];
1192
+ --body-xs-leading-none-medium: [object Object];
1193
+ --body-xs-leading-none-bold: [object Object];
1194
+ --body-xs-leading-none-black: [object Object];
1195
+ --body-xs-leading-4-light: [object Object];
1196
+ --body-xs-leading-4-regular: [object Object];
1197
+ --body-xs-leading-4-medium: [object Object];
1198
+ --body-xs-leading-4-bold: [object Object];
1199
+ --body-xs-leading-4-black: [object Object];
1200
+ --body-xs-leading-5-light: [object Object];
1201
+ --body-xs-leading-5-regular: [object Object];
1202
+ --body-xs-leading-5-medium: [object Object];
1203
+ --body-xs-leading-5-bold: [object Object];
1204
+ --body-xs-leading-5-black: [object Object];
1205
1205
  --radii-input: 8px;
1206
1206
  --radii-date-input: 12px;
1207
1207
  --radii-button: 9999px;
@@ -2076,18 +2076,18 @@
2076
2076
 
2077
2077
  /* PaxSelector Component Styles */
2078
2078
 
2079
- .pax-selector {
2080
- position: relative;
2081
- width: 100%;
2082
- min-width: 0;
2079
+ .pax-selector {
2080
+ position: relative;
2081
+ width: 100%;
2082
+ min-width: 0;
2083
2083
  }
2084
2084
 
2085
2085
  /* Set minimum width only on larger screens where there's space */
2086
2086
 
2087
- @media (min-width: 768px) {
2088
- .pax-selector {
2089
- min-width: 190px;
2090
- }
2087
+ @media (min-width: 768px) {
2088
+ .pax-selector {
2089
+ min-width: 190px;
2090
+ }
2091
2091
  }
2092
2092
 
2093
2093
  /* Trigger Button */
@@ -2104,697 +2104,697 @@
2104
2104
  text-align: left;
2105
2105
  }
2106
2106
 
2107
- .pax-selector__label {
2108
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2109
- font-size: 14px;
2110
- line-height: 20px;
2111
- color: var(--input-color-label-default, #262626);
2107
+ .pax-selector__label {
2108
+ font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2109
+ font-size: 14px;
2110
+ line-height: 20px;
2111
+ color: var(--input-color-label-default, #262626);
2112
2112
  }
2113
2113
 
2114
- .pax-selector__input {
2115
- display: flex;
2116
- align-items: center;
2117
- gap: 8px;
2118
- padding: 12px 16px;
2119
- background: var(--dropdown-selector-color-filled-background-default, #ffffff);
2120
- border: 1px solid var(--dropdown-selector-color-filled-border-default, #7f8594);
2121
- border-radius: 12px;
2122
- transition: all 0.2s ease;
2123
- height: 2.75rem;
2114
+ .pax-selector__input {
2115
+ display: flex;
2116
+ align-items: center;
2117
+ gap: 8px;
2118
+ padding: 12px 16px;
2119
+ background: var(--dropdown-selector-color-filled-background-default, #ffffff);
2120
+ border: 1px solid var(--dropdown-selector-color-filled-border-default, #7f8594);
2121
+ border-radius: 12px;
2122
+ transition: all 0.2s ease;
2123
+ height: 2.75rem;
2124
2124
  }
2125
2125
 
2126
- .pax-selector__input:hover {
2127
- border-color: var(--dropdown-selector-color-filled-border-hover, #0f7173);
2126
+ .pax-selector__input:hover {
2127
+ border-color: var(--dropdown-selector-color-filled-border-hover, #0f7173);
2128
2128
  }
2129
2129
 
2130
- .pax-selector__input--active {
2131
- border-color: var(--color-text-default, #262626);
2130
+ .pax-selector__input--active {
2131
+ border-color: var(--color-text-default, #262626);
2132
2132
  }
2133
2133
 
2134
- .pax-selector__input-content {
2135
- display: flex;
2136
- align-items: center;
2137
- gap: 8px;
2138
- flex: 1;
2134
+ .pax-selector__input-content {
2135
+ display: flex;
2136
+ align-items: center;
2137
+ gap: 8px;
2138
+ flex: 1;
2139
2139
  }
2140
2140
 
2141
- .pax-selector__input-icon {
2142
- color: var(--color-text-default, #262626);
2141
+ .pax-selector__input-icon {
2142
+ color: var(--color-text-default, #262626);
2143
2143
  }
2144
2144
 
2145
- .pax-selector__input-text {
2146
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2147
- font-weight: 500;
2148
- font-size: 14px;
2149
- line-height: 20px;
2150
- color: var(--color-text-default, #262626);
2145
+ .pax-selector__input-text {
2146
+ font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2147
+ font-weight: 500;
2148
+ font-size: 14px;
2149
+ line-height: 20px;
2150
+ color: var(--color-text-default, #262626);
2151
2151
  }
2152
2152
 
2153
- .pax-selector__input-placeholder {
2154
- color: var(--dropdown-selector-color-filled-foreground-default, #737373);
2153
+ .pax-selector__input-placeholder {
2154
+ color: var(--dropdown-selector-color-filled-foreground-default, #737373);
2155
2155
  }
2156
2156
 
2157
- .pax-selector__chevron {
2158
- color: var(--color-text-default, #262626);
2159
- transition: transform 0.2s ease;
2157
+ .pax-selector__chevron {
2158
+ color: var(--color-text-default, #262626);
2159
+ transition: transform 0.2s ease;
2160
2160
  }
2161
2161
 
2162
- .pax-selector__chevron--open {
2163
- transform: rotate(180deg)!important;
2162
+ .pax-selector__chevron--open {
2163
+ transform: rotate(180deg)!important;
2164
2164
  }
2165
2165
 
2166
2166
  /* Dropdown Panel */
2167
2167
 
2168
- .pax-selector__dropdown {
2169
- position: absolute;
2170
- top: calc(100% + 8px);
2171
- left: 0;
2172
- width: 280px;
2173
- background: var(--color-elevation-level-1, #ffffff);
2174
- border: 1px solid var(--color-border-subtle, #e5e5e5);
2175
- border-radius: 12px;
2176
- padding: 16px;
2177
- box-shadow: 0px 4px 8px rgba(48, 54, 66, 0.1), 0px 1px 8px rgba(48, 54, 66, 0.11);
2178
- z-index: 100;
2179
- animation: pax-selector-dropdown-enter 0.2s ease-out;
2180
- }
2181
-
2182
- @keyframes pax-selector-dropdown-enter {
2183
- from {
2184
- opacity: 0;
2185
- transform: translateY(-8px);
2186
- }
2187
- to {
2188
- opacity: 1;
2189
- transform: translateY(0);
2190
- }
2168
+ .pax-selector__dropdown {
2169
+ position: absolute;
2170
+ top: calc(100% + 8px);
2171
+ left: 0;
2172
+ width: 280px;
2173
+ background: var(--color-elevation-level-1, #ffffff);
2174
+ border: 1px solid var(--color-border-subtle, #e5e5e5);
2175
+ border-radius: 12px;
2176
+ padding: 16px;
2177
+ box-shadow: 0px 4px 8px rgba(48, 54, 66, 0.1), 0px 1px 8px rgba(48, 54, 66, 0.11);
2178
+ z-index: 100;
2179
+ animation: pax-selector-dropdown-enter 0.2s ease-out;
2180
+ }
2181
+
2182
+ @keyframes pax-selector-dropdown-enter {
2183
+ from {
2184
+ opacity: 0;
2185
+ transform: translateY(-8px);
2186
+ }
2187
+ to {
2188
+ opacity: 1;
2189
+ transform: translateY(0);
2190
+ }
2191
2191
  }
2192
2192
 
2193
2193
  /* Add Room Link */
2194
2194
 
2195
- .pax-selector__add-room {
2196
- display: flex;
2197
- align-items: center;
2198
- justify-content: flex-end;
2199
- gap: 8px;
2200
- width: 100%;
2201
- padding: 0;
2202
- margin-bottom: 24px;
2203
- background: none;
2204
- border: none;
2205
- cursor: pointer;
2206
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2207
- font-weight: 500;
2208
- font-size: 14px;
2209
- line-height: 20px;
2210
- color: var(--link-color-normal-default, #303642);
2211
- text-decoration: underline;
2212
- transition: opacity 0.2s ease;
2195
+ .pax-selector__add-room {
2196
+ display: flex;
2197
+ align-items: center;
2198
+ justify-content: flex-end;
2199
+ gap: 8px;
2200
+ width: 100%;
2201
+ padding: 0;
2202
+ margin-bottom: 24px;
2203
+ background: none;
2204
+ border: none;
2205
+ cursor: pointer;
2206
+ font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2207
+ font-weight: 500;
2208
+ font-size: 14px;
2209
+ line-height: 20px;
2210
+ color: var(--link-color-normal-default, #303642);
2211
+ text-decoration: underline;
2212
+ transition: opacity 0.2s ease;
2213
2213
  }
2214
2214
 
2215
- .pax-selector__add-room:hover {
2216
- opacity: 0.8;
2215
+ .pax-selector__add-room:hover {
2216
+ opacity: 0.8;
2217
2217
  }
2218
2218
 
2219
- .pax-selector__add-room-icon {
2220
- color: var(--link-color-normal-default, #303642);
2219
+ .pax-selector__add-room-icon {
2220
+ color: var(--link-color-normal-default, #303642);
2221
2221
  }
2222
2222
 
2223
2223
  /* Stepper Controls */
2224
2224
 
2225
- .pax-selector__steppers {
2226
- display: flex;
2227
- flex-direction: column;
2228
- gap: 16px;
2229
- margin-bottom: 32px;
2225
+ .pax-selector__steppers {
2226
+ display: flex;
2227
+ flex-direction: column;
2228
+ gap: 16px;
2229
+ margin-bottom: 32px;
2230
2230
  }
2231
2231
 
2232
- .pax-selector__stepper {
2233
- display: flex;
2234
- align-items: center;
2235
- justify-content: space-between;
2232
+ .pax-selector__stepper {
2233
+ display: flex;
2234
+ align-items: center;
2235
+ justify-content: space-between;
2236
2236
  }
2237
2237
 
2238
- .pax-selector__stepper-label {
2239
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2240
- font-weight: 700;
2241
- font-size: 16px;
2242
- line-height: 24px;
2243
- color: var(--color-text-default, #262626);
2238
+ .pax-selector__stepper-label {
2239
+ font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2240
+ font-weight: 700;
2241
+ font-size: 16px;
2242
+ line-height: 24px;
2243
+ color: var(--color-text-default, #262626);
2244
2244
  }
2245
2245
 
2246
- .pax-selector__stepper-controls {
2247
- display: flex;
2248
- align-items: center;
2249
- gap: 8px;
2246
+ .pax-selector__stepper-controls {
2247
+ display: flex;
2248
+ align-items: center;
2249
+ gap: 8px;
2250
2250
  }
2251
2251
 
2252
- .pax-selector__stepper-btn {
2253
- display: flex;
2254
- align-items: center;
2255
- justify-content: center;
2256
- width: 32px;
2257
- height: 32px;
2258
- padding: 0;
2259
- border: none;
2260
- border-radius: 9999px;
2261
- background: var(--stepper-color-cta-background-default, #ffffff);
2262
- color: var(--stepper-color-cta-foreground-default, #000000);
2263
- cursor: pointer;
2264
- box-shadow: 0px 1px 8px rgba(48, 54, 66, 0.11), 0px 4px 8px rgba(48, 54, 66, 0.1);
2265
- transition: all 0.2s ease;
2252
+ .pax-selector__stepper-btn {
2253
+ display: flex;
2254
+ align-items: center;
2255
+ justify-content: center;
2256
+ width: 32px;
2257
+ height: 32px;
2258
+ padding: 0;
2259
+ border: none;
2260
+ border-radius: 9999px;
2261
+ background: var(--stepper-color-cta-background-default, #ffffff);
2262
+ color: var(--stepper-color-cta-foreground-default, #000000);
2263
+ cursor: pointer;
2264
+ box-shadow: 0px 1px 8px rgba(48, 54, 66, 0.11), 0px 4px 8px rgba(48, 54, 66, 0.1);
2265
+ transition: all 0.2s ease;
2266
2266
  }
2267
2267
 
2268
- .pax-selector__stepper-btn:hover:not(:disabled) {
2269
- background: var(--stepper-color-cta-background-hover, #115b5e);
2270
- color: var(--stepper-color-cta-foreground-hover, #ffffff);
2268
+ .pax-selector__stepper-btn:hover:not(:disabled) {
2269
+ background: var(--stepper-color-cta-background-hover, #115b5e);
2270
+ color: var(--stepper-color-cta-foreground-hover, #ffffff);
2271
2271
  }
2272
2272
 
2273
- .pax-selector__stepper-btn:active:not(:disabled) {
2274
- background: var(--stepper-color-cta-background-pressed, #042c2f);
2275
- color: var(--stepper-color-cta-foreground-pressed, #ffffff);
2273
+ .pax-selector__stepper-btn:active:not(:disabled) {
2274
+ background: var(--stepper-color-cta-background-pressed, #042c2f);
2275
+ color: var(--stepper-color-cta-foreground-pressed, #ffffff);
2276
2276
  }
2277
2277
 
2278
- .pax-selector__stepper-btn:disabled {
2279
- background: var(--stepper-color-cta-background-disabled, #fbfbfb);
2280
- color: var(--stepper-color-cta-foreground-disabled, #aaaeb8);
2281
- cursor: not-allowed;
2278
+ .pax-selector__stepper-btn:disabled {
2279
+ background: var(--stepper-color-cta-background-disabled, #fbfbfb);
2280
+ color: var(--stepper-color-cta-foreground-disabled, #aaaeb8);
2281
+ cursor: not-allowed;
2282
2282
  }
2283
2283
 
2284
- .pax-selector__stepper-count {
2285
- display: flex;
2286
- align-items: center;
2287
- justify-content: center;
2288
- min-width: 48px;
2289
- padding: 4px 24px;
2290
- background: var(--stepper-color-counter, #ffffff);
2291
- border-radius: 8px;
2292
- box-shadow: 0px 0px 4px rgba(48, 54, 66, 0.11), 0px 2px 2px rgba(48, 54, 66, 0.1);
2293
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2294
- font-weight: 700;
2295
- font-size: 18px;
2296
- line-height: 24px;
2297
- color: var(--color-text-default, #262626);
2298
- text-align: center;
2284
+ .pax-selector__stepper-count {
2285
+ display: flex;
2286
+ align-items: center;
2287
+ justify-content: center;
2288
+ min-width: 48px;
2289
+ padding: 4px 24px;
2290
+ background: var(--stepper-color-counter, #ffffff);
2291
+ border-radius: 8px;
2292
+ box-shadow: 0px 0px 4px rgba(48, 54, 66, 0.11), 0px 2px 2px rgba(48, 54, 66, 0.1);
2293
+ font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2294
+ font-weight: 700;
2295
+ font-size: 18px;
2296
+ line-height: 24px;
2297
+ color: var(--color-text-default, #262626);
2298
+ text-align: center;
2299
2299
  }
2300
2300
 
2301
2301
  /* Client Type Selector */
2302
2302
 
2303
- .pax-selector__client-type {
2304
- margin-bottom: 32px;
2305
- }
2303
+ .pax-selector__client-type {
2304
+ margin-bottom: 32px;
2305
+ }
2306
2306
 
2307
- .pax-selector__client-type-label {
2308
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2309
- font-size: 14px;
2310
- line-height: 20px;
2311
- color: var(--input-color-label-default, #262626);
2312
- margin-bottom: 8px;
2307
+ .pax-selector__client-type-label {
2308
+ font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2309
+ font-size: 14px;
2310
+ line-height: 20px;
2311
+ color: var(--input-color-label-default, #262626);
2312
+ margin-bottom: 8px;
2313
2313
  }
2314
2314
 
2315
- .pax-selector__client-type-select {
2316
- position: relative;
2317
- width: 100%;
2315
+ .pax-selector__client-type-select {
2316
+ position: relative;
2317
+ width: 100%;
2318
2318
  }
2319
2319
 
2320
- .pax-selector__client-type-trigger {
2321
- display: flex;
2322
- align-items: center;
2323
- gap: 8px;
2324
- width: 100%;
2325
- padding: 12px 16px;
2326
- background: var(--dropdown-selector-color-filled-background-default, #ffffff);
2327
- border: 1px solid var(--dropdown-selector-color-filled-border-default, #262626);
2328
- border-radius: 12px;
2329
- cursor: pointer;
2330
- transition: all 0.2s ease;
2320
+ .pax-selector__client-type-trigger {
2321
+ display: flex;
2322
+ align-items: center;
2323
+ gap: 8px;
2324
+ width: 100%;
2325
+ padding: 12px 16px;
2326
+ background: var(--dropdown-selector-color-filled-background-default, #ffffff);
2327
+ border: 1px solid var(--dropdown-selector-color-filled-border-default, #262626);
2328
+ border-radius: 12px;
2329
+ cursor: pointer;
2330
+ transition: all 0.2s ease;
2331
2331
  }
2332
2332
 
2333
- .pax-selector__client-type-trigger:hover {
2334
- border-color: var(--dropdown-selector-color-filled-border-hover, #0f7173);
2333
+ .pax-selector__client-type-trigger:hover {
2334
+ border-color: var(--dropdown-selector-color-filled-border-hover, #0f7173);
2335
2335
  }
2336
2336
 
2337
- .pax-selector__client-type-content {
2338
- display: flex;
2339
- align-items: center;
2340
- gap: 8px;
2341
- flex: 1;
2337
+ .pax-selector__client-type-content {
2338
+ display: flex;
2339
+ align-items: center;
2340
+ gap: 8px;
2341
+ flex: 1;
2342
2342
  }
2343
2343
 
2344
- .pax-selector__client-type-icon {
2345
- color: var(--color-text-default, #262626);
2344
+ .pax-selector__client-type-icon {
2345
+ color: var(--color-text-default, #262626);
2346
2346
  }
2347
2347
 
2348
- .pax-selector__client-type-text {
2349
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2350
- font-weight: 400;
2351
- font-size: 14px;
2352
- line-height: 20px;
2353
- color: var(--color-text-default, #262626);
2348
+ .pax-selector__client-type-text {
2349
+ font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2350
+ font-weight: 400;
2351
+ font-size: 14px;
2352
+ line-height: 20px;
2353
+ color: var(--color-text-default, #262626);
2354
2354
  }
2355
2355
 
2356
- .pax-selector__client-type-chevron {
2357
- color: var(--color-text-default, #262626);
2358
- transition: transform 0.2s ease;
2356
+ .pax-selector__client-type-chevron {
2357
+ color: var(--color-text-default, #262626);
2358
+ transition: transform 0.2s ease;
2359
2359
  }
2360
2360
 
2361
- .pax-selector__client-type-chevron--open {
2362
- transform: rotate(180deg);
2361
+ .pax-selector__client-type-chevron--open {
2362
+ transform: rotate(180deg);
2363
2363
  }
2364
2364
 
2365
- .pax-selector__client-type-dropdown {
2366
- position: absolute;
2367
- top: calc(100% + 4px);
2368
- left: 0;
2369
- right: 0;
2370
- background: var(--color-elevation-level-1, #ffffff);
2371
- border: 1px solid var(--color-border-subtle, #e5e5e5);
2372
- border-radius: 8px;
2373
- overflow: hidden;
2374
- z-index: 10;
2375
- box-shadow: 0px 4px 8px rgba(48, 54, 66, 0.1);
2376
- animation: pax-selector-client-dropdown-enter 0.15s ease-out;
2365
+ .pax-selector__client-type-dropdown {
2366
+ position: absolute;
2367
+ top: calc(100% + 4px);
2368
+ left: 0;
2369
+ right: 0;
2370
+ background: var(--color-elevation-level-1, #ffffff);
2371
+ border: 1px solid var(--color-border-subtle, #e5e5e5);
2372
+ border-radius: 8px;
2373
+ overflow: hidden;
2374
+ z-index: 10;
2375
+ box-shadow: 0px 4px 8px rgba(48, 54, 66, 0.1);
2376
+ animation: pax-selector-client-dropdown-enter 0.15s ease-out;
2377
2377
  }
2378
2378
 
2379
- @keyframes pax-selector-client-dropdown-enter {
2380
- from {
2381
- opacity: 0;
2382
- transform: translateY(-4px);
2383
- }
2384
- to {
2385
- opacity: 1;
2386
- transform: translateY(0);
2387
- }
2379
+ @keyframes pax-selector-client-dropdown-enter {
2380
+ from {
2381
+ opacity: 0;
2382
+ transform: translateY(-4px);
2383
+ }
2384
+ to {
2385
+ opacity: 1;
2386
+ transform: translateY(0);
2387
+ }
2388
2388
  }
2389
2389
 
2390
- .pax-selector__client-type-option {
2391
- display: flex;
2392
- align-items: center;
2393
- gap: 8px;
2394
- width: 100%;
2395
- padding: 12px 16px;
2396
- background: var(--dropdown-selector-color-select-item-background-default, #ffffff);
2397
- border: none;
2398
- cursor: pointer;
2399
- text-align: left;
2400
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2401
- font-weight: 400;
2402
- font-size: 14px;
2403
- line-height: 20px;
2404
- color: var(--color-text-default, #262626);
2405
- transition: all 0.2s ease;
2390
+ .pax-selector__client-type-option {
2391
+ display: flex;
2392
+ align-items: center;
2393
+ gap: 8px;
2394
+ width: 100%;
2395
+ padding: 12px 16px;
2396
+ background: var(--dropdown-selector-color-select-item-background-default, #ffffff);
2397
+ border: none;
2398
+ cursor: pointer;
2399
+ text-align: left;
2400
+ font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2401
+ font-weight: 400;
2402
+ font-size: 14px;
2403
+ line-height: 20px;
2404
+ color: var(--color-text-default, #262626);
2405
+ transition: all 0.2s ease;
2406
2406
  }
2407
2407
 
2408
- .pax-selector__client-type-option:hover {
2409
- background: var(--dropdown-selector-color-select-item-background-hover, #115b5e);
2410
- color: #ffffff;
2408
+ .pax-selector__client-type-option:hover {
2409
+ background: var(--dropdown-selector-color-select-item-background-hover, #115b5e);
2410
+ color: #ffffff;
2411
2411
  }
2412
2412
 
2413
- .pax-selector__client-type-option--selected {
2414
- background: var(--dropdown-selector-color-select-item-background-selected, #0f7173);
2415
- color: #ffffff;
2413
+ .pax-selector__client-type-option--selected {
2414
+ background: var(--dropdown-selector-color-select-item-background-selected, #0f7173);
2415
+ color: #ffffff;
2416
2416
  }
2417
2417
 
2418
2418
  /* Bottom Actions */
2419
2419
 
2420
- .pax-selector__actions {
2421
- display: flex;
2422
- align-items: center;
2423
- justify-content: flex-end;
2424
- gap: 16px;
2420
+ .pax-selector__actions {
2421
+ display: flex;
2422
+ align-items: center;
2423
+ justify-content: flex-end;
2424
+ gap: 16px;
2425
2425
  }
2426
2426
 
2427
- .pax-selector__clear-btn {
2428
- padding: 0;
2429
- background: none;
2430
- border: none;
2431
- cursor: pointer;
2432
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2433
- font-weight: 700;
2434
- font-size: 14px;
2435
- line-height: 20px;
2436
- color: var(--color-button-ghost-foreground-default, #57534e);
2437
- transition: opacity 0.2s ease;
2427
+ .pax-selector__clear-btn {
2428
+ padding: 0;
2429
+ background: none;
2430
+ border: none;
2431
+ cursor: pointer;
2432
+ font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2433
+ font-weight: 700;
2434
+ font-size: 14px;
2435
+ line-height: 20px;
2436
+ color: var(--color-button-ghost-foreground-default, #57534e);
2437
+ transition: opacity 0.2s ease;
2438
2438
  }
2439
2439
 
2440
- .pax-selector__clear-btn:hover {
2441
- opacity: 0.8;
2440
+ .pax-selector__clear-btn:hover {
2441
+ opacity: 0.8;
2442
2442
  }
2443
2443
 
2444
- .pax-selector__done-btn {
2445
- display: flex;
2446
- align-items: center;
2447
- justify-content: center;
2448
- padding: 8px 12px;
2449
- background: var(--color-button-brand-background-secondary-default, #0d9394);
2450
- color: var(--color-button-brand-foreground-secondary-default, #ffffff);
2451
- border: none;
2452
- border-radius: 9999px;
2453
- cursor: pointer;
2454
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2455
- font-weight: 700;
2456
- font-size: 14px;
2457
- line-height: 20px;
2458
- min-width: 114px;
2459
- transition: all 0.2s ease;
2444
+ .pax-selector__done-btn {
2445
+ display: flex;
2446
+ align-items: center;
2447
+ justify-content: center;
2448
+ padding: 8px 12px;
2449
+ background: var(--color-button-brand-background-secondary-default, #0d9394);
2450
+ color: var(--color-button-brand-foreground-secondary-default, #ffffff);
2451
+ border: none;
2452
+ border-radius: 9999px;
2453
+ cursor: pointer;
2454
+ font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2455
+ font-weight: 700;
2456
+ font-size: 14px;
2457
+ line-height: 20px;
2458
+ min-width: 114px;
2459
+ transition: all 0.2s ease;
2460
2460
  }
2461
2461
 
2462
- .pax-selector__done-btn:hover {
2463
- background: var(--color-button-brand-background-secondary-hover, #0f7173);
2462
+ .pax-selector__done-btn:hover {
2463
+ background: var(--color-button-brand-background-secondary-hover, #0f7173);
2464
2464
  }
2465
2465
 
2466
- .pax-selector__done-btn:active {
2467
- background: var(--color-button-brand-background-secondary-pressed, #042c2f);
2466
+ .pax-selector__done-btn:active {
2467
+ background: var(--color-button-brand-background-secondary-pressed, #042c2f);
2468
2468
  }
2469
2469
 
2470
2470
  /* Overlay for closing dropdown when clicking outside */
2471
2471
 
2472
- .pax-selector__overlay {
2473
- position: fixed;
2474
- top: 0;
2475
- left: 0;
2476
- right: 0;
2477
- bottom: 0;
2478
- z-index: 50;
2472
+ .pax-selector__overlay {
2473
+ position: fixed;
2474
+ top: 0;
2475
+ left: 0;
2476
+ right: 0;
2477
+ bottom: 0;
2478
+ z-index: 50;
2479
2479
  }
2480
2480
 
2481
2481
  /* Age Selector Styles */
2482
2482
 
2483
- .pax-selector__age-selector {
2484
- display: flex;
2485
- flex-direction: column;
2486
- gap: 8px;
2487
- width: 80px;
2488
- position: relative;
2483
+ .pax-selector__age-selector {
2484
+ display: flex;
2485
+ flex-direction: column;
2486
+ gap: 8px;
2487
+ width: 80px;
2488
+ position: relative;
2489
2489
  }
2490
2490
 
2491
- .pax-selector__age-label {
2492
- font-family: var(--typography-body-family, 'Satoshi', sans-serif);
2493
- font-weight: var(--font-weight-font-normal, 400);
2494
- font-size: 14px;
2495
- line-height: 20px;
2496
- color: var(--dropdown-color-label-default, #262626);
2491
+ .pax-selector__age-label {
2492
+ font-family: var(--typography-body-family, 'Satoshi', sans-serif);
2493
+ font-weight: var(--font-weight-font-normal, 400);
2494
+ font-size: 14px;
2495
+ line-height: 20px;
2496
+ color: var(--dropdown-color-label-default, #262626);
2497
2497
  }
2498
2498
 
2499
- .pax-selector__age-required {
2500
- color: var(--chip-color-red-outline-foreground, #991b1b);
2499
+ .pax-selector__age-required {
2500
+ color: var(--chip-color-red-outline-foreground, #991b1b);
2501
2501
  }
2502
2502
 
2503
2503
  /* Age Selector using DropdownInput structure */
2504
2504
 
2505
- .pax-selector__age-dropdown-container {
2506
- width: 100%;
2505
+ .pax-selector__age-dropdown-container {
2506
+ width: 100%;
2507
2507
  }
2508
2508
 
2509
- .pax-selector__age-dropdown-input {
2510
- min-height: auto;
2511
- padding: 12px 8px 12px 16px;
2512
- border: 1px solid var(--dropdown-color-border-value, #262626);
2513
- border-radius: 12px;
2514
- cursor: default;
2509
+ .pax-selector__age-dropdown-input {
2510
+ min-height: auto;
2511
+ padding: 12px 8px 12px 16px;
2512
+ border: 1px solid var(--dropdown-color-border-value, #262626);
2513
+ border-radius: 12px;
2514
+ cursor: default;
2515
2515
  }
2516
2516
 
2517
- .pax-selector__age-dropdown-input:hover {
2518
- border-color: var(--dropdown-color-border-hover, #0f7173);
2517
+ .pax-selector__age-dropdown-input:hover {
2518
+ border-color: var(--dropdown-color-border-hover, #0f7173);
2519
2519
  }
2520
2520
 
2521
- .pax-selector__age-dropdown-input:focus-within {
2522
- border-color: var(--dropdown-color-border-hover, #0f7173);
2521
+ .pax-selector__age-dropdown-input:focus-within {
2522
+ border-color: var(--dropdown-color-border-hover, #0f7173);
2523
2523
  }
2524
2524
 
2525
- .pax-selector__age-input-text {
2526
- padding: 0;
2527
- background: transparent;
2528
- border: none;
2529
- outline: none;
2530
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2531
- font-weight: var(--font-weight-font-medium, 500);
2532
- font-size: 14px;
2533
- line-height: 20px;
2534
- color: var(--dropdown-color-foreground-value, #262626);
2535
- white-space: nowrap;
2536
- overflow: visible;
2537
- text-overflow: clip;
2538
- cursor: text;
2539
- width: 100%;
2525
+ .pax-selector__age-input-text {
2526
+ padding: 0;
2527
+ background: transparent;
2528
+ border: none;
2529
+ outline: none;
2530
+ font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2531
+ font-weight: var(--font-weight-font-medium, 500);
2532
+ font-size: 14px;
2533
+ line-height: 20px;
2534
+ color: var(--dropdown-color-foreground-value, #262626);
2535
+ white-space: nowrap;
2536
+ overflow: visible;
2537
+ text-overflow: clip;
2538
+ cursor: text;
2539
+ width: 100%;
2540
2540
  }
2541
2541
 
2542
- .pax-selector__age-input-text::placeholder {
2543
- color: var(--dropdown-selector-color-filled-foreground-default, #737373);
2542
+ .pax-selector__age-input-text::placeholder {
2543
+ color: var(--dropdown-selector-color-filled-foreground-default, #737373);
2544
2544
  }
2545
2545
 
2546
- .pax-selector__age-dropdown-btn {
2547
- display: flex;
2548
- align-items: center;
2549
- justify-content: center;
2550
- padding: 0;
2551
- margin-left: 8px;
2552
- background: transparent;
2553
- border: none;
2554
- cursor: pointer;
2555
- transition: all 0.2s ease;
2556
- flex-shrink: 0;
2546
+ .pax-selector__age-dropdown-btn {
2547
+ display: flex;
2548
+ align-items: center;
2549
+ justify-content: center;
2550
+ padding: 0;
2551
+ margin-left: 8px;
2552
+ background: transparent;
2553
+ border: none;
2554
+ cursor: pointer;
2555
+ transition: all 0.2s ease;
2556
+ flex-shrink: 0;
2557
2557
  }
2558
2558
 
2559
- .pax-selector__age-dropdown-btn:hover {
2560
- opacity: 0.8;
2559
+ .pax-selector__age-dropdown-btn:hover {
2560
+ opacity: 0.8;
2561
2561
  }
2562
2562
 
2563
- .pax-selector__age-dropdown-btn .dropdown-input__icon--chevron {
2564
- transition: transform 0.2s ease;
2563
+ .pax-selector__age-dropdown-btn .dropdown-input__icon--chevron {
2564
+ transition: transform 0.2s ease;
2565
2565
  }
2566
2566
 
2567
- .pax-selector__age-dropdown-input--open .pax-selector__age-dropdown-btn .dropdown-input__icon--chevron {
2568
- transform: rotate(180deg);
2567
+ .pax-selector__age-dropdown-input--open .pax-selector__age-dropdown-btn .dropdown-input__icon--chevron {
2568
+ transform: rotate(180deg);
2569
2569
  }
2570
2570
 
2571
- .pax-selector__age-trigger {
2572
- display: flex;
2573
- align-items: center;
2574
- justify-content: space-between;
2575
- gap: 8px;
2576
- width: 100%;
2577
- padding: 12px 16px;
2578
- background: var(--dropdown-color-background-value, #ffffff);
2579
- border: 1px solid var(--dropdown-color-border-value, #262626);
2580
- border-radius: 12px;
2581
- cursor: pointer;
2582
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2583
- font-weight: var(--font-weight-font-medium, 500);
2584
- font-size: 14px;
2585
- line-height: 20px;
2586
- color: var(--dropdown-color-foreground-value, #262626);
2587
- transition: all 0.2s ease;
2571
+ .pax-selector__age-trigger {
2572
+ display: flex;
2573
+ align-items: center;
2574
+ justify-content: space-between;
2575
+ gap: 8px;
2576
+ width: 100%;
2577
+ padding: 12px 16px;
2578
+ background: var(--dropdown-color-background-value, #ffffff);
2579
+ border: 1px solid var(--dropdown-color-border-value, #262626);
2580
+ border-radius: 12px;
2581
+ cursor: pointer;
2582
+ font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2583
+ font-weight: var(--font-weight-font-medium, 500);
2584
+ font-size: 14px;
2585
+ line-height: 20px;
2586
+ color: var(--dropdown-color-foreground-value, #262626);
2587
+ transition: all 0.2s ease;
2588
2588
  }
2589
2589
 
2590
- .pax-selector__age-trigger:hover {
2591
- border-color: var(--dropdown-color-border-hover, #0f7173);
2590
+ .pax-selector__age-trigger:hover {
2591
+ border-color: var(--dropdown-color-border-hover, #0f7173);
2592
2592
  }
2593
2593
 
2594
- .pax-selector__age-value {
2595
- flex: 1;
2596
- text-align: left;
2594
+ .pax-selector__age-value {
2595
+ flex: 1;
2596
+ text-align: left;
2597
2597
  }
2598
2598
 
2599
- .pax-selector__age-chevron {
2600
- color: var(--color-text-default, #262626);
2601
- transition: transform 0.2s ease;
2602
- flex-shrink: 0;
2599
+ .pax-selector__age-chevron {
2600
+ color: var(--color-text-default, #262626);
2601
+ transition: transform 0.2s ease;
2602
+ flex-shrink: 0;
2603
2603
  }
2604
2604
 
2605
- .pax-selector__age-chevron--open {
2606
- transform: rotate(180deg);
2605
+ .pax-selector__age-chevron--open {
2606
+ transform: rotate(180deg);
2607
2607
  }
2608
2608
 
2609
2609
  /* Use dropdown-menu from dropdown.css, but add custom styles for age selector */
2610
2610
 
2611
- .pax-selector__age-dropdown-container .dropdown-menu {
2612
- max-height: 200px;
2613
- z-index: 110;
2611
+ .pax-selector__age-dropdown-container .dropdown-menu {
2612
+ max-height: 200px;
2613
+ z-index: 110;
2614
2614
  }
2615
2615
 
2616
- .pax-selector__age-dropdown-container .dropdown-option--selected {
2617
- background-color: var(--dropdown-selector-color-select-item-background-selected, #0f7173);
2618
- color: #ffffff;
2616
+ .pax-selector__age-dropdown-container .dropdown-option--selected {
2617
+ background-color: var(--dropdown-selector-color-select-item-background-selected, #0f7173);
2618
+ color: #ffffff;
2619
2619
  }
2620
2620
 
2621
- .pax-selector__age-dropdown-container .dropdown-option--selected:hover {
2622
- background-color: var(--dropdown-selector-color-select-item-background-selected, #0f7173);
2623
- color: #ffffff;
2621
+ .pax-selector__age-dropdown-container .dropdown-option--selected:hover {
2622
+ background-color: var(--dropdown-selector-color-select-item-background-selected, #0f7173);
2623
+ color: #ffffff;
2624
2624
  }
2625
2625
 
2626
- @keyframes pax-selector-age-dropdown-enter {
2627
- from {
2628
- opacity: 0;
2629
- transform: translateY(-4px);
2630
- }
2631
- to {
2632
- opacity: 1;
2633
- transform: translateY(0);
2634
- }
2626
+ @keyframes pax-selector-age-dropdown-enter {
2627
+ from {
2628
+ opacity: 0;
2629
+ transform: translateY(-4px);
2630
+ }
2631
+ to {
2632
+ opacity: 1;
2633
+ transform: translateY(0);
2634
+ }
2635
2635
  }
2636
2636
 
2637
- .pax-selector__age-option {
2638
- width: 100%;
2639
- padding: 8px 12px;
2640
- background: var(--dropdown-selector-color-select-item-background-default, #ffffff);
2641
- border: none;
2642
- cursor: pointer;
2643
- text-align: left;
2644
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2645
- font-weight: 400;
2646
- font-size: 14px;
2647
- line-height: 20px;
2648
- color: var(--color-text-default, #262626);
2649
- transition: all 0.2s ease;
2637
+ .pax-selector__age-option {
2638
+ width: 100%;
2639
+ padding: 8px 12px;
2640
+ background: var(--dropdown-selector-color-select-item-background-default, #ffffff);
2641
+ border: none;
2642
+ cursor: pointer;
2643
+ text-align: left;
2644
+ font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2645
+ font-weight: 400;
2646
+ font-size: 14px;
2647
+ line-height: 20px;
2648
+ color: var(--color-text-default, #262626);
2649
+ transition: all 0.2s ease;
2650
2650
  }
2651
2651
 
2652
- .pax-selector__age-option:hover {
2653
- background: var(--dropdown-selector-color-select-item-background-hover, #115b5e);
2654
- color: #ffffff;
2652
+ .pax-selector__age-option:hover {
2653
+ background: var(--dropdown-selector-color-select-item-background-hover, #115b5e);
2654
+ color: #ffffff;
2655
2655
  }
2656
2656
 
2657
- .pax-selector__age-option--selected {
2658
- background: var(--dropdown-selector-color-select-item-background-selected, #0f7173);
2659
- color: #ffffff;
2657
+ .pax-selector__age-option--selected {
2658
+ background: var(--dropdown-selector-color-select-item-background-selected, #0f7173);
2659
+ color: #ffffff;
2660
2660
  }
2661
2661
 
2662
2662
  /* Age Section */
2663
2663
 
2664
- .pax-selector__age-section {
2665
- display: flex;
2666
- flex-direction: column;
2667
- gap: 16px;
2668
- margin-bottom: 32px;
2664
+ .pax-selector__age-section {
2665
+ display: flex;
2666
+ flex-direction: column;
2667
+ gap: 16px;
2668
+ margin-bottom: 32px;
2669
2669
  }
2670
2670
 
2671
- .pax-selector__age-section-title {
2672
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2673
- font-weight: var(--font-weight-font-bold, 700);
2674
- font-size: 16px;
2675
- line-height: 24px;
2676
- color: var(--color-text-default, #262626);
2677
- margin: 0;
2671
+ .pax-selector__age-section-title {
2672
+ font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2673
+ font-weight: var(--font-weight-font-bold, 700);
2674
+ font-size: 16px;
2675
+ line-height: 24px;
2676
+ color: var(--color-text-default, #262626);
2677
+ margin: 0;
2678
2678
  }
2679
2679
 
2680
- .pax-selector__age-groups {
2681
- display: flex;
2682
- flex-direction: column;
2683
- gap: 16px;
2680
+ .pax-selector__age-groups {
2681
+ display: flex;
2682
+ flex-direction: column;
2683
+ gap: 16px;
2684
2684
  }
2685
2685
 
2686
- .pax-selector__age-row {
2687
- display: flex;
2688
- gap: 16px;
2689
- align-items: flex-start;
2686
+ .pax-selector__age-row {
2687
+ display: flex;
2688
+ gap: 16px;
2689
+ align-items: flex-start;
2690
2690
  }
2691
2691
 
2692
2692
  /* Multiple Rooms Styles */
2693
2693
 
2694
- .pax-selector__rooms {
2695
- display: flex;
2696
- flex-direction: column;
2697
- gap: 16px;
2698
- width: 100%;
2694
+ .pax-selector__rooms {
2695
+ display: flex;
2696
+ flex-direction: column;
2697
+ gap: 16px;
2698
+ width: 100%;
2699
2699
  }
2700
2700
 
2701
- .pax-selector__room-container {
2702
- display: flex;
2703
- flex-direction: column;
2704
- gap: 32px;
2705
- padding: 32px 16px 16px;
2706
- background: transparent;
2707
- border-radius: 24px;
2708
- width: 100%;
2701
+ .pax-selector__room-container {
2702
+ display: flex;
2703
+ flex-direction: column;
2704
+ gap: 32px;
2705
+ padding: 32px 16px 16px;
2706
+ background: transparent;
2707
+ border-radius: 24px;
2708
+ width: 100%;
2709
2709
  }
2710
2710
 
2711
- .pax-selector__room-header {
2712
- display: flex;
2713
- align-items: center;
2714
- justify-content: space-between;
2715
- width: 100%;
2711
+ .pax-selector__room-header {
2712
+ display: flex;
2713
+ align-items: center;
2714
+ justify-content: space-between;
2715
+ width: 100%;
2716
2716
  }
2717
2717
 
2718
- .pax-selector__room-title {
2719
- display: flex;
2720
- align-items: center;
2721
- gap: 8px;
2718
+ .pax-selector__room-title {
2719
+ display: flex;
2720
+ align-items: center;
2721
+ gap: 8px;
2722
2722
  }
2723
2723
 
2724
- .pax-selector__room-name {
2725
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2726
- font-weight: var(--font-weight-font-bold, 700);
2727
- font-size: 18px;
2728
- line-height: 24px;
2729
- color: var(--color-text-accent, #0f7173);
2730
- margin: 0;
2724
+ .pax-selector__room-name {
2725
+ font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2726
+ font-weight: var(--font-weight-font-bold, 700);
2727
+ font-size: 18px;
2728
+ line-height: 24px;
2729
+ color: var(--color-text-accent, #0f7173);
2730
+ margin: 0;
2731
2731
  }
2732
2732
 
2733
- .pax-selector__room-icon {
2734
- color: var(--color-text-accent, #0f7173);
2733
+ .pax-selector__room-icon {
2734
+ color: var(--color-text-accent, #0f7173);
2735
2735
  }
2736
2736
 
2737
- .pax-selector__room-remove {
2738
- display: flex;
2739
- align-items: center;
2740
- gap: 4px;
2741
- padding: 4px 8px;
2742
- background: rgba(255, 255, 255, 0);
2743
- border: 1px solid var(--chip-color-red-outline-foreground, #991b1b);
2744
- border-radius: 9999px;
2745
- cursor: pointer;
2746
- font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2747
- font-weight: var(--font-weight-font-medium, 500);
2748
- font-size: 12px;
2749
- line-height: 16px;
2750
- color: var(--chip-color-red-outline-foreground, #991b1b);
2751
- transition: all 0.2s ease;
2737
+ .pax-selector__room-remove {
2738
+ display: flex;
2739
+ align-items: center;
2740
+ gap: 4px;
2741
+ padding: 4px 8px;
2742
+ background: rgba(255, 255, 255, 0);
2743
+ border: 1px solid var(--chip-color-red-outline-foreground, #991b1b);
2744
+ border-radius: 9999px;
2745
+ cursor: pointer;
2746
+ font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
2747
+ font-weight: var(--font-weight-font-medium, 500);
2748
+ font-size: 12px;
2749
+ line-height: 16px;
2750
+ color: var(--chip-color-red-outline-foreground, #991b1b);
2751
+ transition: all 0.2s ease;
2752
2752
  }
2753
2753
 
2754
- .pax-selector__room-remove:hover {
2755
- background: var(--chip-color-red-outline-foreground, #991b1b);
2756
- color: #ffffff;
2754
+ .pax-selector__room-remove:hover {
2755
+ background: var(--chip-color-red-outline-foreground, #991b1b);
2756
+ color: #ffffff;
2757
2757
  }
2758
2758
 
2759
- .pax-selector__room-remove-icon {
2760
- color: inherit;
2759
+ .pax-selector__room-remove-icon {
2760
+ color: inherit;
2761
2761
  }
2762
2762
 
2763
- .pax-selector__room-remove-text {
2764
- white-space: nowrap;
2763
+ .pax-selector__room-remove-text {
2764
+ white-space: nowrap;
2765
2765
  }
2766
2766
 
2767
- .pax-selector__room-content {
2768
- display: flex;
2769
- flex-direction: column;
2770
- gap: 32px;
2771
- width: 100%;
2767
+ .pax-selector__room-content {
2768
+ display: flex;
2769
+ flex-direction: column;
2770
+ gap: 32px;
2771
+ width: 100%;
2772
2772
  }
2773
2773
 
2774
2774
  /* Multiple rooms mode - same width as single mode */
2775
2775
 
2776
- .pax-selector__dropdown:has(.pax-selector__rooms) {
2777
- width: 280px;
2778
- max-height: 80vh;
2779
- overflow-y: auto;
2776
+ .pax-selector__dropdown:has(.pax-selector__rooms) {
2777
+ width: 280px;
2778
+ max-height: 80vh;
2779
+ overflow-y: auto;
2780
2780
  }
2781
2781
 
2782
2782
  /* Scrollbar styling for long room lists */
2783
2783
 
2784
- .pax-selector__dropdown::-webkit-scrollbar {
2785
- width: 6px;
2784
+ .pax-selector__dropdown::-webkit-scrollbar {
2785
+ width: 6px;
2786
2786
  }
2787
2787
 
2788
- .pax-selector__dropdown::-webkit-scrollbar-track {
2789
- background: var(--color-border-subtle, #e5e5e5);
2790
- border-radius: 3px;
2788
+ .pax-selector__dropdown::-webkit-scrollbar-track {
2789
+ background: var(--color-border-subtle, #e5e5e5);
2790
+ border-radius: 3px;
2791
2791
  }
2792
2792
 
2793
- .pax-selector__dropdown::-webkit-scrollbar-thumb {
2794
- background: var(--color-text-accent, #0f7173);
2795
- border-radius: 3px;
2793
+ .pax-selector__dropdown::-webkit-scrollbar-thumb {
2794
+ background: var(--color-text-accent, #0f7173);
2795
+ border-radius: 3px;
2796
2796
  }
2797
2797
 
2798
- .pax-selector__dropdown::-webkit-scrollbar-thumb:hover {
2799
- background: var(--color-button-brand-background-secondary-hover, #115b5e);
2798
+ .pax-selector__dropdown::-webkit-scrollbar-thumb:hover {
2799
+ background: var(--color-button-brand-background-secondary-hover, #115b5e);
2800
2800
  }