@shopify/hydrogen 0.22.0 → 0.24.0

package/dist/node/components/ModelViewer/ModelViewer.client.js

@@ -0,0 +1,132 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModelViewer = void 0;
+const react_1 = __importStar(require("react"));
+const useLoadScript_client_1 = require("../../hooks/useLoadScript/useLoadScript.client");
+/**
+ * The `ModelViewer` component renders a 3D model (with the `model-viewer` tag) for
+ * the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).
+ */
+function ModelViewer(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const [modelViewer, setModelViewer] = (0, react_1.useState)(undefined);
+    const callbackRef = (0, react_1.useCallback)((node) => {
+        setModelViewer(node);
+    }, []);
+    const { data, id = data.id, children, className, ...passthroughProps } = props;
+    const modelViewerLoadedStatus = (0, useLoadScript_client_1.useLoadScript)('https://unpkg.com/@google/model-viewer@v1.8.0/dist/model-viewer.min.js', {
+        module: true,
+    });
+    (0, react_1.useEffect)(() => {
+        if (modelViewer == null) {
+            return;
+        }
+        if (passthroughProps.onError)
+            modelViewer.addEventListener('error', passthroughProps.onError);
+        if (passthroughProps.onLoad)
+            modelViewer.addEventListener('load', passthroughProps.onLoad);
+        if (passthroughProps.onPreload)
+            modelViewer.addEventListener('preload', passthroughProps.onPreload);
+        if (passthroughProps.onModelVisibility)
+            modelViewer.addEventListener('model-visibility', passthroughProps.onModelVisibility);
+        if (passthroughProps.onProgress)
+            modelViewer.addEventListener('progress', passthroughProps.onProgress);
+        if (passthroughProps.onArStatus)
+            modelViewer.addEventListener('ar-status', passthroughProps.onArStatus);
+        if (passthroughProps.onArTracking)
+            modelViewer.addEventListener('ar-tracking', passthroughProps.onArTracking);
+        if (passthroughProps.onQuickLookButtonTapped)
+            modelViewer.addEventListener('quick-look-button-tapped', passthroughProps.onQuickLookButtonTapped);
+        if (passthroughProps.onCameraChange)
+            modelViewer.addEventListener('camera-change', passthroughProps.onCameraChange);
+        if (passthroughProps.onEnvironmentChange)
+            modelViewer.addEventListener('environment-change', passthroughProps.onEnvironmentChange);
+        if (passthroughProps.onPlay)
+            modelViewer.addEventListener('play', passthroughProps.onPlay);
+        if (passthroughProps.onPause)
+            modelViewer.addEventListener('ar-status', passthroughProps.onPause);
+        if (passthroughProps.onSceneGraphReady)
+            modelViewer.addEventListener('scene-graph-ready', passthroughProps.onSceneGraphReady);
+        return () => {
+            if (modelViewer == null) {
+                return;
+            }
+            if (passthroughProps.onError)
+                modelViewer.removeEventListener('error', passthroughProps.onError);
+            if (passthroughProps.onLoad)
+                modelViewer.removeEventListener('load', passthroughProps.onLoad);
+            if (passthroughProps.onPreload)
+                modelViewer.removeEventListener('preload', passthroughProps.onPreload);
+            if (passthroughProps.onModelVisibility)
+                modelViewer.removeEventListener('model-visibility', passthroughProps.onModelVisibility);
+            if (passthroughProps.onProgress)
+                modelViewer.removeEventListener('progress', passthroughProps.onProgress);
+            if (passthroughProps.onArStatus)
+                modelViewer.removeEventListener('ar-status', passthroughProps.onArStatus);
+            if (passthroughProps.onArTracking)
+                modelViewer.removeEventListener('ar-tracking', passthroughProps.onArTracking);
+            if (passthroughProps.onQuickLookButtonTapped)
+                modelViewer.removeEventListener('quick-look-button-tapped', passthroughProps.onQuickLookButtonTapped);
+            if (passthroughProps.onCameraChange)
+                modelViewer.removeEventListener('camera-change', passthroughProps.onCameraChange);
+            if (passthroughProps.onEnvironmentChange)
+                modelViewer.removeEventListener('environment-change', passthroughProps.onEnvironmentChange);
+            if (passthroughProps.onPlay)
+                modelViewer.removeEventListener('play', passthroughProps.onPlay);
+            if (passthroughProps.onPause)
+                modelViewer.removeEventListener('ar-status', passthroughProps.onPause);
+            if (passthroughProps.onSceneGraphReady)
+                modelViewer.removeEventListener('scene-graph-ready', passthroughProps.onSceneGraphReady);
+        };
+    }, [
+        modelViewer,
+        passthroughProps.onArStatus,
+        passthroughProps.onArTracking,
+        passthroughProps.onCameraChange,
+        passthroughProps.onEnvironmentChange,
+        passthroughProps.onError,
+        passthroughProps.onLoad,
+        passthroughProps.onModelVisibility,
+        passthroughProps.onPause,
+        passthroughProps.onPlay,
+        passthroughProps.onPreload,
+        passthroughProps.onProgress,
+        passthroughProps.onQuickLookButtonTapped,
+        passthroughProps.onSceneGraphReady,
+    ]);
+    if (modelViewerLoadedStatus !== 'done') {
+        // TODO: What do we want to display while the model-viewer library loads?
+        return null;
+    }
+    if (!((_b = (_a = data.sources) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.url)) {
+        throw new Error(`<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it`);
+    }
+    if (!data.alt) {
+        console.warn(`<ModelViewer/> requires the 'data.alt' prop for accessibility`);
+    }
+    return (react_1.default.createElement("model-viewer", { ref: callbackRef, ...passthroughProps, class: className, id: id, src: data.sources[0].url, alt: data.alt, "camera-controls": (_c = passthroughProps.cameraControls) !== null && _c !== void 0 ? _c : true, poster: passthroughProps.poster || ((_d = data.previewImage) === null || _d === void 0 ? void 0 : _d.url), autoplay: (_e = passthroughProps.autoplay) !== null && _e !== void 0 ? _e : true, loading: passthroughProps.loading, reveal: passthroughProps.reveal, ar: passthroughProps.ar, "ar-modes": passthroughProps.arModes, "ar-scale": passthroughProps.arScale, "ar-placement": passthroughProps.arPlacement, "ios-src": passthroughProps.iosSrc, "touch-action": passthroughProps.touchAction, "disable-zoom": passthroughProps.disableZoom, "orbit-sensitivity": passthroughProps.orbitSensitivity, "auto-rotate": passthroughProps.autoRotate, "auto-rotate-delay": passthroughProps.autoRotateDelay, "rotation-per-second": passthroughProps.rotationPerSecond, "interaction-policy": passthroughProps.interactionPolicy, "interaction-prompt": passthroughProps.interactionPrompt, "interaction-prompt-style": passthroughProps.interactionPromptStyle, "interaction-prompt-threshold": passthroughProps.interactionPromptThreshold, "camera-orbit": passthroughProps.cameraOrbit, "camera-target": passthroughProps.cameraTarget, "field-of-view": passthroughProps.fieldOfView, "max-camera-orbit": passthroughProps.maxCameraOrbit, "min-camera-orbit": passthroughProps.minCameraOrbit, "max-field-of-view": passthroughProps.maxFieldOfView, "min-field-of-view": passthroughProps.minFieldOfView, bounds: passthroughProps.bounds, "interpolation-decay": (_f = passthroughProps.interpolationDecay) !== null && _f !== void 0 ? _f : 100, "skybox-image": passthroughProps.skyboxImage, "environment-image": passthroughProps.environmentImage, exposure: passthroughProps.exposure, "shadow-intensity": (_g = passthroughProps.shadowIntensity) !== null && _g !== void 0 ? _g : 0, "shadow-softness": (_h = passthroughProps.shadowSoftness) !== null && _h !== void 0 ? _h : 0, "animation-name": passthroughProps.animationName, "animation-crossfade-duration": passthroughProps.animationCrossfadeDuration, "variant-name": passthroughProps.variantName, orientation: passthroughProps.orientation, scale: passthroughProps.scale }, children));
+}
+exports.ModelViewer = ModelViewer;

package/dist/node/components/ModelViewer/index.d.ts

@@ -0,0 +1 @@
+export { ModelViewer } from './ModelViewer.client';

package/dist/node/components/ModelViewer/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModelViewer = void 0;
+var ModelViewer_client_1 = require("./ModelViewer.client");
+Object.defineProperty(exports, "ModelViewer", { enumerable: true, get: function () { return ModelViewer_client_1.ModelViewer; } });

package/dist/node/components/Money/Money.client.d.ts

@@ -0,0 +1,25 @@
+import React, { type ReactNode } from 'react';
+import type { MoneyV2, UnitPriceMeasurement } from '../../storefront-api-types';
+import type { PartialDeep } from 'type-fest';
+interface CustomProps<ComponentGeneric extends React.ElementType> {
+    /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. */
+    as?: ComponentGeneric;
+    /** An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). */
+    data: PartialDeep<MoneyV2>;
+    /** Whether to remove the currency symbol from the output. */
+    withoutCurrency?: boolean;
+    /** Whether to remove trailing zeros (fractional money) from the output. */
+    withoutTrailingZeros?: boolean;
+    /** A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/latest/objects/unitpricemeasurement). */
+    measurement?: PartialDeep<UnitPriceMeasurement>;
+    /** Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`. */
+    measurementSeparator?: ReactNode;
+}
+declare type MoneyProps<ComponentGeneric extends React.ElementType> = CustomProps<ComponentGeneric> & Omit<React.ComponentPropsWithoutRef<ComponentGeneric>, keyof CustomProps<ComponentGeneric>>;
+/**
+ * The `Money` component renders a string of the Storefront API's
+ * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the
+ * `defaultLocale` in [the `hydrogen.config.js` file](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config).
+ */
+export declare function Money<TTag extends React.ElementType>({ data, as, withoutCurrency, withoutTrailingZeros, measurement, measurementSeparator, ...passthroughProps }: MoneyProps<TTag>): JSX.Element;
+export {};

package/dist/node/components/Money/Money.client.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Money = void 0;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../hooks");
+/**
+ * The `Money` component renders a string of the Storefront API's
+ * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the
+ * `defaultLocale` in [the `hydrogen.config.js` file](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config).
+ */
+function Money({ data, as, withoutCurrency, withoutTrailingZeros, measurement, measurementSeparator = '/', ...passthroughProps }) {
+    if (!isMoney(data)) {
+        throw new Error(`<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`);
+    }
+    const moneyObject = (0, hooks_1.useMoney)(data);
+    const Wrapper = as !== null && as !== void 0 ? as : 'div';
+    let output = moneyObject.localizedString;
+    if (withoutCurrency || withoutTrailingZeros) {
+        if (withoutCurrency && !withoutTrailingZeros) {
+            output = moneyObject.amount;
+        }
+        else if (!withoutCurrency && withoutTrailingZeros) {
+            output = moneyObject.withoutTrailingZeros;
+        }
+        else {
+            // both
+            output = moneyObject.withoutTrailingZerosAndCurrency;
+        }
+    }
+    return (react_1.default.createElement(Wrapper, { ...passthroughProps },
+        output,
+        measurement && measurement.referenceUnit && (react_1.default.createElement(react_1.default.Fragment, null,
+            measurementSeparator,
+            measurement.referenceUnit))));
+}
+exports.Money = Money;
+// required in order to narrow the money object down and make TS happy
+function isMoney(maybeMoney) {
+    return (typeof maybeMoney.amount === 'string' &&
+        !!maybeMoney.amount &&
+        typeof maybeMoney.currencyCode === 'string' &&
+        !!maybeMoney.currencyCode);
+}

package/dist/node/components/Money/index.d.ts

@@ -0,0 +1 @@
+export { Money } from './Money.client';

package/dist/node/components/Money/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Money = void 0;
+var Money_client_1 = require("./Money.client");
+Object.defineProperty(exports, "Money", { enumerable: true, get: function () { return Money_client_1.Money; } });

package/dist/node/components/ProductOptionsProvider/ProductOptionsProvider.client.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { Product, ProductVariant as ProductVariantType } from '../../storefront-api-types';
+import type { PartialDeep } from 'type-fest';
+declare type InitialVariantId = ProductVariantType['id'] | null;
+interface ProductOptionsProviderProps {
+    /** A [Product object](https://shopify.dev/api/storefront/reference/products/product). */
+    data: PartialDeep<Product>;
+    /** A `ReactNode` element. */
+    children: React.ReactNode;
+    /**
+     * The initially selected variant.
+     * The following logic applies to `initialVariantId`:
+     * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.
+     * 2. If `initialVariantId` is provided but is `null`, then no variant is used.
+     * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.
+     * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.
+     */
+    initialVariantId?: InitialVariantId;
+}
+export declare function ProductOptionsProvider({ children, data: product, initialVariantId: explicitVariantId, }: ProductOptionsProviderProps): JSX.Element;
+export {};

package/dist/node/components/ProductOptionsProvider/ProductOptionsProvider.client.js

@@ -0,0 +1,168 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductOptionsProvider = void 0;
+const react_1 = __importStar(require("react"));
+const context_1 = require("./context");
+const helpers_1 = require("../../hooks/useProductOptions/helpers");
+function ProductOptionsProvider({ children, data: product, initialVariantId: explicitVariantId, }) {
+    var _a, _b;
+    // The flattened variants
+    const variants = (0, react_1.useMemo)(() => { var _a; return (_a = product.variants) === null || _a === void 0 ? void 0 : _a.nodes; }, [(_a = product.variants) === null || _a === void 0 ? void 0 : _a.nodes]);
+    if (!isProductVariantArray(variants)) {
+        throw new Error(`<ProductOptionsProvider/> requires product.variants.nodes`);
+    }
+    // All the options available for a product, based on all the variants
+    const options = (0, react_1.useMemo)(() => (0, helpers_1.getOptions)(variants), [variants]);
+    /**
+     * Track the selectedVariant within the provider.
+     */
+    const [selectedVariant, setSelectedVariant] = (0, react_1.useState)(() => getVariantBasedOnIdProp(explicitVariantId, variants));
+    /**
+     * Track the selectedOptions within the provider. If a `initialVariantId`
+     * is passed, use that to select initial options.
+     */
+    const [selectedOptions, setSelectedOptions] = (0, react_1.useState)(() => getSelectedOptions(selectedVariant));
+    /**
+     * When the initialVariantId changes, we need to make sure we
+     * update the selected variant and selected options. If not,
+     * then the selected variant and options will reference incorrect
+     * values.
+     */
+    (0, react_1.useEffect)(() => {
+        const newSelectedVariant = getVariantBasedOnIdProp(explicitVariantId, variants);
+        setSelectedVariant(newSelectedVariant);
+        setSelectedOptions(getSelectedOptions(newSelectedVariant));
+    }, [explicitVariantId, variants]);
+    /**
+     * Allow the developer to select an option.
+     */
+    const setSelectedOption = (0, react_1.useCallback)((name, value) => {
+        setSelectedOptions((selectedOptions) => {
+            const opts = { ...selectedOptions, [name]: value };
+            setSelectedVariant((0, helpers_1.getSelectedVariant)(variants, opts));
+            return opts;
+        });
+    }, [setSelectedOptions, variants]);
+    const isOptionInStock = (0, react_1.useCallback)((option, value) => {
+        var _a;
+        const proposedVariant = (0, helpers_1.getSelectedVariant)(variants, {
+            ...selectedOptions,
+            ...{ [option]: value },
+        });
+        return (_a = proposedVariant === null || proposedVariant === void 0 ? void 0 : proposedVariant.availableForSale) !== null && _a !== void 0 ? _a : true;
+    }, [selectedOptions, variants]);
+    const sellingPlanGroups = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        return (_b = (_a = product.sellingPlanGroups) === null || _a === void 0 ? void 0 : _a.nodes) === null || _b === void 0 ? void 0 : _b.map((sellingPlanGroup) => {
+            var _a, _b;
+            return ({
+                ...sellingPlanGroup,
+                sellingPlans: (_b = (_a = sellingPlanGroup === null || sellingPlanGroup === void 0 ? void 0 : sellingPlanGroup.sellingPlans) === null || _a === void 0 ? void 0 : _a.nodes) !== null && _b !== void 0 ? _b : [],
+            });
+        });
+    }, [(_b = product.sellingPlanGroups) === null || _b === void 0 ? void 0 : _b.nodes]);
+    /**
+     * Track the selectedSellingPlan within the hook. If `initialSellingPlanId`
+     * is passed, use that as an initial value. Look it up from the `selectedVariant`, since
+     * that is also a requirement.
+     */
+    const [selectedSellingPlan, setSelectedSellingPlan] = (0, react_1.useState)(undefined);
+    const selectedSellingPlanAllocation = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        if (!selectedVariant || !selectedSellingPlan) {
+            return;
+        }
+        if (!((_a = selectedVariant.sellingPlanAllocations) === null || _a === void 0 ? void 0 : _a.nodes)) {
+            throw new Error(`<ProductOptionsProvider/>: You must include 'sellingPlanAllocations.nodes' in your variants in order to calculate selectedSellingPlanAllocation`);
+        }
+        return (_b = selectedVariant.sellingPlanAllocations.nodes) === null || _b === void 0 ? void 0 : _b.find((allocation) => { var _a; return ((_a = allocation === null || allocation === void 0 ? void 0 : allocation.sellingPlan) === null || _a === void 0 ? void 0 : _a.id) === selectedSellingPlan.id; });
+    }, [selectedVariant, selectedSellingPlan]);
+    const value = (0, react_1.useMemo)(() => ({
+        variants,
+        variantsConnection: product.variants,
+        options,
+        selectedVariant,
+        setSelectedVariant,
+        selectedOptions,
+        setSelectedOption,
+        setSelectedOptions,
+        isOptionInStock,
+        selectedSellingPlan,
+        setSelectedSellingPlan,
+        selectedSellingPlanAllocation,
+        sellingPlanGroups,
+        sellingPlanGroupsConnection: product.sellingPlanGroups,
+    }), [
+        isOptionInStock,
+        options,
+        product.sellingPlanGroups,
+        product.variants,
+        selectedOptions,
+        selectedSellingPlan,
+        selectedSellingPlanAllocation,
+        selectedVariant,
+        sellingPlanGroups,
+        setSelectedOption,
+        variants,
+    ]);
+    return (react_1.default.createElement(context_1.ProductOptionsContext.Provider, { value: value }, children));
+}
+exports.ProductOptionsProvider = ProductOptionsProvider;
+function getVariantBasedOnIdProp(explicitVariantId, variants) {
+    // get the initial variant based on the logic outlined in the comments for 'initialVariantId' above
+    // * 1. If `initialVariantId` is provided, then it's used even if it's out of stock.
+    if (explicitVariantId) {
+        const foundVariant = variants.find((variant) => (variant === null || variant === void 0 ? void 0 : variant.id) === explicitVariantId);
+        if (!foundVariant) {
+            console.warn(`<ProductOptionsProvider/> received a 'initialVariantId' prop, but could not actually find a variant with that ID`);
+        }
+        return foundVariant;
+    }
+    // * 2. If `initialVariantId` is provided but is `null`, then no variant is used.
+    if (explicitVariantId === null) {
+        return null;
+    }
+    // * 3. If nothing is passed to `initialVariantId` then the first available / in-stock variant is used.
+    // * 4. If nothing is passed to `initialVariantId` and no variants are in stock, then the first variant is used.
+    if (explicitVariantId === undefined) {
+        return variants.find((variant) => variant === null || variant === void 0 ? void 0 : variant.availableForSale) || variants[0];
+    }
+}
+function getSelectedOptions(selectedVariant) {
+    return (selectedVariant === null || selectedVariant === void 0 ? void 0 : selectedVariant.selectedOptions)
+        ? selectedVariant.selectedOptions.reduce((memo, optionSet) => {
+            var _a, _b;
+            memo[(_a = optionSet === null || optionSet === void 0 ? void 0 : optionSet.name) !== null && _a !== void 0 ? _a : ''] = (_b = optionSet === null || optionSet === void 0 ? void 0 : optionSet.value) !== null && _b !== void 0 ? _b : '';
+            return memo;
+        }, {})
+        : {};
+}
+function isProductVariantArray(maybeVariantArray) {
+    if (!maybeVariantArray || !Array.isArray(maybeVariantArray)) {
+        return false;
+    }
+    return true;
+}

package/dist/node/components/ProductOptionsProvider/context.d.ts

@@ -0,0 +1,2 @@
+import { ProductOptionsHookValue } from '../../hooks';
+export declare const ProductOptionsContext: import("react").Context<ProductOptionsHookValue | null>;

package/dist/node/components/ProductOptionsProvider/context.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductOptionsContext = void 0;
+const react_1 = require("react");
+exports.ProductOptionsContext = (0, react_1.createContext)(null);

package/dist/node/components/ProductOptionsProvider/index.d.ts

@@ -0,0 +1,2 @@
+export { ProductOptionsProvider } from './ProductOptionsProvider.client';
+export { useProductOptions } from '../../hooks/useProductOptions/useProductOptions.client';

package/dist/node/components/ProductOptionsProvider/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useProductOptions = exports.ProductOptionsProvider = void 0;
+var ProductOptionsProvider_client_1 = require("./ProductOptionsProvider.client");
+Object.defineProperty(exports, "ProductOptionsProvider", { enumerable: true, get: function () { return ProductOptionsProvider_client_1.ProductOptionsProvider; } });
+var useProductOptions_client_1 = require("../../hooks/useProductOptions/useProductOptions.client");
+Object.defineProperty(exports, "useProductOptions", { enumerable: true, get: function () { return useProductOptions_client_1.useProductOptions; } });

package/dist/node/components/ProductPrice/ProductPrice.client.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { Product } from '../../storefront-api-types';
+import { Money } from '../Money';
+import type { PartialDeep } from 'type-fest';
+export interface ProductPriceProps {
+    data: PartialDeep<Product>;
+    /** The type of price. Valid values: `regular` (default) or `compareAt`. */
+    priceType?: 'regular' | 'compareAt';
+    /** The type of value. Valid values: `min` (default), `max` or `unit`. */
+    valueType?: 'max' | 'min' | 'unit';
+    /** The ID of the variant. */
+    variantId?: string;
+}
+/**
+ * The `ProductPrice` component renders a `Money` component with the product
+ * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.
+ */
+export declare function ProductPrice(props: Omit<React.ComponentProps<typeof Money>, 'data' | 'measurement'> & ProductPriceProps): JSX.Element | null;

package/dist/node/components/ProductPrice/ProductPrice.client.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductPrice = void 0;
+const react_1 = __importDefault(require("react"));
+const Money_1 = require("../Money");
+/**
+ * The `ProductPrice` component renders a `Money` component with the product
+ * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.
+ */
+function ProductPrice(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const { priceType = 'regular', variantId, valueType = 'min', data: product, ...passthroughProps } = props;
+    if (product == null) {
+        throw new Error(`<ProductPrice/> requires a product as the 'data' prop`);
+    }
+    let price;
+    let measurement;
+    const variant = variantId
+        ? (_c = (_b = (_a = product === null || product === void 0 ? void 0 : product.variants) === null || _a === void 0 ? void 0 : _a.nodes) === null || _b === void 0 ? void 0 : _b.find((variant) => (variant === null || variant === void 0 ? void 0 : variant.id) === variantId)) !== null && _c !== void 0 ? _c : null
+        : null;
+    if (priceType === 'compareAt') {
+        if (variantId && variant) {
+            if (((_d = variant.compareAtPriceV2) === null || _d === void 0 ? void 0 : _d.amount) === ((_e = variant.priceV2) === null || _e === void 0 ? void 0 : _e.amount)) {
+                return null;
+            }
+            price = variant.compareAtPriceV2;
+        }
+        else if (valueType === 'max') {
+            price = (_f = product === null || product === void 0 ? void 0 : product.compareAtPriceRange) === null || _f === void 0 ? void 0 : _f.maxVariantPrice;
+        }
+        else {
+            price = (_g = product === null || product === void 0 ? void 0 : product.compareAtPriceRange) === null || _g === void 0 ? void 0 : _g.minVariantPrice;
+        }
+    }
+    else {
+        if (variantId && variant) {
+            price = variant.priceV2;
+            if (valueType === 'unit') {
+                price = variant.unitPrice;
+                measurement = variant.unitPriceMeasurement;
+            }
+        }
+        else if (valueType === 'max') {
+            price = (_h = product.priceRange) === null || _h === void 0 ? void 0 : _h.maxVariantPrice;
+        }
+        else {
+            price = (_j = product.priceRange) === null || _j === void 0 ? void 0 : _j.minVariantPrice;
+        }
+    }
+    if (!price) {
+        return null;
+    }
+    if (measurement) {
+        return (react_1.default.createElement(Money_1.Money, { ...passthroughProps, data: price, measurement: measurement }));
+    }
+    return react_1.default.createElement(Money_1.Money, { ...passthroughProps, data: price });
+}
+exports.ProductPrice = ProductPrice;

package/dist/node/components/ProductPrice/index.d.ts

@@ -0,0 +1 @@
+export { ProductPrice } from './ProductPrice.client';

package/dist/node/components/ProductPrice/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductPrice = void 0;
+var ProductPrice_client_1 = require("./ProductPrice.client");
+Object.defineProperty(exports, "ProductPrice", { enumerable: true, get: function () { return ProductPrice_client_1.ProductPrice; } });

package/dist/node/components/Seo/CollectionSeo.client.d.ts

@@ -0,0 +1,3 @@
+import type { Collection as CollectionType } from '../../storefront-api-types';
+import type { PartialDeep } from 'type-fest';
+export declare function CollectionSeo({ title, description, seo, image, }: PartialDeep<CollectionType>): JSX.Element;

package/dist/node/components/Seo/CollectionSeo.client.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollectionSeo = void 0;
+const react_1 = __importDefault(require("react"));
+const TitleSeo_client_1 = require("./TitleSeo.client");
+const DescriptionSeo_client_1 = require("./DescriptionSeo.client");
+const TwitterSeo_client_1 = require("./TwitterSeo.client");
+const ImageSeo_client_1 = require("./ImageSeo.client");
+function CollectionSeo({ title, description, seo, image, }) {
+    var _a, _b;
+    const seoTitle = (_a = seo === null || seo === void 0 ? void 0 : seo.title) !== null && _a !== void 0 ? _a : title;
+    const seoDescription = (_b = seo === null || seo === void 0 ? void 0 : seo.description) !== null && _b !== void 0 ? _b : description;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(TitleSeo_client_1.TitleSeo, { title: seoTitle }),
+        react_1.default.createElement(DescriptionSeo_client_1.DescriptionSeo, { description: seoDescription }),
+        react_1.default.createElement(TwitterSeo_client_1.TwitterSeo, { title: seoTitle, description: seoDescription }),
+        image && react_1.default.createElement(ImageSeo_client_1.ImageSeo, { ...image })));
+}
+exports.CollectionSeo = CollectionSeo;

package/dist/node/components/Seo/DefaultPageSeo.client.d.ts

@@ -0,0 +1,3 @@
+import type { DefaultPage } from './seo-types';
+import type { PartialDeep } from 'type-fest';
+export declare function DefaultPageSeo({ title, description, url, titleTemplate, lang, }: PartialDeep<DefaultPage>): JSX.Element;

package/dist/node/components/Seo/DefaultPageSeo.client.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultPageSeo = void 0;
+const react_1 = __importDefault(require("react"));
+const foundation_1 = require("../../foundation");
+const client_1 = require("../../client");
+const TitleSeo_client_1 = require("./TitleSeo.client");
+const DescriptionSeo_client_1 = require("./DescriptionSeo.client");
+const TwitterSeo_client_1 = require("./TwitterSeo.client");
+function DefaultPageSeo({ title, description, url, titleTemplate, lang, }) {
+    const { languageCode: fallBacklang } = (0, foundation_1.useShop)();
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(client_1.Head, { defaultTitle: title !== null && title !== void 0 ? title : '', titleTemplate: titleTemplate !== null && titleTemplate !== void 0 ? titleTemplate : `%s - ${title}` },
+            react_1.default.createElement("html", { lang: lang !== null && lang !== void 0 ? lang : fallBacklang }),
+            react_1.default.createElement("meta", { property: "og:type", content: "website" }),
+            react_1.default.createElement("meta", { property: "og:site_name", content: title !== null && title !== void 0 ? title : '' }),
+            react_1.default.createElement("meta", { property: "og:url", content: url })),
+        react_1.default.createElement(TitleSeo_client_1.TitleSeo, { title: title }),
+        react_1.default.createElement(DescriptionSeo_client_1.DescriptionSeo, { description: description }),
+        react_1.default.createElement(TwitterSeo_client_1.TwitterSeo, { title: title, description: description })));
+}
+exports.DefaultPageSeo = DefaultPageSeo;

package/dist/node/components/Seo/DescriptionSeo.client.d.ts

@@ -0,0 +1,4 @@
+import type { Seo as SeoType } from '../../storefront-api-types';
+export declare function DescriptionSeo({ description, }: {
+    description?: SeoType['description'];
+}): JSX.Element | null;

package/dist/node/components/Seo/DescriptionSeo.client.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DescriptionSeo = void 0;
+const react_1 = __importDefault(require("react"));
+const client_1 = require("../../client");
+function DescriptionSeo({ description, }) {
+    if (!description) {
+        return null;
+    }
+    return (react_1.default.createElement(client_1.Head, null,
+        react_1.default.createElement("meta", { name: "description", content: description }),
+        react_1.default.createElement("meta", { property: "og:description", content: description })));
+}
+exports.DescriptionSeo = DescriptionSeo;

package/dist/node/components/Seo/HomePageSeo.client.d.ts

@@ -0,0 +1,2 @@
+import type { HomePage } from './seo-types';
+export declare function HomePageSeo({ title, description, url }: HomePage): JSX.Element;