@nok-integration/storefront-react 0.19.15 → 0.19.16

package/dist/index.mjs

@@ -5403,7 +5403,7 @@ const neutral$1 = "_neutral_1bagf_12";
 const success$1 = "_success_1bagf_17";
 const critical$1 = "_critical_1bagf_22";
 const promo = "_promo_1bagf_27";
-const styles$P = {
+const styles$Q = {
   badge: badge$5,
   neutral: neutral$1,
   success: success$1,
@@ -5412,7 +5412,7 @@ const styles$P = {
 };
 function Badge({ tone = "neutral", children }) {
   return jsx("span", {
-    className: [styles$P.badge, styles$P[tone]].join(" "),
+    className: [styles$Q.badge, styles$Q[tone]].join(" "),
     children
   });
 }
@@ -5423,7 +5423,7 @@ const secondary = "_secondary_1u2uh_34";
 const ghost = "_ghost_1u2uh_40";
 const spinner = "_spinner_1u2uh_83";
 const spin = "_spin_1u2uh_83";
-const styles$O = {
+const styles$P = {
   button: button$1,
   fullWidth,
   primary,
@@ -5437,12 +5437,12 @@ const Button = forwardRef(function Button2({ variant = "primary", loading = fals
   return jsxs("button", {
     ref,
     type,
-    className: [styles$O.button, styles$O[variant], fullWidth2 ? styles$O.fullWidth : "", className ?? ""].filter(Boolean).join(" "),
+    className: [styles$P.button, styles$P[variant], fullWidth2 ? styles$P.fullWidth : "", className ?? ""].filter(Boolean).join(" "),
     disabled: isDisabled,
     "aria-busy": loading || void 0,
     ...rest,
     children: [loading && jsx("span", {
-      className: styles$O.spinner,
+      className: styles$P.spinner,
       "aria-hidden": "true"
     }), jsx("span", {
       children
@@ -5450,7 +5450,7 @@ const Button = forwardRef(function Button2({ variant = "primary", loading = fals
   });
 });
 const skeleton = "_skeleton_1nxz7_1";
-const styles$N = {
+const styles$O = {
   skeleton
 };
 function Skeleton({ width, height, radius, className, circle }) {
@@ -5461,13 +5461,13 @@ function Skeleton({ width, height, radius, className, circle }) {
   };
   return jsx("span", {
     "aria-hidden": "true",
-    className: [styles$N.skeleton, className ?? ""].filter(Boolean).join(" "),
+    className: [styles$O.skeleton, className ?? ""].filter(Boolean).join(" "),
     style
   });
 }
 const surface$1 = "_surface_cfqo9_10";
 const fill = "_fill_cfqo9_35";
-const styles$M = {
+const styles$N = {
   surface: surface$1,
   fill
 };
@@ -5525,7 +5525,7 @@ const ShopSurface = forwardRef(function ShopSurface2({ tone, fill: fill2 = false
     ...rest,
     ref: attach,
     "data-shop-theme": tone,
-    className: [styles$M.surface, fill2 ? styles$M.fill : "", className ?? ""].filter(Boolean).join(" "),
+    className: [styles$N.surface, fill2 ? styles$N.fill : "", className ?? ""].filter(Boolean).join(" "),
     children
   });
 });
@@ -5538,7 +5538,7 @@ const lineMid = "_lineMid_ney0g_45";
 const lineNarrow = "_lineNarrow_ney0g_49";
 const row$9 = "_row_ney0g_53";
 const action$2 = "_action_ney0g_57";
-const styles$L = {
+const styles$M = {
   root: root$6,
   inner,
   media: media$3,
@@ -5750,36 +5750,36 @@ function ScreenSkeleton({ tone, shape = "media" }) {
   return jsx(ShopSurface, {
     tone,
     fill: true,
-    className: styles$L.root,
+    className: styles$M.root,
     children: jsx("div", {
-      className: styles$L.inner,
+      className: styles$M.inner,
       role: "status",
       "aria-label": t("Loading"),
       children: shape === "media" ? jsxs(Fragment, {
         children: [jsx(Skeleton, {
-          className: styles$L.media
+          className: styles$M.media
         }), jsxs("div", {
-          className: styles$L.lines,
+          className: styles$M.lines,
           children: [jsx(Skeleton, {
             height: 22,
-            className: styles$L.lineWide
+            className: styles$M.lineWide
           }), jsx(Skeleton, {
             height: 16,
-            className: styles$L.lineMid
+            className: styles$M.lineMid
           }), jsx(Skeleton, {
             height: 16,
-            className: styles$L.lineNarrow
+            className: styles$M.lineNarrow
           })]
         }), jsx(Skeleton, {
           height: 48,
           radius: 8,
-          className: styles$L.action
+          className: styles$M.action
         })]
       }) : jsx("div", {
-        className: styles$L.lines,
+        className: styles$M.lines,
         children: [0, 1, 2, 3].map((i) => jsx(Skeleton, {
           height: 72,
-          className: styles$L.row
+          className: styles$M.row
         }, i))
       })
     })
@@ -5791,7 +5791,7 @@ const text$5 = "_text_ryf3q_21";
 const title$n = "_title_ryf3q_35";
 const body$8 = "_body_ryf3q_40";
 const action$1 = "_action_ryf3q_48";
-const styles$K = {
+const styles$L = {
   root: root$5,
   icon: icon$4,
   text: text$5,
@@ -5801,22 +5801,22 @@ const styles$K = {
 };
 function EmptyState({ title: title2, body: body3, action: action2, icon: icon2 }) {
   return jsxs("div", {
-    className: styles$K.root,
+    className: styles$L.root,
     role: "status",
     children: [icon2 && jsx("div", {
-      className: styles$K.icon,
+      className: styles$L.icon,
       children: icon2
     }), jsxs("div", {
-      className: styles$K.text,
+      className: styles$L.text,
       children: [jsx("h2", {
-        className: styles$K.title,
+        className: styles$L.title,
         children: title2
       }), body3 && jsx("p", {
-        className: styles$K.body,
+        className: styles$L.body,
         children: body3
       })]
     }), action2 && jsx("div", {
-      className: styles$K.action,
+      className: styles$L.action,
       children: action2
     })]
   });
@@ -5938,7 +5938,7 @@ function isDuplicateOrder(err) {
 const root$4 = "_root_1lbpx_1";
 const title$m = "_title_1lbpx_10";
 const body$7 = "_body_1lbpx_15";
-const styles$J = {
+const styles$K = {
   root: root$4,
   title: title$m,
   body: body$7
@@ -5948,13 +5948,13 @@ function ErrorState({ code, title: title2, body: body3, onRetry, retryLabel }) {
   const treatment = treatmentFor(code);
   const showRetry = Boolean(onRetry) && treatment.retriable;
   return jsxs("div", {
-    className: styles$J.root,
+    className: styles$K.root,
     role: "alert",
     children: [jsx("h2", {
-      className: styles$J.title,
+      className: styles$K.title,
       children: title2 ?? t(treatment.title)
     }), jsx("p", {
-      className: styles$J.body,
+      className: styles$K.body,
       children: body3 ?? t(treatment.body)
     }), showRetry && jsx(Button, {
       variant: "secondary",
@@ -6002,7 +6002,7 @@ const rich = "_rich_5aafz_183";
 const description = "_description_5aafz_198";
 const thumb$3 = "_thumb_5aafz_216";
 const thumbImage = "_thumbImage_5aafz_227";
-const styles$I = {
+const styles$J = {
   viewport,
   anchor,
   caret,
@@ -6125,41 +6125,41 @@ function ToastProvider({ children }) {
   return jsxs(ToastContext.Provider, {
     value: api,
     children: [children, jsx("div", {
-      className: styles$I.viewport,
+      className: styles$J.viewport,
       ref: viewportRef,
       "aria-live": "polite",
       "aria-atomic": "false",
       children: toasts.map((t) => {
         const rich2 = Boolean(t.description || t.image);
         return jsxs("div", {
-          className: styles$I.anchor,
+          className: styles$J.anchor,
           children: [t.anchor === "cart" && jsx("span", {
-            className: styles$I.caret,
+            className: styles$J.caret,
             children: jsx(Caret, {})
           }), jsxs("div", {
-            className: [styles$I.toast, rich2 ? styles$I.rich : styles$I[t.tone]].join(" "),
+            className: [styles$J.toast, rich2 ? styles$J.rich : styles$J[t.tone]].join(" "),
             role: "status",
             children: [t.image && jsx("span", {
-              className: styles$I.thumb,
+              className: styles$J.thumb,
               children: jsx(ShopImage, {
                 src: t.image,
                 alt: "",
                 fill: true,
                 sizes: "40px",
-                className: styles$I.thumbImage
+                className: styles$J.thumbImage
               })
             }), jsxs("span", {
-              className: styles$I.text,
+              className: styles$J.text,
               children: [jsx("span", {
-                className: styles$I.message,
+                className: styles$J.message,
                 children: t.message
               }), t.description && jsx("span", {
-                className: styles$I.description,
+                className: styles$J.description,
                 children: t.description
               })]
             }), t.action && jsx("button", {
               type: "button",
-              className: styles$I.action,
+              className: styles$J.action,
               onClick: () => {
                 t.action?.onAction();
                 dismiss(t.id);
@@ -6174,15 +6174,15 @@ function ToastProvider({ children }) {
 }
 const badge$4 = "_badge_156ya_2";
 const icon$3 = "_icon_156ya_18";
-const styles$H = {
+const styles$I = {
   badge: badge$4,
   icon: icon$3
 };
 function SaleBadge({ pct }) {
   return jsxs("span", {
-    className: styles$H.badge,
+    className: styles$I.badge,
     children: [jsxs("svg", {
-      className: styles$H.icon,
+      className: styles$I.icon,
       width: "12",
       height: "12",
       viewBox: "0 0 24 24",
@@ -6212,7 +6212,7 @@ const badge$3 = "_badge_rvfx9_48";
 const price$4 = "_price_rvfx9_52";
 const compareAt = "_compareAt_rvfx9_57";
 const strikethrough = "_strikethrough_rvfx9_65";
-const styles$G = {
+const styles$H = {
   root: root$3,
   center: center$1,
   end,
@@ -6229,12 +6229,12 @@ function PriceBlock({ price: price2, compareAt: compareAt2, discountPct: discoun
   const pct = discountPct$1 ?? discountPct(price2, compareAt2);
   const hasCompare = compareAt2 && compareAt2.amount > price2.amount;
   return jsxs("div", {
-    className: [styles$G.root, styles$G[size], styles$G[align], styles$G[variant]].join(" "),
+    className: [styles$H.root, styles$H[size], styles$H[align], styles$H[variant]].join(" "),
     children: [jsx("span", {
-      className: styles$G.price,
+      className: styles$H.price,
       children: format(price2)
     }), hasCompare && jsxs("span", {
-      className: styles$G.compareAt,
+      className: styles$H.compareAt,
       children: [jsx("span", {
         className: "visually-hidden",
         children: `Was ${format(compareAt2)}`
@@ -6260,7 +6260,7 @@ const past = "_past_1cum7_113";
 const current = "_current_1cum7_118";
 const future = "_future_1cum7_133";
 const date$1 = "_date_1cum7_138";
-const styles$F = {
+const styles$G = {
   timeline,
   row: row$8,
   line: line$3,
@@ -6279,39 +6279,39 @@ function OrderTimeline({ progress: progress2, estimatedDelivery, locale: localeP
   const locale = useLocale(localeProp);
   const currentIndex = progress2.findIndex((e) => e.current);
   return jsx("ol", {
-    className: styles$F.timeline,
+    className: styles$G.timeline,
     children: progress2.map((entry, i) => {
       const state = stateOf(entry, i, currentIndex);
       const estimate = !entry.at && i === progress2.length - 1 && estimatedDelivery ? formatWindow(estimatedDelivery, locale) : void 0;
       return jsxs("li", {
-        className: styles$F.row,
+        className: styles$G.row,
         "aria-current": entry.current ? "step" : void 0,
         children: [jsxs("div", {
-          className: styles$F.line,
+          className: styles$G.line,
           children: [jsx("span", {
-            className: styles$F.marker,
+            className: styles$G.marker,
             children: state === "future" ? jsx("span", {
-              className: styles$F.pending,
+              className: styles$G.pending,
               "aria-hidden": "true"
             }) : jsx(StepTick, {
               tone: state
             })
           }), jsxs("span", {
-            className: styles$F.text,
+            className: styles$G.text,
             children: [jsx("span", {
-              className: [styles$F.label, styles$F[state]].join(" "),
+              className: [styles$G.label, styles$G[state]].join(" "),
               children: entry.label
             }), entry.at ? jsx("time", {
-              className: styles$F.date,
+              className: styles$G.date,
               dateTime: entry.at,
               children: formatStepDate(entry.at, locale)
             }) : estimate && jsx("span", {
-              className: styles$F.date,
+              className: styles$G.date,
               children: estimate
             })]
           })]
         }), i < progress2.length - 1 && jsx("span", {
-          className: styles$F.connector,
+          className: styles$G.connector,
           "aria-hidden": "true"
         })]
       }, entry.step);
@@ -6325,7 +6325,7 @@ function stateOf(entry, index, currentIndex) {
 }
 function StepTick({ tone }) {
   return jsxs("svg", {
-    className: styles$F.tick,
+    className: styles$G.tick,
     width: "28",
     height: "28",
     viewBox: "0 0 28 28",
@@ -6470,7 +6470,7 @@ const row$7 = "_row_1hsxt_16";
 const free = "_free_1hsxt_53";
 const pending$1 = "_pending_1hsxt_59";
 const discount = "_discount_1hsxt_69";
-const styles$E = {
+const styles$F = {
   summary,
   row: row$7,
   free,
@@ -6499,11 +6499,11 @@ function OrderSummary({ pricing, deferred = [], hidden = [], rows = CART_ROWS, d
   const isDeferred = (key) => deferred.includes(key);
   const visible = rows.filter((row2) => !hidden.includes(row2.key)).filter((row2) => row2.key !== "discount" || discount2 !== void 0);
   return jsx("dl", {
-    className: styles$E.summary,
+    className: styles$F.summary,
     children: visible.map(({ label: label2, key }) => {
       if (key === "discount" && discount2) {
         return jsxs("div", {
-          className: [styles$E.row, styles$E.discount].join(" "),
+          className: [styles$F.row, styles$F.discount].join(" "),
           children: [jsx("dt", {
             children: t(label2)
           }), jsx("dd", {
@@ -6513,11 +6513,11 @@ function OrderSummary({ pricing, deferred = [], hidden = [], rows = CART_ROWS, d
       }
       const pending2 = key !== "total" && isDeferred(key);
       return jsxs("div", {
-        className: styles$E.row,
+        className: styles$F.row,
         children: [jsx("dt", {
           children: t(label2)
         }), jsx("dd", {
-          className: pending2 ? styles$E.pending : void 0,
+          className: pending2 ? styles$F.pending : void 0,
           children: pending2 ? t("Calculated at checkout") : renderValue(key, pricing, format, t)
         })]
       }, key);
@@ -6527,7 +6527,7 @@ function OrderSummary({ pricing, deferred = [], hidden = [], rows = CART_ROWS, d
 function renderValue(key, pricing, format, t) {
   if (key === "shipping" && pricing.shipping.amount === 0) {
     return jsx("span", {
-      className: styles$E.free,
+      className: styles$F.free,
       children: t("Free")
     });
   }
@@ -6550,7 +6550,7 @@ const card$4 = "_card_1vmnm_173";
 const cardTitle = "_cardTitle_1vmnm_181";
 const cardBody = "_cardBody_1vmnm_193";
 const summaryCard = "_summaryCard_1vmnm_165";
-const styles$D = {
+const styles$E = {
   lines: lines$1,
   line: line$2,
   thumb: thumb$2,
@@ -6589,42 +6589,42 @@ function OrderLine({ item: item2 }) {
   const pct = compareAt2 ? discountPct(item2.unit_price, compareAt2) : void 0;
   const details2 = detailsOf(item2, t);
   return jsxs("li", {
-    className: styles$D.line,
+    className: styles$E.line,
     children: [jsx("div", {
-      className: styles$D.thumb,
+      className: styles$E.thumb,
       children: item2.image ? jsx(ShopImage, {
         src: item2.image,
         alt: "",
         fill: true,
         sizes: "48px",
-        className: styles$D.image
+        className: styles$E.image
       }) : jsx("div", {
-        className: styles$D.placeholder,
+        className: styles$E.placeholder,
         "aria-hidden": "true"
       })
     }), jsxs("div", {
-      className: styles$D.lineBody,
+      className: styles$E.lineBody,
       children: [jsxs("div", {
-        className: styles$D.lineText,
+        className: styles$E.lineText,
         children: [jsx("span", {
-          className: styles$D.lineTitle,
+          className: styles$E.lineTitle,
           children: item2.title ?? item2.sku
         }), jsxs("span", {
-          className: styles$D.lineMeta,
+          className: styles$E.lineMeta,
           children: [details2.map((detail2) => jsx("span", {
-            className: styles$D.detail,
+            className: styles$E.detail,
             children: detail2
           }, detail2)), pct !== void 0 && jsx(SaleBadge, {
             pct
           })]
         })]
       }), jsxs("span", {
-        className: styles$D.linePrice,
+        className: styles$E.linePrice,
         children: [jsx("span", {
-          className: styles$D.paid,
+          className: styles$E.paid,
           children: format(item2.line_total)
         }), compareAt2 && jsxs("span", {
-          className: styles$D.was,
+          className: styles$E.was,
           children: [jsx("span", {
             className: "visually-hidden",
             children: `Was ${format(compareAt2)}`
@@ -6640,7 +6640,7 @@ function OrderLine({ item: item2 }) {
 function OrderLines({ order }) {
   const t = useT();
   return jsx("ul", {
-    className: styles$D.lines,
+    className: styles$E.lines,
     "aria-label": t("Items"),
     children: order.items.map((item2) => jsx(OrderLine, {
       item: item2
@@ -6650,13 +6650,13 @@ function OrderLines({ order }) {
 function ShippingAddressCard({ order }) {
   const t = useT();
   return jsxs("section", {
-    className: styles$D.card,
+    className: styles$E.card,
     "aria-label": t("Shipping address"),
     children: [jsx("h2", {
-      className: styles$D.cardTitle,
+      className: styles$E.cardTitle,
       children: "Shipping address"
     }), jsx("p", {
-      className: styles$D.cardBody,
+      className: styles$E.cardBody,
       children: formatAddress(order.ship_to)
     })]
   });
@@ -6664,10 +6664,10 @@ function ShippingAddressCard({ order }) {
 function OrderSummaryCard({ order }) {
   const t = useT();
   return jsxs("section", {
-    className: [styles$D.card, styles$D.summaryCard].join(" "),
+    className: [styles$E.card, styles$E.summaryCard].join(" "),
     "aria-label": t("Order summary"),
     children: [jsx("h2", {
-      className: styles$D.cardTitle,
+      className: styles$E.cardTitle,
       children: "Order summary"
     }), jsx(OrderSummary, {
       pricing: toPricing(order),
@@ -6704,7 +6704,7 @@ const handleSlot = "_handleSlot_1f3nh_23";
 const handle = "_handle_1f3nh_23";
 const closeSlot$1 = "_closeSlot_1f3nh_35";
 const close$2 = "_close_1f3nh_35";
-const styles$C = {
+const styles$D = {
   header: header$6,
   slot,
   handleSlot,
@@ -6732,23 +6732,23 @@ function CloseIcon$1() {
 }
 function SheetHeader({ onClose, closeLabel }) {
   return jsxs("div", {
-    className: styles$C.header,
+    className: styles$D.header,
     children: [jsx("div", {
-      className: styles$C.slot,
+      className: styles$D.slot,
       "aria-hidden": "true"
     }), jsx("div", {
-      className: styles$C.handleSlot,
+      className: styles$D.handleSlot,
       "aria-hidden": "true",
       children: jsx("div", {
-        className: styles$C.handle
+        className: styles$D.handle
       })
     }), jsx("button", {
       type: "button",
-      className: styles$C.closeSlot,
+      className: styles$D.closeSlot,
       onClick: onClose,
       "aria-label": closeLabel,
       children: jsx("span", {
-        className: styles$C.close,
+        className: styles$D.close,
         children: jsx(CloseIcon$1, {})
       })
     })]
@@ -6804,7 +6804,7 @@ const radio = "_radio_7on4q_88";
 const label$1 = "_label_7on4q_118";
 const footer$1 = "_footer_7on4q_127";
 const error$1 = "_error_7on4q_135";
-const styles$B = {
+const styles$C = {
   scrim: scrim$5,
   sheet: sheet$3,
   body: body$6,
@@ -6821,12 +6821,12 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
   const [choice, setChoice] = useState(selected2);
   useModalDialog(true, onClose, sheetRef);
   return jsx("div", {
-    className: styles$B.scrim,
+    className: styles$C.scrim,
     onClick: onClose,
     children: jsxs(ShopSurface, {
       tone: "light",
       ref: sheetRef,
-      className: styles$B.sheet,
+      className: styles$C.sheet,
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": "reason-sheet-title",
@@ -6835,23 +6835,23 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
         onClose,
         closeLabel
       }), jsxs("div", {
-        className: styles$B.body,
+        className: styles$C.body,
         children: [jsx("h2", {
           id: "reason-sheet-title",
-          className: styles$B.title,
+          className: styles$C.title,
           children: title2
         }), jsx("div", {
-          className: styles$B.options,
+          className: styles$C.options,
           role: "radiogroup",
           "aria-labelledby": "reason-sheet-title",
           children: options2.map((o) => jsxs("button", {
             type: "button",
             role: "radio",
             "aria-checked": o.value === choice,
-            className: styles$B.option,
+            className: styles$C.option,
             onClick: () => setChoice(o.value),
             children: [jsx("span", {
-              className: styles$B.radio,
+              className: styles$C.radio,
               "aria-hidden": "true",
               children: o.value === choice && jsxs("svg", {
                 width: "20",
@@ -6872,15 +6872,15 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
                 })]
               })
             }), jsx("span", {
-              className: styles$B.label,
+              className: styles$C.label,
               children: o.label
             })]
           }, o.value))
         })]
       }), jsxs("div", {
-        className: styles$B.footer,
+        className: styles$C.footer,
         children: [error2 && jsx("p", {
-          className: styles$B.error,
+          className: styles$C.error,
           role: "alert",
           children: error2
         }), jsx(Button, {
@@ -6916,7 +6916,7 @@ const paid$2 = "_paid_1c7ro_176";
 const was$3 = "_was_1c7ro_184";
 const reason = "_reason_1c7ro_199";
 const reasonSet = "_reasonSet_1c7ro_217";
-const styles$A = {
+const styles$B = {
   page: page$6,
   titles: titles$2,
   title: title$k,
@@ -7035,72 +7035,72 @@ function ReturnItemsView({ order, onSubmit, busy = false }) {
     if (items2.length > 0) onSubmit(items2);
   }
   return jsxs("div", {
-    className: styles$A.page,
+    className: styles$B.page,
     children: [jsxs("div", {
-      className: styles$A.titles,
+      className: styles$B.titles,
       children: [jsx("h1", {
-        className: styles$A.title,
+        className: styles$B.title,
         children: "What do you want to return?"
       }), jsx("p", {
-        className: styles$A.subtitle,
+        className: styles$B.subtitle,
         children: "Select items you want to return"
       })]
     }), jsx("div", {
-      className: styles$A.list,
+      className: styles$B.list,
       children: returnable.map((item2) => {
         const picked = item2.line_ref in chosen;
         const reason2 = chosen[item2.line_ref];
         return jsxs("div", {
-          className: styles$A.card,
+          className: styles$B.card,
           children: [jsx("button", {
             type: "button",
             role: "checkbox",
             "aria-checked": picked,
             "aria-label": item2.title ?? item2.sku,
-            className: styles$A.checkSlot,
+            className: styles$B.checkSlot,
             onClick: () => toggle2(item2.line_ref),
             children: jsx("span", {
-              className: styles$A.check,
+              className: styles$B.check,
               children: picked ? jsx(Tick, {}) : null
             })
           }), jsxs("div", {
-            className: styles$A.row,
+            className: styles$B.row,
             children: [jsxs("div", {
-              className: styles$A.line,
+              className: styles$B.line,
               children: [jsx("div", {
-                className: styles$A.thumb,
+                className: styles$B.thumb,
                 children: item2.image ? jsx(ShopImage, {
                   src: item2.image,
                   alt: "",
                   fill: true,
                   sizes: "48px",
-                  className: styles$A.img
+                  className: styles$B.img
                 }) : jsx("div", {
-                  className: styles$A.placeholder,
+                  className: styles$B.placeholder,
                   "aria-hidden": "true"
                 })
               }), jsxs("div", {
-                className: styles$A.meta,
+                className: styles$B.meta,
                 children: [jsx("p", {
-                  className: styles$A.name,
+                  className: styles$B.name,
                   children: item2.title ?? item2.sku
                 }), item2.attributes?.size && jsx("p", {
-                  className: styles$A.attrs,
+                  className: styles$B.attrs,
                   children: `Size: ${item2.attributes.size}`
                 })]
               }), jsxs("div", {
-                className: styles$A.price,
+                className: styles$B.price,
                 children: [jsx("span", {
-                  className: styles$A.paid,
+                  className: styles$B.paid,
                   children: format(item2.unit_price)
                 }), item2.compare_at_unit_price && jsx("span", {
-                  className: styles$A.was,
+                  className: styles$B.was,
                   children: format(item2.compare_at_unit_price)
                 })]
               })]
             }), jsxs("button", {
               type: "button",
-              className: `${styles$A.reason} ${reason2 ? styles$A.reasonSet : ""}`,
+              className: `${styles$B.reason} ${reason2 ? styles$B.reasonSet : ""}`,
               onClick: () => setReasonFor(item2.line_ref),
               "aria-haspopup": "dialog",
               children: [jsx("span", {
@@ -7150,7 +7150,7 @@ const body$5 = "_body_1r0ea_95";
 const body2 = "_body2_1r0ea_103";
 const download = "_download_1r0ea_121";
 const note$1 = "_note_1r0ea_143";
-const styles$z = {
+const styles$A = {
   page: page$5,
   intro: intro$1,
   title: title$j,
@@ -7168,35 +7168,35 @@ const styles$z = {
 };
 function ReturnLabelView({ ret, onDone }) {
   return jsxs("div", {
-    className: styles$z.page,
+    className: styles$A.page,
     children: [jsxs("div", {
-      className: styles$z.intro,
+      className: styles$A.intro,
       children: [jsx("h1", {
-        className: styles$z.title,
+        className: styles$A.title,
         children: "We’ve generated your return label"
       }), jsx("p", {
-        className: styles$z.subtitle,
+        className: styles$A.subtitle,
         children: "Follow the instructions below to complete your return"
       })]
     }), jsxs("div", {
-      className: styles$z.card,
+      className: styles$A.card,
       children: [jsxs("section", {
-        className: styles$z.step,
+        className: styles$A.step,
         children: [jsxs("div", {
-          className: styles$z.stepHead,
+          className: styles$A.stepHead,
           children: [jsx("span", {
-            className: styles$z.number,
+            className: styles$A.number,
             "aria-hidden": "true",
             children: "1"
           }), jsx("h2", {
-            className: styles$z.stepTitle,
+            className: styles$A.stepTitle,
             children: "Download your return label"
           })]
         }), jsx("p", {
-          className: styles$z.body,
+          className: styles$A.body,
           children: "Tap the button below to download your pre-paid return label"
         }), ret.label_url && jsxs("a", {
-          className: styles$z.download,
+          className: styles$A.download,
           href: ret.label_url,
           target: "_blank",
           rel: "noopener noreferrer",
@@ -7205,23 +7205,23 @@ function ReturnLabelView({ ret, onDone }) {
             children: " (opens in a new tab)"
           })]
         }), ret.label_email && jsxs("p", {
-          className: styles$z.note,
+          className: styles$A.note,
           children: ["You’ll receive a shipping label PDF to your email as well.", jsx("br", {}), ret.label_email]
         })]
       }), jsxs("section", {
-        className: styles$z.step2,
+        className: styles$A.step2,
         children: [jsxs("div", {
-          className: styles$z.stepHead,
+          className: styles$A.stepHead,
           children: [jsx("span", {
-            className: styles$z.number,
+            className: styles$A.number,
             "aria-hidden": "true",
             children: "2"
           }), jsx("h2", {
-            className: styles$z.stepTitle,
+            className: styles$A.stepTitle,
             children: "Pack and ship the item"
           })]
         }), jsxs("p", {
-          className: styles$z.body2,
+          className: styles$A.body2,
           children: ["Repackage the item securely and attach the return label to the outside of the package.", jsx("br", {}), "Drop it off at your local carrier or post office."]
         })]
       })]
@@ -7248,7 +7248,7 @@ const attrs = "_attrs_o44fl_100";
 const price$2 = "_price_o44fl_115";
 const paid$1 = "_paid_o44fl_124";
 const was$2 = "_was_o44fl_132";
-const styles$y = {
+const styles$z = {
   page: page$4,
   titles: titles$1,
   title: title$i,
@@ -7281,42 +7281,42 @@ function ReturnTrackingView({ ret, locale: localeProp }) {
     tone: "light",
     fill: true,
     children: jsxs("div", {
-      className: styles$y.page,
+      className: styles$z.page,
       children: [jsxs("div", {
-        className: styles$y.titles,
+        className: styles$z.titles,
         children: [jsx("h1", {
-          className: styles$y.title,
+          className: styles$z.title,
           children: "Return in progress"
         }), jsx("p", {
-          className: styles$y.subtitle,
+          className: styles$z.subtitle,
           children: `Return #${ret.return_ref} · Reported ${reported}`
         })]
       }), jsx(OrderTimeline, {
         progress: ret.progress,
         locale
       }), jsx("ul", {
-        className: styles$y.items,
+        className: styles$z.items,
         children: ret.items.map((item2) => jsxs("li", {
-          className: styles$y.item,
+          className: styles$z.item,
           children: [jsx("div", {
-            className: styles$y.thumb,
+            className: styles$z.thumb,
             children: item2.image ? jsx(ShopImage, {
               src: item2.image,
               alt: "",
               fill: true,
               sizes: "48px",
-              className: styles$y.img
+              className: styles$z.img
             }) : jsx("div", {
-              className: styles$y.placeholder,
+              className: styles$z.placeholder,
               "aria-hidden": "true"
             })
           }), jsxs("div", {
-            className: styles$y.meta,
+            className: styles$z.meta,
             children: [jsx("p", {
-              className: styles$y.name,
+              className: styles$z.name,
               children: item2.title ?? item2.sku
             }), (item2.attributes?.size || pctOff(item2)) && jsxs("p", {
-              className: styles$y.attrs,
+              className: styles$z.attrs,
               children: [item2.attributes?.size && jsx("span", {
                 children: `Size: ${item2.attributes.size}`
               }), pctOff(item2) !== void 0 && jsx(SaleBadge, {
@@ -7324,12 +7324,12 @@ function ReturnTrackingView({ ret, locale: localeProp }) {
               })]
             })]
           }), jsxs("div", {
-            className: styles$y.price,
+            className: styles$z.price,
             children: [jsx("span", {
-              className: styles$y.paid,
+              className: styles$z.paid,
               children: format(item2.unit_price)
             }), item2.compare_at_unit_price && jsx("span", {
-              className: styles$y.was,
+              className: styles$z.was,
               children: format(item2.compare_at_unit_price)
             })]
           })]
@@ -7456,7 +7456,7 @@ const cancel = "_cancel_1v9my_180";
 const cancelledHead = "_cancelledHead_1v9my_204";
 const cancelledTitle = "_cancelledTitle_1v9my_210";
 const cancelledMeta = "_cancelledMeta_1v9my_219";
-const styles$x = {
+const styles$y = {
   page: page$3,
   widget,
   titleRow,
@@ -7547,7 +7547,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onC
   }, [load]);
   if (state === "loading") {
     return jsxs("div", {
-      className: styles$x.page,
+      className: styles$y.page,
       children: [jsx(Skeleton, {
         height: 206,
         radius: 8
@@ -7594,14 +7594,14 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onC
   }
   if (order.status === "cancelled") {
     return jsxs("div", {
-      className: styles$x.page,
+      className: styles$y.page,
       children: [jsxs("div", {
-        className: styles$x.cancelledHead,
+        className: styles$y.cancelledHead,
         children: [jsx("h1", {
-          className: styles$x.cancelledTitle,
+          className: styles$y.cancelledTitle,
           children: "Order cancelled"
         }), jsx("p", {
-          className: styles$x.cancelledMeta,
+          className: styles$y.cancelledMeta,
           children: `Order #${shortRef$1(order.order_ref)} · Placed ${placedOn(order.placed_at, locale)}`
         })]
       }), onReorder && jsx(Button, {
@@ -7625,17 +7625,17 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onC
     });
   }
   return jsxs("div", {
-    className: styles$x.page,
+    className: styles$y.page,
     children: [jsxs("section", {
-      className: styles$x.widget,
+      className: styles$y.widget,
       "aria-label": t("Delivery status"),
       children: [jsxs("div", {
-        className: styles$x.titleRow,
+        className: styles$y.titleRow,
         children: [jsx("h1", {
-          className: styles$x.headline,
+          className: styles$y.headline,
           children: `Order #${shortRef$1(order.order_ref)}`
         }), order.tracking?.url && inTransit && jsxs("a", {
-          className: styles$x.track,
+          className: styles$y.track,
           href: order.tracking.url,
           target: "_blank",
           rel: "noopener noreferrer",
@@ -7652,7 +7652,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onC
         locale
       })]
     }), jsx("hr", {
-      className: styles$x.rule
+      className: styles$y.rule
     }), jsx(OrderLines, {
       order
     }), jsx(ShippingAddressCard, {
@@ -7661,7 +7661,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onC
       order
     }), order.can_cancel && jsx("button", {
       type: "button",
-      className: styles$x.cancel,
+      className: styles$y.cancel,
       onClick: () => setCancelOpen(true),
       children: "Cancel order"
     }), jsx(NeedHelp, {
@@ -7709,14 +7709,14 @@ function NeedHelp({ order, onStartReturn, onContactSupport }) {
   const emit = useShopEvent();
   if (order.status !== "delivered") return null;
   return jsxs("section", {
-    className: styles$x.help,
+    className: styles$y.help,
     "aria-labelledby": "order-help",
     children: [jsx("h2", {
-      className: styles$x.helpTitle,
+      className: styles$y.helpTitle,
       id: "order-help",
       children: "Need help?"
     }), jsxs("div", {
-      className: styles$x.helpRows,
+      className: styles$y.helpRows,
       children: [order.can_return && onStartReturn && jsx(HelpRow, {
         label: "Start a return",
         onClick: onStartReturn
@@ -7736,7 +7736,7 @@ function NeedHelp({ order, onStartReturn, onContactSupport }) {
 function HelpRow({ label: label2, onClick }) {
   return jsxs("button", {
     type: "button",
-    className: styles$x.helpRow,
+    className: styles$y.helpRow,
     onClick,
     children: [jsx("span", {
       children: label2
@@ -7753,7 +7753,7 @@ const headline = "_headline_2uqhz_47";
 const subtitle$4 = "_subtitle_2uqhz_65";
 const rule = "_rule_2uqhz_90";
 const done = "_done_2uqhz_107";
-const styles$w = {
+const styles$x = {
   page: page$2,
   confirmed,
   title: title$h,
@@ -7806,7 +7806,7 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
   }, [load]);
   if (state === "loading") {
     return jsxs("div", {
-      className: styles$w.page,
+      className: styles$x.page,
       children: [jsx(Skeleton, {
         height: 140,
         radius: 8
@@ -7829,17 +7829,17 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
     });
   }
   return jsxs("div", {
-    className: styles$w.page,
+    className: styles$x.page,
     children: [jsxs("section", {
-      className: styles$w.confirmed,
+      className: styles$x.confirmed,
       "aria-label": "Order confirmation",
       children: [jsxs("div", {
-        className: styles$w.title,
+        className: styles$x.title,
         children: [jsx("h1", {
-          className: styles$w.headline,
+          className: styles$x.headline,
           children: "Your order is confirmed"
         }), order.email && jsx("p", {
-          className: styles$w.subtitle,
+          className: styles$x.subtitle,
           children: `We’ve sent a confirmation to ${order.email}`
         })]
       }), jsx(OrderTimeline, {
@@ -7850,7 +7850,7 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
         locale
       })]
     }), jsx("hr", {
-      className: styles$w.rule
+      className: styles$x.rule
     }), jsx(OrderLines, {
       order
     }), jsx(ShippingAddressCard, {
@@ -7860,7 +7860,7 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
     }), onDone && jsx(Button, {
       variant: "secondary",
       fullWidth: true,
-      className: styles$w.done,
+      className: styles$x.done,
       onClick: onDone,
       children: "Done"
     })]
@@ -7870,7 +7870,7 @@ const badge$2 = "_badge_ghd02_6";
 const progress = "_progress_ghd02_22";
 const delivered = "_delivered_ghd02_27";
 const cancelled = "_cancelled_ghd02_32";
-const styles$v = {
+const styles$w = {
   badge: badge$2,
   progress,
   delivered,
@@ -7895,7 +7895,7 @@ function OrderStatusBadge({ status }) {
   const label2 = LABEL[status] ?? status.replace(/_/g, " ");
   const tone = TONE[status] ?? "progress";
   return jsx("span", {
-    className: [styles$v.badge, styles$v[tone]].join(" "),
+    className: [styles$w.badge, styles$w[tone]].join(" "),
     children: t(label2)
   });
 }
@@ -7915,7 +7915,7 @@ const image$8 = "_image_6xodo_143";
 const placeholder$5 = "_placeholder_6xodo_147";
 const more = "_more_6xodo_154";
 const chevron$2 = "_chevron_6xodo_167";
-const styles$u = {
+const styles$v = {
   page: page$1,
   empty,
   cta: cta$1,
@@ -7982,7 +7982,7 @@ function OrderListContent({ onOpenOrder, onStartShopping, locale: localeProp })
   }, [load]);
   if (state === "loading") {
     return jsxs("div", {
-      className: styles$u.page,
+      className: styles$v.page,
       children: [jsx(Skeleton, {
         height: 148,
         radius: 12
@@ -8003,14 +8003,14 @@ function OrderListContent({ onOpenOrder, onStartShopping, locale: localeProp })
   }
   if (orders2.length === 0) {
     return jsx("div", {
-      className: styles$u.empty,
+      className: styles$v.empty,
       children: jsx(EmptyState, {
         title: t("Nothing here yet"),
         body: "Your orders will show up here once you've shopped.",
         ...onStartShopping ? {
           action: jsx("button", {
             type: "button",
-            className: styles$u.cta,
+            className: styles$v.cta,
             onClick: onStartShopping,
             children: "Continue shopping"
           })
@@ -8019,7 +8019,7 @@ function OrderListContent({ onOpenOrder, onStartShopping, locale: localeProp })
     });
   }
   return jsx("ul", {
-    className: styles$u.page,
+    className: styles$v.page,
     children: orders2.map((order) => jsx("li", {
       children: jsx(OrderCard, {
         order,
@@ -8034,36 +8034,36 @@ function OrderListContent({ onOpenOrder, onStartShopping, locale: localeProp })
 function OrderCard({ order, locale, onOpen }) {
   const body3 = jsxs(Fragment, {
     children: [jsxs("div", {
-      className: styles$u.head,
+      className: styles$v.head,
       children: [jsxs("div", {
-        className: styles$u.heading,
+        className: styles$v.heading,
         children: [jsx("span", {
-          className: styles$u.title,
+          className: styles$v.title,
           children: `Order #${shortRef(order.order_ref)}`
         }), jsx("span", {
-          className: styles$u.date,
+          className: styles$v.date,
           children: formatPlaced(order.placed_at, locale)
         })]
       }), jsx(OrderStatusBadge, {
         status: order.status
       })]
     }), jsxs("div", {
-      className: styles$u.bottom,
+      className: styles$v.bottom,
       children: [jsx(Thumbnails, {
         order
       }), onOpen && jsx("span", {
-        className: styles$u.chevron,
+        className: styles$v.chevron,
         children: jsx(Chevron, {})
       })]
     })]
   });
   if (!onOpen) return jsx("div", {
-    className: styles$u.card,
+    className: styles$v.card,
     children: body3
   });
   return jsx("button", {
     type: "button",
-    className: [styles$u.card, styles$u.tappable].join(" "),
+    className: [styles$v.card, styles$v.tappable].join(" "),
     onClick: onOpen,
     "aria-label": `Order ${shortRef(order.order_ref)}, ${order.headline}`,
     children: body3
@@ -8075,27 +8075,27 @@ function Thumbnails({ order }) {
   const overflow = images.length >= TILES && hidden > 1 ? hidden : 0;
   if (images.length === 0) {
     return jsx("div", {
-      className: styles$u.strip,
+      className: styles$v.strip,
       children: jsx("div", {
-        className: [styles$u.tile, styles$u.placeholder].join(" "),
+        className: [styles$v.tile, styles$v.placeholder].join(" "),
         "aria-hidden": "true"
       })
     });
   }
   return jsx("div", {
-    className: styles$u.strip,
+    className: styles$v.strip,
     children: images.map((src, i) => {
       const last = i === images.length - 1;
       return jsxs("div", {
-        className: styles$u.tile,
+        className: styles$v.tile,
         children: [jsx(ShopImage, {
           src,
           alt: "",
           fill: true,
           sizes: "56px",
-          className: styles$u.image
+          className: styles$v.image
         }), overflow > 0 && last && jsxs("span", {
-          className: styles$u.more,
+          className: styles$v.more,
           children: [jsxs("span", {
             "aria-hidden": "true",
             children: ["+", overflow]
@@ -8121,21 +8121,45 @@ function formatPlaced(iso, locale) {
     year: "numeric"
   })}`;
 }
-const tile$1 = "_tile_1a177_7";
-const media$2 = "_media_1a177_15";
-const image$7 = "_image_1a177_25";
-const placeholder$4 = "_placeholder_1a177_29";
-const topBadge = "_topBadge_1a177_37";
-const saleBadge$2 = "_saleBadge_1a177_78";
-const oos$3 = "_oos_1a177_86";
-const bottom = "_bottom_1a177_113";
-const titlePrice$1 = "_titlePrice_1a177_100";
-const title$f = "_title_1a177_5";
-const swatches = "_swatches_1a177_181";
-const swatch = "_swatch_1a177_181";
-const swatchActive = "_swatchActive_1a177_198";
-const swatchDot = "_swatchDot_1a177_202";
-const large = "_large_1a177_213";
+const swatches = "_swatches_mdi63_1";
+const swatch = "_swatch_mdi63_1";
+const swatchActive = "_swatchActive_mdi63_18";
+const swatchDot = "_swatchDot_mdi63_22";
+const styles$u = {
+  swatches,
+  swatch,
+  swatchActive,
+  swatchDot
+};
+function ColourSwatches({ variants, className }) {
+  const colours = colourOptions(variants);
+  if (colours.length === 0) return null;
+  return jsx("div", {
+    className: [styles$u.swatches, className ?? ""].join(" ").trim(),
+    "aria-hidden": "true",
+    children: colours.map((c, i) => jsx("span", {
+      className: [styles$u.swatch, i === 0 ? styles$u.swatchActive : ""].join(" "),
+      children: jsx("span", {
+        className: styles$u.swatchDot,
+        style: {
+          background: swatchColour(c.value)
+        }
+      })
+    }, c.value))
+  });
+}
+const tile$1 = "_tile_yg69t_7";
+const media$2 = "_media_yg69t_15";
+const image$7 = "_image_yg69t_25";
+const placeholder$4 = "_placeholder_yg69t_29";
+const topBadge = "_topBadge_yg69t_37";
+const saleBadge$2 = "_saleBadge_yg69t_78";
+const oos$3 = "_oos_yg69t_86";
+const bottom = "_bottom_yg69t_113";
+const titlePrice$1 = "_titlePrice_yg69t_100";
+const title$f = "_title_yg69t_5";
+const large = "_large_yg69t_185";
+const swatchSlot = "_swatchSlot_yg69t_223";
 const styles$t = {
   tile: tile$1,
   media: media$2,
@@ -8147,18 +8171,14 @@ const styles$t = {
   bottom,
   titlePrice: titlePrice$1,
   title: title$f,
-  swatches,
-  swatch,
-  swatchActive,
-  swatchDot,
-  large
+  large,
+  swatchSlot
 };
 function ProductTile({ product, priority, size = "default" }) {
   const image2 = product.media[0];
   const anyInStock = product.variants.length === 0 ? true : product.variants.some((v) => v.in_stock);
   const topBadge2 = product.badges?.[0];
   const pct = discountPct(product.price, product.compare_at);
-  const swatches2 = colourOptions(product.variants);
   return jsxs(ShopLink, {
     to: `/product/${encodeURIComponent(product.sku)}`,
     className: [styles$t.tile, size === "large" ? styles$t.large : ""].join(" "),
@@ -8200,36 +8220,28 @@ function ProductTile({ product, priority, size = "default" }) {
           variant: "strikethrough",
           align: "end"
         })]
-      }), swatches2.length > 0 && jsx("div", {
-        className: styles$t.swatches,
-        "aria-hidden": "true",
-        children: swatches2.map((c, i) => jsx("span", {
-          className: [styles$t.swatch, i === 0 ? styles$t.swatchActive : ""].join(" "),
-          children: jsx("span", {
-            className: styles$t.swatchDot,
-            style: {
-              background: swatchColour(c.value)
-            }
-          })
-        }, c.value))
+      }), jsx(ColourSwatches, {
+        variants: product.variants,
+        className: styles$t.swatchSlot
       })]
     })]
   });
 }
-const section$3 = "_section_1n5an_5";
-const title$e = "_title_1n5an_17";
-const link = "_link_1n5an_26";
-const track$4 = "_track_1n5an_38";
-const frame = "_frame_1n5an_58";
-const image$6 = "_image_1n5an_69";
-const placeholder$3 = "_placeholder_1n5an_73";
-const saleBadge$1 = "_saleBadge_1n5an_85";
-const oos$2 = "_oos_1n5an_93";
-const caption = "_caption_1n5an_109";
-const name = "_name_1n5an_122";
-const price$1 = "_price_1n5an_135";
-const paid = "_paid_1n5an_144";
-const was$1 = "_was_1n5an_150";
+const section$3 = "_section_v48ok_9";
+const title$e = "_title_v48ok_21";
+const link = "_link_v48ok_30";
+const track$4 = "_track_v48ok_42";
+const frame = "_frame_v48ok_62";
+const image$6 = "_image_v48ok_73";
+const placeholder$3 = "_placeholder_v48ok_77";
+const saleBadge$1 = "_saleBadge_v48ok_89";
+const oos$2 = "_oos_v48ok_97";
+const caption = "_caption_v48ok_113";
+const swatchRow = "_swatchRow_v48ok_132";
+const name = "_name_v48ok_142";
+const price$1 = "_price_v48ok_155";
+const paid = "_paid_v48ok_164";
+const was$1 = "_was_v48ok_170";
 const styles$s = {
   section: section$3,
   title: title$e,
@@ -8241,6 +8253,7 @@ const styles$s = {
   saleBadge: saleBadge$1,
   oos: oos$2,
   caption,
+  swatchRow,
   name,
   price: price$1,
   paid,
@@ -8308,6 +8321,9 @@ function ProductGallery({ title: title2, product }) {
               children: format(product.compare_at)
             })]
           })]
+        }), jsx(ColourSwatches, {
+          variants: product.variants,
+          className: styles$s.swatchRow
         })]
       })]
     })]
@@ -10256,14 +10272,14 @@ function LifestyleText({ text: text2, align = "center" }) {
     children: text2
   });
 }
-const wrap = "_wrap_9mquf_1";
-const box = "_box_9mquf_5";
-const track$1 = "_track_9mquf_15";
-const slide = "_slide_9mquf_31";
-const image$1 = "_image_9mquf_38";
-const dots$1 = "_dots_9mquf_43";
-const dot$1 = "_dot_9mquf_43";
-const dotActive$1 = "_dotActive_9mquf_63";
+const wrap = "_wrap_79nr3_10";
+const box = "_box_79nr3_14";
+const track$1 = "_track_79nr3_23";
+const slide = "_slide_79nr3_39";
+const image$1 = "_image_79nr3_46";
+const dots$1 = "_dots_79nr3_51";
+const dot$1 = "_dot_79nr3_51";
+const dotActive$1 = "_dotActive_79nr3_76";
 const styles$7 = {
   wrap,
   box,