@nok-integration/storefront-react 0.29.4 → 0.29.5

package/dist/index.mjs

@@ -6253,15 +6253,15 @@ const ShopSurface = forwardRef(function ShopSurface2({ tone, fill: fill2 = false
     children
   });
 });
-const root$7 = "_root_ney0g_1";
-const inner = "_inner_ney0g_6";
-const media$5 = "_media_ney0g_20";
-const lines$2 = "_lines_ney0g_32";
-const lineWide = "_lineWide_ney0g_41";
-const lineMid = "_lineMid_ney0g_45";
-const lineNarrow = "_lineNarrow_ney0g_49";
-const row$9 = "_row_ney0g_53";
-const action$2 = "_action_ney0g_57";
+const root$7 = "_root_l5418_1";
+const inner = "_inner_l5418_6";
+const media$5 = "_media_l5418_20";
+const lines$2 = "_lines_l5418_32";
+const lineWide = "_lineWide_l5418_41";
+const lineMid = "_lineMid_l5418_45";
+const lineNarrow = "_lineNarrow_l5418_49";
+const row$9 = "_row_l5418_53";
+const action$2 = "_action_l5418_57";
 const styles$T = {
   root: root$7,
   inner,
@@ -6601,6 +6601,7 @@ function ScreenSkeleton({ tone, shape = "media" }) {
     tone,
     fill: true,
     className: styles$T.root,
+    "data-shop-layout": "wide",
     children: jsx("div", {
       className: styles$T.inner,
       role: "status",
@@ -8083,9 +8084,9 @@ function ReturnItemsView({ order, onSubmit, busy = false }) {
   const t = useT();
   const wide2 = useDesktopLayout();
   useOrderNav([t("My orders"), t("Order #{0}", shortRef$1(order.order_ref))], t("Return items"));
-  const layout = wide2 ? {
+  const layout = {
     "data-shop-layout": "wide"
-  } : {};
+  };
   const pageClass = [styles$H.page, wide2 ? styles$H.wide : ""].join(" ");
   const returnable = useMemo(() => order.items.filter((i) => unitsLeft(i) > 0), [order.items]);
   const selected2 = Object.entries(chosen).filter(([, reason2]) => reason2 !== void 0);
@@ -8309,9 +8310,7 @@ function ReturnLabelView({ ret, onDone }) {
   useOrderNav([t("My orders"), t("Order #{0}", shortRef$1(ret.order_ref))], t("Return items"));
   return jsx("div", {
     className: [styles$G.page, wide2 ? styles$G.wide : ""].join(" "),
-    ...wide2 ? {
-      "data-shop-layout": "wide"
-    } : {},
+    "data-shop-layout": "wide",
     children: jsxs("div", {
       className: styles$G.main,
       children: [jsxs("div", {
@@ -8457,9 +8456,7 @@ function ReturnTrackingView({ ret, locale: localeProp }) {
     fill: true,
     children: jsxs("div", {
       className: [styles$F.page, wide2 ? styles$F.wide : ""].join(" "),
-      ...wide2 ? {
-        "data-shop-layout": "wide"
-      } : {},
+      "data-shop-layout": "wide",
       children: [jsxs("section", {
         className: styles$F.widget,
         "aria-labelledby": "return-title",
@@ -9207,9 +9204,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
     return jsxs("div", {
       className: [styles$D.page, wide2 ? styles$D.wide : "", wide2 && order.vip ? styles$D.vip : ""].join(" "),
       ref: cancelledPage,
-      ...wide2 ? {
-        "data-shop-layout": "wide"
-      } : {},
+      "data-shop-layout": "wide",
       children: [jsxs("div", {
         className: styles$D.cancelledMain,
         children: [jsxs("div", {
@@ -9253,9 +9248,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
   }
   return jsxs("div", {
     className: [styles$D.page, wide2 ? styles$D.wide : ""].join(" "),
-    ...wide2 ? {
-      "data-shop-layout": "wide"
-    } : {},
+    "data-shop-layout": "wide",
     children: [jsxs("section", {
       className: styles$D.widget,
       "aria-label": t("Delivery status"),
@@ -9475,9 +9468,7 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
   }
   return jsxs("div", {
     className: [styles$C.page, wide2 ? styles$C.wide : ""].join(" "),
-    ...wide2 ? {
-      "data-shop-layout": "wide"
-    } : {},
+    "data-shop-layout": "wide",
     children: [jsxs("section", {
       className: styles$C.confirmed,
       "aria-label": t("Order confirmation"),

package/dist/standalone/storefront.mjs

@@ -6253,15 +6253,15 @@ const ShopSurface = forwardRef(function ShopSurface2({ tone, fill: fill2 = false
     children
   });
 });
-const root$7 = "_root_ney0g_1";
-const inner = "_inner_ney0g_6";
-const media$5 = "_media_ney0g_20";
-const lines$2 = "_lines_ney0g_32";
-const lineWide = "_lineWide_ney0g_41";
-const lineMid = "_lineMid_ney0g_45";
-const lineNarrow = "_lineNarrow_ney0g_49";
-const row$9 = "_row_ney0g_53";
-const action$2 = "_action_ney0g_57";
+const root$7 = "_root_l5418_1";
+const inner = "_inner_l5418_6";
+const media$5 = "_media_l5418_20";
+const lines$2 = "_lines_l5418_32";
+const lineWide = "_lineWide_l5418_41";
+const lineMid = "_lineMid_l5418_45";
+const lineNarrow = "_lineNarrow_l5418_49";
+const row$9 = "_row_l5418_53";
+const action$2 = "_action_l5418_57";
 const styles$T = {
   root: root$7,
   inner,
@@ -6601,6 +6601,7 @@ function ScreenSkeleton({ tone, shape = "media" }) {
     tone,
     fill: true,
     className: styles$T.root,
+    "data-shop-layout": "wide",
     children: jsx("div", {
       className: styles$T.inner,
       role: "status",
@@ -8083,9 +8084,9 @@ function ReturnItemsView({ order, onSubmit, busy = false }) {
   const t = useT();
   const wide2 = useDesktopLayout();
   useOrderNav([t("My orders"), t("Order #{0}", shortRef$1(order.order_ref))], t("Return items"));
-  const layout = wide2 ? {
+  const layout = {
     "data-shop-layout": "wide"
-  } : {};
+  };
   const pageClass = [styles$H.page, wide2 ? styles$H.wide : ""].join(" ");
   const returnable = useMemo(() => order.items.filter((i) => unitsLeft(i) > 0), [order.items]);
   const selected2 = Object.entries(chosen).filter(([, reason2]) => reason2 !== void 0);
@@ -8309,9 +8310,7 @@ function ReturnLabelView({ ret, onDone }) {
   useOrderNav([t("My orders"), t("Order #{0}", shortRef$1(ret.order_ref))], t("Return items"));
   return jsx("div", {
     className: [styles$G.page, wide2 ? styles$G.wide : ""].join(" "),
-    ...wide2 ? {
-      "data-shop-layout": "wide"
-    } : {},
+    "data-shop-layout": "wide",
     children: jsxs("div", {
       className: styles$G.main,
       children: [jsxs("div", {
@@ -8457,9 +8456,7 @@ function ReturnTrackingView({ ret, locale: localeProp }) {
     fill: true,
     children: jsxs("div", {
       className: [styles$F.page, wide2 ? styles$F.wide : ""].join(" "),
-      ...wide2 ? {
-        "data-shop-layout": "wide"
-      } : {},
+      "data-shop-layout": "wide",
       children: [jsxs("section", {
         className: styles$F.widget,
         "aria-labelledby": "return-title",
@@ -9207,9 +9204,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
     return jsxs("div", {
       className: [styles$D.page, wide2 ? styles$D.wide : "", wide2 && order.vip ? styles$D.vip : ""].join(" "),
       ref: cancelledPage,
-      ...wide2 ? {
-        "data-shop-layout": "wide"
-      } : {},
+      "data-shop-layout": "wide",
       children: [jsxs("div", {
         className: styles$D.cancelledMain,
         children: [jsxs("div", {
@@ -9253,9 +9248,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
   }
   return jsxs("div", {
     className: [styles$D.page, wide2 ? styles$D.wide : ""].join(" "),
-    ...wide2 ? {
-      "data-shop-layout": "wide"
-    } : {},
+    "data-shop-layout": "wide",
     children: [jsxs("section", {
       className: styles$D.widget,
       "aria-label": t("Delivery status"),
@@ -9475,9 +9468,7 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
   }
   return jsxs("div", {
     className: [styles$C.page, wide2 ? styles$C.wide : ""].join(" "),
-    ...wide2 ? {
-      "data-shop-layout": "wide"
-    } : {},
+    "data-shop-layout": "wide",
     children: [jsxs("section", {
       className: styles$C.confirmed,
       "aria-label": t("Order confirmation"),

package/dist/standalone/styles.css

@@ -279,43 +279,56 @@
     scroll-behavior: auto !important;
   }
 }
-._root_ney0g_1 {
+._root_l5418_1 {
   display: flex;
   flex-direction: column;
 }
-._inner_ney0g_6 {
+._inner_l5418_6 {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
   padding-bottom: var(--space-24);
 }
-._media_ney0g_20 {
+._media_l5418_20 {
   width: 100%;
   min-height: 320px;
   aspect-ratio: 4 / 5;
   border-radius: 0;
 }
-._lines_ney0g_32 {
+._lines_l5418_32 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   padding: 0 var(--space-16);
 }
-._lineWide_ney0g_41 {
+._lineWide_l5418_41 {
   width: 70%;
 }
-._lineMid_ney0g_45 {
+._lineMid_l5418_45 {
   width: 45%;
 }
-._lineNarrow_ney0g_49 {
+._lineNarrow_l5418_49 {
   width: 88%;
 }
-._row_ney0g_53 {
+._row_l5418_53 {
   width: 100%;
 }
-._action_ney0g_57 {
+._action_l5418_57 {
   margin: var(--space-8) var(--space-16) 0;
 }
+@media (min-width: 1200px) {
+  ._media_l5418_20 {
+    min-height: 0;
+    aspect-ratio: auto;
+    height: calc(100vh - var(--shop-chrome-top, 0px) - 64px);
+  }
+  ._lines_l5418_32,
+  ._action_l5418_57 {
+    width: min(1088px, 100%);
+    margin-inline: auto;
+    padding: 0;
+  }
+}
 ._root_ryf3q_6 {
   display: flex;
   flex-direction: column;

package/dist/styles.css

@@ -279,43 +279,56 @@
     scroll-behavior: auto !important;
   }
 }
-._root_ney0g_1 {
+._root_l5418_1 {
   display: flex;
   flex-direction: column;
 }
-._inner_ney0g_6 {
+._inner_l5418_6 {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
   padding-bottom: var(--space-24);
 }
-._media_ney0g_20 {
+._media_l5418_20 {
   width: 100%;
   min-height: 320px;
   aspect-ratio: 4 / 5;
   border-radius: 0;
 }
-._lines_ney0g_32 {
+._lines_l5418_32 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   padding: 0 var(--space-16);
 }
-._lineWide_ney0g_41 {
+._lineWide_l5418_41 {
   width: 70%;
 }
-._lineMid_ney0g_45 {
+._lineMid_l5418_45 {
   width: 45%;
 }
-._lineNarrow_ney0g_49 {
+._lineNarrow_l5418_49 {
   width: 88%;
 }
-._row_ney0g_53 {
+._row_l5418_53 {
   width: 100%;
 }
-._action_ney0g_57 {
+._action_l5418_57 {
   margin: var(--space-8) var(--space-16) 0;
 }
+@media (min-width: 1200px) {
+  ._media_l5418_20 {
+    min-height: 0;
+    aspect-ratio: auto;
+    height: calc(100vh - var(--shop-chrome-top, 0px) - 64px);
+  }
+  ._lines_l5418_32,
+  ._action_l5418_57 {
+    width: min(1088px, 100%);
+    margin-inline: auto;
+    padding: 0;
+  }
+}
 ._root_ryf3q_6 {
   display: flex;
   flex-direction: column;

package/package.json

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