@nok-integration/storefront-react 0.19.23 → 0.19.25

package/dist/index.mjs

@@ -5689,7 +5689,6 @@ const ES = {
   "See all": "Ver todo",
   "See more": "Ver más",
   "Select an option": "Selecciona una opción",
-  Share: "Compartir",
   Shipping: "Envío",
   "Shipping address": "Dirección de envío",
   "Shipping and returns": "Envíos y devoluciones",
@@ -9009,11 +9008,11 @@ function ShippingInfo() {
     })]
   });
 }
-const bar = "_bar_v5jjj_1";
-const floating$1 = "_floating_v5jjj_52";
-const divider = "_divider_v5jjj_58";
-const info$1 = "_info_v5jjj_62";
-const actions = "_actions_v5jjj_70";
+const bar = "_bar_coyti_1";
+const floating$1 = "_floating_coyti_53";
+const divider = "_divider_coyti_59";
+const info$1 = "_info_coyti_63";
+const actions = "_actions_coyti_71";
 const styles$k = {
   bar,
   floating: floating$1,
@@ -9299,22 +9298,20 @@ function CartSheetProvider({ children }) {
     })]
   });
 }
-const gallery = "_gallery_9e68b_1";
-const track$2 = "_track_9e68b_8";
-const slide$1 = "_slide_9e68b_32";
-const image$4 = "_image_9e68b_39";
-const placeholder$1 = "_placeholder_9e68b_43";
-const share = "_share_9e68b_50";
-const dots$2 = "_dots_9e68b_83";
-const dot$2 = "_dot_9e68b_83";
-const dotActive$2 = "_dotActive_9e68b_134";
+const gallery = "_gallery_nv2a9_1";
+const track$2 = "_track_nv2a9_8";
+const slide$1 = "_slide_nv2a9_32";
+const image$4 = "_image_nv2a9_39";
+const placeholder$1 = "_placeholder_nv2a9_43";
+const dots$2 = "_dots_nv2a9_49";
+const dot$2 = "_dot_nv2a9_49";
+const dotActive$2 = "_dotActive_nv2a9_88";
 const styles$i = {
   gallery,
   track: track$2,
   slide: slide$1,
   image: image$4,
   placeholder: placeholder$1,
-  share,
   dots: dots$2,
   dot: dot$2,
   dotActive: dotActive$2
@@ -9357,37 +9354,9 @@ function MediaGallery({ media: media2, alt }) {
       "aria-hidden": "true"
     });
   }
-  function share2() {
-    if (typeof navigator !== "undefined" && navigator.share) {
-      void navigator.share({
-        title: alt,
-        url: window.location.href
-      }).catch(() => {
-      });
-    }
-  }
   return jsxs("div", {
     className: styles$i.gallery,
-    children: [jsx("button", {
-      type: "button",
-      className: styles$i.share,
-      onClick: share2,
-      "aria-label": t("Share"),
-      children: jsx("svg", {
-        width: "20",
-        height: "20",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        "aria-hidden": "true",
-        children: jsx("path", {
-          d: "M12 3v12M12 3 8 7m4-4 4 4M5 12v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6",
-          stroke: "currentColor",
-          strokeWidth: "1.6",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        })
-      })
-    }), jsx("div", {
+    children: [jsx("div", {
       className: styles$i.track,
       ref: trackRef,
       role: "group",
@@ -10068,7 +10037,14 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
   const colourSoldOut = hasColours && selectedColour ? !colours.find((c) => c.value === selectedColour)?.available : false;
   const purchasable = anyInStock && !colourSoldOut;
   const colourImage = useMemo(() => selectedColour ? baseColours.find((c) => c.value === selectedColour)?.image : void 0, [baseColours, selectedColour]);
-  const media2 = useMemo(() => colourImage ? [colourImage, ...product.media.filter((m) => m !== colourImage)] : product.media, [colourImage, product.media]);
+  const shootColour = baseColours[0]?.value;
+  const media2 = useMemo(() => {
+    if (!colourImage) return product.media;
+    if (selectedColour === shootColour) {
+      return [colourImage, ...product.media.filter((m) => m !== colourImage)];
+    }
+    return [colourImage];
+  }, [colourImage, product.media, selectedColour, shootColour]);
   function selectSize(value2) {
     setSelectedSize(value2);
     setSizeError(false);

package/dist/standalone/storefront.mjs

@@ -5689,7 +5689,6 @@ const ES = {
   "See all": "Ver todo",
   "See more": "Ver más",
   "Select an option": "Selecciona una opción",
-  Share: "Compartir",
   Shipping: "Envío",
   "Shipping address": "Dirección de envío",
   "Shipping and returns": "Envíos y devoluciones",
@@ -9009,11 +9008,11 @@ function ShippingInfo() {
     })]
   });
 }
-const bar = "_bar_v5jjj_1";
-const floating$1 = "_floating_v5jjj_52";
-const divider = "_divider_v5jjj_58";
-const info$1 = "_info_v5jjj_62";
-const actions = "_actions_v5jjj_70";
+const bar = "_bar_coyti_1";
+const floating$1 = "_floating_coyti_53";
+const divider = "_divider_coyti_59";
+const info$1 = "_info_coyti_63";
+const actions = "_actions_coyti_71";
 const styles$k = {
   bar,
   floating: floating$1,
@@ -9299,22 +9298,20 @@ function CartSheetProvider({ children }) {
     })]
   });
 }
-const gallery = "_gallery_9e68b_1";
-const track$2 = "_track_9e68b_8";
-const slide$1 = "_slide_9e68b_32";
-const image$4 = "_image_9e68b_39";
-const placeholder$1 = "_placeholder_9e68b_43";
-const share = "_share_9e68b_50";
-const dots$2 = "_dots_9e68b_83";
-const dot$2 = "_dot_9e68b_83";
-const dotActive$2 = "_dotActive_9e68b_134";
+const gallery = "_gallery_nv2a9_1";
+const track$2 = "_track_nv2a9_8";
+const slide$1 = "_slide_nv2a9_32";
+const image$4 = "_image_nv2a9_39";
+const placeholder$1 = "_placeholder_nv2a9_43";
+const dots$2 = "_dots_nv2a9_49";
+const dot$2 = "_dot_nv2a9_49";
+const dotActive$2 = "_dotActive_nv2a9_88";
 const styles$i = {
   gallery,
   track: track$2,
   slide: slide$1,
   image: image$4,
   placeholder: placeholder$1,
-  share,
   dots: dots$2,
   dot: dot$2,
   dotActive: dotActive$2
@@ -9357,37 +9354,9 @@ function MediaGallery({ media: media2, alt }) {
       "aria-hidden": "true"
     });
   }
-  function share2() {
-    if (typeof navigator !== "undefined" && navigator.share) {
-      void navigator.share({
-        title: alt,
-        url: window.location.href
-      }).catch(() => {
-      });
-    }
-  }
   return jsxs("div", {
     className: styles$i.gallery,
-    children: [jsx("button", {
-      type: "button",
-      className: styles$i.share,
-      onClick: share2,
-      "aria-label": t("Share"),
-      children: jsx("svg", {
-        width: "20",
-        height: "20",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        "aria-hidden": "true",
-        children: jsx("path", {
-          d: "M12 3v12M12 3 8 7m4-4 4 4M5 12v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6",
-          stroke: "currentColor",
-          strokeWidth: "1.6",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        })
-      })
-    }), jsx("div", {
+    children: [jsx("div", {
       className: styles$i.track,
       ref: trackRef,
       role: "group",
@@ -10068,7 +10037,14 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
   const colourSoldOut = hasColours && selectedColour ? !colours.find((c) => c.value === selectedColour)?.available : false;
   const purchasable = anyInStock && !colourSoldOut;
   const colourImage = useMemo(() => selectedColour ? baseColours.find((c) => c.value === selectedColour)?.image : void 0, [baseColours, selectedColour]);
-  const media2 = useMemo(() => colourImage ? [colourImage, ...product.media.filter((m) => m !== colourImage)] : product.media, [colourImage, product.media]);
+  const shootColour = baseColours[0]?.value;
+  const media2 = useMemo(() => {
+    if (!colourImage) return product.media;
+    if (selectedColour === shootColour) {
+      return [colourImage, ...product.media.filter((m) => m !== colourImage)];
+    }
+    return [colourImage];
+  }, [colourImage, product.media, selectedColour, shootColour]);
   function selectSize(value2) {
     setSelectedSize(value2);
     setSizeError(false);

package/dist/standalone/styles.css

@@ -2340,10 +2340,9 @@
   height: 1px;
   background: var(--color-border-default);
 }
-._bar_v5jjj_1 {
+._bar_coyti_1 {
   position: sticky;
   bottom: 0;
-  bottom: calc(100lvh - 100dvh);
   left: 0;
   right: 0;
   display: flex;
@@ -2353,24 +2352,24 @@
   background: var(--color-surface-default);
   z-index: 50;
 }
-._floating_v5jjj_52 {
+._floating_coyti_53 {
   border-radius: var(--radius-12) var(--radius-12) 0 0;
   filter: drop-shadow(0 -4px 12px rgba(206, 206, 206, 0.48));
 }
-._divider_v5jjj_58 {
+._divider_coyti_59 {
   border-top: 1px solid var(--color-border-default);
 }
-._info_v5jjj_62 {
+._info_coyti_63 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-weight: var(--font-weight-bold);
 }
-._actions_v5jjj_70 {
+._actions_coyti_71 {
   display: flex;
   gap: var(--space-8);
 }
-._actions_v5jjj_70 > * {
+._actions_coyti_71 > * {
   flex: 1 1 0;
 }
 ._surface_nkc99_15 {
@@ -2430,13 +2429,13 @@
   flex-direction: column;
   gap: var(--space-20);
 }
-._gallery_9e68b_1 {
+._gallery_nv2a9_1 {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
 }
-._track_9e68b_8 {
+._track_nv2a9_8 {
   display: flex;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
@@ -2445,51 +2444,29 @@
   background: var(--color-surface-soft);
   scrollbar-width: none;
 }
-._track_9e68b_8::-webkit-scrollbar {
+._track_nv2a9_8::-webkit-scrollbar {
   display: none;
 }
-._slide_9e68b_32 {
+._slide_nv2a9_32 {
   position: relative;
   flex: 0 0 100%;
   scroll-snap-align: center;
   aspect-ratio: 375 / 475;
 }
-._image_9e68b_39 {
+._image_nv2a9_39 {
   object-fit: cover;
 }
-._placeholder_9e68b_43 {
+._placeholder_nv2a9_43 {
   width: 100%;
   aspect-ratio: 375 / 475;
   background: var(--color-surface-soft);
 }
-._share_9e68b_50 {
-  position: absolute;
-  z-index: 1;
-  top: var(--space-16);
-  right: var(--space-16);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  border: none;
-  border-radius: var(--radius-8);
-  background: var(--color-surface-soft);
-  color: var(--color-text-default);
-  cursor: pointer;
-}
-._dots_9e68b_83 {
+._dots_nv2a9_49 {
   display: flex;
   justify-content: center;
   gap: var(--space-6);
 }
-._share_9e68b_50::after {
-  content: "";
-  position: absolute;
-  inset: -6px;
-}
-._dot_9e68b_83 {
+._dot_nv2a9_49 {
   width: 8px;
   height: 8px;
   padding: 0;
@@ -2499,12 +2476,12 @@
   cursor: pointer;
   position: relative;
 }
-._dot_9e68b_83::after {
+._dot_nv2a9_49::after {
   content: "";
   position: absolute;
   inset: -18px -3px;
 }
-._dotActive_9e68b_134 {
+._dotActive_nv2a9_88 {
   background: var(--color-surface-max);
 }
 ._scrim_ddqa4_8 {

package/dist/styles.css

@@ -2340,10 +2340,9 @@
   height: 1px;
   background: var(--color-border-default);
 }
-._bar_v5jjj_1 {
+._bar_coyti_1 {
   position: sticky;
   bottom: 0;
-  bottom: calc(100lvh - 100dvh);
   left: 0;
   right: 0;
   display: flex;
@@ -2353,24 +2352,24 @@
   background: var(--color-surface-default);
   z-index: 50;
 }
-._floating_v5jjj_52 {
+._floating_coyti_53 {
   border-radius: var(--radius-12) var(--radius-12) 0 0;
   filter: drop-shadow(0 -4px 12px rgba(206, 206, 206, 0.48));
 }
-._divider_v5jjj_58 {
+._divider_coyti_59 {
   border-top: 1px solid var(--color-border-default);
 }
-._info_v5jjj_62 {
+._info_coyti_63 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-weight: var(--font-weight-bold);
 }
-._actions_v5jjj_70 {
+._actions_coyti_71 {
   display: flex;
   gap: var(--space-8);
 }
-._actions_v5jjj_70 > * {
+._actions_coyti_71 > * {
   flex: 1 1 0;
 }
 ._surface_nkc99_15 {
@@ -2430,13 +2429,13 @@
   flex-direction: column;
   gap: var(--space-20);
 }
-._gallery_9e68b_1 {
+._gallery_nv2a9_1 {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
 }
-._track_9e68b_8 {
+._track_nv2a9_8 {
   display: flex;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
@@ -2445,51 +2444,29 @@
   background: var(--color-surface-soft);
   scrollbar-width: none;
 }
-._track_9e68b_8::-webkit-scrollbar {
+._track_nv2a9_8::-webkit-scrollbar {
   display: none;
 }
-._slide_9e68b_32 {
+._slide_nv2a9_32 {
   position: relative;
   flex: 0 0 100%;
   scroll-snap-align: center;
   aspect-ratio: 375 / 475;
 }
-._image_9e68b_39 {
+._image_nv2a9_39 {
   object-fit: cover;
 }
-._placeholder_9e68b_43 {
+._placeholder_nv2a9_43 {
   width: 100%;
   aspect-ratio: 375 / 475;
   background: var(--color-surface-soft);
 }
-._share_9e68b_50 {
-  position: absolute;
-  z-index: 1;
-  top: var(--space-16);
-  right: var(--space-16);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  border: none;
-  border-radius: var(--radius-8);
-  background: var(--color-surface-soft);
-  color: var(--color-text-default);
-  cursor: pointer;
-}
-._dots_9e68b_83 {
+._dots_nv2a9_49 {
   display: flex;
   justify-content: center;
   gap: var(--space-6);
 }
-._share_9e68b_50::after {
-  content: "";
-  position: absolute;
-  inset: -6px;
-}
-._dot_9e68b_83 {
+._dot_nv2a9_49 {
   width: 8px;
   height: 8px;
   padding: 0;
@@ -2499,12 +2476,12 @@
   cursor: pointer;
   position: relative;
 }
-._dot_9e68b_83::after {
+._dot_nv2a9_49::after {
   content: "";
   position: absolute;
   inset: -18px -3px;
 }
-._dotActive_9e68b_134 {
+._dotActive_nv2a9_88 {
   background: var(--color-surface-max);
 }
 ._scrim_ddqa4_8 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nok-integration/storefront-react",
-  "version": "0.19.23",
+  "version": "0.19.25",
   "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
   "license": "UNLICENSED",
   "publishConfig": {