nestiq-component-library 1.1.171 → 1.2.0

package/dist/index.es.js

@@ -1,738 +0,0 @@
-import 'react-toastify/dist/ReactToastify.css';
-import React, { useState, useRef, useEffect } from 'react';
-import { toast, ToastContainer } from 'react-toastify';
-
-var Button = function (_a) {
-    var label = _a.label;
-    return React.createElement("button", null, label);
-};
-
-var x$1 = "/static/media/icon_close_2.e41bb9a4db48e048.png";
-
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z$a = ".popUpHeader {\r\n    height: 48px;\r\n    font-size: 32px;\r\n    font-weight: 600;\r\n    color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n    width: 16px;\r\n    height: 16px;\r\n    cursor: pointer;\r\n}\r\n";
-styleInject(css_248z$a);
-
-var css_248z$9 = ".popup-overlay {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background-color: rgba(0, 0, 0, 0.7);\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    z-index: 9998;\r\n}\r\n:root {\r\n    --main-yellow: #ffb525;\r\n    --second-yellow:#ff902b;\r\n    --gradient: linear-gradient(to bottom, var(--main-yellow), var(--second-yellow));;\r\n}\r\n";
-styleInject(css_248z$9);
-
-var Popup = function (_a) {
-    var onCloseClick = _a.onCloseClick, children = _a.children;
-    return (React.createElement("div", { className: "popup-overlay" },
-        React.createElement("div", { className: "shareSection  col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4" },
-            React.createElement("div", { className: "end-0 top-0 position-absolute " },
-                React.createElement("img", { src: x$1, alt: "close", className: "closeIcon me-2", onClick: onCloseClick })),
-            children)));
-};
-
-var ShareIcon = "/static/media/icon_share_1.b9ec05630dc1087e.svg";
-
-var locationIcon$1 = "/static/media/locationIconBlack.eb8e9e9226b43573.svg";
-
-var css_248z$8 = ".compact_cc {\r\n  padding: 32px;\r\n  height: 194px;\r\n  border-radius: 32px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: #f2f2f2;\r\n}\r\n\r\n.header_Text {\r\n  margin-top: 140px;\r\n  font-size: 32px;\r\n  line-height: normal;\r\n  color: #1b1b1b;\r\n}\r\n.location {\r\n  left: 0;\r\n}\r\n.vector svg {\r\n  width: 6px;\r\n  height: 21.5px;\r\n  flex-grow: 0;\r\n  margin: 4.2px 10px 4.2px 0;\r\n  fill: #344041;\r\n  cursor: pointer;\r\n}\r\n\r\n.textWrapper {\r\n  height: 20px;\r\n}\r\n\r\n.propText {\r\n  font-size: 16px;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n  color: #344041;\r\n}\r\n\r\n.v_share {\r\n  cursor: pointer;\r\n}\r\n\r\n.fetch_section {\r\n  margin-top: 90px;\r\n  height: 60px;\r\n}\r\n@media (min-width: 800px) {\r\n  .Pheader {\r\n    max-width: 1750px;\r\n    margin: 0 auto;\r\n  }\r\n}\r\n@media (min-width: 300px) and (max-width: 670px) {\r\n  .Pheader {\r\n    height: 700px;\r\n  }\r\n  .compact {\r\n    border-radius: 32px;\r\n    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n    background-color: #f2f2f2;\r\n  }\r\n  .compact2 {\r\n    position: relative !important;\r\n    display: flex !important;\r\n    align-self: flex-start !important;\r\n    margin-left: 25px;\r\n    justify-content: start !important;\r\n    align-items: flex-start !important;\r\n  }\r\n  .compact3 {\r\n    position: relative !important;\r\n    display: flex !important;\r\n    margin-left: 30px;\r\n    margin-top: 10px !important;\r\n  }\r\n  .header_Text {\r\n    margin-top: 0px;\r\n  }\r\n  .fetch_section {\r\n    margin-top: 0px;\r\n    height: 60px;\r\n  }\r\n  .propText {\r\n    justify-content: start !important;\r\n    align-self: flex-start !important;\r\n    text-align: start !important;\r\n  }\r\n  .propText2 {\r\n    justify-content: start !important;\r\n    align-self: flex-start !important;\r\n    text-align: start !important;\r\n    font-weight: 1000;\r\n    font-size: 24px;\r\n  }\r\n}\r\n";
-styleInject(css_248z$8);
-
-var email = "/static/media/envelope-fill.6669c9d64183941c.svg";
-
-var facebook = "/static/media/facebook.ce73eacbfffe8a27.svg";
-
-var linkedln = "/static/media/linkedin.7539333145b03678.svg";
-
-var Xtwitter = "/static/media/twitter-x.48a4ac3f560f0a62.svg";
-
-var whatsapp = "/static/media/whatsapp.28e6b0b24adc9289.svg";
-
-var css_248z$7 = ".shareSection {\r\n  height: 340px;\r\n  padding: 40px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n  max-width: 1280px;\r\n}\r\n.popUpHeader {\r\n  height: 48px;\r\n  font-size: 32px;\r\n  font-weight: 600;\r\n  color: #1b1b1b;\r\n}\r\n\r\n.closeIcon_c {\r\n  width: 16px;\r\n  height: 16px;\r\n  cursor: pointer;\r\n}\r\n\r\n.socialMediaIconsSection {\r\n  gap: 60px !important;\r\n}\r\n\r\n.socialMediaIcons {\r\n  width: 28px !important;\r\n  height: 28px !important;\r\n  cursor: pointer;\r\n}\r\n\r\n.socialMediaIconText {\r\n  height: 36px;\r\n  font-size: 13px;\r\n  font-weight: 500;\r\n  line-height: 3;\r\n  color: #344041;\r\n  cursor: pointer;\r\n}\r\n\r\n.popup_search-input {\r\n  height: 60px;\r\n  padding-inline-end: 190px;\r\n  font-size: 20px;\r\n  box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.popup_search-input::placeholder {\r\n  font-size: 20px;\r\n  color: rgba(140, 140, 140, 0.5);\r\n}\r\n\r\n.popup_search-input:focus {\r\n  outline: none;\r\n}\r\n\r\n.popupcustom-button {\r\n  height: 35px;\r\n  color: #000;\r\n  cursor: pointer;\r\n  border-color: var(--main-yellow);\r\n  right: 0;\r\n  z-index: 1;\r\n  background-image: var(--gradient);\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.button-text {\r\n  width: 115px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n}\r\n.button_success-right {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  border-color: #000;\r\n  background-color: transparent;\r\n}\r\n.button_success-left {\r\n  width: 200px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: var(--main-yellow);\r\n}\r\n.shareSection-Success {\r\n  height: 510px;\r\n  padding: 40px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n.shareSection-Error {\r\n  height: 400px;\r\n  padding: 10px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n.MessageShareSection {\r\n  height: 513px;\r\n  padding: 14px 14px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n\r\n.popup-tags {\r\n  font-size: large;\r\n  font-weight: bold;\r\n}\r\n.button_icon-left {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: var(--main-yellow);\r\n}\r\n.button-text {\r\n  width: 85px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n}\r\n.button_icon-right {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  border-color: #000;\r\n  background-color: transparent;\r\n}\r\n.circle {\r\n  height: 55px;\r\n  width: 55px;\r\n  background-color: transparent;\r\n  border-radius: 50%;\r\n  border-style: solid;\r\n  border-color: #000;\r\n  border-width: 2px;\r\n}\r\n.Line-9,\r\n.Line-10 {\r\n  height: 1px;\r\n  flex-grow: 1;\r\n  background-color: rgba(140, 140, 140, 0.5);\r\n  max-width: 23rem;\r\n  align-self: center;\r\n  align-content: center;\r\n}\r\n\r\n.middle-container {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.middle-text {\r\n  margin: 25px 25px;\r\n}\r\n.google-button {\r\n  width: 260px;\r\n  height: 45px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 4px;\r\n  background-color: #000000;\r\n  background: linear-gradient(to top, #000, #666);\r\n}\r\n.Account-popup {\r\n  height: 713px;\r\n  padding: 10px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n  max-width: 1000px;\r\n}\r\n.lightertxt {\r\n  color: #797979;\r\n}\r\n\r\n.filter {\r\n  height: 343px;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  padding: 32px;\r\n  border-radius: 32px;\r\n  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);\r\n  background-color: #f2f2f2;\r\n}\r\n.loginFilter {\r\n  height: 280px;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  padding: 32px;\r\n  border-radius: 32px;\r\n  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);\r\n  background-color: #f2f2f2;\r\n}\r\n.radioLabel {\r\n  width: 176px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: normal;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: left;\r\n  color: #1b1b1b;\r\n}\r\n.goButton-text {\r\n  width: 78px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n  color: #1b1b1b;\r\n}\r\n.placeholders {\r\n  width: 232px;\r\n  height: 45px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 4px;\r\n  background-image: linear-gradient(to top, #000 100%, #666 0%);\r\n}\r\n.TagW.active {\r\n  height: 40px;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 0 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-image: linear-gradient(to top, #000, #666);\r\n  color: white;\r\n}\r\n.Tag {\r\n  height: 40px;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 0 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-image: linear-gradient(\r\n    to top,\r\n    rgba(255, 0, 0, 0),\r\n    rgba(255, 0, 0, 1)\r\n  );\r\n}\r\n.TagW {\r\n  height: 40px;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 0 24px;\r\n  border-radius: 16px;\r\n  border: solid 1px #000;\r\n  background-color: #fff;\r\n  color: #000;\r\n}\r\n/* */\r\n.response {\r\n  max-width: 1280px;\r\n}\r\n";
-styleInject(css_248z$7);
-
-function SharePopup(props) {
-    var _a = useState(true), showPopUp = _a[0]; _a[1];
-    var handleClose = function () {
-        props.onClick();
-    };
-    var urlInputRef = useRef(null);
-    var copyToClipboard = function () {
-        urlInputRef.current.select();
-        document.execCommand("copy");
-        toast.success("URL copied to clipboard!");
-    };
-    return (React.createElement("div", null, showPopUp && (React.createElement("div", { className: " popup-overlay" },
-        React.createElement("div", { className: "shareSection  col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4" },
-            React.createElement("div", { className: "end-0 top-0 position-absolute " },
-                React.createElement("img", { src: x$1, alt: "close", className: "closeIcon_c me-2", onClick: handleClose })),
-            React.createElement("div", { className: "popUpHeader col-lg-12 d-flex justify-content-center mb-2" }, "Jetzt teilen und weitersagen!"),
-            React.createElement("div", { className: "h-25 col-lg-12 socialMediaIconsSection d-flex flex-row align-items-center justify-content-center mx-auto" },
-                React.createElement("a", { href: "https://twitter.com/intent/tweet?url=https://www.nestiq.de&text=Nestiq", className: "text-decoration-none", target: "blank" },
-                    React.createElement("div", { className: " flex-column d-flex align-items-center" },
-                        React.createElement("img", { src: Xtwitter, alt: "twitter", className: "socialMediaIcons" }),
-                        React.createElement("span", { className: "socialMediaIconText" }, "X (Twitter)"))),
-                React.createElement("a", { href: "https://www.facebook.com/sharer/sharer.php?u=https://www.nestiq.de", className: "text-decoration-none", target: "blank" },
-                    React.createElement("div", { className: " flex-column d-flex align-items-center" },
-                        React.createElement("img", { src: facebook, alt: "facebook", className: "socialMediaIcons " }),
-                        React.createElement("span", { className: "socialMediaIconText" }, "Facebook"))),
-                React.createElement("a", { href: "https://api.whatsapp.com/send?text=https://www.nestiq.de", target: "blank", className: "text-decoration-none" },
-                    React.createElement("div", { className: " flex-column d-flex  align-items-center" },
-                        React.createElement("img", { src: whatsapp, alt: "whatsapp", className: " socialMediaIcons" }),
-                        React.createElement("span", { className: "socialMediaIconText" }, "WhatsApp"))),
-                React.createElement("a", { href: "https://www.linkedin.com/shareArticle?mini=true&url=https://www.nestiq.de", target: "blank", className: "text-decoration-none" },
-                    React.createElement("div", { className: " flex-column d-flex  align-items-center" },
-                        React.createElement("img", { src: linkedln, alt: "linkedin", className: " socialMediaIcons" }),
-                        React.createElement("span", { className: "socialMediaIconText" }, "LinkedIn"))),
-                React.createElement("a", { href: "https://www.nestiq.de", target: "blank", className: "text-decoration-none" },
-                    React.createElement("div", { className: " flex-column d-flex  align-items-center" },
-                        React.createElement("img", { src: email, alt: "email", className: " socialMediaIcons" }),
-                        React.createElement("span", { className: "socialMediaIconText" }, "E-Mail")))),
-            React.createElement("div", { className: "col-10 mx-auto" },
-                React.createElement("div", { className: " row align-items-center position-relative" },
-                    React.createElement("input", { ref: urlInputRef, type: "text", className: "popup_search-input rounded-4 border border-0 ", placeholder: "Enter link here", value: window.location.href, readOnly: true }),
-                    React.createElement("button", { onClick: copyToClipboard, className: "popupcustom-button border border-0 position-absolute me-2 col-lg-3 col-md-3 col-sm-3 rounded-4 fs-6", type: "button", id: "button" },
-                        React.createElement("strong", null, "Kopieren")))))))));
-}
-
-function formatPrice(number) {
-    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
-}
-function formatPropertyArea(area) {
-    if (typeof area === "number" || typeof area === "string") {
-        return area
-            .toString()
-            .replace(".", ",")
-            .replace(/\B(?=(\d{3})+(?!\d))/g, ".");
-    }
-    else {
-        return area;
-    }
-}
-
-function PropertyDetailsHeader(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    var _l = useState(false), showPopUp = _l[0], setShowPopUp = _l[1];
-    (_a = props.property) === null || _a === void 0 ? void 0 : _a.propertyArea;
-    var handleOpenPopup = function () { return setShowPopUp(true); };
-    var handleClosePopup = function () { return setShowPopUp(false); };
-    var t = {
-        kaufpreis: ((_b = props.translations) === null || _b === void 0 ? void 0 : _b.kaufpreis) || "Kaufpreis",
-        wohnflache: ((_c = props.translations) === null || _c === void 0 ? void 0 : _c.wohnflache) || "Wohnfläche",
-        zimmer: ((_d = props.translations) === null || _d === void 0 ? void 0 : _d.zimmer) || "Zimmer",
-        grundriss: ((_e = props.translations) === null || _e === void 0 ? void 0 : _e.grundriss) || "Grundriss",
-    };
-    return (React.createElement("div", { className: "compact_cc d-flex flex-column col-12 col-lg-12 mt-3 justify-content-between" },
-        React.createElement("div", { className: "col-12 d-flex flex-row" },
-            React.createElement("div", { className: "header_Text d-flex col-lg-11 col-md-11 mt-0" },
-                React.createElement("strong", null, (_f = props.title) !== null && _f !== void 0 ? _f : "-")),
-            React.createElement("div", { className: "d-flex col-lg-1 col-md-1 justify-content-end position-relative" },
-                React.createElement("img", { src: ShareIcon, alt: "share icon", className: "v_share me-3 position-absolute", onClick: handleOpenPopup }))),
-        React.createElement("div", { className: "d-flex flex-row justify-content-between" },
-            React.createElement("div", { className: "col-6 d-flex flex-row align-items-end jsutify-content-start gap-1" },
-                React.createElement("div", { className: "d-flex gap-1 justify-content-center" },
-                    React.createElement("div", { className: "d-flex gap-2 align-items-center" },
-                        React.createElement("img", { src: locationIcon$1, className: "", alt: "location Icon" })),
-                    React.createElement("div", { className: "textWrapper" }, (_g = props.property) === null || _g === void 0 ? void 0 : _g.fullAddress))),
-            React.createElement("div", { className: "d-flex align-items-end gap-3 justify-content-end flex-row col-lg-6 col-md-6 col-sm-5" },
-                props && (React.createElement("div", { className: "propText h-100 d-flex flex-column align-items-center justify-content-center" },
-                    React.createElement("span", { className: "" },
-                        formatPrice((_j = (_h = props.property) === null || _h === void 0 ? void 0 : _h.askingPrice) !== null && _j !== void 0 ? _j : 0),
-                        "\u20AC ",
-                        React.createElement("br", null)),
-                    React.createElement("span", { className: "textWrapper" }, t.kaufpreis))),
-                props && (React.createElement("div", { className: "propText h-100 d-flex flex-column align-items-center justify-content-center" },
-                    React.createElement("span", { className: "" }, (_k = formatPropertyArea(props.property.constructedArea)) !== null && _k !== void 0 ? _k : 0),
-                    React.createElement("span", { className: "textWrapper" }, t.wohnflache))),
-                props && (React.createElement("div", { className: "propText h-100 d-flex flex-column align-items-center justify-content-center" },
-                    React.createElement("span", { className: "" }, props.property.rooms),
-                    React.createElement("span", { className: "textWrapper" }, t.zimmer))))),
-        showPopUp && React.createElement(SharePopup, { onClick: function () { return handleClosePopup(); } })));
-}
-
-var iconArrowRight = "/static/media/Icon_rightArrow.bced4a705c07148d.svg";
-
-var blcIconArrowRight = "/static/media/blackarrow-Right.e585ae62dd55abae.svg";
-
-var blcIconArrowLeft = "/static/media/blckarrow-Left.e2134741aa368d30.svg";
-
-var iconArrowLeft = "/static/media/chevron-left.04f0a7f16b745c1a.svg";
-
-var iconGallery = "/static/media/icon_gallery.269b721daf2ca907.svg";
-
-var iconMap = "/static/media/icon_map.2318ec664c3e615e.svg";
-
-var iconLayers$1 = "/static/media/layer_icon.9b56c187199c44b5.svg";
-
-var css_248z$6 = ".mainImage {\r\n  height: 80%;\r\n}\r\n\r\n.secondList {\r\n  height: 20%;\r\n  max-height: 121.6px;\r\n}\r\n\r\n.listImageButton {\r\n  background-image: linear-gradient(to top, #000, #666);\r\n  align-items: center !important;\r\n  justify-content: center !important;\r\n  min-height: 121px;\r\n}\r\n\r\n.listImgText {\r\n  height: 30px;\r\n  font-size: 14px;\r\n  line-height: 2.14;\r\n  color: #fff;\r\n}\r\n\r\n.arroIconColour {\r\n  height: 30px;\r\n  fill: #fff !important;\r\n}\r\n\r\n.onImageArrow {\r\n  width: 50px;\r\n  height: 50px;\r\n  padding: 23px 8px;\r\n  background-color: rgba(255, 255, 255, 0.8);\r\n}\r\n\r\n.blackArrow {\r\n  width: 20px;\r\n  height: 20px;\r\n}\r\n\r\n\r\n.imagesArray {\r\n  background-size: cover !important;\r\n}\r\n@media (max-width: 450px) {\r\n  .Pimagelist {\r\n  }\r\n  .mainImage {\r\n    height: 500px;\r\n    width: 88vw;\r\n  }\r\n}\r\n\r\n/* @media (min-width: 390px) and (max-width: 850px) {\r\n  .Pimagelist {\r\n  }\r\n  .mainImage {\r\n    height: 500px;\r\n    width: 58vw;\r\n  }\r\n} */\r\n@media (min-width: 768px) and (max-width: 819px) {\r\n  .Pimagelist {\r\n  }\r\n  .mainImage {\r\n    height: 80%;\r\n    width: 58vw;\r\n  }\r\n}\r\n@media (min-width: 820px) and (max-width: 850px) {\r\n  .Pimagelist {\r\n  }\r\n  .mainImage {\r\n    height: 80%;\r\n    width: 58vw;\r\n  }\r\n}\r\n\r\n.image-thumbnail {\r\n  position: relative;\r\n  transition: opacity 0.3s ease-in-out;\r\n  height: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.image-thumbnail img {\r\n  height: 100%;\r\n  object-fit: cover;\r\n  border-radius: 8px;\r\n}\r\n\r\n.image-thumbnail.greyed-out img {\r\n  filter: grayscale(100%) brightness(50%);\r\n}\r\n\r\n.image-thumbnail.selected img {\r\n  filter: none;\r\n  border: 2px solid #007bff; /* Highlight border for selected image */\r\n}";
-styleInject(css_248z$6);
-
-var css_248z$5 = ".popup-header {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 100%;\r\n  padding: 1rem;\r\n  position: absolute;\r\n  top: 0;\r\n}\r\n\r\n.closeIconNestiq {\r\n  position: absolute;\r\n  right: 10px;\r\n  top: 10px;\r\n  width: 12px;\r\n  height: 12px;\r\n  cursor: pointer;\r\n  z-index: 1;\r\n}\r\n\r\n.popup-title {\r\n  color: white;\r\n  font-size: 24px;\r\n  font-weight: bold;\r\n}\r\n\r\n.btn-close {\r\n  position: absolute;\r\n  right: 1rem;\r\n  top: 1rem;\r\n  background: none;\r\n  border: none;\r\n  color: white;\r\n  font-size: 24px;\r\n  cursor: pointer;\r\n}\r\n\r\n.popup-body {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: 1rem;\r\n  position: relative;\r\n  flex: 1;\r\n}\r\n\r\n.main-image {\r\n  max-width: 100%;\r\n  max-height: 80vh;\r\n  border-radius: 8px;\r\n}\r\n\r\n.btn-prev,\r\n.btn-next {\r\n  background: none;\r\n  border: none;\r\n  color: white;\r\n  font-size: 48px;\r\n  cursor: pointer;\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.btn-prev {\r\n  left: 10px;\r\n}\r\n\r\n.btn-next {\r\n  right: 10px;\r\n}\r\n\r\n.popup-thumbnails {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 10px;\r\n  padding: 1rem;\r\n}\r\n\r\n.thumbnail {\r\n  width: 60px;\r\n  height: 60px;\r\n  object-fit: cover;\r\n  border-radius: 8px;\r\n  cursor: pointer;\r\n  opacity: 0.6;\r\n}\r\n\r\n.thumbnail.active {\r\n  border: 2px solid white;\r\n  opacity: 1;\r\n}\r\n\r\n.activeStyle {\r\n  border: 3px solid transparent;\r\n  border-radius: 4px;\r\n  transition: transform 0.2s ease, border-color 0.2s ease;\r\n  cursor: pointer;\r\n}\r\n\r\n.activeStyle:hover {\r\n  transform: scale(1.05);\r\n}\r\n\r\n.activeStyle:focus {\r\n  outline: none;\r\n  transform: scale(1.05);\r\n}\r\n\r\n.activeStyle.active {\r\n  transform: scale(1.05);\r\n}\r\n";
-styleInject(css_248z$5);
-
-var iconClose = "/static/media/close.b5ce9141e80c688b.png";
-
-function ImageListPopup(props) {
-    var _a = useState(true), showPopUp = _a[0]; _a[1];
-    var _b = useState(0), currentImageIndex = _b[0], setCurrentImageIndex = _b[1];
-    var imageListRef = useRef(null);
-    var handleArrowClickInMainImage = function (direction) {
-        if (props.pictureUrls.length === 0)
-            return;
-        var newIndex = currentImageIndex;
-        if (direction === "left") {
-            newIndex =
-                (currentImageIndex - 1 + props.pictureUrls.length) %
-                    props.pictureUrls.length;
-        }
-        else if (direction === "right") {
-            newIndex = (currentImageIndex + 1) % props.pictureUrls.length;
-        }
-        setCurrentImageIndex(newIndex);
-        imageListRef.current.scrollTo({
-            left: newIndex * 150,
-            behavior: "smooth",
-        });
-    };
-    var handleClose = function () {
-        if (props.onClose) {
-            props.onClose();
-        }
-    };
-    return (React.createElement("div", null, showPopUp && (React.createElement("div", { className: "popup-overlay" },
-        React.createElement("div", { className: " d-flex  flex-column  " },
-            React.createElement("div", { className: "d-flex  align-self-end me-5 " },
-                React.createElement("img", { src: iconClose, alt: "close", className: "closeIconNestiq", onClick: handleClose })),
-            React.createElement("span", { className: "text-white align-self-center" }, props.pictureUrls[currentImageIndex].title),
-            React.createElement("div", { className: "d-flex justify-content-center" },
-                React.createElement("div", { className: "p-2 bd-highlight align-self-center align-items-center me-5" },
-                    React.createElement("div", { className: "rounded-circle border onImageArrow d-flex  justify-content-center", role: "button", onClick: function () { return handleArrowClickInMainImage("left"); } },
-                        React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow align-self-center", alt: "Left Arrow" }))),
-                React.createElement("div", { className: "p-2 bd-highlight" },
-                    React.createElement("div", { className: " rounded-5", style: {
-                            backgroundImage: "url(".concat(props.pictureUrls[currentImageIndex].url, ")"),
-                            height: "465px",
-                            width: "880px",
-                            backgroundSize: "cover",
-                            backgroundPosition: "center",
-                        } })),
-                React.createElement("div", { className: "p-2 bd-highlight align-self-center ms-5" },
-                    " ",
-                    React.createElement("div", { role: "button", className: "rounded-circle border onImageArrow d-flex justify-content-center", onClick: function () { return handleArrowClickInMainImage("right"); } },
-                        React.createElement("img", { src: blcIconArrowRight, className: "blackArrow align-self-center", alt: "Right Arrow" })))),
-            React.createElement("div", { className: "d-flex flex-row" }),
-            React.createElement("div", { className: "d-flex flex-row justify-content-center w-100 mt-5" },
-                React.createElement("div", { className: "d-flex flex-row gap-4 overflow-auto px-3", ref: imageListRef, style: {
-                        maxWidth: "100%",
-                        scrollbarWidth: "thin",
-                    } }, props.pictureUrls.length > 0 && (React.createElement(React.Fragment, null, props.pictureUrls.map(function (picture, index) { return (React.createElement("div", { key: index, className: "flex-shrink-0 activeStyle ".concat(index === currentImageIndex ? "active" : ""), onClick: function () {
-                        setCurrentImageIndex(index);
-                        imageListRef.current.scrollTo({
-                            left: index * 170, // 150px width + gap
-                            behavior: "smooth",
-                        });
-                    }, role: "button", style: {
-                        cursor: "pointer",
-                        width: "150px",
-                        height: "150px",
-                    } },
-                    React.createElement("img", { src: picture.url, alt: "Image ".concat(index + 1), className: "w-100 h-100 rounded-3 object-fit-cover", style: {
-                            display: "block",
-                        } }))); }))))))))));
-}
-
-function PropertyImageList(prop) {
-    var _a, _b, _c, _d, _e;
-    var _f = useState(0), currentImageIndex = _f[0], setCurrentImageIndex = _f[1];
-    var _g = useState(false), isImagePopupOpen = _g[0], setIsImagePopupOpen = _g[1];
-    var _h = useState(false), isFloorPlanPopupOpen = _h[0], setIsFloorPlanPopupOpen = _h[1];
-    var imageListRef = useRef(null);
-    var handleArrowClickInMainImage = function (direction) {
-        if (!prop.pictureUrls.length)
-            return;
-        setCurrentImageIndex(function (prevIndex) {
-            var newIndex;
-            if (direction === "left") {
-                newIndex =
-                    (prevIndex - 1 + prop.pictureUrls.length) % prop.pictureUrls.length;
-            }
-            else {
-                newIndex = (prevIndex + 1) % prop.pictureUrls.length;
-            }
-            if (imageListRef.current) {
-                imageListRef.current.scrollTo({
-                    left: newIndex * 150,
-                    behavior: "smooth",
-                });
-            }
-            return newIndex || 0;
-        });
-    };
-    var floorPlanImages = ((_a = prop.property.pictures) === null || _a === void 0 ? void 0 : _a.filter(function (p) { var _a; return ((_a = p.pictureType) === null || _a === void 0 ? void 0 : _a.id) === 1; }).map(function (p, index) { return ({
-        url: prop.baseUrl + p.contentUrl,
-        title: "Floor Plan ".concat(index + 1),
-    }); })) || [];
-    var toggleAllPhotos = function () {
-        setIsImagePopupOpen(!isImagePopupOpen);
-    };
-    var floorPlanClickHandler = function () {
-        setIsFloorPlanPopupOpen(true);
-    };
-    var t = {
-        allPhotos: ((_b = prop.translations) === null || _b === void 0 ? void 0 : _b.allPhotos) || "Alle Fotos",
-        map: ((_c = prop.translations) === null || _c === void 0 ? void 0 : _c.map) || "Karte",
-        grundriss: ((_d = prop.translations) === null || _d === void 0 ? void 0 : _d.grundriss) || "Grundriss",
-    };
-    return (React.createElement("div", { className: "col-8 Pimagelist " },
-        React.createElement("div", { className: "col-12 rounded-5 mainImage d-flex position-relative align-items-center", style: {
-                backgroundImage: "url(".concat((_e = prop.pictureUrls[currentImageIndex]) === null || _e === void 0 ? void 0 : _e.url, ")"),
-                backgroundSize: "cover",
-                backgroundPosition: "center",
-            } },
-            React.createElement("div", { className: "rounded-circle border onImageArrow d-flex position-absolute start-0 ms-2 align-items-center justify-content-center", role: "button", onClick: function () { return handleArrowClickInMainImage("left"); } },
-                React.createElement("img", { src: blcIconArrowLeft, className: "blackArrow", alt: "Left Arrow" })),
-            React.createElement("div", { role: "button", className: "rounded-circle border onImageArrow d-flex position-absolute end-0 me-2 align-items-center justify-content-center", onClick: function () { return handleArrowClickInMainImage("right"); } },
-                React.createElement("img", { src: blcIconArrowRight, className: "blackArrow", alt: "Right Arrow" }))),
-        React.createElement("div", { className: "d-none d-md-block" },
-            React.createElement("div", { className: "mt-1 d-flex flex-row gap-1 col-12 secondList" },
-                React.createElement("div", { className: "\tcol-lg-6  col-6 d-flex flex-row py-0 px-1" },
-                    React.createElement("div", { className: "\t col-12 position-relative d-flex justify-content-center" },
-                        React.createElement("div", { className: "col-1 h-100 d-flex position-absolute start-0", onClick: function () { return handleArrowClickInMainImage("left"); }, role: "button" },
-                            React.createElement("div", { className: "col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
-                                React.createElement("img", { src: iconArrowLeft, className: "arroIconColour", alt: "Left Arrow" }))),
-                        React.createElement("div", { className: "col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-hidden", ref: imageListRef }, prop.pictureUrls.length > 0 && (React.createElement("div", { className: "col-lg-5 h-100 d-flex gap-2 flex-row rounded-3" }, prop.pictureUrls.map(function (picture, index) { return (React.createElement("div", { key: index, className: "col-lg-12 h-100 d-flex image-thumbnail ".concat(index === currentImageIndex
-                                ? "selected"
-                                : "greyed-out", " ").concat(index === 0
-                                ? "ms-1"
-                                : index === prop.pictureUrls.length - 1
-                                    ? "me-1"
-                                    : ""), onClick: function () {
-                                setCurrentImageIndex(index);
-                                imageListRef.current.scrollTo({
-                                    left: index * 150,
-                                    behavior: "smooth",
-                                });
-                            }, role: "button" },
-                            React.createElement("img", { src: picture.url, alt: "Image ".concat(index + 1), className: "col-12 h-100 rounded-3 object-fit-cover" }))); })))),
-                        React.createElement("div", { className: "col-1 h-100 d-flex position-absolute end-0 top-0", onClick: function () { return handleArrowClickInMainImage("right"); }, role: "button" },
-                            React.createElement("div", { className: "col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
-                                React.createElement("img", { src: iconArrowRight, className: "arroIconColour ", alt: "Right Arrow" }))))),
-                React.createElement("div", { className: "col-7 col-lg-6 d-flex flex-row" },
-                    React.createElement("div", { className: "col-lg-4 col-4 py-0 px-1", role: "button", onClick: toggleAllPhotos },
-                        React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
-                            React.createElement("img", { src: iconGallery, alt: "Gallery Icon" }),
-                            React.createElement("span", { className: "listImgText" },
-                                " ",
-                                t.allPhotos))),
-                    React.createElement("div", { className: "col-lg-4 col-3 py-0 px-1", role: "button", onClick: floorPlanClickHandler },
-                        React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
-                            React.createElement("img", { src: iconLayers$1, alt: "Layers Icon" }),
-                            React.createElement("span", { className: "listImgText" }, t.grundriss))),
-                    React.createElement("div", { className: "col-lg-4 col-3 py-0 px-1", role: "button", onClick: function () {
-                            return window.scrollTo({
-                                top: document.documentElement.scrollHeight,
-                            });
-                        } },
-                        React.createElement("div", { className: "border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3" },
-                            React.createElement("img", { src: iconMap, alt: "Map Icon" }),
-                            React.createElement("span", { className: "listImgText" }, t.map)))))),
-        isImagePopupOpen && (React.createElement(ImageListPopup, { pictureUrls: prop.allPictureUrls, onClose: function () { return setIsImagePopupOpen(false); } })),
-        isFloorPlanPopupOpen && (React.createElement(ImageListPopup, { pictureUrls: floorPlanImages, onClose: function () { return setIsFloorPlanPopupOpen(false); } }))));
-}
-
-var layerIcon = "/static/media/LayersIcon.34c085c352a2c9c8.svg";
-
-var locationIcon = "/static/media/locationIcon.961de080757bda41.svg";
-
-var css_248z$4 = ".padding-global {\r\n  height: 737px !important;\r\n  padding: 0 40px;\r\n}\r\n.header {\r\n  font-size: 48px;\r\n  font-weight: 600;\r\n  color: #1b1b1b;\r\n}\r\n\r\n.firstLabel {\r\n  width: 100px;\r\n  height: 25px;\r\n  gap: 6px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #031012 !important;\r\n  background-color: var(--main-yellow);\r\n}\r\n\r\n.secondLabel {\r\n  width: fit-content;\r\n  height: 25px;\r\n  padding: 0 17px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #000;\r\n  background-color: #fff;\r\n}\r\n\r\n/* .thirdLabels {\r\n  padding: 4px;\r\n  width: 110px;\r\n  height: 25px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #000;\r\n  background-color: #fff;\r\n} */\r\n\r\n.fourthLabels {\r\n  padding: 2px;\r\n\r\n  width: 100px;\r\n  height: 25px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #000;\r\n  background-color: #fff;\r\n}\r\n\r\n.layersVector {\r\n  width: 15.1px;\r\n  height: 16px;\r\n}\r\n\r\n.layersText {\r\n  font-size: 14px;\r\n  color: #1b1b1b;\r\n}\r\n\r\n.style-img {\r\n  object-fit: cover;\r\n  border-radius: 30px !important;\r\n}\r\n\r\n.Vector {\r\n  width: 12px;\r\n  height: 16.1px;\r\n  flex-grow: 0;\r\n  margin: 0.4px 6px 0.4px 0;\r\n}\r\n\r\n.customButton {\r\n  width: 262px;\r\n  height: 43px;\r\n  color: #000;\r\n  cursor: pointer;\r\n  border-color: var(--main-yellow);\r\n  background-color: var(--main-yellow);\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.button_text {\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  color: #1b1b1b;\r\n}\r\n\r\n.heartVector {\r\n  width: 23px;\r\n  height: 26.7px;\r\n  cursor: pointer;\r\n}\r\n\r\n.heartVector.liked {\r\n  fill: rgb(255, 255, 255) !important;\r\n}\r\n.locationText {\r\n  font-size: 14px;\r\n  color: white;\r\n  text-align: center;\r\n}\r\n\r\n.arrowVector {\r\n  width: 23px;\r\n  height: 23px;\r\n  flex-grow: 0;\r\n  object-fit: contain;\r\n}\r\n\r\n.Price {\r\n  font-size: 26px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n  color: #fff;\r\n}\r\n\r\n.detail {\r\n  font-size: 12px;\r\n  text-align: center;\r\n  color: #fff;\r\n}\r\n\r\n.class {\r\n  background-color: #1b1b1b;\r\n}\r\n\r\n.header {\r\n  height: 64px;\r\n  justify-content: center;\r\n}\r\n\r\n.cardStyle {\r\n  width: 405px;\r\n  max-width: 2405px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 350px;\r\n  border-radius: 30px !important;\r\n}\r\n\r\n.rightConer {\r\n  width: 200px;\r\n}\r\n@media all and (min-width: 2560px) {\r\n  .header {\r\n    font-size: 38px;\r\n\r\n    display: flex;\r\n  }\r\n  .cardStyle {\r\n    gap: 0px;\r\n    width: 350px;\r\n    height: 300px;\r\n    /* margin-left: 250px; */\r\n  }\r\n}\r\n@media (max-width: 1399px) {\r\n  .header {\r\n    font-size: 38px;\r\n    align-self: center;\r\n    margin-left: 150px;\r\n  }\r\n  .cardStyle {\r\n    gap: 0px;\r\n    width: 350px;\r\n    height: 300px;\r\n  }\r\n}\r\n\r\n@media (max-width: 1199px) {\r\n  .header {\r\n    font-size: 38px;\r\n  }\r\n  .cardStyle {\r\n    width: 300px;\r\n    height: 250px;\r\n  }\r\n}\r\n\r\n@media (max-width: 575px) {\r\n  .detail {\r\n    font-size: 11px;\r\n    padding: 2px;\r\n  }\r\n  .Price {\r\n    font-size: 19px;\r\n  }\r\n  .header {\r\n    font-size: 28px;\r\n  }\r\n  .locationText {\r\n    font-size: 12px;\r\n  }\r\n  .customButton {\r\n    width: 200px !important;\r\n  }\r\n  .button_text {\r\n    font-size: 13px;\r\n  }\r\n}\r\n\r\n@media (max-width: 375px) {\r\n  .labelTopClass {\r\n    width: 105px !important;\r\n  }\r\n  .layersText {\r\n    font-size: 9px;\r\n  }\r\n  .firstLabel {\r\n    gap: 2px;\r\n  }\r\n  .layersVector {\r\n    width: 9px;\r\n    height: 10px;\r\n    gap: 0px;\r\n  }\r\n  .cardStyle {\r\n    width: 320px !important;\r\n    height: 220px !important;\r\n  }\r\n  .header {\r\n    font-size: 24px;\r\n  }\r\n  .detail {\r\n    font-size: 10px;\r\n    padding: 2px;\r\n  }\r\n  .Price {\r\n    font-size: 18px;\r\n  }\r\n  .locationText {\r\n    font-size: 10px;\r\n  }\r\n  .Vector {\r\n    width: 8px;\r\n    height: 16px;\r\n    margin: 0px 2px 0.4px;\r\n  }\r\n}\r\n\r\n@media (max-width: 280px) {\r\n  .cardStyle {\r\n    width: 260px !important;\r\n    height: 160px !important;\r\n  }\r\n  .detail {\r\n    margin-bottom: 5px;\r\n    font-size: 0.6ch;\r\n  }\r\n  .Price {\r\n    font-size: 9px;\r\n  }\r\n  .locationText {\r\n    font-size: 6px;\r\n  }\r\n  .Vector {\r\n    width: 7px;\r\n    height: 10px;\r\n    margin: 0px 2px 4px;\r\n  }\r\n  .heartVector {\r\n    width: 15px;\r\n    height: 20px;\r\n  }\r\n}\r\n";
-styleInject(css_248z$4);
-
-var noImageIcon$1 = "/static/media/default-property.9987f19670be82b6.jpg";
-
-function PropertyCard$1(props) {
-    var _a, _b, _c, _d;
-    var _e = useState(false); _e[0]; _e[1];
-    var pictureUrl = props.property.pictures && props.property.pictures.length > 0
-        ? "".concat(props.baseUrl).concat(props.property.pictures[0].contentUrl)
-        : noImageIcon$1;
-    return (React.createElement("div", { key: props.property.id, className: "card-body me-4 mb-4 position-relative cardStyle", style: {
-            backgroundImage: "url(".concat(pictureUrl, ")"),
-            backgroundSize: "cover",
-            backgroundPosition: "center",
-        }, onClick: props.onClick, role: "button" },
-        React.createElement("div", { className: "labelTopClass position-absolute top-0 start-0 col-sm-5 col-lg-8" },
-            React.createElement("div", { className: "d-flex align-items-center ms-2 mb-1 mt-2 gap-2" },
-                React.createElement("label", { className: "p-1 firstLabel d-flex flex-row justify-content-center align-items-center" },
-                    React.createElement("img", { src: layerIcon, alt: "Location Icon", className: "layersVector" }),
-                    React.createElement("span", { className: "layersText" }, "Grundriss")),
-                props.property.historicalProtection && (React.createElement("label", { className: "thirdLabels d-flex flex-row justify-content-center align-items-center" },
-                    React.createElement("span", { className: "layersText p-1" }, "Denkmalschutz"))),
-                props.property.basement && (React.createElement("label", { className: "secondLabel  d-flex flex-row justify-content-center align-items-center" },
-                    React.createElement("span", { className: "layersText p-1" }, "Keller")))),
-            React.createElement("div", { className: "d-flex align-items-center  ms-2 start-0 gap-2" },
-                props.property.terrace && (React.createElement("label", { className: "p-1 thirdLabels d-flex flex-row justify-content-center align-items-center " },
-                    React.createElement("span", { className: "layersText" }, "Terrace"))),
-                props.property.balcony && (React.createElement("label", { className: "secondLabel  d-flex flex-row justify-content-center align-items-center" },
-                    React.createElement("span", { className: "layersText p-1" }, "Balkon"))),
-                props.property.guestBathroom && (React.createElement("label", { className: "col-1 fourthLabels d-flex flex-row justify-content-center align-items-center " },
-                    React.createElement("span", { className: "layersText p-1" }, "Gäste-WC"))))),
-        React.createElement("div", { className: "d-flex align-items-center  position-absolute top-0 end-0 p-3" }),
-        React.createElement("div", { className: "d-flex align-items-center mb-3 position-absolute bottom-0 start-0  p-2" },
-            React.createElement("span", { className: "Price col-lg-12 col-md-12 col-sm-12 text-truncate p-1" },
-                formatPrice((_c = (_b = (_a = props.property) === null || _a === void 0 ? void 0 : _a.evaluation) === null || _b === void 0 ? void 0 : _b.askingPrice) !== null && _c !== void 0 ? _c : 0),
-                " \u20AC")),
-        React.createElement("div", { className: "d-flex w-50 align-items-center position-absolute bottom-0 start-0 p-2" },
-            React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "Vector" }),
-            React.createElement("span", { className: "locationText text-truncate" }, props.property.city || "N/A")),
-        React.createElement("div", { className: "d-flex col-lg-6 col-md-6 col-sm-5 me-lg-0 me-md-0 me-sm-3 justify-content-center mb-2 position-absolute bottom-0 end-0" },
-            React.createElement("span", { className: "detail col-lg-4 col-md-4 col-sm-6 text-truncate border-end " },
-                +props.property.rooms,
-                React.createElement("br", null),
-                React.createElement("span", null, "Zimmer")),
-            React.createElement("span", { className: "detail col-lg-3 col-md-3 col-sm-4 text-truncate " },
-                +props.property.bathrooms,
-                React.createElement("br", null),
-                React.createElement("span", null, "Bad")),
-            React.createElement("span", { className: "detail col-lg-5 col-md-5 col-sm-7 text-truncate border-start me-3" },
-                formatPropertyArea((_d = props.property) === null || _d === void 0 ? void 0 : _d.constructedArea),
-                " m\u00B2",
-                React.createElement("br", null),
-                React.createElement("span", null, "Wohnfl\u00E4che")))));
-}
-
-var FloorPlanPopup = function (_a) {
-    var contentUrl = _a.contentUrl, onCloseClick = _a.onCloseClick;
-    var _b = useState(false), isContentImage = _b[0], setIsContentImage = _b[1];
-    useEffect(function () {
-        var _a;
-        if (contentUrl) {
-            var fileFormat = (_a = contentUrl.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-            if (fileFormat === "png" ||
-                fileFormat === "jpg" ||
-                fileFormat === "jpeg" ||
-                fileFormat === "svg") {
-                setIsContentImage(true);
-            }
-        }
-    }, [contentUrl]);
-    var downloadButtonClickHandler = function () {
-        // Create a temporary anchor element
-        var link = document.createElement("a");
-        link.href = contentUrl;
-        link.setAttribute("download", ""); // This attribute hints the browser to download the file
-        // Append the anchor to the body and click it to trigger the download
-        document.body.appendChild(link);
-        link.click();
-        // Clean up: remove the anchor element
-        document.body.removeChild(link);
-    };
-    return (React.createElement("div", { className: "popup-overlay" },
-        React.createElement("div", { className: " d-flex w-50 flex-column  col-6 " },
-            React.createElement("div", { className: "d-flex  align-self-end me-5 mt-5" },
-                React.createElement("img", { src: iconClose, alt: "close", className: "closeIcon mt-5", onClick: onCloseClick })),
-            React.createElement("div", { className: "d-flex justify-content-center" },
-                React.createElement("div", { className: "p-2 bd-highlight" },
-                    isContentImage && (React.createElement("div", { className: "rounded-5 mainImage", style: {
-                            backgroundImage: "url(".concat(contentUrl, ")"),
-                            height: "350px",
-                            width: "600px",
-                            backgroundSize: "cover",
-                            backgroundPosition: "center",
-                        } })),
-                    !isContentImage && (React.createElement("div", { className: "text-white text-center" },
-                        "No Preview Available",
-                        React.createElement("button", { className: "btn btn-info", onClick: downloadButtonClickHandler },
-                            " ",
-                            "Download",
-                            " "))))))));
-};
-
-var css_248z$3 = ".property-card {\r\n  width: 100%;\r\n  /* max-width: 1280px; */\r\n  height: auto;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border-radius: 32px;\r\n\r\n  /* @media (min-width: 1500px) {\r\n    max-width: 1280px;\r\n    margin: 0 auto;\r\n  } */\r\n}\r\n\r\n.priceValue,\r\n.value {\r\n  white-space: nowrap;\r\n}\r\n\r\n.price_label,\r\n.details {\r\n  white-space: nowrap;\r\n}\r\n\r\n.listing-compact_c {\r\n  /* max-width: 750px; */\r\n  gap: 8px;\r\n  padding: 24px;\r\n  border-radius: 0 32px 32px 0;\r\n  background-color: rgba(58, 58, 58, 0.068);\r\n}\r\n\r\n.wrapperCompanySec {\r\n  height: 119px;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  gap: 16px;\r\n  padding: 10px 16px;\r\n  border-radius: 16px;\r\n  border: solid 1px rgba(0, 0, 0, 0.1);\r\n  background-color: #fff;\r\n}\r\n\r\n.kontactbutton_cc {\r\n  width: 180px;\r\n  height: 43px;\r\n  gap: 10px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background: linear-gradient(to top, #000, #666);\r\n}\r\n\r\n.cc-height {\r\n  height: 460px;\r\n}\r\n\r\n.listing-height {\r\n  height: 422px;\r\n}\r\n\r\n.cardStyles {\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 460px;\r\n  border-radius: 32px 0px 0px 32px !important;\r\n}\r\n.cardTag {\r\n  width: 75px;\r\n  height: 30px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 0 24px;\r\n  border-radius: 16px;\r\n  border: solid 1px #313131;\r\n  background-color: #fff;\r\n}\r\n.Grundriss {\r\n  width: 120px;\r\n  height: 30px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 10px;\r\n  font-size: 14px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background: linear-gradient(to top, #000, #666);\r\n}\r\n.Frame-136 {\r\n  height: 85px;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  gap: 16px;\r\n  padding: 10px 16px;\r\n  border-radius: 16px;\r\n  border: solid 1px rgba(0, 0, 0, 0.1);\r\n  background-color: #fff;\r\n}\r\n.kontactbutton {\r\n  width: 198px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 10px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background: linear-gradient(to top, #000, #666);\r\n}\r\n.kontact-button-text {\r\n  flex-grow: 0;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n  color: #fff;\r\n}\r\n.propertyTitle {\r\n  display: flex;\r\n  flex-grow: 0;\r\n  font-size: 24px;\r\n  font-weight: 580;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: start;\r\n  color: #313131;\r\n}\r\n\r\n.chipLabel {\r\n  height: 30px;\r\n  padding: 0 10px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #000;\r\n  background-color: #fff;\r\n  display: flex;\r\n}\r\n\r\n.layersVector {\r\n  width: 15.1px;\r\n  height: 16px;\r\n}\r\n\r\n.layersText {\r\n  padding: 0 8px;\r\n  font-size: 14px;\r\n  color: #1b1b1b;\r\n  line-height: 2.14;\r\n  text-wrap: nowrap;\r\n}\r\n\r\n.style-img {\r\n  object-fit: cover;\r\n  border-radius: 30px !important;\r\n}\r\n\r\n.Vector {\r\n  width: 12px;\r\n  height: 16.1px;\r\n  flex-grow: 0;\r\n  margin: 0.4px 6px 0.4px 0;\r\n}\r\n\r\n.customButton {\r\n  width: 262px;\r\n  height: 43px;\r\n  color: #000;\r\n  cursor: pointer;\r\n  border-color: #161410;\r\n  background-color: #181716;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.button_text {\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  color: #1b1b1b;\r\n}\r\n\r\n.heartVector {\r\n  width: 23px;\r\n  height: 26.7px;\r\n  cursor: pointer;\r\n}\r\n\r\n.heartVector.liked {\r\n  fill: rgb(255, 255, 255) !important;\r\n}\r\n\r\n.location-wrapper {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n}\r\n\r\n.location-icon {\r\n  width: 16px;\r\n  height: 21px;\r\n  flex-grow: 0;\r\n  object-fit: contain;\r\n}\r\n\r\n.locationTexts {\r\n  font-size: 16px;\r\n  color: #344041;\r\n  text-align: center;\r\n}\r\n\r\n.arrowVector {\r\n  width: 23px;\r\n  height: 23px;\r\n  flex-grow: 0;\r\n  object-fit: contain;\r\n}\r\n\r\n.Price {\r\n  font-size: 26px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n  color: #ffffff;\r\n}\r\n\r\n.details {\r\n  font-size: 16px;\r\n  color: #344041;\r\n}\r\n\r\n.price_label {\r\n  font-size: 16px;\r\n  text-align: left;\r\n  color: #344041;\r\n}\r\n\r\n.value {\r\n  font-size: 20px;\r\n  font-weight: 500;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 5px;\r\n  line-height: 1;\r\n}\r\n.priceValue {\r\n  font-size: 20px;\r\n  font-weight: 500;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 5px;\r\n  line-height: 1;\r\n}\r\n\r\n.class {\r\n  background-color: #1b1b1b;\r\n}\r\n\r\n.header {\r\n  height: 64px;\r\n  justify-content: center;\r\n}\r\n\r\n.rightConer {\r\n  width: 200px;\r\n}\r\n.labelTopClass {\r\n  height: 32px;\r\n}\r\n@media all and (min-width: 2560px) {\r\n  .header {\r\n    font-size: 38px;\r\n\r\n    display: flex;\r\n  }\r\n  .cardStyle {\r\n    gap: 0px;\r\n    width: 350px;\r\n    height: 300px;\r\n    /* margin-left: 250px; */\r\n  }\r\n}\r\n@media (max-width: 1399px) {\r\n  .header {\r\n    font-size: 38px;\r\n    align-self: center;\r\n    margin-left: 150px;\r\n  }\r\n  .cardStyle {\r\n    gap: 0px;\r\n    width: 350px;\r\n    height: 300px;\r\n  }\r\n}\r\n\r\n@media (max-width: 1199px) {\r\n  .header {\r\n    font-size: 38px;\r\n  }\r\n  .cardStyle {\r\n    width: 300px;\r\n    height: 250px;\r\n  }\r\n}\r\n\r\n@media (max-width: 575px) {\r\n  .detail {\r\n    font-size: 11px;\r\n    padding: 2px;\r\n  }\r\n  .Price {\r\n    font-size: 19px;\r\n  }\r\n  .header {\r\n    font-size: 28px;\r\n  }\r\n  .locationText {\r\n    font-size: 12px;\r\n  }\r\n  .customButton {\r\n    width: 200px !important;\r\n  }\r\n  .button_text {\r\n    font-size: 13px;\r\n  }\r\n}\r\n\r\n@media (max-width: 375px) {\r\n  .labelTopClass {\r\n    width: 105px !important;\r\n  }\r\n  .layersText {\r\n    font-size: 9px;\r\n    padding: 0 2rem;\r\n  }\r\n  .firstLabel {\r\n    gap: 2px;\r\n  }\r\n  .layersVector {\r\n    width: 9px;\r\n    height: 10px;\r\n    gap: 0px;\r\n  }\r\n  .cardStyle {\r\n    width: 320px !important;\r\n    height: 220px !important;\r\n  }\r\n  .header {\r\n    font-size: 24px;\r\n  }\r\n  .detail {\r\n    font-size: 10px;\r\n    padding: 2px;\r\n  }\r\n  .Price {\r\n    font-size: 18px;\r\n  }\r\n  .locationText {\r\n    font-size: 10px;\r\n  }\r\n  .Vector {\r\n    width: 8px;\r\n    height: 16px;\r\n    margin: 0px 2px 0.4px;\r\n  }\r\n}\r\n\r\n@media (max-width: 280px) {\r\n  .cardStyle {\r\n    width: 260px !important;\r\n    height: 160px !important;\r\n  }\r\n  .detail {\r\n    margin-bottom: 5px;\r\n    font-size: 0.6ch;\r\n  }\r\n  .Price {\r\n    font-size: 9px;\r\n  }\r\n  .locationText {\r\n    font-size: 6px;\r\n  }\r\n  .Vector {\r\n    width: 7px;\r\n    height: 10px;\r\n    margin: 0px 2px 4px;\r\n  }\r\n  .heartVector {\r\n    width: 15px;\r\n    height: 20px;\r\n  }\r\n}\r\n";
-styleInject(css_248z$3);
-
-var noImageIcon = "/static/media/default-property.9987f19670be82b6.jpg";
-
-var shareIcon = "/static/media/icon_share_1.b9ec05630dc1087e.svg";
-
-var moreIcon = "/static/media/more.ce14789c8d37e327.svg";
-
-var arrowLeft = "/static/media/card-arrow-left.55343410142dad3f.svg";
-
-var arrowRight = "/static/media/card-arrow-right.60b3bf0e34c1800d.svg";
-
-var iconLayers = "/static/media/layer_icon.9b56c187199c44b5.svg";
-
-var immooly = "/static/media/imooly.b46514ac970e6052.svg";
-
-function PropertyCard(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-    var _p = useState(false); _p[0]; _p[1];
-    var _q = useState(null), mainImage = _q[0], setMainImage = _q[1];
-    var _r = useState(0), currentImageIndex = _r[0], setCurrentImageIndex = _r[1];
-    var imageListRef = useRef(null);
-    var _s = useState(false); _s[0]; _s[1];
-    var _t = useState(false); _t[0]; _t[1];
-    var _u = useState(false), sharePopUp = _u[0], setSharePopUp = _u[1];
-    var _v = useState(false), isImagePopupOpen = _v[0], setIsImagePopupOpen = _v[1];
-    var pictureUrls = ((_b = (_a = props.property) === null || _a === void 0 ? void 0 : _a.pictures) === null || _b === void 0 ? void 0 : _b.length) > 0
-        ? props.property.pictures
-            .filter(function (picture) { return picture.pictureType.id === 2; })
-            .map(function (picture) { return "".concat(props.baseUrl).concat(picture.contentUrl); })
-        : [noImageIcon];
-    var floorPlanImages = ((_c = props.property.pictures) === null || _c === void 0 ? void 0 : _c.filter(function (p) { var _a; return ((_a = p.pictureType) === null || _a === void 0 ? void 0 : _a.id) === 1; }).map(function (p, index) { return ({
-        url: props.baseUrl + p.contentUrl,
-        title: "Floor Plan ".concat(index + 1),
-    }); })) || [];
-    var handleFloorPlanButton = function () {
-        setIsImagePopupOpen(true);
-        if (props.onFloorPlanClick) {
-            props.onFloorPlanClick(floorPlanImages);
-        }
-    };
-    var handleSharePopUp = function () {
-        setSharePopUp(true);
-    };
-    var handleArrowClickInMainImage = function (direction) {
-        if (!props.property || pictureUrls.length === 0)
-            return;
-        var newIndex = currentImageIndex;
-        if (direction === "left") {
-            newIndex =
-                (currentImageIndex - 1 + pictureUrls.length) % pictureUrls.length;
-        }
-        else if (direction === "right") {
-            newIndex = (currentImageIndex + 1) % pictureUrls.length;
-        }
-        setCurrentImageIndex(newIndex);
-        setMainImage(pictureUrls[newIndex]);
-        // Ensure the ref exists before calling scrollTo
-        if (imageListRef.current) {
-            imageListRef.current.scrollTo({
-                left: newIndex * 150,
-                behavior: "smooth",
-            });
-        }
-        else {
-            console.warn("imageListRef is not set");
-        }
-    };
-    // const boosted = "true";
-    var t = {
-        kaufpreis: ((_d = props.translations) === null || _d === void 0 ? void 0 : _d.kaufpreis) || "Kaufpreis",
-        wohnflache: ((_e = props.translations) === null || _e === void 0 ? void 0 : _e.wohnflache) || "Wohnfläche",
-        zimmer: ((_f = props.translations) === null || _f === void 0 ? void 0 : _f.zimmer) || "Zimmer",
-        grundriss: ((_g = props.translations) === null || _g === void 0 ? void 0 : _g.grundriss) || "Grundriss",
-    };
-    return (React.createElement("div", { className: "d-flex flex-row property-card" },
-        React.createElement("div", { className: "d-flex flex-column col-md-6 col-lg-6" },
-            React.createElement("div", { key: props.property.id, className: "card-bod position-relative cardStyles h-100 w-100", style: {
-                    backgroundImage: "url(".concat(mainImage || pictureUrls[0], ")"),
-                    backgroundSize: "cover",
-                    backgroundPosition: "center",
-                    maxWidth: "640",
-                } },
-                React.createElement("div", { className: "d-flex flex-row col-12 justify-content-between " },
-                    React.createElement("div", { className: "d-felx  align-self-start justify-items-start ms-4 ", style: { left: "16px" }, onClick: function () { return handleArrowClickInMainImage("left"); }, role: "button" },
-                        React.createElement("img", { src: arrowLeft })),
-                    React.createElement("div", null),
-                    React.createElement("div", { className: "d-flex  align-self-end justify-items-end me-4", onClick: function () { return handleArrowClickInMainImage("right"); }, role: "button" },
-                        React.createElement("img", { src: arrowRight, style: { right: "16px" } }))),
-                React.createElement("div", { className: "d-flex flex-row  align-self-end justify-item-start justify-content-between align-item-start gap-1 mb-2 ms-4", style: { position: "absolute", left: "0" } },
-                    React.createElement("div", { className: "cardTag", style: { marginBottom: "16px" } }, "".concat(currentImageIndex + 1, "/").concat(pictureUrls.length)),
-                    React.createElement("div", { className: "Grundriss kontact-button-text ms-2 ", role: "button", onClick: function () { return handleFloorPlanButton(); }, style: { marginBottom: "16px" } },
-                        React.createElement("img", { src: iconLayers, className: "", style: { width: "18px" } }),
-                        " ",
-                        t.grundriss)))),
-        React.createElement("div", { className: "listing-compact_c justify-content-between d-flex flex-column col-6 ".concat(props.Impliment ? "cc-height" : "listing-height") },
-            React.createElement("div", { className: "col-12 d-flex justify-content-end gap-2" },
-                React.createElement("img", { src: shareIcon, alt: "Share Icon", className: " ", onClick: handleSharePopUp, style: { maxHeight: "24px", maxWidth: "24px" }, role: "button" }),
-                React.createElement("img", { src: moreIcon, alt: "More Icon", className: "", style: { maxHeight: "24px", maxWidth: "24px" }, role: "button" })),
-            React.createElement("div", { className: "col-11" },
-                React.createElement("span", { className: "propertyTitle align-items-start ", onClick: props.onClick, role: "button" }, (_h = props.property.expose) === null || _h === void 0 ? void 0 : _h.title)),
-            React.createElement("div", { className: "col-12" },
-                React.createElement("div", { className: "location-wrapper" },
-                    React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "location-icon" }),
-                    React.createElement("span", { className: "locationTexts " }, props.property.city || "N/A"))),
-            React.createElement("div", { className: "d-flex flex-row justify-content-between" },
-                React.createElement("span", { className: "priceValue justify-content-center align-items-center" },
-                    formatPrice((_l = (_k = (_j = props.property) === null || _j === void 0 ? void 0 : _j.evaluation) === null || _k === void 0 ? void 0 : _k.askingPrice) !== null && _l !== void 0 ? _l : 0),
-                    " \u20AC",
-                    React.createElement("div", { className: "price_label", style: { whiteSpace: "nowrap" } }, t.kaufpreis)),
-                React.createElement("span", { className: "text-dark value d-flex justify-content-center align-items-center" },
-                    props.property.constructedArea,
-                    " m\u00B2",
-                    React.createElement("div", { className: "details", style: { whiteSpace: "nowrap" } }, t.wohnflache)),
-                React.createElement("span", { className: "text-dark value d-flex justify-content-center align-items-center" },
-                    +((_m = props.property) === null || _m === void 0 ? void 0 : _m.rooms),
-                    React.createElement("div", { className: "details text-center", style: { whiteSpace: "nowrap" } }, t.zimmer))),
-            React.createElement("div", { className: "d-lex flex-column " },
-                React.createElement("div", { className: "wrapperCompanySec d-flex justify-content-around flex-row" },
-                    React.createElement("div", { className: "d-flex flex-column col-4 justify-content-between " },
-                        React.createElement("img", { src: immooly, alt: "Logo", className: "immooly" })),
-                    React.createElement("div", { className: "d-flex flex-column align-items-center justify-content-center" },
-                        React.createElement("div", { className: "d-flex flex-column text-center" },
-                            React.createElement("span", { className: "fw-bold" }, props.userData
-                                ? "".concat(props.userData.firstname, " ").concat(props.userData.lastname)
-                                : "Firstname Lastname"),
-                            React.createElement("span", { className: "fst-italic fw-normal" }, ((_o = props.userData) === null || _o === void 0 ? void 0 : _o.company)
-                                ? props.userData.company
-                                : "Your Company")))))),
-        sharePopUp && React.createElement(SharePopup, { onClick: function () { return setSharePopUp(false); } }),
-        isImagePopupOpen && (React.createElement(ImageListPopup, { pictureUrls: floorPlanImages, onClose: function () { return setIsImagePopupOpen(false); } }))));
-}
-
-var x = "/static/media/icon_close_2.e41bb9a4db48e048.png";
-
-var mail_icon = "/static/media/mail-icon.176f921aa16b9a3d.png";
-
-var css_248z$2 = ".popup-overlay {\r\n  position: fixed; /* Fixed position to cover the whole screen */\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */\r\n  display: flex; /* Flexbox to center the popup */\r\n  justify-content: center; /* Center horizontally */\r\n  align-items: center; /* Center vertically */\r\n  z-index: 9998; /* Ensure it's above other content */\r\n}\r\n\r\n.MessageShareSections {\r\n  height: 550px;\r\n  padding: 10px 14px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n  max-width: 1280px;\r\n}\r\n.popUpHeader {\r\n  height: 48px;\r\n  font-size: 32px;\r\n  font-weight: 600;\r\n  color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n  width: 16px;\r\n  height: 16px;\r\n  cursor: pointer;\r\n}\r\n\r\n.socialMediaIconsSection {\r\n  gap: 60px !important;\r\n}\r\n\r\n.socialMediaIcons {\r\n  width: 28px !important;\r\n  height: 28px !important;\r\n  cursor: pointer;\r\n}\r\n\r\n.socialMediaIconText {\r\n  height: 36px;\r\n  font-size: 13px;\r\n  font-weight: 500;\r\n  line-height: 3;\r\n  color: #344041;\r\n  cursor: pointer;\r\n}\r\n\r\n.popup_search-input {\r\n  height: 60px;\r\n  padding-inline-end: 190px;\r\n  font-size: 20px;\r\n  box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.popup_search-input::placeholder {\r\n  font-size: 20px;\r\n  color: rgba(140, 140, 140, 0.5);\r\n}\r\n\r\n.popup_search-input:focus {\r\n  outline: none;\r\n}\r\n\r\n.popupcustom-button {\r\n  height: 35px;\r\n  color: #000;\r\n  cursor: pointer;\r\n  right: 0;\r\n  z-index: 1;\r\n  background-image: var(--gradient);\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.popup-tags {\r\n  font-size: large;\r\n  font-weight: bold;\r\n}\r\n.button_icon-left {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.button-text {\r\n  width: 85px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n}\r\n.button_icon-right {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  border-color: #000;\r\n  background-color: transparent;\r\n}\r\n.circle {\r\n  height: 55px;\r\n  width: 55px;\r\n  background-color: transparent;\r\n  border-radius: 50%;\r\n  border-style: solid;\r\n  border-color: #000;\r\n  border-width: 2px;\r\n  align-content: center;\r\n  justify-content: center;\r\n  justify-items: center;\r\n  justify-self: center;\r\n}\r\n@media (min-width: 375px) and (max-width: 667px) {\r\n  .popup-overlay {\r\n    /* Fixed position to cover the whole screen */\r\n\r\n    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */\r\n    display: flex; /* Flexbox to center the popup */\r\n\r\n    z-index: 9998; /* Ensure it's above other content */\r\n  }\r\n\r\n  .MessageShareSections {\r\n    height: 650px;\r\n    border-radius: 16px;\r\n    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n    border: solid 1px #d7d9e3;\r\n    background-color: #fff;\r\n  }\r\n  .button_icon-left {\r\n    width: 90px;\r\n    height: 43px;\r\n    flex-grow: 0;\r\n    display: flex;\r\n    flex-direction: row;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 8px;\r\n    padding: 12px 24px;\r\n    border-radius: 16px;\r\n    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  }\r\n  .button-text {\r\n    width: 85px;\r\n    height: 19px;\r\n    flex-grow: 0;\r\n    font-family: Inter;\r\n    font-size: 16px;\r\n    font-weight: 500;\r\n    font-stretch: normal;\r\n    font-style: normal;\r\n    line-height: normal;\r\n    letter-spacing: normal;\r\n    text-align: center;\r\n  }\r\n  .button_icon-right {\r\n    width: 184px;\r\n  }\r\n  .circle {\r\n    height: 55px;\r\n    width: 55px;\r\n    background-color: transparent;\r\n    border-radius: 50%;\r\n    border-style: solid;\r\n    border-color: #000;\r\n    border-width: 2px;\r\n  }\r\n  .button_icon-left {\r\n    width: 184px;\r\n  }\r\n}\r\n";
-styleInject(css_248z$2);
-
-function MessagePopUp(props) {
-    var _a, _b;
-    var _c = useState(""), themeId = _c[0], setThemeId = _c[1];
-    var _d = useState(""), subject = _d[0], setSubject = _d[1];
-    var _e = useState(""), messageText = _e[0], setMessageText = _e[1];
-    var _f = useState(""), firstName = _f[0], setFirstName = _f[1];
-    var _g = useState(""), lastName = _g[0], setLastName = _g[1];
-    var handleClose = function () {
-        props.onCloseClick();
-    };
-    function handleSendMessage() {
-        props.onSubmit({ themeId: themeId, subject: subject, messageText: messageText, firstName: firstName, lastName: lastName });
-    }
-    useEffect(function () {
-        var user = JSON.parse(localStorage.getItem("user") || "{}");
-        if (user) {
-            setFirstName(user.firstname || "");
-            setLastName(user.lastname || "");
-        }
-    }, []);
-    return (React.createElement("div", null,
-        React.createElement("div", { className: " popup-overlay" },
-            React.createElement("div", { className: "MessageShareSections d-flex flex-column  col-10 col-lg-7" },
-                React.createElement("img", { src: x, alt: "close", className: "closeIcon d-flex flex-column align-self-end", onClick: handleClose }),
-                React.createElement("div", { className: "" },
-                    React.createElement("div", { className: "d-flex ms-md-5 mb-4" },
-                        React.createElement("div", { className: "circle align-self-center ms-md-2  me-4" },
-                            React.createElement("img", { src: mail_icon, alt: "email", className: "align-self-center", style: {
-                                    alignSelf: "center",
-                                    justifyContent: "center",
-                                    margin: "14px",
-                                    width: "25px",
-                                    height: "20px",
-                                } })),
-                        React.createElement("div", { className: "popUpHeader d-flex flex-column  text-wrap mb-md-1 " },
-                            "Nachricht senden ", (_a = props.userData) === null || _a === void 0 ? void 0 :
-                            _a.firstname,
-                            " ", (_b = props.userData) === null || _b === void 0 ? void 0 :
-                            _b.lastname)),
-                    React.createElement("div", { className: "d-flex flex-md-row  flex-column ms-md-5  mt-md-0   " },
-                        React.createElement("div", { className: "d-flex flex-column mt-md-0 mt-4  col me-4 w-100 align-self-start justify-content-start" },
-                            React.createElement("span", { className: "popup-tags mb-2" }, "Betreff:*"),
-                            React.createElement("div", null,
-                                React.createElement("select", { name: "theme", id: "theme", className: "mb-md-4 col-md-11 col-12", style: { height: "42px" }, value: themeId, onChange: function (e) { return setThemeId(e.target.value); } },
-                                    React.createElement("option", { value: "" }, "Select a theme"),
-                                    props.themesList.map(function (theme) { return (React.createElement("option", { key: theme.id, value: theme.id }, theme.name)); })))),
-                        React.createElement("div", { className: "d-flex flex-column mt-md-4 col me-4 w-100" },
-                            React.createElement("div", null),
-                            React.createElement("textarea", { className: "popup_textarea col-12 col-md-10  mb-md-0 mt-2 ", placeholder: "Betreff deiner Nachricht", style: { height: "42px" }, value: subject, onChange: function (e) { return setSubject(e.target.value); } }))),
-                    React.createElement("div", { className: "d-flex flex-column col ms-md-5 me-md-4" },
-                        React.createElement("span", { className: "popup-tags mb-2 " }, "Deine Nachricht:*"),
-                        React.createElement("textarea", { className: "popup_textarea mb-md-4 col-md-11 col-12 ", placeholder: "Deine Nachricht hier...", value: messageText, onChange: function (e) { return setMessageText(e.target.value); } })),
-                    React.createElement("div", { className: "d-flex flex-md-row flex-column ms-md-5 " },
-                        React.createElement("div", { className: "d-flex flex-column  col me-4 w-100" },
-                            React.createElement("span", { className: "popup-tags mb-2" }, "Vorname:"),
-                            React.createElement("input", { className: "popup_textarea mb-md-4  col-12 col-md-11", placeholder: "Dein Vorname", type: "text", value: firstName, onChange: function (e) { return setFirstName(e.target.value); }, style: { height: "42px" } })),
-                        React.createElement("div", { className: "d-flex flex-column me-4 w-100 col " },
-                            React.createElement("span", { className: "popup-tags mb-2" }, "Nachname:"),
-                            React.createElement("input", { className: "popup_textarea col-12 mb-4 col-md-10", placeholder: "Dein Nachname", type: "text", value: lastName, onChange: function (e) { return setLastName(e.target.value); }, style: { height: "42px" } }))),
-                    React.createElement("div", { className: "d-flex gap-md-3 gap-3 flex-md-row flex-column align-self-center justify-content-center mb-4 mt-md-2" },
-                        React.createElement("button", { className: "main_button border-0 rounded-4 align-self-center ", type: "button", id: "button", onClick: handleSendMessage },
-                            React.createElement("strong", null, "Nachricht senden")),
-                        React.createElement("button", { className: "button_icon-right border-1 col-sm-3 align-self-center" },
-                            React.createElement("strong", null, "Abbrechen"))))))));
-}
-
-var css_248z$1 = ".popup-overlay {\r\n  position: fixed; /* Fixed position to cover the whole screen */\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */\r\n  display: flex; /* Flexbox to center the popup */\r\n  justify-content: center; /* Center horizontally */\r\n  align-items: center; /* Center vertically */\r\n  z-index: 2000; /* Ensure it's above other content */\r\n}\r\n\r\n.shareSection {\r\n  height: 340px;\r\n  padding: 40px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n.popUpHeader {\r\n  height: 48px;\r\n  font-size: 32px;\r\n  font-weight: 600;\r\n  color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n  width: 16px;\r\n  height: 16px;\r\n  cursor: pointer;\r\n}\r\n\r\n.socialMediaIconsSection {\r\n  gap: 60px !important;\r\n}\r\n\r\n.socialMediaIcons {\r\n  width: 28px !important;\r\n  height: 28px !important;\r\n  cursor: pointer;\r\n}\r\n\r\n.socialMediaIconText {\r\n  height: 36px;\r\n  font-size: 13px;\r\n  font-weight: 500;\r\n  line-height: 3;\r\n  color: #344041;\r\n  cursor: pointer;\r\n}\r\n\r\n.popup_search-input {\r\n  height: 60px;\r\n  padding-inline-end: 190px;\r\n  font-size: 20px;\r\n  box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.popup_search-input::placeholder {\r\n  font-size: 20px;\r\n  color: rgba(140, 140, 140, 0.5);\r\n}\r\n\r\n.popup_search-input:focus {\r\n  outline: none;\r\n}\r\n\r\n.popupcustom-button {\r\n  height: 35px;\r\n  color: #000;\r\n  cursor: pointer;\r\n  border-color: var(--main-yellow);\r\n  right: 0;\r\n  z-index: 1;\r\n  background-image: var(--gradient);\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.button-text {\r\n  width: 115px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n}\r\n.button_success-right {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  border-color: #000;\r\n  background-color: transparent;\r\n}\r\n.button_success-left {\r\n  width: 200px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: var(--main-yellow);\r\n}\r\n.shareSection-Success {\r\n  height: 510px;\r\n  padding: 40px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n.shareSection-Error {\r\n  height: 400px;\r\n  padding: 10px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n.MessageShareSection {\r\n  height: 513px;\r\n  padding: 14px 14px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n\r\n.popup-tags {\r\n  font-size: large;\r\n  font-weight: bold;\r\n}\r\n.button_icon-left {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.main_button {\r\n width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-image: var(--gradient);\r\n}\r\n.button-text {\r\n  width: 85px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n}\r\n.button_icon-right {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  border-color: #000;\r\n  background-color: transparent;\r\n}\r\n.circle {\r\n  height: 55px;\r\n  width: 55px;\r\n  background-color: transparent;\r\n  border-radius: 50%;\r\n  border-style: solid;\r\n  border-color: #000;\r\n  border-width: 2px;\r\n}\r\n.Line-9,\r\n.Line-10 {\r\n  height: 1px;\r\n  flex-grow: 1;\r\n  background-color: rgba(140, 140, 140, 0.5);\r\n  max-width: 18rem;\r\n  align-self: center;\r\n  align-content: center;\r\n}\r\n\r\n.middle-container {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.middle-text {\r\n  margin: 25px 25px;\r\n}\r\n.google-button {\r\n  width: 260px;\r\n  height: 45px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 4px;\r\n  background-color: #000000;\r\n  background: linear-gradient(to top, #000, #666);\r\n}\r\n.Account-popup {\r\n  height: 713px;\r\n  padding: 10px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n  max-width: 1000px;\r\n}\r\n.lightertxt {\r\n  color: #797979;\r\n}\r\n\r\n.filter {\r\n  height: 343px;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  padding: 32px;\r\n  border-radius: 32px;\r\n  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);\r\n  background-color: #f2f2f2;\r\n}\r\n.loginFilter {\r\n  height: 280px;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  padding: 32px;\r\n  border-radius: 32px;\r\n  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);\r\n  background-color: #f2f2f2;\r\n}\r\n.radioLabel {\r\n  width: 176px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: normal;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: left;\r\n  color: #1b1b1b;\r\n}\r\n.goButton-text {\r\n  width: 78px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n  color: #1b1b1b;\r\n}\r\n.placeholders {\r\n  width: 232px;\r\n  height: 45px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 4px;\r\n  background-image: linear-gradient(to top, #000 100%, #666 0%);\r\n}\r\n.TagW.active {\r\n  height: 40px;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 0 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-image: linear-gradient(to top, #000, #666);\r\n  color: white;\r\n}\r\n.Tag {\r\n  height: 40px;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 0 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-image: linear-gradient(\r\n    to top,\r\n    rgba(255, 0, 0, 0),\r\n    rgba(255, 0, 0, 1)\r\n  );\r\n}\r\n.TagW {\r\n  height: 40px;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 0 24px;\r\n  border-radius: 16px;\r\n  border: solid 1px #000;\r\n  background-color: #fff;\r\n  color: #000;\r\n}\r\n/* */\r\n@media (min-width: 375px) and (max-width: 667px) {\r\n  .Account-popup {\r\n    height: 650px !important;\r\n    padding: 10px;\r\n    border-radius: 16px;\r\n    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n    border: solid 1px #d7d9e3;\r\n    background-color: #fff;\r\n    width: 90vw;\r\n  }\r\n  .filter {\r\n  height: 260px;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  padding: 32px;\r\n  border-radius: 32px;\r\n  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);\r\n  background-color: #f2f2f2;\r\n}\r\n.middle-text {\r\n  margin: 5px 25px;\r\n}\r\n.loginFilter {\r\n  height: 180px;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  padding: 32px;\r\n  border-radius: 32px;\r\n  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);\r\n  background-color: #f2f2f2;\r\n}\r\n}\r\n";
-styleInject(css_248z$1);
-
-var icon_checkmark = "/static/media/icon_checkmark.9b48c4a4bc651b08.svg";
-
-function SuccessPopUp(props) {
-    var _a = useState(true); _a[0]; _a[1];
-    var handleClose = function () {
-        props.onClick();
-    };
-    return (React.createElement("div", null,
-        React.createElement("div", { className: "popup-overlay" },
-            React.createElement("div", { className: "shareSection-Success  d-flex  flex-column  col-7 " },
-                React.createElement("img", { src: x$1, alt: "close", className: "closeIcon d-flex flex-column align-self-end ms-5 ", onClick: handleClose }),
-                React.createElement("div", { className: " d-flex flex-column align-self-center ms-5 " },
-                    React.createElement("img", { src: icon_checkmark, alt: "facebook", className: " mb-4" })),
-                React.createElement("div", { className: "popUpHeader d-flex flex-column col- text-center text-wrap mb-5 align-self-center" },
-                    React.createElement("span", null, " Herzlichen Gl\u00FCckwunsch! "),
-                    React.createElement("span", null, " Deine Nachricht wurde erfolgreich gesendet. ")),
-                React.createElement("div", { className: "d-flex flex-column mt-4 mb-4" },
-                    React.createElement("span", { className: "text-center ms-5 text-wrap" }, "Neben vielen weiteren Einstellungen und Aktionen kannst du die Antwort auf deine Nachricht in deinem Control Center einsehen, sobald der Verk\u00E4ufer darauf reagiert hat.")),
-                React.createElement("div", { className: " d-flex flex-row align-self-center " },
-                    React.createElement("button", { className: "d-flex button_success-left col-sm-5  border-0  rounded-4", type: "button", id: "button", onClick: handleClose },
-                        React.createElement("strong", null, " Zum Control Center")),
-                    React.createElement("button", { className: "button_success-right col-sm-3 border-1 ms-3 rounded-4", type: "button", id: "button" },
-                        React.createElement("strong", null, "Abbrechen")))))));
-}
-
-var warning = "/static/media/warning.6f99cb4c6a048b47.svg";
-
-var css_248z = ".popup-overlay {\r\n  position: fixed; /* Fixed position to cover the whole screen */\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */\r\n  display: flex; /* Flexbox to center the popup */\r\n  justify-content: center; /* Center horizontally */\r\n  align-items: center; /* Center vertically */\r\n  z-index: 2000; /* Ensure it's above other content */\r\n}\r\n\r\n.shareSection {\r\n  height: 340px;\r\n  padding: 40px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n  max-width: 1280px;\r\n}\r\n.popUpHeader {\r\n  height: 48px;\r\n  font-size: 32px;\r\n  font-weight: 600;\r\n  color: #1b1b1b;\r\n}\r\n\r\n.closeIcon {\r\n  width: 16px;\r\n  height: 16px;\r\n  cursor: pointer;\r\n}\r\n\r\n.socialMediaIconsSection {\r\n  gap: 60px !important;\r\n}\r\n\r\n.socialMediaIcons {\r\n  width: 28px !important;\r\n  height: 28px !important;\r\n  cursor: pointer;\r\n}\r\n\r\n.socialMediaIconText {\r\n  height: 36px;\r\n  font-size: 13px;\r\n  font-weight: 500;\r\n  line-height: 3;\r\n  color: #344041;\r\n  cursor: pointer;\r\n}\r\n\r\n.popup_search-input {\r\n  height: 60px;\r\n  padding-inline-end: 190px;\r\n  font-size: 20px;\r\n  box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.popup_search-input::placeholder {\r\n  font-size: 20px;\r\n  color: rgba(140, 140, 140, 0.5);\r\n}\r\n\r\n.popup_search-input:focus {\r\n  outline: none;\r\n}\r\n\r\n.popupcustom-button {\r\n  height: 35px;\r\n  color: #000;\r\n  cursor: pointer;\r\n  border-color: var(--main-yellow);\r\n  right: 0;\r\n  z-index: 1;\r\n  background-image: var(--gradient);\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.button-text {\r\n  width: 115px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n}\r\n.button_success-right {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  border-color: #000;\r\n  background-color: transparent;\r\n}\r\n.button_success-left {\r\n  width: 200px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-color: var(--main-yellow);\r\n}\r\n.shareSection-Success {\r\n  height: 510px;\r\n  padding: 40px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n.shareSection-Error {\r\n  height: 400px;\r\n  padding: 10px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n.MessageShareSection {\r\n  height: 513px;\r\n  padding: 14px 14px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n}\r\n\r\n.popup-tags {\r\n  font-size: large;\r\n  font-weight: bold;\r\n}\r\n.button_icon-left {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.main_button {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-image: var(--gradient);\r\n}\r\n.button-text {\r\n  width: 85px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n}\r\n.button_icon-right {\r\n  width: 184px;\r\n  height: 43px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 16px;\r\n  border-color: #000;\r\n  background-color: transparent;\r\n}\r\n.circle {\r\n  height: 55px;\r\n  width: 55px;\r\n  background-color: transparent;\r\n  border-radius: 50%;\r\n  border-style: solid;\r\n  border-color: #000;\r\n  border-width: 2px;\r\n}\r\n.Line-9,\r\n.Line-10 {\r\n  height: 1px;\r\n  flex-grow: 1;\r\n  background-color: rgba(140, 140, 140, 0.5);\r\n  max-width: 18rem;\r\n  align-self: center;\r\n  align-content: center;\r\n}\r\n\r\n.middle-container {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.middle-text {\r\n  margin: 25px 25px;\r\n}\r\n.google-button {\r\n  width: 260px;\r\n  height: 45px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 4px;\r\n  background-color: #000000;\r\n  background: linear-gradient(to top, #000, #666);\r\n}\r\n.Account-popup {\r\n  height: 713px;\r\n  padding: 10px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  border: solid 1px #d7d9e3;\r\n  background-color: #fff;\r\n  max-width: 1000px;\r\n}\r\n.lightertxt {\r\n  color: #797979;\r\n}\r\n\r\n.filter {\r\n  height: 343px;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  padding: 32px;\r\n  border-radius: 32px;\r\n  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);\r\n  background-color: #f2f2f2;\r\n}\r\n.loginFilter {\r\n  height: 280px;\r\n  align-self: stretch;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  padding: 32px;\r\n  border-radius: 32px;\r\n  box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);\r\n  background-color: #f2f2f2;\r\n}\r\n.radioLabel {\r\n  width: 176px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: normal;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: left;\r\n  color: #1b1b1b;\r\n}\r\n.goButton-text {\r\n  width: 78px;\r\n  height: 19px;\r\n  flex-grow: 0;\r\n  font-family: Inter;\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  font-stretch: normal;\r\n  font-style: normal;\r\n  line-height: normal;\r\n  letter-spacing: normal;\r\n  text-align: center;\r\n  color: #1b1b1b;\r\n}\r\n.placeholders {\r\n  width: 232px;\r\n  height: 45px;\r\n  flex-grow: 0;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 12px 24px;\r\n  border-radius: 4px;\r\n  background-image: linear-gradient(to top, #000 100%, #666 0%);\r\n}\r\n.TagW.active {\r\n  height: 40px;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 0 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-image: linear-gradient(to top, #000, #666);\r\n  color: white;\r\n}\r\n.Tag {\r\n  height: 40px;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 0 24px;\r\n  border-radius: 16px;\r\n  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n  background-image: linear-gradient(\r\n    to top,\r\n    rgba(255, 0, 0, 0),\r\n    rgba(255, 0, 0, 1)\r\n  );\r\n}\r\n.TagW {\r\n  height: 40px;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 0 24px;\r\n  border-radius: 16px;\r\n  border: solid 1px #000;\r\n  background-color: #fff;\r\n  color: #000;\r\n}\r\n/* */\r\n@media (min-width: 375px) and (max-width: 667px) {\r\n  .Account-popup {\r\n    height: 650px !important;\r\n    padding: 10px;\r\n    border-radius: 16px;\r\n    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n    border: solid 1px #d7d9e3;\r\n    background-color: #fff;\r\n    width: 90vw;\r\n  }\r\n  .filter {\r\n    height: 260px;\r\n    align-self: stretch;\r\n    flex-grow: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 2px;\r\n    padding: 32px;\r\n    border-radius: 32px;\r\n    box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);\r\n    background-color: #f2f2f2;\r\n  }\r\n  .middle-text {\r\n    margin: 5px 25px;\r\n  }\r\n  .loginFilter {\r\n    height: 180px;\r\n    align-self: stretch;\r\n    flex-grow: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 2px;\r\n    padding: 32px;\r\n    border-radius: 32px;\r\n    box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);\r\n    background-color: #f2f2f2;\r\n  }\r\n}\r\n";
-styleInject(css_248z);
-
-function ErrorPopup(props) {
-    var handleClose = function () {
-        props.onClick();
-    };
-    return (React.createElement("div", { className: "popup-overlay" },
-        React.createElement("div", { className: "shareSection-Error  d-flex  flex-column col-6 " },
-            React.createElement("img", { src: x, alt: "close", className: "closeIcon d-flex flex-column align-self-end ms-5 ", onClick: handleClose }),
-            React.createElement("div", { className: " d-flex flex-column align-self-center ms-5 " },
-                React.createElement("img", { src: warning, alt: "facebook", className: " mb-4" })),
-            React.createElement("div", { className: "popUpHeader d-flex flex-column col- text-center text-wrap mb-1 align-self-center" },
-                React.createElement("span", null, "   Oops! Etwas ist schiefgelaufen.")),
-            React.createElement("div", { className: "d-flex flex-column mt-4 mb-4" },
-                React.createElement("span", { className: "text-center ms-5 text-wrap" }, "Beim Senden deiner Nachricht ist ein Fehler aufgetreten. Wenn das Problem weiterhin besteht, kontaktiere uns unter support@nestiq.de")),
-            React.createElement("div", { className: " d-flex flex-row align-self-center " },
-                React.createElement("button", { className: "d-flex button_success-left col-sm-5  border-0  rounded-4", type: "button", id: "button" },
-                    React.createElement("strong", null, "  Erneut versuchen")),
-                React.createElement("button", { className: "button_success-right w-50 border-1 ms-3 rounded-4", type: "button", id: "button" },
-                    React.createElement("strong", null, "  Support kontaktieren"))))));
-}
-
-// Utility function to show a toast
-var showToast = function (message, type) {
-    if (type === void 0) { type = "info"; }
-    toast(message, { type: type });
-};
-var ToastWrapper = function () { return (React.createElement(ToastContainer, { position: "top-right", autoClose: 5000, hideProgressBar: false, closeOnClick: true, rtl: false, pauseOnFocusLoss: true, draggable: true, pauseOnHover: true })); };
-
-export { Button, ErrorPopup, FloorPlanPopup, MessagePopUp, PropertyCard as NewPropertyCard, Popup, PropertyCard$1 as PropertyCard, PropertyDetailsHeader, PropertyImageList, SharePopup, SuccessPopUp, ToastWrapper, formatPrice, formatPropertyArea, showToast };
-//# sourceMappingURL=index.es.js.map