@landtrustinc/design-system 1.2.25 → 1.2.26

package/dist/index.d.ts

@@ -2107,8 +2107,14 @@ type PackageCardProps = {
      * When false, only shows top padding without background
      */
     hasContentBackground?: boolean;
+    /**
+     * Orientation of the card (default: 'vertical')
+     * - 'vertical': Image on top, content below
+     * - 'horizontal': Image on left, content on right
+     */
+    orientation?: 'vertical' | 'horizontal';
 };
-declare const PackageCard: ({ images, title, subtitle, startingPrice, isFavorited, onFavoriteClick, onClick, className, badges, availabilityBadges, id, hasContentBackground, ...rest }: PackageCardProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const PackageCard: ({ images, title, subtitle, startingPrice, isFavorited, onFavoriteClick, onClick, className, badges, availabilityBadges, id, hasContentBackground, orientation, ...rest }: PackageCardProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type PackageHeaderProps = {
     /**

package/dist/index.js

@@ -8529,16 +8529,7 @@ var cardContainerStyles3 = import_react54.css`
   overflow: hidden;
   transition: all 0.2s ease;
 `;
-var imageContainerStyles = import_react54.css`
-  position: relative;
-  width: 100%;
-  height: 260px;
-  overflow: hidden;
-  border-radius: var(--spacing-4);
-`;
 var imageStyles2 = import_react54.css`
-  width: 100%;
-  height: 260px;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -8580,11 +8571,11 @@ var heartIconStyles = import_react54.css`
   }
 `;
 var contentWithBackgroundStyles = import_react54.css`
-  padding: var(--spacing-2) var(--spacing-3) var(--spacing-4) var(--spacing-3);
+  padding: 0 var(--spacing-3) var(--spacing-4) var(--spacing-3);
   background-color: var(--surface-page);
 `;
 var contentWithoutBackgroundStyles = import_react54.css`
-  padding-top: var(--spacing-2);
+  padding-top: 0 var(--spacing-2) var(--spacing-2) var(--spacing-2);
 `;
 var overlayStyles = import_react54.css`
   position: absolute;
@@ -8614,6 +8605,7 @@ var PackageCard = ({
   availabilityBadges,
   id,
   hasContentBackground = false,
+  orientation = "vertical",
   ...rest
 }) => {
   const carouselId = id || `package-card-${title.replace(/\s+/g, "-")}`;
@@ -8623,80 +8615,99 @@ var PackageCard = ({
   return /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(
     Box_default,
     {
+      display: "flex",
+      flexDirection: orientation === "horizontal" ? "row" : "column",
+      gap: orientation === "horizontal" ? "var(--spacing-4)" : "var(--spacing-2)",
       css: cardContainerStyles3,
       className,
       ...rest,
       borderRadius: hasContentBackground ? "var(--spacing-4)" : "var(--spacing-4) var(--spacing-4) 0 0",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(Box_default, { css: imageContainerStyles, children: [
-          availabilityBadges == null ? void 0 : availabilityBadges.map((badge2, index) => /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
-            AvailabilityBadge_default,
-            {
-              variant: badge2.variant,
-              css: badge2.position === "bottom-right" ? badgeBottomRightStyles : badgeTopLeftStyles,
-              children: badge2.text
-            },
-            `availability-${index}`
-          )),
-          shouldShowOverlay && /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(Box_default, { css: overlayStyles }),
-          /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
-            ScrollingCarousel,
-            {
-              showDots: images.length > 1,
-              showNavigationOnHover: true,
-              id: carouselId,
-              children: images.filter((image) => !!image).map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
-                ScrollingCarouselStep,
+        /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(
+          Box_default,
+          {
+            position: "relative",
+            width: orientation === "horizontal" ? "40%" : "100%",
+            height: orientation === "horizontal" ? "200px" : "260px",
+            overflow: "hidden",
+            borderRadius: "var(--spacing-4)",
+            children: [
+              availabilityBadges == null ? void 0 : availabilityBadges.map((badge2, index) => /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+                AvailabilityBadge_default,
                 {
-                  parentId: carouselId,
-                  onClick,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
-                    Box_default,
+                  variant: badge2.variant,
+                  css: badge2.position === "bottom-right" ? badgeBottomRightStyles : badgeTopLeftStyles,
+                  children: badge2.text
+                },
+                `availability-${index}`
+              )),
+              shouldShowOverlay && /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(Box_default, { css: overlayStyles }),
+              /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+                ScrollingCarousel,
+                {
+                  showDots: images.length > 1,
+                  showNavigationOnHover: true,
+                  id: carouselId,
+                  children: images.filter((image) => !!image).map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+                    ScrollingCarouselStep,
                     {
-                      css: [
-                        imageStyles2,
+                      parentId: carouselId,
+                      onClick,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+                        Box_default,
                         {
-                          backgroundImage: `linear-gradient(181deg, rgba(0, 0, 0, 0.00) 75.32%, rgba(0, 0, 0, 0.40) 99.41%), url(${image})`
+                          width: "100%",
+                          height: orientation === "horizontal" ? "200px" : "260px",
+                          css: [
+                            imageStyles2,
+                            {
+                              backgroundImage: `linear-gradient(181deg, rgba(0, 0, 0, 0.00) 75.32%, rgba(0, 0, 0, 0.40) 99.41%), url(${image})`
+                            }
+                          ]
                         }
-                      ]
-                    }
-                  )
-                },
-                `image-${index}`
-              ))
-            }
-          ),
-          onFavoriteClick && /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
-            Box_default,
-            {
-              css: heartIconStyles,
-              onClick: (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                onFavoriteClick == null ? void 0 : onFavoriteClick();
-              },
-              children: isFavorited ? /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
-                Icon_default,
-                {
-                  variant: "HeartSolid",
-                  size: "small",
-                  fill: "var(--color-error-500)"
+                      )
+                    },
+                    `image-${index}`
+                  ))
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
-                Icon_default,
+              ),
+              onFavoriteClick && /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+                Box_default,
                 {
-                  variant: "Heart",
-                  size: "small",
-                  fill: "var(--color-base-black)"
+                  css: heartIconStyles,
+                  onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onFavoriteClick == null ? void 0 : onFavoriteClick();
+                  },
+                  children: isFavorited ? /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+                    Icon_default,
+                    {
+                      variant: "HeartSolid",
+                      size: "small",
+                      fill: "var(--color-error-500)"
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+                    Icon_default,
+                    {
+                      variant: "Heart",
+                      size: "small",
+                      fill: "var(--color-base-black)"
+                    }
+                  )
                 }
               )
-            }
-          )
-        ] }),
+            ]
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(
           Box_default,
           {
             css: hasContentBackground ? contentWithBackgroundStyles : contentWithoutBackgroundStyles,
+            width: orientation === "horizontal" ? "60%" : "100%",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: orientation === "horizontal" ? "center" : "flex-start",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(
                 Box_default,