@landtrustinc/design-system 1.2.63 → 1.2.64

package/dist/index.js

@@ -4750,6 +4750,13 @@ var styles = {
     max-height: ${space["14"]};
     font-size: ${fontSizes.base};
   `,
+  iconOnlyXs: import_react12.css`
+    height: var(--spacing-8);
+    min-width: var(--spacing-8);
+    max-height: var(--spacing-8);
+    padding: 0;
+    border-radius: var(--radius-round);
+  `,
   iconOnly: import_react12.css`
     height: var(--spacing-11);
     min-width: var(--spacing-11);
@@ -4827,8 +4834,9 @@ var Button = import_react14.default.forwardRef(
           styles[variant],
           fullWidth && styles.fullWidth,
           size && styles[sizeKey],
+          isIconOnly && size === "xs" && styles.iconOnlyXs,
           isIconOnly && size === "lg" && styles.iconOnlyLg,
-          isIconOnly && size !== "lg" && styles.iconOnly,
+          isIconOnly && size !== "lg" && size !== "xs" && styles.iconOnly,
           (isLoading || disabled) && styles.disabled,
           icon2 && children && styles.withIcon
         ],
@@ -6185,7 +6193,8 @@ function useBottomDrawer(options) {
 var useBottomDrawer_default = useBottomDrawer;
 
 // src/ChatWidget/ChatWidget.tsx
-var import_react39 = __toESM(require("react"));
+var import_react40 = require("@emotion/react");
+var import_react41 = __toESM(require("react"));
 
 // src/Divider/Divider.tsx
 var import_styled4 = __toESM(require("@emotion/styled"));
@@ -6372,7 +6381,6 @@ var TextArea = (0, import_react31.forwardRef)(
       showSubmit && /* @__PURE__ */ (0, import_jsx_runtime228.jsx)("div", { css: submitButtonContainer, children: /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(
         Button_default,
         {
-          size: "xs",
           "aria-label": submitAriaLabel,
           onClick: onSubmit,
           disabled: disabled || submitDisabled,
@@ -6826,6 +6834,21 @@ var closeButtonContent = import_react36.css`
   align-items: center;
   gap: var(--spacing-2);
 `;
+var scrollToBottomButtonStyles = import_react36.css`
+  position: absolute;
+  bottom: var(--spacing-4);
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
+  z-index: 2;
+
+  &.visible {
+    opacity: 1;
+    visibility: visible;
+  }
+`;
 
 // src/ChatWidget/components/AskBuckButton.tsx
 var import_react38 = __toESM(require("react"));
@@ -6954,6 +6977,113 @@ var AskBuckButton = import_react38.default.forwardRef(
 AskBuckButton.displayName = "AskBuckButton";
 var AskBuckButton_default = AskBuckButton;
 
+// src/ChatWidget/hooks/useChatScrollControl.ts
+var import_react39 = require("react");
+var useChatScrollControl = ({
+  messages,
+  isThinking,
+  isExpanded,
+  enableScrollToBottomControl
+}) => {
+  const scrollRef = (0, import_react39.useRef)(null);
+  const savedScrollPosition = (0, import_react39.useRef)(0);
+  const previousMessagesLength = (0, import_react39.useRef)(messages.length);
+  const previousMessagesRef = (0, import_react39.useRef)(messages);
+  const userJustSentMessageRef = (0, import_react39.useRef)(false);
+  const [isAtBottom, setIsAtBottom] = (0, import_react39.useState)(true);
+  const [showScrollButton, setShowScrollButton] = (0, import_react39.useState)(false);
+  const isScrolledToBottom = (0, import_react39.useCallback)((el) => {
+    const threshold = 50;
+    return el.scrollTop + el.clientHeight >= el.scrollHeight - threshold;
+  }, []);
+  const scrollToBottom = (0, import_react39.useCallback)((behavior = "smooth") => {
+    const el = scrollRef.current;
+    if (!el)
+      return;
+    el.scrollTo({ top: el.scrollHeight, behavior });
+    savedScrollPosition.current = el.scrollHeight;
+    setIsAtBottom(true);
+    setShowScrollButton(false);
+  }, []);
+  const saveCurrentScrollPosition = (0, import_react39.useCallback)(() => {
+    if (!scrollRef.current)
+      return;
+    savedScrollPosition.current = scrollRef.current.scrollTop;
+  }, []);
+  const markUserMessageSubmitted = (0, import_react39.useCallback)(() => {
+    userJustSentMessageRef.current = true;
+  }, []);
+  (0, import_react39.useEffect)(() => {
+    const el = scrollRef.current;
+    if (!el || !isExpanded)
+      return;
+    requestAnimationFrame(() => {
+      if (savedScrollPosition.current > 0) {
+        el.scrollTop = savedScrollPosition.current;
+      }
+      const atBottom = isScrolledToBottom(el);
+      setIsAtBottom(atBottom);
+      setShowScrollButton(enableScrollToBottomControl && !atBottom);
+    });
+  }, [isExpanded, isScrolledToBottom, enableScrollToBottomControl]);
+  (0, import_react39.useEffect)(() => {
+    const el = scrollRef.current;
+    if (!el || !isExpanded)
+      return;
+    const handleScroll = () => {
+      const atBottom = isScrolledToBottom(el);
+      setIsAtBottom(atBottom);
+      setShowScrollButton(enableScrollToBottomControl && !atBottom);
+      savedScrollPosition.current = el.scrollTop;
+    };
+    handleScroll();
+    el.addEventListener("scroll", handleScroll);
+    return () => el.removeEventListener("scroll", handleScroll);
+  }, [isExpanded, isScrolledToBottom, enableScrollToBottomControl]);
+  (0, import_react39.useEffect)(() => {
+    const el = scrollRef.current;
+    if (!el || !isExpanded)
+      return;
+    const messagesLengthChanged = messages.length !== previousMessagesLength.current;
+    const messagesContentChanged = messages !== previousMessagesRef.current;
+    previousMessagesLength.current = messages.length;
+    previousMessagesRef.current = messages;
+    if (messagesLengthChanged || messagesContentChanged || isThinking) {
+      if (!enableScrollToBottomControl) {
+        requestAnimationFrame(() => {
+          scrollToBottom("smooth");
+        });
+        userJustSentMessageRef.current = false;
+        return;
+      }
+      const shouldAutoScroll = userJustSentMessageRef.current || isAtBottom;
+      if (!shouldAutoScroll) {
+        setShowScrollButton(true);
+        return;
+      }
+      requestAnimationFrame(() => {
+        scrollToBottom("smooth");
+      });
+    }
+    userJustSentMessageRef.current = false;
+  }, [
+    messages,
+    isThinking,
+    isExpanded,
+    isAtBottom,
+    scrollToBottom,
+    enableScrollToBottomControl
+  ]);
+  return {
+    scrollRef,
+    showScrollButton,
+    scrollToBottom,
+    markUserMessageSubmitted,
+    saveCurrentScrollPosition
+  };
+};
+var useChatScrollControl_default = useChatScrollControl;
+
 // src/ChatWidget/ChatWidget.tsx
 var import_jsx_runtime233 = require("@emotion/react/jsx-runtime");
 var DEFAULT_EMPTY_STATE = [
@@ -6988,54 +7118,37 @@ var ChatWidget = ({
   onPromptClick,
   suggestedPromptsTitle = "Other Helpful Topics",
   notificationCount,
-  closeOnClickOutside = true
+  closeOnClickOutside = true,
+  enableScrollToBottomControl = true
 }) => {
-  const [value, setValue] = (0, import_react39.useState)("");
-  const scrollRef = (0, import_react39.useRef)(null);
-  const savedScrollPosition = (0, import_react39.useRef)(0);
-  const previousMessagesLength = (0, import_react39.useRef)(messages.length);
-  const previousMessagesRef = (0, import_react39.useRef)(messages);
+  const [value, setValue] = (0, import_react41.useState)("");
   const isControlled = typeof expanded === "boolean";
-  const [internalExpanded, setInternalExpanded] = (0, import_react39.useState)(defaultExpanded);
+  const [internalExpanded, setInternalExpanded] = (0, import_react41.useState)(defaultExpanded);
   const isExpanded = isControlled ? expanded : internalExpanded;
-  const setExpanded = (0, import_react39.useCallback)(
+  const {
+    scrollRef,
+    showScrollButton,
+    scrollToBottom,
+    markUserMessageSubmitted,
+    saveCurrentScrollPosition
+  } = useChatScrollControl_default({
+    messages,
+    isThinking,
+    isExpanded,
+    enableScrollToBottomControl
+  });
+  const setExpanded = (0, import_react41.useCallback)(
     (next) => {
-      if (!next && scrollRef.current) {
-        savedScrollPosition.current = scrollRef.current.scrollTop;
-      }
+      if (!next)
+        saveCurrentScrollPosition();
       if (!isControlled)
         setInternalExpanded(next);
       onExpandedChange == null ? void 0 : onExpandedChange(next);
     },
-    [isControlled, onExpandedChange]
+    [isControlled, onExpandedChange, saveCurrentScrollPosition]
   );
-  (0, import_react39.useEffect)(() => {
-    const el = scrollRef.current;
-    if (!el || !isExpanded)
-      return;
-    requestAnimationFrame(() => {
-      if (savedScrollPosition.current > 0) {
-        el.scrollTop = savedScrollPosition.current;
-      }
-    });
-  }, [isExpanded]);
-  (0, import_react39.useEffect)(() => {
-    const el = scrollRef.current;
-    if (!el || !isExpanded)
-      return;
-    const messagesLengthChanged = messages.length !== previousMessagesLength.current;
-    const messagesContentChanged = messages !== previousMessagesRef.current;
-    previousMessagesLength.current = messages.length;
-    previousMessagesRef.current = messages;
-    if (messagesLengthChanged || messagesContentChanged || isThinking) {
-      requestAnimationFrame(() => {
-        el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
-        savedScrollPosition.current = el.scrollHeight;
-      });
-    }
-  }, [messages, isThinking, isExpanded]);
   const messagesToRender = messages.length === 0 ? emptyState : messages;
-  const renderedMessages = (0, import_react39.useMemo)(
+  const renderedMessages = (0, import_react41.useMemo)(
     () => messagesToRender.map((element, index) => {
       var _a;
       const key = (_a = element.key) != null ? _a : index;
@@ -7045,7 +7158,7 @@ var ChatWidget = ({
       if (element.type === MessageBubble_default) {
         return /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Box_default, { css: sentWrapperStyles, children: element }, key);
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(import_react39.default.Fragment, { children: element }, key);
+      return /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(import_react41.default.Fragment, { children: element }, key);
     }),
     [messagesToRender]
   );
@@ -7053,6 +7166,7 @@ var ChatWidget = ({
     const trimmed = value.trim();
     if (!trimmed)
       return;
+    markUserMessageSubmitted();
     onSubmit(trimmed);
     setValue("");
   };
@@ -7109,60 +7223,90 @@ var ChatWidget = ({
             ),
             /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Divider_default, { mt: 4, mb: 0 })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(
-            Box_default,
-            {
-              ref: scrollRef,
-              flex: "1 1 auto",
-              minHeight: 0,
-              overflowY: "auto",
-              p: 0,
-              pb: 4,
-              display: "flex",
-              flexDirection: "column",
-              gap: "var(--spacing-2)",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-2)", children: renderedMessages }),
-                isThinking && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Box_default, { css: receivedWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)("div", { css: thinkingRowStyles, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Spinner_default2, { size: "medium" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime233.jsx)("span", { css: thinkingTextStyles, children: thinkingText })
-                ] }) }),
-                suggestedPrompts && suggestedPrompts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Box_default, { css: receivedWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(
-                  Box_default,
-                  {
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: "var(--spacing-4)",
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Text_default, { size: "md", fontWeight: "bold", color: "var(--text-primary)", children: suggestedPromptsTitle }),
-                      /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
-                        Box_default,
-                        {
-                          display: "flex",
-                          flexWrap: "wrap",
-                          gap: "var(--spacing-4)",
-                          alignItems: "flex-start",
-                          children: suggestedPrompts.map((prompt, index) => /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
-                            TagChip_default,
-                            {
-                              variant: "success",
-                              onClick: () => {
-                                var _a;
-                                return onPromptClick == null ? void 0 : onPromptClick((_a = prompt.value) != null ? _a : prompt.label);
+          /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(Box_default, { position: "relative", flex: "1 1 auto", minHeight: 0, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(
+              Box_default,
+              {
+                ref: scrollRef,
+                height: "100%",
+                overflowY: "auto",
+                p: 0,
+                pb: 4,
+                display: "flex",
+                flexDirection: "column",
+                gap: "var(--spacing-2)",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-2)", children: renderedMessages }),
+                  isThinking && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Box_default, { css: receivedWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)("div", { css: thinkingRowStyles, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Spinner_default2, { size: "medium" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime233.jsx)("span", { css: thinkingTextStyles, children: thinkingText })
+                  ] }) }),
+                  suggestedPrompts && suggestedPrompts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Box_default, { css: receivedWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(
+                    Box_default,
+                    {
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: "var(--spacing-4)",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
+                          Text_default,
+                          {
+                            size: "md",
+                            fontWeight: "bold",
+                            color: "var(--text-primary)",
+                            children: suggestedPromptsTitle
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
+                          Box_default,
+                          {
+                            display: "flex",
+                            flexWrap: "wrap",
+                            gap: "var(--spacing-4)",
+                            alignItems: "flex-start",
+                            children: suggestedPrompts.map((prompt, index) => /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
+                              TagChip_default,
+                              {
+                                variant: "success",
+                                onClick: () => {
+                                  var _a;
+                                  return onPromptClick == null ? void 0 : onPromptClick((_a = prompt.value) != null ? _a : prompt.label);
+                                },
+                                style: { cursor: "pointer" },
+                                children: prompt.label
                               },
-                              style: { cursor: "pointer" },
-                              children: prompt.label
-                            },
-                            index
-                          ))
-                        }
-                      )
-                    ]
+                              index
+                            ))
+                          }
+                        )
+                      ]
+                    }
+                  ) })
+                ]
+              }
+            ),
+            enableScrollToBottomControl && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
+              Box_default,
+              {
+                css: scrollToBottomButtonStyles,
+                className: showScrollButton ? "visible" : void 0,
+                children: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
+                  Button_default,
+                  {
+                    variant: "secondary",
+                    size: "xs",
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Icon_default, { variant: "AngleDownSharp" }),
+                    onClick: () => scrollToBottom("smooth"),
+                    "aria-label": "Scroll to bottom",
+                    css: import_react40.css`
+                    background-color: var(--color-base-white);
+                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+                  `
                   }
-                ) })
-              ]
-            }
-          ),
+                )
+              }
+            )
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Box_default, { position: "sticky", bottom: 0, zIndex: 1, p: 0, children: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
             TextArea_default,
             {
@@ -7186,7 +7330,7 @@ var ChatWidget = ({
 var ChatWidget_default = ChatWidget;
 
 // src/CtaCard/CtaCard.tsx
-var import_react40 = require("react");
+var import_react42 = require("react");
 var import_jsx_runtime234 = require("@emotion/react/jsx-runtime");
 var CtaCard = ({
   title,
@@ -7198,7 +7342,7 @@ var CtaCard = ({
   onCtaClick,
   className
 }) => {
-  (0, import_react40.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     onDisplay == null ? void 0 : onDisplay();
   }, [onDisplay]);
   const showButton = ctaUrl || onCtaClick;
@@ -7248,7 +7392,7 @@ CtaCard.displayName = "CtaCard";
 var CtaCard_default = CtaCard;
 
 // src/FeatureList/components/FeatureListItem.tsx
-var import_react41 = require("@emotion/react");
+var import_react43 = require("@emotion/react");
 var import_react_loading_skeleton = __toESM(require("react-loading-skeleton"));
 var import_jsx_runtime235 = require("@emotion/react/jsx-runtime");
 var FeatureListItem = ({
@@ -7317,7 +7461,7 @@ var FeatureListItem = ({
               variant: iconVariant,
               size: iconSize,
               fill: iconColor,
-              css: import_react41.css`
+              css: import_react43.css`
                   flex-shrink: 0;
                 `
             }
@@ -7354,8 +7498,8 @@ var FeatureList = ({ heading, items, className }) => {
 var FeatureList_default = FeatureList;
 
 // src/FieldNoteCard/FieldNoteCard.styles.ts
-var import_react42 = require("@emotion/react");
-var cardContainerStyles = import_react42.css`
+var import_react44 = require("@emotion/react");
+var cardContainerStyles = import_react44.css`
   position: relative;
   height: 335px;
 
@@ -7363,12 +7507,12 @@ var cardContainerStyles = import_react42.css`
     height: 480px;
   }
 `;
-var cardContentStyles = import_react42.css`
+var cardContentStyles = import_react44.css`
   position: relative;
   border-radius: var(--spacing-4);
   overflow: hidden;
 `;
-var getBackgroundWithGradient = (imageUrl) => import_react42.css`
+var getBackgroundWithGradient = (imageUrl) => import_react44.css`
   background-image: linear-gradient(
       180deg,
       rgba(0, 0, 0, 0) 48.36%,
@@ -7418,14 +7562,14 @@ var FieldNoteCard = ({
 var FieldNoteCard_default = FieldNoteCard;
 
 // src/Form/FormField.tsx
-var import_react43 = require("@emotion/react");
+var import_react45 = require("@emotion/react");
 var import_jsx_runtime238 = require("@emotion/react/jsx-runtime");
-var fieldContainerStyles = import_react43.css`
+var fieldContainerStyles = import_react45.css`
   display: flex;
   flex-direction: column;
   gap: ${space["2"]};
 `;
-var labelStyles2 = import_react43.css`
+var labelStyles2 = import_react45.css`
   font-family: ${fonts.base};
   font-size: ${fontSizes.sm};
   font-weight: ${fontWeights.medium};
@@ -7433,17 +7577,17 @@ var labelStyles2 = import_react43.css`
   color: ${colors.gray["900"]};
   margin-bottom: ${space["1"]};
 `;
-var requiredIndicatorStyles = import_react43.css`
+var requiredIndicatorStyles = import_react45.css`
   color: ${colors.red["500"]};
   margin-left: ${space["1"]};
 `;
-var helpTextStyles = import_react43.css`
+var helpTextStyles = import_react45.css`
   font-family: ${fonts.base};
   font-size: ${fontSizes.sm};
   line-height: ${lineHeights.tight};
   color: ${colors.gray["600"]};
 `;
-var errorTextStyles = import_react43.css`
+var errorTextStyles = import_react45.css`
   font-family: ${fonts.base};
   font-size: ${fontSizes.sm};
   line-height: ${lineHeights.tight};
@@ -7452,7 +7596,7 @@ var errorTextStyles = import_react43.css`
   align-items: center;
   gap: ${space["1"]};
 `;
-var successTextStyles = import_react43.css`
+var successTextStyles = import_react45.css`
   font-family: ${fonts.base};
   font-size: ${fontSizes.sm};
   line-height: ${lineHeights.tight};
@@ -7461,7 +7605,7 @@ var successTextStyles = import_react43.css`
   align-items: center;
   gap: ${space["1"]};
 `;
-var visuallyHiddenStyles = import_react43.css`
+var visuallyHiddenStyles = import_react45.css`
   position: absolute;
   width: 1px;
   height: 1px;
@@ -7526,10 +7670,10 @@ var FormField = ({
 };
 
 // src/Form/Input.tsx
-var import_react44 = require("@emotion/react");
-var import_react45 = require("react");
+var import_react46 = require("@emotion/react");
+var import_react47 = require("react");
 var import_jsx_runtime239 = require("@emotion/react/jsx-runtime");
-var inputStyles = import_react44.css`
+var inputStyles = import_react46.css`
   position: relative;
   width: 100%;
   font-family: ${fonts.base};
@@ -7566,19 +7710,19 @@ var inputStyles = import_react44.css`
   }
 `;
 var sizeStyles = {
-  sm: import_react44.css`
+  sm: import_react46.css`
     padding: ${space["2"]} ${space["3"]};
     font-size: ${fontSizes.sm};
     line-height: ${lineHeights.tight};
     height: ${space["8"]};
   `,
-  md: import_react44.css`
+  md: import_react46.css`
     padding: ${space["3"]} ${space["4"]};
     font-size: ${fontSizes.base};
     line-height: ${lineHeights.normal};
     height: ${space["10"]};
   `,
-  lg: import_react44.css`
+  lg: import_react46.css`
     padding: ${space["4"]} ${space["5"]};
     font-size: ${fontSizes.lg};
     line-height: ${lineHeights.normal};
@@ -7586,8 +7730,8 @@ var sizeStyles = {
   `
 };
 var variantStyles = {
-  default: import_react44.css``,
-  error: import_react44.css`
+  default: import_react46.css``,
+  error: import_react46.css`
     border-color: ${colors.red["500"]};
 
     &:focus {
@@ -7595,7 +7739,7 @@ var variantStyles = {
       box-shadow: 0 0 0 3px ${colors.red["100"]};
     }
   `,
-  success: import_react44.css`
+  success: import_react46.css`
     border-color: ${colors.accent.green};
 
     &:focus {
@@ -7604,7 +7748,7 @@ var variantStyles = {
     }
   `
 };
-var inputWithIconStyles = import_react44.css`
+var inputWithIconStyles = import_react46.css`
   padding-left: ${space["10"]};
 
   &.has-end-icon {
@@ -7615,7 +7759,7 @@ var inputWithIconStyles = import_react44.css`
     padding-left: ${space["10"]};
   }
 `;
-var iconContainerStyles = import_react44.css`
+var iconContainerStyles = import_react46.css`
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -7626,20 +7770,20 @@ var iconContainerStyles = import_react44.css`
   pointer-events: none;
   z-index: 1;
 `;
-var startIconStyles = import_react44.css`
+var startIconStyles = import_react46.css`
   ${iconContainerStyles}
   left: ${space["3"]};
 `;
-var endIconStyles = import_react44.css`
+var endIconStyles = import_react46.css`
   ${iconContainerStyles}
   right: ${space["3"]};
 `;
-var inputWrapperStyles = import_react44.css`
+var inputWrapperStyles = import_react46.css`
   position: relative;
   display: inline-block;
   width: 100%;
 `;
-var Input = (0, import_react45.forwardRef)(
+var Input = (0, import_react47.forwardRef)(
   ({
     size = "md",
     variant = "default",
@@ -7684,10 +7828,10 @@ var Input = (0, import_react45.forwardRef)(
 Input.displayName = "Input";
 
 // src/Form/Select.tsx
-var import_react46 = require("@emotion/react");
-var import_react47 = require("react");
+var import_react48 = require("@emotion/react");
+var import_react49 = require("react");
 var import_jsx_runtime240 = require("@emotion/react/jsx-runtime");
-var selectStyles = import_react46.css`
+var selectStyles = import_react48.css`
   position: relative;
   width: 100%;
   font-family: ${fonts.base};
@@ -7726,19 +7870,19 @@ var selectStyles = import_react46.css`
   }
 `;
 var sizeStyles2 = {
-  sm: import_react46.css`
+  sm: import_react48.css`
     padding: ${space["2"]} ${space["3"]};
     font-size: ${fontSizes.sm};
     line-height: ${lineHeights.tight};
     height: ${space["8"]};
   `,
-  md: import_react46.css`
+  md: import_react48.css`
     padding: ${space["3"]} ${space["4"]};
     font-size: ${fontSizes.base};
     line-height: ${lineHeights.normal};
     height: ${space["10"]};
   `,
-  lg: import_react46.css`
+  lg: import_react48.css`
     padding: ${space["4"]} ${space["5"]};
     font-size: ${fontSizes.lg};
     line-height: ${lineHeights.normal};
@@ -7746,8 +7890,8 @@ var sizeStyles2 = {
   `
 };
 var variantStyles2 = {
-  default: import_react46.css``,
-  error: import_react46.css`
+  default: import_react48.css``,
+  error: import_react48.css`
     border-color: ${colors.red["500"]};
 
     &:focus {
@@ -7755,7 +7899,7 @@ var variantStyles2 = {
       box-shadow: 0 0 0 3px ${colors.red["100"]};
     }
   `,
-  success: import_react46.css`
+  success: import_react48.css`
     border-color: ${colors.accent.green};
 
     &:focus {
@@ -7764,7 +7908,7 @@ var variantStyles2 = {
     }
   `
 };
-var optionStyles = import_react46.css`
+var optionStyles = import_react48.css`
   background-color: ${colors.light["100"]};
   color: ${colors.gray["900"]};
 
@@ -7773,7 +7917,7 @@ var optionStyles = import_react46.css`
     background-color: ${colors.gray["100"]};
   }
 `;
-var Select = (0, import_react47.forwardRef)(
+var Select = (0, import_react49.forwardRef)(
   ({
     size = "md",
     variant = "default",
@@ -7811,10 +7955,10 @@ var Select = (0, import_react47.forwardRef)(
 Select.displayName = "Select";
 
 // src/Grid/Column.tsx
-var import_react49 = require("@emotion/react");
+var import_react51 = require("@emotion/react");
 
 // src/Grid/utils.ts
-var import_react48 = require("@emotion/react");
+var import_react50 = require("@emotion/react");
 var LayoutTokens = {
   containers: {
     sm: screens.sm,
@@ -7854,11 +7998,11 @@ var getResponsiveValue = (value) => {
 var generateGridColumns = (columns) => {
   const baseColumns = getResponsiveValue(columns);
   if (typeof columns === "number") {
-    return import_react48.css`
+    return import_react50.css`
       grid-template-columns: repeat(${columns}, 1fr);
     `;
   }
-  return import_react48.css`
+  return import_react50.css`
     grid-template-columns: repeat(${baseColumns}, 1fr);
 
     ${media.sm} {
@@ -7890,11 +8034,11 @@ var generateGridColumns = (columns) => {
 var generateGapStyles = (gap2) => {
   const baseGap = getResponsiveValue(gap2);
   if (typeof gap2 === "string" || typeof gap2 === "number") {
-    return import_react48.css`
+    return import_react50.css`
       gap: ${space[gap2]};
     `;
   }
-  return import_react48.css`
+  return import_react50.css`
     gap: ${space[baseGap]};
 
     ${media.sm} {
@@ -7917,11 +8061,11 @@ var generateGapStyles = (gap2) => {
 var generateRowGapStyles = (rowGap) => {
   const baseRowGap = getResponsiveValue(rowGap);
   if (typeof rowGap === "string" || typeof rowGap === "number") {
-    return import_react48.css`
+    return import_react50.css`
       row-gap: ${space[rowGap]};
     `;
   }
-  return import_react48.css`
+  return import_react50.css`
     row-gap: ${space[baseRowGap]};
 
     ${media.sm} {
@@ -7944,11 +8088,11 @@ var generateRowGapStyles = (rowGap) => {
 var generateColumnGapStyles = (columnGap) => {
   const baseColumnGap = getResponsiveValue(columnGap);
   if (typeof columnGap === "string" || typeof columnGap === "number") {
-    return import_react48.css`
+    return import_react50.css`
       column-gap: ${space[columnGap]};
     `;
   }
-  return import_react48.css`
+  return import_react50.css`
     column-gap: ${space[baseColumnGap]};
 
     ${media.sm} {
@@ -7971,11 +8115,11 @@ var generateColumnGapStyles = (columnGap) => {
 var generateColumnSpan = (span) => {
   const baseSpan = getResponsiveValue(span);
   if (typeof span === "string" || typeof span === "number") {
-    return import_react48.css`
+    return import_react50.css`
       grid-column: ${span === "auto" ? "auto" : `span ${span}`};
     `;
   }
-  return import_react48.css`
+  return import_react50.css`
     grid-column: ${baseSpan === "auto" ? "auto" : `span ${baseSpan}`};
 
     ${media.sm} {
@@ -7998,11 +8142,11 @@ var generateColumnSpan = (span) => {
 var generateAlignItems = (alignItems) => {
   const baseAlign = getResponsiveValue(alignItems);
   if (typeof alignItems === "string") {
-    return import_react48.css`
+    return import_react50.css`
       align-items: ${alignItems};
     `;
   }
-  return import_react48.css`
+  return import_react50.css`
     align-items: ${baseAlign};
 
     ${media.sm} {
@@ -8025,11 +8169,11 @@ var generateAlignItems = (alignItems) => {
 var generateJustifyItems = (justifyItems) => {
   const baseJustify = getResponsiveValue(justifyItems);
   if (typeof justifyItems === "string") {
-    return import_react48.css`
+    return import_react50.css`
       justify-items: ${justifyItems};
     `;
   }
-  return import_react48.css`
+  return import_react50.css`
     justify-items: ${baseJustify};
 
     ${media.sm} {
@@ -8064,19 +8208,19 @@ var Column = ({
 }) => {
   const columnStyles = [
     span && generateColumnSpan(span),
-    start && import_react49.css`
+    start && import_react51.css`
         grid-column-start: ${start};
       `,
-    end && import_react49.css`
+    end && import_react51.css`
         grid-column-end: ${end};
       `,
-    row && import_react49.css`
+    row && import_react51.css`
         grid-row: ${row};
       `,
-    rowSpan && import_react49.css`
+    rowSpan && import_react51.css`
         grid-row: span ${rowSpan};
       `,
-    area && import_react49.css`
+    area && import_react51.css`
         grid-area: ${area};
       `
   ].filter(Boolean);
@@ -8085,9 +8229,9 @@ var Column = ({
 var Column_default = Column;
 
 // src/Grid/Grid.tsx
-var import_react50 = require("@emotion/react");
+var import_react52 = require("@emotion/react");
 var import_jsx_runtime242 = require("@emotion/react/jsx-runtime");
-var baseGridStyles = import_react50.css`
+var baseGridStyles = import_react52.css`
   display: grid;
 `;
 var Grid = ({
@@ -8112,16 +8256,16 @@ var Grid = ({
     columnGap && generateColumnGapStyles(columnGap),
     alignItems && generateAlignItems(alignItems),
     justifyItems && generateJustifyItems(justifyItems),
-    autoRows && import_react50.css`
+    autoRows && import_react52.css`
         grid-auto-rows: ${autoRows};
       `,
-    autoColumns && import_react50.css`
+    autoColumns && import_react52.css`
         grid-auto-columns: ${autoColumns};
       `,
-    templateAreas && import_react50.css`
+    templateAreas && import_react52.css`
         grid-template-areas: ${typeof templateAreas === "string" ? templateAreas : templateAreas._};
       `,
-    justifyContent && import_react50.css`
+    justifyContent && import_react52.css`
         justify-content: ${typeof justifyContent === "string" ? justifyContent : justifyContent._};
       `
   ].filter(Boolean);
@@ -8130,9 +8274,9 @@ var Grid = ({
 var Grid_default = Grid;
 
 // src/Grid/GridContainer.tsx
-var import_react51 = require("@emotion/react");
+var import_react53 = require("@emotion/react");
 var import_jsx_runtime243 = require("@emotion/react/jsx-runtime");
-var baseContainerStyles = import_react51.css`
+var baseContainerStyles = import_react53.css`
   width: 100%;
   margin: 0 auto;
   padding-left: 1rem;
@@ -8140,14 +8284,14 @@ var baseContainerStyles = import_react51.css`
 `;
 var generateMaxWidthStyles = (maxWidth) => {
   if (maxWidth === "full") {
-    return import_react51.css`
+    return import_react53.css`
       max-width: 100%;
       padding-left: 0;
       padding-right: 0;
     `;
   }
   const width2 = LayoutTokens.containers[maxWidth] || maxWidth;
-  return import_react51.css`
+  return import_react53.css`
     max-width: ${width2};
 
     ${media.sm} {
@@ -8181,8 +8325,8 @@ var GridContainer = ({
 var GridContainer_default = GridContainer;
 
 // src/HuntCard/HuntCard.styles.ts
-var import_react52 = require("@emotion/react");
-var cardContainerStyles2 = import_react52.css`
+var import_react54 = require("@emotion/react");
+var cardContainerStyles2 = import_react54.css`
   position: relative;
   height: 335px;
 
@@ -8190,12 +8334,12 @@ var cardContainerStyles2 = import_react52.css`
     height: 480px;
   }
 `;
-var cardContentStyles2 = import_react52.css`
+var cardContentStyles2 = import_react54.css`
   position: relative;
   border-radius: var(--spacing-4);
   overflow: hidden;
 `;
-var getBackgroundWithGradient2 = (imageUrl) => import_react52.css`
+var getBackgroundWithGradient2 = (imageUrl) => import_react54.css`
   background-image: linear-gradient(
       180deg,
       rgba(0, 0, 0, 0) 48.36%,
@@ -8245,15 +8389,15 @@ var HuntCard = ({
 var HuntCard_default = HuntCard;
 
 // src/ImageGalleryModal/ImageGalleryModal.tsx
-var import_react56 = require("react");
+var import_react58 = require("react");
 
 // src/Modal/Modal.tsx
-var import_react54 = require("react");
+var import_react56 = require("react");
 var import_react_dom4 = __toESM(require("react-dom"));
 
 // src/Modal/Modal.styles.ts
-var import_react53 = require("@emotion/react");
-var fadeIn2 = import_react53.keyframes`
+var import_react55 = require("@emotion/react");
+var fadeIn2 = import_react55.keyframes`
   from {
     opacity: 0;
   }
@@ -8261,7 +8405,7 @@ var fadeIn2 = import_react53.keyframes`
     opacity: 1;
   }
 `;
-var fadeInScale2 = import_react53.keyframes`
+var fadeInScale2 = import_react55.keyframes`
   from {
     opacity: 0;
     transform: scale(0.95);
@@ -8271,7 +8415,7 @@ var fadeInScale2 = import_react53.keyframes`
     transform: scale(1);
   }
 `;
-var scrollLayerStyles = import_react53.css`
+var scrollLayerStyles = import_react55.css`
   background-color: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(4px);
   animation: ${fadeIn2} 0.15s ease-out forwards;
@@ -8280,7 +8424,7 @@ var scrollLayerStyles = import_react53.css`
     animation: none;
   }
 `;
-var containerStyles3 = import_react53.css`
+var containerStyles3 = import_react55.css`
   background-color: var(--surface-primary, #ffffff);
   border-radius: var(--radius-lg, 12px);
   max-height: calc(100dvh - var(--spacing-8));
@@ -8292,17 +8436,17 @@ var containerStyles3 = import_react53.css`
   }
 `;
 var sizeStyles3 = {
-  sm: import_react53.css`
+  sm: import_react55.css`
     width: 100%;
     max-width: 24rem; /* 384px */
     padding: var(--spacing-5);
   `,
-  md: import_react53.css`
+  md: import_react55.css`
     width: 100%;
     max-width: 32rem; /* 512px */
     padding: var(--spacing-6);
   `,
-  lg: import_react53.css`
+  lg: import_react55.css`
     width: 100%;
     max-width: 48rem; /* 768px */
     padding: var(--spacing-6);
@@ -8311,7 +8455,7 @@ var sizeStyles3 = {
       padding: var(--spacing-8);
     }
   `,
-  xl: import_react53.css`
+  xl: import_react55.css`
     width: 100%;
     max-width: 64rem; /* 1024px */
     padding: var(--spacing-6);
@@ -8320,7 +8464,7 @@ var sizeStyles3 = {
       padding: var(--spacing-8);
     }
   `,
-  full: import_react53.css`
+  full: import_react55.css`
     width: calc(100vw - var(--spacing-8));
     height: calc(100dvh - var(--spacing-8));
     max-width: none;
@@ -8329,13 +8473,13 @@ var sizeStyles3 = {
     border-radius: var(--radius-md, 8px);
   `
 };
-var closeButtonStyles2 = import_react53.css`
+var closeButtonStyles2 = import_react55.css`
   position: absolute;
   top: var(--spacing-4);
   right: var(--spacing-4);
   z-index: 1;
 `;
-var closeButtonFullStyles = import_react53.css`
+var closeButtonFullStyles = import_react55.css`
   top: var(--spacing-3);
   right: var(--spacing-3);
   background-color: rgba(255, 255, 255, 0.9);
@@ -8367,10 +8511,10 @@ var Modal = ({
   ariaLabel,
   ariaDescribedBy
 }) => {
-  const containerRef = (0, import_react54.useRef)(null);
-  const previousScrollY = (0, import_react54.useRef)(0);
-  const previousActiveElement = (0, import_react54.useRef)(null);
-  const handleKeyDown = (0, import_react54.useCallback)(
+  const containerRef = (0, import_react56.useRef)(null);
+  const previousScrollY = (0, import_react56.useRef)(0);
+  const previousActiveElement = (0, import_react56.useRef)(null);
+  const handleKeyDown = (0, import_react56.useCallback)(
     (event) => {
       if (closeOnEscape && event.key === "Escape" && onClose) {
         onClose(event);
@@ -8378,7 +8522,7 @@ var Modal = ({
     },
     [closeOnEscape, onClose]
   );
-  (0, import_react54.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     if (isOpen) {
       previousScrollY.current = window.scrollY;
       previousActiveElement.current = document.activeElement;
@@ -8408,7 +8552,7 @@ var Modal = ({
       document.body.style.top = "";
     };
   }, [isOpen, handleKeyDown]);
-  const handleClose = (0, import_react54.useCallback)(
+  const handleClose = (0, import_react56.useCallback)(
     (event) => {
       if (onClose) {
         onClose(event);
@@ -8416,7 +8560,7 @@ var Modal = ({
     },
     [onClose]
   );
-  const handleBackdropClick = (0, import_react54.useCallback)(
+  const handleBackdropClick = (0, import_react56.useCallback)(
     (event) => {
       if (!closeOnOutsideClick || !containerRef.current || containerRef.current.contains(event.target)) {
         return;
@@ -8524,11 +8668,11 @@ Modal.displayName = "Modal";
 var Modal_default = Modal;
 
 // src/ImageGalleryModal/ImageGalleryModal.styles.ts
-var import_react55 = require("@emotion/react");
-var galleryBackgroundStyles = import_react55.css`
+var import_react57 = require("@emotion/react");
+var galleryBackgroundStyles = import_react57.css`
   background-color: var(--color-base-black, #000000);
 `;
-var imageStyles2 = import_react55.css`
+var imageStyles2 = import_react57.css`
   max-width: 100%;
   max-height: 100%;
   width: auto;
@@ -8540,14 +8684,14 @@ var imageStyles2 = import_react55.css`
     max-height: calc(100vh - var(--spacing-32));
   }
 `;
-var counterStyles = import_react55.css`
+var counterStyles = import_react57.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_react55.css`
+var captionStyles = import_react57.css`
   transform: translateX(-50%);
   color: var(--color-base-white, #ffffff);
   text-align: center;
@@ -8556,7 +8700,7 @@ var captionStyles = import_react55.css`
   border-radius: var(--radius-md, 8px);
   max-width: 80%;
 `;
-var navigationButtonStyles = import_react55.css`
+var navigationButtonStyles = import_react57.css`
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -8587,18 +8731,18 @@ var navigationButtonStyles = import_react55.css`
     outline-offset: 2px;
   }
 `;
-var prevButtonStyles = import_react55.css`
+var prevButtonStyles = import_react57.css`
   ${navigationButtonStyles}
   left: var(--spacing-4);
 `;
-var nextButtonStyles = import_react55.css`
+var nextButtonStyles = import_react57.css`
   ${navigationButtonStyles}
   right: var(--spacing-4);
 `;
-var dotsContainerPositionStyles = import_react55.css`
+var dotsContainerPositionStyles = import_react57.css`
   transform: translateX(-50%);
 `;
-var dotStyles = import_react55.css`
+var dotStyles = import_react57.css`
   width: var(--spacing-2);
   height: var(--spacing-2);
   border-radius: var(--radius-round, 50%);
@@ -8613,11 +8757,11 @@ var dotStyles = import_react55.css`
     transform: scale(1.2);
   }
 `;
-var dotActiveStyles = import_react55.css`
+var dotActiveStyles = import_react57.css`
   background-color: var(--color-base-white, #ffffff);
   transform: scale(1.2);
 `;
-var closeButtonOverrideStyles = import_react55.css`
+var closeButtonOverrideStyles = import_react57.css`
   top: var(--spacing-4);
   right: var(--spacing-4);
   z-index: 20;
@@ -8629,17 +8773,17 @@ var closeButtonOverrideStyles = import_react55.css`
     background-color: var(--color-base-white, #ffffff);
   }
 `;
-var scrollLayerOverrideStyles = import_react55.css`
+var scrollLayerOverrideStyles = import_react57.css`
   padding: 0;
   background-color: rgba(0, 0, 0, 0.95);
 `;
-var containerOverrideStyles = import_react55.css`
+var containerOverrideStyles = import_react57.css`
   background-color: transparent;
   box-shadow: none;
   border-radius: 0;
   max-height: 100dvh;
 `;
-var contentOverrideStyles = import_react55.css`
+var contentOverrideStyles = import_react57.css`
   height: 100%;
   padding: 0;
 `;
@@ -8658,30 +8802,30 @@ var ImageGalleryModal = ({
   className,
   ariaLabel = "Image gallery"
 }) => {
-  const [currentIndex, setCurrentIndex] = (0, import_react56.useState)(initialIndex);
-  (0, import_react56.useEffect)(() => {
+  const [currentIndex, setCurrentIndex] = (0, import_react58.useState)(initialIndex);
+  (0, import_react58.useEffect)(() => {
     if (isOpen) {
       setCurrentIndex(initialIndex);
     }
   }, [isOpen, initialIndex]);
-  const handlePrev = (0, import_react56.useCallback)(
+  const handlePrev = (0, import_react58.useCallback)(
     (e) => {
       e == null ? void 0 : e.stopPropagation();
       setCurrentIndex((prev) => prev > 0 ? prev - 1 : images.length - 1);
     },
     [images.length]
   );
-  const handleNext = (0, import_react56.useCallback)(
+  const handleNext = (0, import_react58.useCallback)(
     (e) => {
       e == null ? void 0 : e.stopPropagation();
       setCurrentIndex((prev) => prev < images.length - 1 ? prev + 1 : 0);
     },
     [images.length]
   );
-  const handleGoTo = (0, import_react56.useCallback)((index) => {
+  const handleGoTo = (0, import_react58.useCallback)((index) => {
     setCurrentIndex(index);
   }, []);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (!isOpen)
       return;
     const handleKeyDown = (e) => {
@@ -8877,11 +9021,11 @@ var InfoBox = ({ heading, features, className }) => {
 var InfoBox_default = InfoBox;
 
 // src/LandownerProfile/LandownerProfile.tsx
-var import_react60 = require("react");
+var import_react62 = require("react");
 
 // src/ProgressBar/ProgressBar.styles.ts
-var import_react57 = require("@emotion/react");
-var progressStyles = import_react57.css`
+var import_react59 = require("@emotion/react");
+var progressStyles = import_react59.css`
   transition: width 0.3s ease-in-out;
 `;
 
@@ -8925,11 +9069,11 @@ ProgressBar.displayName = "ProgressBar";
 var ProgressBar_default = ProgressBar;
 
 // src/Timer/Timer.tsx
-var import_react59 = require("react");
+var import_react61 = require("react");
 
 // src/Timer/Timer.styles.ts
-var import_react58 = require("@emotion/react");
-var rootStyles2 = import_react58.css`
+var import_react60 = require("@emotion/react");
+var rootStyles2 = import_react60.css`
   display: inline-flex;
   font-variant-numeric: tabular-nums;
 `;
@@ -8963,10 +9107,10 @@ var Timer = ({
   fontWeight = "bold",
   showSeconds = false
 }) => {
-  const [timeLeft, setTimeLeft] = (0, import_react59.useState)(
+  const [timeLeft, setTimeLeft] = (0, import_react61.useState)(
     () => calculateTimeLeft(expirationTimestamp)
   );
-  const updateTime = (0, import_react59.useCallback)(() => {
+  const updateTime = (0, import_react61.useCallback)(() => {
     const newTimeLeft = calculateTimeLeft(expirationTimestamp);
     setTimeLeft(newTimeLeft);
     if (newTimeLeft) {
@@ -8976,7 +9120,7 @@ var Timer = ({
     }
     return newTimeLeft;
   }, [expirationTimestamp, onTimeUpdate, onExpire]);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     const initialTime = updateTime();
     if (!initialTime)
       return;
@@ -9223,7 +9367,7 @@ var LandownerProfile = ({
     const progressPercentage = (totalDuration - timeLeft.totalSeconds) / totalDuration * 100;
     return Math.min(100, Math.max(0, progressPercentage));
   };
-  const [progress, setProgress] = (0, import_react60.useState)(0);
+  const [progress, setProgress] = (0, import_react62.useState)(0);
   const handleTimeUpdate = (timeLeft) => {
     setProgress(calculateProgress(timeLeft));
     onEarlyAccessTimeUpdate == null ? void 0 : onEarlyAccessTimeUpdate(timeLeft);
@@ -9333,11 +9477,11 @@ var LandownerProfile = ({
 var LandownerProfile_default = LandownerProfile;
 
 // src/ListingChat/ListingChat.tsx
-var import_react62 = require("react");
+var import_react64 = require("react");
 
 // src/ListingChat/ListingChat.styles.ts
-var import_react61 = require("@emotion/react");
-var containerStyles4 = import_react61.css`
+var import_react63 = require("@emotion/react");
+var containerStyles4 = import_react63.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-4);
@@ -9345,12 +9489,12 @@ var containerStyles4 = import_react61.css`
   border-radius: var(--radius-lg);
   background: var(--surface-success);
 `;
-var headerStyles = import_react61.css`
+var headerStyles = import_react63.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-2);
 `;
-var chipsContainerStyles = import_react61.css`
+var chipsContainerStyles = import_react63.css`
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-4);
@@ -9363,10 +9507,10 @@ var chipsContainerStyles = import_react61.css`
     cursor: pointer;
   }
 `;
-var textAreaStyles = import_react61.css`
+var textAreaStyles = import_react63.css`
   min-height: 62px;
 `;
-var inputWrapperStyles2 = import_react61.css`
+var inputWrapperStyles2 = import_react63.css`
   position: relative;
 `;
 
@@ -9381,15 +9525,15 @@ var ListingChat = ({
   disabled = false,
   ...rest
 }) => {
-  const [value, setValue] = (0, import_react62.useState)("");
-  const handleSubmit = (0, import_react62.useCallback)(() => {
+  const [value, setValue] = (0, import_react64.useState)("");
+  const handleSubmit = (0, import_react64.useCallback)(() => {
     const trimmed = value.trim();
     if (!trimmed)
       return;
     onSubmit(trimmed);
     setValue("");
   }, [onSubmit, value]);
-  const handleTagClick = (0, import_react62.useCallback)(
+  const handleTagClick = (0, import_react64.useCallback)(
     (tag) => () => {
       const trimmed = tag.trim();
       if (!trimmed)
@@ -9441,7 +9585,7 @@ var ListingChat = ({
 var ListingChat_default = ListingChat;
 
 // src/Logo/Logo.tsx
-var import_react63 = require("@emotion/react");
+var import_react65 = require("@emotion/react");
 
 // src/Logo/components/LandtrustPlusDark.tsx
 var import_jsx_runtime255 = require("@emotion/react/jsx-runtime");
@@ -9663,7 +9807,7 @@ var LandtrustStandardLight_default = SvgLandtrustStandardLight;
 
 // src/Logo/Logo.tsx
 var import_jsx_runtime259 = require("@emotion/react/jsx-runtime");
-var logoStyles = (size) => import_react63.css`
+var logoStyles = (size) => import_react65.css`
   width: ${space[size]};
   height: auto;
   display: block;
@@ -9696,13 +9840,13 @@ var Logo = ({
 var Logo_default = Logo;
 
 // src/Navigation/Navigation.styles.ts
-var import_react64 = require("@emotion/react");
-var navigationStyles = import_react64.css`
+var import_react66 = require("@emotion/react");
+var navigationStyles = import_react66.css`
   width: 100%;
   background-color: white;
   border-bottom: 1px solid #e5e5e5;
 `;
-var hamburgerButtonStyles = import_react64.css`
+var hamburgerButtonStyles = import_react66.css`
   cursor: pointer;
   &:focus {
     outline: 2px solid #4f46e5;
@@ -9713,7 +9857,7 @@ var hamburgerButtonStyles = import_react64.css`
     display: none;
   }
 `;
-var centeredLogoStyles = import_react64.css`
+var centeredLogoStyles = import_react66.css`
   transform: translate(-50%, -50%);
   max-width: 150px;
 
@@ -9721,27 +9865,27 @@ var centeredLogoStyles = import_react64.css`
     display: none;
   }
 `;
-var desktopLogoStyles = import_react64.css`
+var desktopLogoStyles = import_react66.css`
   display: none;
 
   @media (min-width: 768px) {
     display: block;
   }
 `;
-var containerStyles5 = import_react64.css`
+var containerStyles5 = import_react66.css`
   @media (min-width: 768px) {
     justify-content: space-between;
     position: static;
   }
 `;
-var logoStyles2 = import_react64.css`
+var logoStyles2 = import_react66.css`
   width: 100%;
 
   @media (min-width: 768px) {
     width: initial;
   }
 `;
-var desktopNavStyles = import_react64.css`
+var desktopNavStyles = import_react66.css`
   display: none;
 
   @media (min-width: 768px) {
@@ -9750,7 +9894,7 @@ var desktopNavStyles = import_react64.css`
     gap: 32px;
   }
 `;
-var navLinksStyles = import_react64.css`
+var navLinksStyles = import_react66.css`
   display: flex;
   align-items: center;
   gap: 24px;
@@ -9758,7 +9902,7 @@ var navLinksStyles = import_react64.css`
   margin: 0;
   padding: 0;
 `;
-var navLinkStyles = import_react64.css`
+var navLinkStyles = import_react66.css`
   text-decoration: none;
   color: #374151;
   font-weight: 500;
@@ -9774,7 +9918,7 @@ var navLinkStyles = import_react64.css`
     outline-offset: 2px;
   }
 `;
-var avatarPlaceholderStyles = import_react64.css`
+var avatarPlaceholderStyles = import_react66.css`
   width: 32px;
   height: 32px;
   border-radius: 50%;
@@ -9879,21 +10023,21 @@ var Navigation_default = Navigation;
 var import_react_loading_skeleton2 = __toESM(require("react-loading-skeleton"));
 
 // src/ScrollingCarousel/components/ScrollingCarouselStep.tsx
-var import_react67 = require("react");
+var import_react69 = require("react");
 var import_react_intersection_observer = require("react-intersection-observer");
 
 // src/ScrollingCarousel/context/CarouselContext.tsx
-var import_react65 = __toESM(require("react"));
-var CarouselContext = import_react65.default.createContext(
+var import_react67 = __toESM(require("react"));
+var CarouselContext = import_react67.default.createContext(
   null
 );
 
 // src/ScrollingCarousel/ScrollingCarousel.styles.ts
-var import_react66 = require("@emotion/react");
-var carouselRoot = import_react66.css`
+var import_react68 = require("@emotion/react");
+var carouselRoot = import_react68.css`
   position: relative;
 `;
-var carousel = (gap2) => import_react66.css`
+var carousel = (gap2) => import_react68.css`
   display: flex;
   overflow-y: hidden;
   overflow-x: scroll;
@@ -9906,7 +10050,7 @@ var carousel = (gap2) => import_react66.css`
     display: none;
   }
 `;
-var step = (itemWidth) => import_react66.css`
+var step = (itemWidth) => import_react68.css`
   scroll-snap-align: center;
   flex-basis: ${itemWidth || "100%"};
   flex-shrink: 0;
@@ -9916,7 +10060,7 @@ var step = (itemWidth) => import_react66.css`
     flex-basis: ${itemWidth || "100%"};
   }
 `;
-var controls = (position2) => import_react66.css`
+var controls = (position2) => import_react68.css`
   ${(position2 === "left-right" || position2 === "top-right") && `
     display: none;
 
@@ -9925,7 +10069,7 @@ var controls = (position2) => import_react66.css`
     }
   `}
 `;
-var iconWrapper = import_react66.css`
+var iconWrapper = import_react68.css`
   display: flex;
   width: var(--spacing-7);
   height: var(--spacing-7);
@@ -9935,7 +10079,7 @@ var iconWrapper = import_react66.css`
   justify-content: center;
   box-shadow: var(--shadow-md);
 `;
-var button = (position2) => import_react66.css`
+var button = (position2) => import_react68.css`
   background: transparent;
   border-color: transparent;
   outline: none;
@@ -9967,7 +10111,7 @@ var button = (position2) => import_react66.css`
     bottom: calc(-1 * var(--spacing-1));
   `}
 `;
-var buttonLeft = (position2) => import_react66.css`
+var buttonLeft = (position2) => import_react68.css`
   ${button(position2)}
 
   ${position2 === "left-right" && `
@@ -9987,7 +10131,7 @@ var buttonLeft = (position2) => import_react66.css`
     left: calc(50% - var(--spacing-16));
   `}
 `;
-var customButtonLeft = (position2) => import_react66.css`
+var customButtonLeft = (position2) => import_react68.css`
   ${button(position2)}
 
   ${position2 === "left-right" && `
@@ -10007,7 +10151,7 @@ var customButtonLeft = (position2) => import_react66.css`
     left: calc(50% - var(--spacing-16));
   `}
 `;
-var buttonRight = (position2) => import_react66.css`
+var buttonRight = (position2) => import_react68.css`
   ${button(position2)}
 
   ${position2 === "left-right" && `
@@ -10027,12 +10171,12 @@ var buttonRight = (position2) => import_react66.css`
     right: calc(50% - var(--spacing-16));
   `}
 `;
-var icon = import_react66.css`
+var icon = import_react68.css`
   width: var(--spacing-3);
   height: var(--spacing-3);
   color: var(--color-base-black);
 `;
-var dots = import_react66.css`
+var dots = import_react68.css`
   position: absolute;
   bottom: var(--spacing-2);
   left: 0;
@@ -10042,11 +10186,11 @@ var dots = import_react66.css`
   align-items: center;
   justify-content: center;
 `;
-var dotsInner = import_react66.css`
+var dotsInner = import_react68.css`
   display: flex;
   overflow: hidden;
 `;
-var dot = (dotsColor) => import_react66.css`
+var dot = (dotsColor) => import_react68.css`
   position: relative;
   flex-shrink: 0;
   flex-grow: 0;
@@ -10085,22 +10229,22 @@ var dot = (dotsColor) => import_react66.css`
     `}
   }
 `;
-var dotDistance2 = import_react66.css`
+var dotDistance2 = import_react68.css`
   &::after {
     transform: translate(-50%, -50%) scale(0.9);
   }
 `;
-var dotDistance3 = import_react66.css`
+var dotDistance3 = import_react68.css`
   &::after {
     transform: translate(-50%, -50%) scale(0.8);
   }
 `;
-var dotDistanceGreaterThan3 = import_react66.css`
+var dotDistanceGreaterThan3 = import_react68.css`
   &::after {
     transform: translate(-50%, -50%) scale(0.7);
   }
 `;
-var dotVisible = import_react66.css`
+var dotVisible = import_react68.css`
   &::after {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1.2);
@@ -10117,7 +10261,7 @@ var ScrollingCarouselStep = ({
   onClick,
   itemWidth
 }) => {
-  const context = (0, import_react67.useContext)(CarouselContext);
+  const context = (0, import_react69.useContext)(CarouselContext);
   if (!context) {
     throw new Error(
       "ScrollingCarouselStep must be used within ScrollingCarousel"
@@ -10128,7 +10272,7 @@ var ScrollingCarouselStep = ({
     threshold: 0.75,
     root: carousel2.current
   });
-  (0, import_react67.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     if (typeof index !== "undefined") {
       dispatch({
         type: "set_child_visibility",
@@ -10154,10 +10298,10 @@ var ScrollingCarouselStep = ({
 ScrollingCarouselStep.displayName = "ScrollingCarouselStep";
 
 // src/ScrollingCarousel/ScrollingCarousel.tsx
-var import_react71 = __toESM(require("react"));
+var import_react73 = __toESM(require("react"));
 
 // src/ScrollingCarousel/hooks/useCarouselDots.ts
-var import_react68 = require("react");
+var import_react70 = require("react");
 
 // src/ScrollingCarousel/ScrollingCarousel.helpers.ts
 var childVisibilityReducer = (state, action) => {
@@ -10188,7 +10332,7 @@ var useCarouselDots = ({
   anyItemsVisible,
   numberOfDots
 }) => {
-  const dotOffset = (0, import_react68.useRef)(0);
+  const dotOffset = (0, import_react70.useRef)(0);
   const dotWidth = 12;
   const totalDots = childVisibility.length;
   const dotToCenterIndex = Math.round(
@@ -10220,7 +10364,7 @@ var useCarouselDots = ({
 };
 
 // src/ScrollingCarousel/hooks/useCarouselNavigation.ts
-var import_react69 = require("react");
+var import_react71 = require("react");
 
 // src/shared/helpers.ts
 var import_seamless_scroll_polyfill = require("seamless-scroll-polyfill");
@@ -10254,7 +10398,7 @@ var useCarouselNavigation = ({
   infiniteScroll,
   childVisibilityLength
 }) => {
-  const getStepEl = (0, import_react69.useCallback)(
+  const getStepEl = (0, import_react71.useCallback)(
     (index) => {
       if (carousel2.current) {
         const selector = `[data-carousel-id="${id}"][data-carousel-index="${index}"]`;
@@ -10264,7 +10408,7 @@ var useCarouselNavigation = ({
     },
     [carousel2, id]
   );
-  const next = (0, import_react69.useCallback)(
+  const next = (0, import_react71.useCallback)(
     (e) => {
       e.preventDefault();
       if (lastItemIsVisible && !infiniteScroll)
@@ -10292,7 +10436,7 @@ var useCarouselNavigation = ({
       carousel2
     ]
   );
-  const back = (0, import_react69.useCallback)(
+  const back = (0, import_react71.useCallback)(
     (e) => {
       e.preventDefault();
       if (firstItemIsVisible && !infiniteScroll)
@@ -10320,7 +10464,7 @@ var useCarouselNavigation = ({
       carousel2
     ]
   );
-  const goTo = (0, import_react69.useCallback)(
+  const goTo = (0, import_react71.useCallback)(
     (e, i) => {
       e.preventDefault();
       const el = getStepEl(i);
@@ -10338,12 +10482,12 @@ var useCarouselNavigation = ({
 };
 
 // src/ScrollingCarousel/hooks/useCarouselVisibility.ts
-var import_react70 = require("react");
+var import_react72 = require("react");
 var useCarouselVisibility = (carousel2) => {
-  const [state, dispatch] = (0, import_react70.useReducer)(childVisibilityReducer, {
+  const [state, dispatch] = (0, import_react72.useReducer)(childVisibilityReducer, {
     childVisibility: []
   });
-  const carouselContextApi = (0, import_react70.useMemo)(
+  const carouselContextApi = (0, import_react72.useMemo)(
     () => ({ carousel: carousel2, dispatch }),
     [carousel2]
   );
@@ -10383,8 +10527,8 @@ var ScrollingCarousel = ({
   itemWidth,
   gap: gap2
 }) => {
-  const carousel2 = (0, import_react71.useRef)(null);
-  const [isHovering, setIsHovering] = (0, import_react71.useState)(false);
+  const carousel2 = (0, import_react73.useRef)(null);
+  const [isHovering, setIsHovering] = (0, import_react73.useState)(false);
   const {
     state,
     carouselContextApi,
@@ -10404,7 +10548,7 @@ var ScrollingCarousel = ({
     infiniteScroll,
     childVisibilityLength: state.childVisibility.length
   });
-  (0, import_react71.useEffect)(() => {
+  (0, import_react73.useEffect)(() => {
     if (carousel2.current && typeof current === "number" && current >= 0) {
       const childrenArray = Array.from(carousel2.current.children);
       const selectedItem = childrenArray[current];
@@ -10419,9 +10563,9 @@ var ScrollingCarousel = ({
       }
     }
   }, [current]);
-  const childrenWithIndex = import_react71.default.Children.map(
+  const childrenWithIndex = import_react73.default.Children.map(
     children,
-    (child, index) => import_react71.default.cloneElement(child, { index, itemWidth })
+    (child, index) => import_react73.default.cloneElement(child, { index, itemWidth })
   );
   const { dotOffset, dotDistances, dotWidth } = useCarouselDots({
     childVisibility: state.childVisibility,
@@ -10523,8 +10667,8 @@ var ScrollingCarousel = ({
 ScrollingCarousel.displayName = "ScrollingCarousel";
 
 // src/PackageCard/PackageCard.styles.ts
-var import_react72 = require("@emotion/react");
-var cardContainerStyles3 = (orientation, hasContentBackground, hasClickHandler) => import_react72.css`
+var import_react74 = require("@emotion/react");
+var cardContainerStyles3 = (orientation, hasContentBackground, hasClickHandler) => import_react74.css`
   ${hasClickHandler && `
     cursor: pointer;
   `}
@@ -10542,7 +10686,7 @@ var cardContainerStyles3 = (orientation, hasContentBackground, hasClickHandler)
   flex-direction: column;
   gap: var(--spacing-2);
 
-  ${orientation === "horizontal" && import_react72.css`
+  ${orientation === "horizontal" && import_react74.css`
     /* Apply horizontal layout only on tablet and up */
     ${media.md} {
       flex-direction: row;
@@ -10570,58 +10714,58 @@ var cardContainerStyles3 = (orientation, hasContentBackground, hasClickHandler)
     }
   `}
 `;
-var imageContainerStyles = (orientation) => import_react72.css`
+var imageContainerStyles = (orientation) => import_react74.css`
   width: 100%;
   height: 260px;
 
-  ${orientation === "horizontal" && import_react72.css`
+  ${orientation === "horizontal" && import_react74.css`
     ${media.md} {
       width: 40%;
       height: 200px;
   `}
 `;
-var imageBoxStyles = (orientation) => import_react72.css`
+var imageBoxStyles = (orientation) => import_react74.css`
   height: 260px;
-  ${orientation === "horizontal" && import_react72.css`
+  ${orientation === "horizontal" && import_react74.css`
     ${media.md} {
       height: 200px;
     }
   `}
 `;
-var contentContainerStyles = (orientation, hasContentBackground) => import_react72.css`
+var contentContainerStyles = (orientation, hasContentBackground) => import_react74.css`
   ${hasContentBackground ? contentWithBackgroundStyles : contentWithoutBackgroundStyles}
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
 
-  ${orientation === "horizontal" && import_react72.css`
+  ${orientation === "horizontal" && import_react74.css`
     ${media.md} {
       width: 60%;
       justify-content: center;
     }
   `}
 `;
-var imageStyles3 = import_react72.css`
+var imageStyles3 = import_react74.css`
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   position: relative;
   background-color: lightgray;
 `;
-var badgeTopLeftStyles = import_react72.css`
+var badgeTopLeftStyles = import_react74.css`
   position: absolute;
   top: var(--spacing-3);
   left: var(--spacing-3);
   z-index: 2;
 `;
-var badgeBottomRightStyles = import_react72.css`
+var badgeBottomRightStyles = import_react74.css`
   position: absolute;
   bottom: var(--spacing-3);
   right: var(--spacing-3);
   z-index: 2;
 `;
-var heartIconStyles = import_react72.css`
+var heartIconStyles = import_react74.css`
   position: absolute;
   top: var(--spacing-3);
   right: var(--spacing-3);
@@ -10643,20 +10787,20 @@ var heartIconStyles = import_react72.css`
     transform: scale(1.1);
   }
 `;
-var actionMenuStyles = import_react72.css`
+var actionMenuStyles = import_react74.css`
   position: absolute;
   top: var(--spacing-3);
   right: var(--spacing-3);
   z-index: 3;
 `;
-var contentWithBackgroundStyles = import_react72.css`
+var contentWithBackgroundStyles = import_react74.css`
   padding: 0 var(--spacing-3) var(--spacing-4) var(--spacing-3);
   background-color: var(--surface-page);
 `;
-var contentWithoutBackgroundStyles = import_react72.css`
+var contentWithoutBackgroundStyles = import_react74.css`
   padding-top: 0 var(--spacing-2) var(--spacing-2) var(--spacing-2);
 `;
-var overlayStyles = import_react72.css`
+var overlayStyles = import_react74.css`
   position: absolute;
   top: 0;
   left: 0;
@@ -10668,7 +10812,7 @@ var overlayStyles = import_react72.css`
   display: block;
   pointer-events: none;
 `;
-var titleStyles = import_react72.css`
+var titleStyles = import_react74.css`
   text-wrap: wrap;
   word-break: break-word;
   white-space: pre-wrap;
@@ -10899,8 +11043,8 @@ var PackageHeader = ({
 var PackageHeader_default = PackageHeader;
 
 // src/ReviewCard/components/ReviewImages.styles.ts
-var import_react73 = require("@emotion/react");
-var imageStyles4 = import_react73.css`
+var import_react75 = require("@emotion/react");
+var imageStyles4 = import_react75.css`
   flex: 1;
   min-width: 0;
   max-width: 100%;
@@ -11032,7 +11176,7 @@ var ReviewCard = ({
 var ReviewCard_default = ReviewCard;
 
 // src/Reviews/Reviews.tsx
-var import_react74 = require("@emotion/react");
+var import_react76 = require("@emotion/react");
 
 // src/Reviews/components/ReviewItem.tsx
 var import_jsx_runtime268 = require("@emotion/react/jsx-runtime");
@@ -11090,7 +11234,7 @@ var Reviews = ({
                 StarRating_default,
                 {
                   rating: averageRating,
-                  css: import_react74.css`
+                  css: import_react76.css`
             > svg {
               height: 40px;
               width: 40px;