@landtrustinc/design-system 1.2.44 → 1.2.47-beta.0

package/dist/index.js

@@ -55,6 +55,8 @@ __export(src_exports, {
   Icon: () => Icon_default,
   IconLabel: () => IconLabel_default,
   IconSizeMap: () => IconSizeMap,
+  ImageGalleryModal: () => ImageGalleryModal_default,
+  ImageGalleryModalComponent: () => ImageGalleryModal,
   InfoBox: () => InfoBox_default,
   Input: () => Input,
   LandownerProfile: () => LandownerProfile_default,
@@ -63,6 +65,8 @@ __export(src_exports, {
   Logo: () => Logo_default,
   MarkdownContent: () => MarkdownContent_default,
   MessageBubble: () => MessageBubble_default,
+  Modal: () => Modal_default,
+  ModalComponent: () => Modal,
   Navigation: () => Navigation_default,
   PackageCard: () => PackageCard_default,
   PackageHeader: () => PackageHeader_default,
@@ -6072,14 +6076,44 @@ var getRootStyles = (variant) => import_react29.css`
   gap: var(--spacing-1);
   align-items: ${variant === "sent" ? "flex-end" : "flex-start"};
 `;
+var getOuterWrapperStyles = (variant) => import_react29.css`
+  display: flex;
+  flex-direction: ${variant === "sent" ? "row-reverse" : "row"};
+  gap: var(--spacing-3);
+  align-items: flex-start;
+  width: 100%;
+`;
+var avatarWrapperStyles = import_react29.css`
+  flex-shrink: 0;
+  width: 43px;
+  height: 43px;
+
+  img,
+  div {
+    width: 43px !important;
+    height: 43px !important;
+  }
+`;
+var contentWrapperStyles = import_react29.css`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  flex: 1;
+  min-width: 0;
+`;
+var getHeaderStyles = (variant) => import_react29.css`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  flex-direction: ${variant === "sent" ? "row-reverse" : "row"};
+`;
 var getBubbleStyles = (variant) => import_react29.css`
   max-width: 100%;
   width: 100%;
   box-sizing: border-box;
   display: flex;
-  gap: var(--spacing-3);
-  align-items: center;
-  justify-content: center;
+  flex-direction: column;
+  gap: var(--spacing-2);
   padding: var(--spacing-4);
   background-color: ${variant === "sent" ? "var(--color-neutral-900)" : "var(--surface-neutral)"};
   color: ${variant === "sent" ? "var(--color-base-white)" : "var(--text-primary)"};
@@ -6089,6 +6123,9 @@ var getBubbleStyles = (variant) => import_react29.css`
   border-bottom-left-radius: ${variant === "sent" ? "var(--radius-lg)" : "0"};
   border-bottom-right-radius: ${variant === "sent" ? "0" : "var(--radius-lg)"};
 `;
+var getTimestampStyles = (variant) => import_react29.css`
+  text-align: ${variant === "sent" ? "right" : "left"};
+`;
 var contentStyles = import_react29.css`
   flex: 1 1 auto;
   min-width: 1px;
@@ -6100,21 +6137,38 @@ var import_jsx_runtime226 = require("@emotion/react/jsx-runtime");
 var MessageBubble = ({
   variant = "sent",
   timestamp,
+  avatarSrc,
+  author,
   className,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)("div", { className, css: getRootStyles(variant), children: [
-    timestamp && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
-      Text_default,
+  const hasAvatar = !!avatarSrc;
+  return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("div", { className, css: getRootStyles(variant), children: /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)("div", { css: getOuterWrapperStyles(variant), children: [
+    hasAvatar && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("div", { css: avatarWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
+      Avatar_default,
       {
-        size: "xs",
-        color: "var(--text-secondary)",
-        textAlign: variant === "sent" ? "right" : "left",
-        children: timestamp
+        type: "image",
+        src: avatarSrc,
+        alt: author || "Avatar",
+        size: "sm"
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("div", { css: getBubbleStyles(variant), children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("div", { css: contentStyles, children }) })
-  ] });
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)("div", { css: contentWrapperStyles, children: [
+      author && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("div", { css: getHeaderStyles(variant), children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Text_default, { size: "sm", fontWeight: "semibold", color: "var(--text-primary)", children: author }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)("div", { css: getBubbleStyles(variant), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime226.jsx)("div", { css: contentStyles, children }),
+        timestamp && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
+          Text_default,
+          {
+            size: "xs",
+            color: "var(--text-secondary)",
+            css: getTimestampStyles(variant),
+            children: timestamp
+          }
+        )
+      ] })
+    ] })
+  ] }) });
 };
 var MessageBubble_default = MessageBubble;
 
@@ -7713,11 +7767,11 @@ var GridContainer = ({
   className,
   ...props
 }) => {
-  const containerStyles4 = [
+  const containerStyles5 = [
     baseContainerStyles,
     generateMaxWidthStyles(maxWidth)
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(Box_default, { css: containerStyles4, className, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(Box_default, { css: containerStyles5, className, ...props, children });
 };
 var GridContainer_default = GridContainer;
 
@@ -7785,10 +7839,603 @@ var HuntCard = ({
 };
 var HuntCard_default = HuntCard;
 
-// src/InfoBox/InfoBox.tsx
+// src/ImageGalleryModal/ImageGalleryModal.tsx
+var import_react52 = require("react");
+
+// src/Modal/Modal.tsx
+var import_react50 = require("react");
+var import_react_dom3 = __toESM(require("react-dom"));
+
+// src/Modal/Modal.styles.ts
+var import_react49 = require("@emotion/react");
+var fadeIn = import_react49.keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+var fadeInScale = import_react49.keyframes`
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+var scrollLayerStyles = import_react49.css`
+  background-color: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  animation: ${fadeIn} 0.15s ease-out forwards;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+`;
+var containerStyles2 = import_react49.css`
+  background-color: var(--surface-primary, #ffffff);
+  border-radius: var(--radius-lg, 12px);
+  max-height: calc(100dvh - var(--spacing-8));
+  box-shadow: var(--shadow-xl, 0 20px 40px 0 rgba(0, 0, 0, 0.3));
+  animation: ${fadeInScale} 0.2s ease-out 0.05s both;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+`;
+var sizeStyles3 = {
+  sm: import_react49.css`
+    width: 100%;
+    max-width: 24rem; /* 384px */
+    padding: var(--spacing-5);
+  `,
+  md: import_react49.css`
+    width: 100%;
+    max-width: 32rem; /* 512px */
+    padding: var(--spacing-6);
+  `,
+  lg: import_react49.css`
+    width: 100%;
+    max-width: 48rem; /* 768px */
+    padding: var(--spacing-6);
+
+    ${media.lg} {
+      padding: var(--spacing-8);
+    }
+  `,
+  xl: import_react49.css`
+    width: 100%;
+    max-width: 64rem; /* 1024px */
+    padding: var(--spacing-6);
+
+    ${media.lg} {
+      padding: var(--spacing-8);
+    }
+  `,
+  full: import_react49.css`
+    width: calc(100vw - var(--spacing-8));
+    height: calc(100dvh - var(--spacing-8));
+    max-width: none;
+    max-height: none;
+    padding: 0;
+    border-radius: var(--radius-md, 8px);
+  `
+};
+var closeButtonStyles = import_react49.css`
+  position: absolute;
+  top: var(--spacing-4);
+  right: var(--spacing-4);
+  z-index: 1;
+`;
+var closeButtonFullStyles = import_react49.css`
+  top: var(--spacing-3);
+  right: var(--spacing-3);
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: var(--radius-xxl, 25px);
+  padding: var(--spacing-2) var(--spacing-4);
+
+  &:hover {
+    background-color: var(--color-base-white, #ffffff);
+  }
+`;
+
+// src/Modal/Modal.tsx
 var import_jsx_runtime241 = require("@emotion/react/jsx-runtime");
+var Modal = ({
+  id,
+  isOpen,
+  onClose,
+  children,
+  size = "md",
+  closeOnOutsideClick = true,
+  closeOnEscape = true,
+  showCloseButton = true,
+  closeButtonIcon = "Xmark",
+  scrollLayerStyles: customScrollLayerStyles,
+  containerStyles: customContainerStyles,
+  contentStyles: customContentStyles,
+  closeButtonStyles: customCloseButtonStyles,
+  className,
+  ariaLabel,
+  ariaDescribedBy
+}) => {
+  const containerRef = (0, import_react50.useRef)(null);
+  const previousScrollY = (0, import_react50.useRef)(0);
+  const previousActiveElement = (0, import_react50.useRef)(null);
+  const handleKeyDown = (0, import_react50.useCallback)(
+    (event) => {
+      if (closeOnEscape && event.key === "Escape" && onClose) {
+        onClose(event);
+      }
+    },
+    [closeOnEscape, onClose]
+  );
+  (0, import_react50.useEffect)(() => {
+    if (isOpen) {
+      previousScrollY.current = window.scrollY;
+      previousActiveElement.current = document.activeElement;
+      document.body.style.position = "fixed";
+      document.body.style.top = `-${previousScrollY.current}px`;
+      document.body.style.width = "100%";
+      document.body.style.overflow = "hidden";
+      document.addEventListener("keydown", handleKeyDown);
+      if (containerRef.current) {
+        containerRef.current.focus();
+      }
+    } else {
+      document.body.style.position = "";
+      document.body.style.overflow = "";
+      document.body.style.width = "";
+      document.body.style.top = "";
+      window.scrollTo(0, previousScrollY.current);
+      if (previousActiveElement.current instanceof HTMLElement) {
+        previousActiveElement.current.focus();
+      }
+    }
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.position = "";
+      document.body.style.overflow = "";
+      document.body.style.width = "";
+      document.body.style.top = "";
+    };
+  }, [isOpen, handleKeyDown]);
+  const handleClose = (0, import_react50.useCallback)(
+    (event) => {
+      if (onClose) {
+        onClose(event);
+      }
+    },
+    [onClose]
+  );
+  const handleBackdropClick = (0, import_react50.useCallback)(
+    (event) => {
+      if (!closeOnOutsideClick || !containerRef.current || containerRef.current.contains(event.target)) {
+        return;
+      }
+      handleClose(event);
+    },
+    [closeOnOutsideClick, handleClose]
+  );
+  if (!isOpen) {
+    return null;
+  }
+  if (typeof document === "undefined") {
+    return null;
+  }
+  const closeButton = showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
+    Button_default,
+    {
+      onClick: handleClose,
+      css: [
+        closeButtonStyles,
+        size === "full" && closeButtonFullStyles,
+        customCloseButtonStyles
+      ],
+      "data-testid": `modal-close-button-${id}`,
+      "aria-label": "Close modal",
+      variant: "text",
+      size: "xs",
+      children: /* @__PURE__ */ (0, import_jsx_runtime241.jsxs)(
+        Box_default,
+        {
+          as: "span",
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "var(--spacing-2)",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(Icon_default, { variant: closeButtonIcon, size: "medium" }),
+            /* @__PURE__ */ (0, import_jsx_runtime241.jsx)("span", { children: "Close" })
+          ]
+        }
+      )
+    }
+  );
+  return import_react_dom3.default.createPortal(
+    /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
+      Box_default,
+      {
+        display: "flex",
+        flexDirection: "column",
+        position: "fixed",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        width: "100%",
+        zIndex: 9999,
+        className,
+        role: "presentation",
+        "data-testid": `modal-${id}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
+          Box_default,
+          {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            flex: "1",
+            overflow: "auto",
+            p: "var(--spacing-4)",
+            css: [scrollLayerStyles, customScrollLayerStyles],
+            onClick: handleBackdropClick,
+            onKeyDown: (e) => e.key === "Escape" && handleClose(e),
+            role: "presentation",
+            "data-testid": `modal-backdrop-${id}`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime241.jsxs)(
+              Box_default,
+              {
+                ref: containerRef,
+                display: "flex",
+                flexDirection: "column",
+                position: "relative",
+                overflow: "hidden",
+                css: [
+                  containerStyles2,
+                  sizeStyles3[size],
+                  customContainerStyles
+                ],
+                role: "dialog",
+                "aria-modal": "true",
+                "aria-label": ariaLabel,
+                "aria-describedby": ariaDescribedBy,
+                tabIndex: -1,
+                children: [
+                  closeButton,
+                  /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(Box_default, { flex: "1", overflow: "auto", css: customContentStyles, children })
+                ]
+              }
+            )
+          }
+        )
+      }
+    ),
+    document.body
+  );
+};
+Modal.displayName = "Modal";
+var Modal_default = Modal;
+
+// src/ImageGalleryModal/ImageGalleryModal.styles.ts
+var import_react51 = require("@emotion/react");
+var galleryBackgroundStyles = import_react51.css`
+  background-color: var(--color-base-black, #000000);
+`;
+var imageStyles2 = import_react51.css`
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  border-radius: var(--radius-md, 8px);
+
+  ${media.md} {
+    max-height: calc(100vh - var(--spacing-32));
+  }
+`;
+var counterStyles = import_react51.css`
+  transform: translateX(-50%);
+  color: var(--color-base-white, #ffffff);
+  background-color: rgba(0, 0, 0, 0.5);
+  padding: var(--spacing-2) var(--spacing-4);
+  border-radius: var(--radius-full, 9999px);
+`;
+var captionStyles = import_react51.css`
+  transform: translateX(-50%);
+  color: var(--color-base-white, #ffffff);
+  text-align: center;
+  padding: var(--spacing-2) var(--spacing-4);
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: var(--radius-md, 8px);
+  max-width: 80%;
+`;
+var navigationButtonStyles = import_react51.css`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--spacing-12);
+  height: var(--spacing-12);
+  background-color: rgba(255, 255, 255, 0.9);
+  border: none;
+  border-radius: var(--radius-round, 50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 10;
+  transition: background-color 0.15s ease, transform 0.15s ease;
+  box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+
+  &:hover {
+    background-color: var(--color-base-white, #ffffff);
+    transform: translateY(-50%) scale(1.05);
+  }
+
+  &:active {
+    transform: translateY(-50%) scale(0.95);
+  }
+
+  &:focus {
+    outline: 2px solid var(--border-focus, #3e704b);
+    outline-offset: 2px;
+  }
+`;
+var prevButtonStyles = import_react51.css`
+  ${navigationButtonStyles}
+  left: var(--spacing-4);
+`;
+var nextButtonStyles = import_react51.css`
+  ${navigationButtonStyles}
+  right: var(--spacing-4);
+`;
+var dotsContainerPositionStyles = import_react51.css`
+  transform: translateX(-50%);
+`;
+var dotStyles = import_react51.css`
+  width: var(--spacing-2);
+  height: var(--spacing-2);
+  border-radius: var(--radius-round, 50%);
+  background-color: rgba(255, 255, 255, 0.5);
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: background-color 0.15s ease, transform 0.15s ease;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.8);
+    transform: scale(1.2);
+  }
+`;
+var dotActiveStyles = import_react51.css`
+  background-color: var(--color-base-white, #ffffff);
+  transform: scale(1.2);
+`;
+var closeButtonOverrideStyles = import_react51.css`
+  top: var(--spacing-4);
+  right: var(--spacing-4);
+  z-index: 20;
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: var(--radius-xxl, 25px);
+  padding: var(--spacing-2) var(--spacing-4);
+
+  &:hover {
+    background-color: var(--color-base-white, #ffffff);
+  }
+`;
+var scrollLayerOverrideStyles = import_react51.css`
+  padding: 0;
+  background-color: rgba(0, 0, 0, 0.95);
+`;
+var containerOverrideStyles = import_react51.css`
+  background-color: transparent;
+  box-shadow: none;
+  border-radius: 0;
+  max-height: 100dvh;
+`;
+var contentOverrideStyles = import_react51.css`
+  height: 100%;
+  padding: 0;
+`;
+
+// src/ImageGalleryModal/ImageGalleryModal.tsx
+var import_jsx_runtime242 = require("@emotion/react/jsx-runtime");
+var ImageGalleryModal = ({
+  id,
+  isOpen,
+  onClose,
+  images,
+  initialIndex = 0,
+  showDots = true,
+  showArrows = true,
+  showCounter = true,
+  className,
+  ariaLabel = "Image gallery"
+}) => {
+  const [currentIndex, setCurrentIndex] = (0, import_react52.useState)(initialIndex);
+  (0, import_react52.useEffect)(() => {
+    if (isOpen) {
+      setCurrentIndex(initialIndex);
+    }
+  }, [isOpen, initialIndex]);
+  const handlePrev = (0, import_react52.useCallback)(
+    (e) => {
+      e == null ? void 0 : e.stopPropagation();
+      setCurrentIndex((prev) => prev > 0 ? prev - 1 : images.length - 1);
+    },
+    [images.length]
+  );
+  const handleNext = (0, import_react52.useCallback)(
+    (e) => {
+      e == null ? void 0 : e.stopPropagation();
+      setCurrentIndex((prev) => prev < images.length - 1 ? prev + 1 : 0);
+    },
+    [images.length]
+  );
+  const handleGoTo = (0, import_react52.useCallback)((index) => {
+    setCurrentIndex(index);
+  }, []);
+  (0, import_react52.useEffect)(() => {
+    if (!isOpen)
+      return;
+    const handleKeyDown = (e) => {
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        handlePrev();
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        handleNext();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, handlePrev, handleNext]);
+  const currentImage = images[currentIndex];
+  const hasMultipleImages = images.length > 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
+    Modal_default,
+    {
+      id: `image-gallery-${id}`,
+      isOpen,
+      onClose,
+      size: "full",
+      closeOnOutsideClick: true,
+      closeOnEscape: true,
+      showCloseButton: true,
+      closeButtonStyles: closeButtonOverrideStyles,
+      scrollLayerStyles: scrollLayerOverrideStyles,
+      containerStyles: containerOverrideStyles,
+      contentStyles: contentOverrideStyles,
+      className,
+      ariaLabel,
+      children: /* @__PURE__ */ (0, import_jsx_runtime242.jsxs)(
+        Box_default,
+        {
+          display: "flex",
+          flexDirection: "column",
+          width: "100%",
+          height: "100%",
+          position: "relative",
+          css: galleryBackgroundStyles,
+          children: [
+            showCounter && hasMultipleImages && /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
+              Box_default,
+              {
+                position: "absolute",
+                top: "var(--spacing-4)",
+                left: "50%",
+                zIndex: 10,
+                css: counterStyles,
+                children: /* @__PURE__ */ (0, import_jsx_runtime242.jsxs)(Text_default, { size: "sm", color: "inherit", children: [
+                  currentIndex + 1,
+                  " / ",
+                  images.length
+                ] })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime242.jsxs)(
+              Box_default,
+              {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flex: "1",
+                overflow: "hidden",
+                position: "relative",
+                children: [
+                  showArrows && hasMultipleImages && /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handlePrev,
+                      css: prevButtonStyles,
+                      "aria-label": "Previous image",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(Icon_default, { variant: "AngleLeft", size: "medium" })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
+                    Box_default,
+                    {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "100%",
+                      height: "100%",
+                      p: "var(--spacing-4)",
+                      children: currentImage && /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
+                        "img",
+                        {
+                          src: currentImage.src,
+                          alt: currentImage.alt || `Image ${currentIndex + 1}`,
+                          css: imageStyles2
+                        }
+                      )
+                    }
+                  ),
+                  showArrows && hasMultipleImages && /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleNext,
+                      css: nextButtonStyles,
+                      "aria-label": "Next image",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(Icon_default, { variant: "AngleRight", size: "medium" })
+                    }
+                  )
+                ]
+              }
+            ),
+            (currentImage == null ? void 0 : currentImage.caption) && /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
+              Box_default,
+              {
+                position: "absolute",
+                bottom: "var(--spacing-16)",
+                left: "50%",
+                zIndex: 10,
+                css: captionStyles,
+                children: /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(Text_default, { size: "sm", color: "inherit", children: currentImage.caption })
+              }
+            ),
+            showDots && hasMultipleImages && /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
+              Box_default,
+              {
+                display: "flex",
+                position: "absolute",
+                bottom: "var(--spacing-4)",
+                left: "50%",
+                gap: "var(--spacing-2)",
+                zIndex: 10,
+                css: dotsContainerPositionStyles,
+                children: images.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleGoTo(index),
+                    css: [
+                      dotStyles,
+                      index === currentIndex && dotActiveStyles
+                    ],
+                    "aria-label": `Go to image ${index + 1}`,
+                    "aria-current": index === currentIndex ? "true" : void 0
+                  },
+                  `dot-${index}`
+                ))
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+ImageGalleryModal.displayName = "ImageGalleryModal";
+var ImageGalleryModal_default = ImageGalleryModal;
+
+// src/InfoBox/InfoBox.tsx
+var import_jsx_runtime243 = require("@emotion/react/jsx-runtime");
 var InfoBox = ({ heading, features, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime241.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime243.jsxs)(
     Box_default,
     {
       display: "flex",
@@ -7797,8 +8444,8 @@ var InfoBox = ({ heading, features, className }) => {
       className,
       color: "var(--text-primary)",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(Heading_default, { size: "2xs", fontWeight: "bold", children: heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(Heading_default, { size: "2xs", fontWeight: "bold", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
           Box_default,
           {
             display: "flex",
@@ -7808,7 +8455,7 @@ var InfoBox = ({ heading, features, className }) => {
             borderRadius: "var(--radius-lg)",
             bg: "var(--surface-neutral)",
             className,
-            children: features.map((section, index) => /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
+            children: features.map((section, index) => /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
               FeatureList_default,
               {
                 heading: section.heading,
@@ -7825,16 +8472,16 @@ var InfoBox = ({ heading, features, className }) => {
 var InfoBox_default = InfoBox;
 
 // src/LandownerProfile/LandownerProfile.tsx
-var import_react52 = require("react");
+var import_react56 = require("react");
 
 // src/ProgressBar/ProgressBar.styles.ts
-var import_react49 = require("@emotion/react");
-var progressStyles = import_react49.css`
+var import_react53 = require("@emotion/react");
+var progressStyles = import_react53.css`
   transition: width 0.3s ease-in-out;
 `;
 
 // src/ProgressBar/ProgressBar.tsx
-var import_jsx_runtime242 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime244 = require("@emotion/react/jsx-runtime");
 var ProgressBar = ({
   progress,
   className,
@@ -7842,7 +8489,7 @@ var ProgressBar = ({
   height = "10px"
 }) => {
   const clampedProgress = Math.min(100, Math.max(0, progress));
-  return /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
     Box_default,
     {
       width: "100%",
@@ -7852,7 +8499,7 @@ var ProgressBar = ({
       overflow: "hidden",
       position: "relative",
       className,
-      children: /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
         Box_default,
         {
           height: "100%",
@@ -7873,17 +8520,17 @@ ProgressBar.displayName = "ProgressBar";
 var ProgressBar_default = ProgressBar;
 
 // src/Timer/Timer.tsx
-var import_react51 = require("react");
+var import_react55 = require("react");
 
 // src/Timer/Timer.styles.ts
-var import_react50 = require("@emotion/react");
-var rootStyles2 = import_react50.css`
+var import_react54 = require("@emotion/react");
+var rootStyles2 = import_react54.css`
   display: inline-flex;
   font-variant-numeric: tabular-nums;
 `;
 
 // src/Timer/Timer.tsx
-var import_jsx_runtime243 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime245 = require("@emotion/react/jsx-runtime");
 var calculateTimeLeft = (expirationTimestamp) => {
   const now = Math.floor(Date.now() / 1e3);
   const diff = expirationTimestamp - now;
@@ -7911,10 +8558,10 @@ var Timer = ({
   fontWeight = "bold",
   showSeconds = false
 }) => {
-  const [timeLeft, setTimeLeft] = (0, import_react51.useState)(
+  const [timeLeft, setTimeLeft] = (0, import_react55.useState)(
     () => calculateTimeLeft(expirationTimestamp)
   );
-  const updateTime = (0, import_react51.useCallback)(() => {
+  const updateTime = (0, import_react55.useCallback)(() => {
     const newTimeLeft = calculateTimeLeft(expirationTimestamp);
     setTimeLeft(newTimeLeft);
     if (newTimeLeft) {
@@ -7924,7 +8571,7 @@ var Timer = ({
     }
     return newTimeLeft;
   }, [expirationTimestamp, onTimeUpdate, onExpire]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     const initialTime = updateTime();
     if (!initialTime)
       return;
@@ -7939,8 +8586,8 @@ var Timer = ({
   if (!timeLeft) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime243.jsxs)(Box_default, { css: rootStyles2, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime243.jsxs)(Text_default, { as: "span", fontWeight, size: fontSize, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(Box_default, { css: rootStyles2, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(Text_default, { as: "span", fontWeight, size: fontSize, children: [
       timeLeft.days,
       "d : ",
       timeLeft.hours,
@@ -7948,7 +8595,7 @@ var Timer = ({
       timeLeft.minutes,
       "m"
     ] }),
-    showSeconds && /* @__PURE__ */ (0, import_jsx_runtime243.jsxs)(Text_default, { as: "span", fontWeight, size: fontSize, children: [
+    showSeconds && /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(Text_default, { as: "span", fontWeight, size: fontSize, children: [
       "\xA0: ",
       timeLeft.seconds,
       "s"
@@ -7959,7 +8606,7 @@ Timer.displayName = "Timer";
 var Timer_default = Timer;
 
 // src/StarRating/StarRating.tsx
-var import_jsx_runtime244 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime246 = require("@emotion/react/jsx-runtime");
 var starSize = {
   sm: {
     size: "medium",
@@ -8007,10 +8654,10 @@ var StarRating = ({
       fill = "var(--color-neutral-100)";
     }
     stars.push(
-      /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(Icon_default, { variant, size: starSize[size].size, fill }, i)
+      /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(Icon_default, { variant, size: starSize[size].size, fill }, i)
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
     Box_default,
     {
       className,
@@ -8024,7 +8671,7 @@ var StarRating = ({
 var StarRating_default = StarRating;
 
 // src/UserCard/UserCard.tsx
-var import_jsx_runtime245 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime247 = require("@emotion/react/jsx-runtime");
 var UserCard = ({
   avatarSrc,
   title,
@@ -8034,7 +8681,7 @@ var UserCard = ({
   isVerified = false,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(
     Box_default,
     {
       display: "flex",
@@ -8043,8 +8690,8 @@ var UserCard = ({
       gap: "var(--spacing-4)",
       className,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(Box_default, { display: "flex", alignItems: "flex-start", gap: "var(--spacing-4)", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(Box_default, { display: "flex", alignItems: "flex-start", gap: "var(--spacing-4)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
             Avatar_default,
             {
               type: avatarSrc ? "image" : "text",
@@ -8053,13 +8700,13 @@ var UserCard = ({
               alt: `${title}'s avatar`
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "2px", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(Text_default, { size: "md", fontWeight: "bold", children: title }),
-            subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(Text_default, { size: "sm", color: "text-secondary", children: subtitle }) : subtitle),
-            showRating && rating !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(StarRating_default, { rating })
+          /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "2px", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(Text_default, { size: "md", fontWeight: "bold", children: title }),
+            subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(Text_default, { size: "sm", color: "text-secondary", children: subtitle }) : subtitle),
+            showRating && rating !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(StarRating_default, { rating })
           ] })
         ] }),
-        isVerified && /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(
+        isVerified && /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(
           Box_default,
           {
             display: "flex",
@@ -8068,8 +8715,8 @@ var UserCard = ({
             gap: "var(--spacing-1)",
             flexShrink: 0,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(Icon_default, { variant: "ShieldCheckSolid", fill: "var(--icon-success)" }),
-              /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(Text_default, { size: "xs", fontWeight: "bold", color: "text-primary", children: "Verified" })
+              /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(Icon_default, { variant: "ShieldCheckSolid", fill: "var(--icon-success)" }),
+              /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(Text_default, { size: "xs", fontWeight: "bold", color: "text-primary", children: "Verified" })
             ]
           }
         )
@@ -8080,19 +8727,19 @@ var UserCard = ({
 var UserCard_default = UserCard;
 
 // src/LandownerProfile/components/ProfileSubtitle.tsx
-var import_jsx_runtime246 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime248 = require("@emotion/react/jsx-runtime");
 var ProfileSubtitle = ({
   yearsHosting = 1,
   featureReviewItem
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "2px", children: [
-    yearsHosting && yearsHosting > 0 && /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(Text_default, { size: "sm", color: "text-secondary", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "2px", children: [
+    yearsHosting && yearsHosting > 0 && /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(Text_default, { size: "sm", color: "text-secondary", children: [
       yearsHosting,
       " ",
       yearsHosting === 1 ? "Year" : "Years",
       " Hosting"
     ] }),
-    featureReviewItem && /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(FeatureListItem_default, { ...featureReviewItem })
+    featureReviewItem && /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(FeatureListItem_default, { ...featureReviewItem })
   ] });
 };
 var ProfileSubtitle_default = ProfileSubtitle;
@@ -8107,7 +8754,7 @@ var hasTextContent = (html) => {
 };
 
 // src/LandownerProfile/LandownerProfile.tsx
-var import_jsx_runtime247 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime249 = require("@emotion/react/jsx-runtime");
 var LandownerProfile = ({
   heading,
   avatarSrc,
@@ -8135,7 +8782,7 @@ var LandownerProfile = ({
     const progressPercentage = (totalDuration - timeLeft.totalSeconds) / totalDuration * 100;
     return Math.min(100, Math.max(0, progressPercentage));
   };
-  const [progress, setProgress] = (0, import_react52.useState)(0);
+  const [progress, setProgress] = (0, import_react56.useState)(0);
   const handleTimeUpdate = (timeLeft) => {
     setProgress(calculateProgress(timeLeft));
     onEarlyAccessTimeUpdate == null ? void 0 : onEarlyAccessTimeUpdate(timeLeft);
@@ -8148,7 +8795,7 @@ var LandownerProfile = ({
     iconVariant: "Bolt",
     label: `Response Time: ${responseTime}`
   } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(
     Box_default,
     {
       display: "flex",
@@ -8157,8 +8804,8 @@ var LandownerProfile = ({
       color: "var(--text-primary)",
       className,
       children: [
-        heading && /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(Heading_default, { size: "2xs", fontWeight: "bold", children: heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(
+        heading && /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(Heading_default, { size: "2xs", fontWeight: "bold", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(
           Box_default,
           {
             display: "flex",
@@ -8168,12 +8815,12 @@ var LandownerProfile = ({
             p: "var(--spacing-4)",
             borderRadius: "var(--radius-lg)",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
                 UserCard_default,
                 {
                   avatarSrc,
                   title: name,
-                  subtitle: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
+                  subtitle: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
                     ProfileSubtitle_default,
                     {
                       yearsHosting,
@@ -8184,9 +8831,9 @@ var LandownerProfile = ({
                   isVerified
                 }
               ),
-              hasTextContent(bio) && !!bio && /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-2)", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(Text_default, { fontWeight: "bold", children: "Bio" }),
-                /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
+              hasTextContent(bio) && !!bio && /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-2)", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(Text_default, { fontWeight: "bold", children: "Bio" }),
+                /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
                   Text_default,
                   {
                     dangerouslySetInnerHTML: {
@@ -8195,14 +8842,14 @@ var LandownerProfile = ({
                   }
                 )
               ] }),
-              (!!responseRateFeature || !!responseTimeFeature) && /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-2)", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(Text_default, { fontWeight: "bold", children: "Landowner Details" }),
-                /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-2)", children: [
-                  !!responseRateFeature && /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(FeatureListItem_default, { ...responseRateFeature }),
-                  !!responseTimeFeature && /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(FeatureListItem_default, { ...responseTimeFeature })
+              (!!responseRateFeature || !!responseTimeFeature) && /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-2)", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(Text_default, { fontWeight: "bold", children: "Landowner Details" }),
+                /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-2)", children: [
+                  !!responseRateFeature && /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(FeatureListItem_default, { ...responseRateFeature }),
+                  !!responseTimeFeature && /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(FeatureListItem_default, { ...responseTimeFeature })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(Box_default, { alignSelf: "flex-start", children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(Box_default, { alignSelf: "flex-start", children: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
                 Button_default,
                 {
                   variant: "secondary",
@@ -8211,9 +8858,9 @@ var LandownerProfile = ({
                   children: messageButtonText
                 }
               ) }),
-              earlyAccessTimer && /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-3)", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(ProgressBar_default, { progress }),
-                /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(
+              earlyAccessTimer && /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-3)", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(ProgressBar_default, { progress }),
+                /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(
                   Box_default,
                   {
                     display: "flex",
@@ -8221,9 +8868,9 @@ var LandownerProfile = ({
                     gap: "var(--spacing-1)",
                     textAlign: "center",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(Text_default, { size: "xs", textAlign: "center", children: earlyAccessTimer.labelText }),
-                      /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(Text_default, { size: "sm", textAlign: "center", children: earlyAccessTimer.descriptionText }),
-                      /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(Box_default, { display: "flex", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(Text_default, { size: "xs", textAlign: "center", children: earlyAccessTimer.labelText }),
+                      /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(Text_default, { size: "sm", textAlign: "center", children: earlyAccessTimer.descriptionText }),
+                      /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(Box_default, { display: "flex", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
                         Timer_default,
                         {
                           expirationTimestamp: earlyAccessTimer.expirationTimestamp,
@@ -8245,11 +8892,11 @@ var LandownerProfile = ({
 var LandownerProfile_default = LandownerProfile;
 
 // src/ListingChat/ListingChat.tsx
-var import_react54 = require("react");
+var import_react58 = require("react");
 
 // src/ListingChat/ListingChat.styles.ts
-var import_react53 = require("@emotion/react");
-var containerStyles2 = import_react53.css`
+var import_react57 = require("@emotion/react");
+var containerStyles3 = import_react57.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-4);
@@ -8257,13 +8904,13 @@ var containerStyles2 = import_react53.css`
   border-radius: var(--radius-lg);
   background: var(--surface-success);
 `;
-var headerStyles = import_react53.css`
+var headerStyles = import_react57.css`
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--spacing-2);
 `;
-var chipsContainerStyles = import_react53.css`
+var chipsContainerStyles = import_react57.css`
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-4);
@@ -8276,15 +8923,15 @@ var chipsContainerStyles = import_react53.css`
     cursor: pointer;
   }
 `;
-var textAreaStyles = import_react53.css`
+var textAreaStyles = import_react57.css`
   min-height: 62px;
 `;
-var inputWrapperStyles2 = import_react53.css`
+var inputWrapperStyles2 = import_react57.css`
   position: relative;
 `;
 
 // src/ListingChat/ListingChat.tsx
-var import_jsx_runtime248 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime250 = require("@emotion/react/jsx-runtime");
 var ListingChat = ({
   onSubmit,
   placeholder = "Ask anything about this listing\u2026",
@@ -8294,15 +8941,15 @@ var ListingChat = ({
   disabled = false,
   ...rest
 }) => {
-  const [value, setValue] = (0, import_react54.useState)("");
-  const handleSubmit = (0, import_react54.useCallback)(() => {
+  const [value, setValue] = (0, import_react58.useState)("");
+  const handleSubmit = (0, import_react58.useCallback)(() => {
     const trimmed = value.trim();
     if (!trimmed)
       return;
     onSubmit(trimmed);
     setValue("");
   }, [onSubmit, value]);
-  const handleTagClick = (0, import_react54.useCallback)(
+  const handleTagClick = (0, import_react58.useCallback)(
     (tag) => () => {
       const trimmed = tag.trim();
       if (!trimmed)
@@ -8311,18 +8958,18 @@ var ListingChat = ({
     },
     [onSubmit]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(Box_default, { css: containerStyles2, className, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(Box_default, { css: headerStyles, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(Box_default, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Box_default, { mb: "var(--spacing-2)", children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Heading_default, { size: "2xs", fontWeight: "bold", children: title }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Text_default, { size: "md", children: "Get instant answers with Buck, our AI powered assistant." })
+  return /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(Box_default, { css: containerStyles3, className, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(Box_default, { css: headerStyles, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(Box_default, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(Box_default, { mb: "var(--spacing-2)", children: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(Heading_default, { size: "2xs", fontWeight: "bold", children: title }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(Text_default, { size: "md", children: "Get instant answers with Buck, our AI powered assistant." })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(Box_default, { display: "flex", alignItems: "center", gap: "var(--spacing-1)", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Icon_default, { variant: "AiMagic", size: "medium" }),
-        /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Text_default, { size: "sm", children: "Beta" })
+      /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(Box_default, { display: "flex", alignItems: "center", gap: "var(--spacing-1)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(Icon_default, { variant: "AiMagic", size: "medium" }),
+        /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(Text_default, { size: "sm", children: "Beta" })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Box_default, { css: inputWrapperStyles2, children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(Box_default, { css: inputWrapperStyles2, children: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
       TextArea,
       {
         rows: 1,
@@ -8337,14 +8984,14 @@ var ListingChat = ({
         css: textAreaStyles
       }
     ) }),
-    tags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(import_jsx_runtime248.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Text_default, { as: "div", size: "sm", fontWeight: "bold", children: "Try one of these" }),
-      /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Box_default, { css: chipsContainerStyles, children: tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
+    tags.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(import_jsx_runtime250.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(Text_default, { as: "div", size: "sm", fontWeight: "bold", children: "Try one of these" }),
+      /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(Box_default, { css: chipsContainerStyles, children: tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
         "button",
         {
           onClick: handleTagClick(tag),
           disabled,
-          children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(TagChip_default, { children: tag })
+          children: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(TagChip_default, { children: tag })
         },
         tag
       )) })
@@ -8354,11 +9001,11 @@ var ListingChat = ({
 var ListingChat_default = ListingChat;
 
 // src/Logo/Logo.tsx
-var import_react55 = require("@emotion/react");
+var import_react59 = require("@emotion/react");
 
 // src/Logo/components/LandtrustPlusDark.tsx
-var import_jsx_runtime249 = require("@emotion/react/jsx-runtime");
-var SvgLandtrustPlusDark = (props) => /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(
+var import_jsx_runtime251 = require("@emotion/react/jsx-runtime");
+var SvgLandtrustPlusDark = (props) => /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -8366,14 +9013,14 @@ var SvgLandtrustPlusDark = (props) => /* @__PURE__ */ (0, import_jsx_runtime249.
     fill: "none",
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime249.jsx)("g", { filter: "url(#landtrust-plus-dark_svg__a)", children: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime251.jsx)("g", { filter: "url(#landtrust-plus-dark_svg__a)", children: /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
         "path",
         {
           fill: "#000",
           d: "M397.611 44.707a1.357 1.357 0 0 1-1.347-1.367V12.481c0-.755.603-1.367 1.347-1.367h3.893c.744 0 1.348.612 1.348 1.367V43.34c0 .755-.604 1.367-1.348 1.367zM384.364 31.24a1.357 1.357 0 0 1-1.347-1.367v-3.95c0-.755.603-1.367 1.347-1.367h30.414c.741 0 1.345.612 1.345 1.367v3.95c0 .755-.604 1.367-1.345 1.367z"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
         "path",
         {
           fill: "#FAD44E",
@@ -8382,14 +9029,14 @@ var SvgLandtrustPlusDark = (props) => /* @__PURE__ */ (0, import_jsx_runtime249.
           d: "M397.611 44.707a1.357 1.357 0 0 1-1.347-1.367V12.481c0-.755.603-1.367 1.347-1.367h3.893c.744 0 1.348.612 1.348 1.367V43.34c0 .755-.604 1.367-1.348 1.367zM384.364 31.24a1.357 1.357 0 0 1-1.347-1.367v-3.95c0-.755.603-1.367 1.347-1.367h30.414c.741 0 1.345.612 1.345 1.367v3.95c0 .755-.604 1.367-1.345 1.367z"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
         "path",
         {
           fill: "#fff",
           d: "M376.053 15.765h-9.487V49.36h-11.149V15.876h-9.56V6.608h30.196zM204.29 15.782h-9.487v33.6h-11.149V15.895h-9.56V6.633h30.196zM93.047 6.652l12.637 23.357V6.608h10.179v42.775h-10.488L92.982 25.96v23.402H82.878V6.651zM242.366 35.996l5.154 13.364h-10.781a8334 8334 0 0 0-5.254-13.389h-4.683v13.398h-10.921V6.64h4.836c7.307 0 14.616-.037 21.922.017 2.864.02 4.677 1.613 4.742 4.448q.225 10.12 0 20.244c-.052 2.927-2.075 4.29-5.015 4.648m-15.525-20.1v11.248h8.609a.912.912 0 0 0 .909-.911v-9.428a.905.905 0 0 0-.909-.91zM71.772 49.392H61.244l-1.831-9.098H48.34c-.628 2.995-1.262 6.004-1.91 9.09H36.147c3.07-14.297 6.11-28.505 9.179-42.774h17.268c3.047 14.207 6.101 28.436 9.179 42.782M57.939 30.786 55 15.744h-2.134c-1.012 4.987-2.02 9.974-3.054 15.042zM10.818 40.21H24.46v9.173H0V6.608h10.818zM282.264 6.608v32.466a.92.92 0 0 1-.268.648.9.9 0 0 1-.645.267h-7.445a.9.9 0 0 1-.645-.267.92.92 0 0 1-.267-.648V6.608h-11.025V44.94c0 2.443 1.971 4.424 4.403 4.424h22.506c2.432 0 4.404-1.982 4.404-4.426V6.608zM131.337 49.383V6.657h22.522c5.154 0 8.955 3.645 8.989 8.81q.088 12.542 0 25.086c-.046 5.18-3.85 8.824-8.999 8.824h-22.512zm11.036-33.503v24.2c2.346 0 4.623.092 6.889-.031 1.554-.084 2.589-1.274 2.6-2.912q.067-9.16 0-18.32c-.013-1.644-1.046-2.828-2.596-2.912-2.27-.123-4.549-.03-6.893-.03zM306.214 36.48c0 1.9-.115 3.747.022 5.577.31 4.136 3.799 7.47 7.924 7.539q7.022.116 14.047 0c3.879-.06 7.534-3.112 7.826-6.906.268-3.905.275-7.825.02-11.731-.176-3.002-2.574-5.277-5.55-5.806a766 766 0 0 0-13.834-2.343c-.901-.142-1.186-.527-1.176-1.342.017-1.404 0-2.807.013-4.21 0-.96.462-1.414 1.457-1.405 2.875.027 5.752.021 8.627 0 .992 0 1.425.466 1.412 1.433v2.183h9.117c0-2.078.17-4.067-.036-6.017-.406-3.818-3.896-6.992-7.718-7.057a423 423 0 0 0-14.416 0c-3.784.07-7.434 3.38-7.651 7.124a108 108 0 0 0-.01 11.375c.147 3.103 2.539 5.547 5.567 6.082q6.97 1.233 13.954 2.367c.775.127 1.058.435 1.041 1.195-.031 1.485-.01 2.971-.01 4.458 0 .857-.414 1.298-1.283 1.298h-8.875c-.859 0-1.286-.458-1.304-1.3-.017-.842 0-1.63 0-2.509z"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime249.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime251.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(
         "filter",
         {
           id: "landtrust-plus-dark_svg__a",
@@ -8400,8 +9047,8 @@ var SvgLandtrustPlusDark = (props) => /* @__PURE__ */ (0, import_jsx_runtime249.
           colorInterpolationFilters: "sRGB",
           filterUnits: "userSpaceOnUse",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime249.jsx)("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }),
-            /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime251.jsx)("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }),
+            /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
               "feColorMatrix",
               {
                 in: "SourceAlpha",
@@ -8409,18 +9056,18 @@ var SvgLandtrustPlusDark = (props) => /* @__PURE__ */ (0, import_jsx_runtime249.
                 values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime249.jsx)("feOffset", { dy: 1 }),
-            /* @__PURE__ */ (0, import_jsx_runtime249.jsx)("feGaussianBlur", { stdDeviation: 0.5 }),
-            /* @__PURE__ */ (0, import_jsx_runtime249.jsx)("feComposite", { in2: "hardAlpha", operator: "out" }),
-            /* @__PURE__ */ (0, import_jsx_runtime249.jsx)("feColorMatrix", { values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime251.jsx)("feOffset", { dy: 1 }),
+            /* @__PURE__ */ (0, import_jsx_runtime251.jsx)("feGaussianBlur", { stdDeviation: 0.5 }),
+            /* @__PURE__ */ (0, import_jsx_runtime251.jsx)("feComposite", { in2: "hardAlpha", operator: "out" }),
+            /* @__PURE__ */ (0, import_jsx_runtime251.jsx)("feColorMatrix", { values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
               "feBlend",
               {
                 in2: "BackgroundImageFix",
                 result: "effect1_dropShadow_257_2540"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
               "feBlend",
               {
                 in: "SourceGraphic",
@@ -8437,8 +9084,8 @@ var SvgLandtrustPlusDark = (props) => /* @__PURE__ */ (0, import_jsx_runtime249.
 var LandtrustPlusDark_default = SvgLandtrustPlusDark;
 
 // src/Logo/components/LandtrustPlusLight.tsx
-var import_jsx_runtime250 = require("@emotion/react/jsx-runtime");
-var SvgLandtrustPlusLight = (props) => /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(
+var import_jsx_runtime252 = require("@emotion/react/jsx-runtime");
+var SvgLandtrustPlusLight = (props) => /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -8446,14 +9093,14 @@ var SvgLandtrustPlusLight = (props) => /* @__PURE__ */ (0, import_jsx_runtime250
     fill: "none",
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime250.jsx)("g", { filter: "url(#landtrust-plus-light_svg__a)", children: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime252.jsx)("g", { filter: "url(#landtrust-plus-light_svg__a)", children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
         "path",
         {
           fill: "#000",
           d: "M397.611 44.707a1.357 1.357 0 0 1-1.347-1.367V12.481c0-.755.603-1.367 1.347-1.367h3.893c.744 0 1.348.612 1.348 1.367V43.34c0 .755-.604 1.367-1.348 1.367zM384.364 31.24a1.357 1.357 0 0 1-1.347-1.367v-3.95c0-.755.603-1.367 1.347-1.367h30.414c.741 0 1.345.612 1.345 1.367v3.95c0 .755-.604 1.367-1.345 1.367z"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
         "path",
         {
           fill: "#FAD44E",
@@ -8462,14 +9109,14 @@ var SvgLandtrustPlusLight = (props) => /* @__PURE__ */ (0, import_jsx_runtime250
           d: "M397.611 44.707a1.357 1.357 0 0 1-1.347-1.367V12.481c0-.755.603-1.367 1.347-1.367h3.893c.744 0 1.348.612 1.348 1.367V43.34c0 .755-.604 1.367-1.348 1.367zM384.364 31.24a1.357 1.357 0 0 1-1.347-1.367v-3.95c0-.755.603-1.367 1.347-1.367h30.414c.741 0 1.345.612 1.345 1.367v3.95c0 .755-.604 1.367-1.345 1.367z"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
         "path",
         {
           fill: "#1A202C",
           d: "M376.053 15.765h-9.487V49.36h-11.149V15.876h-9.56V6.608h30.196zM204.29 15.782h-9.487v33.6h-11.149V15.895h-9.56V6.633h30.196zM93.047 6.652l12.637 23.357V6.608h10.179v42.775h-10.488L92.982 25.96v23.402H82.878V6.651zM242.366 35.996l5.154 13.364h-10.781a8334 8334 0 0 0-5.254-13.389h-4.683v13.398h-10.921V6.64h4.836c7.307 0 14.616-.037 21.922.017 2.864.02 4.677 1.613 4.742 4.448q.225 10.12 0 20.244c-.052 2.927-2.075 4.29-5.015 4.648m-15.525-20.1v11.248h8.609a.912.912 0 0 0 .909-.911v-9.428a.905.905 0 0 0-.909-.91zM71.772 49.392H61.244l-1.831-9.098H48.34c-.628 2.995-1.262 6.004-1.91 9.09H36.147c3.07-14.297 6.11-28.505 9.179-42.774h17.268c3.047 14.207 6.101 28.436 9.179 42.782M57.939 30.786 55 15.744h-2.134c-1.012 4.987-2.02 9.974-3.054 15.042zM10.818 40.21H24.46v9.173H0V6.608h10.818zM282.264 6.608v32.466a.92.92 0 0 1-.268.648.9.9 0 0 1-.645.267h-7.445a.9.9 0 0 1-.645-.267.92.92 0 0 1-.267-.648V6.608h-11.025V44.94c0 2.443 1.971 4.424 4.403 4.424h22.506c2.432 0 4.404-1.982 4.404-4.426V6.608zM131.337 49.383V6.657h22.522c5.154 0 8.955 3.645 8.989 8.81q.088 12.542 0 25.086c-.046 5.18-3.85 8.824-8.999 8.824h-22.512zm11.036-33.503v24.2c2.346 0 4.623.092 6.889-.031 1.554-.084 2.589-1.274 2.6-2.912q.067-9.16 0-18.32c-.013-1.644-1.046-2.828-2.596-2.912-2.27-.123-4.549-.03-6.893-.03zM306.214 36.48c0 1.9-.115 3.747.022 5.577.31 4.136 3.799 7.47 7.924 7.539q7.022.116 14.047 0c3.879-.06 7.534-3.112 7.826-6.906.268-3.905.275-7.825.02-11.731-.176-3.002-2.574-5.277-5.55-5.806a766 766 0 0 0-13.834-2.343c-.901-.142-1.186-.527-1.176-1.342.017-1.404 0-2.807.013-4.21 0-.96.462-1.414 1.457-1.405 2.875.027 5.752.021 8.627 0 .992 0 1.425.466 1.412 1.433v2.183h9.117c0-2.078.17-4.067-.036-6.017-.406-3.818-3.896-6.992-7.718-7.057a423 423 0 0 0-14.416 0c-3.784.07-7.434 3.38-7.651 7.124a108 108 0 0 0-.01 11.375c.147 3.103 2.539 5.547 5.567 6.082q6.97 1.233 13.954 2.367c.775.127 1.058.435 1.041 1.195-.031 1.485-.01 2.971-.01 4.458 0 .857-.414 1.298-1.283 1.298h-8.875c-.859 0-1.286-.458-1.304-1.3-.017-.842 0-1.63 0-2.509z"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime250.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime252.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)(
         "filter",
         {
           id: "landtrust-plus-light_svg__a",
@@ -8480,8 +9127,8 @@ var SvgLandtrustPlusLight = (props) => /* @__PURE__ */ (0, import_jsx_runtime250
           colorInterpolationFilters: "sRGB",
           filterUnits: "userSpaceOnUse",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime250.jsx)("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }),
-            /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime252.jsx)("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }),
+            /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
               "feColorMatrix",
               {
                 in: "SourceAlpha",
@@ -8489,18 +9136,18 @@ var SvgLandtrustPlusLight = (props) => /* @__PURE__ */ (0, import_jsx_runtime250
                 values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime250.jsx)("feOffset", { dy: 1 }),
-            /* @__PURE__ */ (0, import_jsx_runtime250.jsx)("feGaussianBlur", { stdDeviation: 0.5 }),
-            /* @__PURE__ */ (0, import_jsx_runtime250.jsx)("feComposite", { in2: "hardAlpha", operator: "out" }),
-            /* @__PURE__ */ (0, import_jsx_runtime250.jsx)("feColorMatrix", { values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime252.jsx)("feOffset", { dy: 1 }),
+            /* @__PURE__ */ (0, import_jsx_runtime252.jsx)("feGaussianBlur", { stdDeviation: 0.5 }),
+            /* @__PURE__ */ (0, import_jsx_runtime252.jsx)("feComposite", { in2: "hardAlpha", operator: "out" }),
+            /* @__PURE__ */ (0, import_jsx_runtime252.jsx)("feColorMatrix", { values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
               "feBlend",
               {
                 in2: "BackgroundImageFix",
                 result: "effect1_dropShadow_257_2538"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
               "feBlend",
               {
                 in: "SourceGraphic",
@@ -8517,8 +9164,8 @@ var SvgLandtrustPlusLight = (props) => /* @__PURE__ */ (0, import_jsx_runtime250
 var LandtrustPlusLight_default = SvgLandtrustPlusLight;
 
 // src/Logo/components/LandtrustStandardDark.tsx
-var import_jsx_runtime251 = require("@emotion/react/jsx-runtime");
-var SvgLandtrustStandardDark = (props) => /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(
+var import_jsx_runtime253 = require("@emotion/react/jsx-runtime");
+var SvgLandtrustStandardDark = (props) => /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -8526,14 +9173,14 @@ var SvgLandtrustStandardDark = (props) => /* @__PURE__ */ (0, import_jsx_runtime
     fill: "none",
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
         "path",
         {
           fill: "#E2430C",
           d: "m0 0 .037 47.582q-.003 1.401.186 2.79a15.6 15.6 0 0 0 1.223 4.315c1.787 3.934 3.9 6.263 5.914 8.25 4.047 4 8.07 6.023 10.83 7.383A50 50 0 0 0 28.29 74a50 50 0 0 0 10.103-3.68c2.76-1.36 6.783-3.384 10.83-7.383 2.014-1.987 4.126-4.316 5.921-8.25a15.7 15.7 0 0 0 1.223-4.316q.189-1.387.186-2.79L56.59 0zm51.397 5.141-.01 14.061H5.197l-.011-14.06zm-.023 31.322a30 30 0 0 0-3.911-.876c-.822-.126-4.159-.603-8.867-.05-2.086.248-3.97.712-7.736 1.64a197 197 0 0 0-6.62 1.774c-3.427 1.195-9.065 2.541-15.502 1.125a26 26 0 0 1-3.526-1.051L5.2 24.337h46.183zM36.542 65.57a41 41 0 0 1-8.252 3.009 41 41 0 0 1-8.249-3.009 69 69 0 0 1-1.53-.773l9.768-5.588 9.778 5.608c-.55.277-1.054.525-1.515.753m14.823-18.4q.001.736-.072 1.467a13.2 13.2 0 0 1-1.076 4.17c-1.46 3.213-3.182 5.114-4.83 6.739a28 28 0 0 1-2.348 2.074l-.235-.133-14.525-8.327-14.544 8.324-.203.115a28 28 0 0 1-2.328-2.057c-1.642-1.624-3.369-3.526-4.829-6.74A13.2 13.2 0 0 1 5.3 48.636a15 15 0 0 1-.073-1.467v-2.774q1.9.561 3.86.86c.82.127 4.16.603 8.87.05 2.083-.246 3.967-.712 7.732-1.639a184 184 0 0 0 6.62-1.766c3.428-1.197 9.064-2.541 15.503-1.125q1.823.399 3.569 1.051z"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
         "path",
         {
           fill: "#fff",
@@ -8546,8 +9193,8 @@ var SvgLandtrustStandardDark = (props) => /* @__PURE__ */ (0, import_jsx_runtime
 var LandtrustStandardDark_default = SvgLandtrustStandardDark;
 
 // src/Logo/components/LandtrustStandardLight.tsx
-var import_jsx_runtime252 = require("@emotion/react/jsx-runtime");
-var SvgLandtrustStandardLight = (props) => /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)(
+var import_jsx_runtime254 = require("@emotion/react/jsx-runtime");
+var SvgLandtrustStandardLight = (props) => /* @__PURE__ */ (0, import_jsx_runtime254.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -8555,14 +9202,14 @@ var SvgLandtrustStandardLight = (props) => /* @__PURE__ */ (0, import_jsx_runtim
     fill: "none",
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
         "path",
         {
           fill: "#E2430C",
           d: "m0 0 .037 47.582q-.003 1.401.186 2.79a15.6 15.6 0 0 0 1.223 4.315c1.787 3.934 3.9 6.263 5.914 8.25 4.047 4 8.07 6.023 10.83 7.383A50 50 0 0 0 28.29 74a50 50 0 0 0 10.103-3.68c2.76-1.36 6.783-3.384 10.83-7.383 2.014-1.987 4.126-4.316 5.921-8.25a15.7 15.7 0 0 0 1.223-4.316q.189-1.387.186-2.79L56.59 0zm51.397 5.141-.01 14.061H5.197l-.011-14.06zm-.023 31.322a30 30 0 0 0-3.911-.876c-.822-.126-4.159-.603-8.867-.05-2.086.248-3.97.712-7.736 1.64a197 197 0 0 0-6.62 1.774c-3.427 1.195-9.065 2.541-15.502 1.125a26 26 0 0 1-3.526-1.051L5.2 24.337h46.183zM36.542 65.57a41 41 0 0 1-8.252 3.009 41 41 0 0 1-8.249-3.009 69 69 0 0 1-1.53-.773l9.768-5.588 9.778 5.608c-.55.277-1.054.525-1.515.753m14.823-18.4q.001.736-.072 1.467a13.2 13.2 0 0 1-1.076 4.17c-1.46 3.213-3.182 5.114-4.83 6.739a28 28 0 0 1-2.348 2.074l-.235-.133-14.525-8.327-14.544 8.324-.203.115a28 28 0 0 1-2.328-2.057c-1.642-1.624-3.369-3.526-4.829-6.74A13.2 13.2 0 0 1 5.3 48.636a15 15 0 0 1-.073-1.467v-2.774q1.9.561 3.86.86c.82.127 4.16.603 8.87.05 2.083-.246 3.967-.712 7.732-1.639a184 184 0 0 0 6.62-1.766c3.428-1.197 9.064-2.541 15.503-1.125q1.823.399 3.569 1.051z"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
         "path",
         {
           fill: "#000",
@@ -8575,8 +9222,8 @@ var SvgLandtrustStandardLight = (props) => /* @__PURE__ */ (0, import_jsx_runtim
 var LandtrustStandardLight_default = SvgLandtrustStandardLight;
 
 // src/Logo/Logo.tsx
-var import_jsx_runtime253 = require("@emotion/react/jsx-runtime");
-var logoStyles = (size) => import_react55.css`
+var import_jsx_runtime255 = require("@emotion/react/jsx-runtime");
+var logoStyles = (size) => import_react59.css`
   width: ${space[size]};
   height: auto;
   display: block;
@@ -8604,18 +9251,18 @@ var Logo = ({
     return LandtrustStandardLight_default;
   };
   const LogoComponent = getLogoComponent();
-  return /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(LogoComponent, { css: logoStyles(size), className, ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(LogoComponent, { css: logoStyles(size), className, ...rest });
 };
 var Logo_default = Logo;
 
 // src/Navigation/Navigation.styles.ts
-var import_react56 = require("@emotion/react");
-var navigationStyles = import_react56.css`
+var import_react60 = require("@emotion/react");
+var navigationStyles = import_react60.css`
   width: 100%;
   background-color: white;
   border-bottom: 1px solid #e5e5e5;
 `;
-var hamburgerButtonStyles = import_react56.css`
+var hamburgerButtonStyles = import_react60.css`
   cursor: pointer;
   &:focus {
     outline: 2px solid #4f46e5;
@@ -8626,7 +9273,7 @@ var hamburgerButtonStyles = import_react56.css`
     display: none;
   }
 `;
-var centeredLogoStyles = import_react56.css`
+var centeredLogoStyles = import_react60.css`
   transform: translate(-50%, -50%);
   max-width: 150px;
 
@@ -8634,27 +9281,27 @@ var centeredLogoStyles = import_react56.css`
     display: none;
   }
 `;
-var desktopLogoStyles = import_react56.css`
+var desktopLogoStyles = import_react60.css`
   display: none;
 
   @media (min-width: 768px) {
     display: block;
   }
 `;
-var containerStyles3 = import_react56.css`
+var containerStyles4 = import_react60.css`
   @media (min-width: 768px) {
     justify-content: space-between;
     position: static;
   }
 `;
-var logoStyles2 = import_react56.css`
+var logoStyles2 = import_react60.css`
   width: 100%;
 
   @media (min-width: 768px) {
     width: initial;
   }
 `;
-var desktopNavStyles = import_react56.css`
+var desktopNavStyles = import_react60.css`
   display: none;
 
   @media (min-width: 768px) {
@@ -8663,7 +9310,7 @@ var desktopNavStyles = import_react56.css`
     gap: 32px;
   }
 `;
-var navLinksStyles = import_react56.css`
+var navLinksStyles = import_react60.css`
   display: flex;
   align-items: center;
   gap: 24px;
@@ -8671,7 +9318,7 @@ var navLinksStyles = import_react56.css`
   margin: 0;
   padding: 0;
 `;
-var navLinkStyles = import_react56.css`
+var navLinkStyles = import_react60.css`
   text-decoration: none;
   color: #374151;
   font-weight: 500;
@@ -8687,7 +9334,7 @@ var navLinkStyles = import_react56.css`
     outline-offset: 2px;
   }
 `;
-var avatarPlaceholderStyles = import_react56.css`
+var avatarPlaceholderStyles = import_react60.css`
   width: 32px;
   height: 32px;
   border-radius: 50%;
@@ -8712,7 +9359,7 @@ var avatarPlaceholderStyles = import_react56.css`
 `;
 
 // src/Navigation/Navigation.tsx
-var import_jsx_runtime254 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime256 = require("@emotion/react/jsx-runtime");
 var Navigation = ({
   onMenuToggle,
   className,
@@ -8726,16 +9373,16 @@ var Navigation = ({
   onAvatarClick,
   ...rest
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(Box_default, { css: navigationStyles, className, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime254.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(Box_default, { css: navigationStyles, className, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime256.jsxs)(
     Box_default,
     {
       display: "flex",
       alignItems: "center",
       padding: space[4],
       position: "relative",
-      css: containerStyles3,
+      css: containerStyles4,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
           Box_default,
           {
             as: "button",
@@ -8747,11 +9394,11 @@ var Navigation = ({
             border: "none",
             padding: space[2],
             css: hamburgerButtonStyles,
-            children: /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(Icon_default, { variant: "Bars", size: "large" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(Icon_default, { variant: "Bars", size: "large" })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(Box_default, { css: desktopLogoStyles, children: /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(Logo_default, { variant: logoVariant, theme: logoTheme }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(Box_default, { position: "absolute", left: "50%", top: "50%", css: centeredLogoStyles, children: /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(Box_default, { css: desktopLogoStyles, children: /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(Logo_default, { variant: logoVariant, theme: logoTheme }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(Box_default, { position: "absolute", left: "50%", top: "50%", css: centeredLogoStyles, children: /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
           Logo_default,
           {
             variant: logoVariant,
@@ -8760,8 +9407,8 @@ var Navigation = ({
             css: logoStyles2
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime254.jsxs)(Box_default, { css: desktopNavStyles, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(Box_default, { as: "nav", children: /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(Box_default, { as: "ul", css: navLinksStyles, children: navLinks.map((link) => /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(Box_default, { as: "li", children: /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime256.jsxs)(Box_default, { css: desktopNavStyles, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(Box_default, { as: "nav", children: /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(Box_default, { as: "ul", css: navLinksStyles, children: navLinks.map((link) => /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(Box_default, { as: "li", children: /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
             "a",
             {
               href: link.href,
@@ -8770,7 +9417,7 @@ var Navigation = ({
               children: link.label
             }
           ) }, link.href)) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
             Box_default,
             {
               as: "button",
@@ -8789,21 +9436,21 @@ var Navigation = ({
 var Navigation_default = Navigation;
 
 // src/ScrollingCarousel/components/ScrollingCarouselStep.tsx
-var import_react59 = require("react");
+var import_react63 = require("react");
 var import_react_intersection_observer = require("react-intersection-observer");
 
 // src/ScrollingCarousel/context/CarouselContext.tsx
-var import_react57 = __toESM(require("react"));
-var CarouselContext = import_react57.default.createContext(
+var import_react61 = __toESM(require("react"));
+var CarouselContext = import_react61.default.createContext(
   null
 );
 
 // src/ScrollingCarousel/ScrollingCarousel.styles.ts
-var import_react58 = require("@emotion/react");
-var carouselRoot = import_react58.css`
+var import_react62 = require("@emotion/react");
+var carouselRoot = import_react62.css`
   position: relative;
 `;
-var carousel = import_react58.css`
+var carousel = import_react62.css`
   display: flex;
   overflow-y: hidden;
   overflow-x: scroll;
@@ -8815,7 +9462,7 @@ var carousel = import_react58.css`
     display: none;
   }
 `;
-var step = import_react58.css`
+var step = import_react62.css`
   scroll-snap-align: center;
   flex-basis: 100%;
   flex-shrink: 0;
@@ -8828,7 +9475,7 @@ var step = import_react58.css`
     flex-basis: 100%;
   }
 `;
-var controls = (position2) => import_react58.css`
+var controls = (position2) => import_react62.css`
   ${(position2 === "left-right" || position2 === "top-right") && `
     display: none;
 
@@ -8837,7 +9484,7 @@ var controls = (position2) => import_react58.css`
     }
   `}
 `;
-var iconWrapper = import_react58.css`
+var iconWrapper = import_react62.css`
   display: flex;
   width: var(--spacing-7);
   height: var(--spacing-7);
@@ -8847,7 +9494,7 @@ var iconWrapper = import_react58.css`
   justify-content: center;
   box-shadow: var(--shadow-md);
 `;
-var button = (position2) => import_react58.css`
+var button = (position2) => import_react62.css`
   background: transparent;
   border-color: transparent;
   outline: none;
@@ -8879,7 +9526,7 @@ var button = (position2) => import_react58.css`
     bottom: calc(-1 * var(--spacing-1));
   `}
 `;
-var buttonLeft = (position2) => import_react58.css`
+var buttonLeft = (position2) => import_react62.css`
   ${button(position2)}
 
   ${position2 === "left-right" && `
@@ -8899,7 +9546,7 @@ var buttonLeft = (position2) => import_react58.css`
     left: calc(50% - var(--spacing-16));
   `}
 `;
-var customButtonLeft = (position2) => import_react58.css`
+var customButtonLeft = (position2) => import_react62.css`
   ${button(position2)}
 
   ${position2 === "left-right" && `
@@ -8919,7 +9566,7 @@ var customButtonLeft = (position2) => import_react58.css`
     left: calc(50% - var(--spacing-16));
   `}
 `;
-var buttonRight = (position2) => import_react58.css`
+var buttonRight = (position2) => import_react62.css`
   ${button(position2)}
 
   ${position2 === "left-right" && `
@@ -8939,12 +9586,12 @@ var buttonRight = (position2) => import_react58.css`
     right: calc(50% - var(--spacing-16));
   `}
 `;
-var icon = import_react58.css`
+var icon = import_react62.css`
   width: var(--spacing-3);
   height: var(--spacing-3);
   color: var(--color-base-black);
 `;
-var dots = import_react58.css`
+var dots = import_react62.css`
   position: absolute;
   bottom: var(--spacing-2);
   left: 0;
@@ -8954,11 +9601,11 @@ var dots = import_react58.css`
   align-items: center;
   justify-content: center;
 `;
-var dotsInner = import_react58.css`
+var dotsInner = import_react62.css`
   display: flex;
   overflow: hidden;
 `;
-var dot = (dotsColor) => import_react58.css`
+var dot = (dotsColor) => import_react62.css`
   position: relative;
   flex-shrink: 0;
   flex-grow: 0;
@@ -8997,22 +9644,22 @@ var dot = (dotsColor) => import_react58.css`
     `}
   }
 `;
-var dotDistance2 = import_react58.css`
+var dotDistance2 = import_react62.css`
   &::after {
     transform: translate(-50%, -50%) scale(0.9);
   }
 `;
-var dotDistance3 = import_react58.css`
+var dotDistance3 = import_react62.css`
   &::after {
     transform: translate(-50%, -50%) scale(0.8);
   }
 `;
-var dotDistanceGreaterThan3 = import_react58.css`
+var dotDistanceGreaterThan3 = import_react62.css`
   &::after {
     transform: translate(-50%, -50%) scale(0.7);
   }
 `;
-var dotVisible = import_react58.css`
+var dotVisible = import_react62.css`
   &::after {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1.2);
@@ -9020,7 +9667,7 @@ var dotVisible = import_react58.css`
 `;
 
 // src/ScrollingCarousel/components/ScrollingCarouselStep.tsx
-var import_jsx_runtime255 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime257 = require("@emotion/react/jsx-runtime");
 var ScrollingCarouselStep = ({
   children,
   index,
@@ -9028,7 +9675,7 @@ var ScrollingCarouselStep = ({
   parentId,
   onClick
 }) => {
-  const context = (0, import_react59.useContext)(CarouselContext);
+  const context = (0, import_react63.useContext)(CarouselContext);
   if (!context) {
     throw new Error(
       "ScrollingCarouselStep must be used within ScrollingCarousel"
@@ -9039,7 +9686,7 @@ var ScrollingCarouselStep = ({
     threshold: 0.75,
     root: carousel2.current
   });
-  (0, import_react59.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     if (typeof index !== "undefined") {
       dispatch({
         type: "set_child_visibility",
@@ -9047,7 +9694,7 @@ var ScrollingCarouselStep = ({
       });
     }
   }, [inView, index, dispatch]);
-  return /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
     "div",
     {
       ref,
@@ -9065,10 +9712,10 @@ var ScrollingCarouselStep = ({
 ScrollingCarouselStep.displayName = "ScrollingCarouselStep";
 
 // src/ScrollingCarousel/ScrollingCarousel.tsx
-var import_react63 = __toESM(require("react"));
+var import_react67 = __toESM(require("react"));
 
 // src/ScrollingCarousel/hooks/useCarouselDots.ts
-var import_react60 = require("react");
+var import_react64 = require("react");
 
 // src/ScrollingCarousel/ScrollingCarousel.helpers.ts
 var childVisibilityReducer = (state, action) => {
@@ -9099,7 +9746,7 @@ var useCarouselDots = ({
   anyItemsVisible,
   numberOfDots
 }) => {
-  const dotOffset = (0, import_react60.useRef)(0);
+  const dotOffset = (0, import_react64.useRef)(0);
   const dotWidth = 12;
   const totalDots = childVisibility.length;
   const dotToCenterIndex = Math.round(
@@ -9131,7 +9778,7 @@ var useCarouselDots = ({
 };
 
 // src/ScrollingCarousel/hooks/useCarouselNavigation.ts
-var import_react61 = require("react");
+var import_react65 = require("react");
 
 // src/shared/helpers.ts
 var import_seamless_scroll_polyfill = require("seamless-scroll-polyfill");
@@ -9165,7 +9812,7 @@ var useCarouselNavigation = ({
   infiniteScroll,
   childVisibilityLength
 }) => {
-  const getStepEl = (0, import_react61.useCallback)(
+  const getStepEl = (0, import_react65.useCallback)(
     (index) => {
       if (carousel2.current) {
         const selector = `[data-carousel-id="${id}"][data-carousel-index="${index}"]`;
@@ -9175,7 +9822,7 @@ var useCarouselNavigation = ({
     },
     [carousel2, id]
   );
-  const next = (0, import_react61.useCallback)(
+  const next = (0, import_react65.useCallback)(
     (e) => {
       e.preventDefault();
       if (lastItemIsVisible && !infiniteScroll)
@@ -9203,7 +9850,7 @@ var useCarouselNavigation = ({
       carousel2
     ]
   );
-  const back = (0, import_react61.useCallback)(
+  const back = (0, import_react65.useCallback)(
     (e) => {
       e.preventDefault();
       if (firstItemIsVisible && !infiniteScroll)
@@ -9231,7 +9878,7 @@ var useCarouselNavigation = ({
       carousel2
     ]
   );
-  const goTo = (0, import_react61.useCallback)(
+  const goTo = (0, import_react65.useCallback)(
     (e, i) => {
       e.preventDefault();
       const el = getStepEl(i);
@@ -9249,12 +9896,12 @@ var useCarouselNavigation = ({
 };
 
 // src/ScrollingCarousel/hooks/useCarouselVisibility.ts
-var import_react62 = require("react");
+var import_react66 = require("react");
 var useCarouselVisibility = (carousel2) => {
-  const [state, dispatch] = (0, import_react62.useReducer)(childVisibilityReducer, {
+  const [state, dispatch] = (0, import_react66.useReducer)(childVisibilityReducer, {
     childVisibility: []
   });
-  const carouselContextApi = (0, import_react62.useMemo)(
+  const carouselContextApi = (0, import_react66.useMemo)(
     () => ({ carousel: carousel2, dispatch }),
     [carousel2]
   );
@@ -9275,7 +9922,7 @@ var useCarouselVisibility = (carousel2) => {
 };
 
 // src/ScrollingCarousel/ScrollingCarousel.tsx
-var import_jsx_runtime256 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime258 = require("@emotion/react/jsx-runtime");
 var ScrollingCarousel = ({
   className,
   children,
@@ -9292,8 +9939,8 @@ var ScrollingCarousel = ({
   id,
   current
 }) => {
-  const carousel2 = (0, import_react63.useRef)(null);
-  const [isHovering, setIsHovering] = (0, import_react63.useState)(false);
+  const carousel2 = (0, import_react67.useRef)(null);
+  const [isHovering, setIsHovering] = (0, import_react67.useState)(false);
   const {
     state,
     carouselContextApi,
@@ -9313,7 +9960,7 @@ var ScrollingCarousel = ({
     infiniteScroll,
     childVisibilityLength: state.childVisibility.length
   });
-  (0, import_react63.useEffect)(() => {
+  (0, import_react67.useEffect)(() => {
     if (carousel2.current && typeof current === "number" && current >= 0) {
       const childrenArray = Array.from(carousel2.current.children);
       const selectedItem = childrenArray[current];
@@ -9328,9 +9975,9 @@ var ScrollingCarousel = ({
       }
     }
   }, [current]);
-  const childrenWithIndex = import_react63.default.Children.map(
+  const childrenWithIndex = import_react67.default.Children.map(
     children,
-    (child, index) => import_react63.default.cloneElement(child, { index })
+    (child, index) => import_react67.default.cloneElement(child, { index })
   );
   const { dotOffset, dotDistances, dotWidth } = useCarouselDots({
     childVisibility: state.childVisibility,
@@ -9341,7 +9988,7 @@ var ScrollingCarousel = ({
   });
   const hasMultipleChildren = state.childVisibility.length > 1;
   const shouldShowNavigation = showNavigationOnHover ? isHovering : true;
-  return /* @__PURE__ */ (0, import_jsx_runtime256.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(
     "div",
     {
       css: carouselRoot,
@@ -9349,7 +9996,7 @@ var ScrollingCarousel = ({
       onMouseEnter: () => setIsHovering(true),
       onMouseLeave: () => setIsHovering(false),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
           "div",
           {
             css: carousel,
@@ -9358,11 +10005,11 @@ var ScrollingCarousel = ({
             role: "region",
             "aria-roledescription": "carousel",
             "aria-label": "Scrolling carousel",
-            children: /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(CarouselContext.Provider, { value: carouselContextApi, children: childrenWithIndex })
+            children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(CarouselContext.Provider, { value: carouselContextApi, children: childrenWithIndex })
           }
         ),
-        hasMultipleChildren && shouldShowNavigation && /* @__PURE__ */ (0, import_jsx_runtime256.jsxs)("div", { css: controls(buttonsPosition), children: [
-          showButtons && (!firstItemIsVisible || infiniteScroll) && /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
+        hasMultipleChildren && shouldShowNavigation && /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)("div", { css: controls(buttonsPosition), children: [
+          showButtons && (!firstItemIsVisible || infiniteScroll) && /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
             "button",
             {
               "aria-label": "Previous",
@@ -9374,10 +10021,10 @@ var ScrollingCarousel = ({
               },
               css: customLeftButton ? customButtonLeft(buttonsPosition) : buttonLeft(buttonsPosition),
               "data-testid": `scrolling-carousel-button-back-${id}`,
-              children: customBackIcon ? customBackIcon : /* @__PURE__ */ (0, import_jsx_runtime256.jsx)("span", { css: iconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(Icon_default, { variant: "AngleLeft", css: icon }) })
+              children: customBackIcon ? customBackIcon : /* @__PURE__ */ (0, import_jsx_runtime258.jsx)("span", { css: iconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Icon_default, { variant: "AngleLeft", css: icon }) })
             }
           ),
-          showButtons && (!lastItemIsVisible || infiniteScroll) && /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
+          showButtons && (!lastItemIsVisible || infiniteScroll) && /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
             "button",
             {
               "aria-label": "Next",
@@ -9389,11 +10036,11 @@ var ScrollingCarousel = ({
               },
               css: buttonRight(buttonsPosition),
               "data-testid": `scrolling-carousel-button-next-${id}`,
-              children: customNextIcon ? customNextIcon : /* @__PURE__ */ (0, import_jsx_runtime256.jsx)("span", { css: iconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(Icon_default, { variant: "AngleRight", css: icon }) })
+              children: customNextIcon ? customNextIcon : /* @__PURE__ */ (0, import_jsx_runtime258.jsx)("span", { css: iconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Icon_default, { variant: "AngleRight", css: icon }) })
             }
           )
         ] }),
-        showDots && /* @__PURE__ */ (0, import_jsx_runtime256.jsx)("div", { css: dots, children: /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
+        showDots && /* @__PURE__ */ (0, import_jsx_runtime258.jsx)("div", { css: dots, children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
           "div",
           {
             css: dotsInner,
@@ -9401,7 +10048,7 @@ var ScrollingCarousel = ({
             children: state.childVisibility.map((childVisibility, i) => {
               var _a;
               const distance = (_a = dotDistances[i]) != null ? _a : 0;
-              return /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
                 "button",
                 {
                   type: "button",
@@ -9432,8 +10079,8 @@ var ScrollingCarousel = ({
 ScrollingCarousel.displayName = "ScrollingCarousel";
 
 // src/PackageCard/PackageCard.styles.ts
-var import_react64 = require("@emotion/react");
-var cardContainerStyles3 = (orientation, hasContentBackground, hasClickHandler) => import_react64.css`
+var import_react68 = require("@emotion/react");
+var cardContainerStyles3 = (orientation, hasContentBackground, hasClickHandler) => import_react68.css`
   ${hasClickHandler && `
     cursor: pointer;
   `}
@@ -9451,7 +10098,7 @@ var cardContainerStyles3 = (orientation, hasContentBackground, hasClickHandler)
   flex-direction: column;
   gap: var(--spacing-2);
 
-  ${orientation === "horizontal" && import_react64.css`
+  ${orientation === "horizontal" && import_react68.css`
     /* Apply horizontal layout only on tablet and up */
     ${media.md} {
       flex-direction: row;
@@ -9479,60 +10126,60 @@ var cardContainerStyles3 = (orientation, hasContentBackground, hasClickHandler)
     }
   `}
 `;
-var imageContainerStyles = (orientation) => import_react64.css`
+var imageContainerStyles = (orientation) => import_react68.css`
   width: 100%;
   height: 260px;
 
-  ${orientation === "horizontal" && import_react64.css`
+  ${orientation === "horizontal" && import_react68.css`
     ${media.md} {
       width: 40%;
       height: 200px;
     }
   `}
 `;
-var imageBoxStyles = (orientation) => import_react64.css`
+var imageBoxStyles = (orientation) => import_react68.css`
   height: 260px;
 
-  ${orientation === "horizontal" && import_react64.css`
+  ${orientation === "horizontal" && import_react68.css`
     ${media.md} {
       height: 200px;
     }
   `}
 `;
-var contentContainerStyles = (orientation, hasContentBackground) => import_react64.css`
+var contentContainerStyles = (orientation, hasContentBackground) => import_react68.css`
   ${hasContentBackground ? contentWithBackgroundStyles : contentWithoutBackgroundStyles}
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
 
-  ${orientation === "horizontal" && import_react64.css`
+  ${orientation === "horizontal" && import_react68.css`
     ${media.md} {
       width: 60%;
       justify-content: center;
     }
   `}
 `;
-var imageStyles2 = import_react64.css`
+var imageStyles3 = import_react68.css`
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   position: relative;
   background-color: lightgray;
 `;
-var badgeTopLeftStyles = import_react64.css`
+var badgeTopLeftStyles = import_react68.css`
   position: absolute;
   top: var(--spacing-3);
   left: var(--spacing-3);
   z-index: 2;
 `;
-var badgeBottomRightStyles = import_react64.css`
+var badgeBottomRightStyles = import_react68.css`
   position: absolute;
   bottom: var(--spacing-3);
   right: var(--spacing-3);
   z-index: 2;
 `;
-var heartIconStyles = import_react64.css`
+var heartIconStyles = import_react68.css`
   position: absolute;
   top: var(--spacing-3);
   right: var(--spacing-3);
@@ -9554,20 +10201,20 @@ var heartIconStyles = import_react64.css`
     transform: scale(1.1);
   }
 `;
-var actionMenuStyles = import_react64.css`
+var actionMenuStyles = import_react68.css`
   position: absolute;
   top: var(--spacing-3);
   right: var(--spacing-3);
   z-index: 3;
 `;
-var contentWithBackgroundStyles = import_react64.css`
+var contentWithBackgroundStyles = import_react68.css`
   padding: 0 var(--spacing-3) var(--spacing-4) var(--spacing-3);
   background-color: var(--surface-page);
 `;
-var contentWithoutBackgroundStyles = import_react64.css`
+var contentWithoutBackgroundStyles = import_react68.css`
   padding-top: 0 var(--spacing-2) var(--spacing-2) var(--spacing-2);
 `;
-var overlayStyles = import_react64.css`
+var overlayStyles = import_react68.css`
   position: absolute;
   top: 0;
   left: 0;
@@ -9581,7 +10228,7 @@ var overlayStyles = import_react64.css`
 `;
 
 // src/PackageCard/PackageCard.tsx
-var import_jsx_runtime257 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime259 = require("@emotion/react/jsx-runtime");
 var PackageCard = ({
   images,
   title,
@@ -9603,7 +10250,7 @@ var PackageCard = ({
   const shouldShowOverlay = availabilityBadges == null ? void 0 : availabilityBadges.some(
     (badge2) => badge2.showOverlay
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime259.jsxs)(
     Box_default,
     {
       position: "relative",
@@ -9612,7 +10259,7 @@ var PackageCard = ({
       onClick,
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime259.jsxs)(
           Box_default,
           {
             position: "relative",
@@ -9620,7 +10267,7 @@ var PackageCard = ({
             borderRadius: "var(--spacing-4)",
             css: imageContainerStyles(orientation),
             children: [
-              availabilityBadges == null ? void 0 : availabilityBadges.map((badge2, index) => /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
+              availabilityBadges == null ? void 0 : availabilityBadges.map((badge2, index) => /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
                 AvailabilityBadge_default,
                 {
                   variant: badge2.variant,
@@ -9629,23 +10276,23 @@ var PackageCard = ({
                 },
                 `availability-${index}`
               )),
-              shouldShowOverlay && /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(Box_default, { css: overlayStyles }),
-              /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
+              shouldShowOverlay && /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(Box_default, { css: overlayStyles }),
+              /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
                 ScrollingCarousel,
                 {
                   showDots: images.length > 1,
                   showNavigationOnHover: true,
                   id: carouselId,
-                  children: images.filter((image) => !!image).map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
+                  children: images.filter((image) => !!image).map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
                     ScrollingCarouselStep,
                     {
                       parentId: carouselId,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
                         Box_default,
                         {
                           width: "100%",
                           css: [
-                            imageStyles2,
+                            imageStyles3,
                             imageBoxStyles(orientation),
                             {
                               backgroundImage: `linear-gradient(181deg, rgba(0, 0, 0, 0.00) 75.32%, rgba(0, 0, 0, 0.40) 99.41%), url(${image})`
@@ -9658,7 +10305,7 @@ var PackageCard = ({
                   ))
                 }
               ),
-              onFavoriteClick && /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
+              onFavoriteClick && /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
                 Box_default,
                 {
                   css: heartIconStyles,
@@ -9667,14 +10314,14 @@ var PackageCard = ({
                     e.stopPropagation();
                     onFavoriteClick == null ? void 0 : onFavoriteClick();
                   },
-                  children: isFavorited ? /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
+                  children: isFavorited ? /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
                     Icon_default,
                     {
                       variant: "HeartSolid",
                       size: "small",
                       fill: "var(--color-error-500)"
                     }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
                     Icon_default,
                     {
                       variant: "Heart",
@@ -9684,13 +10331,13 @@ var PackageCard = ({
                   )
                 }
               ),
-              actions && actions.length > 0 && orientation === "vertical" && /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(Box_default, { css: actionMenuStyles, children: /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(ActionMenu_default, { actions }) })
+              actions && actions.length > 0 && orientation === "vertical" && /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(Box_default, { css: actionMenuStyles, children: /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(ActionMenu_default, { actions }) })
             ]
           }
         ),
-        actions && actions.length > 0 && orientation === "horizontal" && /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(Box_default, { css: actionMenuStyles, children: /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(ActionMenu_default, { actions }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(Box_default, { css: contentContainerStyles(orientation, hasContentBackground), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(
+        actions && actions.length > 0 && orientation === "horizontal" && /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(Box_default, { css: actionMenuStyles, children: /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(ActionMenu_default, { actions }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime259.jsxs)(Box_default, { css: contentContainerStyles(orientation, hasContentBackground), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime259.jsxs)(
             Box_default,
             {
               display: "flex",
@@ -9698,9 +10345,9 @@ var PackageCard = ({
               gap: "var(--spacing-1)",
               mb: "var(--spacing-1)",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(Text_default, { size: "md", fontWeight: "bold", children: title }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(Text_default, { size: "sm", fontWeight: "bold", children: subtitle }) }),
-                startingPrice && /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(Text_default, { size: "sm", fontWeight: "normal", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(Text_default, { size: "md", fontWeight: "bold", children: title }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(Text_default, { size: "sm", fontWeight: "bold", children: subtitle }) }),
+                startingPrice && /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime259.jsxs)(Text_default, { size: "sm", fontWeight: "normal", children: [
                   "Starting Price ",
                   startingPrice,
                   " / Guest"
@@ -9708,14 +10355,14 @@ var PackageCard = ({
               ]
             }
           ),
-          badges && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
+          badges && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
             Box_default,
             {
               display: "flex",
               gap: "var(--spacing-2) var(--spacing-4)",
               alignItems: "center",
               flexWrap: "wrap",
-              children: badges.map((badge2, index) => /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
+              children: badges.map((badge2, index) => /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
                 IconLabel_default,
                 {
                   iconSize: badge2.iconSize || "medium",
@@ -9734,14 +10381,14 @@ var PackageCard = ({
 var PackageCard_default = PackageCard;
 
 // src/PackageHeader/PackageHeader.tsx
-var import_jsx_runtime258 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime260 = require("@emotion/react/jsx-runtime");
 var PackageHeader = ({
   header,
   subheader,
   features,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(
     Box_default,
     {
       display: "flex",
@@ -9750,9 +10397,9 @@ var PackageHeader = ({
       color: "var(--text-primary)",
       className,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Heading_default, { size: "xs", fontWeight: "bold", children: header }),
-        subheader && /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Text_default, { children: subheader }),
-        features && /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(FeatureList_default, { items: features })
+        /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(Heading_default, { size: "xs", fontWeight: "bold", children: header }),
+        subheader && /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(Text_default, { children: subheader }),
+        features && /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(FeatureList_default, { items: features })
       ]
     }
   );
@@ -9760,8 +10407,8 @@ var PackageHeader = ({
 var PackageHeader_default = PackageHeader;
 
 // src/ReviewCard/components/ReviewImages.styles.ts
-var import_react65 = require("@emotion/react");
-var imageStyles3 = import_react65.css`
+var import_react69 = require("@emotion/react");
+var imageStyles4 = import_react69.css`
   flex: 1;
   min-width: 0;
   max-width: 100%;
@@ -9772,18 +10419,18 @@ var imageStyles3 = import_react65.css`
 `;
 
 // src/ReviewCard/components/ReviewImages.tsx
-var import_jsx_runtime259 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime261 = require("@emotion/react/jsx-runtime");
 var ReviewImages = ({ images, maxImages = 3 }) => {
   const displayImages = images.slice(0, maxImages);
   if (displayImages.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(Box_default, { display: "flex", gap: "var(--spacing-2)", flexWrap: "wrap", children: displayImages.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(Box_default, { display: "flex", gap: "var(--spacing-2)", flexWrap: "wrap", children: displayImages.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
     "img",
     {
       src: image,
       alt: `Review ${index + 1}`,
-      css: imageStyles3
+      css: imageStyles4
     },
     index
   )) });
@@ -9791,7 +10438,7 @@ var ReviewImages = ({ images, maxImages = 3 }) => {
 var ReviewImages_default = ReviewImages;
 
 // src/ReviewCard/components/ReviewReply.tsx
-var import_jsx_runtime260 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime262 = require("@emotion/react/jsx-runtime");
 var ReviewReply = ({
   avatarSrc,
   name,
@@ -9800,7 +10447,7 @@ var ReviewReply = ({
   label,
   rating
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime262.jsxs)(
     Box_default,
     {
       backgroundColor: "var(--surface-neutral)",
@@ -9810,7 +10457,7 @@ var ReviewReply = ({
       flexDirection: "column",
       gap: "var(--spacing-3)",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime262.jsxs)(
           Box_default,
           {
             display: "flex",
@@ -9818,7 +10465,7 @@ var ReviewReply = ({
             justifyContent: "space-between",
             gap: "var(--spacing-2)",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(
                 UserCard_default,
                 {
                   avatarSrc,
@@ -9827,11 +10474,11 @@ var ReviewReply = ({
                   rating
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(AvailabilityBadge_default, { variant: "neutral", children: label })
+              /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(AvailabilityBadge_default, { variant: "neutral", children: label })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(Text_default, { children: content })
+        /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(Text_default, { children: content })
       ]
     }
   );
@@ -9839,7 +10486,7 @@ var ReviewReply = ({
 var ReviewReply_default = ReviewReply;
 
 // src/ReviewCard/ReviewCard.tsx
-var import_jsx_runtime261 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime263 = require("@emotion/react/jsx-runtime");
 var ReviewCard = ({
   avatarSrc,
   name,
@@ -9851,7 +10498,7 @@ var ReviewCard = ({
   replies = [],
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime261.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)(
     Box_default,
     {
       backgroundColor: "white",
@@ -9862,7 +10509,7 @@ var ReviewCard = ({
       gap: "var(--spacing-4)",
       className,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
           UserCard_default,
           {
             avatarSrc,
@@ -9871,10 +10518,10 @@ var ReviewCard = ({
             rating
           }
         ),
-        availabilityBadge && /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(AvailabilityBadge_default, { variant: availabilityBadge.variant, children: availabilityBadge.text }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(Text_default, { size: "md", children: content }),
-        images.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(ReviewImages_default, { images }),
-        replies.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-3)", children: replies.map((reply, index) => /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
+        availabilityBadge && /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(AvailabilityBadge_default, { variant: availabilityBadge.variant, children: availabilityBadge.text }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Text_default, { size: "md", children: content }),
+        images.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(ReviewImages_default, { images }),
+        replies.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-3)", children: replies.map((reply, index) => /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
           ReviewReply_default,
           {
             avatarSrc: reply.avatarSrc,
@@ -9893,12 +10540,12 @@ var ReviewCard = ({
 var ReviewCard_default = ReviewCard;
 
 // src/Reviews/Reviews.tsx
-var import_react66 = require("@emotion/react");
+var import_react70 = require("@emotion/react");
 
 // src/Reviews/components/ReviewItem.tsx
-var import_jsx_runtime262 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime264 = require("@emotion/react/jsx-runtime");
 var ReviewItem = ({ label, rating }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime262.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime264.jsxs)(
     Box_default,
     {
       display: "flex",
@@ -9906,10 +10553,10 @@ var ReviewItem = ({ label, rating }) => {
       alignItems: "center",
       width: "100%",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(Text_default, { fontWeight: "semibold", children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime262.jsxs)(Box_default, { display: "flex", alignItems: "center", gap: "var(--spacing-2)", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(Icon_default, { variant: "StarSolid", size: "large", fill: "var(--surface-action-2)" }),
-          /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(Text_default, { fontWeight: "semibold", children: rating.toFixed(1) })
+        /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(Text_default, { fontWeight: "semibold", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime264.jsxs)(Box_default, { display: "flex", alignItems: "center", gap: "var(--spacing-2)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(Icon_default, { variant: "StarSolid", size: "large", fill: "var(--surface-action-2)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(Text_default, { fontWeight: "semibold", children: rating.toFixed(1) })
         ] })
       ]
     }
@@ -9918,14 +10565,14 @@ var ReviewItem = ({ label, rating }) => {
 var ReviewItem_default = ReviewItem;
 
 // src/Reviews/Reviews.tsx
-var import_jsx_runtime263 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime265 = require("@emotion/react/jsx-runtime");
 var Reviews = ({
   averageRating,
   totalReviews,
   items,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime265.jsxs)(
     Box_default,
     {
       width: "100%",
@@ -9938,7 +10585,7 @@ var Reviews = ({
       p: "var(--spacing-4)",
       className,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime265.jsxs)(
           Box_default,
           {
             display: "flex",
@@ -9946,12 +10593,12 @@ var Reviews = ({
             alignItems: "center",
             gap: "var(--spacing-2)",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(Heading_default, { size: "sm", fontWeight: "bold", color: "text-primary", children: averageRating.toFixed(1) }),
-              /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(Heading_default, { size: "sm", fontWeight: "bold", color: "text-primary", children: averageRating.toFixed(1) }),
+              /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
                 StarRating_default,
                 {
                   rating: averageRating,
-                  css: import_react66.css`
+                  css: import_react70.css`
             > svg {
               height: 40px;
               width: 40px;
@@ -9959,7 +10606,7 @@ var Reviews = ({
           `
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)(Text_default, { size: "sm", color: "text-secondary", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime265.jsxs)(Text_default, { size: "sm", color: "text-secondary", children: [
                 "Overall Rating \u2022 ",
                 totalReviews,
                 " Review",
@@ -9968,14 +10615,14 @@ var Reviews = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
           Box_default,
           {
             display: "flex",
             flexDirection: "column",
             gap: "var(--spacing-2)",
             width: "100%",
-            children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(ReviewItem_default, { label: item.label, rating: item.rating }, index))
+            children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(ReviewItem_default, { label: item.label, rating: item.rating }, index))
           }
         )
       ]
@@ -9985,7 +10632,7 @@ var Reviews = ({
 var Reviews_default = Reviews;
 
 // src/Reviews/ReviewsShowcase.tsx
-var import_jsx_runtime264 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime266 = require("@emotion/react/jsx-runtime");
 var ReviewsShowcase = () => {
   const sampleData = {
     averageRating: 4,
@@ -10007,7 +10654,7 @@ var ReviewsShowcase = () => {
       { label: "Game Abundance", rating: 5 }
     ]
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime264.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime266.jsxs)(
     Box_default,
     {
       display: "flex",
@@ -10015,24 +10662,24 @@ var ReviewsShowcase = () => {
       gap: "var(--spacing-8)",
       p: "var(--spacing-6)",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(Heading_default, { size: "lg", children: "Reviews Component Showcase" }),
-        /* @__PURE__ */ (0, import_jsx_runtime264.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-4)", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(Heading_default, { size: "md", children: "Default Reviews" }),
-          /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(Box_default, { maxWidth: "400px", children: /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(Reviews_default, { ...sampleData }) })
+        /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(Heading_default, { size: "lg", children: "Reviews Component Showcase" }),
+        /* @__PURE__ */ (0, import_jsx_runtime266.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-4)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(Heading_default, { size: "md", children: "Default Reviews" }),
+          /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(Box_default, { maxWidth: "400px", children: /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(Reviews_default, { ...sampleData }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime264.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-4)", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(Heading_default, { size: "md", children: "High Rating Reviews" }),
-          /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(Box_default, { maxWidth: "400px", children: /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(Reviews_default, { ...highRatingData }) })
+        /* @__PURE__ */ (0, import_jsx_runtime266.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-4)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(Heading_default, { size: "md", children: "High Rating Reviews" }),
+          /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(Box_default, { maxWidth: "400px", children: /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(Reviews_default, { ...highRatingData }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime264.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-4)", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(Heading_default, { size: "md", children: "Mobile Layout (320px width)" }),
-          /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime266.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-4)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(Heading_default, { size: "md", children: "Mobile Layout (320px width)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(
             Box_default,
             {
               maxWidth: "320px",
               border: "1px solid var(--color-neutral-200)",
               p: "var(--spacing-4)",
-              children: /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(Reviews_default, { ...sampleData })
+              children: /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(Reviews_default, { ...sampleData })
             }
           )
         ] })
@@ -10068,6 +10715,8 @@ var ReviewsShowcase_default = ReviewsShowcase;
   Icon,
   IconLabel,
   IconSizeMap,
+  ImageGalleryModal,
+  ImageGalleryModalComponent,
   InfoBox,
   Input,
   LandownerProfile,
@@ -10076,6 +10725,8 @@ var ReviewsShowcase_default = ReviewsShowcase;
   Logo,
   MarkdownContent,
   MessageBubble,
+  Modal,
+  ModalComponent,
   Navigation,
   PackageCard,
   PackageHeader,