@nok-integration/storefront-react 0.29.11 → 0.29.13

package/dist/index.d.ts

@@ -5289,7 +5289,7 @@ declare class ProductCache {
  * the size error). Add-to-cart calls the engine through the session so a 401 silently
  * re-handshakes.
  */
-export declare function ProductDetail({ product, inventory, recommendations, claim, breadcrumb, help, }: ProductDetailProps): JSX.Element;
+export declare function ProductDetail({ product, inventory, recommendations, claim, breadcrumb, help, initialVariantSku, }: ProductDetailProps): JSX.Element;
 
 export declare interface ProductDetailProps {
     product: Product;
@@ -5303,6 +5303,7 @@ export declare interface ProductDetailProps {
     claim?: (sku: string) => Promise<void>;
     breadcrumb?: ReactNode;
     help?: ReactNode;
+    initialVariantSku?: string;
 }
 
 /**

package/dist/index.mjs

@@ -5692,6 +5692,72 @@ function withAuthorization(init, token) {
     headers
   };
 }
+const KEY = "dazn-shop.set-aside";
+const KEPT_FOR = 30 * 24 * 60 * 60 * 1e3;
+function read() {
+  try {
+    const raw = localStorage.getItem(KEY);
+    if (!raw) return null;
+    const value2 = JSON.parse(raw);
+    if (!Array.isArray(value2.lines) || typeof value2.at !== "number") return null;
+    if (Date.now() - value2.at > KEPT_FOR) {
+      localStorage.removeItem(KEY);
+      return null;
+    }
+    const lines2 = value2.lines.filter((l) => !!l && typeof l.sku === "string" && Number.isInteger(l.qty) && l.qty > 0);
+    return {
+      lines: lines2,
+      armed: value2.armed === true,
+      at: value2.at
+    };
+  } catch {
+    return null;
+  }
+}
+function write(value2) {
+  try {
+    if (value2) localStorage.setItem(KEY, JSON.stringify(value2));
+    else localStorage.removeItem(KEY);
+  } catch {
+    return;
+  }
+}
+function setAside(lines2) {
+  if (lines2.length === 0 || read()) return;
+  write({
+    lines: lines2,
+    armed: false,
+    at: Date.now()
+  });
+}
+function armSetAside() {
+  const stored2 = read();
+  if (stored2) write({
+    ...stored2,
+    armed: true
+  });
+}
+let restoring = false;
+async function restoreSetAside(cart2, writer, query, { force = false } = {}) {
+  const stored2 = read();
+  if (!stored2 || restoring) return cart2;
+  if (!force && (!stored2.armed || cart2.vip)) return cart2;
+  restoring = true;
+  write(null);
+  let latest = cart2;
+  try {
+    for (const line2 of stored2.lines) {
+      if (latest.items.some((i) => i.sku === line2.sku)) continue;
+      latest = await writer.addItem({
+        sku: line2.sku,
+        qty: line2.qty
+      }, query).catch(() => latest);
+    }
+  } finally {
+    restoring = false;
+  }
+  return latest;
+}
 const ScreenTitleContext = createContext({
   title: void 0,
   trailing: "default",
@@ -5885,24 +5951,24 @@ function DaznShopProvider({ children, ...config }) {
       carts.set(cart2);
       return cart2;
     };
-    const read = (fn) => (...args) => {
+    const read2 = (fn) => (...args) => {
       const before = carts.revision;
       return fn(...args).then((cart2) => carts.revision === before ? remember2(cart2) : cart2);
     };
-    const write = (fn) => (...args) => fn(...args).then(remember2);
+    const write2 = (fn) => (...args) => fn(...args).then(remember2);
     return {
       ...client2,
       cart: {
         ...client2.cart,
-        create: read(client2.cart.create),
-        get: read(client2.cart.get),
-        addItem: write(client2.cart.addItem),
-        updateItem: write(client2.cart.updateItem),
-        removeItem: write(client2.cart.removeItem)
+        create: read2(client2.cart.create),
+        get: (...args) => read2(client2.cart.get)(...args).then((cart2) => restoreSetAside(cart2, client2.cart, args[0]).then((latest) => latest === cart2 ? cart2 : remember2(latest))),
+        addItem: write2(client2.cart.addItem),
+        updateItem: write2(client2.cart.updateItem),
+        removeItem: write2(client2.cart.removeItem)
       },
       vip: {
         ...client2.vip,
-        addToCart: write(client2.vip.addToCart)
+        addToCart: write2(client2.vip.addToCart)
       }
     };
   }, [client2, carts]);
@@ -11129,18 +11195,18 @@ function StickyCtaBar({ children, info: info2, variant = "floating", className }
     })]
   });
 }
-const surface = "_surface_o6bcy_15";
-const screen = "_screen_o6bcy_20";
-const body$4 = "_body_o6bcy_12";
-const items = "_items_o6bcy_34";
-const sectionHeader = "_sectionHeader_o6bcy_40";
-const sectionTitle = "_sectionTitle_o6bcy_46";
-const count = "_count_o6bcy_67";
-const lines = "_lines_o6bcy_91";
-const footer = "_footer_o6bcy_101";
-const empty = "_empty_o6bcy_105";
-const cta$4 = "_cta_o6bcy_146";
-const ctaError = "_ctaError_o6bcy_154";
+const surface = "_surface_1rn0i_15";
+const screen = "_screen_1rn0i_20";
+const body$4 = "_body_1rn0i_12";
+const items = "_items_1rn0i_34";
+const sectionHeader = "_sectionHeader_1rn0i_40";
+const sectionTitle = "_sectionTitle_1rn0i_46";
+const count = "_count_1rn0i_67";
+const lines = "_lines_1rn0i_91";
+const footer = "_footer_1rn0i_101";
+const empty = "_empty_1rn0i_105";
+const cta$4 = "_cta_1rn0i_152";
+const ctaError = "_ctaError_1rn0i_160";
 const styles$o = {
   surface,
   screen,
@@ -11158,6 +11224,12 @@ const styles$o = {
 function CartView(props = {}) {
   const t = useT();
   useSetScreenTitle(t("Cart"), "none");
+  useSetScreenNav([{
+    label: t("DAZN Shop"),
+    to: "/"
+  }, {
+    label: t("Cart")
+  }], "light");
   return jsx(ShopSurface, {
     tone: "light",
     fill: true,
@@ -12234,7 +12306,7 @@ const styles$e = {
   cta: cta$3,
   shop
 };
-function ProductDetail({ product, inventory: inventory2, recommendations = [], claim, breadcrumb: breadcrumb2, help: help2 }) {
+function ProductDetail({ product, inventory: inventory2, recommendations = [], claim, breadcrumb: breadcrumb2, help: help2, initialVariantSku }) {
   const t = useT();
   const toast2 = useToast();
   const { api, emit } = useShop();
@@ -12266,11 +12338,12 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [], c
   const hasSizes = useMemo(() => sizeOptions(variants).length > 0, [variants]);
   const hasColours = baseColours.length > 0;
   const structured = hasSizes || hasColours;
-  const [selectedSize, setSelectedSize] = useState(null);
-  const [selectedColour, setSelectedColour] = useState(hasColours ? baseColours.find((c) => c.available)?.value ?? baseColours[0].value : null);
+  const preselected = initialVariantSku ? variants.find((v) => v.sku === initialVariantSku) : void 0;
+  const [selectedSize, setSelectedSize] = useState(preselected?.attributes.size ?? null);
+  const [selectedColour, setSelectedColour] = useState(preselected?.attributes.colour ?? preselected?.attributes.color ?? (hasColours ? baseColours.find((c) => c.available)?.value ?? baseColours[0].value : null));
   const sizes2 = useMemo(() => sizeOptions(variants, selectedColour), [variants, selectedColour]);
   const colours = useMemo(() => colourOptions(variants, selectedSize), [variants, selectedSize]);
-  const [genericSku, setGenericSku] = useState(null);
+  const [genericSku, setGenericSku] = useState(preselected && !structured ? preselected.sku : null);
   const [busy, setBusy] = useState(null);
   const [sizeError, setSizeError] = useState(false);
   const [reminded, setReminded] = useState([]);
@@ -13323,9 +13396,12 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
   if (product) {
     return jsx(ProductDetail, {
       product,
+      ...sku === product.sku ? {} : {
+        initialVariantSku: sku
+      },
       inventory: inventory2,
       recommendations
-    }, product.sku);
+    }, sku === product.sku ? product.sku : `${product.sku}:${sku}`);
   }
   if (loading) return jsx(ScreenSkeleton, {
     tone: "light"
@@ -15137,8 +15213,12 @@ function ActiveLanding({ token, invite, screen: screen2 }) {
     }
     try {
       const current2 = await api.cart.get().catch(() => null);
-      if (current2?.vip?.invite_ref === invite.invite_ref) {
-        for (const line2 of current2.items) await api.cart.removeItem(line2.sku);
+      if (current2 && current2.items.length > 0) {
+        if (!current2.vip) setAside(current2.items.map((line2) => ({
+          sku: line2.sku,
+          qty: line2.qty
+        })));
+        for (const line2 of current2.items) await api.cart.removeItem(line2.sku).catch(() => null);
       }
       const target = locatorOf(token);
       if (!target) throw new Error("invalid invite link");
@@ -15147,6 +15227,7 @@ function ActiveLanding({ token, invite, screen: screen2 }) {
         sku: variantSku,
         qty: 1
       });
+      armSetAside();
       emit({
         type: "cart_updated",
         itemCount: cart2.items.reduce((n, i) => n + i.qty, 0),
@@ -15161,6 +15242,10 @@ function ActiveLanding({ token, invite, screen: screen2 }) {
       window.location.assign(checkout_url);
     } catch (err) {
       const code = codeOf(err);
+      const now = await api.cart.get().catch(() => null);
+      if (now && !now.vip) await restoreSetAside(now, api.cart, void 0, {
+        force: true
+      });
       if (code === "unauthorized") {
         emit({
           type: "session_required",
@@ -15323,7 +15408,7 @@ function useDocumentSnap(ref, enabled = true) {
     };
     let at = TOP;
     let returning = false;
-    let restoring = false;
+    let restoring2 = false;
     let holding = false;
     const settle = () => {
       returning = false;
@@ -15340,13 +15425,13 @@ function useDocumentSnap(ref, enabled = true) {
       release();
       const back = returnOffset(here());
       returning = back !== null;
-      restoring = returning;
+      restoring2 = returning;
       at = back ?? TOP;
       holding = true;
       if (frame2 !== null && typeof window.cancelAnimationFrame === "function") {
         window.cancelAnimationFrame(frame2);
       }
-      if (restoring) snapOn();
+      if (restoring2) snapOn();
       else snapOff();
       top2();
       frame2 = typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame(() => {
@@ -15354,7 +15439,7 @@ function useDocumentSnap(ref, enabled = true) {
         snapOn();
       }) : null;
       release = anchorTop(() => {
-        if (snapping && !restoring) {
+        if (snapping && !restoring2) {
           const layout = layoutOf();
           if (layout !== snappedLayout) {
             snappedLayout = layout;
@@ -16333,17 +16418,17 @@ function useScrolledUnder(enabled) {
   const [scrolled2, setScrolled] = useState(false);
   useEffect(() => {
     if (!enabled) return;
-    const read = (event) => {
+    const read2 = (event) => {
       const target = event?.target;
       const top2 = target && target !== document && target instanceof HTMLElement ? target.scrollTop : window.scrollY || document.documentElement.scrollTop;
       setScrolled(top2 > 0);
     };
-    read();
-    document.addEventListener("scroll", read, {
+    read2();
+    document.addEventListener("scroll", read2, {
       capture: true,
       passive: true
     });
-    return () => document.removeEventListener("scroll", read, {
+    return () => document.removeEventListener("scroll", read2, {
       capture: true
     });
   }, [enabled]);

package/dist/standalone/storefront.mjs

@@ -5692,6 +5692,72 @@ function withAuthorization(init, token) {
     headers
   };
 }
+const KEY = "dazn-shop.set-aside";
+const KEPT_FOR = 30 * 24 * 60 * 60 * 1e3;
+function read() {
+  try {
+    const raw = localStorage.getItem(KEY);
+    if (!raw) return null;
+    const value2 = JSON.parse(raw);
+    if (!Array.isArray(value2.lines) || typeof value2.at !== "number") return null;
+    if (Date.now() - value2.at > KEPT_FOR) {
+      localStorage.removeItem(KEY);
+      return null;
+    }
+    const lines2 = value2.lines.filter((l) => !!l && typeof l.sku === "string" && Number.isInteger(l.qty) && l.qty > 0);
+    return {
+      lines: lines2,
+      armed: value2.armed === true,
+      at: value2.at
+    };
+  } catch {
+    return null;
+  }
+}
+function write(value2) {
+  try {
+    if (value2) localStorage.setItem(KEY, JSON.stringify(value2));
+    else localStorage.removeItem(KEY);
+  } catch {
+    return;
+  }
+}
+function setAside(lines2) {
+  if (lines2.length === 0 || read()) return;
+  write({
+    lines: lines2,
+    armed: false,
+    at: Date.now()
+  });
+}
+function armSetAside() {
+  const stored2 = read();
+  if (stored2) write({
+    ...stored2,
+    armed: true
+  });
+}
+let restoring = false;
+async function restoreSetAside(cart2, writer, query, { force = false } = {}) {
+  const stored2 = read();
+  if (!stored2 || restoring) return cart2;
+  if (!force && (!stored2.armed || cart2.vip)) return cart2;
+  restoring = true;
+  write(null);
+  let latest = cart2;
+  try {
+    for (const line2 of stored2.lines) {
+      if (latest.items.some((i) => i.sku === line2.sku)) continue;
+      latest = await writer.addItem({
+        sku: line2.sku,
+        qty: line2.qty
+      }, query).catch(() => latest);
+    }
+  } finally {
+    restoring = false;
+  }
+  return latest;
+}
 const ScreenTitleContext = createContext({
   title: void 0,
   trailing: "default",
@@ -5885,24 +5951,24 @@ function DaznShopProvider({ children, ...config }) {
       carts.set(cart2);
       return cart2;
     };
-    const read = (fn) => (...args) => {
+    const read2 = (fn) => (...args) => {
       const before = carts.revision;
       return fn(...args).then((cart2) => carts.revision === before ? remember2(cart2) : cart2);
     };
-    const write = (fn) => (...args) => fn(...args).then(remember2);
+    const write2 = (fn) => (...args) => fn(...args).then(remember2);
     return {
       ...client2,
       cart: {
         ...client2.cart,
-        create: read(client2.cart.create),
-        get: read(client2.cart.get),
-        addItem: write(client2.cart.addItem),
-        updateItem: write(client2.cart.updateItem),
-        removeItem: write(client2.cart.removeItem)
+        create: read2(client2.cart.create),
+        get: (...args) => read2(client2.cart.get)(...args).then((cart2) => restoreSetAside(cart2, client2.cart, args[0]).then((latest) => latest === cart2 ? cart2 : remember2(latest))),
+        addItem: write2(client2.cart.addItem),
+        updateItem: write2(client2.cart.updateItem),
+        removeItem: write2(client2.cart.removeItem)
       },
       vip: {
         ...client2.vip,
-        addToCart: write(client2.vip.addToCart)
+        addToCart: write2(client2.vip.addToCart)
       }
     };
   }, [client2, carts]);
@@ -11129,18 +11195,18 @@ function StickyCtaBar({ children, info: info2, variant = "floating", className }
     })]
   });
 }
-const surface = "_surface_o6bcy_15";
-const screen = "_screen_o6bcy_20";
-const body$4 = "_body_o6bcy_12";
-const items = "_items_o6bcy_34";
-const sectionHeader = "_sectionHeader_o6bcy_40";
-const sectionTitle = "_sectionTitle_o6bcy_46";
-const count = "_count_o6bcy_67";
-const lines = "_lines_o6bcy_91";
-const footer = "_footer_o6bcy_101";
-const empty = "_empty_o6bcy_105";
-const cta$4 = "_cta_o6bcy_146";
-const ctaError = "_ctaError_o6bcy_154";
+const surface = "_surface_1rn0i_15";
+const screen = "_screen_1rn0i_20";
+const body$4 = "_body_1rn0i_12";
+const items = "_items_1rn0i_34";
+const sectionHeader = "_sectionHeader_1rn0i_40";
+const sectionTitle = "_sectionTitle_1rn0i_46";
+const count = "_count_1rn0i_67";
+const lines = "_lines_1rn0i_91";
+const footer = "_footer_1rn0i_101";
+const empty = "_empty_1rn0i_105";
+const cta$4 = "_cta_1rn0i_152";
+const ctaError = "_ctaError_1rn0i_160";
 const styles$o = {
   surface,
   screen,
@@ -11158,6 +11224,12 @@ const styles$o = {
 function CartView(props = {}) {
   const t = useT();
   useSetScreenTitle(t("Cart"), "none");
+  useSetScreenNav([{
+    label: t("DAZN Shop"),
+    to: "/"
+  }, {
+    label: t("Cart")
+  }], "light");
   return jsx(ShopSurface, {
     tone: "light",
     fill: true,
@@ -12234,7 +12306,7 @@ const styles$e = {
   cta: cta$3,
   shop
 };
-function ProductDetail({ product, inventory: inventory2, recommendations = [], claim, breadcrumb: breadcrumb2, help: help2 }) {
+function ProductDetail({ product, inventory: inventory2, recommendations = [], claim, breadcrumb: breadcrumb2, help: help2, initialVariantSku }) {
   const t = useT();
   const toast2 = useToast();
   const { api, emit } = useShop();
@@ -12266,11 +12338,12 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [], c
   const hasSizes = useMemo(() => sizeOptions(variants).length > 0, [variants]);
   const hasColours = baseColours.length > 0;
   const structured = hasSizes || hasColours;
-  const [selectedSize, setSelectedSize] = useState(null);
-  const [selectedColour, setSelectedColour] = useState(hasColours ? baseColours.find((c) => c.available)?.value ?? baseColours[0].value : null);
+  const preselected = initialVariantSku ? variants.find((v) => v.sku === initialVariantSku) : void 0;
+  const [selectedSize, setSelectedSize] = useState(preselected?.attributes.size ?? null);
+  const [selectedColour, setSelectedColour] = useState(preselected?.attributes.colour ?? preselected?.attributes.color ?? (hasColours ? baseColours.find((c) => c.available)?.value ?? baseColours[0].value : null));
   const sizes2 = useMemo(() => sizeOptions(variants, selectedColour), [variants, selectedColour]);
   const colours = useMemo(() => colourOptions(variants, selectedSize), [variants, selectedSize]);
-  const [genericSku, setGenericSku] = useState(null);
+  const [genericSku, setGenericSku] = useState(preselected && !structured ? preselected.sku : null);
   const [busy, setBusy] = useState(null);
   const [sizeError, setSizeError] = useState(false);
   const [reminded, setReminded] = useState([]);
@@ -13323,9 +13396,12 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
   if (product) {
     return jsx(ProductDetail, {
       product,
+      ...sku === product.sku ? {} : {
+        initialVariantSku: sku
+      },
       inventory: inventory2,
       recommendations
-    }, product.sku);
+    }, sku === product.sku ? product.sku : `${product.sku}:${sku}`);
   }
   if (loading) return jsx(ScreenSkeleton, {
     tone: "light"
@@ -15137,8 +15213,12 @@ function ActiveLanding({ token, invite, screen: screen2 }) {
     }
     try {
       const current2 = await api.cart.get().catch(() => null);
-      if (current2?.vip?.invite_ref === invite.invite_ref) {
-        for (const line2 of current2.items) await api.cart.removeItem(line2.sku);
+      if (current2 && current2.items.length > 0) {
+        if (!current2.vip) setAside(current2.items.map((line2) => ({
+          sku: line2.sku,
+          qty: line2.qty
+        })));
+        for (const line2 of current2.items) await api.cart.removeItem(line2.sku).catch(() => null);
       }
       const target = locatorOf(token);
       if (!target) throw new Error("invalid invite link");
@@ -15147,6 +15227,7 @@ function ActiveLanding({ token, invite, screen: screen2 }) {
         sku: variantSku,
         qty: 1
       });
+      armSetAside();
       emit({
         type: "cart_updated",
         itemCount: cart2.items.reduce((n, i) => n + i.qty, 0),
@@ -15161,6 +15242,10 @@ function ActiveLanding({ token, invite, screen: screen2 }) {
       window.location.assign(checkout_url);
     } catch (err) {
       const code = codeOf(err);
+      const now = await api.cart.get().catch(() => null);
+      if (now && !now.vip) await restoreSetAside(now, api.cart, void 0, {
+        force: true
+      });
       if (code === "unauthorized") {
         emit({
           type: "session_required",
@@ -15323,7 +15408,7 @@ function useDocumentSnap(ref, enabled = true) {
     };
     let at = TOP;
     let returning = false;
-    let restoring = false;
+    let restoring2 = false;
     let holding = false;
     const settle = () => {
       returning = false;
@@ -15340,13 +15425,13 @@ function useDocumentSnap(ref, enabled = true) {
       release();
       const back = returnOffset(here());
       returning = back !== null;
-      restoring = returning;
+      restoring2 = returning;
       at = back ?? TOP;
       holding = true;
       if (frame2 !== null && typeof window.cancelAnimationFrame === "function") {
         window.cancelAnimationFrame(frame2);
       }
-      if (restoring) snapOn();
+      if (restoring2) snapOn();
       else snapOff();
       top2();
       frame2 = typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame(() => {
@@ -15354,7 +15439,7 @@ function useDocumentSnap(ref, enabled = true) {
         snapOn();
       }) : null;
       release = anchorTop(() => {
-        if (snapping && !restoring) {
+        if (snapping && !restoring2) {
           const layout = layoutOf();
           if (layout !== snappedLayout) {
             snappedLayout = layout;
@@ -16333,17 +16418,17 @@ function useScrolledUnder(enabled) {
   const [scrolled2, setScrolled] = useState(false);
   useEffect(() => {
     if (!enabled) return;
-    const read = (event) => {
+    const read2 = (event) => {
       const target = event?.target;
       const top2 = target && target !== document && target instanceof HTMLElement ? target.scrollTop : window.scrollY || document.documentElement.scrollTop;
       setScrolled(top2 > 0);
     };
-    read();
-    document.addEventListener("scroll", read, {
+    read2();
+    document.addEventListener("scroll", read2, {
       capture: true,
       passive: true
     });
-    return () => document.removeEventListener("scroll", read, {
+    return () => document.removeEventListener("scroll", read2, {
       capture: true
     });
   }, [enabled]);

package/dist/standalone/styles.css

@@ -3098,33 +3098,33 @@
 ._actions_23dkv_70 > * {
   flex: 1 1 0;
 }
-._surface_o6bcy_15 {
+._surface_1rn0i_15 {
   display: flex;
   flex-direction: column;
 }
-._screen_o6bcy_20 {
+._screen_1rn0i_20 {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
 }
-._body_o6bcy_12 {
+._body_1rn0i_12 {
   display: flex;
   flex-direction: column;
   gap: var(--space-20);
   padding: var(--space-20) var(--space-16) 0;
   flex: 1 1 auto;
 }
-._items_o6bcy_34 {
+._items_1rn0i_34 {
   display: flex;
   flex-direction: column;
   gap: var(--space-20);
 }
-._sectionHeader_o6bcy_40 {
+._sectionHeader_1rn0i_40 {
   display: flex;
   align-items: center;
   gap: var(--space-12);
 }
-._sectionTitle_o6bcy_46 {
+._sectionTitle_1rn0i_46 {
   margin: 0;
   font-size: var(--type-heading-md-size);
   line-height: 1.38;
@@ -3132,7 +3132,7 @@
   flex: 1 0 0;
   min-width: 0;
 }
-._count_o6bcy_67 {
+._count_1rn0i_67 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3147,7 +3147,7 @@
   font-variant-numeric: tabular-nums;
   flex-shrink: 0;
 }
-._lines_o6bcy_91 {
+._lines_1rn0i_91 {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -3155,33 +3155,38 @@
   flex-direction: column;
   gap: var(--space-20);
 }
-._footer_o6bcy_101 {
+._footer_1rn0i_101 {
   display: contents;
 }
-._empty_o6bcy_105 {
+._empty_1rn0i_105 {
   display: contents;
 }
 @media (min-width: 1200px) {
-  [data-shop-panel] ._empty_o6bcy_105 p {
+  ._screen_1rn0i_20 {
+    width: 100%;
+    max-width: 480px;
+    margin-inline: auto;
+  }
+  [data-shop-panel] ._empty_1rn0i_105 p {
     max-width: none;
     white-space: nowrap;
   }
-  [data-shop-panel] ._empty_o6bcy_105 button {
+  [data-shop-panel] ._empty_1rn0i_105 button {
     width: 154px;
     padding: 0;
   }
-  [data-shop-panel] ._count_o6bcy_67 {
+  [data-shop-panel] ._count_1rn0i_67 {
     border: 1px solid var(--color-border-default);
     background: transparent;
   }
-  [data-shop-panel] ._surface_o6bcy_15 {
+  [data-shop-panel] ._surface_1rn0i_15 {
     justify-content: center;
     background: var(--color-surface-base);
   }
-  [data-shop-panel] ._body_o6bcy_12 {
+  [data-shop-panel] ._body_1rn0i_12 {
     padding: var(--space-4) var(--space-24) var(--space-24);
   }
-  [data-shop-panel] ._footer_o6bcy_101 {
+  [data-shop-panel] ._footer_1rn0i_101 {
     position: sticky;
     bottom: 0;
     z-index: 50;
@@ -3192,14 +3197,14 @@
     border-top: 1px solid #e6e6e6;
     background: var(--color-surface-base);
   }
-  [data-shop-panel] ._cta_o6bcy_146 {
+  [data-shop-panel] ._cta_1rn0i_152 {
     position: static;
     padding: 0;
     border-top: none;
     background: transparent;
   }
 }
-._ctaError_o6bcy_154 {
+._ctaError_1rn0i_160 {
   margin: 0;
   font-size: var(--type-caption-sm-size);
   line-height: var(--type-caption-sm-line);

package/dist/styles.css

@@ -3098,33 +3098,33 @@
 ._actions_23dkv_70 > * {
   flex: 1 1 0;
 }
-._surface_o6bcy_15 {
+._surface_1rn0i_15 {
   display: flex;
   flex-direction: column;
 }
-._screen_o6bcy_20 {
+._screen_1rn0i_20 {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
 }
-._body_o6bcy_12 {
+._body_1rn0i_12 {
   display: flex;
   flex-direction: column;
   gap: var(--space-20);
   padding: var(--space-20) var(--space-16) 0;
   flex: 1 1 auto;
 }
-._items_o6bcy_34 {
+._items_1rn0i_34 {
   display: flex;
   flex-direction: column;
   gap: var(--space-20);
 }
-._sectionHeader_o6bcy_40 {
+._sectionHeader_1rn0i_40 {
   display: flex;
   align-items: center;
   gap: var(--space-12);
 }
-._sectionTitle_o6bcy_46 {
+._sectionTitle_1rn0i_46 {
   margin: 0;
   font-size: var(--type-heading-md-size);
   line-height: 1.38;
@@ -3132,7 +3132,7 @@
   flex: 1 0 0;
   min-width: 0;
 }
-._count_o6bcy_67 {
+._count_1rn0i_67 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3147,7 +3147,7 @@
   font-variant-numeric: tabular-nums;
   flex-shrink: 0;
 }
-._lines_o6bcy_91 {
+._lines_1rn0i_91 {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -3155,33 +3155,38 @@
   flex-direction: column;
   gap: var(--space-20);
 }
-._footer_o6bcy_101 {
+._footer_1rn0i_101 {
   display: contents;
 }
-._empty_o6bcy_105 {
+._empty_1rn0i_105 {
   display: contents;
 }
 @media (min-width: 1200px) {
-  [data-shop-panel] ._empty_o6bcy_105 p {
+  ._screen_1rn0i_20 {
+    width: 100%;
+    max-width: 480px;
+    margin-inline: auto;
+  }
+  [data-shop-panel] ._empty_1rn0i_105 p {
     max-width: none;
     white-space: nowrap;
   }
-  [data-shop-panel] ._empty_o6bcy_105 button {
+  [data-shop-panel] ._empty_1rn0i_105 button {
     width: 154px;
     padding: 0;
   }
-  [data-shop-panel] ._count_o6bcy_67 {
+  [data-shop-panel] ._count_1rn0i_67 {
     border: 1px solid var(--color-border-default);
     background: transparent;
   }
-  [data-shop-panel] ._surface_o6bcy_15 {
+  [data-shop-panel] ._surface_1rn0i_15 {
     justify-content: center;
     background: var(--color-surface-base);
   }
-  [data-shop-panel] ._body_o6bcy_12 {
+  [data-shop-panel] ._body_1rn0i_12 {
     padding: var(--space-4) var(--space-24) var(--space-24);
   }
-  [data-shop-panel] ._footer_o6bcy_101 {
+  [data-shop-panel] ._footer_1rn0i_101 {
     position: sticky;
     bottom: 0;
     z-index: 50;
@@ -3192,14 +3197,14 @@
     border-top: 1px solid #e6e6e6;
     background: var(--color-surface-base);
   }
-  [data-shop-panel] ._cta_o6bcy_146 {
+  [data-shop-panel] ._cta_1rn0i_152 {
     position: static;
     padding: 0;
     border-top: none;
     background: transparent;
   }
 }
-._ctaError_o6bcy_154 {
+._ctaError_1rn0i_160 {
   margin: 0;
   font-size: var(--type-caption-sm-size);
   line-height: var(--type-caption-sm-line);

package/package.json

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