@shopify/hydrogen 0.22.0 → 0.24.0

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

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HomePageSeo = void 0;
+const react_1 = __importDefault(require("react"));
+const client_1 = require("../../client");
+const TitleSeo_client_1 = require("./TitleSeo.client");
+const DescriptionSeo_client_1 = require("./DescriptionSeo.client");
+function HomePageSeo({ title, description, url }) {
+    const organizationSchema = {
+        '@context': 'http://schema.org',
+        '@type': 'Organization',
+        name: title,
+        url,
+    };
+    const webSiteSchema = {
+        '@context': 'http://schema.org',
+        '@type': 'WebSite',
+        name: title,
+        url,
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(client_1.Head, null,
+            react_1.default.createElement("meta", { property: "og:url", content: url }),
+            react_1.default.createElement("script", { type: "application/ld+json" }, JSON.stringify(organizationSchema)),
+            react_1.default.createElement("script", { type: "application/ld+json" }, JSON.stringify(webSiteSchema))),
+        react_1.default.createElement(TitleSeo_client_1.TitleSeo, { title: title }),
+        description && react_1.default.createElement(DescriptionSeo_client_1.DescriptionSeo, { description: description })));
+}
+exports.HomePageSeo = HomePageSeo;

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

@@ -0,0 +1,3 @@
+import type { Image } from '../../storefront-api-types';
+import type { PartialDeep } from 'type-fest';
+export declare function ImageSeo({ url, width, height, altText }: PartialDeep<Image>): JSX.Element;

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

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageSeo = void 0;
+const react_1 = __importDefault(require("react"));
+const client_1 = require("../../client");
+function ImageSeo({ url, width, height, altText }) {
+    return (react_1.default.createElement(client_1.Head, null,
+        url && react_1.default.createElement("meta", { property: "og:image", content: url }),
+        url && react_1.default.createElement("meta", { property: "og:image:secure_url", content: url }),
+        width && react_1.default.createElement("meta", { property: "og:image:width", content: `${width}` }),
+        height && react_1.default.createElement("meta", { property: "og:image:height", content: `${height}` }),
+        altText && react_1.default.createElement("meta", { property: "og:image:alt", content: altText })));
+}
+exports.ImageSeo = ImageSeo;

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoIndexPageSeo = void 0;
+const react_1 = __importDefault(require("react"));
+const foundation_1 = require("../../foundation");
+const client_1 = require("../../client");
+function NoIndexPageSeo({ title, titleTemplate, lang, }) {
+    const { languageCode: fallBacklang } = (0, foundation_1.useShop)();
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(client_1.Head, { defaultTitle: title !== null && title !== void 0 ? title : '', titleTemplate: titleTemplate !== null && titleTemplate !== void 0 ? titleTemplate : `%s - ${title}` },
+            react_1.default.createElement("html", { lang: lang !== null && lang !== void 0 ? lang : fallBacklang }),
+            react_1.default.createElement("meta", { name: "robots", content: "noindex" }))));
+}
+exports.NoIndexPageSeo = NoIndexPageSeo;

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

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

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

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

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

@@ -0,0 +1,5 @@
+import type { Scalars, Product as ProductType } from '../../storefront-api-types';
+import type { PartialDeep } from 'type-fest';
+export declare function ProductSeo({ url, title, description, seo, vendor, featuredImage, variants, }: PartialDeep<ProductType> & {
+    url: Scalars['URL'];
+}): JSX.Element;

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

@@ -0,0 +1,70 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductSeo = void 0;
+const react_1 = __importDefault(require("react"));
+const client_1 = require("../../client");
+const TitleSeo_client_1 = require("./TitleSeo.client");
+const DescriptionSeo_client_1 = require("./DescriptionSeo.client");
+const TwitterSeo_client_1 = require("./TwitterSeo.client");
+const ImageSeo_client_1 = require("./ImageSeo.client");
+function ProductSeo({ url, title, description, seo, vendor, featuredImage, variants, }) {
+    var _a, _b, _c;
+    const seoTitle = (_a = seo === null || seo === void 0 ? void 0 : seo.title) !== null && _a !== void 0 ? _a : title;
+    const seoDescription = (_b = seo === null || seo === void 0 ? void 0 : seo.description) !== null && _b !== void 0 ? _b : description;
+    let firstVariantPrice;
+    const productSchema = {
+        '@context': 'http://schema.org/',
+        '@type': 'Product',
+        name: title,
+        description,
+        brand: {
+            '@type': 'Thing',
+            name: vendor,
+        },
+        url,
+    };
+    if (featuredImage) {
+        productSchema.image = featuredImage.url;
+    }
+    if ((variants === null || variants === void 0 ? void 0 : variants.edges) && variants.edges.length > 0) {
+        const firstVariant = (_c = variants.edges[0]) === null || _c === void 0 ? void 0 : _c.node;
+        firstVariantPrice = firstVariant === null || firstVariant === void 0 ? void 0 : firstVariant.priceV2;
+        if (firstVariant && firstVariant.sku) {
+            productSchema.sku = firstVariant.sku;
+        }
+        productSchema.offers = variants.edges.map((edge) => {
+            var _a;
+            const node = edge === null || edge === void 0 ? void 0 : edge.node;
+            if (!node || !((_a = node.priceV2) === null || _a === void 0 ? void 0 : _a.amount) || !node.priceV2.currencyCode) {
+                throw new Error(`<ProductSeo/> requires variant.PriceV2 'amount' and 'currency`);
+            }
+            const offerSchema = {
+                '@type': 'Offer',
+                availability: `https://schema.org/${node.availableForSale ? 'InStock' : 'OutOfStock'}`,
+                price: node.priceV2.amount,
+                priceCurrency: node.priceV2.currencyCode,
+            };
+            if (node.sku) {
+                offerSchema.sku = node.sku;
+            }
+            if (node.image && node.image.url) {
+                offerSchema.image = node.image.url;
+            }
+            return offerSchema;
+        });
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(client_1.Head, null,
+            react_1.default.createElement("meta", { property: "og:type", content: "og:product" }),
+            firstVariantPrice && (react_1.default.createElement("meta", { property: "og:price:amount", content: `${firstVariantPrice.amount}` })),
+            firstVariantPrice && (react_1.default.createElement("meta", { property: "og:price:currency", content: firstVariantPrice.currencyCode })),
+            react_1.default.createElement("script", { type: "application/ld+json" }, JSON.stringify(productSchema))),
+        react_1.default.createElement(TitleSeo_client_1.TitleSeo, { title: seoTitle }),
+        react_1.default.createElement(DescriptionSeo_client_1.DescriptionSeo, { description: seoDescription }),
+        react_1.default.createElement(TwitterSeo_client_1.TwitterSeo, { title: seoTitle, description: seoDescription }),
+        featuredImage && react_1.default.createElement(ImageSeo_client_1.ImageSeo, { ...featuredImage })));
+}
+exports.ProductSeo = ProductSeo;

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

@@ -0,0 +1,30 @@
+import { type ComponentProps } from 'react';
+import { ProductSeo } from './ProductSeo.client';
+import { CollectionSeo } from './CollectionSeo.client';
+import { PageSeo } from './PageSeo.client';
+import { NoIndexPageSeo } from './NoIndexSeo.client';
+import type { DefaultPage as DefaultPageType, HomePage as HomePageType } from './seo-types';
+declare type Props = {
+    type: 'defaultSeo';
+    data: Omit<DefaultPageType, 'url'>;
+} | {
+    type: 'homepage';
+    data: Omit<HomePageType, 'url'>;
+} | {
+    type: 'product';
+    data: Omit<ComponentProps<typeof ProductSeo>, 'url'>;
+} | {
+    type: 'collection';
+    data: ComponentProps<typeof CollectionSeo>;
+} | {
+    type: 'page';
+    data: ComponentProps<typeof PageSeo>;
+} | {
+    type: 'noindex';
+    data: ComponentProps<typeof NoIndexPageSeo>;
+};
+/**
+ * The `Seo` component renders SEO information on a webpage.
+ */
+export declare function Seo(props: Props): JSX.Element | null;
+export {};

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

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Seo = void 0;
+const react_1 = __importDefault(require("react"));
+const foundation_1 = require("../../foundation");
+const DefaultPageSeo_client_1 = require("./DefaultPageSeo.client");
+const HomePageSeo_client_1 = require("./HomePageSeo.client");
+const ProductSeo_client_1 = require("./ProductSeo.client");
+const CollectionSeo_client_1 = require("./CollectionSeo.client");
+const PageSeo_client_1 = require("./PageSeo.client");
+const NoIndexSeo_client_1 = require("./NoIndexSeo.client");
+/**
+ * The `Seo` component renders SEO information on a webpage.
+ */
+function Seo(props) {
+    const url = (0, foundation_1.useUrl)().href;
+    switch (props.type) {
+        case 'defaultSeo':
+            return react_1.default.createElement(DefaultPageSeo_client_1.DefaultPageSeo, { ...{ url, ...props.data } });
+        case 'homepage':
+            return react_1.default.createElement(HomePageSeo_client_1.HomePageSeo, { ...{ url, ...props.data } });
+        case 'product':
+            return react_1.default.createElement(ProductSeo_client_1.ProductSeo, { ...{ url, ...props.data } });
+        case 'collection':
+            return react_1.default.createElement(CollectionSeo_client_1.CollectionSeo, { ...props.data });
+        case 'page':
+            return react_1.default.createElement(PageSeo_client_1.PageSeo, { ...props.data });
+        case 'noindex':
+            return react_1.default.createElement(NoIndexSeo_client_1.NoIndexPageSeo, { ...props.data });
+        default:
+            console.warn('The <Seo/> only accepts type prop with values of defaultSeo, homepage, product, collection, or page.');
+            return null;
+    }
+}
+exports.Seo = Seo;

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

@@ -0,0 +1,3 @@
+import type { Seo as SeoType } from '../../storefront-api-types';
+import type { PartialDeep } from 'type-fest';
+export declare function TitleSeo({ title }: PartialDeep<SeoType>): JSX.Element | null;

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

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

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

@@ -0,0 +1,2 @@
+import type { Twitter } from './seo-types';
+export declare function TwitterSeo({ site, title, description }: Partial<Twitter>): JSX.Element;

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

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TwitterSeo = void 0;
+const react_1 = __importDefault(require("react"));
+const client_1 = require("../../client");
+function TwitterSeo({ site, title, description }) {
+    return (react_1.default.createElement(client_1.Head, null,
+        react_1.default.createElement("meta", { name: "twitter:card", content: "summary_large_image" }),
+        site && react_1.default.createElement("meta", { name: "twitter:site", content: site }),
+        title && react_1.default.createElement("meta", { name: "twitter:title", content: title }),
+        description && react_1.default.createElement("meta", { name: "twitter:description", content: description })));
+}
+exports.TwitterSeo = TwitterSeo;

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

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

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

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

package/dist/node/components/Seo/seo-types.d.ts

@@ -0,0 +1,17 @@
+import type { Scalars, Shop as ShopType, Seo as SeoType } from '../../storefront-api-types';
+export interface Twitter {
+    site: string;
+    title: SeoType['title'];
+    description: SeoType['description'];
+}
+export interface HomePage {
+    description: ShopType['description'];
+    title: ShopType['name'];
+    url: Scalars['URL'];
+}
+export interface DefaultPage extends ShopType {
+    title: ShopType['name'];
+    url: Scalars['URL'];
+    titleTemplate?: string;
+    lang?: string;
+}

package/dist/node/components/Seo/seo-types.js

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

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

@@ -0,0 +1,38 @@
+declare type ShopPayButtonProps = {
+    /** A string of classes to apply to the `div` that wraps the Shop Pay button. */
+    className?: string;
+} & ({
+    /** An array of IDs of the variants to purchase with Shop Pay. This will only ever have a quantity of 1 for each variant. If you want to use other quantities, then use 'variantIdsAndQuantities'. */
+    variantIds: string[];
+    /** An array of variant IDs and quantities to purchase with Shop Pay. */
+    variantIdsAndQuantities?: never;
+} | {
+    /** An array of IDs of the variants to purchase with Shop Pay. This will only ever have a quantity of 1 for each variant. If you want to use other quantities, then use 'variantIdsAndQuantities'. */
+    variantIds?: never;
+    /** An array of variant IDs and quantities to purchase with Shop Pay. */
+    variantIdsAndQuantities: Array<{
+        id: string;
+        quantity: number;
+    }>;
+});
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'shop-pay-button': {
+                variants: string;
+                'store-url': string;
+            };
+        }
+    }
+}
+/**
+ * The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout.
+ */
+export declare function ShopPayButton({ variantIds, className, variantIdsAndQuantities, }: ShopPayButtonProps): JSX.Element;
+/**
+ * Takes a string in the format of "gid://shopify/ProductVariant/41007289630776" and returns a string of the ID part at the end: "41007289630776"
+ */
+export declare function getIdFromGid(id?: string): string | undefined;
+export declare const MissingPropsErrorMessage = "You must pass in either \"variantIds\" or \"variantIdsAndQuantities\" to ShopPayButton";
+export declare const DoublePropsErrorMessage = "You must provide either a variantIds or variantIdsAndQuantities prop, but not both in the ShopPayButton component";
+export {};

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

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DoublePropsErrorMessage = exports.MissingPropsErrorMessage = exports.getIdFromGid = exports.ShopPayButton = void 0;
+const react_1 = __importDefault(require("react"));
+const useShop_1 = require("../../foundation/useShop");
+const useLoadScript_client_1 = require("../../hooks/useLoadScript/useLoadScript.client");
+const URL = 'https://cdn.shopify.com/shopifycloud/shop-js/v0.8/client.js';
+/**
+ * The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout.
+ */
+function ShopPayButton({ variantIds, className, variantIdsAndQuantities, }) {
+    const { storeDomain } = (0, useShop_1.useShop)();
+    const shopPayLoadedStatus = (0, useLoadScript_client_1.useLoadScript)(URL);
+    let ids;
+    if (variantIds && variantIdsAndQuantities) {
+        throw new Error(exports.DoublePropsErrorMessage);
+    }
+    if (variantIds) {
+        ids = variantIds.reduce((prev, curr) => {
+            const bareId = getIdFromGid(curr);
+            if (bareId) {
+                prev.push(bareId);
+            }
+            return prev;
+        }, []);
+    }
+    else if (variantIdsAndQuantities) {
+        ids = variantIdsAndQuantities.reduce((prev, curr) => {
+            var _a;
+            const bareId = getIdFromGid(curr === null || curr === void 0 ? void 0 : curr.id);
+            if (bareId) {
+                prev.push(`${bareId}:${(_a = curr === null || curr === void 0 ? void 0 : curr.quantity) !== null && _a !== void 0 ? _a : 1}`);
+            }
+            return prev;
+        }, []);
+    }
+    else {
+        throw new Error(exports.MissingPropsErrorMessage);
+    }
+    return (
+    /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+    react_1.default.createElement("div", { className: className, tabIndex: 0 }, shopPayLoadedStatus === 'done' && (react_1.default.createElement("shop-pay-button", { "store-url": `https://${storeDomain}`, variants: ids.join(',') })))
+    /* eslint-enable jsx-a11y/no-noninteractive-tabindex */
+    );
+}
+exports.ShopPayButton = ShopPayButton;
+/**
+ * Takes a string in the format of "gid://shopify/ProductVariant/41007289630776" and returns a string of the ID part at the end: "41007289630776"
+ */
+function getIdFromGid(id) {
+    if (!id)
+        return;
+    return id.split('/').pop();
+}
+exports.getIdFromGid = getIdFromGid;
+exports.MissingPropsErrorMessage = `You must pass in either "variantIds" or "variantIdsAndQuantities" to ShopPayButton`;
+exports.DoublePropsErrorMessage = `You must provide either a variantIds or variantIdsAndQuantities prop, but not both in the ShopPayButton component`;

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { shopifyImageLoader } from '../../utilities';
+import type { Video as VideoType } from '../../storefront-api-types';
+import type { PartialDeep } from 'type-fest';
+interface VideoProps {
+    /** An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/latest/objects/video). */
+    data: PartialDeep<VideoType>;
+    /** An object of image size options for the video's `previewImage`. Uses `shopifyImageLoader` to generate the `poster` URL. */
+    previewImageOptions?: Parameters<typeof shopifyImageLoader>[0];
+}
+/**
+ * The `Video` component renders a `video` for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video).
+ */
+export declare function Video(props: JSX.IntrinsicElements['video'] & VideoProps): JSX.Element;
+export {};

package/dist/node/components/Video/Video.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Video = void 0;
+const react_1 = __importDefault(require("react"));
+const utilities_1 = require("../../utilities");
+/**
+ * The `Video` component renders a `video` for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video).
+ */
+function Video(props) {
+    var _a, _b;
+    const { data, previewImageOptions, id = data.id, playsInline = true, controls = true, ...passthroughProps } = props;
+    const posterUrl = (0, utilities_1.shopifyImageLoader)({
+        src: (_b = (_a = data.previewImage) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '',
+        ...previewImageOptions,
+    });
+    if (!data.sources) {
+        throw new Error(`<Video/> requires a 'data.sources' array`);
+    }
+    return (
+    // eslint-disable-next-line jsx-a11y/media-has-caption
+    react_1.default.createElement("video", { ...passthroughProps, id: id, playsInline: playsInline, controls: controls, poster: posterUrl }, data.sources.map((source) => {
+        if (!((source === null || source === void 0 ? void 0 : source.url) && (source === null || source === void 0 ? void 0 : source.mimeType))) {
+            throw new Error(`<Video/> needs 'source.url' and 'source.mimeType'`);
+        }
+        return (react_1.default.createElement("source", { key: source.url, src: source.url, type: source.mimeType }));
+    })));
+}
+exports.Video = Video;

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

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

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

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

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

@@ -0,0 +1,28 @@
+export { Link } from './Link';
+export { MediaFile } from './MediaFile';
+export { Video } from './Video';
+export { Image } from './Image';
+export { ExternalVideo } from './ExternalVideo';
+export { AddToCartButton } from './AddToCartButton';
+export { ModelViewer } from './ModelViewer';
+export { Money } from './Money';
+export { Metafield } from './Metafield';
+export type { MetafieldType } from './Metafield';
+export { CartLineProvider, useCartLine } from './CartLineProvider';
+export { CartLineImage } from './CartLineImage';
+export { CartLinePrice } from './CartLinePrice';
+export { CartLineProductTitle } from './CartLineProductTitle';
+export { CartLineQuantity } from './CartLineQuantity';
+export { CartLineQuantityAdjustButton } from './CartLineQuantityAdjustButton';
+export { CartLines } from './CartLines';
+export { CartCheckoutButton } from './CartCheckoutButton';
+export { CartShopPayButton } from './CartShopPayButton';
+export { CartEstimatedCost } from './CartEstimatedCost';
+export { CartProvider, useCart, useInstantCheckout } from './CartProvider';
+export type { State, Status, Cart, CartWithActions, CartAction, } from './CartProvider';
+export { ProductOptionsProvider, useProductOptions, } from './ProductOptionsProvider';
+export { ProductPrice } from './ProductPrice';
+export { BuyNowButton } from './BuyNowButton';
+export { ShopPayButton } from './ShopPayButton';
+export { useCountry } from '../hooks/useCountry';
+export { Seo } from './Seo';

package/dist/node/components/index.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Seo = exports.useCountry = exports.ShopPayButton = exports.BuyNowButton = exports.ProductPrice = exports.useProductOptions = exports.ProductOptionsProvider = exports.useInstantCheckout = exports.useCart = exports.CartProvider = exports.CartEstimatedCost = exports.CartShopPayButton = exports.CartCheckoutButton = exports.CartLines = exports.CartLineQuantityAdjustButton = exports.CartLineQuantity = exports.CartLineProductTitle = exports.CartLinePrice = exports.CartLineImage = exports.useCartLine = exports.CartLineProvider = exports.Metafield = exports.Money = exports.ModelViewer = exports.AddToCartButton = exports.ExternalVideo = exports.Image = exports.Video = exports.MediaFile = exports.Link = void 0;
+var Link_1 = require("./Link");
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Link_1.Link; } });
+var MediaFile_1 = require("./MediaFile");
+Object.defineProperty(exports, "MediaFile", { enumerable: true, get: function () { return MediaFile_1.MediaFile; } });
+var Video_1 = require("./Video");
+Object.defineProperty(exports, "Video", { enumerable: true, get: function () { return Video_1.Video; } });
+var Image_1 = require("./Image");
+Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return Image_1.Image; } });
+var ExternalVideo_1 = require("./ExternalVideo");
+Object.defineProperty(exports, "ExternalVideo", { enumerable: true, get: function () { return ExternalVideo_1.ExternalVideo; } });
+var AddToCartButton_1 = require("./AddToCartButton");
+Object.defineProperty(exports, "AddToCartButton", { enumerable: true, get: function () { return AddToCartButton_1.AddToCartButton; } });
+var ModelViewer_1 = require("./ModelViewer");
+Object.defineProperty(exports, "ModelViewer", { enumerable: true, get: function () { return ModelViewer_1.ModelViewer; } });
+var Money_1 = require("./Money");
+Object.defineProperty(exports, "Money", { enumerable: true, get: function () { return Money_1.Money; } });
+var Metafield_1 = require("./Metafield");
+Object.defineProperty(exports, "Metafield", { enumerable: true, get: function () { return Metafield_1.Metafield; } });
+var CartLineProvider_1 = require("./CartLineProvider");
+Object.defineProperty(exports, "CartLineProvider", { enumerable: true, get: function () { return CartLineProvider_1.CartLineProvider; } });
+Object.defineProperty(exports, "useCartLine", { enumerable: true, get: function () { return CartLineProvider_1.useCartLine; } });
+var CartLineImage_1 = require("./CartLineImage");
+Object.defineProperty(exports, "CartLineImage", { enumerable: true, get: function () { return CartLineImage_1.CartLineImage; } });
+var CartLinePrice_1 = require("./CartLinePrice");
+Object.defineProperty(exports, "CartLinePrice", { enumerable: true, get: function () { return CartLinePrice_1.CartLinePrice; } });
+var CartLineProductTitle_1 = require("./CartLineProductTitle");
+Object.defineProperty(exports, "CartLineProductTitle", { enumerable: true, get: function () { return CartLineProductTitle_1.CartLineProductTitle; } });
+var CartLineQuantity_1 = require("./CartLineQuantity");
+Object.defineProperty(exports, "CartLineQuantity", { enumerable: true, get: function () { return CartLineQuantity_1.CartLineQuantity; } });
+var CartLineQuantityAdjustButton_1 = require("./CartLineQuantityAdjustButton");
+Object.defineProperty(exports, "CartLineQuantityAdjustButton", { enumerable: true, get: function () { return CartLineQuantityAdjustButton_1.CartLineQuantityAdjustButton; } });
+var CartLines_1 = require("./CartLines");
+Object.defineProperty(exports, "CartLines", { enumerable: true, get: function () { return CartLines_1.CartLines; } });
+var CartCheckoutButton_1 = require("./CartCheckoutButton");
+Object.defineProperty(exports, "CartCheckoutButton", { enumerable: true, get: function () { return CartCheckoutButton_1.CartCheckoutButton; } });
+var CartShopPayButton_1 = require("./CartShopPayButton");
+Object.defineProperty(exports, "CartShopPayButton", { enumerable: true, get: function () { return CartShopPayButton_1.CartShopPayButton; } });
+var CartEstimatedCost_1 = require("./CartEstimatedCost");
+Object.defineProperty(exports, "CartEstimatedCost", { enumerable: true, get: function () { return CartEstimatedCost_1.CartEstimatedCost; } });
+var CartProvider_1 = require("./CartProvider");
+Object.defineProperty(exports, "CartProvider", { enumerable: true, get: function () { return CartProvider_1.CartProvider; } });
+Object.defineProperty(exports, "useCart", { enumerable: true, get: function () { return CartProvider_1.useCart; } });
+Object.defineProperty(exports, "useInstantCheckout", { enumerable: true, get: function () { return CartProvider_1.useInstantCheckout; } });
+var ProductOptionsProvider_1 = require("./ProductOptionsProvider");
+Object.defineProperty(exports, "ProductOptionsProvider", { enumerable: true, get: function () { return ProductOptionsProvider_1.ProductOptionsProvider; } });
+Object.defineProperty(exports, "useProductOptions", { enumerable: true, get: function () { return ProductOptionsProvider_1.useProductOptions; } });
+var ProductPrice_1 = require("./ProductPrice");
+Object.defineProperty(exports, "ProductPrice", { enumerable: true, get: function () { return ProductPrice_1.ProductPrice; } });
+var BuyNowButton_1 = require("./BuyNowButton");
+Object.defineProperty(exports, "BuyNowButton", { enumerable: true, get: function () { return BuyNowButton_1.BuyNowButton; } });
+var ShopPayButton_1 = require("./ShopPayButton");
+Object.defineProperty(exports, "ShopPayButton", { enumerable: true, get: function () { return ShopPayButton_1.ShopPayButton; } });
+var useCountry_1 = require("../hooks/useCountry");
+Object.defineProperty(exports, "useCountry", { enumerable: true, get: function () { return useCountry_1.useCountry; } });
+var Seo_1 = require("./Seo");
+Object.defineProperty(exports, "Seo", { enumerable: true, get: function () { return Seo_1.Seo; } });