@neowhale/storefront 0.2.44 → 0.2.45

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 (6) hide show
  1. package/dist/landing.global.js +26 -50
  2. package/dist/react/index.cjs +26 -50
  3. package/dist/react/index.cjs.map +1 -1
  4. package/dist/react/index.js +26 -50
  5. package/dist/react/index.js.map +1 -1
  6. package/package.json +1 -1
package/dist/landing.global.js CHANGED
@@ -559,60 +559,36 @@ var WhaleStorefront = (function (exports) {
559
559
  if (images.length === 0) return null;
560
560
  c.overlay_opacity ?? 0.45;
561
561
  const count = Math.min(images.length, 5);
562
+ const imgStyle = {
563
+ width: "100%",
564
+ height: "100%",
565
+ objectFit: "cover",
566
+ objectPosition: "center top",
567
+ display: "block"
568
+ };
562
569
  return /* @__PURE__ */ jsx("div", { style: { width: "100%", overflow: "hidden", position: "relative" }, children: [
563
570
  /* @__PURE__ */ jsx("div", { style: {
564
571
  display: "grid",
565
- gridTemplateColumns: "3fr 2fr",
566
- gridTemplateRows: "auto",
567
- gap: "2px"
572
+ gridTemplateColumns: count >= 3 ? "3fr 2fr" : "1fr",
573
+ gridTemplateRows: count >= 3 ? "1fr 1fr" : "auto",
574
+ gap: "2px",
575
+ height: "100vh",
576
+ maxHeight: "900px"
568
577
  }, children: [
569
- count > 0 && /* @__PURE__ */ jsx("div", { style: { gridRow: count >= 3 ? "span 2" : void 0, overflow: "hidden", background: theme.surface, maxHeight: "70vh" }, children: /* @__PURE__ */ jsx(
570
- "img",
571
- {
572
- src: images[0].url,
573
- alt: images[0].alt || "",
574
- loading: "eager",
575
- style: { width: "100%", height: "100%", objectFit: "cover", display: "block", minHeight: "40vh" }
576
- }
577
- ) }),
578
- count >= 2 && /* @__PURE__ */ jsx("div", { style: { overflow: "hidden", background: theme.surface }, children: /* @__PURE__ */ jsx(
579
- "img",
580
- {
581
- src: images[1].url,
582
- alt: images[1].alt || "",
583
- loading: "eager",
584
- style: { width: "100%", height: "100%", objectFit: "cover", display: "block", minHeight: "20vh", maxHeight: "35vh" }
585
- }
586
- ) }),
587
- count >= 3 && /* @__PURE__ */ jsx("div", { style: { overflow: "hidden", background: theme.surface }, children: /* @__PURE__ */ jsx(
588
- "img",
589
- {
590
- src: images[2].url,
591
- alt: images[2].alt || "",
592
- loading: "lazy",
593
- style: { width: "100%", height: "100%", objectFit: "cover", display: "block", minHeight: "20vh", maxHeight: "35vh" }
594
- }
595
- ) }),
596
- count >= 4 && /* @__PURE__ */ jsx("div", { style: { gridColumn: "1 / -1", display: "grid", gridTemplateColumns: count >= 5 ? "1fr 1fr" : "1fr", gap: "2px" }, children: [
597
- /* @__PURE__ */ jsx("div", { style: { overflow: "hidden", background: theme.surface, maxHeight: "25vh" }, children: /* @__PURE__ */ jsx(
598
- "img",
599
- {
600
- src: images[3].url,
601
- alt: images[3].alt || "",
602
- loading: "lazy",
603
- style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
604
- }
605
- ) }),
606
- count >= 5 && /* @__PURE__ */ jsx("div", { style: { overflow: "hidden", background: theme.surface, maxHeight: "25vh" }, children: /* @__PURE__ */ jsx(
607
- "img",
608
- {
609
- src: images[4].url,
610
- alt: images[4].alt || "",
611
- loading: "lazy",
612
- style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
613
- }
614
- ) })
615
- ] })
578
+ count > 0 && /* @__PURE__ */ jsx("div", { style: {
579
+ gridRow: count >= 3 ? "1 / -1" : void 0,
580
+ overflow: "hidden",
581
+ background: theme.surface
582
+ }, children: /* @__PURE__ */ jsx("img", { src: images[0].url, alt: images[0].alt || "", loading: "eager", style: imgStyle }) }),
583
+ count >= 2 && /* @__PURE__ */ jsx("div", { style: { overflow: "hidden", background: theme.surface }, children: /* @__PURE__ */ jsx("img", { src: images[1].url, alt: images[1].alt || "", loading: "eager", style: imgStyle }) }),
584
+ count >= 3 && /* @__PURE__ */ jsx("div", { style: {
585
+ overflow: "hidden",
586
+ background: theme.surface,
587
+ ...count >= 4 ? { display: "grid", gridTemplateColumns: count >= 5 ? "1fr 1fr" : count >= 4 ? "1fr 1fr" : "1fr", gap: "2px" } : {}
588
+ }, children: count < 4 ? /* @__PURE__ */ jsx("img", { src: images[2].url, alt: images[2].alt || "", loading: "lazy", style: imgStyle }) : /* @__PURE__ */ jsx(Fragment2, { children: [
589
+ /* @__PURE__ */ jsx("div", { style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx("img", { src: images[2].url, alt: images[2].alt || "", loading: "lazy", style: imgStyle }) }),
590
+ count >= 4 && /* @__PURE__ */ jsx("div", { style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx("img", { src: images[3].url, alt: images[3].alt || "", loading: "lazy", style: imgStyle }) })
591
+ ] }) })
616
592
  ] }),
617
593
  /* @__PURE__ */ jsx("div", { style: {
618
594
  position: "absolute",
package/dist/react/index.cjs CHANGED
@@ -2303,60 +2303,36 @@ function CollageHeroSection({ section, theme, tracking, onEvent }) {
2303
2303
  if (images.length === 0) return null;
2304
2304
  c.overlay_opacity ?? 0.45;
2305
2305
  const count = Math.min(images.length, 5);
2306
+ const imgStyle = {
2307
+ width: "100%",
2308
+ height: "100%",
2309
+ objectFit: "cover",
2310
+ objectPosition: "center top",
2311
+ display: "block"
2312
+ };
2306
2313
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: "100%", overflow: "hidden", position: "relative" }, children: [
2307
2314
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
2308
2315
  display: "grid",
2309
- gridTemplateColumns: "3fr 2fr",
2310
- gridTemplateRows: "auto",
2311
- gap: "2px"
2316
+ gridTemplateColumns: count >= 3 ? "3fr 2fr" : "1fr",
2317
+ gridTemplateRows: count >= 3 ? "1fr 1fr" : "auto",
2318
+ gap: "2px",
2319
+ height: "100vh",
2320
+ maxHeight: "900px"
2312
2321
  }, children: [
2313
- count > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { gridRow: count >= 3 ? "span 2" : void 0, overflow: "hidden", background: theme.surface, maxHeight: "70vh" }, children: /* @__PURE__ */ jsxRuntime.jsx(
2314
- "img",
2315
- {
2316
- src: images[0].url,
2317
- alt: images[0].alt || "",
2318
- loading: "eager",
2319
- style: { width: "100%", height: "100%", objectFit: "cover", display: "block", minHeight: "40vh" }
2320
- }
2321
- ) }),
2322
- count >= 2 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflow: "hidden", background: theme.surface }, children: /* @__PURE__ */ jsxRuntime.jsx(
2323
- "img",
2324
- {
2325
- src: images[1].url,
2326
- alt: images[1].alt || "",
2327
- loading: "eager",
2328
- style: { width: "100%", height: "100%", objectFit: "cover", display: "block", minHeight: "20vh", maxHeight: "35vh" }
2329
- }
2330
- ) }),
2331
- count >= 3 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflow: "hidden", background: theme.surface }, children: /* @__PURE__ */ jsxRuntime.jsx(
2332
- "img",
2333
- {
2334
- src: images[2].url,
2335
- alt: images[2].alt || "",
2336
- loading: "lazy",
2337
- style: { width: "100%", height: "100%", objectFit: "cover", display: "block", minHeight: "20vh", maxHeight: "35vh" }
2338
- }
2339
- ) }),
2340
- count >= 4 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { gridColumn: "1 / -1", display: "grid", gridTemplateColumns: count >= 5 ? "1fr 1fr" : "1fr", gap: "2px" }, children: [
2341
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflow: "hidden", background: theme.surface, maxHeight: "25vh" }, children: /* @__PURE__ */ jsxRuntime.jsx(
2342
- "img",
2343
- {
2344
- src: images[3].url,
2345
- alt: images[3].alt || "",
2346
- loading: "lazy",
2347
- style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
2348
- }
2349
- ) }),
2350
- count >= 5 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflow: "hidden", background: theme.surface, maxHeight: "25vh" }, children: /* @__PURE__ */ jsxRuntime.jsx(
2351
- "img",
2352
- {
2353
- src: images[4].url,
2354
- alt: images[4].alt || "",
2355
- loading: "lazy",
2356
- style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
2357
- }
2358
- ) })
2359
- ] })
2322
+ count > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
2323
+ gridRow: count >= 3 ? "1 / -1" : void 0,
2324
+ overflow: "hidden",
2325
+ background: theme.surface
2326
+ }, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: images[0].url, alt: images[0].alt || "", loading: "eager", style: imgStyle }) }),
2327
+ count >= 2 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflow: "hidden", background: theme.surface }, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: images[1].url, alt: images[1].alt || "", loading: "eager", style: imgStyle }) }),
2328
+ count >= 3 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
2329
+ overflow: "hidden",
2330
+ background: theme.surface,
2331
+ ...count >= 4 ? { display: "grid", gridTemplateColumns: count >= 5 ? "1fr 1fr" : count >= 4 ? "1fr 1fr" : "1fr", gap: "2px" } : {}
2332
+ }, children: count < 4 ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: images[2].url, alt: images[2].alt || "", loading: "lazy", style: imgStyle }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
2333
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: images[2].url, alt: images[2].alt || "", loading: "lazy", style: imgStyle }) }),
2334
+ count >= 4 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: images[3].url, alt: images[3].alt || "", loading: "lazy", style: imgStyle }) })
2335
+ ] }) })
2360
2336
  ] }),
2361
2337
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
2362
2338
  position: "absolute",