@landtrustinc/design-system 1.2.21 → 1.2.25

package/dist/index.js

@@ -65,6 +65,8 @@ __export(src_exports, {
   ReviewCard: () => ReviewCard_default,
   Reviews: () => Reviews_default,
   ReviewsShowcase: () => ReviewsShowcase_default,
+  ScrollingCarousel: () => ScrollingCarousel,
+  ScrollingCarouselStep: () => ScrollingCarouselStep,
   Select: () => Select,
   Spinner: () => Spinner_default2,
   StarRating: () => StarRating_default,
@@ -3716,12 +3718,12 @@ var Button = import_react6.default.forwardRef(
     isLoading = false,
     className = "",
     labelStyleOverrides = import_react5.css``,
-    icon,
+    icon: icon2,
     ...props
   }, ref) => {
     const componentType = Component === "button" ? type : void 0;
     const sizeKey = `size${(0, import_lodash.upperFirst)(size)}`;
-    const isIconOnly = icon && !children;
+    const isIconOnly = icon2 && !children;
     return /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(
       Component,
       {
@@ -3736,7 +3738,7 @@ var Button = import_react6.default.forwardRef(
           isIconOnly && size === "lg" && styles.iconOnlyLg,
           isIconOnly && size !== "lg" && styles.iconOnly,
           (isLoading || disabled) && styles.disabled,
-          icon && children && styles.withIcon
+          icon2 && children && styles.withIcon
         ],
         ...props,
         onClick: (e) => {
@@ -3748,7 +3750,7 @@ var Button = import_react6.default.forwardRef(
           (_a = props.onClick) == null ? void 0 : _a.call(props, e);
         },
         children: [
-          icon,
+          icon2,
           children && /* @__PURE__ */ (0, import_jsx_runtime208.jsx)("span", { css: [labelStyles(!isLoading), labelStyleOverrides], children }),
           isLoading && /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(Spinner_default2, { css: spinnerStyles2(variant) })
         ]
@@ -5028,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;
@@ -5044,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;
@@ -5542,8 +5541,8 @@ var useWidgetContext = () => {
   return ctx;
 };
 var WidgetTrigger = () => {
-  const { expanded, toggle, triggerRef, icon, expandedIcon } = useWidgetContext();
-  const currentIcon = expanded ? expandedIcon : icon;
+  const { expanded, toggle, triggerRef, icon: icon2, expandedIcon } = useWidgetContext();
+  const currentIcon = expanded ? expandedIcon : icon2;
   return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(import_jsx_runtime223.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
     Button_default,
     {
@@ -5574,7 +5573,7 @@ var WidgetPanel = ({ className, style, children }) => {
 };
 var WidgetRoot = ({
   ariaLabel,
-  icon = "Plus",
+  icon: icon2 = "Plus",
   expandedIcon = "Xmark",
   defaultExpanded = false,
   expanded,
@@ -5637,11 +5636,11 @@ var WidgetRoot = ({
       expanded: isExpanded,
       toggle,
       triggerRef,
-      icon,
+      icon: icon2,
       expandedIcon,
       panelWidth: panelWidth != null ? panelWidth : 480
     }),
-    [expandedIcon, icon, isExpanded, panelWidth, toggle]
+    [expandedIcon, icon2, isExpanded, panelWidth, toggle]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
     Box_default,
@@ -6084,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 = ({
@@ -6146,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 })
         ]
       }
@@ -6179,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;
 
@@ -6188,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%,
@@ -6243,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};
@@ -6258,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};
@@ -6277,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};
@@ -6286,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;
@@ -6351,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};
@@ -6391,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};
@@ -6411,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 {
@@ -6420,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 {
@@ -6429,7 +6439,7 @@ var variantStyles = {
     }
   `
 };
-var inputWithIconStyles = import_react33.css`
+var inputWithIconStyles = import_react34.css`
   padding-left: ${space["10"]};
 
   &.has-end-icon {
@@ -6440,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%);
@@ -6451,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",
@@ -6509,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};
@@ -6551,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};
@@ -6571,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 {
@@ -6580,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 {
@@ -6589,7 +6599,7 @@ var variantStyles2 = {
     }
   `
 };
-var optionStyles = import_react35.css`
+var optionStyles = import_react36.css`
   background-color: ${colors.light["100"]};
   color: ${colors.gray["900"]};
 
@@ -6598,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",
@@ -6636,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,
@@ -6679,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} {
@@ -6715,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} {
@@ -6742,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} {
@@ -6769,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} {
@@ -6796,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} {
@@ -6823,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} {
@@ -6850,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} {
@@ -6889,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);
@@ -6910,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 = ({
@@ -6937,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);
@@ -6955,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;
@@ -6965,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} {
@@ -7006,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;
 
@@ -7015,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%,
@@ -7333,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);
@@ -7345,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);
@@ -7364,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;
 `;
 
@@ -7382,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)
@@ -7442,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");
@@ -7664,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;
@@ -7697,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;
@@ -7714,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;
 
@@ -7722,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) {
@@ -7751,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;
@@ -7759,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;
@@ -7775,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%;
@@ -7876,55 +7886,686 @@ var Navigation = ({
 };
 var Navigation_default = Navigation;
 
+// src/ScrollingCarousel/components/ScrollingCarouselStep.tsx
+var import_react49 = require("react");
+var import_react_intersection_observer = require("react-intersection-observer");
+
+// src/ScrollingCarousel/context/CarouselContext.tsx
+var import_react47 = __toESM(require("react"));
+var CarouselContext = import_react47.default.createContext(
+  null
+);
+
+// src/ScrollingCarousel/ScrollingCarousel.styles.ts
+var import_react48 = require("@emotion/react");
+var carouselRoot = import_react48.css`
+  position: relative;
+`;
+var carousel = import_react48.css`
+  display: flex;
+  overflow-y: hidden;
+  overflow-x: scroll;
+  scroll-snap-type: x mandatory;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+var step = import_react48.css`
+  scroll-snap-align: center;
+  flex-basis: 100%;
+  flex-shrink: 0;
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  @media (min-width: 768px) {
+    flex-basis: 100%;
+  }
+`;
+var controls = (position2) => import_react48.css`
+  ${(position2 === "left-right" || position2 === "top-right") && `
+    display: none;
+
+    @media (min-width: 768px) {
+      display: block;
+    }
+  `}
+`;
+var iconWrapper = import_react48.css`
+  display: flex;
+  width: var(--spacing-7);
+  height: var(--spacing-7);
+  border-radius: 50%;
+  background: var(--color-base-white);
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--shadow-md);
+`;
+var button = (position2) => import_react48.css`
+  background: transparent;
+  border-color: transparent;
+  outline: none;
+  cursor: pointer;
+  z-index: 15;
+  position: absolute;
+  opacity: 0.9;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+
+  ${position2 === "left-right" && `
+    top: calc(50% - (var(--spacing-12) / 2));
+  `}
+
+  ${position2 === "bottom" && `
+    top: calc(100% + var(--spacing-4));
+
+    @media (min-width: 768px) {
+      top: calc(100% + var(--spacing-8));
+    }
+  `}
+
+  ${position2 === "top-right" && `
+    top: calc(-1 * var(--spacing-24));
+  `}
+
+  ${position2 === "inner-bottom" && `
+    bottom: calc(-1 * var(--spacing-1));
+  `}
+`;
+var buttonLeft = (position2) => import_react48.css`
+  ${button(position2)}
+
+  ${position2 === "left-right" && `
+    left: 0;
+  `}
+
+  ${position2 === "bottom" && `
+    left: calc(50% - var(--spacing-14));
+  `}
+
+  ${position2 === "top-right" && `
+    right: 60px;
+    padding: 0;
+  `}
+
+  ${position2 === "inner-bottom" && `
+    left: calc(50% - var(--spacing-16));
+  `}
+`;
+var customButtonLeft = (position2) => import_react48.css`
+  ${button(position2)}
+
+  ${position2 === "left-right" && `
+    left: 0;
+  `}
+
+  ${position2 === "bottom" && `
+    left: calc(50% - var(--spacing-14));
+  `}
+
+  ${position2 === "top-right" && `
+    right: var(--spacing-10);
+    padding: 0;
+  `}
+
+  ${position2 === "inner-bottom" && `
+    left: calc(50% - var(--spacing-16));
+  `}
+`;
+var buttonRight = (position2) => import_react48.css`
+  ${button(position2)}
+
+  ${position2 === "left-right" && `
+    right: 0;
+  `}
+
+  ${position2 === "bottom" && `
+    right: calc(50% - var(--spacing-14));
+  `}
+
+  ${position2 === "top-right" && `
+    right: 0;
+    padding: 0;
+  `}
+
+  ${position2 === "inner-bottom" && `
+    right: calc(50% - var(--spacing-16));
+  `}
+`;
+var icon = import_react48.css`
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  color: var(--color-base-black);
+`;
+var dots = import_react48.css`
+  position: absolute;
+  bottom: var(--spacing-2);
+  left: 0;
+  right: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+var dotsInner = import_react48.css`
+  display: flex;
+  overflow: hidden;
+`;
+var dot = (dotsColor) => import_react48.css`
+  position: relative;
+  flex-shrink: 0;
+  flex-grow: 0;
+  transition: transform 500ms;
+  background-color: transparent;
+  border: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  cursor: pointer;
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    height: 8px;
+    width: 8px;
+    border-radius: 50%;
+    transition: opacity 500ms, transform 500ms;
+    opacity: 0.75;
+    transform: translate(-50%, -50%);
+
+    ${dotsColor === "light" && `
+      background-color: var(--color-base-white);
+    `}
+
+    ${dotsColor === "dark" && `
+      background-color: var(--color-base-black);
+    `}
+
+    ${dotsColor === "neutral" && `
+      background-color: var(--color-neutral-500);
+    `}
+  }
+`;
+var dotDistance2 = import_react48.css`
+  &::after {
+    transform: translate(-50%, -50%) scale(0.9);
+  }
+`;
+var dotDistance3 = import_react48.css`
+  &::after {
+    transform: translate(-50%, -50%) scale(0.8);
+  }
+`;
+var dotDistanceGreaterThan3 = import_react48.css`
+  &::after {
+    transform: translate(-50%, -50%) scale(0.7);
+  }
+`;
+var dotVisible = import_react48.css`
+  &::after {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1.2);
+  }
+`;
+
+// src/ScrollingCarousel/components/ScrollingCarouselStep.tsx
+var import_jsx_runtime248 = require("@emotion/react/jsx-runtime");
+var ScrollingCarouselStep = ({
+  children,
+  index,
+  className,
+  parentId,
+  onClick
+}) => {
+  const context = (0, import_react49.useContext)(CarouselContext);
+  if (!context) {
+    throw new Error(
+      "ScrollingCarouselStep must be used within ScrollingCarousel"
+    );
+  }
+  const { carousel: carousel2, dispatch } = context;
+  const [ref, inView] = (0, import_react_intersection_observer.useInView)({
+    threshold: 0.75,
+    root: carousel2.current
+  });
+  (0, import_react49.useEffect)(() => {
+    if (typeof index !== "undefined") {
+      dispatch({
+        type: "set_child_visibility",
+        payload: { index, visible: inView }
+      });
+    }
+  }, [inView, index, dispatch]);
+  const dataStep = { [`data-step-${parentId}`]: index };
+  return /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
+    "div",
+    {
+      ref,
+      css: step,
+      className,
+      ...dataStep,
+      onClick,
+      role: "group",
+      "aria-roledescription": "slide",
+      children
+    }
+  );
+};
+ScrollingCarouselStep.displayName = "ScrollingCarouselStep";
+
+// src/ScrollingCarousel/ScrollingCarousel.tsx
+var import_react53 = __toESM(require("react"));
+
+// src/ScrollingCarousel/hooks/useCarouselDots.ts
+var import_react50 = require("react");
+
+// src/ScrollingCarousel/ScrollingCarousel.helpers.ts
+var childVisibilityReducer = (state, action) => {
+  switch (action.type) {
+    case "set_child_visibility": {
+      const newChildVisibility = [...state.childVisibility];
+      newChildVisibility[action.payload.index] = action.payload.visible;
+      return {
+        childVisibility: newChildVisibility
+      };
+    }
+    default:
+      return state;
+  }
+};
+var calculateDotOffset = (dotIndex, visualPositionIndex, dotWidth, dotMovementNeeded) => {
+  return (dotIndex + visualPositionIndex) * dotWidth - dotMovementNeeded * dotWidth;
+};
+var calculateDotDistances = (childVisibility, centerDotIndex) => {
+  return childVisibility.map((_, i) => Math.abs(centerDotIndex - i));
+};
+
+// src/ScrollingCarousel/hooks/useCarouselDots.ts
+var useCarouselDots = ({
+  childVisibility,
+  firstVisibleIndex,
+  lastVisibleIndex,
+  anyItemsVisible,
+  numberOfDots
+}) => {
+  const dotOffset = (0, import_react50.useRef)(0);
+  const dotWidth = 12;
+  const totalDots = childVisibility.length;
+  const dotToCenterIndex = Math.round(
+    (firstVisibleIndex + lastVisibleIndex) / 2
+  );
+  const dotMovementNeeded = Math.round(numberOfDots / 2) + 1;
+  const centerDotNearStart = dotToCenterIndex < dotMovementNeeded - 1;
+  const centerDotNearEnd = dotToCenterIndex > totalDots - dotMovementNeeded;
+  if (anyItemsVisible) {
+    if (centerDotNearStart) {
+      dotOffset.current = 0;
+    } else if (centerDotNearEnd) {
+      dotOffset.current = dotWidth * (totalDots - numberOfDots);
+    } else {
+      dotOffset.current = calculateDotOffset(
+        dotToCenterIndex,
+        2,
+        dotWidth,
+        dotMovementNeeded
+      );
+    }
+  }
+  const dotDistances = calculateDotDistances(childVisibility, dotToCenterIndex);
+  return {
+    dotOffset,
+    dotDistances,
+    dotWidth
+  };
+};
+
+// src/ScrollingCarousel/hooks/useCarouselNavigation.ts
+var import_react51 = require("react");
+
+// src/shared/helpers.ts
+var import_seamless_scroll_polyfill = require("seamless-scroll-polyfill");
+var isSafari = () => {
+  if (typeof window === "undefined")
+    return false;
+  return /^((?!chrome|android).)*safari/i.test(window.navigator.userAgent);
+};
+var scrollTo = (el, config, parent) => {
+  setTimeout(() => {
+    if (isSafari()) {
+      (0, import_seamless_scroll_polyfill.elementScrollIntoView)(el, config);
+    } else {
+      if (parent) {
+        parent.scroll({ left: el.offsetLeft, behavior: "smooth" });
+      } else {
+        el.scrollIntoView(config);
+      }
+    }
+  });
+};
+
+// src/ScrollingCarousel/hooks/useCarouselNavigation.ts
+var useCarouselNavigation = ({
+  carousel: carousel2,
+  id,
+  firstItemIsVisible,
+  lastItemIsVisible,
+  firstVisibleIndex,
+  lastVisibleIndex,
+  infiniteScroll,
+  childVisibilityLength
+}) => {
+  const getStepEl = (0, import_react51.useCallback)(
+    (index) => {
+      if (carousel2.current) {
+        return carousel2.current.querySelectorAll(`[data-step-${id}]`)[index] || null;
+      }
+      return null;
+    },
+    [carousel2, id]
+  );
+  const next = (0, import_react51.useCallback)(
+    (e) => {
+      e.preventDefault();
+      if (lastItemIsVisible && !infiniteScroll)
+        return;
+      const scrollToIndex = infiniteScroll && lastVisibleIndex === childVisibilityLength - 1 ? 0 : lastVisibleIndex + 1;
+      const el = getStepEl(scrollToIndex);
+      if (el) {
+        scrollTo(
+          el,
+          {
+            behavior: "smooth",
+            inline: "start",
+            block: "nearest"
+          },
+          carousel2.current
+        );
+      }
+    },
+    [
+      lastItemIsVisible,
+      lastVisibleIndex,
+      infiniteScroll,
+      childVisibilityLength,
+      getStepEl,
+      carousel2
+    ]
+  );
+  const back = (0, import_react51.useCallback)(
+    (e) => {
+      e.preventDefault();
+      if (firstItemIsVisible && !infiniteScroll)
+        return;
+      const scrollToIndex = firstVisibleIndex === 0 && infiniteScroll ? childVisibilityLength - 1 : firstVisibleIndex - 1;
+      const el = getStepEl(scrollToIndex);
+      if (el) {
+        scrollTo(
+          el,
+          {
+            behavior: "smooth",
+            inline: "end",
+            block: "nearest"
+          },
+          carousel2.current
+        );
+      }
+    },
+    [
+      firstItemIsVisible,
+      firstVisibleIndex,
+      infiniteScroll,
+      childVisibilityLength,
+      getStepEl,
+      carousel2
+    ]
+  );
+  const goTo = (0, import_react51.useCallback)(
+    (e, i) => {
+      e.preventDefault();
+      const el = getStepEl(i);
+      if (el) {
+        scrollTo(el, {
+          behavior: "smooth",
+          inline: "center",
+          block: "center"
+        });
+      }
+    },
+    [getStepEl]
+  );
+  return { next, back, goTo };
+};
+
+// src/ScrollingCarousel/hooks/useCarouselVisibility.ts
+var import_react52 = require("react");
+var useCarouselVisibility = (carousel2) => {
+  const [state, dispatch] = (0, import_react52.useReducer)(childVisibilityReducer, {
+    childVisibility: []
+  });
+  const carouselContextApi = (0, import_react52.useMemo)(
+    () => ({ carousel: carousel2, dispatch }),
+    [carousel2]
+  );
+  const firstVisibleIndex = state.childVisibility.indexOf(true);
+  const firstItemIsVisible = firstVisibleIndex === 0;
+  const lastVisibleIndex = state.childVisibility.lastIndexOf(true);
+  const lastItemIsVisible = lastVisibleIndex === state.childVisibility.length - 1;
+  const anyItemsVisible = !!(firstVisibleIndex >= 0 && lastVisibleIndex >= 0);
+  return {
+    state,
+    carouselContextApi,
+    firstVisibleIndex,
+    lastVisibleIndex,
+    firstItemIsVisible,
+    lastItemIsVisible,
+    anyItemsVisible
+  };
+};
+
+// src/ScrollingCarousel/ScrollingCarousel.tsx
+var import_jsx_runtime249 = require("@emotion/react/jsx-runtime");
+var ScrollingCarousel = ({
+  className,
+  children,
+  showButtons = true,
+  showDots = false,
+  dotsColor = "light",
+  numberOfDots = 5,
+  buttonsPosition = "left-right",
+  customLeftButton,
+  infiniteScroll = false,
+  customBackIcon = null,
+  customNextIcon = null,
+  showNavigationOnHover = false,
+  id,
+  current
+}) => {
+  const carousel2 = (0, import_react53.useRef)(null);
+  const [isHovering, setIsHovering] = (0, import_react53.useState)(false);
+  const {
+    state,
+    carouselContextApi,
+    firstVisibleIndex,
+    lastVisibleIndex,
+    firstItemIsVisible,
+    lastItemIsVisible,
+    anyItemsVisible
+  } = useCarouselVisibility(carousel2);
+  const { next, back, goTo } = useCarouselNavigation({
+    carousel: carousel2,
+    id,
+    firstItemIsVisible,
+    lastItemIsVisible,
+    firstVisibleIndex,
+    lastVisibleIndex,
+    infiniteScroll,
+    childVisibilityLength: state.childVisibility.length
+  });
+  (0, import_react53.useEffect)(() => {
+    if (carousel2.current && typeof current === "number" && current >= 0) {
+      const childrenArray = Array.from(carousel2.current.children);
+      const selectedItem = childrenArray[current];
+      if (selectedItem) {
+        const selectedItemOffset = selectedItem.offsetLeft + selectedItem.offsetWidth / 2;
+        const carouselCenter = carousel2.current.offsetWidth / 2;
+        const scrollLeft = selectedItemOffset - carouselCenter;
+        carousel2.current.scroll({
+          left: scrollLeft,
+          behavior: "smooth"
+        });
+      }
+    }
+  }, [current]);
+  const childrenWithIndex = import_react53.default.Children.map(
+    children,
+    (child, index) => import_react53.default.cloneElement(child, { index })
+  );
+  const { dotOffset, dotDistances, dotWidth } = useCarouselDots({
+    childVisibility: state.childVisibility,
+    firstVisibleIndex,
+    lastVisibleIndex,
+    anyItemsVisible,
+    numberOfDots
+  });
+  const hasMultipleChildren = state.childVisibility.length > 1;
+  const shouldShowNavigation = showNavigationOnHover ? isHovering : true;
+  return /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(
+    "div",
+    {
+      css: carouselRoot,
+      className,
+      onMouseEnter: () => setIsHovering(true),
+      onMouseLeave: () => setIsHovering(false),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
+          "div",
+          {
+            css: carousel,
+            ref: carousel2,
+            "data-testid": "scrolling-carousel-carousel",
+            role: "region",
+            "aria-roledescription": "carousel",
+            "aria-label": "Scrolling carousel",
+            children: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(CarouselContext.Provider, { value: carouselContextApi, children: childrenWithIndex })
+          }
+        ),
+        hasMultipleChildren && shouldShowNavigation && /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)("div", { css: controls(buttonsPosition), children: [
+          showButtons && (!firstItemIsVisible || infiniteScroll) && /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
+            "button",
+            {
+              "aria-label": "Previous",
+              type: "button",
+              onClick: back,
+              css: customLeftButton ? customButtonLeft(buttonsPosition) : buttonLeft(buttonsPosition),
+              "data-testid": `scrolling-carousel-button-back-${id}`,
+              children: customBackIcon ? customBackIcon : /* @__PURE__ */ (0, import_jsx_runtime249.jsx)("span", { css: iconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(Icon_default, { variant: "AngleLeft", css: icon }) })
+            }
+          ),
+          showButtons && (!lastItemIsVisible || infiniteScroll) && /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
+            "button",
+            {
+              "aria-label": "Next",
+              type: "button",
+              onClick: next,
+              css: buttonRight(buttonsPosition),
+              "data-testid": `scrolling-carousel-button-next-${id}`,
+              children: customNextIcon ? customNextIcon : /* @__PURE__ */ (0, import_jsx_runtime249.jsx)("span", { css: iconWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(Icon_default, { variant: "AngleRight", css: icon }) })
+            }
+          )
+        ] }),
+        showDots && /* @__PURE__ */ (0, import_jsx_runtime249.jsx)("div", { css: dots, children: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
+          "div",
+          {
+            css: dotsInner,
+            style: { maxWidth: `${dotWidth * numberOfDots}px` },
+            children: state.childVisibility.map((childVisibility, i) => {
+              var _a;
+              const distance = (_a = dotDistances[i]) != null ? _a : 0;
+              return /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => goTo(e, i),
+                  css: [
+                    dot(dotsColor),
+                    distance === 2 && dotDistance2,
+                    distance === 3 && dotDistance3,
+                    distance > 3 && dotDistanceGreaterThan3,
+                    childVisibility && dotVisible
+                  ],
+                  style: {
+                    width: `${dotWidth}px`,
+                    height: `${dotWidth}px`,
+                    transform: `translateX(-${dotOffset.current}px)`
+                  },
+                  "aria-label": `Go to slide ${i + 1}`
+                },
+                `step-${i + 1}`
+              );
+            })
+          }
+        ) })
+      ]
+    }
+  );
+};
+ScrollingCarousel.displayName = "ScrollingCarousel";
+
 // src/PackageCard/PackageCard.styles.ts
-var import_react46 = require("@emotion/react");
-var cardContainerStyles3 = import_react46.css`
+var import_react54 = require("@emotion/react");
+var cardContainerStyles3 = import_react54.css`
   color: var(--text-primary);
   position: relative;
   width: 100%;
-  max-width: 300px;
+  height: 100%;
   background: white;
-  border-radius: var(--spacing-4);
   overflow: hidden;
-  cursor: pointer;
   transition: all 0.2s ease;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
-  }
 `;
-var imageContainerStyles = import_react46.css`
+var imageContainerStyles = import_react54.css`
   position: relative;
   width: 100%;
-  height: 200px;
+  height: 260px;
   overflow: hidden;
   border-radius: var(--spacing-4);
 `;
-var imageStyles2 = import_react46.css`
+var imageStyles2 = import_react54.css`
   width: 100%;
-  height: 100%;
+  height: 260px;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  border-radius: var(--spacing-4) var(--spacing-4) 0 0;
+  position: relative;
+  background-color: lightgray;
 `;
-var badgeStyles2 = import_react46.css`
+var badgeTopLeftStyles = import_react54.css`
   position: absolute;
   top: var(--spacing-3);
   left: var(--spacing-3);
   z-index: 2;
 `;
-var heartIconStyles = import_react46.css`
+var badgeBottomRightStyles = import_react54.css`
+  position: absolute;
+  bottom: var(--spacing-3);
+  right: var(--spacing-3);
+  z-index: 2;
+`;
+var heartIconStyles = import_react54.css`
   position: absolute;
   top: var(--spacing-3);
   right: var(--spacing-3);
   width: 32px;
   height: 32px;
-  background: rgba(255, 255, 255, 0.2);
-  backdrop-filter: blur(8px);
+  background: rgba(255, 255, 255, 0.4);
   border-radius: 50%;
+  border: 1px solid var(--border-primary);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -7938,103 +8579,180 @@ var heartIconStyles = import_react46.css`
     transform: scale(1.1);
   }
 `;
-var contentStyles2 = import_react46.css`
-  padding: var(--spacing-3);
+var contentWithBackgroundStyles = import_react54.css`
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-4) var(--spacing-3);
+  background-color: var(--surface-page);
+`;
+var contentWithoutBackgroundStyles = import_react54.css`
+  padding-top: var(--spacing-2);
+`;
+var overlayStyles = import_react54.css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 1;
+  border-radius: var(--spacing-4);
+  display: block;
+  pointer-events: none;
 `;
 
 // src/PackageCard/PackageCard.tsx
-var import_jsx_runtime248 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime250 = require("@emotion/react/jsx-runtime");
 var PackageCard = ({
   images,
   title,
   subtitle,
   startingPrice,
-  tripsLeft,
   isFavorited = false,
   onFavoriteClick,
   onClick,
   className,
-  days,
-  guests,
-  hasLodging,
+  badges,
+  availabilityBadges,
+  id,
+  hasContentBackground = false,
   ...rest
 }) => {
-  const mainImage = images[0] || "";
-  return /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(Box_default, { css: cardContainerStyles3, className, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Box_default, { css: imageContainerStyles, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(Box_default, { css: [imageStyles2, { backgroundImage: `url(${mainImage})` }], children: [
-      tripsLeft && /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(AvailabilityBadge_default, { variant: "warning", css: badgeStyles2, children: [
-        tripsLeft,
-        " Trips Left"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
-        Box_default,
-        {
-          css: heartIconStyles,
-          onClick: (e) => {
-            e.stopPropagation();
-            onFavoriteClick == null ? void 0 : onFavoriteClick();
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
-            Icon_default,
+  const carouselId = id || `package-card-${title.replace(/\s+/g, "-")}`;
+  const shouldShowOverlay = availabilityBadges == null ? void 0 : availabilityBadges.some(
+    (badge2) => badge2.showOverlay
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(
+    Box_default,
+    {
+      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,
             {
-              variant: isFavorited ? "HeartSolid" : "Heart",
-              size: "medium"
+              showDots: images.length > 1,
+              showNavigationOnHover: true,
+              id: carouselId,
+              children: images.filter((image) => !!image).map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+                ScrollingCarouselStep,
+                {
+                  parentId: carouselId,
+                  onClick,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+                    Box_default,
+                    {
+                      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)"
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+                Icon_default,
+                {
+                  variant: "Heart",
+                  size: "small",
+                  fill: "var(--color-base-black)"
+                }
+              )
             }
           )
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(Box_default, { css: contentStyles2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(
-        Box_default,
-        {
-          onClick,
-          display: "flex",
-          flexDirection: "column",
-          gap: "var(--spacing-1)",
-          mb: "var(--spacing-4)",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Text_default, { size: "md", fontWeight: "bold", children: title }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Text_default, { size: "xs", fontWeight: "bold", children: subtitle }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(Text_default, { size: "xs", fontWeight: "normal", children: [
-              "Starting Price ",
-              startingPrice,
-              " / Guest"
-            ] }) })
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(Box_default, { display: "flex", gap: "var(--spacing-3)", alignItems: "center", children: [
-        days && /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
-          IconLabel_default,
-          {
-            variant: "Calendar",
-            label: `${days} Day${days !== 1 ? "s" : ""}`
-          }
-        ),
-        guests && /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
-          IconLabel_default,
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(
+          Box_default,
           {
-            variant: "User",
-            label: `${guests} Guest${guests !== 1 ? "s" : ""}`
+            css: hasContentBackground ? contentWithBackgroundStyles : contentWithoutBackgroundStyles,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(
+                Box_default,
+                {
+                  onClick,
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "var(--spacing-1)",
+                  mb: "var(--spacing-1)",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(Text_default, { size: "md", fontWeight: "bold", children: title }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(Text_default, { size: "sm", fontWeight: "bold", children: subtitle }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(Text_default, { size: "sm", fontWeight: "normal", children: [
+                      "Starting Price ",
+                      startingPrice,
+                      " / Guest"
+                    ] }) })
+                  ]
+                }
+              ),
+              badges && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+                Box_default,
+                {
+                  display: "flex",
+                  gap: "var(--spacing-2) var(--spacing-4)",
+                  alignItems: "center",
+                  flexWrap: "wrap",
+                  children: badges.map((badge2, index) => /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+                    IconLabel_default,
+                    {
+                      iconSize: badge2.iconSize || "medium",
+                      label: badge2.label,
+                      variant: badge2.variant
+                    },
+                    `badge-${badge2.variant}-${index}`
+                  ))
+                }
+              )
+            ]
           }
-        ),
-        hasLodging && /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(IconLabel_default, { variant: "House", label: "Lodging" })
-      ] })
-    ] })
-  ] });
+        )
+      ]
+    }
+  );
 };
 var PackageCard_default = PackageCard;
 
 // src/PackageHeader/PackageHeader.tsx
-var import_jsx_runtime249 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime251 = require("@emotion/react/jsx-runtime");
 var PackageHeader = ({
   header,
   subheader,
   features,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(
     Box_default,
     {
       display: "flex",
@@ -8043,9 +8761,9 @@ var PackageHeader = ({
       color: "var(--text-primary)",
       className,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(Heading_default, { size: "xs", fontWeight: "bold", children: header }),
-        subheader && /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(Text_default, { children: subheader }),
-        features && /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(FeatureList_default, { items: features })
+        /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(Heading_default, { size: "xs", fontWeight: "bold", children: header }),
+        subheader && /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(Text_default, { children: subheader }),
+        features && /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(FeatureList_default, { items: features })
       ]
     }
   );
@@ -8053,8 +8771,8 @@ var PackageHeader = ({
 var PackageHeader_default = PackageHeader;
 
 // src/ReviewCard/components/ReviewImages.styles.ts
-var import_react47 = require("@emotion/react");
-var imageStyles3 = import_react47.css`
+var import_react55 = require("@emotion/react");
+var imageStyles3 = import_react55.css`
   flex: 1;
   min-width: 0;
   max-width: 100%;
@@ -8065,13 +8783,13 @@ var imageStyles3 = import_react47.css`
 `;
 
 // src/ReviewCard/components/ReviewImages.tsx
-var import_jsx_runtime250 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime252 = require("@emotion/react/jsx-runtime");
 var ReviewImages = ({ images, maxImages = 3 }) => {
   const displayImages = images.slice(0, maxImages);
   if (displayImages.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(Box_default, { display: "flex", gap: "var(--spacing-2)", flexWrap: "wrap", children: displayImages.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(Box_default, { display: "flex", gap: "var(--spacing-2)", flexWrap: "wrap", children: displayImages.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
     "img",
     {
       src: image,
@@ -8084,7 +8802,7 @@ var ReviewImages = ({ images, maxImages = 3 }) => {
 var ReviewImages_default = ReviewImages;
 
 // src/ReviewCard/components/ReviewReply.tsx
-var import_jsx_runtime251 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime253 = require("@emotion/react/jsx-runtime");
 var ReviewReply = ({
   avatarSrc,
   name,
@@ -8093,7 +8811,7 @@ var ReviewReply = ({
   label,
   rating
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(
     Box_default,
     {
       backgroundColor: "var(--surface-neutral)",
@@ -8103,7 +8821,7 @@ var ReviewReply = ({
       flexDirection: "column",
       gap: "var(--spacing-3)",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(
           Box_default,
           {
             display: "flex",
@@ -8111,7 +8829,7 @@ var ReviewReply = ({
             justifyContent: "space-between",
             gap: "var(--spacing-2)",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
                 UserCard_default,
                 {
                   avatarSrc,
@@ -8120,11 +8838,11 @@ var ReviewReply = ({
                   rating
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(AvailabilityBadge_default, { variant: "neutral", children: label })
+              /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(AvailabilityBadge_default, { variant: "neutral", children: label })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(Text_default, { children: content })
+        /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Text_default, { children: content })
       ]
     }
   );
@@ -8132,7 +8850,7 @@ var ReviewReply = ({
 var ReviewReply_default = ReviewReply;
 
 // src/ReviewCard/ReviewCard.tsx
-var import_jsx_runtime252 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime254 = require("@emotion/react/jsx-runtime");
 var ReviewCard = ({
   avatarSrc,
   name,
@@ -8144,7 +8862,7 @@ var ReviewCard = ({
   replies = [],
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime254.jsxs)(
     Box_default,
     {
       backgroundColor: "white",
@@ -8155,7 +8873,7 @@ var ReviewCard = ({
       gap: "var(--spacing-4)",
       className,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
           UserCard_default,
           {
             avatarSrc,
@@ -8164,10 +8882,10 @@ var ReviewCard = ({
             rating
           }
         ),
-        availabilityBadge && /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(AvailabilityBadge_default, { variant: availabilityBadge.variant, children: availabilityBadge.text }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(Text_default, { size: "md", children: content }),
-        images.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(ReviewImages_default, { images }),
-        replies.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-3)", children: replies.map((reply, index) => /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
+        availabilityBadge && /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(AvailabilityBadge_default, { variant: availabilityBadge.variant, children: availabilityBadge.text }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(Text_default, { size: "md", children: content }),
+        images.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(ReviewImages_default, { images }),
+        replies.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-3)", children: replies.map((reply, index) => /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
           ReviewReply_default,
           {
             avatarSrc: reply.avatarSrc,
@@ -8186,12 +8904,12 @@ var ReviewCard = ({
 var ReviewCard_default = ReviewCard;
 
 // src/Reviews/Reviews.tsx
-var import_react48 = require("@emotion/react");
+var import_react56 = require("@emotion/react");
 
 // src/Reviews/components/ReviewItem.tsx
-var import_jsx_runtime253 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime255 = require("@emotion/react/jsx-runtime");
 var ReviewItem = ({ label, rating }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime255.jsxs)(
     Box_default,
     {
       display: "flex",
@@ -8199,10 +8917,10 @@ var ReviewItem = ({ label, rating }) => {
       alignItems: "center",
       width: "100%",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Text_default, { fontWeight: "semibold", children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(Box_default, { display: "flex", alignItems: "center", gap: "var(--spacing-2)", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Icon_default, { variant: "StarSolid", size: "large", fill: "var(--surface-action-2)" }),
-          /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(Text_default, { fontWeight: "semibold", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(Text_default, { fontWeight: "semibold", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime255.jsxs)(Box_default, { display: "flex", alignItems: "center", gap: "var(--spacing-2)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(Icon_default, { variant: "StarSolid", size: "large", fill: "var(--surface-action-2)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime255.jsxs)(Text_default, { fontWeight: "semibold", children: [
             rating,
             "/5"
           ] })
@@ -8214,14 +8932,14 @@ var ReviewItem = ({ label, rating }) => {
 var ReviewItem_default = ReviewItem;
 
 // src/Reviews/Reviews.tsx
-var import_jsx_runtime254 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime256 = require("@emotion/react/jsx-runtime");
 var Reviews = ({
   averageRating,
   totalReviews,
   items,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime254.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime256.jsxs)(
     Box_default,
     {
       width: "100%",
@@ -8234,7 +8952,7 @@ var Reviews = ({
       p: "var(--spacing-4)",
       className,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime254.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime256.jsxs)(
           Box_default,
           {
             display: "flex",
@@ -8242,12 +8960,12 @@ var Reviews = ({
             alignItems: "center",
             gap: "var(--spacing-2)",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(Heading_default, { size: "sm", fontWeight: "bold", color: "text-primary", children: averageRating.toFixed(1) }),
-              /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(Heading_default, { size: "sm", fontWeight: "bold", color: "text-primary", children: averageRating.toFixed(1) }),
+              /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
                 StarRating_default,
                 {
                   rating: Math.floor(averageRating),
-                  css: import_react48.css`
+                  css: import_react56.css`
             > svg {
               height: 40px;
               width: 40px;
@@ -8255,7 +8973,7 @@ var Reviews = ({
           `
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime254.jsxs)(Text_default, { size: "sm", color: "text-secondary", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime256.jsxs)(Text_default, { size: "sm", color: "text-secondary", children: [
                 "Overall Rating \u2022 ",
                 totalReviews,
                 " Review",
@@ -8264,14 +8982,14 @@ var Reviews = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
           Box_default,
           {
             display: "flex",
             flexDirection: "column",
             gap: "var(--spacing-2)",
             width: "100%",
-            children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(ReviewItem_default, { label: item.label, rating: item.rating }, index))
+            children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(ReviewItem_default, { label: item.label, rating: item.rating }, index))
           }
         )
       ]
@@ -8281,7 +8999,7 @@ var Reviews = ({
 var Reviews_default = Reviews;
 
 // src/Reviews/ReviewsShowcase.tsx
-var import_jsx_runtime255 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime257 = require("@emotion/react/jsx-runtime");
 var ReviewsShowcase = () => {
   const sampleData = {
     averageRating: 4,
@@ -8303,7 +9021,7 @@ var ReviewsShowcase = () => {
       { label: "Game Abundance", rating: 5 }
     ]
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime255.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(
     Box_default,
     {
       display: "flex",
@@ -8311,24 +9029,24 @@ var ReviewsShowcase = () => {
       gap: "var(--spacing-8)",
       p: "var(--spacing-6)",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(Heading_default, { size: "lg", children: "Reviews Component Showcase" }),
-        /* @__PURE__ */ (0, import_jsx_runtime255.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-4)", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(Heading_default, { size: "md", children: "Default Reviews" }),
-          /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(Box_default, { maxWidth: "400px", children: /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(Reviews_default, { ...sampleData }) })
+        /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(Heading_default, { size: "lg", children: "Reviews Component Showcase" }),
+        /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-4)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(Heading_default, { size: "md", children: "Default Reviews" }),
+          /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(Box_default, { maxWidth: "400px", children: /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(Reviews_default, { ...sampleData }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime255.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-4)", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(Heading_default, { size: "md", children: "High Rating Reviews" }),
-          /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(Box_default, { maxWidth: "400px", children: /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(Reviews_default, { ...highRatingData }) })
+        /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-4)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(Heading_default, { size: "md", children: "High Rating Reviews" }),
+          /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(Box_default, { maxWidth: "400px", children: /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(Reviews_default, { ...highRatingData }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime255.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-4)", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(Heading_default, { size: "md", children: "Mobile Layout (320px width)" }),
-          /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-4)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(Heading_default, { size: "md", children: "Mobile Layout (320px width)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
             Box_default,
             {
               maxWidth: "320px",
               border: "1px solid var(--color-neutral-200)",
               p: "var(--spacing-4)",
-              children: /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(Reviews_default, { ...sampleData })
+              children: /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(Reviews_default, { ...sampleData })
             }
           )
         ] })
@@ -8374,6 +9092,8 @@ var ReviewsShowcase_default = ReviewsShowcase;
   ReviewCard,
   Reviews,
   ReviewsShowcase,
+  ScrollingCarousel,
+  ScrollingCarouselStep,
   Select,
   Spinner,
   StarRating,