@landtrustinc/design-system 1.2.29-beta.3 → 1.2.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +89 -57
  2. package/dist/index.js.map +1 -1
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -9064,9 +9064,19 @@ var cardContainerStyles3 = (orientation, hasContentBackground) => import_react58
9064
9064
  overflow: hidden;
9065
9065
  transition: all 0.2s ease;
9066
9066
 
9067
+ /* Force vertical layout on mobile */
9068
+ display: flex;
9069
+ flex-direction: column;
9070
+ gap: var(--spacing-2);
9071
+
9067
9072
  ${orientation === "horizontal" && import_react58.css`
9068
- box-shadow: 0 0 var(--shadow-blur-lg, 24px) var(--shadow-spread-xs, -4px)
9069
- rgba(17, 17, 17, 0.1);
9073
+ /* Apply horizontal layout only on tablet and up */
9074
+ ${media.md} {
9075
+ flex-direction: row;
9076
+ gap: var(--spacing-4);
9077
+ box-shadow: 0 0 var(--shadow-blur-lg, 24px) var(--shadow-spread-xs, -4px)
9078
+ rgba(17, 17, 17, 0.1);
9079
+ }
9070
9080
  `}
9071
9081
 
9072
9082
  ${hasContentBackground ? `
@@ -9076,7 +9086,43 @@ var cardContainerStyles3 = (orientation, hasContentBackground) => import_react58
9076
9086
  `}
9077
9087
 
9078
9088
  ${orientation === "horizontal" && `
9079
- border-radius: var(--spacing-4);
9089
+ ${media.md} {
9090
+ border-radius: var(--spacing-4);
9091
+ }
9092
+ `}
9093
+ `;
9094
+ var imageContainerStyles = (orientation) => import_react58.css`
9095
+ width: 100%;
9096
+ height: 260px;
9097
+
9098
+ ${orientation === "horizontal" && import_react58.css`
9099
+ ${media.md} {
9100
+ width: 40%;
9101
+ height: 200px;
9102
+ }
9103
+ `}
9104
+ `;
9105
+ var imageBoxStyles = (orientation) => import_react58.css`
9106
+ height: 260px;
9107
+
9108
+ ${orientation === "horizontal" && import_react58.css`
9109
+ ${media.md} {
9110
+ height: 200px;
9111
+ }
9112
+ `}
9113
+ `;
9114
+ var contentContainerStyles = (orientation, hasContentBackground) => import_react58.css`
9115
+ ${hasContentBackground ? contentWithBackgroundStyles : contentWithoutBackgroundStyles}
9116
+ width: 100%;
9117
+ display: flex;
9118
+ flex-direction: column;
9119
+ justify-content: flex-start;
9120
+
9121
+ ${orientation === "horizontal" && import_react58.css`
9122
+ ${media.md} {
9123
+ width: 60%;
9124
+ justify-content: center;
9125
+ }
9080
9126
  `}
9081
9127
  `;
9082
9128
  var imageStyles2 = import_react58.css`
@@ -9173,9 +9219,6 @@ var PackageCard = ({
9173
9219
  Box_default,
9174
9220
  {
9175
9221
  position: "relative",
9176
- display: "flex",
9177
- flexDirection: orientation === "horizontal" ? "row" : "column",
9178
- gap: orientation === "horizontal" ? "var(--spacing-4)" : "var(--spacing-2)",
9179
9222
  css: cardContainerStyles3(orientation, hasContentBackground),
9180
9223
  className,
9181
9224
  ...rest,
@@ -9184,10 +9227,9 @@ var PackageCard = ({
9184
9227
  Box_default,
9185
9228
  {
9186
9229
  position: "relative",
9187
- width: orientation === "horizontal" ? "40%" : "100%",
9188
- height: orientation === "horizontal" ? "200px" : "260px",
9189
9230
  overflow: "hidden",
9190
9231
  borderRadius: "var(--spacing-4)",
9232
+ css: imageContainerStyles(orientation),
9191
9233
  children: [
9192
9234
  availabilityBadges == null ? void 0 : availabilityBadges.map((badge2, index) => /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
9193
9235
  AvailabilityBadge_default,
@@ -9214,9 +9256,9 @@ var PackageCard = ({
9214
9256
  Box_default,
9215
9257
  {
9216
9258
  width: "100%",
9217
- height: orientation === "horizontal" ? "200px" : "260px",
9218
9259
  css: [
9219
9260
  imageStyles2,
9261
+ imageBoxStyles(orientation),
9220
9262
  {
9221
9263
  backgroundImage: `linear-gradient(181deg, rgba(0, 0, 0, 0.00) 75.32%, rgba(0, 0, 0, 0.40) 99.41%), url(${image})`
9222
9264
  }
@@ -9259,55 +9301,45 @@ var PackageCard = ({
9259
9301
  }
9260
9302
  ),
9261
9303
  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 }) }),
9262
- /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(
9263
- Box_default,
9264
- {
9265
- css: hasContentBackground ? contentWithBackgroundStyles : contentWithoutBackgroundStyles,
9266
- width: orientation === "horizontal" ? "60%" : "100%",
9267
- display: "flex",
9268
- flexDirection: "column",
9269
- justifyContent: orientation === "horizontal" ? "center" : "flex-start",
9270
- children: [
9271
- /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(
9272
- Box_default,
9273
- {
9274
- onClick,
9275
- display: "flex",
9276
- flexDirection: "column",
9277
- gap: "var(--spacing-1)",
9278
- mb: "var(--spacing-1)",
9279
- children: [
9280
- /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Text_default, { size: "md", fontWeight: "bold", children: title }) }),
9281
- /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Text_default, { size: "sm", fontWeight: "bold", children: subtitle }) }),
9282
- /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(Text_default, { size: "sm", fontWeight: "normal", children: [
9283
- "Starting Price ",
9284
- startingPrice,
9285
- " / Guest"
9286
- ] }) })
9287
- ]
9288
- }
9289
- ),
9290
- badges && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
9291
- Box_default,
9304
+ /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(Box_default, { css: contentContainerStyles(orientation, hasContentBackground), children: [
9305
+ /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(
9306
+ Box_default,
9307
+ {
9308
+ onClick,
9309
+ display: "flex",
9310
+ flexDirection: "column",
9311
+ gap: "var(--spacing-1)",
9312
+ mb: "var(--spacing-1)",
9313
+ children: [
9314
+ /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Text_default, { size: "md", fontWeight: "bold", children: title }) }),
9315
+ /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Text_default, { size: "sm", fontWeight: "bold", children: subtitle }) }),
9316
+ /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(Text_default, { size: "sm", fontWeight: "normal", children: [
9317
+ "Starting Price ",
9318
+ startingPrice,
9319
+ " / Guest"
9320
+ ] }) })
9321
+ ]
9322
+ }
9323
+ ),
9324
+ badges && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
9325
+ Box_default,
9326
+ {
9327
+ display: "flex",
9328
+ gap: "var(--spacing-2) var(--spacing-4)",
9329
+ alignItems: "center",
9330
+ flexWrap: "wrap",
9331
+ children: badges.map((badge2, index) => /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
9332
+ IconLabel_default,
9292
9333
  {
9293
- display: "flex",
9294
- gap: "var(--spacing-2) var(--spacing-4)",
9295
- alignItems: "center",
9296
- flexWrap: "wrap",
9297
- children: badges.map((badge2, index) => /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
9298
- IconLabel_default,
9299
- {
9300
- iconSize: badge2.iconSize || "medium",
9301
- label: badge2.label,
9302
- variant: badge2.variant
9303
- },
9304
- `badge-${badge2.variant}-${index}`
9305
- ))
9306
- }
9307
- )
9308
- ]
9309
- }
9310
- )
9334
+ iconSize: badge2.iconSize || "medium",
9335
+ label: badge2.label,
9336
+ variant: badge2.variant
9337
+ },
9338
+ `badge-${badge2.variant}-${index}`
9339
+ ))
9340
+ }
9341
+ )
9342
+ ] })
9311
9343
  ]
9312
9344
  }
9313
9345
  );