@shopify/hydrogen 0.22.1 → 0.23.0

package/dist/node/components/LocalizationProvider/LocalizationProvider.server.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LocalizationProvider = void 0;
+const react_1 = __importDefault(require("react"));
+const LocalizationClientProvider_client_1 = __importDefault(require("./LocalizationClientProvider.client"));
+const useShop_1 = require("../../foundation/useShop");
+const useShopQuery_1 = require("../../hooks/useShopQuery");
+const strategies_1 = require("../../foundation/Cache/strategies");
+const useSession_1 = require("../../foundation/useSession/useSession");
+/**
+ * The `LocalizationProvider` component automatically queries the Storefront API's
+ * [`localization`](https://shopify.dev/api/storefront/reference/common-objects/queryroot) field
+ * for the `isoCode` and `name` of the `country` and keeps this information in a context.
+ *
+ * Any descendents of this provider can use the `useCountry` hook.
+ * The `isoCode` of the `country` can be used in the Storefront API's
+ * `@inContext` directive as the `country` value.
+ */
+function LocalizationProvider(props) {
+    const { languageCode } = (0, useShop_1.useShop)();
+    const { countryCode, countryName } = (0, useSession_1.useSession)();
+    const { data: { localization }, } = (0, useShopQuery_1.useShopQuery)({
+        query,
+        variables: { language: languageCode },
+        cache: (0, strategies_1.CacheDays)(),
+        preload: props.preload,
+    });
+    return (react_1.default.createElement(LocalizationClientProvider_client_1.default, { localization: countryCode
+            ? {
+                country: {
+                    name: countryName,
+                    isoCode: countryCode,
+                },
+            }
+            : localization }, props.children));
+}
+exports.LocalizationProvider = LocalizationProvider;
+const query = `
+query Localization($language: LanguageCode)
+@inContext(language: $language) {
+   localization {
+    country {
+      isoCode
+      name
+    }
+  }
+}
+`;

package/dist/node/components/MediaFile/MediaFile.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { type ShopifyImageProps } from '../Image';
+import { Video } from '../Video';
+import { ExternalVideo } from '../ExternalVideo';
+import type { MediaEdge as MediaEdgeType } from '../../storefront-api-types';
+import type { PartialDeep } from 'type-fest';
+export interface MediaFileProps {
+    /** An object with fields that correspond to the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). */
+    data: PartialDeep<MediaEdgeType['node']>;
+    /** The options for the `Image`, `Video`, or `ExternalVideo` components. */
+    options?: ShopifyImageProps | React.ComponentProps<typeof Video>['previewImageOptions'] | React.ComponentProps<typeof ExternalVideo>['options'];
+}
+/**
+ * The `MediaFile` component renders the media for the Storefront API's
+ * [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, a
+ * `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `mediaContentType` of the
+ * `media` provided as a prop.
+ */
+export declare function MediaFile({ data, options, ...passthroughProps }: MediaFileProps): JSX.Element | null;

package/dist/node/components/MediaFile/MediaFile.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaFile = void 0;
+const react_1 = __importDefault(require("react"));
+const Image_1 = require("../Image");
+const Video_1 = require("../Video");
+const ExternalVideo_1 = require("../ExternalVideo");
+const ModelViewer_1 = require("../ModelViewer");
+/**
+ * The `MediaFile` component renders the media for the Storefront API's
+ * [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, a
+ * `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `mediaContentType` of the
+ * `media` provided as a prop.
+ */
+function MediaFile({ data, options, ...passthroughProps }) {
+    switch (data.mediaContentType) {
+        case 'IMAGE': {
+            const dataImage = data
+                .image;
+            if (!dataImage || !dataImage.url) {
+                console.warn(`No "image" property was found on the "data" prop for <MediaFile/>, for the "type='image'"`);
+                return null;
+            }
+            return (react_1.default.createElement(Image_1.Image, { ...passthroughProps, data: dataImage, loaderOptions: options }));
+        }
+        case 'VIDEO':
+            return (react_1.default.createElement(Video_1.Video, { ...passthroughProps, data: data, previewImageOptions: options }));
+        case 'EXTERNAL_VIDEO':
+            return (react_1.default.createElement(ExternalVideo_1.ExternalVideo, { ...passthroughProps, data: data, options: options }));
+        case 'MODEL_3D':
+            return (react_1.default.createElement(ModelViewer_1.ModelViewer, { ...passthroughProps, data: data }));
+        default:
+            return null;
+    }
+}
+exports.MediaFile = MediaFile;

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

@@ -0,0 +1 @@
+export { MediaFile, MediaFileProps } from './MediaFile';

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

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

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

@@ -0,0 +1,21 @@
+import { ElementType } from 'react';
+import { Props } from '../types';
+import { ParsedMetafield } from '../../types';
+export interface MetafieldProps<TTag> {
+    /** An object with fields that correspond to the Storefront API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield). */
+    data: ParsedMetafield;
+    /** An HTML tag to be rendered as the base element wrapper. The default value varies depending on [metafield.type](https://shopify.dev/apps/metafields/types). */
+    as?: TTag;
+}
+/**
+ * The `Metafield` component renders the value of a Storefront
+ * API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield).
+ *
+ * When a render function is provided, it passes the Metafield object with a value
+ * that was parsed according to the Metafield's `type` field. For more information,
+ * refer to the [Render props](#render-props) section.
+ *
+ * When no render function is provided, it renders a smart default of the
+ * Metafield's `value`. For more information, refer to the [Default output](#default-output) section.
+ */
+export declare function Metafield<TTag extends ElementType>(props: Props<TTag> & MetafieldProps<TTag>): JSX.Element | null;

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

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Metafield = void 0;
+const react_1 = __importDefault(require("react"));
+const foundation_1 = require("../../foundation");
+const utilities_1 = require("../../utilities");
+const Image_1 = require("../Image");
+/**
+ * The `Metafield` component renders the value of a Storefront
+ * API's [Metafield object](https://shopify.dev/api/storefront/reference/common-objects/metafield).
+ *
+ * When a render function is provided, it passes the Metafield object with a value
+ * that was parsed according to the Metafield's `type` field. For more information,
+ * refer to the [Render props](#render-props) section.
+ *
+ * When no render function is provided, it renders a smart default of the
+ * Metafield's `value`. For more information, refer to the [Default output](#default-output) section.
+ */
+function Metafield(props) {
+    var _a;
+    const { data, children, as, ...passthroughProps } = props;
+    const { locale } = (0, foundation_1.useShop)();
+    if (data.value == null) {
+        console.warn(`No metafield value for ${data}`);
+        return null;
+    }
+    switch (data.type) {
+        case 'date': {
+            const Wrapper = as !== null && as !== void 0 ? as : 'time';
+            return (react_1.default.createElement(Wrapper, { ...passthroughProps }, data.value.toLocaleDateString(locale)));
+        }
+        case 'date_time': {
+            const Wrapper = as !== null && as !== void 0 ? as : 'time';
+            return (react_1.default.createElement(Wrapper, { ...passthroughProps }, data.value.toLocaleString(locale)));
+        }
+        case 'weight':
+        case 'dimension':
+        case 'volume': {
+            const Wrapper = as !== null && as !== void 0 ? as : 'span';
+            return (react_1.default.createElement(Wrapper, { ...passthroughProps }, (0, utilities_1.getMeasurementAsString)(data.value, locale)));
+        }
+        case 'rating': {
+            const Wrapper = as !== null && as !== void 0 ? as : 'span';
+            return (react_1.default.createElement(Wrapper, { ...passthroughProps }, data.value.value));
+        }
+        case 'single_line_text_field': {
+            const Wrapper = as !== null && as !== void 0 ? as : 'span';
+            return (react_1.default.createElement(Wrapper, { ...passthroughProps, dangerouslySetInnerHTML: { __html: data.value } }));
+        }
+        case 'multi_line_text_field': {
+            const Wrapper = as !== null && as !== void 0 ? as : 'div';
+            return (react_1.default.createElement(Wrapper, { ...passthroughProps, dangerouslySetInnerHTML: {
+                    __html: data.value.split('\n').join('<br/>'),
+                } }));
+        }
+        case 'url':
+            return (react_1.default.createElement("a", { href: data.value, ...passthroughProps }, data.value));
+        case 'json': {
+            const Wrapper = as !== null && as !== void 0 ? as : 'span';
+            return (react_1.default.createElement(Wrapper, { ...passthroughProps }, JSON.stringify(data.value)));
+        }
+        case 'file_reference': {
+            if (((_a = data.reference) === null || _a === void 0 ? void 0 : _a.__typename) === 'MediaImage') {
+                const ref = data.reference;
+                return ref.image ? (react_1.default.createElement(Image_1.Image, { data: ref.image, ...passthroughProps })) : null;
+            }
+        }
+    }
+    const Wrapper = as !== null && as !== void 0 ? as : 'span';
+    return react_1.default.createElement(Wrapper, { ...passthroughProps }, data.value.toString());
+}
+exports.Metafield = Metafield;

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

@@ -0,0 +1,2 @@
+export { Metafield } from './Metafield.client';
+export type { MetafieldType } from './types';

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

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

package/dist/node/components/Metafield/types.d.ts

@@ -0,0 +1,4 @@
+import { Metafield } from '../../storefront-api-types';
+export declare type MetafieldType = Omit<Partial<Metafield>, 'value'> & {
+    value?: string | number | boolean | Date | Record<string, any>;
+};

package/dist/node/components/Metafield/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,128 @@
+import { ReactNode, ElementType } from 'react';
+import { Props } from '../types';
+import type { Model3d } from '../../storefront-api-types';
+import type { PartialDeep } from 'type-fest';
+interface ModelViewerProps {
+    /** Any ReactNode elements. */
+    children?: ReactNode;
+    /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/latest/objects/model3d). */
+    data: PartialDeep<Model3d>;
+    /** A string of either `auto`, `lazy`, or `eager` to indicate the conditions for preloading. Refer to [loading in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-attributes-loading). */
+    loading?: 'auto' | 'lazy' | 'eager';
+    /** A URL to display an image instead of the model. This is useful for showing the user something before a model is loaded and ready to render. If no URL is provided, then [Model3d.previewImage](https://shopify.dev/api/storefront/latest/objects/model3d) is used. Refer to [poster in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-attributes-poster). */
+    poster?: string;
+    /** A string of either `auto`, `interaction`, or `manual` to indicate when the model should be revealed. Refer to [reveal in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-attributes-reveal). */
+    reveal?: 'auto' | 'interaction' | 'manual';
+    /** A boolean to enable an AR experience. Refer to [ar in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-attributes-ar). */
+    ar?: boolean;
+    /** A prioritized list of `webxr`, `scene-viewer`, and/or `quick-look` to indicate the types of AR experiences to enable. Refer to [ar-modes in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-attributes-arModes). */
+    arModes?: 'webxr' | 'scene-viewer' | 'quick-look';
+    /** A string of `auto` or `fixed` to control the scaling behaviour. Refer to [ar-scale in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-attributes-arScale). */
+    arScale?: 'auto' | 'fixed';
+    /** A styring of either `floor` or `wall` to indicate where to place the object in AR. Refer to [ar-placement in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-attributes-arPlacement). */
+    arPlacement?: 'floor' | 'wall';
+    /** The url to a USDZ model which will be used on supported iOS 12+ devices via AR Quick Look on Safari. Refer to [ios-source in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-attributes-iosSrc). */
+    iosSrc?: string;
+    /** A boolean to enable camera controls. Refer to [attributes in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#stagingandcameras-attributes). */
+    cameraControls?: boolean;
+    /** A string of `pan-x`, `pan-y`, or `none`. Refer to [touch-action in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-touch-action). */
+    touchAction?: 'pan-x' | 'pan-y' | 'none';
+    /** A boolean to disable zoom. Refer to [disable-zoom in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-disable-zoom). */
+    disableZoom?: boolean;
+    /** A number to adjust the speed of theta and phi orbit interactions. Refer to [orbit-sensitivity in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-orbitSensitivity). */
+    orbitSensitivity?: number;
+    /** A boolean to enable auto rotate. Refer to [auto-rotate in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-autoRotate). */
+    autoRotate?: boolean;
+    /** A number in milliseconds to specify the delay before auto rotation begins. Refer to [auto-rotate-delay in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-autoRotateDelay). */
+    autoRotateDelay?: number;
+    /**  The speed of auto rotation. Refer to [rotation-per-second in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-rotationPerSecond). */
+    rotationPerSecond?: string;
+    /** A string of either `allow-when-focused` or `always-allow` to indicate whether the viewer requires focus before interacting with it. Refer to [interaction-policy in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-interactionPolicy). */
+    interactionPolicy?: 'allow-when-focused' | 'always-allow';
+    /** A string of either 'auto', 'when-focused', or 'none' indicating the conditions under which the visual and audible interaction prompt will display. Refer to [interaction-prompts in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-interactionPrompt). */
+    interactionPrompt?: 'auto' | 'when-focused' | 'none';
+    /** A string of either `wiggle` or `basic` indicating the presentation style of the interaction-prompt when it is raised. Refer to [interaction-prompt-style in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-interactionPromptStyle). */
+    interactionPromptStyle?: 'wiggle' | 'basic';
+    /** A number to indicate how long the model viewer should wait before prompting the user visually for interaction. Refer to [interaction-prompt-threshold in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-interactionPromptThreshold). */
+    interactionPromptThreshold?: number;
+    /** A string of the starting orbital position of the camera. Refer to [camera-orbit in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-cameraOrbit). */
+    cameraOrbit?: string;
+    /** A string of the point the camera orbits around. Refer to [camera-target in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-cameraTarget). */
+    cameraTarget?: string;
+    /** A string of the vertical field of view of the camera. Refer to [field-of-view in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-fieldOfView). */
+    fieldOfView?: string;
+    /** A string of the maxiumum orbital values of the camera. Refer to [max-camera-orbit in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-maxCameraOrbit). */
+    maxCameraOrbit?: string;
+    /** A string of the minimum orbital values of the camera. Refer to [min-camera-orbit in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-minCameraOrbit). */
+    minCameraOrbit?: string;
+    /** A number indicating the max field of view of the camera. Refer to [max-field-of-view in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-maxFieldOfView). */
+    maxFieldOfView?: number;
+    /** A number indicating the min field of view of the camera. Refer to [min-field-of-view in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-minFieldOfView). */
+    minFieldOfView?: number;
+    /** A string of `tight` or `legacy` for calculating the model's bounding box. Refer to [bounds in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-bounds). */
+    bounds?: 'tight' | 'legacy';
+    /** A number indicating the rate of interpolation when the camera or model moves. Refer to [interpolation-decay in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-interpolationDecay). */
+    interpolationDecay?: number;
+    /** A string for the background image of the scene. Refer to [skybox-image in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-lightingandenv-attributes-skyboxImage). */
+    skyboxImage?: string;
+    /** A string to control the environmental reflection of the model. Refer to [environment-image in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-lightingandenv-attributes-environmentImage). */
+    environmentImage?: string;
+    /** A number indicating the exposure of the model and the skybox. Refer to [exposure in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-lightingandenv-attributes-exposure). */
+    exposure?: number;
+    /** A number for the opacity of the shadow. Refer to [shadow-intensity in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-lightingandenv-attributes-shadowIntensity). */
+    shadowIntensity?: number;
+    /** A number for the bluriness of the shadow. Refer to [shadow-softness in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-lightingandenv-attributes-shadowSoftness). */
+    shadowSoftness?: number;
+    /** A string of the animation to play by name. Refer to [animation-name in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-attributes-animationName). */
+    animationName?: string;
+    /** A string of the animation crossfade duration between the previous and next animations. Refer to [animation-cross-fade-duration in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-attributes-animationCrossfadeDuration). */
+    animationCrossfadeDuration?: string;
+    /** A boolean to enable the model animations. Refer to [autoplay in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-attributes-autoplay). */
+    autoplay?: boolean;
+    /** A string to select a model variant by name. Refer to [variant-name in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-scenegraph-attributes-variantName). */
+    variantName?: string;
+    /** A string to rotate the model. Refer to [orientation in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-scenegraph-attributes-orientation). */
+    orientation?: string;
+    /** A string to scale the model. Refer to [scale in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-scenegraph-attributes-scale). */
+    scale?: string;
+    /** The callback to invoke when the 'error' event is triggered. Refer to [error in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-error). */
+    onError?: (event: Event) => void;
+    /** The callback to invoke when the `load` event is triggered. Refer to [load in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-load). */
+    onLoad?: (event: Event) => void;
+    /** The callback to invoke when the 'preload' event is triggered. Refer to [preload in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-preload). */
+    onPreload?: (event: Event) => void;
+    /** The callback to invoke when the 'model-visibility' event is triggered. Refer to [model-visibility in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-modelVisibility). */
+    onModelVisibility?: (event: Event) => void;
+    /** The callback to invoke when the 'progress' event is triggered. Refer to [progress in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-progress). */
+    onProgress?: (event: Event) => void;
+    /** The callback to invoke when the 'ar-status' event is triggered. Refer to [ar-status in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arStatus). */
+    onArStatus?: (event: Event) => void;
+    /** The callback to invoke when the 'ar-tracking' event is triggered. Refer to [ar-tracking in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arTracking). */
+    onArTracking?: (event: Event) => void;
+    /** The callback to invoke when the 'quick-look-button-tapped' event is triggered. Refer to [quick-look-button-tapped in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-quickLookButtonTapped). */
+    onQuickLookButtonTapped?: (event: Event) => void;
+    /** The callback to invoke when the 'camera-change' event is triggered. Refer to [camera-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-events-cameraChange). */
+    onCameraChange?: (event: Event) => void;
+    /** The callback to invoke when the 'environment-change' event is triggered. Refer to [environment-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-lightingandenv-events-environmentChange).  */
+    onEnvironmentChange?: (event: Event) => void;
+    /**  The callback to invoke when the 'play' event is triggered. Refer to [play in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-play). */
+    onPlay?: (event: Event) => void;
+    /**  The callback to invoke when the 'pause' event is triggered. Refer to [pause in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-pause). */
+    onPause?: (event: Event) => void;
+    /** The callback to invoke when the 'scene-graph-ready' event is triggered. Refer to [scene-graph-ready in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-scenegraph-events-sceneGraphReady). */
+    onSceneGraphReady?: (event: Event) => void;
+}
+declare type PropsWeControl = 'src' | 'poster';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'model-viewer': any;
+        }
+    }
+}
+/**
+ * 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).
+ */
+export declare function ModelViewer<TTag extends ElementType>(props: Props<TTag, PropsWeControl> & ModelViewerProps): JSX.Element | null;
+export {};

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 {};