@shopify/hydrogen 0.24.0 → 0.25.0

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

@@ -1,165 +0,0 @@
-"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.composeEventHandlers = exports.Link = void 0;
-const react_1 = __importStar(require("react"));
-const BrowserRouter_client_1 = require("../../foundation/Router/BrowserRouter.client");
-const history_1 = require("history");
-const useNavigate_1 = require("../../foundation/useNavigate/useNavigate");
-const constants_1 = require("../../constants");
-const use_server_props_1 = require("../../foundation/useServerProps/use-server-props");
-/**
- * The `Link` component is used to navigate between routes. Because it renders an underlying `<a>` element, all
- * properties available to the `<a>` element are also available to the `Link` component.
- * For more information, refer to the [`<a>` element documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes).
- */
-exports.Link = react_1.default.forwardRef(function Link(props, ref) {
-    const navigate = (0, useNavigate_1.useNavigate)();
-    const { location } = (0, BrowserRouter_client_1.useRouter)();
-    const [_, startTransition] = react_1.default.useTransition();
-    /**
-     * Inspired by Remix's Link component
-     */
-    const [shouldPrefetch, setShouldPrefetch] = (0, react_1.useState)(false);
-    const [maybePrefetch, setMaybePrefetch] = (0, react_1.useState)(false);
-    const { reloadDocument, target, replace: _replace, to, onClick, clientState, prefetch = true, scroll = true, } = props;
-    const internalClick = (0, react_1.useCallback)((e) => {
-        if (onClick)
-            onClick(e);
-        if (!reloadDocument && // do regular browser stuff
-            e.button === 0 && // Ignore everything but left clicks
-            (!target || target === '_self') && // Let browser handle "target=_blank"
-            !isModifiedEvent(e) // Ignore modifier key clicks
-        ) {
-            e.preventDefault();
-            // If the URL hasn't changed, the regular <a> will do a replace
-            const replace = !!_replace || (0, history_1.createPath)(location) === (0, history_1.createPath)({ pathname: to });
-            navigate(to, {
-                replace,
-                scroll,
-                clientState,
-            });
-        }
-    }, [
-        onClick,
-        reloadDocument,
-        target,
-        _replace,
-        location,
-        to,
-        navigate,
-        clientState,
-        scroll,
-    ]);
-    const signalPrefetchIntent = () => {
-        /**
-         * startTransition to yield to more important updates
-         */
-        startTransition(() => {
-            if (prefetch) {
-                setMaybePrefetch(true);
-            }
-        });
-    };
-    const cancelPrefetchIntent = () => {
-        /**
-         * startTransition to yield to more important updates
-         */
-        startTransition(() => {
-            if (prefetch) {
-                setMaybePrefetch(false);
-            }
-        });
-    };
-    /**
-     * Wrapping `maybePrefetch` inside useEffect allows the user to quickly graze over
-     * a link without triggering a prefetch.
-     */
-    (0, react_1.useEffect)(() => {
-        if (maybePrefetch) {
-            const id = setTimeout(() => {
-                setShouldPrefetch(true);
-            }, 100);
-            return () => {
-                clearTimeout(id);
-            };
-        }
-    }, [maybePrefetch]);
-    const onMouseEnter = composeEventHandlers(props.onMouseEnter, signalPrefetchIntent);
-    const onMouseLeave = composeEventHandlers(props.onMouseLeave, cancelPrefetchIntent);
-    const onFocus = composeEventHandlers(props.onFocus, signalPrefetchIntent);
-    const onBlur = composeEventHandlers(props.onBlur, cancelPrefetchIntent);
-    const onTouchStart = composeEventHandlers(props.onTouchStart, signalPrefetchIntent);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("a", { ...without(props, [
-                'to',
-                'replace',
-                'clientState',
-                'reloadDocument',
-                'prefetch',
-                'scroll',
-            ]), ref: ref, onClick: internalClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, onTouchStart: onTouchStart, href: props.to }, props.children),
-        shouldPrefetch && react_1.default.createElement(Prefetch, { pathname: to })));
-});
-function Prefetch({ pathname }) {
-    const { getProposedLocationServerProps } = (0, use_server_props_1.useInternalServerProps)();
-    const { location } = (0, BrowserRouter_client_1.useRouter)();
-    const newPath = (0, history_1.createPath)({ pathname });
-    if (pathname.startsWith('http') || newPath === (0, history_1.createPath)(location)) {
-        return null;
-    }
-    const newLocation = new URL(newPath, window.location.href);
-    const proposedServerState = getProposedLocationServerProps({
-        pathname: newLocation.pathname,
-        search: newLocation.search,
-    });
-    const href = `${constants_1.RSC_PATHNAME}?state=` +
-        encodeURIComponent(JSON.stringify(proposedServerState));
-    return react_1.default.createElement("link", { rel: "prefetch", as: "fetch", href: href });
-}
-/**
- * Credit: Remix's <Link> component.
- */
-function composeEventHandlers(theirHandler, ourHandler) {
-    return (event) => {
-        theirHandler === null || theirHandler === void 0 ? void 0 : theirHandler(event);
-        if (!event.defaultPrevented) {
-            ourHandler(event);
-        }
-    };
-}
-exports.composeEventHandlers = composeEventHandlers;
-function isModifiedEvent(event) {
-    return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
-}
-function without(obj, props) {
-    const newObj = {};
-    for (const key of Object.keys(obj)) {
-        if (!props.includes(key)) {
-            newObj[key] = obj[key];
-        }
-    }
-    return newObj;
-}

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

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

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

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

package/dist/node/components/LocalizationProvider/LocalizationClientProvider.client.d.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from 'react';
-import { Localization } from './LocalizationContext.client';
-export default function LocalizationClientProvider({ localization, children, }: {
-    children: ReactNode;
-    localization: Localization;
-}): JSX.Element;

package/dist/node/components/LocalizationProvider/LocalizationClientProvider.client.js

@@ -1,11 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const LocalizationContext_client_1 = require("./LocalizationContext.client");
-function LocalizationClientProvider({ localization, children, }) {
-    return (react_1.default.createElement(LocalizationContext_client_1.LocalizationContext.Provider, { value: localization }, children));
-}
-exports.default = LocalizationClientProvider;

package/dist/node/components/LocalizationProvider/LocalizationContext.client.d.ts

@@ -1,6 +0,0 @@
-import type { LocalizationQuery } from './LocalizationProvider.server';
-export declare type Localization = LocalizationQuery['localization'];
-export interface LocalizationContextValue {
-    country?: Localization['country'];
-}
-export declare const LocalizationContext: import("react").Context<LocalizationContextValue | null>;

package/dist/node/components/LocalizationProvider/LocalizationContext.client.js

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

package/dist/node/components/LocalizationProvider/LocalizationProvider.server.d.ts

@@ -1,33 +0,0 @@
-import { ReactNode } from 'react';
-import { PreloadOptions } from '../../types';
-import { Country } from '../../storefront-api-types';
-export interface LocalizationProviderProps {
-    /** A `ReactNode` element. */
-    children: ReactNode;
-    /** Whether to preload the query. Defaults to `false`. Specify `true` to
-     * [preload the query](https://shopify.dev/custom-storefronts/hydrogen/framework/preloaded-queries) for the URL
-     * or `'*'` to preload the query for all requests.
-     */
-    preload: PreloadOptions;
-}
-/**
- * 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.
- */
-export declare function LocalizationProvider(props: LocalizationProviderProps): JSX.Element;
-export declare type LocalizationQuery = {
-    __typename?: 'QueryRoot';
-} & {
-    localization: {
-        __typename?: 'Localization';
-    } & {
-        country: {
-            __typename?: 'Country';
-        } & Pick<Country, 'isoCode' | 'name'>;
-    };
-};

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

@@ -1,51 +0,0 @@
-"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

@@ -1,19 +0,0 @@
-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

@@ -1,39 +0,0 @@
-"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

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

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

@@ -1,5 +0,0 @@
-"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

@@ -1,21 +0,0 @@
-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

@@ -1,75 +0,0 @@
-"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

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

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

@@ -1,5 +0,0 @@
-"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

@@ -1,4 +0,0 @@
-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

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

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

@@ -1,128 +0,0 @@
-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 {};