@landtrustinc/design-system 1.2.23 → 1.2.26

package/dist/index.js

@@ -5030,12 +5030,10 @@ var avatarSizeStyles = {
 var avatarBaseStyles = import_react16.css`
   border-radius: 50%;
   object-fit: cover;
-  border: 1px solid var(--color-neutral-200);
   display: block;
 `;
 var avatarTextStyles = import_react16.css`
   border-radius: 50%;
-  border: 1px solid var(--color-neutral-200);
   background-color: var(--surface-action);
   color: white;
   display: flex;
@@ -5046,7 +5044,6 @@ var avatarTextStyles = import_react16.css`
 `;
 var avatarFallbackStyles = import_react16.css`
   border-radius: 50%;
-  border: 1px solid var(--color-neutral-200);
   background-color: var(--color-neutral-100);
   color: var(--color-neutral-500);
   display: flex;
@@ -6086,6 +6083,7 @@ var ChatWidget = ({
 var ChatWidget_default = ChatWidget;
 
 // src/FeatureList/components/FeatureListItem.tsx
+var import_react31 = require("@emotion/react");
 var import_react_loading_skeleton = __toESM(require("react-loading-skeleton"));
 var import_jsx_runtime226 = require("@emotion/react/jsx-runtime");
 var FeatureListItem = ({
@@ -6148,7 +6146,17 @@ var FeatureListItem = ({
         className,
         ...rest,
         children: [
-          iconVariant && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Icon_default, { variant: iconVariant, size: iconSize, fill: iconColor }),
+          iconVariant && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
+            Icon_default,
+            {
+              variant: iconVariant,
+              size: iconSize,
+              fill: iconColor,
+              css: import_react31.css`
+                  flex-shrink: 0;
+                `
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Text_default, { fontWeight: "semibold", size: labelSize, children: label })
         ]
       }
@@ -6181,8 +6189,8 @@ var FeatureList = ({ heading, items, className }) => {
 var FeatureList_default = FeatureList;
 
 // src/FieldNoteCard/FieldNoteCard.styles.ts
-var import_react31 = require("@emotion/react");
-var cardContainerStyles = import_react31.css`
+var import_react32 = require("@emotion/react");
+var cardContainerStyles = import_react32.css`
   position: relative;
   height: 335px;
 
@@ -6190,12 +6198,12 @@ var cardContainerStyles = import_react31.css`
     height: 480px;
   }
 `;
-var cardContentStyles = import_react31.css`
+var cardContentStyles = import_react32.css`
   position: relative;
   border-radius: var(--spacing-4);
   overflow: hidden;
 `;
-var getBackgroundWithGradient = (imageUrl) => import_react31.css`
+var getBackgroundWithGradient = (imageUrl) => import_react32.css`
   background-image: linear-gradient(
       180deg,
       rgba(0, 0, 0, 0) 48.36%,
@@ -6245,14 +6253,14 @@ var FieldNoteCard = ({
 var FieldNoteCard_default = FieldNoteCard;
 
 // src/Form/FormField.tsx
-var import_react32 = require("@emotion/react");
+var import_react33 = require("@emotion/react");
 var import_jsx_runtime229 = require("@emotion/react/jsx-runtime");
-var fieldContainerStyles = import_react32.css`
+var fieldContainerStyles = import_react33.css`
   display: flex;
   flex-direction: column;
   gap: ${space["2"]};
 `;
-var labelStyles2 = import_react32.css`
+var labelStyles2 = import_react33.css`
   font-family: ${fonts.base};
   font-size: ${fontSizes.sm};
   font-weight: ${fontWeights.medium};
@@ -6260,17 +6268,17 @@ var labelStyles2 = import_react32.css`
   color: ${colors.gray["900"]};
   margin-bottom: ${space["1"]};
 `;
-var requiredIndicatorStyles = import_react32.css`
+var requiredIndicatorStyles = import_react33.css`
   color: ${colors.red["500"]};
   margin-left: ${space["1"]};
 `;
-var helpTextStyles = import_react32.css`
+var helpTextStyles = import_react33.css`
   font-family: ${fonts.base};
   font-size: ${fontSizes.sm};
   line-height: ${lineHeights.tight};
   color: ${colors.gray["600"]};
 `;
-var errorTextStyles = import_react32.css`
+var errorTextStyles = import_react33.css`
   font-family: ${fonts.base};
   font-size: ${fontSizes.sm};
   line-height: ${lineHeights.tight};
@@ -6279,7 +6287,7 @@ var errorTextStyles = import_react32.css`
   align-items: center;
   gap: ${space["1"]};
 `;
-var successTextStyles = import_react32.css`
+var successTextStyles = import_react33.css`
   font-family: ${fonts.base};
   font-size: ${fontSizes.sm};
   line-height: ${lineHeights.tight};
@@ -6288,7 +6296,7 @@ var successTextStyles = import_react32.css`
   align-items: center;
   gap: ${space["1"]};
 `;
-var visuallyHiddenStyles = import_react32.css`
+var visuallyHiddenStyles = import_react33.css`
   position: absolute;
   width: 1px;
   height: 1px;
@@ -6353,10 +6361,10 @@ var FormField = ({
 };
 
 // src/Form/Input.tsx
-var import_react33 = require("@emotion/react");
-var import_react34 = require("react");
+var import_react34 = require("@emotion/react");
+var import_react35 = require("react");
 var import_jsx_runtime230 = require("@emotion/react/jsx-runtime");
-var inputStyles = import_react33.css`
+var inputStyles = import_react34.css`
   position: relative;
   width: 100%;
   font-family: ${fonts.base};
@@ -6393,19 +6401,19 @@ var inputStyles = import_react33.css`
   }
 `;
 var sizeStyles = {
-  sm: import_react33.css`
+  sm: import_react34.css`
     padding: ${space["2"]} ${space["3"]};
     font-size: ${fontSizes.sm};
     line-height: ${lineHeights.tight};
     height: ${space["8"]};
   `,
-  md: import_react33.css`
+  md: import_react34.css`
     padding: ${space["3"]} ${space["4"]};
     font-size: ${fontSizes.base};
     line-height: ${lineHeights.normal};
     height: ${space["10"]};
   `,
-  lg: import_react33.css`
+  lg: import_react34.css`
     padding: ${space["4"]} ${space["5"]};
     font-size: ${fontSizes.lg};
     line-height: ${lineHeights.normal};
@@ -6413,8 +6421,8 @@ var sizeStyles = {
   `
 };
 var variantStyles = {
-  default: import_react33.css``,
-  error: import_react33.css`
+  default: import_react34.css``,
+  error: import_react34.css`
     border-color: ${colors.red["500"]};
 
     &:focus {
@@ -6422,7 +6430,7 @@ var variantStyles = {
       box-shadow: 0 0 0 3px ${colors.red["100"]};
     }
   `,
-  success: import_react33.css`
+  success: import_react34.css`
     border-color: ${colors.accent.green};
 
     &:focus {
@@ -6431,7 +6439,7 @@ var variantStyles = {
     }
   `
 };
-var inputWithIconStyles = import_react33.css`
+var inputWithIconStyles = import_react34.css`
   padding-left: ${space["10"]};
 
   &.has-end-icon {
@@ -6442,7 +6450,7 @@ var inputWithIconStyles = import_react33.css`
     padding-left: ${space["10"]};
   }
 `;
-var iconContainerStyles = import_react33.css`
+var iconContainerStyles = import_react34.css`
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -6453,20 +6461,20 @@ var iconContainerStyles = import_react33.css`
   pointer-events: none;
   z-index: 1;
 `;
-var startIconStyles = import_react33.css`
+var startIconStyles = import_react34.css`
   ${iconContainerStyles}
   left: ${space["3"]};
 `;
-var endIconStyles = import_react33.css`
+var endIconStyles = import_react34.css`
   ${iconContainerStyles}
   right: ${space["3"]};
 `;
-var inputWrapperStyles = import_react33.css`
+var inputWrapperStyles = import_react34.css`
   position: relative;
   display: inline-block;
   width: 100%;
 `;
-var Input = (0, import_react34.forwardRef)(
+var Input = (0, import_react35.forwardRef)(
   ({
     size = "md",
     variant = "default",
@@ -6511,10 +6519,10 @@ var Input = (0, import_react34.forwardRef)(
 Input.displayName = "Input";
 
 // src/Form/Select.tsx
-var import_react35 = require("@emotion/react");
-var import_react36 = require("react");
+var import_react36 = require("@emotion/react");
+var import_react37 = require("react");
 var import_jsx_runtime231 = require("@emotion/react/jsx-runtime");
-var selectStyles = import_react35.css`
+var selectStyles = import_react36.css`
   position: relative;
   width: 100%;
   font-family: ${fonts.base};
@@ -6553,19 +6561,19 @@ var selectStyles = import_react35.css`
   }
 `;
 var sizeStyles2 = {
-  sm: import_react35.css`
+  sm: import_react36.css`
     padding: ${space["2"]} ${space["3"]};
     font-size: ${fontSizes.sm};
     line-height: ${lineHeights.tight};
     height: ${space["8"]};
   `,
-  md: import_react35.css`
+  md: import_react36.css`
     padding: ${space["3"]} ${space["4"]};
     font-size: ${fontSizes.base};
     line-height: ${lineHeights.normal};
     height: ${space["10"]};
   `,
-  lg: import_react35.css`
+  lg: import_react36.css`
     padding: ${space["4"]} ${space["5"]};
     font-size: ${fontSizes.lg};
     line-height: ${lineHeights.normal};
@@ -6573,8 +6581,8 @@ var sizeStyles2 = {
   `
 };
 var variantStyles2 = {
-  default: import_react35.css``,
-  error: import_react35.css`
+  default: import_react36.css``,
+  error: import_react36.css`
     border-color: ${colors.red["500"]};
 
     &:focus {
@@ -6582,7 +6590,7 @@ var variantStyles2 = {
       box-shadow: 0 0 0 3px ${colors.red["100"]};
     }
   `,
-  success: import_react35.css`
+  success: import_react36.css`
     border-color: ${colors.accent.green};
 
     &:focus {
@@ -6591,7 +6599,7 @@ var variantStyles2 = {
     }
   `
 };
-var optionStyles = import_react35.css`
+var optionStyles = import_react36.css`
   background-color: ${colors.light["100"]};
   color: ${colors.gray["900"]};
 
@@ -6600,7 +6608,7 @@ var optionStyles = import_react35.css`
     background-color: ${colors.gray["100"]};
   }
 `;
-var Select = (0, import_react36.forwardRef)(
+var Select = (0, import_react37.forwardRef)(
   ({
     size = "md",
     variant = "default",
@@ -6638,10 +6646,10 @@ var Select = (0, import_react36.forwardRef)(
 Select.displayName = "Select";
 
 // src/Grid/Column.tsx
-var import_react38 = require("@emotion/react");
+var import_react39 = require("@emotion/react");
 
 // src/Grid/utils.ts
-var import_react37 = require("@emotion/react");
+var import_react38 = require("@emotion/react");
 var LayoutTokens = {
   containers: {
     sm: screens.sm,
@@ -6681,11 +6689,11 @@ var getResponsiveValue = (value) => {
 var generateGridColumns = (columns) => {
   const baseColumns = getResponsiveValue(columns);
   if (typeof columns === "number") {
-    return import_react37.css`
+    return import_react38.css`
       grid-template-columns: repeat(${columns}, 1fr);
     `;
   }
-  return import_react37.css`
+  return import_react38.css`
     grid-template-columns: repeat(${baseColumns}, 1fr);
 
     ${media.sm} {
@@ -6717,11 +6725,11 @@ var generateGridColumns = (columns) => {
 var generateGapStyles = (gap2) => {
   const baseGap = getResponsiveValue(gap2);
   if (typeof gap2 === "string" || typeof gap2 === "number") {
-    return import_react37.css`
+    return import_react38.css`
       gap: ${space[gap2]};
     `;
   }
-  return import_react37.css`
+  return import_react38.css`
     gap: ${space[baseGap]};
 
     ${media.sm} {
@@ -6744,11 +6752,11 @@ var generateGapStyles = (gap2) => {
 var generateRowGapStyles = (rowGap) => {
   const baseRowGap = getResponsiveValue(rowGap);
   if (typeof rowGap === "string" || typeof rowGap === "number") {
-    return import_react37.css`
+    return import_react38.css`
       row-gap: ${space[rowGap]};
     `;
   }
-  return import_react37.css`
+  return import_react38.css`
     row-gap: ${space[baseRowGap]};
 
     ${media.sm} {
@@ -6771,11 +6779,11 @@ var generateRowGapStyles = (rowGap) => {
 var generateColumnGapStyles = (columnGap) => {
   const baseColumnGap = getResponsiveValue(columnGap);
   if (typeof columnGap === "string" || typeof columnGap === "number") {
-    return import_react37.css`
+    return import_react38.css`
       column-gap: ${space[columnGap]};
     `;
   }
-  return import_react37.css`
+  return import_react38.css`
     column-gap: ${space[baseColumnGap]};
 
     ${media.sm} {
@@ -6798,11 +6806,11 @@ var generateColumnGapStyles = (columnGap) => {
 var generateColumnSpan = (span) => {
   const baseSpan = getResponsiveValue(span);
   if (typeof span === "string" || typeof span === "number") {
-    return import_react37.css`
+    return import_react38.css`
       grid-column: ${span === "auto" ? "auto" : `span ${span}`};
     `;
   }
-  return import_react37.css`
+  return import_react38.css`
     grid-column: ${baseSpan === "auto" ? "auto" : `span ${baseSpan}`};
 
     ${media.sm} {
@@ -6825,11 +6833,11 @@ var generateColumnSpan = (span) => {
 var generateAlignItems = (alignItems) => {
   const baseAlign = getResponsiveValue(alignItems);
   if (typeof alignItems === "string") {
-    return import_react37.css`
+    return import_react38.css`
       align-items: ${alignItems};
     `;
   }
-  return import_react37.css`
+  return import_react38.css`
     align-items: ${baseAlign};
 
     ${media.sm} {
@@ -6852,11 +6860,11 @@ var generateAlignItems = (alignItems) => {
 var generateJustifyItems = (justifyItems) => {
   const baseJustify = getResponsiveValue(justifyItems);
   if (typeof justifyItems === "string") {
-    return import_react37.css`
+    return import_react38.css`
       justify-items: ${justifyItems};
     `;
   }
-  return import_react37.css`
+  return import_react38.css`
     justify-items: ${baseJustify};
 
     ${media.sm} {
@@ -6891,19 +6899,19 @@ var Column = ({
 }) => {
   const columnStyles = [
     span && generateColumnSpan(span),
-    start && import_react38.css`
+    start && import_react39.css`
         grid-column-start: ${start};
       `,
-    end && import_react38.css`
+    end && import_react39.css`
         grid-column-end: ${end};
       `,
-    row && import_react38.css`
+    row && import_react39.css`
         grid-row: ${row};
       `,
-    rowSpan && import_react38.css`
+    rowSpan && import_react39.css`
         grid-row: span ${rowSpan};
       `,
-    area && import_react38.css`
+    area && import_react39.css`
         grid-area: ${area};
       `
   ].filter(Boolean);
@@ -6912,9 +6920,9 @@ var Column = ({
 var Column_default = Column;
 
 // src/Grid/Grid.tsx
-var import_react39 = require("@emotion/react");
+var import_react40 = require("@emotion/react");
 var import_jsx_runtime233 = require("@emotion/react/jsx-runtime");
-var baseGridStyles = import_react39.css`
+var baseGridStyles = import_react40.css`
   display: grid;
 `;
 var Grid = ({
@@ -6939,16 +6947,16 @@ var Grid = ({
     columnGap && generateColumnGapStyles(columnGap),
     alignItems && generateAlignItems(alignItems),
     justifyItems && generateJustifyItems(justifyItems),
-    autoRows && import_react39.css`
+    autoRows && import_react40.css`
         grid-auto-rows: ${autoRows};
       `,
-    autoColumns && import_react39.css`
+    autoColumns && import_react40.css`
         grid-auto-columns: ${autoColumns};
       `,
-    templateAreas && import_react39.css`
+    templateAreas && import_react40.css`
         grid-template-areas: ${typeof templateAreas === "string" ? templateAreas : templateAreas._};
       `,
-    justifyContent && import_react39.css`
+    justifyContent && import_react40.css`
         justify-content: ${typeof justifyContent === "string" ? justifyContent : justifyContent._};
       `
   ].filter(Boolean);
@@ -6957,9 +6965,9 @@ var Grid = ({
 var Grid_default = Grid;
 
 // src/Grid/GridContainer.tsx
-var import_react40 = require("@emotion/react");
+var import_react41 = require("@emotion/react");
 var import_jsx_runtime234 = require("@emotion/react/jsx-runtime");
-var baseContainerStyles = import_react40.css`
+var baseContainerStyles = import_react41.css`
   width: 100%;
   margin: 0 auto;
   padding-left: 1rem;
@@ -6967,14 +6975,14 @@ var baseContainerStyles = import_react40.css`
 `;
 var generateMaxWidthStyles = (maxWidth) => {
   if (maxWidth === "full") {
-    return import_react40.css`
+    return import_react41.css`
       max-width: 100%;
       padding-left: 0;
       padding-right: 0;
     `;
   }
   const width2 = LayoutTokens.containers[maxWidth] || maxWidth;
-  return import_react40.css`
+  return import_react41.css`
     max-width: ${width2};
 
     ${media.sm} {
@@ -7008,8 +7016,8 @@ var GridContainer = ({
 var GridContainer_default = GridContainer;
 
 // src/HuntCard/HuntCard.styles.ts
-var import_react41 = require("@emotion/react");
-var cardContainerStyles2 = import_react41.css`
+var import_react42 = require("@emotion/react");
+var cardContainerStyles2 = import_react42.css`
   position: relative;
   height: 335px;
 
@@ -7017,12 +7025,12 @@ var cardContainerStyles2 = import_react41.css`
     height: 480px;
   }
 `;
-var cardContentStyles2 = import_react41.css`
+var cardContentStyles2 = import_react42.css`
   position: relative;
   border-radius: var(--spacing-4);
   overflow: hidden;
 `;
-var getBackgroundWithGradient2 = (imageUrl) => import_react41.css`
+var getBackgroundWithGradient2 = (imageUrl) => import_react42.css`
   background-image: linear-gradient(
       180deg,
       rgba(0, 0, 0, 0) 48.36%,
@@ -7335,11 +7343,11 @@ var LandownerProfile = ({
 var LandownerProfile_default = LandownerProfile;
 
 // src/ListingChat/ListingChat.tsx
-var import_react43 = require("react");
+var import_react44 = require("react");
 
 // src/ListingChat/ListingChat.styles.ts
-var import_react42 = require("@emotion/react");
-var containerStyles2 = import_react42.css`
+var import_react43 = require("@emotion/react");
+var containerStyles2 = import_react43.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-4);
@@ -7347,13 +7355,13 @@ var containerStyles2 = import_react42.css`
   border-radius: var(--radius-lg);
   background: var(--surface-success);
 `;
-var headerStyles = import_react42.css`
+var headerStyles = import_react43.css`
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--spacing-2);
 `;
-var chipsContainerStyles = import_react42.css`
+var chipsContainerStyles = import_react43.css`
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-4);
@@ -7366,10 +7374,10 @@ var chipsContainerStyles = import_react42.css`
     cursor: pointer;
   }
 `;
-var textAreaStyles = import_react42.css`
+var textAreaStyles = import_react43.css`
   min-height: 62px;
 `;
-var inputWrapperStyles2 = import_react42.css`
+var inputWrapperStyles2 = import_react43.css`
   position: relative;
 `;
 
@@ -7384,15 +7392,15 @@ var ListingChat = ({
   disabled = false,
   ...rest
 }) => {
-  const [value, setValue] = (0, import_react43.useState)("");
-  const handleSubmit = (0, import_react43.useCallback)(() => {
+  const [value, setValue] = (0, import_react44.useState)("");
+  const handleSubmit = (0, import_react44.useCallback)(() => {
     const trimmed = value.trim();
     if (!trimmed)
       return;
     onSubmit(trimmed);
     setValue("");
   }, [onSubmit, value]);
-  const handleTagClick = (0, import_react43.useCallback)(
+  const handleTagClick = (0, import_react44.useCallback)(
     (tag) => () => {
       const trimmed = tag.trim();
       if (!trimmed)
@@ -7444,7 +7452,7 @@ var ListingChat = ({
 var ListingChat_default = ListingChat;
 
 // src/Logo/Logo.tsx
-var import_react44 = require("@emotion/react");
+var import_react45 = require("@emotion/react");
 
 // src/Logo/components/LandtrustPlusDark.tsx
 var import_jsx_runtime242 = require("@emotion/react/jsx-runtime");
@@ -7666,7 +7674,7 @@ var LandtrustStandardLight_default = SvgLandtrustStandardLight;
 
 // src/Logo/Logo.tsx
 var import_jsx_runtime246 = require("@emotion/react/jsx-runtime");
-var logoStyles = (size) => import_react44.css`
+var logoStyles = (size) => import_react45.css`
   width: ${space[size]};
   height: auto;
   display: block;
@@ -7699,13 +7707,13 @@ var Logo = ({
 var Logo_default = Logo;
 
 // src/Navigation/Navigation.styles.ts
-var import_react45 = require("@emotion/react");
-var navigationStyles = import_react45.css`
+var import_react46 = require("@emotion/react");
+var navigationStyles = import_react46.css`
   width: 100%;
   background-color: white;
   border-bottom: 1px solid #e5e5e5;
 `;
-var hamburgerButtonStyles = import_react45.css`
+var hamburgerButtonStyles = import_react46.css`
   cursor: pointer;
   &:focus {
     outline: 2px solid #4f46e5;
@@ -7716,7 +7724,7 @@ var hamburgerButtonStyles = import_react45.css`
     display: none;
   }
 `;
-var centeredLogoStyles = import_react45.css`
+var centeredLogoStyles = import_react46.css`
   transform: translate(-50%, -50%);
   max-width: 150px;
 
@@ -7724,27 +7732,27 @@ var centeredLogoStyles = import_react45.css`
     display: none;
   }
 `;
-var desktopLogoStyles = import_react45.css`
+var desktopLogoStyles = import_react46.css`
   display: none;
 
   @media (min-width: 768px) {
     display: block;
   }
 `;
-var containerStyles3 = import_react45.css`
+var containerStyles3 = import_react46.css`
   @media (min-width: 768px) {
     justify-content: space-between;
     position: static;
   }
 `;
-var logoStyles2 = import_react45.css`
+var logoStyles2 = import_react46.css`
   width: 100%;
 
   @media (min-width: 768px) {
     width: initial;
   }
 `;
-var desktopNavStyles = import_react45.css`
+var desktopNavStyles = import_react46.css`
   display: none;
 
   @media (min-width: 768px) {
@@ -7753,7 +7761,7 @@ var desktopNavStyles = import_react45.css`
     gap: 32px;
   }
 `;
-var navLinksStyles = import_react45.css`
+var navLinksStyles = import_react46.css`
   display: flex;
   align-items: center;
   gap: 24px;
@@ -7761,7 +7769,7 @@ var navLinksStyles = import_react45.css`
   margin: 0;
   padding: 0;
 `;
-var navLinkStyles = import_react45.css`
+var navLinkStyles = import_react46.css`
   text-decoration: none;
   color: #374151;
   font-weight: 500;
@@ -7777,7 +7785,7 @@ var navLinkStyles = import_react45.css`
     outline-offset: 2px;
   }
 `;
-var avatarPlaceholderStyles = import_react45.css`
+var avatarPlaceholderStyles = import_react46.css`
   width: 32px;
   height: 32px;
   border-radius: 50%;
@@ -7879,21 +7887,21 @@ var Navigation = ({
 var Navigation_default = Navigation;
 
 // src/ScrollingCarousel/components/ScrollingCarouselStep.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_react_intersection_observer = require("react-intersection-observer");
 
 // src/ScrollingCarousel/context/CarouselContext.tsx
-var import_react46 = __toESM(require("react"));
-var CarouselContext = import_react46.default.createContext(
+var import_react47 = __toESM(require("react"));
+var CarouselContext = import_react47.default.createContext(
   null
 );
 
 // src/ScrollingCarousel/ScrollingCarousel.styles.ts
-var import_react47 = require("@emotion/react");
-var carouselRoot = import_react47.css`
+var import_react48 = require("@emotion/react");
+var carouselRoot = import_react48.css`
   position: relative;
 `;
-var carousel = import_react47.css`
+var carousel = import_react48.css`
   display: flex;
   overflow-y: hidden;
   overflow-x: scroll;
@@ -7905,7 +7913,7 @@ var carousel = import_react47.css`
     display: none;
   }
 `;
-var step = import_react47.css`
+var step = import_react48.css`
   scroll-snap-align: center;
   flex-basis: 100%;
   flex-shrink: 0;
@@ -7918,7 +7926,7 @@ var step = import_react47.css`
     flex-basis: 100%;
   }
 `;
-var controls = (position2) => import_react47.css`
+var controls = (position2) => import_react48.css`
   ${(position2 === "left-right" || position2 === "top-right") && `
     display: none;
 
@@ -7927,7 +7935,7 @@ var controls = (position2) => import_react47.css`
     }
   `}
 `;
-var iconWrapper = import_react47.css`
+var iconWrapper = import_react48.css`
   display: flex;
   width: var(--spacing-7);
   height: var(--spacing-7);
@@ -7937,7 +7945,7 @@ var iconWrapper = import_react47.css`
   justify-content: center;
   box-shadow: var(--shadow-md);
 `;
-var button = (position2) => import_react47.css`
+var button = (position2) => import_react48.css`
   background: transparent;
   border-color: transparent;
   outline: none;
@@ -7967,7 +7975,7 @@ var button = (position2) => import_react47.css`
     bottom: calc(-1 * var(--spacing-1));
   `}
 `;
-var buttonLeft = (position2) => import_react47.css`
+var buttonLeft = (position2) => import_react48.css`
   ${button(position2)}
 
   ${position2 === "left-right" && `
@@ -7987,7 +7995,7 @@ var buttonLeft = (position2) => import_react47.css`
     left: calc(50% - var(--spacing-16));
   `}
 `;
-var customButtonLeft = (position2) => import_react47.css`
+var customButtonLeft = (position2) => import_react48.css`
   ${button(position2)}
 
   ${position2 === "left-right" && `
@@ -8007,7 +8015,7 @@ var customButtonLeft = (position2) => import_react47.css`
     left: calc(50% - var(--spacing-16));
   `}
 `;
-var buttonRight = (position2) => import_react47.css`
+var buttonRight = (position2) => import_react48.css`
   ${button(position2)}
 
   ${position2 === "left-right" && `
@@ -8027,12 +8035,12 @@ var buttonRight = (position2) => import_react47.css`
     right: calc(50% - var(--spacing-16));
   `}
 `;
-var icon = import_react47.css`
+var icon = import_react48.css`
   width: var(--spacing-3);
   height: var(--spacing-3);
   color: var(--color-base-black);
 `;
-var dots = import_react47.css`
+var dots = import_react48.css`
   position: absolute;
   bottom: var(--spacing-2);
   left: 0;
@@ -8042,11 +8050,11 @@ var dots = import_react47.css`
   align-items: center;
   justify-content: center;
 `;
-var dotsInner = import_react47.css`
+var dotsInner = import_react48.css`
   display: flex;
   overflow: hidden;
 `;
-var dot = (dotsColor) => import_react47.css`
+var dot = (dotsColor) => import_react48.css`
   position: relative;
   flex-shrink: 0;
   flex-grow: 0;
@@ -8085,22 +8093,22 @@ var dot = (dotsColor) => import_react47.css`
     `}
   }
 `;
-var dotDistance2 = import_react47.css`
+var dotDistance2 = import_react48.css`
   &::after {
     transform: translate(-50%, -50%) scale(0.9);
   }
 `;
-var dotDistance3 = import_react47.css`
+var dotDistance3 = import_react48.css`
   &::after {
     transform: translate(-50%, -50%) scale(0.8);
   }
 `;
-var dotDistanceGreaterThan3 = import_react47.css`
+var dotDistanceGreaterThan3 = import_react48.css`
   &::after {
     transform: translate(-50%, -50%) scale(0.7);
   }
 `;
-var dotVisible = import_react47.css`
+var dotVisible = import_react48.css`
   &::after {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1.2);
@@ -8116,7 +8124,7 @@ var ScrollingCarouselStep = ({
   parentId,
   onClick
 }) => {
-  const context = (0, import_react48.useContext)(CarouselContext);
+  const context = (0, import_react49.useContext)(CarouselContext);
   if (!context) {
     throw new Error(
       "ScrollingCarouselStep must be used within ScrollingCarousel"
@@ -8127,7 +8135,7 @@ var ScrollingCarouselStep = ({
     threshold: 0.75,
     root: carousel2.current
   });
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (typeof index !== "undefined") {
       dispatch({
         type: "set_child_visibility",
@@ -8153,10 +8161,10 @@ var ScrollingCarouselStep = ({
 ScrollingCarouselStep.displayName = "ScrollingCarouselStep";
 
 // src/ScrollingCarousel/ScrollingCarousel.tsx
-var import_react52 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 
 // src/ScrollingCarousel/hooks/useCarouselDots.ts
-var import_react49 = require("react");
+var import_react50 = require("react");
 
 // src/ScrollingCarousel/ScrollingCarousel.helpers.ts
 var childVisibilityReducer = (state, action) => {
@@ -8187,7 +8195,7 @@ var useCarouselDots = ({
   anyItemsVisible,
   numberOfDots
 }) => {
-  const dotOffset = (0, import_react49.useRef)(0);
+  const dotOffset = (0, import_react50.useRef)(0);
   const dotWidth = 12;
   const totalDots = childVisibility.length;
   const dotToCenterIndex = Math.round(
@@ -8219,7 +8227,7 @@ var useCarouselDots = ({
 };
 
 // src/ScrollingCarousel/hooks/useCarouselNavigation.ts
-var import_react50 = require("react");
+var import_react51 = require("react");
 
 // src/shared/helpers.ts
 var import_seamless_scroll_polyfill = require("seamless-scroll-polyfill");
@@ -8253,7 +8261,7 @@ var useCarouselNavigation = ({
   infiniteScroll,
   childVisibilityLength
 }) => {
-  const getStepEl = (0, import_react50.useCallback)(
+  const getStepEl = (0, import_react51.useCallback)(
     (index) => {
       if (carousel2.current) {
         return carousel2.current.querySelectorAll(`[data-step-${id}]`)[index] || null;
@@ -8262,7 +8270,7 @@ var useCarouselNavigation = ({
     },
     [carousel2, id]
   );
-  const next = (0, import_react50.useCallback)(
+  const next = (0, import_react51.useCallback)(
     (e) => {
       e.preventDefault();
       if (lastItemIsVisible && !infiniteScroll)
@@ -8290,7 +8298,7 @@ var useCarouselNavigation = ({
       carousel2
     ]
   );
-  const back = (0, import_react50.useCallback)(
+  const back = (0, import_react51.useCallback)(
     (e) => {
       e.preventDefault();
       if (firstItemIsVisible && !infiniteScroll)
@@ -8318,7 +8326,7 @@ var useCarouselNavigation = ({
       carousel2
     ]
   );
-  const goTo = (0, import_react50.useCallback)(
+  const goTo = (0, import_react51.useCallback)(
     (e, i) => {
       e.preventDefault();
       const el = getStepEl(i);
@@ -8336,12 +8344,12 @@ var useCarouselNavigation = ({
 };
 
 // src/ScrollingCarousel/hooks/useCarouselVisibility.ts
-var import_react51 = require("react");
+var import_react52 = require("react");
 var useCarouselVisibility = (carousel2) => {
-  const [state, dispatch] = (0, import_react51.useReducer)(childVisibilityReducer, {
+  const [state, dispatch] = (0, import_react52.useReducer)(childVisibilityReducer, {
     childVisibility: []
   });
-  const carouselContextApi = (0, import_react51.useMemo)(
+  const carouselContextApi = (0, import_react52.useMemo)(
     () => ({ carousel: carousel2, dispatch }),
     [carousel2]
   );
@@ -8379,8 +8387,8 @@ var ScrollingCarousel = ({
   id,
   current
 }) => {
-  const carousel2 = (0, import_react52.useRef)(null);
-  const [isHovering, setIsHovering] = (0, import_react52.useState)(false);
+  const carousel2 = (0, import_react53.useRef)(null);
+  const [isHovering, setIsHovering] = (0, import_react53.useState)(false);
   const {
     state,
     carouselContextApi,
@@ -8400,7 +8408,7 @@ var ScrollingCarousel = ({
     infiniteScroll,
     childVisibilityLength: state.childVisibility.length
   });
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (carousel2.current && typeof current === "number" && current >= 0) {
       const childrenArray = Array.from(carousel2.current.children);
       const selectedItem = childrenArray[current];
@@ -8415,9 +8423,9 @@ var ScrollingCarousel = ({
       }
     }
   }, [current]);
-  const childrenWithIndex = import_react52.default.Children.map(
+  const childrenWithIndex = import_react53.default.Children.map(
     children,
-    (child, index) => import_react52.default.cloneElement(child, { index })
+    (child, index) => import_react53.default.cloneElement(child, { index })
   );
   const { dotOffset, dotDistances, dotWidth } = useCarouselDots({
     childVisibility: state.childVisibility,
@@ -8511,8 +8519,8 @@ var ScrollingCarousel = ({
 ScrollingCarousel.displayName = "ScrollingCarousel";
 
 // src/PackageCard/PackageCard.styles.ts
-var import_react53 = require("@emotion/react");
-var cardContainerStyles3 = import_react53.css`
+var import_react54 = require("@emotion/react");
+var cardContainerStyles3 = import_react54.css`
   color: var(--text-primary);
   position: relative;
   width: 100%;
@@ -8521,35 +8529,26 @@ var cardContainerStyles3 = import_react53.css`
   overflow: hidden;
   transition: all 0.2s ease;
 `;
-var imageContainerStyles = import_react53.css`
-  position: relative;
-  width: 100%;
-  height: 260px;
-  overflow: hidden;
-  border-radius: var(--spacing-4);
-`;
-var imageStyles2 = import_react53.css`
-  width: 100%;
-  height: 260px;
+var imageStyles2 = import_react54.css`
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   position: relative;
   background-color: lightgray;
 `;
-var badgeTopLeftStyles = import_react53.css`
+var badgeTopLeftStyles = import_react54.css`
   position: absolute;
   top: var(--spacing-3);
   left: var(--spacing-3);
   z-index: 2;
 `;
-var badgeBottomRightStyles = import_react53.css`
+var badgeBottomRightStyles = import_react54.css`
   position: absolute;
   bottom: var(--spacing-3);
   right: var(--spacing-3);
   z-index: 2;
 `;
-var heartIconStyles = import_react53.css`
+var heartIconStyles = import_react54.css`
   position: absolute;
   top: var(--spacing-3);
   right: var(--spacing-3);
@@ -8571,14 +8570,14 @@ var heartIconStyles = import_react53.css`
     transform: scale(1.1);
   }
 `;
-var contentWithBackgroundStyles = import_react53.css`
-  padding: var(--spacing-2) var(--spacing-3) var(--spacing-4) var(--spacing-3);
+var contentWithBackgroundStyles = import_react54.css`
+  padding: 0 var(--spacing-3) var(--spacing-4) var(--spacing-3);
   background-color: var(--surface-page);
 `;
-var contentWithoutBackgroundStyles = import_react53.css`
-  padding-top: var(--spacing-2);
+var contentWithoutBackgroundStyles = import_react54.css`
+  padding-top: 0 var(--spacing-2) var(--spacing-2) var(--spacing-2);
 `;
-var overlayStyles = import_react53.css`
+var overlayStyles = import_react54.css`
   position: absolute;
   top: 0;
   left: 0;
@@ -8606,6 +8605,7 @@ var PackageCard = ({
   availabilityBadges,
   id,
   hasContentBackground = false,
+  orientation = "vertical",
   ...rest
 }) => {
   const carouselId = id || `package-card-${title.replace(/\s+/g, "-")}`;
@@ -8615,80 +8615,99 @@ var PackageCard = ({
   return /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(
     Box_default,
     {
+      display: "flex",
+      flexDirection: orientation === "horizontal" ? "row" : "column",
+      gap: orientation === "horizontal" ? "var(--spacing-4)" : "var(--spacing-2)",
       css: cardContainerStyles3,
       className,
       ...rest,
       borderRadius: hasContentBackground ? "var(--spacing-4)" : "var(--spacing-4) var(--spacing-4) 0 0",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(Box_default, { css: imageContainerStyles, children: [
-          availabilityBadges == null ? void 0 : availabilityBadges.map((badge2, index) => /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
-            AvailabilityBadge_default,
-            {
-              variant: badge2.variant,
-              css: badge2.position === "bottom-right" ? badgeBottomRightStyles : badgeTopLeftStyles,
-              children: badge2.text
-            },
-            `availability-${index}`
-          )),
-          shouldShowOverlay && /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(Box_default, { css: overlayStyles }),
-          /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
-            ScrollingCarousel,
-            {
-              showDots: images.length > 1,
-              showNavigationOnHover: true,
-              id: carouselId,
-              children: images.filter((image) => !!image).map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
-                ScrollingCarouselStep,
+        /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(
+          Box_default,
+          {
+            position: "relative",
+            width: orientation === "horizontal" ? "40%" : "100%",
+            height: orientation === "horizontal" ? "200px" : "260px",
+            overflow: "hidden",
+            borderRadius: "var(--spacing-4)",
+            children: [
+              availabilityBadges == null ? void 0 : availabilityBadges.map((badge2, index) => /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+                AvailabilityBadge_default,
                 {
-                  parentId: carouselId,
-                  onClick,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
-                    Box_default,
+                  variant: badge2.variant,
+                  css: badge2.position === "bottom-right" ? badgeBottomRightStyles : badgeTopLeftStyles,
+                  children: badge2.text
+                },
+                `availability-${index}`
+              )),
+              shouldShowOverlay && /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(Box_default, { css: overlayStyles }),
+              /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+                ScrollingCarousel,
+                {
+                  showDots: images.length > 1,
+                  showNavigationOnHover: true,
+                  id: carouselId,
+                  children: images.filter((image) => !!image).map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+                    ScrollingCarouselStep,
                     {
-                      css: [
-                        imageStyles2,
+                      parentId: carouselId,
+                      onClick,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+                        Box_default,
                         {
-                          backgroundImage: `linear-gradient(181deg, rgba(0, 0, 0, 0.00) 75.32%, rgba(0, 0, 0, 0.40) 99.41%), url(${image})`
+                          width: "100%",
+                          height: orientation === "horizontal" ? "200px" : "260px",
+                          css: [
+                            imageStyles2,
+                            {
+                              backgroundImage: `linear-gradient(181deg, rgba(0, 0, 0, 0.00) 75.32%, rgba(0, 0, 0, 0.40) 99.41%), url(${image})`
+                            }
+                          ]
                         }
-                      ]
-                    }
-                  )
-                },
-                `image-${index}`
-              ))
-            }
-          ),
-          onFavoriteClick && /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
-            Box_default,
-            {
-              css: heartIconStyles,
-              onClick: (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                onFavoriteClick == null ? void 0 : onFavoriteClick();
-              },
-              children: isFavorited ? /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
-                Icon_default,
-                {
-                  variant: "HeartSolid",
-                  size: "small",
-                  fill: "var(--color-error-500)"
+                      )
+                    },
+                    `image-${index}`
+                  ))
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
-                Icon_default,
+              ),
+              onFavoriteClick && /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+                Box_default,
                 {
-                  variant: "Heart",
-                  size: "small",
-                  fill: "var(--color-base-black)"
+                  css: heartIconStyles,
+                  onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onFavoriteClick == null ? void 0 : onFavoriteClick();
+                  },
+                  children: isFavorited ? /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+                    Icon_default,
+                    {
+                      variant: "HeartSolid",
+                      size: "small",
+                      fill: "var(--color-error-500)"
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+                    Icon_default,
+                    {
+                      variant: "Heart",
+                      size: "small",
+                      fill: "var(--color-base-black)"
+                    }
+                  )
                 }
               )
-            }
-          )
-        ] }),
+            ]
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(
           Box_default,
           {
             css: hasContentBackground ? contentWithBackgroundStyles : contentWithoutBackgroundStyles,
+            width: orientation === "horizontal" ? "60%" : "100%",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: orientation === "horizontal" ? "center" : "flex-start",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(
                 Box_default,
@@ -8763,8 +8782,8 @@ var PackageHeader = ({
 var PackageHeader_default = PackageHeader;
 
 // src/ReviewCard/components/ReviewImages.styles.ts
-var import_react54 = require("@emotion/react");
-var imageStyles3 = import_react54.css`
+var import_react55 = require("@emotion/react");
+var imageStyles3 = import_react55.css`
   flex: 1;
   min-width: 0;
   max-width: 100%;
@@ -8896,7 +8915,7 @@ var ReviewCard = ({
 var ReviewCard_default = ReviewCard;
 
 // src/Reviews/Reviews.tsx
-var import_react55 = require("@emotion/react");
+var import_react56 = require("@emotion/react");
 
 // src/Reviews/components/ReviewItem.tsx
 var import_jsx_runtime255 = require("@emotion/react/jsx-runtime");
@@ -8957,7 +8976,7 @@ var Reviews = ({
                 StarRating_default,
                 {
                   rating: Math.floor(averageRating),
-                  css: import_react55.css`
+                  css: import_react56.css`
             > svg {
               height: 40px;
               width: 40px;