@hotelcard/ui 0.0.13 → 0.0.16

package/dist/index.css

@@ -2570,7 +2570,7 @@
 .hc-hotel-card__image-section {
   position: relative;
   width: 100%;
-  height: 128px;
+  height: 268.5px;
   overflow: hidden;
 }
 .hc-hotel-card__image {
@@ -2630,7 +2630,6 @@
   cursor: pointer;
   transition: transform 0.2s ease;
   padding: 8px;
-  margin: -8px -8px 0 0;
 }
 .hc-hotel-card__favorite-button:hover {
   transform: scale(1.1);
@@ -2658,15 +2657,18 @@
   background-color: rgba(255, 255, 255, 0.8);
   border: none;
   border-radius: 50%;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 2;
-  transition: background-color 0.2s ease;
+  transition: background-color 0.2s ease, outline-color 0.2s ease;
 }
 .hc-hotel-card__nav-button:hover {
   background-color: rgba(255, 255, 255, 0.95);
+  outline-color: rgba(0, 0, 0, 0.1);
 }
 .hc-hotel-card__nav-button--left {
   left: 12px;
@@ -2691,7 +2693,7 @@
   transition: background-color 0.2s ease;
 }
 .hc-hotel-card__indicator-dot--active {
-  background-color: white;
+  background-color: var(--color-ink-base-white, #ffffff);
 }
 .hc-hotel-card__usp-banner {
   width: 100%;
@@ -2705,15 +2707,13 @@
   line-height: var(--text-label-tiny-line-height, 16px);
 }
 .hc-hotel-card__content {
-  padding: 12px;
+  padding: var(--size-rem-1-5, 24px);
   display: flex;
   flex-direction: column;
-  gap: 2px;
 }
 .hc-hotel-card__header-section {
   display: flex;
   flex-direction: column;
-  gap: 2px;
 }
 .hc-hotel-card__rating-section {
   display: flex;
@@ -2726,9 +2726,7 @@
   gap: 2px;
 }
 .hc-hotel-card__stars-indicator {
-  position: relative;
-  top: -4px;
-  left: 2px;
+  margin-left: 4px;
   font-size: var(--text-label-tiny-font-size, 12px);
   font-weight: var(--font-weight-medium, 500);
   font-family: var(--font-primary, system-ui, -apple-system, sans-serif);
@@ -2759,8 +2757,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
   height: 24px;
+  min-width: 32px;
+  padding: 4px 8px;
 }
 .hc-hotel-card__rating-badge-bg {
   position: absolute;
@@ -2768,11 +2767,14 @@
   left: 0;
   width: 100%;
   height: 100%;
+  z-index: 1;
 }
 .hc-hotel-card__rating-number {
   position: relative;
+  top: -2px;
   z-index: 2;
-  color: white;
+  color: var(--content-action-highlight-inverse-idle, #ffffff);
+  text-align: center;
   font-family: var(--font-primary, system-ui, -apple-system, sans-serif);
   font-size: var(--text-label-tiny-font-size, 12px);
   font-weight: var(--font-weight-medium, 500);
@@ -2785,12 +2787,13 @@
   font-weight: var(--font-weight-medium, 500);
   line-height: var(--text-label-large-line-height, 28px);
   margin: 0;
+  margin-bottom: 8px;
 }
 .hc-hotel-card__location-section {
   display: flex;
   align-items: center;
   gap: 4px;
-  margin-bottom: 8px;
+  margin-bottom: var(--size-rem-1, 16px);
 }
 .hc-hotel-card__pin-icon {
   width: 16px;
@@ -2805,11 +2808,15 @@
   line-height: var(--text-label-tiny-line-height, 16px);
   text-decoration: underline;
 }
+.hc-hotel-card__benefits-and-pricing {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
 .hc-hotel-card__benefits-section {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  margin-bottom: 8px;
+  gap: var(--size-rem-0-5, 8px);
 }
 .hc-hotel-card__benefit {
   display: flex;
@@ -2831,7 +2838,9 @@
 .hc-hotel-card__pricing-section {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 4px;
+  flex: 1;
+  justify-content: flex-end;
 }
 .hc-hotel-card__price-label {
   font-size: var(--text-label-tiny-font-size, 12px);
@@ -2841,6 +2850,9 @@
   line-height: var(--text-label-tiny-line-height, 16px);
 }
 .hc-hotel-card__not-available {
+  flex: 1;
+  display: flex;
+  align-items: center;
   font-size: var(--text-label-small-font-size, 14px);
   font-family: var(--font-primary, system-ui, -apple-system, sans-serif);
   font-weight: var(--font-weight-medium, 500);
@@ -2852,7 +2864,6 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  flex-wrap: wrap;
 }
 .hc-hotel-card__current-price {
   color: var(--content-general-primary, #1F2937);
@@ -2882,4 +2893,583 @@
   line-height: var(--text-label-small-line-height, 20px);
   font-family: var(--font-primary, system-ui, -apple-system, sans-serif);
 }
+@media (min-width: 1024px) {
+  .hc-hotel-card {
+    flex-direction: row;
+    height: 274px;
+  }
+  .hc-hotel-card__usp-banner {
+    display: none;
+  }
+  .hc-hotel-card__image-section {
+    width: 365px;
+    height: 274px;
+    flex-shrink: 0;
+  }
+  .hc-hotel-card__content {
+    flex: 1;
+    padding: var(--size-rem-1-5, 24px);
+  }
+  .hc-hotel-card__benefits-and-pricing {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-end;
+    margin-top: auto;
+  }
+  .hc-hotel-card__benefits-section {
+    flex: 1;
+  }
+  .hc-hotel-card__pricing-section {
+    flex: 1;
+    align-items: flex-end;
+  }
+  .hc-hotel-card__price-label {
+    text-align: right;
+  }
+  .hc-hotel-card__original-price {
+    text-align: right;
+  }
+  .hc-hotel-card__price-container {
+    justify-content: flex-end;
+  }
+}
+
+/* src/components/Filters/FilterCheckboxItem.module.css */
+.filterRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--size-rem-0-625, 10px) 0;
+  background-color: var(--background-action-secondary-idle, #fff);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.15s ease;
+  border-radius: var(--radius-sm, 4px);
+  position: relative;
+}
+.filterRow:hover:not(.filterRowDisabled) {
+  background-color: var(--background-action-secondary-hover, #e5e7eb);
+}
+.filterRow:active:not(.filterRowDisabled) {
+  background-color: var(--background-action-secondary-hover, #e5e7eb);
+}
+.filterRow:focus {
+  background-color: var(--background-action-secondary-idle, #fff);
+  box-shadow: 0 0 0 2px var(--misc-focus, #3474DA), 0 0 16px 4px var(--misc-focus, #3474DA);
+  outline: none;
+  z-index: 1;
+}
+.filterRowDisabled {
+  cursor: not-allowed;
+}
+.checkboxLabel {
+  display: flex;
+  align-items: center;
+  gap: var(--size-rem-0-5, 8px);
+  flex: 1;
+}
+.checkboxButton {
+  width: 24px;
+  height: 24px;
+  position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.checkbox {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.checkboxBox {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  background-color: var(--background-general-primary, #fff);
+  border: 1px solid var(--border-general-tertiary, #d1d5db);
+  border-radius: 4px;
+  transition: all 0.15s ease;
+}
+.checkbox:checked + .checkboxBox {
+  background-color: var(--background-action-highlight-idle, #3474DA);
+  border-color: var(--background-action-highlight-idle, #3474DA);
+}
+.checkboxBoxDisabled {
+  background-color: var(--background-action-disabled-idle, #f3f4f6);
+  border-color: var(--border-action-disabled-idle, #e5e7eb);
+}
+.checkbox:checked + .checkboxBoxDisabled {
+  background-color: var(--background-action-disabled-idle, #f3f4f6);
+  border-color: var(--border-action-disabled-idle, #e5e7eb);
+}
+.checkIcon {
+  width: 12px;
+  height: 10px;
+  color: var(--content-action-primary-inverse-idle, #fff);
+}
+.checkboxBoxDisabled .checkIcon {
+  color: var(--content-action-disabled-idle, #9ca3af);
+}
+.filterLabel {
+  color: var(--content-general-primary, #111827);
+  font-family: var(--text-label-medium-font-family, inherit);
+  font-size: var(--text-label-medium-font-size, 14px);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--text-label-medium-line-height, 1.5);
+}
+.filterLabelDisabled {
+  color: var(--content-action-disabled-idle, #9ca3af);
+}
+.filterCount {
+  color: var(--content-general-tertiary, #6b7280);
+  font-family: var(--text-label-medium-font-family, inherit);
+  font-size: var(--text-label-medium-font-size, 14px);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--text-label-medium-line-height, 1.5);
+}
+.filterCountDisabled {
+  color: var(--content-action-disabled-idle, #9ca3af);
+}
+
+/* src/components/Filters/CollapsibleFilterSection.module.css */
+.section {
+  border-bottom: 1px solid var(--border-general-secondary, #e5e7eb);
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: var(--size-rem-1, 16px) 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+}
+.title {
+  color: var(--content-general-primary, #111827);
+  font-family: var(--text-heading-small-font-family, inherit);
+  font-size: var(--text-heading-small-font-size, 16px);
+  font-weight: 600;
+  line-height: var(--text-heading-small-line-height, 1.5);
+}
+.chevron {
+  width: 20px;
+  height: 20px;
+  color: var(--content-general-secondary, #6b7280);
+  transition: transform 0.2s ease;
+  transform: rotate(0deg);
+}
+.chevronExpanded {
+  transform: rotate(180deg);
+}
+.content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+}
+.contentExpanded {
+  max-height: 2000px;
+}
+.contentInner {
+  padding-bottom: var(--size-rem-1, 16px);
+}
+.showAllButton {
+  display: flex;
+  align-items: center;
+  gap: var(--size-rem-0-25, 4px);
+  margin-top: var(--size-rem-0-5, 8px);
+  padding: var(--size-rem-0-5, 8px) 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--content-action-highlight-idle, #3474DA);
+  font-family: var(--text-label-medium-font-family, inherit);
+  font-size: var(--text-label-medium-font-size, 14px);
+  font-weight: 500;
+  line-height: var(--text-label-medium-line-height, 1.5);
+}
+.showAllButton:hover {
+  color: var(--content-action-highlight-hover, #2563eb);
+}
+.showAllChevron {
+  width: 16px;
+  height: 16px;
+  transition: transform 0.2s ease;
+  transform: rotate(0deg);
+}
+.showAllChevronUp {
+  transform: rotate(180deg);
+}
+
+/* src/components/Filters/PriceRangeFilter.module.css */
+.priceRangeWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-rem-1, 16px);
+}
+.priceInputs {
+  display: flex;
+  align-items: center;
+  gap: var(--size-rem-0-5, 8px);
+}
+.priceInputWrapper {
+  flex: 1;
+}
+.priceInput {
+  width: 100%;
+  padding: var(--size-rem-0-75, 12px);
+  border: 1px solid var(--border-general-secondary, #e5e7eb);
+  border-radius: var(--radius-md, 8px);
+  background-color: var(--background-general-primary, #fff);
+  color: var(--content-general-primary, #111827);
+  font-family: var(--text-body-medium-font-family, inherit);
+  font-size: var(--text-body-medium-font-size, 14px);
+  line-height: var(--text-body-medium-line-height, 1.5);
+  text-align: center;
+}
+.priceInput:focus {
+  outline: none;
+  border-color: var(--border-action-highlight-idle, #3474DA);
+  box-shadow: 0 0 0 2px var(--misc-focus-light, rgba(52, 116, 218, 0.2));
+}
+.priceInputDivider {
+  color: var(--content-general-tertiary, #6b7280);
+  font-size: 14px;
+  flex-shrink: 0;
+}
+.histogram {
+  display: flex;
+  align-items: flex-end;
+  gap: 2px;
+  height: 48px;
+  padding: 0 12px;
+}
+.histogramBar {
+  flex: 1;
+  background-color: var(--background-action-secondary-idle, #e5e7eb);
+  border-radius: 2px 2px 0 0;
+  transition: background-color 0.15s ease;
+  min-height: 4px;
+}
+.histogramBarActive {
+  background-color: var(--background-action-highlight-idle, #3474DA);
+}
+.sliderContainer {
+  position: relative;
+  height: 24px;
+  touch-action: none;
+}
+.sliderTrack {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  right: 12px;
+  height: 4px;
+  background-color: var(--background-action-secondary-idle, #e5e7eb);
+  border-radius: 2px;
+  transform: translateY(-50%);
+}
+.sliderActiveTrack {
+  position: absolute;
+  top: 50%;
+  height: 4px;
+  background-color: var(--background-action-highlight-idle, #3474DA);
+  border-radius: 2px;
+  transform: translateY(-50%);
+}
+.sliderHandle {
+  position: absolute;
+  top: 50%;
+  width: 24px;
+  height: 24px;
+  background-color: var(--background-general-primary, #fff);
+  border: 2px solid var(--border-action-highlight-idle, #3474DA);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  cursor: grab;
+  touch-action: none;
+  transition: box-shadow 0.15s ease;
+  z-index: 1;
+}
+.sliderHandle:hover {
+  box-shadow: 0 0 0 4px var(--misc-focus-light, rgba(52, 116, 218, 0.2));
+}
+.sliderHandle:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px var(--misc-focus-light, rgba(52, 116, 218, 0.2));
+}
+.sliderHandleActive {
+  cursor: grabbing;
+  box-shadow: 0 0 0 6px var(--misc-focus-light, rgba(52, 116, 218, 0.3));
+}
+
+/* src/components/Filters/HotelCategoryFilter.module.css */
+.filterList {
+  display: flex;
+  flex-direction: column;
+}
+.starsContainer {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.starIcon {
+  width: 16px;
+  height: 16px;
+  color: var(--content-general-primary, #111827);
+}
+.footer {
+  margin-top: var(--size-rem-0-75, 12px);
+  padding-top: var(--size-rem-0-75, 12px);
+  border-top: 1px solid var(--border-general-secondary, #e5e7eb);
+}
+.footerText {
+  color: var(--content-general-tertiary, #6b7280);
+  font-family: var(--text-caption-font-family, inherit);
+  font-size: var(--text-caption-font-size, 12px);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-caption-line-height, 1.5);
+}
+
+/* src/components/Filters/ReviewsFilter.module.css */
+.filterList {
+  display: flex;
+  flex-direction: column;
+}
+.filterRange {
+  color: var(--content-general-tertiary, #6b7280);
+  font-weight: 400;
+}
+.footer {
+  margin-top: var(--size-rem-0-75, 12px);
+  padding-top: var(--size-rem-0-75, 12px);
+  border-top: 1px solid var(--border-general-secondary, #e5e7eb);
+}
+.footerText {
+  color: var(--content-general-tertiary, #6b7280);
+  font-family: var(--text-caption-font-family, inherit);
+  font-size: var(--text-caption-font-size, 12px);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-caption-line-height, 1.5);
+}
+
+/* src/components/Filters/ExperienceFilter.module.css */
+.filterList {
+  display: flex;
+  flex-direction: column;
+}
+.showMoreBtn {
+  display: flex;
+  align-items: center;
+  gap: var(--size-rem-0-25, 4px);
+  margin-top: var(--size-rem-0-5, 8px);
+  padding: var(--size-rem-0-5, 8px) 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--content-action-highlight-idle, #3474DA);
+  font-family: var(--text-label-medium-font-family, inherit);
+  font-size: var(--text-label-medium-font-size, 14px);
+  font-weight: 500;
+  line-height: var(--text-label-medium-line-height, 1.5);
+}
+.showMoreBtn:hover {
+  color: var(--content-action-highlight-hover, #2563eb);
+}
+.arrowIcon {
+  display: flex;
+  align-items: center;
+  transition: transform 0.2s ease;
+}
+.arrowIcon svg {
+  width: 20px;
+  height: 20px;
+}
+.arrowUp {
+  transform: rotate(180deg);
+}
+
+/* src/components/Filters/RegionsFilter.module.css */
+.filterList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-rem-0-25, 4px);
+}
+.regionItem {
+  display: flex;
+  flex-direction: column;
+}
+.countryRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 56px;
+  padding: 14px var(--size-rem-0-75, 12px);
+  background-color: var(--background-general-secondary-light, #f9fafb);
+  border: 1px solid transparent;
+  border-radius: var(--size-rem-0-75, 12px);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.15s ease;
+  gap: var(--size-rem-0-75, 12px);
+}
+.countryRowExpanded {
+  border-radius: var(--size-rem-0-75, 12px);
+  border: 1px solid var(--border-action-secondary-active, #d1d5db);
+  background: var(--background-general-primary, #fff) !important;
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.countryInfo {
+  display: flex;
+  align-items: center;
+  flex: 1 1 0;
+  justify-content: space-between;
+}
+.countryName {
+  color: var(--content-general-primary, #111827);
+  font-family: var(--text-label-large-font-family, inherit);
+  font-size: var(--text-label-large-font-size, 16px);
+  font-weight: var(--text-label-large-font-weight, 600);
+  line-height: var(--text-label-large-line-height, 1.55);
+}
+.countBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  height: 24px;
+  padding: 0 var(--size-rem-0-5, 8px);
+  border-radius: 9999px;
+  background: var(--background-general-secondary, #e5e7eb) !important;
+  color: var(--content-general-primary, #111827);
+  text-align: center;
+  font-family: var(--text-label-medium-font-family, inherit);
+  font-size: var(--text-label-medium-font-size, 14px);
+  font-weight: 500;
+  line-height: var(--text-label-medium-line-height, 1.5);
+  white-space: nowrap;
+}
+.chevron {
+  width: 20px;
+  height: 20px;
+  color: var(--content-general-tertiary, #6b7280);
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+}
+.chevronExpanded {
+  transform: rotate(180deg);
+}
+.subRegions {
+  display: flex;
+  flex-direction: column;
+  padding: 0 var(--size-rem-0-75, 12px) var(--size-rem-0-875, 14px) var(--size-rem-0-75, 12px);
+  border-radius: var(--size-rem-0-75, 12px);
+  border: 1px solid var(--border-action-secondary-active, #d1d5db);
+  background: var(--background-general-primary, #fff);
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.mobileSelectAllActions {
+  display: flex;
+  align-items: center;
+  gap: var(--size-rem-1, 16px);
+  height: 44px;
+  padding: 0 var(--size-rem-0-75, 12px);
+  border-top: none;
+  border-bottom: none;
+  border-right: 1px solid var(--border-action-secondary-active, #d1d5db);
+  border-left: 1px solid var(--border-action-secondary-active, #d1d5db);
+  background: var(--background-general-primary, #fff);
+}
+.selectAllBtn,
+.resetAllBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-family: var(--text-label-medium-font-family, inherit);
+  font-size: var(--text-label-medium-font-size, 14px);
+  font-weight: 500;
+  line-height: var(--text-label-medium-line-height, 1.5);
+  text-decoration: underline;
+  cursor: pointer;
+}
+.selectAllBtn {
+  color: var(--content-action-link-idle, #3474DA);
+}
+.selectAllBtn:disabled {
+  color: var(--content-action-disabled-idle, #9ca3af);
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.resetAllBtn {
+  color: var(--content-action-disabled-idle, #6b7280);
+}
+.resetAllBtn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.selectAllBtn:focus-visible,
+.resetAllBtn:focus-visible {
+  outline: 2px solid var(--misc-focus, #3474DA);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* src/components/Filters/CheckboxFilter.module.css */
+.filterList {
+  display: flex;
+  flex-direction: column;
+}
+
+/* src/components/Filters/SelectedFiltersRow.module.css */
+.container {
+  padding: var(--size-rem-0-75, 12px) 0;
+  border-bottom: 1px solid var(--border-general-secondary, #e5e7eb);
+}
+.chipsWrapper {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--size-rem-0-5, 8px);
+}
+.selectedText {
+  margin: 0;
+  padding-top: var(--size-rem-0-25, 4px);
+  color: var(--content-general-secondary, #6b7280);
+  font-family: var(--text-label-medium-font-family, inherit);
+  font-size: var(--text-label-medium-font-size, 14px);
+  font-weight: 500;
+  line-height: var(--text-label-medium-line-height, 1.5);
+  white-space: nowrap;
+}
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--size-rem-0-5, 8px);
+}
+.clearAllBtn {
+  margin-left: var(--size-rem-0-5, 8px);
+}
 /*# sourceMappingURL=index.css.map */