@nok-integration/storefront-react 0.16.2 → 0.16.3

package/dist/index.mjs

@@ -7403,15 +7403,15 @@ function CartSheetProvider({ children }) {
     isOpen && /* @__PURE__ */ jsx(BottomSheet, { open: true, onClose: close2, title: "Cart", children: /* @__PURE__ */ jsx(CartView, { onContinueShopping: close2 }) })
   ] });
 }
-const gallery = "_gallery_h8m00_1";
-const track$2 = "_track_h8m00_8";
-const slide$1 = "_slide_h8m00_19";
-const image$4 = "_image_h8m00_26";
-const placeholder$1 = "_placeholder_h8m00_30";
-const share = "_share_h8m00_37";
-const dots$2 = "_dots_h8m00_54";
-const dot$2 = "_dot_h8m00_54";
-const dotActive$2 = "_dotActive_h8m00_78";
+const gallery = "_gallery_1e69n_1";
+const track$2 = "_track_1e69n_8";
+const slide$1 = "_slide_1e69n_25";
+const image$4 = "_image_1e69n_32";
+const placeholder$1 = "_placeholder_1e69n_36";
+const share = "_share_1e69n_43";
+const dots$2 = "_dots_1e69n_60";
+const dot$2 = "_dot_1e69n_60";
+const dotActive$2 = "_dotActive_1e69n_84";
 const styles$i = {
   gallery,
   track: track$2,
@@ -8212,15 +8212,15 @@ function LifestyleImage({ images }) {
     )) })
   ] }) });
 }
-const section$2 = "_section_iy175_1";
-const track = "_track_iy175_8";
-const card = "_card_iy175_31";
-const quote = "_quote_iy175_43";
-const author = "_author_iy175_51";
-const dots = "_dots_iy175_57";
-const dot = "_dot_iy175_57";
-const dotActive = "_dotActive_iy175_70";
-const disclaimer = "_disclaimer_iy175_76";
+const section$2 = "_section_n8xka_1";
+const track = "_track_n8xka_8";
+const card = "_card_n8xka_38";
+const quote = "_quote_n8xka_50";
+const author = "_author_n8xka_58";
+const dots = "_dots_n8xka_64";
+const dot = "_dot_n8xka_64";
+const dotActive = "_dotActive_n8xka_77";
+const disclaimer = "_disclaimer_n8xka_83";
 const styles$6 = {
   section: section$2,
   track,

package/dist/standalone/storefront.mjs

@@ -7403,15 +7403,15 @@ function CartSheetProvider({ children }) {
     isOpen && /* @__PURE__ */ jsx(BottomSheet, { open: true, onClose: close2, title: "Cart", children: /* @__PURE__ */ jsx(CartView, { onContinueShopping: close2 }) })
   ] });
 }
-const gallery = "_gallery_h8m00_1";
-const track$2 = "_track_h8m00_8";
-const slide$1 = "_slide_h8m00_19";
-const image$4 = "_image_h8m00_26";
-const placeholder$1 = "_placeholder_h8m00_30";
-const share = "_share_h8m00_37";
-const dots$2 = "_dots_h8m00_54";
-const dot$2 = "_dot_h8m00_54";
-const dotActive$2 = "_dotActive_h8m00_78";
+const gallery = "_gallery_1e69n_1";
+const track$2 = "_track_1e69n_8";
+const slide$1 = "_slide_1e69n_25";
+const image$4 = "_image_1e69n_32";
+const placeholder$1 = "_placeholder_1e69n_36";
+const share = "_share_1e69n_43";
+const dots$2 = "_dots_1e69n_60";
+const dot$2 = "_dot_1e69n_60";
+const dotActive$2 = "_dotActive_1e69n_84";
 const styles$i = {
   gallery,
   track: track$2,
@@ -8212,15 +8212,15 @@ function LifestyleImage({ images }) {
     )) })
   ] }) });
 }
-const section$2 = "_section_iy175_1";
-const track = "_track_iy175_8";
-const card = "_card_iy175_31";
-const quote = "_quote_iy175_43";
-const author = "_author_iy175_51";
-const dots = "_dots_iy175_57";
-const dot = "_dot_iy175_57";
-const dotActive = "_dotActive_iy175_70";
-const disclaimer = "_disclaimer_iy175_76";
+const section$2 = "_section_n8xka_1";
+const track = "_track_n8xka_8";
+const card = "_card_n8xka_38";
+const quote = "_quote_n8xka_50";
+const author = "_author_n8xka_58";
+const dots = "_dots_n8xka_64";
+const dot = "_dot_n8xka_64";
+const dotActive = "_dotActive_n8xka_77";
+const disclaimer = "_disclaimer_n8xka_83";
 const styles$6 = {
   section: section$2,
   track,

package/dist/standalone/styles.css

@@ -2123,14 +2123,14 @@
   gap: var(--space-20);
 }
 
-._gallery_h8m00_1 {
+._gallery_1e69n_1 {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
 }
 
-._track_h8m00_8 {
+._track_1e69n_8 {
   display: flex;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
@@ -2139,27 +2139,33 @@
      edge-to-edge and flush under the header. */
   aspect-ratio: 375 / 485;
   background: var(--color-surface-soft);
+  /* Same as the review carousel: the dots below are the indicator. */
+  scrollbar-width: none;
+}
+
+._track_1e69n_8::-webkit-scrollbar {
+  display: none;
 }
 
-._slide_h8m00_19 {
+._slide_1e69n_25 {
   position: relative;
   flex: 0 0 100%;
   scroll-snap-align: center;
   aspect-ratio: 375 / 485;
 }
 
-._image_h8m00_26 {
+._image_1e69n_32 {
   object-fit: cover;
 }
 
-._placeholder_h8m00_30 {
+._placeholder_1e69n_36 {
   width: 100%;
   aspect-ratio: 375 / 485;
   background: var(--color-surface-soft);
 }
 
 /* Share button — top-right chrome over the image (mobile/button: 32px, soft, radius-8). */
-._share_h8m00_37 {
+._share_1e69n_43 {
   position: absolute;
   top: var(--space-16);
   right: var(--space-16);
@@ -2176,13 +2182,13 @@
   cursor: pointer;
 }
 
-._dots_h8m00_54 {
+._dots_1e69n_60 {
   display: flex;
   justify-content: center;
   gap: var(--space-6);
 }
 
-._dot_h8m00_54 {
+._dot_1e69n_60 {
   width: 8px;
   height: 8px;
   padding: 0;
@@ -2194,13 +2200,13 @@
   position: relative;
 }
 
-._dot_h8m00_54::after {
+._dot_1e69n_60::after {
   content: '';
   position: absolute;
   inset: -18px;
 }
 
-._dotActive_h8m00_78 {
+._dotActive_1e69n_84 {
   background: var(--color-surface-max);
 }
 /*
@@ -2957,14 +2963,14 @@
 ._dotActive_9mquf_63 {
   background: #f9fafa;
 }
-._section_iy175_1 {
+._section_n8xka_1 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   padding: var(--space-24) 0 var(--space-16);
 }
 
-._track_iy175_8 {
+._track_n8xka_8 {
   display: flex;
   gap: var(--space-12);
   list-style: none;
@@ -2974,6 +2980,13 @@
   scroll-snap-type: x mandatory;
   scroll-padding-inline: var(--space-16);
   -webkit-overflow-scrolling: touch;
+  /* The dots are the position indicator. A native scrollbar under them says the same
+     thing twice, in a style nothing else on the page uses, and it is not in the frame. */
+  scrollbar-width: none;
+}
+
+._track_n8xka_8::-webkit-scrollbar {
+  display: none;
 }
 
 /*
@@ -2987,7 +3000,7 @@
  * is raised with DAZN's designers, and the card flips the moment they retune the token.
  * Everything else on this block follows Figma exactly.
  */
-._card_iy175_31 {
+._card_n8xka_38 {
   flex: 0 0 323px;
   max-width: calc(100% - var(--space-20));
   scroll-snap-align: start;
@@ -2999,7 +3012,7 @@
   background: #f9fafa;
 }
 
-._quote_iy175_43 {
+._quote_n8xka_50 {
   margin: 0;
   font-size: var(--type-heading-lg-size);
   line-height: 1.2;
@@ -3007,32 +3020,32 @@
   color: #0c161c;
 }
 
-._author_iy175_51 {
+._author_n8xka_58 {
   margin: 0;
   font-size: var(--type-trimmed-sm-size);
   color: #3d4549;
 }
 
-._dots_iy175_57 {
+._dots_n8xka_64 {
   display: flex;
   justify-content: center;
   gap: var(--space-8);
 }
 
-._dot_iy175_57 {
+._dot_n8xka_64 {
   width: 8px;
   height: 8px;
   border-radius: var(--radius-full);
   background: #9ea2a4;
 }
 
-._dotActive_iy175_70 {
+._dotActive_n8xka_77 {
   background: #f9fafa;
 }
 
 /* Quiet, but present. Not in the Figma frame — the component's own note makes it
    mandatory, and staff quotes shown as reviews without one is the failure it guards. */
-._disclaimer_iy175_76 {
+._disclaimer_n8xka_83 {
   margin: 0;
   padding: 0 var(--space-16);
   font-size: var(--type-trimmed-xs-size);

package/dist/styles.css

@@ -2123,14 +2123,14 @@
   gap: var(--space-20);
 }
 
-._gallery_h8m00_1 {
+._gallery_1e69n_1 {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
 }
 
-._track_h8m00_8 {
+._track_1e69n_8 {
   display: flex;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
@@ -2139,27 +2139,33 @@
      edge-to-edge and flush under the header. */
   aspect-ratio: 375 / 485;
   background: var(--color-surface-soft);
+  /* Same as the review carousel: the dots below are the indicator. */
+  scrollbar-width: none;
+}
+
+._track_1e69n_8::-webkit-scrollbar {
+  display: none;
 }
 
-._slide_h8m00_19 {
+._slide_1e69n_25 {
   position: relative;
   flex: 0 0 100%;
   scroll-snap-align: center;
   aspect-ratio: 375 / 485;
 }
 
-._image_h8m00_26 {
+._image_1e69n_32 {
   object-fit: cover;
 }
 
-._placeholder_h8m00_30 {
+._placeholder_1e69n_36 {
   width: 100%;
   aspect-ratio: 375 / 485;
   background: var(--color-surface-soft);
 }
 
 /* Share button — top-right chrome over the image (mobile/button: 32px, soft, radius-8). */
-._share_h8m00_37 {
+._share_1e69n_43 {
   position: absolute;
   top: var(--space-16);
   right: var(--space-16);
@@ -2176,13 +2182,13 @@
   cursor: pointer;
 }
 
-._dots_h8m00_54 {
+._dots_1e69n_60 {
   display: flex;
   justify-content: center;
   gap: var(--space-6);
 }
 
-._dot_h8m00_54 {
+._dot_1e69n_60 {
   width: 8px;
   height: 8px;
   padding: 0;
@@ -2194,13 +2200,13 @@
   position: relative;
 }
 
-._dot_h8m00_54::after {
+._dot_1e69n_60::after {
   content: '';
   position: absolute;
   inset: -18px;
 }
 
-._dotActive_h8m00_78 {
+._dotActive_1e69n_84 {
   background: var(--color-surface-max);
 }
 /*
@@ -2957,14 +2963,14 @@
 ._dotActive_9mquf_63 {
   background: #f9fafa;
 }
-._section_iy175_1 {
+._section_n8xka_1 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   padding: var(--space-24) 0 var(--space-16);
 }
 
-._track_iy175_8 {
+._track_n8xka_8 {
   display: flex;
   gap: var(--space-12);
   list-style: none;
@@ -2974,6 +2980,13 @@
   scroll-snap-type: x mandatory;
   scroll-padding-inline: var(--space-16);
   -webkit-overflow-scrolling: touch;
+  /* The dots are the position indicator. A native scrollbar under them says the same
+     thing twice, in a style nothing else on the page uses, and it is not in the frame. */
+  scrollbar-width: none;
+}
+
+._track_n8xka_8::-webkit-scrollbar {
+  display: none;
 }
 
 /*
@@ -2987,7 +3000,7 @@
  * is raised with DAZN's designers, and the card flips the moment they retune the token.
  * Everything else on this block follows Figma exactly.
  */
-._card_iy175_31 {
+._card_n8xka_38 {
   flex: 0 0 323px;
   max-width: calc(100% - var(--space-20));
   scroll-snap-align: start;
@@ -2999,7 +3012,7 @@
   background: #f9fafa;
 }
 
-._quote_iy175_43 {
+._quote_n8xka_50 {
   margin: 0;
   font-size: var(--type-heading-lg-size);
   line-height: 1.2;
@@ -3007,32 +3020,32 @@
   color: #0c161c;
 }
 
-._author_iy175_51 {
+._author_n8xka_58 {
   margin: 0;
   font-size: var(--type-trimmed-sm-size);
   color: #3d4549;
 }
 
-._dots_iy175_57 {
+._dots_n8xka_64 {
   display: flex;
   justify-content: center;
   gap: var(--space-8);
 }
 
-._dot_iy175_57 {
+._dot_n8xka_64 {
   width: 8px;
   height: 8px;
   border-radius: var(--radius-full);
   background: #9ea2a4;
 }
 
-._dotActive_iy175_70 {
+._dotActive_n8xka_77 {
   background: #f9fafa;
 }
 
 /* Quiet, but present. Not in the Figma frame — the component's own note makes it
    mandatory, and staff quotes shown as reviews without one is the failure it guards. */
-._disclaimer_iy175_76 {
+._disclaimer_n8xka_83 {
   margin: 0;
   padding: 0 var(--space-16);
   font-size: var(--type-trimmed-xs-size);

package/package.json

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