@landtrustinc/design-system 1.2.21 → 1.2.23

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) })
         ]
@@ -5542,8 +5544,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 +5576,7 @@ var WidgetPanel = ({ className, style, children }) => {
 };
 var WidgetRoot = ({
   ariaLabel,
-  icon = "Plus",
+  icon: icon2 = "Plus",
   expandedIcon = "Xmark",
   defaultExpanded = false,
   expanded,
@@ -5637,11 +5639,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,
@@ -7876,55 +7878,686 @@ var Navigation = ({
 };
 var Navigation_default = Navigation;
 
+// src/ScrollingCarousel/components/ScrollingCarouselStep.tsx
+var import_react48 = 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(
+  null
+);
+
+// src/ScrollingCarousel/ScrollingCarousel.styles.ts
+var import_react47 = require("@emotion/react");
+var carouselRoot = import_react47.css`
+  position: relative;
+`;
+var carousel = import_react47.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_react47.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_react47.css`
+  ${(position2 === "left-right" || position2 === "top-right") && `
+    display: none;
+
+    @media (min-width: 768px) {
+      display: block;
+    }
+  `}
+`;
+var iconWrapper = import_react47.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_react47.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_react47.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_react47.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_react47.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_react47.css`
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  color: var(--color-base-black);
+`;
+var dots = import_react47.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_react47.css`
+  display: flex;
+  overflow: hidden;
+`;
+var dot = (dotsColor) => import_react47.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_react47.css`
+  &::after {
+    transform: translate(-50%, -50%) scale(0.9);
+  }
+`;
+var dotDistance3 = import_react47.css`
+  &::after {
+    transform: translate(-50%, -50%) scale(0.8);
+  }
+`;
+var dotDistanceGreaterThan3 = import_react47.css`
+  &::after {
+    transform: translate(-50%, -50%) scale(0.7);
+  }
+`;
+var dotVisible = import_react47.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_react48.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_react48.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_react52 = __toESM(require("react"));
+
+// src/ScrollingCarousel/hooks/useCarouselDots.ts
+var import_react49 = 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_react49.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_react50 = 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_react50.useCallback)(
+    (index) => {
+      if (carousel2.current) {
+        return carousel2.current.querySelectorAll(`[data-step-${id}]`)[index] || null;
+      }
+      return null;
+    },
+    [carousel2, id]
+  );
+  const next = (0, import_react50.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_react50.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_react50.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_react51 = require("react");
+var useCarouselVisibility = (carousel2) => {
+  const [state, dispatch] = (0, import_react51.useReducer)(childVisibilityReducer, {
+    childVisibility: []
+  });
+  const carouselContextApi = (0, import_react51.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_react52.useRef)(null);
+  const [isHovering, setIsHovering] = (0, import_react52.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_react52.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_react52.default.Children.map(
+    children,
+    (child, index) => import_react52.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_react53 = require("@emotion/react");
+var cardContainerStyles3 = import_react53.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_react53.css`
   position: relative;
   width: 100%;
-  height: 200px;
+  height: 260px;
   overflow: hidden;
   border-radius: var(--spacing-4);
 `;
-var imageStyles2 = import_react46.css`
+var imageStyles2 = import_react53.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_react53.css`
   position: absolute;
   top: var(--spacing-3);
   left: var(--spacing-3);
   z-index: 2;
 `;
-var heartIconStyles = import_react46.css`
+var badgeBottomRightStyles = import_react53.css`
+  position: absolute;
+  bottom: var(--spacing-3);
+  right: var(--spacing-3);
+  z-index: 2;
+`;
+var heartIconStyles = import_react53.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 +8571,180 @@ var heartIconStyles = import_react46.css`
     transform: scale(1.1);
   }
 `;
-var contentStyles2 = import_react46.css`
-  padding: var(--spacing-3);
+var contentWithBackgroundStyles = import_react53.css`
+  padding: var(--spacing-2) 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 overlayStyles = import_react53.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,
+            {
+              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,
             {
-              variant: isFavorited ? "HeartSolid" : "Heart",
-              size: "medium"
+              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 +8753,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 +8763,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_react54 = require("@emotion/react");
+var imageStyles3 = import_react54.css`
   flex: 1;
   min-width: 0;
   max-width: 100%;
@@ -8065,13 +8775,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 +8794,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 +8803,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 +8813,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 +8821,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 +8830,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 +8842,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 +8854,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 +8865,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 +8874,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 +8896,12 @@ var ReviewCard = ({
 var ReviewCard_default = ReviewCard;
 
 // src/Reviews/Reviews.tsx
-var import_react48 = require("@emotion/react");
+var import_react55 = 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 +8909,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 +8924,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 +8944,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 +8952,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_react55.css`
             > svg {
               height: 40px;
               width: 40px;
@@ -8255,7 +8965,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 +8974,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 +8991,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 +9013,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 +9021,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 +9084,8 @@ var ReviewsShowcase_default = ReviewsShowcase;
   ReviewCard,
   Reviews,
   ReviewsShowcase,
+  ScrollingCarousel,
+  ScrollingCarouselStep,
   Select,
   Spinner,
   StarRating,