@shopify/hydrogen 0.0.0-experimental-20220526194818

package/dist/esnext/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/esnext/components/MediaFile/MediaFile.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Image } from '../Image';
+import { Video } from '../Video';
+import { ExternalVideo } from '../ExternalVideo';
+import { ModelViewer } from '../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.
+ */
+export function MediaFile({ data, options, ...passthroughProps }) {
+    switch (data.mediaContentType) {
+        case 'IMAGE': {
+            const dataImage = data.image;
+            if (!dataImage) {
+                console.warn(`No "image" property was found on the "data" prop for <MediaFile/>, for the "type='image'"`);
+                return null;
+            }
+            return (React.createElement(Image, { ...passthroughProps, data: dataImage, loaderOptions: options }));
+        }
+        case 'VIDEO':
+            return (React.createElement(Video, { ...passthroughProps, data: data, previewImageOptions: options }));
+        case 'EXTERNAL_VIDEO':
+            return (React.createElement(ExternalVideo, { ...passthroughProps, data: data, options: options }));
+        case 'MODEL_3D':
+            return (React.createElement(ModelViewer, { ...passthroughProps, data: data }));
+        default:
+            return null;
+    }
+}

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

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

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

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

package/dist/esnext/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/esnext/components/Metafield/Metafield.client.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { useShop } from '../../foundation';
+import { getMeasurementAsString } from '../../utilities';
+import { Image } from '../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.
+ */
+export function Metafield(props) {
+    var _a;
+    const { data, children, as, ...passthroughProps } = props;
+    const { locale } = 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.createElement(Wrapper, { ...passthroughProps }, data.value.toLocaleDateString(locale)));
+        }
+        case 'date_time': {
+            const Wrapper = as !== null && as !== void 0 ? as : 'time';
+            return (React.createElement(Wrapper, { ...passthroughProps }, data.value.toLocaleString(locale)));
+        }
+        case 'weight':
+        case 'dimension':
+        case 'volume': {
+            const Wrapper = as !== null && as !== void 0 ? as : 'span';
+            return (React.createElement(Wrapper, { ...passthroughProps }, getMeasurementAsString(data.value, locale)));
+        }
+        case 'rating': {
+            const Wrapper = as !== null && as !== void 0 ? as : 'span';
+            return (React.createElement(Wrapper, { ...passthroughProps }, data.value.value));
+        }
+        case 'single_line_text_field': {
+            const Wrapper = as !== null && as !== void 0 ? as : 'span';
+            return (React.createElement(Wrapper, { ...passthroughProps, dangerouslySetInnerHTML: { __html: data.value } }));
+        }
+        case 'multi_line_text_field': {
+            const Wrapper = as !== null && as !== void 0 ? as : 'div';
+            return (React.createElement(Wrapper, { ...passthroughProps, dangerouslySetInnerHTML: {
+                    __html: data.value.split('\n').join('<br/>'),
+                } }));
+        }
+        case 'url':
+            return (React.createElement("a", { href: data.value, ...passthroughProps }, data.value));
+        case 'json': {
+            const Wrapper = as !== null && as !== void 0 ? as : 'span';
+            return (React.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.createElement(Image, { data: ref.image, ...passthroughProps })) : null;
+            }
+        }
+    }
+    const Wrapper = as !== null && as !== void 0 ? as : 'span';
+    return React.createElement(Wrapper, { ...passthroughProps }, data.value.toString());
+}

package/dist/esnext/components/Metafield/components/StarRating/StarRating.d.ts

@@ -0,0 +1,12 @@
+import { Rating } from '../../../../types';
+export declare const STAR_EMPTY = "\u2606";
+export declare const STAR_FILLED = "\u2605";
+export interface StarRatingProps<TTag> {
+    rating: Rating;
+    /** An HTML tag to be rendered as the base element wrapper. The default is `div`. */
+    as?: TTag;
+}
+export declare function StarRating<TTag extends keyof JSX.IntrinsicElements = 'div'>(props: JSX.IntrinsicElements[TTag] & StarRatingProps<TTag>): JSX.Element;
+export declare function Star({ percentFilled }: {
+    percentFilled: number;
+}): JSX.Element;

package/dist/esnext/components/Metafield/components/StarRating/StarRating.js

@@ -0,0 +1,48 @@
+import React, { useMemo } from 'react';
+export const STAR_EMPTY = '☆';
+export const STAR_FILLED = '★';
+export function StarRating(props) {
+    const { as, rating, ...passthroughProps } = props;
+    const starsArray = useMemo(() => {
+        const ratingMin = Math.floor(rating.scale_min);
+        const ratingMax = Math.floor(rating.scale_max);
+        const ratingInteger = Math.floor(rating.value);
+        const ratingPercent = (rating.value % 1) * 100;
+        const stars = [];
+        for (let i = ratingMin; i <= ratingMax; i++) {
+            if (i <= ratingInteger) {
+                stars.push(React.createElement(Star, { key: i, percentFilled: 100 }));
+            }
+            else if (i > ratingInteger + 1) {
+                stars.push(React.createElement(Star, { key: i, percentFilled: 0 }));
+            }
+            else {
+                stars.push(React.createElement(Star, { key: i, percentFilled: ratingPercent }));
+            }
+        }
+        return stars;
+    }, [rating.scale_min, rating.scale_max, rating.value]);
+    const Wrapper = as !== null && as !== void 0 ? as : 'div';
+    return React.createElement(Wrapper, { ...passthroughProps }, starsArray);
+}
+export function Star({ percentFilled }) {
+    if (percentFilled === 100) {
+        return React.createElement("span", null, STAR_FILLED);
+    }
+    if (percentFilled === 0) {
+        return React.createElement("span", null, STAR_EMPTY);
+    }
+    return (React.createElement("span", { style: {
+            position: 'relative',
+            display: 'inline-block',
+        } },
+        React.createElement("span", null, STAR_EMPTY),
+        React.createElement("span", { style: {
+                display: 'inline-block',
+                position: 'absolute',
+                top: '0',
+                left: '0',
+                width: `${percentFilled}%`,
+                overflow: 'hidden',
+            } }, STAR_FILLED)));
+}

package/dist/esnext/components/Metafield/components/StarRating/index.d.ts

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

package/dist/esnext/components/Metafield/components/StarRating/index.js

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

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

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

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

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

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

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

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

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

package/dist/esnext/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/esnext/components/Metafield/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esnext/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/esnext/components/ModelViewer/ModelViewer.client.js

@@ -0,0 +1,105 @@
+import React, { useState, useEffect, useCallback, } from 'react';
+import { useLoadScript } from '../../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).
+ */
+export function ModelViewer(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const [modelViewer, setModelViewer] = useState(undefined);
+    const callbackRef = useCallback((node) => {
+        setModelViewer(node);
+    }, []);
+    const { data, id = data.id, children, className, ...passthroughProps } = props;
+    const modelViewerLoadedStatus = useLoadScript('https://unpkg.com/@google/model-viewer@v1.8.0/dist/model-viewer.min.js', {
+        module: true,
+    });
+    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.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));
+}

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

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

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

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

package/dist/esnext/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/esnext/components/Money/Money.client.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useMoney } from '../../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).
+ */
+export 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 = 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.createElement(Wrapper, { ...passthroughProps },
+        output,
+        measurement && measurement.referenceUnit && (React.createElement(React.Fragment, null,
+            measurementSeparator,
+            measurement.referenceUnit))));
+}
+// 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/esnext/components/Money/index.d.ts

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

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

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

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Money } from '../Money';
+export interface ProductPriceProps {
+    /** 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. It must be a descendent of the `ProductProvider` component.
+ */
+export declare function ProductPrice<TTag extends keyof JSX.IntrinsicElements>(props: Omit<React.ComponentProps<typeof Money>, 'data' | 'measurement'> & ProductPriceProps): JSX.Element | null;