feat(BOOK-391): Added theme and logos for Bassin Seven

* chore: Updated border-radius variables after import change Approved-by: Linus Flood
2026-01-22 07:03:25 +00:00
parent ef98c4b552
commit 4de24e9f2a
297 changed files with 5252 additions and 648 deletions
--- a/packages/booking-flow/lib/components/BookingCodeFilter/bookingCodeFilter.module.css
+++ b/packages/booking-flow/lib/components/BookingCodeFilter/bookingCodeFilter.module.css
@@ -4,7 +4,7 @@
 }

 .dialog {
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  background-color: var(--Surface-Primary-Default);
  box-shadow: var(--popup-box-shadow);
  max-width: 340px;
@@ -67,7 +67,7 @@
  left: 0;
  right: 0;
  padding: var(--Space-x2) var(--Space-x05);
-  border-radius: var(--Corner-radius-md) var(--Corner-radius-md) 0 0;
+  border-radius: var(--Corner-Radius-md) var(--Corner-Radius-md) 0 0;
  background-color: var(--Surface-Primary-Default);
  box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);

--- a/packages/booking-flow/lib/components/BookingConfirmation/Header/header.module.css
+++ b/packages/booking-flow/lib/components/BookingConfirmation/Header/header.module.css
@@ -26,7 +26,7 @@
 }

 .actions {
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  display: grid;
  grid-area: actions;
  justify-content: flex-start;
--- a/packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/linkedReservationCardSkeleton.module.css
+++ b/packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/linkedReservationCardSkeleton.module.css
@@ -6,7 +6,7 @@

 .content {
  background-color: var(--Background-Primary);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: grid;
  gap: var(--Space-x2);
  padding: var(--Space-x2) var(--Space-x2) var(--Space-x3)
@@ -14,7 +14,7 @@
 }

 .img {
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  overflow: hidden;
 }

--- a/packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/retry.module.css
+++ b/packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/retry.module.css
@@ -1,6 +1,6 @@
 .retry {
  background-color: var(--Background-Primary);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--Space-x2);
--- a/packages/booking-flow/lib/components/BookingConfirmation/Rooms/Room/index.tsx
+++ b/packages/booking-flow/lib/components/BookingConfirmation/Rooms/Room/index.tsx
@@ -126,7 +126,7 @@ export function Room({
            focalPoint={{ x: 50, y: 50 }}
            height={204}
            src={img.src}
-            style={{ borderRadius: "var(--Corner-radius-md)" }}
+            style={{ borderRadius: "var(--Corner-Radius-md)" }}
            title={img.title || img.title_En || ""}
            width={204}
          />
--- a/packages/booking-flow/lib/components/BookingConfirmation/Rooms/Room/room.module.css
+++ b/packages/booking-flow/lib/components/BookingConfirmation/Rooms/Room/room.module.css
@@ -13,7 +13,7 @@
 .benefits {
  align-items: center;
  border: 1px solid var(--Base-Border-Subtle);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  display: flex;
  gap: var(--Space-x1);
  padding: var(--Space-x1) var(--Space-x15);
@@ -26,7 +26,7 @@

 .booking {
  background-color: var(--Background-Primary);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: grid;
  gap: var(--Space-x2);
  padding: var(--Space-x2) var(--Space-x2) var(--Space-x3)
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/booking-code.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/BookingCode/booking-code.module.css
@@ -8,7 +8,7 @@
 .bookingCode {
  height: 60px;
  background-color: var(--Background-Primary);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  padding: var(--Space-x1) var(--Space-x15);
  border: 2px solid transparent;
 }
@@ -17,7 +17,7 @@
 .bookingCode:has([data-focused="true"]),
 .bookingCode:has([data-pressed="true"]) {
  background-color: var(--Surface-Primary-Hover);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  border-color: var(--Border-Interactive-Focus);
 }

@@ -98,7 +98,7 @@
@media screen and (min-width: 1367px) {
  .container:hover {
    background-color: var(--Surface-Primary-Hover);
-    border-radius: var(--Corner-radius-md);
+    border-radius: var(--Corner-Radius-md);
  }

  .bookingCodeRememberVisible {
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/button.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/button.module.css
@@ -2,7 +2,7 @@
  align-items: center;
  color: var(--Component-Button-Brand-Secondary-On-fill-Default);
  border: none;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  cursor: pointer;
  display: flex;
  gap: var(--Space-x05);
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/Dialog/dialog.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/Dialog/dialog.module.css
@@ -1,6 +1,6 @@
 .dialog {
  background-color: var(--Base-Surface-Primary-light-Normal);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);

  display: flex;
  flex-direction: column;
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/ListItem/listItem.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/ListItem/listItem.module.css
@@ -1,5 +1,5 @@
 .listItem {
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  cursor: pointer;
  padding: var(--Space-x1);
 }
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/search.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/search.module.css
@@ -2,7 +2,7 @@
  border-color: transparent;
  border-style: solid;
  border-width: 1px;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  padding: var(--Space-x1) var(--Space-x15);
  position: relative;
  height: 60px;
@@ -11,7 +11,7 @@
    background-color: var(--Base-Surface-Primary-light-Normal);
    padding: var(--Space-x15) var(--Space-x15) var(--Space-x15) var(--Space-x3);
    border: 1px solid var(--Border-Strong);
-    border-radius: var(--Corner-radius-rounded);
+    border-radius: var(--Corner-Radius-Rounded);
    height: auto;
  }

--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/ValidationError/validationError.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/ValidationError/validationError.module.css
@@ -2,7 +2,7 @@
  position: absolute;
  top: calc(100% + var(--Space-x2));
  background: var(--Surface-Primary-Default);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
  padding: var(--Space-x15);
  max-width: min(100vw, calc(360px - var(--Space-x2)));
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/formContent.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/formContent.module.css
@@ -80,7 +80,7 @@
  .when,
  .where {
    background-color: var(--Background-Primary);
-    border-radius: var(--Corner-radius-md);
+    border-radius: var(--Corner-Radius-md);
  }

  .rooms,
@@ -114,14 +114,14 @@
    gap: var(--Space-x2);
  }
  .voucherContainer {
-    border-radius: 0 0 var(--Corner-radius-md) var(--Corner-radius-md);
+    border-radius: 0 0 var(--Corner-Radius-md) var(--Corner-Radius-md);
  }

  .rooms,
  .when,
  .where {
    width: 100%;
-    border-radius: var(--Corner-radius-md);
+    border-radius: var(--Corner-Radius-md);
  }

  .inputContainer input[type="text"] {
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/form.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/form.module.css
@@ -22,7 +22,7 @@

@media screen and (min-width: 768px) {
  .default {
-    border-radius: var(--Corner-radius-md);
+    border-radius: var(--Corner-Radius-md);
  }
 }

--- a/packages/booking-flow/lib/components/BookingWidget/DatePicker/date-picker.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/DatePicker/date-picker.module.css
@@ -13,7 +13,7 @@
  bottom: 0;
  right: 0;
  padding: 20px var(--Space-x15) 0;
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
 }

 .datePicker[data-datepicker-open="true"] {
@@ -24,7 +24,7 @@
  --header-height: 72px;
  --sticky-button-height: 140px;
  background-color: var(--Main-Grey-White);
-  border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
+  border-radius: var(--Corner-Radius-lg) var(--Corner-Radius-lg) 0 0;
  position: fixed;
  left: 0;
  right: 0;
@@ -41,7 +41,7 @@
  }

  .datePicker[data-datepicker-open="true"] {
-    border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
+    border-radius: var(--Corner-Radius-lg) var(--Corner-Radius-lg) 0 0;
    top: calc(max(var(--sitewide-alert-sticky-height), 20px));
  }
 }
@@ -54,7 +54,7 @@
  .pickerContainer {
    position: absolute;
    display: grid;
-    border-radius: var(--Corner-radius-lg);
+    border-radius: var(--Corner-Radius-lg);
    box-shadow: var(--popup-box-shadow);
    padding: var(--Space-x2) var(--Space-x3);
    max-width: calc(100vw - 20px);
@@ -70,6 +70,6 @@
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
-    border-radius: var(--Corner-radius-md);
+    border-radius: var(--Corner-Radius-md);
  }
 }
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ValidationError/validationError.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ValidationError/validationError.module.css
@@ -2,7 +2,7 @@
  position: absolute;
  top: calc(100% + var(--Space-x2));
  background: var(--Surface-Primary-Default);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
  padding: var(--Space-x15);
  max-width: min(100vw, calc(360px - var(--Space-x2)));
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css
@@ -2,7 +2,7 @@
  display: flex;
  padding: var(--Space-x15);
  border: 1px solid var(--Border-Default);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  justify-content: center;
 }

@@ -53,7 +53,7 @@
  bottom: 0;
  right: 0;
  padding: 20px var(--Space-x15) 0;
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
@@ -100,7 +100,7 @@
  --header-height: 72px;
  --sticky-button-height: 140px;
  background-color: var(--Main-Grey-White);
-  border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
+  border-radius: var(--Corner-Radius-lg) var(--Corner-Radius-lg) 0 0;
  position: fixed;
  top: calc(max(var(--sitewide-alert-sticky-height), 20px));
  right: 0;
@@ -180,7 +180,7 @@
    bottom: auto;
    left: auto;
    right: auto;
-    border-radius: var(--Corner-radius-lg);
+    border-radius: var(--Corner-Radius-lg);
    box-shadow: var(--popup-box-shadow);
    min-width: 360px;
    max-width: calc(100vw - 20px);
--- a/packages/booking-flow/lib/components/BookingWidget/MobileToggleButton/button.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/MobileToggleButton/button.module.css
@@ -14,7 +14,7 @@
  /* To avoid this "flash" the styling is set to transparent) */
  /* It is a non-standard css proprty, so shouldn't have too much of an effect on accessibility. */
  -webkit-tap-highlight-color: transparent;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
 }

 .complete {
--- a/packages/booking-flow/lib/components/BookingWidget/bookingWidget.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/bookingWidget.module.css
@@ -52,13 +52,13 @@

 .compact {
  .formContainer {
-    border-radius: var(--Corner-radius-lg);
+    border-radius: var(--Corner-Radius-lg);
  }
 }

@media screen and (max-width: 767px) {
  .formContainer {
-    border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
+    border-radius: var(--Corner-Radius-lg) var(--Corner-Radius-lg) 0 0;
  }
 }

--- a/packages/booking-flow/lib/components/EnterDetails/Confirm/Guarantee/guarantee.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Confirm/Guarantee/guarantee.module.css
@@ -2,7 +2,7 @@
  display: grid;
  gap: var(--Space-x2);
  background-color: var(--Surface-Secondary-Default);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  padding: var(--Space-x2);
 }

--- a/packages/booking-flow/lib/components/EnterDetails/Confirm/confirm.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Confirm/confirm.module.css
@@ -5,7 +5,7 @@

 .selections {
  background-color: var(--Surface-Secondary-Default);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--Space-x2);
--- a/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/joinScandicFriendsCard.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/joinScandicFriendsCard.module.css
@@ -1,7 +1,7 @@
 .cardContainer {
  align-self: flex-start;
  background-color: var(--Surface-Primary-Hover-Accent);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: grid;
  gap: var(--Space-x2);
  padding: var(--Space-x2);
--- a/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css
@@ -1,7 +1,7 @@
 .cardContainer {
  align-self: flex-start;
  background-color: var(--Surface-Primary-Hover-Accent);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: grid;
  gap: var(--Space-x2);
  padding: var(--Space-x2);
--- a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/joinScandicFriendsCard.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/joinScandicFriendsCard.module.css
@@ -1,7 +1,7 @@
 .cardContainer {
  align-self: flex-start;
  background-color: var(--Surface-Primary-Hover-Accent);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: grid;
  gap: var(--Space-x2);
  padding: var(--Space-x2);
--- a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css
@@ -1,7 +1,7 @@
 .cardContainer {
  align-self: flex-start;
  background-color: var(--Surface-Primary-Hover-Accent);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: grid;
  gap: var(--Space-x2);
  padding: var(--Space-x2);
--- a/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/mixedRatePaymentBreakdown.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/mixedRatePaymentBreakdown.module.css
@@ -10,7 +10,7 @@
  background-color: var(--Scandic-Blue-00);
  padding: var(--Space-x15);
  border: 1px solid rgba(0, 0, 0, 0.05);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
 }

 .roomInfo {
--- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css
@@ -52,8 +52,8 @@

 .dialog {
  background-color: var(--Scandic-Brand-Pale-Peach);
-  border-top-left-radius: var(--Corner-radius-md);
-  border-top-right-radius: var(--Corner-radius-md);
+  border-top-left-radius: var(--Corner-Radius-md);
+  border-top-right-radius: var(--Corner-Radius-md);

  box-shadow: var(--modal-box-shadow);
  display: flex;
@@ -102,7 +102,7 @@
  }

  .dialog {
-    border-radius: var(--Corner-radius-md);
+    border-radius: var(--Corner-Radius-md);
    padding: var(--Space-x6);
    width: fit-content;
  }
--- a/packages/booking-flow/lib/components/EnterDetails/Summary/UI/ui.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Summary/UI/ui.module.css
@@ -1,5 +1,5 @@
 .summary {
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--Space-x2);
--- a/packages/booking-flow/lib/components/ListingHotelCardDialog/listingHotelCardDialog.module.css
+++ b/packages/booking-flow/lib/components/ListingHotelCardDialog/listingHotelCardDialog.module.css
@@ -1,6 +1,6 @@
 .container {
  border: 1px solid var(--Base-Border-Subtle);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  min-width: 358px;
  background: var(--Base-Surface-Primary-light-Normal);
  box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.1);
@@ -40,7 +40,7 @@
 }

 .priceCard {
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  padding: var(--Space-x05) var(--Space-x1);
  background: var(--Base-Surface-Secondary-light-Normal);
  margin-top: var(--Space-x1);
@@ -83,7 +83,7 @@
 }

 .notEnoughPointsButton {
-  border-radius: var(--Corner-radius-rounded);
+  border-radius: var(--Corner-Radius-Rounded);
  border-width: 2px;
  border-style: solid;
  display: flex;
--- a/packages/booking-flow/lib/components/RoomCardSkeleton/RoomCardSkeleton.module.css
+++ b/packages/booking-flow/lib/components/RoomCardSkeleton/RoomCardSkeleton.module.css
@@ -3,7 +3,7 @@
  display: flex;
  flex-direction: column;
  background-color: #fff;
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  border: 1px solid var(--Base-Border-Subtle);
  position: relative;
  height: 100%;
--- a/packages/booking-flow/lib/components/RoomDetailsSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css
+++ b/packages/booking-flow/lib/components/RoomDetailsSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css
@@ -21,7 +21,7 @@

 .imageContainer {
  position: relative;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  overflow: hidden;
 }

--- a/packages/booking-flow/lib/components/SelectHotel/Filters/FilterAndSortModal/filterAndSortModal.module.css
+++ b/packages/booking-flow/lib/components/SelectHotel/Filters/FilterAndSortModal/filterAndSortModal.module.css
@@ -44,7 +44,7 @@
  bottom: 0;
  height: calc(100dvh - 20px);
  background-color: var(--Base-Surface-Primary-light-Normal);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  box-shadow: var(--modal-box-shadow);
  width: 100%;

@@ -71,7 +71,7 @@

 .badge {
  background-color: var(--Base-Text-Accent);
-  border-radius: var(--Corner-radius-xl);
+  border-radius: var(--Corner-Radius-xl);
  width: 20px;
  height: 20px;
  color: #ffffff;
@@ -146,8 +146,8 @@
    top: 0;
    background: var(--Base-Surface-Primary-light-Normal);
    z-index: 1;
-    border-top-left-radius: var(--Corner-radius-lg);
-    border-top-right-radius: var(--Corner-radius-lg);
+    border-top-left-radius: var(--Corner-Radius-lg);
+    border-top-right-radius: var(--Corner-Radius-lg);
  }

  .title {
@@ -181,8 +181,8 @@
    bottom: 0;
    background: var(--Base-Surface-Primary-light-Normal);
    z-index: 1;
-    border-bottom-left-radius: var(--Corner-radius-lg);
-    border-bottom-right-radius: var(--Corner-radius-lg);
+    border-bottom-left-radius: var(--Corner-Radius-lg);
+    border-bottom-right-radius: var(--Corner-Radius-lg);
    padding: var(--Space-x2) var(--Space-x3);
  }

@@ -202,7 +202,7 @@

  .filters ul li:hover {
    background: var(--UI-Input-Controls-Surface-Hover);
-    border-radius: var(--Corner-radius-md);
+    border-radius: var(--Corner-Radius-md);
    outline: none;
  }
  .filters ul li {
--- a/packages/booking-flow/lib/components/SelectHotel/MapWithButtonWrapper/mapWithButtonWrapper.module.css
+++ b/packages/booking-flow/lib/components/SelectHotel/MapWithButtonWrapper/mapWithButtonWrapper.module.css
@@ -1,7 +1,7 @@
 .container {
  display: flex;
  position: relative;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  overflow: hidden;
  flex-direction: column;

--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/Content/summaryContent.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/Content/summaryContent.module.css
@@ -1,5 +1,5 @@
 .summary {
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: grid;
  gap: var(--Space-x2);
  padding: var(--Space-x3);
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/summary.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/summary.module.css
@@ -1,5 +1,5 @@
 .summary {
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--Space-x2);
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css
@@ -10,13 +10,13 @@
 }

 .imageContainer {
-  border-radius: var(--Corner-radius-sm);
+  border-radius: var(--Corner-Radius-sm);
  display: flex;
  grid-area: image;
 }

 .img {
-  border-radius: var(--Corner-radius-sm);
+  border-radius: var(--Corner-Radius-sm);
  height: auto;
  max-height: 105px;
  object-fit: fill;
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/multiRoomWrapper.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/multiRoomWrapper.module.css
@@ -1,7 +1,7 @@
 .roomContainer {
  background: var(--Base-Surface-Primary-light-Normal);
  border: 1px solid var(--Base-Border-Subtle);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: flex;
  flex-direction: column;
  padding: var(--Space-x3);
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/Checkboxes/checkbox.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/Checkboxes/checkbox.module.css
@@ -15,7 +15,7 @@
  gap: var(--Space-x15);
  padding: var(--Space-x1) var(--Space-x15);
  cursor: pointer;
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  transition: background-color 0.3s;
  color: var(--Text-Default);

@@ -53,7 +53,7 @@
  height: 24px;
  min-width: 24px;
  border: 1px solid var(--Border-Interactive-Default);
-  border-radius: var(--Corner-radius-sm);
+  border-radius: var(--Corner-Radius-sm);
  transition: all 0.3s;
  display: flex;
  align-items: center;
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/roomPackageFilter.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/roomPackageFilter.module.css
@@ -34,7 +34,7 @@
  left: 0;
  right: 0;
  padding: var(--Space-x2) var(--Space-x05);
-  border-radius: var(--Corner-radius-md) var(--Corner-radius-md) 0 0;
+  border-radius: var(--Corner-Radius-md) var(--Corner-Radius-md) 0 0;
  background-color: var(--Surface-Primary-Default);
  box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);

@@ -77,7 +77,7 @@
  align-items: center;
  padding: var(--Space-x1);
  gap: var(--Space-x05);
-  border-radius: var(--Corner-radius-sm);
+  border-radius: var(--Corner-Radius-sm);
  background-color: var(--Surface-Secondary-Subtle);
  color: var(--Text-Interactive-Default);
 }
@@ -154,7 +154,7 @@

  .popover {
    padding: var(--Space-x2);
-    border-radius: var(--Corner-radius-md);
+    border-radius: var(--Corner-Radius-md);
    background-color: var(--Surface-Primary-Default);
    box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
    max-width: 340px;
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/image.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/image.module.css
@@ -2,7 +2,7 @@
  margin: 0 calc(-1 * var(--Space-x2));
  height: 190px;
  position: relative;
-  border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
+  border-radius: var(--Corner-Radius-lg) var(--Corner-Radius-lg) 0 0;
 }

 div[data-multiroom="true"] .imageContainer {
@@ -21,7 +21,7 @@ div[data-multiroom="true"] .imageContainer {

 .chip {
  background-color: var(--Main-Grey-White);
-  border-radius: var(--Corner-radius-sm);
+  border-radius: var(--Corner-Radius-sm);
  padding: var(--Space-x05) var(--Space-x1);
 }

--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/notAvailable.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/notAvailable.module.css
@@ -1,6 +1,6 @@
 .noRooms {
  background-color: var(--Base-Surface-Secondary-light-Normal);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  display: flex;
  gap: var(--Space-x1);
  margin: 0;
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/roomListItem.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/roomListItem.module.css
@@ -2,7 +2,7 @@
  align-content: flex-start;
  background-color: #fff;
  border: 1px solid var(--Base-Border-Subtle);
-  border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-Radius-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
--- a/packages/booking-flow/lib/components/SidePanel/sidePanel.module.css
+++ b/packages/booking-flow/lib/components/SidePanel/sidePanel.module.css
@@ -36,7 +36,7 @@
  .wrapper {
    background-color: var(--Main-Grey-White);
    border-color: var(--Primary-Light-On-Surface-Divider-subtle);
-    border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
+    border-radius: var(--Corner-Radius-lg) var(--Corner-Radius-lg) 0 0;
    border-style: solid;
    border-width: 1px;
    border-bottom: none;
--- a/packages/booking-flow/lib/components/SidePeekAccordions/sidePeekAccordion.module.css
+++ b/packages/booking-flow/lib/components/SidePeekAccordions/sidePeekAccordion.module.css
@@ -17,7 +17,7 @@
  display: grid;
  padding: var(--Space-x2) var(--Space-x3);
  gap: var(--Space-x1);
-  border-radius: var(--Corner-radius-md);
+  border-radius: var(--Corner-Radius-md);
  background: var(--Surface-Secondary-Default);
 }

--- a/packages/booking-flow/lib/components/SignupPromo/signupPromo.module.css
+++ b/packages/booking-flow/lib/components/SignupPromo/signupPromo.module.css
@@ -10,8 +10,8 @@
 .memberDiscountBannerDesktop {
  display: none;
  background: var(--Primary-Light-Surface-Normal);
-  border-radius: var(--Corner-radius-xl) var(--Corner-radius-xl) 0px
-    var(--Corner-radius-xl);
+  border-radius: var(--Corner-Radius-xl) var(--Corner-Radius-xl) 0px
+    var(--Corner-Radius-xl);
  align-items: center;
  padding: var(--Space-x15) var(--Space-x2);
  gap: var(--Space-x2);