@landtrustinc/design-system 1.2.29-beta.2 → 1.2.29-beta.4

package/dist/index.js

@@ -8677,14 +8677,14 @@ var ScrollingCarouselStep = ({
       });
     }
   }, [inView, index, dispatch]);
-  const dataStep = { [`data-step-${parentId}`]: index };
   return /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
     "div",
     {
       ref,
       css: step,
       className,
-      ...dataStep,
+      "data-carousel-id": parentId,
+      "data-carousel-index": index,
       onClick,
       role: "group",
       "aria-roledescription": "slide",
@@ -8798,8 +8798,8 @@ var useCarouselNavigation = ({
   const getStepEl = (0, import_react55.useCallback)(
     (index) => {
       if (carousel2.current) {
-        const escapedId = CSS.escape(id);
-        return carousel2.current.querySelectorAll(`[data-step-${escapedId}]`)[index] || null;
+        const selector = `[data-carousel-id="${id}"][data-carousel-index="${index}"]`;
+        return carousel2.current.querySelector(selector);
       }
       return null;
     },
@@ -9064,9 +9064,19 @@ var cardContainerStyles3 = (orientation, hasContentBackground) => import_react58
   overflow: hidden;
   transition: all 0.2s ease;
 
+  /* Force vertical layout on mobile */
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+
   ${orientation === "horizontal" && import_react58.css`
-    box-shadow: 0 0 var(--shadow-blur-lg, 24px) var(--shadow-spread-xs, -4px)
-      rgba(17, 17, 17, 0.1);
+    /* Apply horizontal layout only on tablet and up */
+    ${media.md} {
+      flex-direction: row;
+      gap: var(--spacing-4);
+      box-shadow: 0 0 var(--shadow-blur-lg, 24px) var(--shadow-spread-xs, -4px)
+        rgba(17, 17, 17, 0.1);
+    }
   `}
 
   ${hasContentBackground ? `
@@ -9076,7 +9086,43 @@ var cardContainerStyles3 = (orientation, hasContentBackground) => import_react58
   `}
 
   ${orientation === "horizontal" && `
-    border-radius: var(--spacing-4);
+    ${media.md} {
+      border-radius: var(--spacing-4);
+    }
+  `}
+`;
+var imageContainerStyles = (orientation) => import_react58.css`
+  width: 100%;
+  height: 260px;
+
+  ${orientation === "horizontal" && import_react58.css`
+    ${media.md} {
+      width: 40%;
+      height: 200px;
+    }
+  `}
+`;
+var imageBoxStyles = (orientation) => import_react58.css`
+  height: 260px;
+
+  ${orientation === "horizontal" && import_react58.css`
+    ${media.md} {
+      height: 200px;
+    }
+  `}
+`;
+var contentContainerStyles = (orientation, hasContentBackground) => import_react58.css`
+  ${hasContentBackground ? contentWithBackgroundStyles : contentWithoutBackgroundStyles}
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+
+  ${orientation === "horizontal" && import_react58.css`
+    ${media.md} {
+      width: 60%;
+      justify-content: center;
+    }
   `}
 `;
 var imageStyles2 = import_react58.css`
@@ -9173,9 +9219,6 @@ var PackageCard = ({
     Box_default,
     {
       position: "relative",
-      display: "flex",
-      flexDirection: orientation === "horizontal" ? "row" : "column",
-      gap: orientation === "horizontal" ? "var(--spacing-4)" : "var(--spacing-2)",
       css: cardContainerStyles3(orientation, hasContentBackground),
       className,
       ...rest,
@@ -9184,10 +9227,9 @@ var PackageCard = ({
           Box_default,
           {
             position: "relative",
-            width: orientation === "horizontal" ? "40%" : "100%",
-            height: orientation === "horizontal" ? "200px" : "260px",
             overflow: "hidden",
             borderRadius: "var(--spacing-4)",
+            css: imageContainerStyles(orientation),
             children: [
               availabilityBadges == null ? void 0 : availabilityBadges.map((badge2, index) => /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
                 AvailabilityBadge_default,
@@ -9214,9 +9256,9 @@ var PackageCard = ({
                         Box_default,
                         {
                           width: "100%",
-                          height: orientation === "horizontal" ? "200px" : "260px",
                           css: [
                             imageStyles2,
+                            imageBoxStyles(orientation),
                             {
                               backgroundImage: `linear-gradient(181deg, rgba(0, 0, 0, 0.00) 75.32%, rgba(0, 0, 0, 0.40) 99.41%), url(${image})`
                             }
@@ -9259,55 +9301,45 @@ var PackageCard = ({
           }
         ),
         actions && actions.length > 0 && orientation === "horizontal" && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Box_default, { css: actionMenuStyles, children: /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(ActionMenu_default, { actions }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime253.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_runtime253.jsxs)(
-                Box_default,
-                {
-                  onClick,
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "var(--spacing-1)",
-                  mb: "var(--spacing-1)",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Text_default, { size: "md", fontWeight: "bold", children: title }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Text_default, { size: "sm", fontWeight: "bold", children: subtitle }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(Text_default, { size: "sm", fontWeight: "normal", children: [
-                      "Starting Price ",
-                      startingPrice,
-                      " / Guest"
-                    ] }) })
-                  ]
-                }
-              ),
-              badges && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
-                Box_default,
+        /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(Box_default, { css: contentContainerStyles(orientation, hasContentBackground), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(
+            Box_default,
+            {
+              onClick,
+              display: "flex",
+              flexDirection: "column",
+              gap: "var(--spacing-1)",
+              mb: "var(--spacing-1)",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Text_default, { size: "md", fontWeight: "bold", children: title }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Text_default, { size: "sm", fontWeight: "bold", children: subtitle }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(Text_default, { size: "sm", fontWeight: "normal", children: [
+                  "Starting Price ",
+                  startingPrice,
+                  " / Guest"
+                ] }) })
+              ]
+            }
+          ),
+          badges && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime253.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_runtime253.jsx)(
+                IconLabel_default,
                 {
-                  display: "flex",
-                  gap: "var(--spacing-2) var(--spacing-4)",
-                  alignItems: "center",
-                  flexWrap: "wrap",
-                  children: badges.map((badge2, index) => /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
-                    IconLabel_default,
-                    {
-                      iconSize: badge2.iconSize || "medium",
-                      label: badge2.label,
-                      variant: badge2.variant
-                    },
-                    `badge-${badge2.variant}-${index}`
-                  ))
-                }
-              )
-            ]
-          }
-        )
+                  iconSize: badge2.iconSize || "medium",
+                  label: badge2.label,
+                  variant: badge2.variant
+                },
+                `badge-${badge2.variant}-${index}`
+              ))
+            }
+          )
+        ] })
       ]
     }
   );