@renaissancerentals/renaissance-component 12.4.24 → 13.0.3

package/lib/short-term/assets/{ShortTermFloorplansHeader.scss → ShortTermFloorplansHeader.css}

@@ -1,9 +1,10 @@
-@import "src/assets/variables";
+:root {
+    --search-unit-header-background-color: var(--secondary-nav-background-color);
+    --search-unit-header-dropdown-background-color: var(--primary-background-color);
+}
 
-$search-unit-header-background-color: $secondary-nav-background-color !default;
-$search-unit-header-dropdown-background-color: $primary-background-color !default;
 .short-term-floorplans-header {
-  background-color: $search-unit-header-background-color;
+  background-color: var(--search-unit-header-background-color);
   padding: 1rem;
 
   .pills {
@@ -51,15 +52,15 @@ $search-unit-header-dropdown-background-color: $primary-background-color !defaul
 
       }
       .muncher-button:hover{
-        background-color: $tertiary-background-color;
+        background-color: var(--tertiary-background-color);
       }
     }
     .muncher-dropdown--content{
-      background-color: $search-unit-header-dropdown-background-color;
+      background-color: var(--search-unit-header-dropdown-background-color);
     }
     .price-dropdown {
       width: 10rem;
-      @media (min-width: $large-size) {
+      @media (min-width: 62rem) {
         width: auto;
       }
       .price-dropdown-content{

package/lib/short-term/assets/{ShortTermFloorplansSection.scss → ShortTermFloorplansSection.css}

@@ -1,5 +1,3 @@
-@import "src/assets/variables";
-
 .section-short-term-floorplans {
   padding: 0;
   .floorplans-body {

package/lib/short-term/assets/{ShortTermPricingCard.scss → ShortTermPricingCard.css}

@@ -1,5 +1,3 @@
-@import "src/assets/variables";
-
 .section-pricing-card {
   font-size: 80%;
 
@@ -27,7 +25,7 @@
     background: #a7bdb1;
     text-transform: uppercase;
     letter-spacing: .1em;
-    font-family: $heading-font;
+    font-family: var(--heading-font);
     font-weight: normal;
   }
 
@@ -52,12 +50,12 @@
       background: #a7bdb1;
       text-transform: uppercase;
       letter-spacing: .1em;
-      font-family: $heading-font;
+      font-family: var(--heading-font);
 
     }
   }
 
-  @media (min-width: $medium-size) {
+  @media (min-width: 48rem) {
     font-size: 90%;
     .row {
       grid-template-columns: 18% repeat(2, 10%) repeat(3, 20%);
@@ -87,14 +85,14 @@
     font-style: italic;
     font-size: .7rem;
     text-align: center;
-    @media (min-width: $large-size) {
+    @media (min-width: 62rem) {
       font-size: .8rem;
     }
   }
   .asterix{
     font-weight: bold;
     font-size: .8rem;
-    @media (min-width: $large-size) {
+    @media (min-width: 62rem) {
       font-size: .9rem;
     }
   }

package/lib/special-offer/SpecialOfferBadge.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import "./assets/SpecialOfferBadge.scss";
+import "./assets/SpecialOfferBadge.css";
 export declare const SpecialOfferBadge: React.FC;

package/lib/special-offer/SpecialOfferButton.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/SpecialOfferButton.scss";
+import "./assets/SpecialOfferButton.css";
 export declare const SpecialOfferButton: React.FC<SpecialOfferButtonProps>;
 export interface SpecialOfferButtonProps {
     onMouseEnter: () => void;

package/lib/special-offer/assets/{SpecialOfferBadge.scss → SpecialOfferBadge.css}

@@ -1,13 +1,11 @@
-@import "src/assets/variables";
-
 .special-offer-badge {
   .muncher-badge {
     border-radius: .5rem;
-    background-color: $special-offer-color;
+    background-color: var(--special-offer-color);
     text-transform: none;
-    font-family: $serif-font;
+    font-family: var(--serif-font);
     font-weight: normal;
-    //font-size: .8rem;
+    /* font-size: .8rem; */
     padding: .3rem .5rem;
     display: inline-flex;
     align-items: center;

package/lib/special-offer/assets/{SpecialOfferButton.scss → SpecialOfferButton.css}

@@ -1,11 +1,9 @@
-@import "src/assets/variables";
-
 .special-offer-button {
   .muncher-button {
     border-radius: .5rem;
-    background-color: $special-offer-color;
+    background-color: var(--special-offer-color);
     text-transform: none;
-    font-family: $serif-font;
+    font-family: var(--serif-font);
     font-weight: normal;
     font-size: .8rem;
     padding: .3rem .5rem;

package/lib/sublet/SubletCard.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/SubletCard.scss";
+import "./assets/SubletCard.css";
 import { Sublet } from "./data/Sublet";
 export declare const SubletCard: React.FC<SubletCardProps>;
 export interface SubletCardProps {

package/lib/sublet/SubletImage.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { Sublet } from "./data/Sublet";
-import "./assets/SubletImage.scss";
+import "./assets/SubletImage.css";
 export declare const SubletImage: React.FC<SubletImageProps>;
 export interface SubletImageProps {
     sublet: Sublet;

package/lib/sublet/SubletMessageModal.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import "./assets/SubletMessageModal.scss";
+import "./assets/SubletMessageModal.css";
 import { Sublet } from "./data/Sublet";
 export declare const SubletMessageModal: React.FC<SubletMessageModalProps>;
 export interface SubletMessageModalProps {

package/lib/sublet/SubletNotFound.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import "./assets/SubletNotFound.scss";
+import "./assets/SubletNotFound.css";
 export declare const SubletNotFound: React.FC;

package/lib/sublet/SubletSection.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/SubletSection.scss";
+import "./assets/SubletSection.css";
 export declare const SubletSection: React.FC<SubletSectionParam>;
 export declare const NEW_SUBLET = "new";
 export interface SubletSectionParam {

package/lib/sublet/SubletsSection.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/SubletsSection.scss";
+import "./assets/SubletsSection.css";
 export declare const SubletsSection: React.FC<SubletsSectionProps>;
 export interface SubletsSectionProps {
     linkToSubletCreatePage: string;

package/lib/sublet/assets/{SubletCard.scss → SubletCard.css}

@@ -1,12 +1,10 @@
-@import 'src/assets/variables';
-
 .section-card-sublet {
   .muncher-paper {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: flex-start;
-    @media(min-width: $large-size) {
+    @media (min-width: 62rem) {
       flex-wrap: nowrap;
     }
   }
@@ -17,7 +15,7 @@
     .sublet-title {
       text-align: left;
       font-size: 1rem;
-      @media(min-width: $large-size) {
+      @media (min-width: 62rem) {
         margin-top: 0;
       }
 

package/lib/sublet/assets/{SubletImage.scss → SubletImage.css}

@@ -1,5 +1,3 @@
-@import 'src/assets/variables';
-
 .div-sublet-image {
 
   position: relative;
@@ -29,7 +27,7 @@
     object-fit: cover;
   }
 
-  @media(min-width: $large-size) {
+  @media (min-width: 62rem) {
     width: 20rem;
     height: 14rem;
     .sublet--image {
@@ -37,7 +35,7 @@
       height: 14rem;
     }
   }
-  @media(min-width: $extra-large-size) {
+  @media (min-width: 75rem) {
     width: 25rem;
     height: 16rem;
     .sublet--image {

package/lib/sublet/assets/{SubletMessageModal.scss → SubletMessageModal.css}

@@ -1,5 +1,3 @@
-@import "src/assets/variables";
-
 .div-message--modal {
   position: relative;
   .close {
@@ -7,7 +5,7 @@
     top: 1rem;
     right: 1rem;
     padding: .4rem;
-    color: $primary-color;
+    color: var(--primary-color);
     cursor: pointer;
   }
 
@@ -25,10 +23,10 @@
 
     .section__contact .form--element {
       width: 70vw;
-      @media (min-width: $medium-size) {
+      @media (min-width: 48rem) {
         max-width: 17rem;
       }
-      @media (min-width: $large-size) {
+      @media (min-width: 62rem) {
         max-width: 25rem;
       }
     }
@@ -37,18 +35,18 @@
   .section-message {
     padding-top: 2em;
     text-align: center;
-    background: $primary-background-color;
+    background: var(--primary-background-color);
     form {
       column-count: 1;
 
     }
     .form-element--long {
       margin-top: 1.5rem;
-      @media (min-width: $medium-size) {
+      @media (min-width: 48rem) {
         max-width: 55rem;
         width: 70vw;
       }
-      @media (min-width: $large-size) {
+      @media (min-width: 62rem) {
         max-width: 65rem;
       }
     }

package/lib/sublet/assets/{SubletNotFound.scss → SubletNotFound.css}

@@ -1,5 +1,3 @@
-@import 'src/assets/variables';
-
 .section-sublet {
   .sublet-full--center {
     height: 50vh;

package/lib/sublet/assets/{SubletSection.scss → SubletSection.css}

@@ -1,10 +1,8 @@
-@import 'src/assets/variables';
-
 .section-sublet {
   .one-line {
     select {
       padding: .1rem;
-      // margin: .1rem;
+      /* margin: .1rem; */
     }
   }
 
@@ -27,12 +25,12 @@
       width: 90vw;
       top: 30vh;
       left: 5vw;
-      @media(min-width: $medium-size) {
+      @media (min-width: 48rem) {
         width: 25rem;
         top: 30vh;
         left: 40vw;
       }
-      background: $primary-background-color;
+      background: var(--primary-background-color);
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -43,7 +41,7 @@
 
         .content-right {
           margin-left: 1rem;
-          font-family: $sans-serif-font;
+          font-family: var(--sans-serif-font);
         }
       }
 

package/lib/sublet/assets/{SubletsSection.scss → SubletsSection.css}

@@ -1,5 +1,3 @@
-@import 'src/assets/variables';
-
 .section-sublets {
   header {
     text-align: right;
@@ -8,6 +6,6 @@
 
   hr {
     border: none;
-    border-bottom: 1px dashed $tertiary-background-color;
+    border-bottom: 1px dashed var(--tertiary-background-color);
   }
 }

package/lib/sublet/services/SubletService.d.ts

@@ -5,5 +5,9 @@ export declare const getSublets: () => Promise<Sublet[]>;
 export declare const getSublet: (assetKey: string) => Promise<Sublet>;
 export declare const postSublet: (sublet: Sublet) => Promise<Sublet>;
 export declare const deleteSublet: (assetKey: string) => Promise<any>;
-export declare const postAsset: (assetKey: string, file: File, name: string, isCoverImage: boolean, onUploadProgress?: ((e: any) => void) | undefined) => Promise<Asset>;
-export declare const sendMessage: (assetKey: string, subletMessage: SubletMessage) => Promise<import("axios").AxiosResponse<any, any>>;
+export declare const postAsset: (assetKey: string, file: File, name: string, isCoverImage: boolean, onUploadProgress?: (e: any) => void) => Promise<Asset>;
+export declare const sendMessage: (assetKey: string, subletMessage: SubletMessage) => Promise<import("axios").AxiosResponse<any, {
+    message: string;
+    name: string;
+    email: string;
+}, {}, any>>;

package/lib/summer-house/SummerHouseFeatures.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import "./assets/SummerHouseFeatures.scss";
+import "./assets/SummerHouseFeatures.css";
 export declare const SummerHouseFeatures: React.FC;

package/lib/summer-house/assets/{SummerHouseFeatures.scss → SummerHouseFeatures.css}

@@ -1,8 +1,6 @@
-@import "src/assets/variables";
-
 .section-feature {
   .section-feature--two-column {
-    @media (min-width: $large-size) {
+    @media (min-width: 62rem) {
       display: flex;
     }
 
@@ -19,7 +17,7 @@
   }
 
   .section-feature--title {
-    font-family: $serif-font;
+    font-family: var(--serif-font);
     text-align: left;
     text-transform: none;
     font-weight: normal;

package/lib/summer-house/assets/{SummerHousePricing.scss → SummerHousePricing.css}

@@ -1,5 +1,3 @@
-@import "src/assets/variables";
-
 .section-pricing {
   font-size: 80%;
 
@@ -24,12 +22,12 @@
       background: #a7bdb1;
       text-transform: uppercase;
       letter-spacing: .1em;
-      font-family: $heading-font;
+      font-family: var(--heading-font);
 
     }
   }
 
-  @media (min-width: $medium-size) {
+  @media (min-width: 48rem) {
     font-size: 90%;
     .row {
       grid-template-columns:  12% repeat(2, 8%) repeat(5, 14.3%);

package/lib/team/TeamSection.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './assets/Team.scss';
+import './assets/Team.css';
 import { TeamMember } from "..";
 export declare const TeamSection: React.FC<TeamSectionProps>;
 export interface TeamSectionProps {

package/lib/team/assets/{Team.scss → Team.css}

@@ -1,5 +1,3 @@
-@import "src/assets/variables";
-
 .section-team {
   text-align: center;
 

package/lib/team/card/TeamCard.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { TeamMember } from "../..";
-import "./assets/TeamCard.scss";
+import "./assets/TeamCard.css";
 export declare const TeamCard: React.FC<TeamCardProps>;
 export interface TeamCardProps {
     member?: TeamMember;

package/lib/team/card/TeamCardSkeleton.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import "./assets/TeamCard.scss";
+import "./assets/TeamCard.css";
 export declare const TeamCardSkeleton: React.FC;

package/lib/team/card/assets/{TeamCard.scss → TeamCard.css}

@@ -1,7 +1,8 @@
-@import "src/assets/variables";
+:root {
+    --team-image-info-font: var(--sans-serif-font);
+    --team-image-info-color: white;
+}
 
-$team-image-info-font: $sans-serif-font !default;
-$team-image-info-color: white !default;
 .team-card {
   margin: 3vw;
   text-align: center;
@@ -37,8 +38,8 @@ $team-image-info-color: white !default;
         font-size: .8rem;
 
         a {
-          color: $team-image-info-color;
-          font-family: $team-image-info-font;
+          color: var(--team-image-info-color);
+          font-family: var(--team-image-info-font);
         }
       }
 

package/lib/unit/card/UnitCard.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/UnitCard.scss";
+import "./assets/UnitCard.css";
 import { Video } from "../../asset/data/Asset";
 import { UnitCardData } from "../data/Unit";
 export declare const UnitCard: React.FC<UnitCardProps>;

package/lib/unit/card/assets/{UnitCard.scss → UnitCard.css}

@@ -1,12 +1,13 @@
-@import "src/assets/variables";
+:root {
+    --unit-card-color: var(--primary-background-color);
+    --unit-card-secondary-color: var(--secondary-color);
+}
 
-$unit-card-color: $primary-background-color !default;
-$unit-card-secondary-color: $secondary-color !default;
 .unit-card {
-  color: $unit-card-color;
+  color: var(--unit-card-color);
 
   a {
-    color: $unit-card-color;
+    color: var(--unit-card-color);
   }
 
   a:hover {
@@ -34,17 +35,17 @@ $unit-card-secondary-color: $secondary-color !default;
     right: 0;
   }
 
-  //@media(min-width: $medium-size) {
-  //  width: 20rem;
-  //  height: 14rem;
-  //}
+  /* @media (min-width: 48rem) { */
+  /* width: 20rem; */
+  /* height: 14rem; */
+  /* } */
   .card--image {
     width: 100vw;
     height: 16rem;
     object-fit: cover;
   }
 
-  @media(min-width: $large-size) {
+  @media (min-width: 62rem) {
     width: 25rem;
     height: 16rem;
     .card--image {
@@ -52,7 +53,7 @@ $unit-card-secondary-color: $secondary-color !default;
       height: 16rem;
     }
   }
-  @media(min-width: $extra-large-size) {
+  @media (min-width: 75rem) {
     width: 33rem;
     height: 18rem;
     .card--image {
@@ -143,7 +144,7 @@ $unit-card-secondary-color: $secondary-color !default;
   .content--special {
     text-align: center;
     width: 45%;
-    background-color: $special-offer-color;
+    background-color: var(--special-offer-color);
     padding: 0 1rem;
   }
 
@@ -170,13 +171,13 @@ $unit-card-secondary-color: $secondary-color !default;
     }
     .truncate {
       text-overflow: ellipsis;
-      //@media(min-width: $medium-size) {
-      //  width: 10rem;
-      //}
-      @media(min-width: $large-size) {
+      /* @media (min-width: 48rem) { */
+      /* width: 10rem; */
+      /* } */
+      @media (min-width: 62rem) {
         width: 15rem;
       }
-      @media(min-width: $extra-large-size) {
+      @media (min-width: 75rem) {
         width: 22rem;
       }
       width: 55vw;
@@ -202,11 +203,11 @@ $unit-card-secondary-color: $secondary-color !default;
 }
 
 .unit-card--small {
-  //@media(min-width: $medium-size) {
-  //  width: 15rem;
-  //  height: 14rem;
-  //}
-  @media(min-width: $large-size) {
+  /* @media (min-width: 48rem) { */
+  /* width: 15rem; */
+  /* height: 14rem; */
+  /* } */
+  @media (min-width: 62rem) {
     width: 20rem;
     height: 16rem;
     .card--image {
@@ -214,7 +215,7 @@ $unit-card-secondary-color: $secondary-color !default;
       height: 16rem;
     }
   }
-  @media(min-width: $extra-large-size) {
+  @media (min-width: 75rem) {
     width: 28rem;
     height: 18rem;
     .card--image {
@@ -225,13 +226,13 @@ $unit-card-secondary-color: $secondary-color !default;
 
   .unit-card-footer {
     .left {
-      //@media(min-width: $medium-size) {
-      //  max-width: 8rem;
-      //}
-      @media(min-width: $large-size) {
+      /* @media (min-width: 48rem) { */
+      /* max-width: 8rem; */
+      /* } */
+      @media (min-width: 62rem) {
         max-width: 12rem;
       }
-      @media(min-width: $extra-large-size) {
+      @media (min-width: 75rem) {
         max-width: 16rem;
       }
 
@@ -243,11 +244,11 @@ $unit-card-secondary-color: $secondary-color !default;
 
   width: 100vw;
 
-  @media(min-width: $large-size) {
+  @media (min-width: 62rem) {
     width: 25rem;
 
   }
-  @media(min-width: $extra-large-size) {
+  @media (min-width: 75rem) {
     width: 33rem;
 
   }
@@ -259,10 +260,10 @@ $unit-card-secondary-color: $secondary-color !default;
 
 .unit-card-slider--small {
 
-  @media(min-width: $large-size) {
+  @media (min-width: 62rem) {
     width: 20rem;
   }
-  @media(min-width: $extra-large-size) {
+  @media (min-width: 75rem) {
     width: 28rem;
   }
 }

package/lib/unit/section/UnitHero.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "../../floorplan/section/assets/FloorplanHero.scss";
+import "../../floorplan/section/assets/FloorplanHero.css";
 import { UnitFloorplan } from "../data/Unit";
 import { WebSpecial } from "../../floorplan/data/Floorplan";
 export declare const UnitHero: React.FC<UnitHeroProps>;

package/lib/unit/section/UnitPrice.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "../../floorplan/card/assets/FloorplanPrice.scss";
+import "../../floorplan/card/assets/FloorplanPrice.css";
 import { UnitFloorplan } from "../data/Unit";
 export declare const UnitPrice: React.FC<UnitPriceProps>;
 export interface UnitPriceProps {

package/lib/unit/section/UnitSection.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/UnitSection.scss";
+import "./assets/UnitSection.css";
 export declare const UnitSection: React.FC<UnitSectionProps>;
 export interface UnitSectionProps {
     contactClickHandler: () => void;

package/lib/unit/section/UnitsHeader.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/UnitsHeader.scss";
+import "./assets/UnitsHeader.css";
 import { DefaultFloorplanFilters } from "../../floorplan/section/FloorplansSection";
 import { UnitCardData } from "../data/Unit";
 import { FloorplanFilters } from "../../floorplan/data/FloorplanFilters";

package/lib/unit/section/UnitsSection.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "./assets/UnitsSection.scss";
+import "./assets/UnitsSection.css";
 import { UnitCardData } from "../data/Unit";
 import { DefaultFloorplanFilters } from "../../floorplan/section/FloorplansSection";
 export declare const UnitsSection: React.FC<UnitsSectionProps>;