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) 93.5 kB
var Lr = Object.defineProperty; var At = (e) => { throw TypeError(e); }; var Fr = (e, t, r) => t in e ? Lr(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r; var It = (e, t, r) => Fr(e, typeof t != "symbol" ? t + "" : t, r), Dt = (e, t, r) => t.has(e) || At("Cannot " + r); var de = (e, t, r) => (Dt(e, t, "read from private field"), r ? r.call(e) : t.get(e)), ze = (e, t, r) => t.has(e) ? At("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), Ge = (e, t, r, n) => (Dt(e, t, "write to private field"), n ? n.call(e, r) : t.set(e, r), r); import * as ee from "react"; import ut, { createContext as lt, useContext as Xt, useMemo as Qe, useState as $r, useEffect as er, lazy as Ur, forwardRef as Mr, useRef as Ee, Suspense as Wr } from "react"; import { Link as Re, Await as Vr, useSearchParams as Jr, useFetcher as qr } from "@remix-run/react"; var nt = { exports: {} }, be = {}; /** * @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 Nt; function Kr() { if (Nt) return be; Nt = 1; var e = ut, t = Symbol.for("react.element"), r = Symbol.for("react.fragment"), n = Object.prototype.hasOwnProperty, i = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, a = { key: !0, ref: !0, __self: !0, __source: !0 }; function u(c, d, S) { var w, b = {}, _ = null, f = null; S !== void 0 && (_ = "" + S), d.key !== void 0 && (_ = "" + d.key), d.ref !== void 0 && (f = d.ref); for (w in d) n.call(d, w) && !a.hasOwnProperty(w) && (b[w] = d[w]); if (c && c.defaultProps) for (w in d = c.defaultProps, d) b[w] === void 0 && (b[w] = d[w]); return { $$typeof: t, type: c, key: _, ref: f, props: b, _owner: i.current }; } return be.Fragment = r, be.jsx = u, be.jsxs = u, be; } var xe = {}; /** * @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 Lt; function Yr() { return Lt || (Lt = 1, process.env.NODE_ENV !== "production" && function() { var e = ut, t = Symbol.for("react.element"), r = Symbol.for("react.portal"), n = Symbol.for("react.fragment"), i = Symbol.for("react.strict_mode"), a = Symbol.for("react.profiler"), u = Symbol.for("react.provider"), c = Symbol.for("react.context"), d = Symbol.for("react.forward_ref"), S = Symbol.for("react.suspense"), w = Symbol.for("react.suspense_list"), b = Symbol.for("react.memo"), _ = Symbol.for("react.lazy"), f = Symbol.for("react.offscreen"), I = Symbol.iterator, R = "@@iterator"; function $(o) { if (o === null || typeof o != "object") return null; var l = I && o[I] || o[R]; return typeof l == "function" ? l : null; } var T = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; function E(o) { { for (var l = arguments.length, h = new Array(l > 1 ? l - 1 : 0), P = 1; P < l; P++) h[P - 1] = arguments[P]; k("error", o, h); } } function k(o, l, h) { { var P = T.ReactDebugCurrentFrame, N = P.getStackAddendum(); N !== "" && (l += "%s", h = h.concat([N])); var L = h.map(function(A) { return String(A); }); L.unshift("Warning: " + l), Function.prototype.apply.call(console[o], console, L); } } var Y = !1, g = !1, D = !1, F = !1, s = !1, m; m = Symbol.for("react.module.reference"); function y(o) { return !!(typeof o == "string" || typeof o == "function" || o === n || o === a || s || o === i || o === S || o === w || F || o === f || Y || g || D || typeof o == "object" && o !== null && (o.$$typeof === _ || o.$$typeof === b || o.$$typeof === u || o.$$typeof === c || o.$$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. o.$$typeof === m || o.getModuleId !== void 0)); } function p(o, l, h) { var P = o.displayName; if (P) return P; var N = l.displayName || l.name || ""; return N !== "" ? h + "(" + N + ")" : h; } function v(o) { return o.displayName || "Context"; } function C(o) { if (o == null) return null; if (typeof o.tag == "number" && E("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof o == "function") return o.displayName || o.name || null; if (typeof o == "string") return o; switch (o) { case n: return "Fragment"; case r: return "Portal"; case a: return "Profiler"; case i: return "StrictMode"; case S: return "Suspense"; case w: return "SuspenseList"; } if (typeof o == "object") switch (o.$$typeof) { case c: var l = o; return v(l) + ".Consumer"; case u: var h = o; return v(h._context) + ".Provider"; case d: return p(o, o.render, "ForwardRef"); case b: var P = o.displayName || null; return P !== null ? P : C(o.type) || "Memo"; case _: { var N = o, L = N._payload, A = N._init; try { return C(A(L)); } catch { return null; } } } return null; } var O = Object.assign, U = 0, H, te, re, ne, oe, je, Te; function Z() { } Z.__reactDisabledLog = !0; function z() { { if (U === 0) { H = console.log, te = console.info, re = console.warn, ne = console.error, oe = console.group, je = console.groupCollapsed, Te = console.groupEnd; var o = { configurable: !0, enumerable: !0, value: Z, writable: !0 }; Object.defineProperties(console, { info: o, log: o, warn: o, error: o, group: o, groupCollapsed: o, groupEnd: o }); } U++; } } function ve() { { if (U--, U === 0) { var o = { configurable: !0, enumerable: !0, writable: !0 }; Object.defineProperties(console, { log: O({}, o, { value: H }), info: O({}, o, { value: te }), warn: O({}, o, { value: re }), error: O({}, o, { value: ne }), group: O({}, o, { value: oe }), groupCollapsed: O({}, o, { value: je }), groupEnd: O({}, o, { value: Te }) }); } U < 0 && E("disabledDepth fell below zero. This is a bug in React. Please file an issue."); } } var ye = T.ReactCurrentDispatcher, we; function ce(o, l, h) { { if (we === void 0) try { throw Error(); } catch (N) { var P = N.stack.trim().match(/\n( *(at )?)/); we = P && P[1] || ""; } return ` ` + we + o; } } var _e = !1, ie; { var Ae = typeof WeakMap == "function" ? WeakMap : Map; ie = new Ae(); } function Se(o, l) { if (!o || _e) return ""; { var h = ie.get(o); if (h !== void 0) return h; } var P; _e = !0; var N = Error.prepareStackTrace; Error.prepareStackTrace = void 0; var L; L = ye.current, ye.current = null, z(); try { if (l) { var A = function() { throw Error(); }; if (Object.defineProperty(A.prototype, "props", { set: function() { throw Error(); } }), typeof Reflect == "object" && Reflect.construct) { try { Reflect.construct(A, []); } catch (q) { P = q; } Reflect.construct(o, [], A); } else { try { A.call(); } catch (q) { P = q; } o.call(A.prototype); } } else { try { throw Error(); } catch (q) { P = q; } o(); } } catch (q) { if (q && P && typeof q.stack == "string") { for (var j = q.stack.split(` `), J = P.stack.split(` `), M = j.length - 1, W = J.length - 1; M >= 1 && W >= 0 && j[M] !== J[W]; ) W--; for (; M >= 1 && W >= 0; M--, W--) if (j[M] !== J[W]) { if (M !== 1 || W !== 1) do if (M--, W--, W < 0 || j[M] !== J[W]) { var K = ` ` + j[M].replace(" at new ", " at "); return o.displayName && K.includes("<anonymous>") && (K = K.replace("<anonymous>", o.displayName)), typeof o == "function" && ie.set(o, K), K; } while (M >= 1 && W >= 0); break; } } } finally { _e = !1, ye.current = L, ve(), Error.prepareStackTrace = N; } var le = o ? o.displayName || o.name : "", ae = le ? ce(le) : ""; return typeof o == "function" && ie.set(o, ae), ae; } function yt(o, l, h) { return Se(o, !1); } function hr(o) { var l = o.prototype; return !!(l && l.isReactComponent); } function Ie(o, l, h) { if (o == null) return ""; if (typeof o == "function") return Se(o, hr(o)); if (typeof o == "string") return ce(o); switch (o) { case S: return ce("Suspense"); case w: return ce("SuspenseList"); } if (typeof o == "object") switch (o.$$typeof) { case d: return yt(o.render); case b: return Ie(o.type, l, h); case _: { var P = o, N = P._payload, L = P._init; try { return Ie(L(N), l, h); } catch { } } } return ""; } var pe = Object.prototype.hasOwnProperty, wt = {}, _t = T.ReactDebugCurrentFrame; function De(o) { if (o) { var l = o._owner, h = Ie(o.type, o._source, l ? l.type : null); _t.setExtraStackFrame(h); } else _t.setExtraStackFrame(null); } function gr(o, l, h, P, N) { { var L = Function.call.bind(pe); for (var A in o) if (L(o, A)) { var j = void 0; try { if (typeof o[A] != "function") { var J = Error((P || "React class") + ": " + h + " type `" + A + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof o[A] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`."); throw J.name = "Invariant Violation", J; } j = o[A](l, A, P, h, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"); } catch (M) { j = M; } j && !(j instanceof Error) && (De(N), E("%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, A, typeof j), De(null)), j instanceof Error && !(j.message in wt) && (wt[j.message] = !0, De(N), E("Failed %s type: %s", h, j.message), De(null)); } } } var mr = Array.isArray; function qe(o) { return mr(o); } function vr(o) { { var l = typeof Symbol == "function" && Symbol.toStringTag, h = l && o[Symbol.toStringTag] || o.constructor.name || "Object"; return h; } } function yr(o) { try { return St(o), !1; } catch { return !0; } } function St(o) { return "" + o; } function pt(o) { if (yr(o)) return E("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", vr(o)), St(o); } var bt = T.ReactCurrentOwner, wr = { key: !0, ref: !0, __self: !0, __source: !0 }, xt, Pt; function _r(o) { if (pe.call(o, "ref")) { var l = Object.getOwnPropertyDescriptor(o, "ref").get; if (l && l.isReactWarning) return !1; } return o.ref !== void 0; } function Sr(o) { if (pe.call(o, "key")) { var l = Object.getOwnPropertyDescriptor(o, "key").get; if (l && l.isReactWarning) return !1; } return o.key !== void 0; } function pr(o, l) { typeof o.ref == "string" && bt.current; } function br(o, l) { { var h = function() { xt || (xt = !0, E("%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(o, "key", { get: h, configurable: !0 }); } } function xr(o, l) { { var h = function() { Pt || (Pt = !0, E("%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(o, "ref", { get: h, configurable: !0 }); } } var Pr = function(o, l, h, P, N, L, A) { var j = { // This tag allows us to uniquely identify this as a React Element $$typeof: t, // Built-in properties that belong on the element type: o, key: l, ref: h, props: A, // Record the component responsible for creating this element. _owner: L }; return j._store = {}, Object.defineProperty(j._store, "validated", { configurable: !1, enumerable: !1, writable: !0, value: !1 }), Object.defineProperty(j, "_self", { configurable: !1, enumerable: !1, writable: !1, value: P }), Object.defineProperty(j, "_source", { configurable: !1, enumerable: !1, writable: !1, value: N }), Object.freeze && (Object.freeze(j.props), Object.freeze(j)), j; }; function Er(o, l, h, P, N) { { var L, A = {}, j = null, J = null; h !== void 0 && (pt(h), j = "" + h), Sr(l) && (pt(l.key), j = "" + l.key), _r(l) && (J = l.ref, pr(l, N)); for (L in l) pe.call(l, L) && !wr.hasOwnProperty(L) && (A[L] = l[L]); if (o && o.defaultProps) { var M = o.defaultProps; for (L in M) A[L] === void 0 && (A[L] = M[L]); } if (j || J) { var W = typeof o == "function" ? o.displayName || o.name || "Unknown" : o; j && br(A, W), J && xr(A, W); } return Pr(o, j, J, N, P, bt.current, A); } } var Ke = T.ReactCurrentOwner, Et = T.ReactDebugCurrentFrame; function ue(o) { if (o) { var l = o._owner, h = Ie(o.type, o._source, l ? l.type : null); Et.setExtraStackFrame(h); } else Et.setExtraStackFrame(null); } var Ye; Ye = !1; function He(o) { return typeof o == "object" && o !== null && o.$$typeof === t; } function Rt() { { if (Ke.current) { var o = C(Ke.current.type); if (o) return ` Check the render method of \`` + o + "`."; } return ""; } } function Rr(o) { return ""; } var Ct = {}; function Cr(o) { { var l = Rt(); if (!l) { var h = typeof o == "string" ? o : o.displayName || o.name; h && (l = ` Check the top-level render call using <` + h + ">."); } return l; } } function kt(o, l) { { if (!o._store || o._store.validated || o.key != null) return; o._store.validated = !0; var h = Cr(l); if (Ct[h]) return; Ct[h] = !0; var P = ""; o && o._owner && o._owner !== Ke.current && (P = " It was passed a child from " + C(o._owner.type) + "."), ue(o), E('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 Ot(o, l) { { if (typeof o != "object") return; if (qe(o)) for (var h = 0; h < o.length; h++) { var P = o[h]; He(P) && kt(P, l); } else if (He(o)) o._store && (o._store.validated = !0); else if (o) { var N = $(o); if (typeof N == "function" && N !== o.entries) for (var L = N.call(o), A; !(A = L.next()).done; ) He(A.value) && kt(A.value, l); } } } function kr(o) { { var l = o.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 === b)) h = l.propTypes; else return; if (h) { var P = C(l); gr(h, o.props, "prop", P, o); } else if (l.PropTypes !== void 0 && !Ye) { Ye = !0; var N = C(l); E("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", N || "Unknown"); } typeof l.getDefaultProps == "function" && !l.getDefaultProps.isReactClassApproved && E("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead."); } } function Or(o) { { for (var l = Object.keys(o.props), h = 0; h < l.length; h++) { var P = l[h]; if (P !== "children" && P !== "key") { ue(o), E("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", P), ue(null); break; } } o.ref !== null && (ue(o), E("Invalid attribute `ref` supplied to `React.Fragment`."), ue(null)); } } var jt = {}; function Tt(o, l, h, P, N, L) { { var A = y(o); if (!A) { var j = ""; (o === void 0 || typeof o == "object" && o !== null && Object.keys(o).length === 0) && (j += " 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 = Rr(); J ? j += J : j += Rt(); var M; o === null ? M = "null" : qe(o) ? M = "array" : o !== void 0 && o.$$typeof === t ? (M = "<" + (C(o.type) || "Unknown") + " />", j = " Did you accidentally export a JSX literal instead of a component?") : M = typeof o, E("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", M, j); } var W = Er(o, l, h, N, L); if (W == null) return W; if (A) { var K = l.children; if (K !== void 0) if (P) if (qe(K)) { for (var le = 0; le < K.length; le++) Ot(K[le], o); Object.freeze && Object.freeze(K); } else E("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 Ot(K, o); } if (pe.call(l, "key")) { var ae = C(o), q = Object.keys(l).filter(function(Nr) { return Nr !== "key"; }), Be = q.length > 0 ? "{key: someKey, " + q.join(": ..., ") + ": ...}" : "{key: someKey}"; if (!jt[ae + Be]) { var Dr = q.length > 0 ? "{" + q.join(": ..., ") + ": ...}" : "{}"; E(`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} />`, Be, ae, Dr, ae), jt[ae + Be] = !0; } } return o === n ? Or(W) : kr(W), W; } } function jr(o, l, h) { return Tt(o, l, h, !0); } function Tr(o, l, h) { return Tt(o, l, h, !1); } var Ar = Tr, Ir = jr; xe.Fragment = n, xe.jsx = Ar, xe.jsxs = Ir; }()), xe; } process.env.NODE_ENV === "production" ? nt.exports = Kr() : nt.exports = Yr(); var x = nt.exports; const Hr = "2024-10", Br = { storeDomain: "test", storefrontToken: "abc123", storefrontApiVersion: Hr, countryIsoCode: "US", languageIsoCode: "EN", getStorefrontApiUrl() { return ""; }, getPublicTokenHeaders() { return {}; }, getShopifyDomain() { return ""; } }, zr = lt( Br ); function Gr() { const e = Xt(zr); if (!e) throw new Error("'useShop()' must be a descendent of <ShopifyProvider/>"); return e; } function Me(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: i, hash: a } = new URL(e), u = i.split("/"), c = u[u.length - 1], d = u[u.length - 2]; return !c || !d ? t : { id: `${c}${r}${a}` || "", resource: d ?? null, resourceId: c || null, search: r, searchParams: n, hash: a }; } catch { return t; } } function Qr(e) { const { countryIsoCode: t, languageIsoCode: r } = Gr(), 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 i = parseFloat(e.amount), { defaultFormatter: a, nameFormatter: u, narrowSymbolFormatter: c, withoutTrailingZerosFormatter: d, withoutCurrencyFormatter: S, withoutTrailingZerosOrCurrencyFormatter: w } = Qe(() => { 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]), b = (f) => f.type === "currency", _ = Qe( () => ({ original: () => e, currencyCode: () => e.currencyCode, localizedString: () => a().format(i), parts: () => a().formatToParts(i), withoutTrailingZeros: () => i % 1 === 0 ? d().format(i) : a().format(i), withoutTrailingZerosAndCurrency: () => i % 1 === 0 ? w().format(i) : S().format(i), currencyName: () => { var f; return ((f = u().formatToParts(i).find(b)) == null ? void 0 : f.value) ?? e.currencyCode; }, // e.g. "US dollars" currencySymbol: () => { var f; return ((f = a().formatToParts(i).find(b)) == null ? void 0 : f.value) ?? e.currencyCode; }, // e.g. "USD" currencyNarrowSymbol: () => { var f; return ((f = c().formatToParts(i).find(b)) == null ? void 0 : f.value) ?? ""; }, // e.g. "$" amount: () => a().formatToParts(i).filter( (f) => ["decimal", "fraction", "group", "integer", "literal"].includes( f.type ) ).map((f) => f.value).join("") }), [ e, i, u, a, c, S, d, w ] ); return Qe( () => new Proxy(_, { // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call get: (f, I) => { var R; return (R = Reflect.get(f, I)) == null ? void 0 : R.call(null); } }), [_] ); } const Ft = /* @__PURE__ */ new Map(); function fe(e, t) { const r = JSON.stringify([e, t]); return function() { let n = Ft.get(r); return n || (n = new Intl.NumberFormat(e, t), Ft.set(r, n)), n; }; } function Zr({ data: e, as: t, withoutCurrency: r, withoutTrailingZeros: n, measurement: i, measurementSeparator: a = "/", ...u }) { if (!Xr(e)) throw new Error( "<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'" ); const c = Qr(e), d = t ?? "div"; let S = c.localizedString; return (r || n) && (r && !n ? S = c.amount : !r && n ? S = c.withoutTrailingZeros : S = c.withoutTrailingZerosAndCurrency), /* @__PURE__ */ x.jsxs(d, { ...u, children: [ S, i && i.referenceUnit && /* @__PURE__ */ x.jsxs(x.Fragment, { children: [ a, i.referenceUnit ] }) ] }); } function Xr(e) { return typeof e.amount == "string" && !!e.amount && typeof e.currencyCode == "string" && !!e.currencyCode; } const en = ee.forwardRef( ({ alt: e, aspectRatio: t, crop: r = "center", data: n, decoding: i = "async", height: a = "auto", loader: u = Je, loading: c = "lazy", sizes: d, src: S, srcSetOptions: w = { intervals: 15, startingWidth: 200, incrementSize: 200, placeholderWidth: 100 }, width: b = "100%", ..._ }, f) => { const I = ee.useMemo(() => { const D = n != null && n.width && (n != null && n.height) ? n == null ? void 0 : n.width : void 0, F = n != null && n.width && (n != null && n.height) ? n == null ? void 0 : n.height : void 0; return { width: D, height: F, unitsMatch: !!tr(D, F) }; }, [n]), R = ee.useMemo(() => { const F = Ce((b || "100%").toString()), s = `${F.number}${F.unit}`, m = a == null, y = m ? null : Ce(a.toString()), p = y ? `${y.number}${y.unit}` : "", v = m ? "auto" : p, C = S || (n == null ? void 0 : n.url), O = n != null && n.altText && !e ? n == null ? void 0 : n.altText : e || "", U = t || (I.unitsMatch ? [ ke(I.width), ke(I.height) ].join("/") : void 0); return { width: s, height: v, src: C, alt: O, aspectRatio: U }; }, [ b, a, S, n, e, t, I, _ == null ? void 0 : _.key ]), { intervals: $, startingWidth: T, incrementSize: E, placeholderWidth: k } = w, Y = ee.useMemo(() => nn( b, $, T, E ), [b, $, T, E]); return rr(R.width) ? /* @__PURE__ */ x.jsx( tn, { aspectRatio: t, crop: r, decoding: i, height: a, imageWidths: Y, loader: u, loading: c, normalizedProps: R, passthroughProps: _, ref: f, width: b, data: n } ) : /* @__PURE__ */ x.jsx( rn, { aspectRatio: t, crop: r, decoding: i, imageWidths: Y, loader: u, loading: c, normalizedProps: R, passthroughProps: _, placeholderWidth: k, ref: f, sizes: d, data: n } ); } ), tn = ee.forwardRef( ({ aspectRatio: e, crop: t, decoding: r, height: n, imageWidths: i, loader: a = Je, loading: u, normalizedProps: c, passthroughProps: d, width: S, data: w }, b) => { const _ = ee.useMemo(() => { const f = ke(S), I = ke(n), R = e || (tr(c.width, c.height) ? [f, I].join("/") : c.aspectRatio ? c.aspectRatio : void 0), $ = i === void 0 ? void 0 : or(i, R, t, { width: (w == null ? void 0 : w.width) ?? void 0, height: (w == null ? void 0 : w.height) ?? void 0 }), T = I || (R && f ? f * (dt(R) ?? 1) : void 0), E = nr(c.src, $, a), k = a({ src: c.src, width: f, height: T, crop: c.height === "auto" ? void 0 : t }); return { width: f, aspectRatio: R, height: T, srcSet: E, src: k }; }, [ e, t, w, n, i, a, c, S ]); return /* @__PURE__ */ x.jsx( "img", { ref: b, alt: c.alt, decoding: r, height: _.height, loading: u, src: _.src, srcSet: _.srcSet, width: _.width, style: { aspectRatio: _.aspectRatio, ...d.style }, ...d } ); } ), rn = ee.forwardRef( ({ crop: e, decoding: t, imageWidths: r, loader: n = Je, loading: i, normalizedProps: a, passthroughProps: u, placeholderWidth: c, sizes: d, data: S }, w) => { const b = ee.useMemo(() => { const _ = r === void 0 ? void 0 : or(r, a.aspectRatio, e, { width: (S == null ? void 0 : S.width) ?? void 0, height: (S == null ? void 0 : S.height) ?? void 0 }), f = a.aspectRatio && c ? c * (dt(a.aspectRatio) ?? 1) : void 0, I = nr(a.src, _, n), R = n({ src: a.src, width: c, height: f, crop: e }); return { placeholderHeight: f, srcSet: I, src: R }; }, [e, S, r, n, a, c]); return /* @__PURE__ */ x.jsx( "img", { ref: w, alt: a.alt, decoding: t, height: b.placeholderHeight, loading: i, sizes: d, src: b.src, srcSet: b.srcSet, width: c, ...u, style: { width: a.width, aspectRatio: a.aspectRatio, ...u.style } } ); } ), $t = "https://placeholder.shopify.com"; function Je({ src: e, width: t, height: r, crop: n }) { if (!e) return ""; const i = new URL(e, $t); return t && i.searchParams.append("width", Math.round(t).toString()), r && i.searchParams.append("height", Math.round(r).toString()), n && i.searchParams.append("crop", n), i.href.replace($t, ""); } function tr(e = "100%", t = "auto") { return Ce(e.toString()).unit === Ce(t.toString()).unit; } function Ce(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 ke(e) { if (e === void 0) return; const { unit: t, number: r } = Ce(e.toString()); switch (t) { case "em": return r * 16; case "rem": return r * 16; case "px": return r; case "": return r; default: return; } } function rr(e) { return typeof e == "number" || /\d(px|em|rem)$/.test(e); } function nr(e, t, r = Je) { return e ? (t == null ? void 0 : t.length) === 0 || !t ? e : t.map( (n, i) => `${r({ src: e, width: n.width, height: n.height, crop: n.crop })} ${t.length === 3 ? `${i + 1}x` : `${n.width ?? 0}w`}` ).join(", ") : ""; } function nn(e = "100%", t, r, n) { const i = Array.from( { length: t }, (u, c) => c * n + r ), a = Array.from( { length: 3 }, (u, c) => (c + 1) * (ke(e) ?? 0) ); return rr(e) ? a : i; } function dt(e) { if (!e) return; const [t, r] = e.split("/"); return 1 / (Number(t) / Number(r)); } function or(e, t, r = "center", n) { if (e) return e.map((i) => ({ width: i, height: t ? i * (dt(t) ?? 1) : void 0, crop: r })).filter(({ width: i, height: a }) => !(n != null && n.width && i > n.width || n != null && n.height && a && a > n.height)); } const Ut = {}; function on(e, t) { const r = Ut[e]; if (r) return r; const n = new Promise((i, a) => { const u = document.createElement("script"); t != null && t.module ? u.type = "module" : u.type = "text/javascript", u.src = e, u.onload = () => { i(!0); }, u.onerror = () => { a(!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 Ut[e] = n, n; } function an(e, t) { const [r, n] = $r("loading"); return er( () => { on(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 ft = "public", sn = "no-store", Mt = { maxAge: "max-age", staleWhileRevalidate: "stale-while-revalidate", sMaxAge: "s-maxage", staleIfError: "stale-if-error" }; function cn(e) { let t = []; return Object.keys(e).forEach((r) => { r === "mode" ? t.push(e[r]) : Mt[r] && t.push(`${Mt[r]}=${e[r]}`); }), t.join(", "); } function B(e) { return { mode: ft, maxAge: 1, staleWhileRevalidate: 9, ...e }; } function Ze(e) { return { mode: ft, maxAge: 3600, staleWhileRevalidate: 82800, ...e }; } function ir(e) { return { mode: ft, maxAge: 1, staleWhileRevalidate: 86399, ...e }; } function ar(e) { return String(e).includes("__proto__") ? JSON.parse(e, un) : JSON.parse(e); } function un(e, t) { if (e !== "__proto__") return t; } function Ue(e, t) { return e && t ? { ...e, ...t } : e || ir(); } function ot(e) { return cn(Ue(e)); } async function ln(e, t) { if (!e) return; let r = await e.match(t); if (r) return r; } async function dn(e, t, r, n) { if (!e) return; let i = Ue(n), a = ot(Ue(i, { maxAge: (i.maxAge || 0) + (i.staleWhileRevalidate || 0) })), u = ot(Ue(i)); r.headers.set("cache-control", a), r.headers.set("real-cache-control", u), r.headers.set("cache-put-date", String(Date.now())), await e.put(t, r); } async function fn(e, t) { e && await e.delete(t); } function hn(e, t) { let r = e.headers.get("real-cache-control"), n = 0; if (r) { let i = r.match(/max-age=(\d*)/); i && i.length > 1 && (n = parseFloat(i[1])); } return [(Date.now() - Number(t)) / 1e3, n]; } function gn(e, t) { let r = t.headers.get("cache-put-date"); if (!r) return !1; let [n, i] = hn(t, r); return n > i; } var ht = { get: ln, set: dn, delete: fn, generateDefaultCacheControlHeader: ot, isStale: gn }; function gt(e) { return `https://shopify.dev/?${e}`; } function mn(e) { return e || ir(); } async function vn(e, t) { if (!e) return; let r = gt(t), n = new Request(r), i = await ht.get(e, n); if (!i) return; let a = await i.text(); try { return [ar(a), i]; } catch { return [a, i]; } } async function yn(e, t, r, n) { if (!e) return; let i = gt(t), a = new Request(i), u = new Response(JSON.stringify(r)); await ht.set(e, a, u, mn(n)); } function wn(e, t) { return ht.isStale(new Request(gt(e)), t); } function _n(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 Xe = /* @__PURE__ */ new Set(); async function sr(e, t, { strategy: r = B(), cacheInstance: n, shouldCacheResult: i = () => !0, waitUntil: a, debugInfo: u }) { let c = _n([...typeof e == "string" ? [e] : e]), d = (f) => { var I, R, $, T; f.displayName, (I = f.response) == null || I.url, (R = f.response) != null && R.status, ($ = f.response) != null && $.statusText, Array.from(((T = f.response) == null ? void 0 : T.headers.entries()) || []); }, S; if (!n || !r || r.mode === sn) return await t({ addDebugData: d }); let w = (f) => yn(n, c, { value: f, debugInfo: void 0 }, r), b = await vn(n, c); if (b && typeof b[0] != "string") { let [{ value: f, debugInfo: I }, R] = b, $ = wn(c, R) ? "STALE" : "HIT"; if (!Xe.has(c) && $ === "STALE") { Xe.add(c); let T = Promise.resolve().then(async () => { let E = Date.now(); try { let k = await t({ addDebugData: d }); i(k) && (await w(k), S == null || S({ result: k, cacheStatus: "PUT", overrideStartTime: E })); } catch (k) { k.message && (k.message = "SWR in sub-request failed: " + k.message), console.error(k); } finally { Xe.delete(c); } }); a == null || a(T); } return f; } let _ = await t({ addDebugData: d }); if (i(_)) { let f = Promise.resolve().then(async () => { await w(_); }); a == null || a(f); } return _; } function Sn(e, t) { return [e, { status: t.status, statusText: t.statusText, headers: Array.from(t.headers.entries()) }]; } function Wt([e, t]) { return [e, new Response(e, t)]; } async function pn(e, t, { cacheInstance: r, cache: n, cacheKey: i = [e, t], shouldCacheResponse: a, waitUntil: u, debugInfo: c }) { return !n && (!t.method || t.method === "GET") && (n = B()), sr(i, async () => { let d = await fetch(e, t); if (!d.ok) return d; let S = await d.text().catch(() => ""); try { S && (S = ar(S)); } catch { } return Sn(S, d); }, { cacheInstance: r, waitUntil: u, strategy: n ?? null, debugInfo: c, shouldCacheResult: (d) => "ok" in d ? !1 : a(...Wt(d)) }).then((d) => "ok" in d ? [null, d] : Wt(d)); } var he = void 0; function Vt(e, t) { return bn(e.headers, t); } function bn(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 Jt(e) { return { requestId: e ? Vt(e, "request-id") : void 0, purpose: e ? Vt(e, "purpose") : void 0 }; } function xn(e) { let { cache: t, waitUntil: r, request: n } = e; return { run: ({ cacheKey: i, cacheStrategy: a, shouldCacheResult: u }, c) => sr(i, c, { shouldCacheResult: u, strategy: a, cacheInstance: t, waitUntil: r, debugInfo: { ...Jt(n), stackInfo: he == null ? void 0 : he() } }), fetch: (i, a, u) => pn(i, a ?? {}, { waitUntil: r, cacheKey: [i, a], cacheInstance: t, debugInfo: { url: i, ...Jt(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 })) }; } Ur(() => import("./log-seo-tags-TY72EQWZ-DSYjcGiB.js")); var cr = lt(void 0); cr.Provider; var Pn = () => Xt(cr); Mr((e, t) => { let { waitForHydration: r, src: n, ...i } = e; if (r) return x.jsx(En, { src: n, options: i }); let a = Pn(); return x.jsx("script", { suppressHydrationWarning: !0, ...i, src: n, nonce: a, ref: t }); }); function En({ src: e, options: t }) { if (!e) throw new Error("`waitForHydration` with the Script component requires a `src` prop"); return an(e, { attributes: t }), null; } var Rn = { canTrack: () => !1, cart: null, customData: {}, prevCart: null, publish: () => { }, shop: null, subscribe: () => { }, register: () => ({ ready: () => { } }), customerPrivacy: null, privacyBanner: null }; lt(Rn); function Cn({ product: e, imageAspectRatio: t = "1/1" }) { return /* @__PURE__ */ x.jsx("div", { className: "fs-recommended-product", children: /* @__PURE__ */ x.jsxs( Re, { className: "fs-recommended-product-content", to: `/products/${e.handle}`, children: [ /* @__PURE__ */ x.jsx( en, { data: e.images.nodes[0], aspectRatio: t, sizes: "(min-width: 45em) 20vw, 50vw", className: "fs-recommended-product-image" } ), /* @__PURE__ */ x.jsx("h4", { children: e.title }), /* @__PURE__ */ x.jsx("small", { children: /* @__PURE__ */ x.jsx(Zr, { data: e.priceRange.minVariantPrice }) }) ] } ) }, e.id); } const kn = ` .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 qt() { return /* @__PURE__ */ x.jsx( "svg", { xmlns: "http://www.w3.org/2000/svg", height: "1em", viewBox: "0 0 448 512", className: "fs-arrow-icon", children: /* @__PURE__ */ x.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 On = () => /* @__PURE__ */ x.jsx("div", { className: "spinner-container", children: /* @__PURE__ */ x.jsx("div", { className: "spinner" }) }); function po({ title: e, products: t, renderProduct: r, breakpoints: n = { mobile: 2, desktop: 4, tablet: 3 }, carouselGap: i = 16, RightArrowIcon: a, imageAspectRatio: u }) { const c = Ee(null), d = (_) => { c.current && c.current.scrollTo({ left: _, behavior: "smooth" }); }, S = (_) => { var $, T, E; if (!c.current) return; const f = c.current.scrollWidth / _, I = Math.floor(c.current.clientWidth / f) || 1, R = c.current.scrollLeft + I * f - 1; d(R), (E = (T = ($ = c.current.parentElement) == null ? void 0 : $.querySelector(".fs-widget-arrow-left")) == null ? void 0 : T.classList) == null || E.remove("arrow-hide"); }, w = (_) => { var $, T, E; if (!c.current) return; const f = c.current.scrollWidth / _, I = Math.floor(c.current.clientWidth / f) || 1, R = c.current.scrollLeft - I * f + 1; d(R), (E = (T = ($ = c.current.parentElement) == null ? void 0 : $.querySelector(".fs-widget-arrow-right")) == null ? void 0 : T.classList) == null || E.remove("arrow-hide"); }, b = (_) => { _.target.scrollLeft > 0 ? _.target.parentElement.querySelector(".fs-widget-arrow-left").classList.remove("arrow-hide") : _.target.parentElement.querySelector(".fs-widget-arrow-left").classList.add("arrow-hide"), _.target.scrollLeft >= _.target.scrollWidth - _.target.clientWidth ? _.target.parentElement.querySelector(".fs-widget-arrow-right").classList.add("arrow-hide") : _.target.parentElement.querySelector(".fs-widget-arrow-right").classList.remove("arrow-hide"); }; return /* @__PURE__ */ x.jsxs(ut.Fragment, { children: [ /* @__PURE__ */ x.jsx("style", { children: kn }), /* @__PURE__ */ x.jsxs("div", { className: "fs-recommended-products-container", children: [ /* @__PURE__ */ x.jsx("h2", { className: "fs-recommended-products-widget-title", children: e ?? "Recommended Products" }), /* @__PURE__ */ x.jsx(Wr, { fallback: /* @__PURE__ */ x.jsx(On, {}), children: /* @__PURE__ */ x.jsx(Vr, { resolve: t, children: ({ products: _ }) => /* @__PURE__ */ x.jsxs( "div", { className: "fs-grid-arrows-container", style: { "--num-of-products": _.nodes.length, "--carousel-gap": `${i}px`, "--mobile-breakpoint": n.mobile, "--tablet-breakpoint": n.tablet, "--desktop-breakpoint": n.desktop }, children: [ /* @__PURE__ */ x.jsxs("div", { className: "fs-arrows-container", children: [ /* @__PURE__ */ x.jsx( "div", { className: "fs-widget-arrow fs-widget-arrow-left arrow-hide", onClick: () => w(_.nodes.length), children: a ?? /* @__PURE__ */ x.jsx(qt, {}) } ), /* @__PURE__ */ x.jsx( "div", { className: "fs-widget-arrow fs-widget-arrow-right", onClick: () => S(_.nodes.length), children: a ?? /* @__PURE__ */ x.jsx(qt, {}) } ) ] }), /* @__PURE__ */ x.jsx( "div", { className: "fs-recommended-products-grid-container", ref: c, onScroll: b, children: /* @__PURE__ */ x.jsx("div", { className: "fs-recommended-products-grid", children: _.nodes.map((f, I) => { if (r) { const R = r(f, I + 1); if (R) return R; } return /* @__PURE__ */ x.jsx(Cn, { product: f, imageAspectRatio: u }, f.id); }) }) } ) ] } ) }) }), /* @__PURE__ */ x.jsx("br", {}) ] }) ] }); } function Ne(e, t) { const r = new URLSearchParams(e); for (const [n, i] of Object.entries(t)) { if (i === void 0) { r.delete(n); continue; } r.set(n, String(i)); } return r.toString(); } function bo({ total: e }) { const [t] = Jr(), r = Number(t.get("page")) || 1, n = e, i = [...Array.from(Array(n).keys())].map((a) => a + 1); return /* @__PURE__ */ x.jsxs("div", { className: "pagination-wrapper", children: [ r > 1 ? /* @__PURE__ */ x.jsx( Re, { to: { search: Ne(t, { page: Math.max(r - 1, 0) }) }, preventScrollReset: !0, prefetch: "intent", className: "arrow-button-wrapper arrow-button", children: /* @__PURE__ */ x.jsxs("span", { className: "sr-only", children: [ " ", "<" ] }) } ) : null, /* @__PURE__ */ x.jsx("span", { className: "center-pages-wrapper", children