UNPKG

@fast-simon/storefront-kit

Version:

A comprehensive kit for developing storefronts with Fast Simon components, utilities, and React/Hydrogen support.

1,591 lines (1,570 loc) 91.9 kB
var Nr = Object.defineProperty; var Ot = (e) => { throw TypeError(e); }; var Lr = (e, t, r) => t in e ? Nr(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r; var jt = (e, t, r) => Lr(e, typeof t != "symbol" ? t + "" : t, r), Tt = (e, t, r) => t.has(e) || Ot("Cannot " + r); var de = (e, t, r) => (Tt(e, t, "read from private field"), r ? r.call(e) : t.get(e)), He = (e, t, r) => t.has(e) ? Ot("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), Be = (e, t, r, n) => (Tt(e, t, "write to private field"), n ? n.call(e, r) : t.set(e, r), r); import * as ee from "react"; import st, { createContext as ct, useContext as Qt, useMemo as ze, useState as Fr, useEffect as Gt, lazy as $r, forwardRef as Ur, useRef as Se, Suspense as Wr } from "react"; import { Link as pe, Await as Mr, useSearchParams as Vr, useFetcher as Jr } from "@remix-run/react"; var tt = { exports: {} }, ye = {}; /** * @license React * react-jsx-runtime.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ var Dt; function qr() { if (Dt) return ye; Dt = 1; var e = st, t = Symbol.for("react.element"), r = Symbol.for("react.fragment"), n = Object.prototype.hasOwnProperty, o = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, s = { key: !0, ref: !0, __self: !0, __source: !0 }; function u(c, d, v) { var y, x = {}, m = null, f = null; v !== void 0 && (m = "" + v), d.key !== void 0 && (m = "" + d.key), d.ref !== void 0 && (f = d.ref); for (y in d) n.call(d, y) && !s.hasOwnProperty(y) && (x[y] = d[y]); if (c && c.defaultProps) for (y in d = c.defaultProps, d) x[y] === void 0 && (x[y] = d[y]); return { $$typeof: t, type: c, key: m, ref: f, props: x, _owner: o.current }; } return ye.Fragment = r, ye.jsx = u, ye.jsxs = u, ye; } var we = {}; /** * @license React * react-jsx-runtime.development.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ var At; function Kr() { return At || (At = 1, process.env.NODE_ENV !== "production" && function() { var e = st, t = Symbol.for("react.element"), r = Symbol.for("react.portal"), n = Symbol.for("react.fragment"), o = Symbol.for("react.strict_mode"), s = Symbol.for("react.profiler"), u = Symbol.for("react.provider"), c = Symbol.for("react.context"), d = Symbol.for("react.forward_ref"), v = Symbol.for("react.suspense"), y = Symbol.for("react.suspense_list"), x = Symbol.for("react.memo"), m = Symbol.for("react.lazy"), f = Symbol.for("react.offscreen"), D = Symbol.iterator, T = "@@iterator"; function L(i) { if (i === null || typeof i != "object") return null; var l = D && i[D] || i[T]; return typeof l == "function" ? l : null; } var O = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; function b(i) { { for (var l = arguments.length, h = new Array(l > 1 ? l - 1 : 0), p = 1; p < l; p++) h[p - 1] = arguments[p]; C("error", i, h); } } function C(i, l, h) { { var p = O.ReactDebugCurrentFrame, A = p.getStackAddendum(); A !== "" && (l += "%s", h = h.concat([A])); var I = h.map(function(j) { return String(j); }); I.unshift("Warning: " + l), Function.prototype.apply.call(console[i], console, I); } } var B = !1, a = !1, w = !1, _ = !1, P = !1, g; g = Symbol.for("react.module.reference"); function E(i) { return !!(typeof i == "string" || typeof i == "function" || i === n || i === s || P || i === o || i === v || i === y || _ || i === f || B || a || w || typeof i == "object" && i !== null && (i.$$typeof === m || i.$$typeof === x || i.$$typeof === u || i.$$typeof === c || i.$$typeof === d || // This needs to include all possible module reference object // types supported by any Flight configuration anywhere since // we don't know which Flight build this will end up being used // with. i.$$typeof === g || i.getModuleId !== void 0)); } function R(i, l, h) { var p = i.displayName; if (p) return p; var A = l.displayName || l.name || ""; return A !== "" ? h + "(" + A + ")" : h; } function N(i) { return i.displayName || "Context"; } function F(i) { if (i == null) return null; if (typeof i.tag == "number" && b("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof i == "function") return i.displayName || i.name || null; if (typeof i == "string") return i; switch (i) { case n: return "Fragment"; case r: return "Portal"; case s: return "Profiler"; case o: return "StrictMode"; case v: return "Suspense"; case y: return "SuspenseList"; } if (typeof i == "object") switch (i.$$typeof) { case c: var l = i; return N(l) + ".Consumer"; case u: var h = i; return N(h._context) + ".Provider"; case d: return R(i, i.render, "ForwardRef"); case x: var p = i.displayName || null; return p !== null ? p : F(i.type) || "Memo"; case m: { var A = i, I = A._payload, j = A._init; try { return F(j(I)); } catch { return null; } } } return null; } var U = Object.assign, M = 0, z, te, re, H, K, ae, Ee; function Ce() { } Ce.__reactDisabledLog = !0; function We() { { if (M === 0) { z = console.log, te = console.info, re = console.warn, H = console.error, K = console.group, ae = console.groupCollapsed, Ee = console.groupEnd; var i = { configurable: !0, enumerable: !0, value: Ce, writable: !0 }; Object.defineProperties(console, { info: i, log: i, warn: i, error: i, group: i, groupCollapsed: i, groupEnd: i }); } M++; } } function Me() { { if (M--, M === 0) { var i = { configurable: !0, enumerable: !0, writable: !0 }; Object.defineProperties(console, { log: U({}, i, { value: z }), info: U({}, i, { value: te }), warn: U({}, i, { value: re }), error: U({}, i, { value: H }), group: U({}, i, { value: K }), groupCollapsed: U({}, i, { value: ae }), groupEnd: U({}, i, { value: Ee }) }); } M < 0 && b("disabledDepth fell below zero. This is a bug in React. Please file an issue."); } } var se = O.ReactCurrentDispatcher, ce; function ne(i, l, h) { { if (ce === void 0) try { throw Error(); } catch (A) { var p = A.stack.trim().match(/\n( *(at )?)/); ce = p && p[1] || ""; } return ` ` + ce + i; } } var Re = !1, ke; { var lr = typeof WeakMap == "function" ? WeakMap : Map; ke = new lr(); } function mt(i, l) { if (!i || Re) return ""; { var h = ke.get(i); if (h !== void 0) return h; } var p; Re = !0; var A = Error.prepareStackTrace; Error.prepareStackTrace = void 0; var I; I = se.current, se.current = null, We(); try { if (l) { var j = function() { throw Error(); }; if (Object.defineProperty(j.prototype, "props", { set: function() { throw Error(); } }), typeof Reflect == "object" && Reflect.construct) { try { Reflect.construct(j, []); } catch (q) { p = q; } Reflect.construct(i, [], j); } else { try { j.call(); } catch (q) { p = q; } i.call(j.prototype); } } else { try { throw Error(); } catch (q) { p = q; } i(); } } catch (q) { if (q && p && typeof q.stack == "string") { for (var k = q.stack.split(` `), J = p.stack.split(` `), $ = k.length - 1, W = J.length - 1; $ >= 1 && W >= 0 && k[$] !== J[W]; ) W--; for (; $ >= 1 && W >= 0; $--, W--) if (k[$] !== J[W]) { if ($ !== 1 || W !== 1) do if ($--, W--, W < 0 || k[$] !== J[W]) { var Y = ` ` + k[$].replace(" at new ", " at "); return i.displayName && Y.includes("<anonymous>") && (Y = Y.replace("<anonymous>", i.displayName)), typeof i == "function" && ke.set(i, Y), Y; } while ($ >= 1 && W >= 0); break; } } } finally { Re = !1, se.current = I, Me(), Error.prepareStackTrace = A; } var le = i ? i.displayName || i.name : "", ie = le ? ne(le) : ""; return typeof i == "function" && ke.set(i, ie), ie; } function dr(i, l, h) { return mt(i, !1); } function fr(i) { var l = i.prototype; return !!(l && l.isReactComponent); } function Oe(i, l, h) { if (i == null) return ""; if (typeof i == "function") return mt(i, fr(i)); if (typeof i == "string") return ne(i); switch (i) { case v: return ne("Suspense"); case y: return ne("SuspenseList"); } if (typeof i == "object") switch (i.$$typeof) { case d: return dr(i.render); case x: return Oe(i.type, l, h); case m: { var p = i, A = p._payload, I = p._init; try { return Oe(I(A), l, h); } catch { } } } return ""; } var ve = Object.prototype.hasOwnProperty, gt = {}, vt = O.ReactDebugCurrentFrame; function je(i) { if (i) { var l = i._owner, h = Oe(i.type, i._source, l ? l.type : null); vt.setExtraStackFrame(h); } else vt.setExtraStackFrame(null); } function hr(i, l, h, p, A) { { var I = Function.call.bind(ve); for (var j in i) if (I(i, j)) { var k = void 0; try { if (typeof i[j] != "function") { var J = Error((p || "React class") + ": " + h + " type `" + j + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof i[j] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`."); throw J.name = "Invariant Violation", J; } k = i[j](l, j, p, h, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"); } catch ($) { k = $; } k && !(k instanceof Error) && (je(A), b("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", p || "React class", h, j, typeof k), je(null)), k instanceof Error && !(k.message in gt) && (gt[k.message] = !0, je(A), b("Failed %s type: %s", h, k.message), je(null)); } } } var mr = Array.isArray; function Ve(i) { return mr(i); } function gr(i) { { var l = typeof Symbol == "function" && Symbol.toStringTag, h = l && i[Symbol.toStringTag] || i.constructor.name || "Object"; return h; } } function vr(i) { try { return yt(i), !1; } catch { return !0; } } function yt(i) { return "" + i; } function wt(i) { if (vr(i)) return b("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", gr(i)), yt(i); } var _t = O.ReactCurrentOwner, yr = { key: !0, ref: !0, __self: !0, __source: !0 }, St, pt; function wr(i) { if (ve.call(i, "ref")) { var l = Object.getOwnPropertyDescriptor(i, "ref").get; if (l && l.isReactWarning) return !1; } return i.ref !== void 0; } function _r(i) { if (ve.call(i, "key")) { var l = Object.getOwnPropertyDescriptor(i, "key").get; if (l && l.isReactWarning) return !1; } return i.key !== void 0; } function Sr(i, l) { typeof i.ref == "string" && _t.current; } function pr(i, l) { { var h = function() { St || (St = !0, b("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", l)); }; h.isReactWarning = !0, Object.defineProperty(i, "key", { get: h, configurable: !0 }); } } function br(i, l) { { var h = function() { pt || (pt = !0, b("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", l)); }; h.isReactWarning = !0, Object.defineProperty(i, "ref", { get: h, configurable: !0 }); } } var xr = function(i, l, h, p, A, I, j) { var k = { // This tag allows us to uniquely identify this as a React Element $$typeof: t, // Built-in properties that belong on the element type: i, key: l, ref: h, props: j, // Record the component responsible for creating this element. _owner: I }; return k._store = {}, Object.defineProperty(k._store, "validated", { configurable: !1, enumerable: !1, writable: !0, value: !1 }), Object.defineProperty(k, "_self", { configurable: !1, enumerable: !1, writable: !1, value: p }), Object.defineProperty(k, "_source", { configurable: !1, enumerable: !1, writable: !1, value: A }), Object.freeze && (Object.freeze(k.props), Object.freeze(k)), k; }; function Pr(i, l, h, p, A) { { var I, j = {}, k = null, J = null; h !== void 0 && (wt(h), k = "" + h), _r(l) && (wt(l.key), k = "" + l.key), wr(l) && (J = l.ref, Sr(l, A)); for (I in l) ve.call(l, I) && !yr.hasOwnProperty(I) && (j[I] = l[I]); if (i && i.defaultProps) { var $ = i.defaultProps; for (I in $) j[I] === void 0 && (j[I] = $[I]); } if (k || J) { var W = typeof i == "function" ? i.displayName || i.name || "Unknown" : i; k && pr(j, W), J && br(j, W); } return xr(i, k, J, A, p, _t.current, j); } } var Je = O.ReactCurrentOwner, bt = O.ReactDebugCurrentFrame; function ue(i) { if (i) { var l = i._owner, h = Oe(i.type, i._source, l ? l.type : null); bt.setExtraStackFrame(h); } else bt.setExtraStackFrame(null); } var qe; qe = !1; function Ke(i) { return typeof i == "object" && i !== null && i.$$typeof === t; } function xt() { { if (Je.current) { var i = F(Je.current.type); if (i) return ` Check the render method of \`` + i + "`."; } return ""; } } function Er(i) { return ""; } var Pt = {}; function Cr(i) { { var l = xt(); if (!l) { var h = typeof i == "string" ? i : i.displayName || i.name; h && (l = ` Check the top-level render call using <` + h + ">."); } return l; } } function Et(i, l) { { if (!i._store || i._store.validated || i.key != null) return; i._store.validated = !0; var h = Cr(l); if (Pt[h]) return; Pt[h] = !0; var p = ""; i && i._owner && i._owner !== Je.current && (p = " It was passed a child from " + F(i._owner.type) + "."), ue(i), b('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', h, p), ue(null); } } function Ct(i, l) { { if (typeof i != "object") return; if (Ve(i)) for (var h = 0; h < i.length; h++) { var p = i[h]; Ke(p) && Et(p, l); } else if (Ke(i)) i._store && (i._store.validated = !0); else if (i) { var A = L(i); if (typeof A == "function" && A !== i.entries) for (var I = A.call(i), j; !(j = I.next()).done; ) Ke(j.value) && Et(j.value, l); } } } function Rr(i) { { var l = i.type; if (l == null || typeof l == "string") return; var h; if (typeof l == "function") h = l.propTypes; else if (typeof l == "object" && (l.$$typeof === d || // Note: Memo only checks outer props here. // Inner props are checked in the reconciler. l.$$typeof === x)) h = l.propTypes; else return; if (h) { var p = F(l); hr(h, i.props, "prop", p, i); } else if (l.PropTypes !== void 0 && !qe) { qe = !0; var A = F(l); b("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", A || "Unknown"); } typeof l.getDefaultProps == "function" && !l.getDefaultProps.isReactClassApproved && b("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead."); } } function kr(i) { { for (var l = Object.keys(i.props), h = 0; h < l.length; h++) { var p = l[h]; if (p !== "children" && p !== "key") { ue(i), b("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", p), ue(null); break; } } i.ref !== null && (ue(i), b("Invalid attribute `ref` supplied to `React.Fragment`."), ue(null)); } } var Rt = {}; function kt(i, l, h, p, A, I) { { var j = E(i); if (!j) { var k = ""; (i === void 0 || typeof i == "object" && i !== null && Object.keys(i).length === 0) && (k += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."); var J = Er(); J ? k += J : k += xt(); var $; i === null ? $ = "null" : Ve(i) ? $ = "array" : i !== void 0 && i.$$typeof === t ? ($ = "<" + (F(i.type) || "Unknown") + " />", k = " Did you accidentally export a JSX literal instead of a component?") : $ = typeof i, b("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", $, k); } var W = Pr(i, l, h, A, I); if (W == null) return W; if (j) { var Y = l.children; if (Y !== void 0) if (p) if (Ve(Y)) { for (var le = 0; le < Y.length; le++) Ct(Y[le], i); Object.freeze && Object.freeze(Y); } else b("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."); else Ct(Y, i); } if (ve.call(l, "key")) { var ie = F(i), q = Object.keys(l).filter(function(Ir) { return Ir !== "key"; }), Ye = q.length > 0 ? "{key: someKey, " + q.join(": ..., ") + ": ...}" : "{key: someKey}"; if (!Rt[ie + Ye]) { var Ar = q.length > 0 ? "{" + q.join(": ..., ") + ": ...}" : "{}"; b(`A props object containing a "key" prop is being spread into JSX: let props = %s; <%s {...props} /> React keys must be passed directly to JSX without using spread: let props = %s; <%s key={someKey} {...props} />`, Ye, ie, Ar, ie), Rt[ie + Ye] = !0; } } return i === n ? kr(W) : Rr(W), W; } } function Or(i, l, h) { return kt(i, l, h, !0); } function jr(i, l, h) { return kt(i, l, h, !1); } var Tr = jr, Dr = Or; we.Fragment = n, we.jsx = Tr, we.jsxs = Dr; }()), we; } process.env.NODE_ENV === "production" ? tt.exports = qr() : tt.exports = Kr(); var S = tt.exports; const Yr = "2024-10", Hr = { storeDomain: "test", storefrontToken: "abc123", storefrontApiVersion: Yr, countryIsoCode: "US", languageIsoCode: "EN", getStorefrontApiUrl() { return ""; }, getPublicTokenHeaders() { return {}; }, getShopifyDomain() { return ""; } }, Br = ct( Hr ); function zr() { const e = Qt(Br); if (!e) throw new Error("'useShop()' must be a descendent of <ShopifyProvider/>"); return e; } function Le(e) { const t = { id: "", resource: null, resourceId: null, search: "", searchParams: new URLSearchParams(), hash: "" }; if (typeof e != "string") return t; try { const { search: r, searchParams: n, pathname: o, hash: s } = new URL(e), u = o.split("/"), c = u[u.length - 1], d = u[u.length - 2]; return !c || !d ? t : { id: `${c}${r}${s}` || "", resource: d ?? null, resourceId: c || null, search: r, searchParams: n, hash: s }; } catch { return t; } } function Qr(e) { const { countryIsoCode: t, languageIsoCode: r } = zr(), n = r.includes("_") ? r.replace("_", "-") : `${r}-${t}`; if (!n) throw new Error( "useMoney(): Unable to get 'locale' from 'useShop()', which means that 'locale' was not passed to '<ShopifyProvider/>'. 'locale' is required for 'useMoney()' to work" ); const o = parseFloat(e.amount), { defaultFormatter: s, nameFormatter: u, narrowSymbolFormatter: c, withoutTrailingZerosFormatter: d, withoutCurrencyFormatter: v, withoutTrailingZerosOrCurrencyFormatter: y } = ze(() => { const f = { style: "currency", currency: e.currencyCode }; return { defaultFormatter: fe(n, f), nameFormatter: fe(n, { ...f, currencyDisplay: "name" }), narrowSymbolFormatter: fe(n, { ...f, currencyDisplay: "narrowSymbol" }), withoutTrailingZerosFormatter: fe(n, { ...f, minimumFractionDigits: 0, maximumFractionDigits: 0 }), withoutCurrencyFormatter: fe(n), withoutTrailingZerosOrCurrencyFormatter: fe(n, { minimumFractionDigits: 0, maximumFractionDigits: 0 }) }; }, [e.currencyCode, n]), x = (f) => f.type === "currency", m = ze( () => ({ original: () => e, currencyCode: () => e.currencyCode, localizedString: () => s().format(o), parts: () => s().formatToParts(o), withoutTrailingZeros: () => o % 1 === 0 ? d().format(o) : s().format(o), withoutTrailingZerosAndCurrency: () => o % 1 === 0 ? y().format(o) : v().format(o), currencyName: () => { var f; return ((f = u().formatToParts(o).find(x)) == null ? void 0 : f.value) ?? e.currencyCode; }, // e.g. "US dollars" currencySymbol: () => { var f; return ((f = s().formatToParts(o).find(x)) == null ? void 0 : f.value) ?? e.currencyCode; }, // e.g. "USD" currencyNarrowSymbol: () => { var f; return ((f = c().formatToParts(o).find(x)) == null ? void 0 : f.value) ?? ""; }, // e.g. "$" amount: () => s().formatToParts(o).filter( (f) => ["decimal", "fraction", "group", "integer", "literal"].includes( f.type ) ).map((f) => f.value).join("") }), [ e, o, u, s, c, v, d, y ] ); return ze( () => new Proxy(m, { // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call get: (f, D) => { var T; return (T = Reflect.get(f, D)) == null ? void 0 : T.call(null); } }), [m] ); } const It = /* @__PURE__ */ new Map(); function fe(e, t) { const r = JSON.stringify([e, t]); return function() { let n = It.get(r); return n || (n = new Intl.NumberFormat(e, t), It.set(r, n)), n; }; } function Gr({ data: e, as: t, withoutCurrency: r, withoutTrailingZeros: n, measurement: o, measurementSeparator: s = "/", ...u }) { if (!Zr(e)) throw new Error( "<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'" ); const c = Qr(e), d = t ?? "div"; let v = c.localizedString; return (r || n) && (r && !n ? v = c.amount : !r && n ? v = c.withoutTrailingZeros : v = c.withoutTrailingZerosAndCurrency), /* @__PURE__ */ S.jsxs(d, { ...u, children: [ v, o && o.referenceUnit && /* @__PURE__ */ S.jsxs(S.Fragment, { children: [ s, o.referenceUnit ] }) ] }); } function Zr(e) { return typeof e.amount == "string" && !!e.amount && typeof e.currencyCode == "string" && !!e.currencyCode; } const Xr = ee.forwardRef( ({ alt: e, aspectRatio: t, crop: r = "center", data: n, decoding: o = "async", height: s = "auto", loader: u = Ue, loading: c = "lazy", sizes: d, src: v, srcSetOptions: y = { intervals: 15, startingWidth: 200, incrementSize: 200, placeholderWidth: 100 }, width: x = "100%", ...m }, f) => { const D = ee.useMemo(() => { const w = n != null && n.width && (n != null && n.height) ? n == null ? void 0 : n.width : void 0, _ = n != null && n.width && (n != null && n.height) ? n == null ? void 0 : n.height : void 0; return { width: w, height: _, unitsMatch: !!Zt(w, _) }; }, [n]), T = ee.useMemo(() => { const _ = be((x || "100%").toString()), P = `${_.number}${_.unit}`, g = s == null, E = g ? null : be(s.toString()), R = E ? `${E.number}${E.unit}` : "", N = g ? "auto" : R, F = v || (n == null ? void 0 : n.url), U = n != null && n.altText && !e ? n == null ? void 0 : n.altText : e || "", M = t || (D.unitsMatch ? [ xe(D.width), xe(D.height) ].join("/") : void 0); return { width: P, height: N, src: F, alt: U, aspectRatio: M }; }, [ x, s, v, n, e, t, D, m == null ? void 0 : m.key ]), { intervals: L, startingWidth: O, incrementSize: b, placeholderWidth: C } = y, B = ee.useMemo(() => rn( x, L, O, b ), [x, L, O, b]); return Xt(T.width) ? /* @__PURE__ */ S.jsx( en, { aspectRatio: t, crop: r, decoding: o, height: s, imageWidths: B, loader: u, loading: c, normalizedProps: T, passthroughProps: m, ref: f, width: x, data: n } ) : /* @__PURE__ */ S.jsx( tn, { aspectRatio: t, crop: r, decoding: o, imageWidths: B, loader: u, loading: c, normalizedProps: T, passthroughProps: m, placeholderWidth: C, ref: f, sizes: d, data: n } ); } ), en = ee.forwardRef( ({ aspectRatio: e, crop: t, decoding: r, height: n, imageWidths: o, loader: s = Ue, loading: u, normalizedProps: c, passthroughProps: d, width: v, data: y }, x) => { const m = ee.useMemo(() => { const f = xe(v), D = xe(n), T = e || (Zt(c.width, c.height) ? [f, D].join("/") : c.aspectRatio ? c.aspectRatio : void 0), L = o === void 0 ? void 0 : tr(o, T, t, { width: (y == null ? void 0 : y.width) ?? void 0, height: (y == null ? void 0 : y.height) ?? void 0 }), O = D || (T && f ? f * (ut(T) ?? 1) : void 0), b = er(c.src, L, s), C = s({ src: c.src, width: f, height: O, crop: c.height === "auto" ? void 0 : t }); return { width: f, aspectRatio: T, height: O, srcSet: b, src: C }; }, [ e, t, y, n, o, s, c, v ]); return /* @__PURE__ */ S.jsx( "img", { ref: x, alt: c.alt, decoding: r, height: m.height, loading: u, src: m.src, srcSet: m.srcSet, width: m.width, style: { aspectRatio: m.aspectRatio, ...d.style }, ...d } ); } ), tn = ee.forwardRef( ({ crop: e, decoding: t, imageWidths: r, loader: n = Ue, loading: o, normalizedProps: s, passthroughProps: u, placeholderWidth: c, sizes: d, data: v }, y) => { const x = ee.useMemo(() => { const m = r === void 0 ? void 0 : tr(r, s.aspectRatio, e, { width: (v == null ? void 0 : v.width) ?? void 0, height: (v == null ? void 0 : v.height) ?? void 0 }), f = s.aspectRatio && c ? c * (ut(s.aspectRatio) ?? 1) : void 0, D = er(s.src, m, n), T = n({ src: s.src, width: c, height: f, crop: e }); return { placeholderHeight: f, srcSet: D, src: T }; }, [e, v, r, n, s, c]); return /* @__PURE__ */ S.jsx( "img", { ref: y, alt: s.alt, decoding: t, height: x.placeholderHeight, loading: o, sizes: d, src: x.src, srcSet: x.srcSet, width: c, ...u, style: { width: s.width, aspectRatio: s.aspectRatio, ...u.style } } ); } ), Nt = "https://placeholder.shopify.com"; function Ue({ src: e, width: t, height: r, crop: n }) { if (!e) return ""; const o = new URL(e, Nt); return t && o.searchParams.append("width", Math.round(t).toString()), r && o.searchParams.append("height", Math.round(r).toString()), n && o.searchParams.append("crop", n), o.href.replace(Nt, ""); } function Zt(e = "100%", t = "auto") { return be(e.toString()).unit === be(t.toString()).unit; } function be(e) { const t = e.replace(/[0-9.]/g, ""), r = parseFloat(e.replace(t, "")); return { unit: t === "" ? r === void 0 ? "auto" : "px" : t, number: r }; } function xe(e) { if (e === void 0) return; const { unit: t, number: r } = be(e.toString()); switch (t) { case "em": return r * 16; case "rem": return r * 16; case "px": return r; case "": return r; default: return; } } function Xt(e) { return typeof e == "number" || /\d(px|em|rem)$/.test(e); } function er(e, t, r = Ue) { return e ? (t == null ? void 0 : t.length) === 0 || !t ? e : t.map( (n, o) => `${r({ src: e, width: n.width, height: n.height, crop: n.crop })} ${t.length === 3 ? `${o + 1}x` : `${n.width ?? 0}w`}` ).join(", ") : ""; } function rn(e = "100%", t, r, n) { const o = Array.from( { length: t }, (u, c) => c * n + r ), s = Array.from( { length: 3 }, (u, c) => (c + 1) * (xe(e) ?? 0) ); return Xt(e) ? s : o; } function ut(e) { if (!e) return; const [t, r] = e.split("/"); return 1 / (Number(t) / Number(r)); } function tr(e, t, r = "center", n) { if (e) return e.map((o) => ({ width: o, height: t ? o * (ut(t) ?? 1) : void 0, crop: r })).filter(({ width: o, height: s }) => !(n != null && n.width && o > n.width || n != null && n.height && s && s > n.height)); } const Lt = {}; function nn(e, t) { const r = Lt[e]; if (r) return r; const n = new Promise((o, s) => { const u = document.createElement("script"); t != null && t.module ? u.type = "module" : u.type = "text/javascript", u.src = e, u.onload = () => { o(!0); }, u.onerror = () => { s(!1); }, (t == null ? void 0 : t.in) === "head" ? document.head.appendChild(u) : document.body.appendChild(u); const c = t == null ? void 0 : t.attributes; c && Object.keys(c).forEach((d) => { u.setAttribute(d, c[d]); }); }); return Lt[e] = n, n; } function on(e, t) { const [r, n] = Fr("loading"); return Gt( () => { nn(e, t).then(() => n("done")).catch(() => n("error")); }, // Ignore options changes since it won't trigger a new load. // eslint-disable-next-line react-hooks/exhaustive-deps [e] ), r; } var lt = "public", an = "no-store", Ft = { maxAge: "max-age", staleWhileRevalidate: "stale-while-revalidate", sMaxAge: "s-maxage", staleIfError: "stale-if-error" }; function sn(e) { let t = []; return Object.keys(e).forEach((r) => { r === "mode" ? t.push(e[r]) : Ft[r] && t.push(`${Ft[r]}=${e[r]}`); }), t.join(", "); } function Q(e) { return { mode: lt, maxAge: 1, staleWhileRevalidate: 9, ...e }; } function Qe(e) { return { mode: lt, maxAge: 3600, staleWhileRevalidate: 82800, ...e }; } function rr(e) { return { mode: lt, maxAge: 1, staleWhileRevalidate: 86399, ...e }; } function nr(e) { return String(e).includes("__proto__") ? JSON.parse(e, cn) : JSON.parse(e); } function cn(e, t) { if (e !== "__proto__") return t; } function Ne(e, t) { return e && t ? { ...e, ...t } : e || rr(); } function rt(e) { return sn(Ne(e)); } async function un(e, t) { if (!e) return; let r = await e.match(t); if (r) return r; } async function ln(e, t, r, n) { if (!e) return; let o = Ne(n), s = rt(Ne(o, { maxAge: (o.maxAge || 0) + (o.staleWhileRevalidate || 0) })), u = rt(Ne(o)); r.headers.set("cache-control", s), r.headers.set("real-cache-control", u), r.headers.set("cache-put-date", String(Date.now())), await e.put(t, r); } async function dn(e, t) { e && await e.delete(t); } function fn(e, t) { let r = e.headers.get("real-cache-control"), n = 0; if (r) { let o = r.match(/max-age=(\d*)/); o && o.length > 1 && (n = parseFloat(o[1])); } return [(Date.now() - Number(t)) / 1e3, n]; } function hn(e, t) { let r = t.headers.get("cache-put-date"); if (!r) return !1; let [n, o] = fn(t, r); return n > o; } var dt = { get: un, set: ln, delete: dn, generateDefaultCacheControlHeader: rt, isStale: hn }; function ft(e) { return `https://shopify.dev/?${e}`; } function mn(e) { return e || rr(); } async function gn(e, t) { if (!e) return; let r = ft(t), n = new Request(r), o = await dt.get(e, n); if (!o) return; let s = await o.text(); try { return [nr(s), o]; } catch { return [s, o]; } } async function vn(e, t, r, n) { if (!e) return; let o = ft(t), s = new Request(o), u = new Response(JSON.stringify(r)); await dt.set(e, s, u, mn(n)); } function yn(e, t) { return dt.isStale(new Request(ft(e)), t); } function wn(e) { let t = Array.isArray(e) ? e : [e], r = ""; for (let n of t) n != null && (typeof n == "object" ? r += JSON.stringify(n) : r += n.toString()); return encodeURIComponent(r); } var Ge = /* @__PURE__ */ new Set(); async function ir(e, t, { strategy: r = Q(), cacheInstance: n, shouldCacheResult: o = () => !0, waitUntil: s, debugInfo: u }) { let c = wn([...typeof e == "string" ? [e] : e]), d = (f) => { var D, T, L, O; f.displayName, (D = f.response) == null || D.url, (T = f.response) != null && T.status, (L = f.response) != null && L.statusText, Array.from(((O = f.response) == null ? void 0 : O.headers.entries()) || []); }, v; if (!n || !r || r.mode === an) return await t({ addDebugData: d }); let y = (f) => vn(n, c, { value: f, debugInfo: void 0 }, r), x = await gn(n, c); if (x && typeof x[0] != "string") { let [{ value: f, debugInfo: D }, T] = x, L = yn(c, T) ? "STALE" : "HIT"; if (!Ge.has(c) && L === "STALE") { Ge.add(c); let O = Promise.resolve().then(async () => { let b = Date.now(); try { let C = await t({ addDebugData: d }); o(C) && (await y(C), v == null || v({ result: C, cacheStatus: "PUT", overrideStartTime: b })); } catch (C) { C.message && (C.message = "SWR in sub-request failed: " + C.message), console.error(C); } finally { Ge.delete(c); } }); s == null || s(O); } return f; } let m = await t({ addDebugData: d }); if (o(m)) { let f = Promise.resolve().then(async () => { await y(m); }); s == null || s(f); } return m; } function _n(e, t) { return [e, { status: t.status, statusText: t.statusText, headers: Array.from(t.headers.entries()) }]; } function $t([e, t]) { return [e, new Response(e, t)]; } async function Sn(e, t, { cacheInstance: r, cache: n, cacheKey: o = [e, t], shouldCacheResponse: s, waitUntil: u, debugInfo: c }) { return !n && (!t.method || t.method === "GET") && (n = Q()), ir(o, async () => { let d = await fetch(e, t); if (!d.ok) return d; let v = await d.text().catch(() => ""); try { v && (v = nr(v)); } catch { } return _n(v, d); }, { cacheInstance: r, waitUntil: u, strategy: n ?? null, debugInfo: c, shouldCacheResult: (d) => "ok" in d ? !1 : s(...$t(d)) }).then((d) => "ok" in d ? [null, d] : $t(d)); } var he = void 0; function Ut(e, t) { return pn(e.headers, t); } function pn(e, t) { var n; let r = ((n = e == null ? void 0 : e.get) == null ? void 0 : n.call(e, t)) ?? (e == null ? void 0 : e[t]); return typeof r == "string" ? r : null; } function Wt(e) { return { requestId: e ? Ut(e, "request-id") : void 0, purpose: e ? Ut(e, "purpose") : void 0 }; } function bn(e) { let { cache: t, waitUntil: r, request: n } = e; return { run: ({ cacheKey: o, cacheStrategy: s, shouldCacheResult: u }, c) => ir(o, c, { shouldCacheResult: u, strategy: s, cacheInstance: t, waitUntil: r, debugInfo: { ...Wt(n), stackInfo: he == null ? void 0 : he() } }), fetch: (o, s, u) => Sn(o, s ?? {}, { waitUntil: r, cacheKey: [o, s], cacheInstance: t, debugInfo: { url: o, ...Wt(n), stackInfo: he == null ? void 0 : he(), displayName: u == null ? void 0 : u.displayName }, cache: u.cacheStrategy, ...u }).then(([c, d]) => ({ data: c, response: d })) }; } $r(() => import("./log-seo-tags-TY72EQWZ-DSYjcGiB.js")); var or = ct(void 0); or.Provider; var xn = () => Qt(or); Ur((e, t) => { let { waitForHydration: r, src: n, ...o } = e; if (r) return S.jsx(Pn, { src: n, options: o }); let s = xn(); return S.jsx("script", { suppressHydrationWarning: !0, ...o, src: n, nonce: s, ref: t }); }); function Pn({ src: e, options: t }) { if (!e) throw new Error("`waitForHydration` with the Script component requires a `src` prop"); return on(e, { attributes: t }), null; } var En = { canTrack: () => !1, cart: null, customData: {}, prevCart: null, publish: () => { }, shop: null, subscribe: () => { }, register: () => ({ ready: () => { } }), customerPrivacy: null, privacyBanner: null }; ct(En); function Cn({ product: e, imageAspectRatio: t = "1/1" }) { return /* @__PURE__ */ S.jsx("div", { className: "fs-recommended-product", children: /* @__PURE__ */ S.jsxs( pe, { className: "fs-recommended-product-content", to: `/products/${e.handle}`, children: [ /* @__PURE__ */ S.jsx( Xr, { data: e.images.nodes[0], aspectRatio: t, sizes: "(min-width: 45em) 20vw, 50vw", className: "fs-recommended-product-image" } ), /* @__PURE__ */ S.jsx("h4", { children: e.title }), /* @__PURE__ */ S.jsx("small", { children: /* @__PURE__ */ S.jsx(Gr, { data: e.priceRange.minVariantPrice }) }) ] } ) }, e.id); } const Rn = ` .fs-recommended-products-container { width: 100%; margin: 10px 0; } .fs-recommended-products-grid-container { width: 100%; overflow: auto hidden; padding: 0 0 10px 0; display: flex; align-items: center; } .fs-recommended-products-grid { grid-template-columns: repeat(var(--num-of-products), calc(calc(calc(100% / var(--mobile-breakpoint)) - var(--carousel-gap)) - 16px) ); display: grid; grid-gap: var(--carousel-gap); width: 100%; max-width: -webkit-fill-available; } .fs-recommended-products-widget-title { display: flex; align-items: center; justify-content: center; font-family: Lato,sans-serif!important; margin-bottom: 10px; } .fs-grid-arrows-container { width: 100%; position: relative; height: 100%; display: flex; align-items: center; } .fs-arrows-container { position: absolute; width: 100%; display: flex; align-items: center; justify-content: space-between; opacity: calc(var(--num-of-products) - var(--mobile-breakpoint)); } .fs-recommended-product { display: flex; overflow: hidden; border-radius: 8px; border: 1px solid var(--lines-disabled); width: 100%; height: 100%; position: relative; align-items: center; justify-content: center; } .fs-recommended-product-content { width: 100%; height: 100%; position: relative; } .fs-widget-arrow-left, .fs-widget-arrow-right { display: flex; width: 36px; height: 36px; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; position: absolute; z-index: 6; border-radius: 200px; background-color: #006CDC99; transition: background-color 0.1s ease-in-out; color: white; } .fs-arrow-icon { height: inherit; display: flex; align-items: center; fill: white; } .fs-widget-arrow-left { left: 0; transform: rotate(180deg); } .fs-widget-arrow-right { right: 0; } .fs-recommended-product-image { height: unset; object-fit: cover; } .arrow-hide { display: none; } .spinner-container { display: flex; justify-content: center; align-items: center; height: 100px; } .spinner { border: 4px solid rgba(0, 0, 0, 0.1); border-top: 4px solid #000000; border-radius: 50%; width: 36px; height: 36px; spin 0.8s cubic-bezier(0.26, 0.14, 0.59, 0.79) infinite } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media screen and (min-width: 1024px) { .fs-recommended-products-grid { grid-template-columns: repeat(var(--num-of-products), calc(calc(calc(100% / var(--desktop-breakpoint)) - var(--carousel-gap)) - 16px) ); } .fs-recommended-products-container { grid-area: span 2 / span 2; } .fs-arrows-container { opacity: calc(var(--num-of-products) - var(--desktop-breakpoint)); } } @media screen and (min-width: 720px) and (max-width: 1023px) { .fs-recommended-products-grid { grid-template-columns: repeat(var(--num-of-products), calc(calc(calc(100% / var(--tablet-breakpoint)) - var(--carousel-gap)) - 16px) ); } .fs-recommended-products-container { grid-area: span 2 / span 2; } .fs-arrows-container { opacity: calc(var(--num-of-products) - var(--tablet-breakpoint)); } } `; function Mt() { return /* @__PURE__ */ S.jsx( "svg", { xmlns: "http://www.w3.org/2000/svg", height: "1em", viewBox: "0 0 448 512", className: "fs-arrow-icon", children: /* @__PURE__ */ S.jsx("path", { d: "M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z" }) } ); } const kn = () => /* @__PURE__ */ S.jsx("div", { className: "spinner-container", children: /* @__PURE__ */ S.jsx("div", { className: "spinner" }) }); function gi({ title: e, products: t, renderProduct: r, breakpoints: n = { mobile: 2, desktop: 4, tablet: 3 }, carouselGap: o = 16, RightArrowIcon: s, imageAspectRatio: u }) { const c = Se(null), d = (m) => { c.current && c.current.scrollTo({ left: m, behavior: "smooth" }); }, v = (m) => { var L, O, b; if (!c.current) return; const f = c.current.scrollWidth / m, D = Math.floor(c.current.clientWidth / f) || 1, T = c.current.scrollLeft + D * f - 1; d(T), (b = (O = (L = c.current.parentElement) == null ? void 0 : L.querySelector(".fs-widget-arrow-left")) == null ? void 0 : O.classList) == null || b.remove("arrow-hide"); }, y = (m) => { var L, O, b; if (!c.current) return; const f = c.current.scrollWidth / m, D = Math.floor(c.current.clientWidth / f) || 1, T = c.current.scrollLeft - D * f + 1; d(T), (b = (O = (L = c.current.parentElement) == null ? void 0 : L.querySelector(".fs-widget-arrow-right")) == null ? void 0 : O.classList) == null || b.remove("arrow-hide"); }, x = (m) => { m.target.scrollLeft > 0 ? m.target.parentElement.querySelector(".fs-widget-arrow-left").classList.remove("arrow-hide") : m.target.parentElement.querySelector(".fs-widget-arrow-left").classList.add("arrow-hide"), m.target.scrollLeft >= m.target.scrollWidth - m.target.clientWidth ? m.target.parentElement.querySelector(".fs-widget-arrow-right").classList.add("arrow-hide") : m.target.parentElement.querySelector(".fs-widget-arrow-right").classList.remove("arrow-hide"); }; return /* @__PURE__ */ S.jsxs(st.Fragment, { children: [ /* @__PURE__ */ S.jsx("style", { children: Rn }), /* @__PURE__ */ S.jsxs("div", { className: "fs-recommended-products-container", children: [ /* @__PURE__ */ S.jsx("h2", { className: "fs-recommended-products-widget-title", children: e ?? "Recommended Products" }), /* @__PURE__ */ S.jsx(Wr, { fallback: /* @__PURE__ */ S.jsx(kn, {}), children: /* @__PURE__ */ S.jsx(Mr, { resolve: t, children: ({ products: m }) => /* @__PURE__ */ S.jsxs( "div", { className: "fs-grid-arrows-container", style: { "--num-of-products": m.nodes.length, "--carousel-gap": `${o}px`, "--mobile-breakpoint": n.mobile, "--tablet-breakpoint": n.tablet, "--desktop-breakpoint": n.desktop }, children: [ /* @__PURE__ */ S.jsxs("div", { className: "fs-arrows-container", children: [ /* @__PURE__ */ S.jsx( "div", { className: "fs-widget-arrow fs-widget-arrow-left arrow-hide", onClick: () => y(m.nodes.length), children: s ?? /* @__PURE__ */ S.jsx(Mt, {}) } ), /* @__PURE__ */ S.jsx( "div", { className: "fs-widget-arrow fs-widget-arrow-right", onClick: () => v(m.nodes.length), children: s ?? /* @__PURE__ */ S.jsx(Mt, {}) } ) ] }), /* @__PURE__ */ S.jsx( "div", { className: "fs-recommended-products-grid-container", ref: c, onScroll: x, children: /* @__PURE__ */ S.jsx("div", { className: "fs-recommended-products-grid", children: m.nodes.map((f, D) => { if (r) { const T = r(f, D + 1); if (T) return T; } return /* @__PURE__ */ S.jsx(Cn, { product: f, imageAspectRatio: u }, f.id); }) }) } ) ] } ) }) }), /* @__PURE__ */ S.jsx("br", {}) ] }) ] }); } function Te(e, t) { const r = new URLSearchParams(e); for (const [n, o] of Object.entries(t)) { if (o === void 0) { r.delete(n); continue; } r.set(n, String(o)); } return r.toString(); } function vi({ total: e }) { const [t] = Vr(), r = Number(t.get("page")) || 1, n = e, o = [...Array.from(Array(n).keys())].map((s) => s + 1); return /* @__PURE__ */ S.jsxs("div", { className: "pagination-wrapper", children: [ r > 1 ? /* @__PURE__ */ S.jsx( pe, { to: { search: Te(t, { page: Math.max(r - 1, 0) }) }, preventScrollReset: !0, prefetch: "intent", className: "arrow-button-wrapper arrow-button", children: /* @__PURE__ */ S.jsxs("span", { className: "sr-only", children: [ " ", "<" ] }) } ) : null, /* @__PURE__ */ S.jsx("span", { className: "center-pages-wrapper", children: