@shopify/hydrogen 0.0.0-experimental-20220526194818

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Money } from '../Money';
+import { useProduct } from '../ProductProvider';
+/**
+ * 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 function ProductPrice(props) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const product = useProduct();
+    const { priceType = 'regular', variantId, valueType = 'min', ...passthroughProps } = props;
+    if (product == null) {
+        throw new Error('Expected a ProductProvider context, but none was found');
+    }
+    let price;
+    let measurement;
+    const variant = variantId
+        ? (_a = product === null || product === void 0 ? void 0 : product.variants) === null || _a === void 0 ? void 0 : _a.find((variant) => (variant === null || variant === void 0 ? void 0 : variant.id) === variantId)
+        : null;
+    if (priceType === 'compareAt') {
+        if (variantId && variant) {
+            if (((_b = variant.compareAtPriceV2) === null || _b === void 0 ? void 0 : _b.amount) === ((_c = variant.priceV2) === null || _c === void 0 ? void 0 : _c.amount)) {
+                return null;
+            }
+            price = variant.compareAtPriceV2;
+        }
+        else if (valueType === 'max') {
+            price = (_d = product === null || product === void 0 ? void 0 : product.compareAtPriceRange) === null || _d === void 0 ? void 0 : _d.maxVariantPrice;
+        }
+        else {
+            price = (_e = product === null || product === void 0 ? void 0 : product.compareAtPriceRange) === null || _e === void 0 ? void 0 : _e.minVariantPrice;
+        }
+    }
+    else {
+        if (variantId && variant) {
+            price = variant.priceV2;
+            if (valueType === 'unit') {
+                price = variant.unitPrice;
+                measurement = variant.unitPriceMeasurement;
+            }
+        }
+        else if (valueType === 'max') {
+            price = (_f = product.priceRange) === null || _f === void 0 ? void 0 : _f.maxVariantPrice;
+        }
+        else {
+            price = (_g = product.priceRange) === null || _g === void 0 ? void 0 : _g.minVariantPrice;
+        }
+    }
+    if (!price) {
+        return null;
+    }
+    if (measurement) {
+        return (React.createElement(Money, { ...passthroughProps, data: price, measurement: measurement }));
+    }
+    return React.createElement(Money, { ...passthroughProps, data: price });
+}

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

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

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

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

package/dist/esnext/components/ProductProvider/ProductOptionsProvider.client.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ProductProviderProps } from './ProductProvider.client';
+interface ProductOptionsProviderProps {
+    children: React.ReactNode;
+    initialVariantId: ProductProviderProps['initialVariantId'];
+}
+export declare function ProductOptionsProvider({ children, initialVariantId, }: ProductOptionsProviderProps): JSX.Element;
+export {};

package/dist/esnext/components/ProductProvider/ProductOptionsProvider.client.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ProductOptionsContext } from './context';
+import { useProductOptions } from '../../hooks';
+import { useProduct } from '../../hooks/useProduct';
+export function ProductOptionsProvider({ children, initialVariantId, }) {
+    const product = useProduct();
+    const productOptions = useProductOptions({
+        variants: product.variantsConnection,
+        initialVariantId,
+    });
+    return (React.createElement(ProductOptionsContext.Provider, { value: productOptions }, children));
+}

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

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { useProductOptions } from '../../hooks';
+import type { Product as ProductType } from '../../storefront-api-types';
+import type { PartialDeep } from 'type-fest';
+export interface ProductProviderProps {
+    /** A `ReactNode` element. */
+    children: ReactNode;
+    /** A [Product object](https://shopify.dev/api/storefront/reference/products/product). */
+    data: PartialDeep<ProductType>;
+    /** The initially selected variant.
+     * The following logic applies to `initialVariantId`:
+     * If `initialVariantId` is provided, then it's used, even if it's out of stock.
+     * If `initialVariantId` is provided, but is `null`, then no variant is used.
+     * If nothing is passed to `initialVariantId`, and you're in a `ProductProvider`, then `selectedVariant.id` is used.
+     * If nothing is passed to `initialVariantId` and you're not in a `ProductProvider`, then the first available or in-stock variant is used.
+     * If nothing is passed to `initialVariantId`, you're not in a `ProductProvider`, and no variants are in stock, then the first variant is used.
+     */
+    initialVariantId?: Parameters<typeof useProductOptions>['0']['initialVariantId'];
+}
+/**
+ * The `ProductProvider` component sets up a context with product details. Descendents of
+ * this component can use the `useProduct` hook.
+ */
+export declare function ProductProvider({ children, data: product, initialVariantId, }: ProductProviderProps): JSX.Element;

package/dist/esnext/components/ProductProvider/ProductProvider.client.js

@@ -0,0 +1,34 @@
+import React, { useMemo } from 'react';
+import { useParsedMetafields } from '../../hooks';
+import { flattenConnection } from '../../utilities';
+import { ProductContext } from './context';
+import { ProductOptionsProvider } from './ProductOptionsProvider.client';
+/**
+ * The `ProductProvider` component sets up a context with product details. Descendents of
+ * this component can use the `useProduct` hook.
+ */
+export function ProductProvider({ children, data: product, initialVariantId, }) {
+    const metafields = useParsedMetafields(product.metafields || {});
+    // @ts-expect-error The types here are broken on main, need to come back and fix them sometime
+    const providerValue = useMemo(() => {
+        return {
+            ...product,
+            metafields,
+            metafieldsConnection: product.metafields,
+            media: product.media ? flattenConnection(product.media) : undefined,
+            mediaConnection: product.media,
+            variants: product.variants
+                ? flattenConnection(product.variants)
+                : undefined,
+            variantsConnection: product.variants,
+            images: product.images ? flattenConnection(product.images) : undefined,
+            imagesConnection: product.images,
+            collections: product.collections
+                ? flattenConnection(product.collections)
+                : undefined,
+            collectionsConnection: product.collections,
+        };
+    }, [metafields, product]);
+    return (React.createElement(ProductContext.Provider, { value: providerValue },
+        React.createElement(ProductOptionsProvider, { initialVariantId: initialVariantId }, children)));
+}

package/dist/esnext/components/ProductProvider/context.d.ts

@@ -0,0 +1,29 @@
+import { ProductOptionsHookValue } from '../../hooks';
+import { ParsedMetafield } from '../../types';
+import type { Collection, Image, Product as ProductType, ProductVariant as ProductVariantType, MediaEdge as MediaEdgeType } from '../../storefront-api-types';
+import type { PartialDeep } from 'type-fest';
+export declare const ProductContext: import("react").Context<import("type-fest/source/partial-deep").PartialObjectDeep<Omit<ProductType, "media" | "options" | "metafields" | "variants" | "sellingPlanGroups" | "collections" | "images"> & {
+    media?: import("../../storefront-api-types").ExternalVideo | import("../../storefront-api-types").MediaImage | import("../../storefront-api-types").Model3d | import("../../storefront-api-types").Video | undefined;
+    mediaConnection?: import("../../storefront-api-types").MediaConnection | undefined;
+    metafields?: ParsedMetafield[] | undefined;
+    metafieldsConnection?: import("../../storefront-api-types").MetafieldConnection | undefined;
+    images?: Partial<Image>[] | undefined;
+    imagesConnection?: import("../../storefront-api-types").ImageConnection | undefined;
+    collections?: Partial<Collection>[] | undefined;
+    collectionsConnection?: import("../../storefront-api-types").CollectionConnection | undefined;
+    variants?: Partial<ProductVariantType>[] | undefined;
+    variantsConnection?: import("../../storefront-api-types").ProductVariantConnection | undefined;
+}> | null>;
+export declare type ProductContextType = PartialDeep<Omit<ProductType, 'media' | 'metafields' | 'images' | 'collections' | 'variants' | 'sellingPlanGroups' | 'options'> & {
+    media?: MediaEdgeType['node'];
+    mediaConnection?: ProductType['media'];
+    metafields?: ParsedMetafield[];
+    metafieldsConnection?: ProductType['metafields'];
+    images?: Partial<Image>[];
+    imagesConnection?: ProductType['images'];
+    collections?: Partial<Collection>[];
+    collectionsConnection?: ProductType['collections'];
+    variants?: Partial<ProductVariantType>[];
+    variantsConnection?: ProductType['variants'];
+}>;
+export declare const ProductOptionsContext: import("react").Context<ProductOptionsHookValue | null>;

package/dist/esnext/components/ProductProvider/context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+export const ProductContext = createContext(null);
+export const ProductOptionsContext = createContext(null);

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TitleSeo } from './TitleSeo.client';
+import { DescriptionSeo } from './DescriptionSeo.client';
+import { TwitterSeo } from './TwitterSeo.client';
+import { ImageSeo } from './ImageSeo.client';
+export function CollectionSeo({ title, description, seo, image, }) {
+    var _a, _b;
+    const seoTitle = (_a = seo === null || seo === void 0 ? void 0 : seo.title) !== null && _a !== void 0 ? _a : title;
+    const seoDescription = (_b = seo === null || seo === void 0 ? void 0 : seo.description) !== null && _b !== void 0 ? _b : description;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TitleSeo, { title: seoTitle }),
+        React.createElement(DescriptionSeo, { description: seoDescription }),
+        React.createElement(TwitterSeo, { title: seoTitle, description: seoDescription }),
+        image && React.createElement(ImageSeo, { ...image })));
+}

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

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

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useShop } from '../../foundation';
+import { Head } from '../../client';
+import { TitleSeo } from './TitleSeo.client';
+import { DescriptionSeo } from './DescriptionSeo.client';
+import { TwitterSeo } from './TwitterSeo.client';
+export function DefaultPageSeo({ title, description, url, titleTemplate, lang, }) {
+    const { languageCode: fallBacklang } = useShop();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Head, { defaultTitle: title !== null && title !== void 0 ? title : '', titleTemplate: titleTemplate !== null && titleTemplate !== void 0 ? titleTemplate : `%s - ${title}` },
+            React.createElement("html", { lang: lang !== null && lang !== void 0 ? lang : fallBacklang }),
+            React.createElement("meta", { property: "og:type", content: "website" }),
+            React.createElement("meta", { property: "og:site_name", content: title !== null && title !== void 0 ? title : '' }),
+            React.createElement("meta", { property: "og:url", content: url })),
+        React.createElement(TitleSeo, { title: title }),
+        React.createElement(DescriptionSeo, { description: description }),
+        React.createElement(TwitterSeo, { title: title, description: description })));
+}

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Head } from '../../client';
+export function DescriptionSeo({ description, }) {
+    if (!description) {
+        return null;
+    }
+    return (React.createElement(Head, null,
+        React.createElement("meta", { name: "description", content: description }),
+        React.createElement("meta", { property: "og:description", content: description })));
+}

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

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

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Head } from '../../client';
+import { TitleSeo } from './TitleSeo.client';
+import { DescriptionSeo } from './DescriptionSeo.client';
+export 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.createElement(React.Fragment, null,
+        React.createElement(Head, null,
+            React.createElement("meta", { property: "og:url", content: url }),
+            React.createElement("script", { type: "application/ld+json" }, JSON.stringify(organizationSchema)),
+            React.createElement("script", { type: "application/ld+json" }, JSON.stringify(webSiteSchema))),
+        React.createElement(TitleSeo, { title: title }),
+        description && React.createElement(DescriptionSeo, { description: description })));
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Head } from '../../client';
+export function ImageSeo({ url, width, height, altText }) {
+    return (React.createElement(Head, null,
+        url && React.createElement("meta", { property: "og:image", content: url }),
+        url && React.createElement("meta", { property: "og:image:secure_url", content: url }),
+        width && React.createElement("meta", { property: "og:image:width", content: `${width}` }),
+        height && React.createElement("meta", { property: "og:image:height", content: `${height}` }),
+        altText && React.createElement("meta", { property: "og:image:alt", content: altText })));
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { useShop } from '../../foundation';
+import { Head } from '../../client';
+export function NoIndexPageSeo({ title, titleTemplate, lang, }) {
+    const { languageCode: fallBacklang } = useShop();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Head, { defaultTitle: title !== null && title !== void 0 ? title : '', titleTemplate: titleTemplate !== null && titleTemplate !== void 0 ? titleTemplate : `%s - ${title}` },
+            React.createElement("html", { lang: lang !== null && lang !== void 0 ? lang : fallBacklang }),
+            React.createElement("meta", { name: "robots", content: "noindex" }))));
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TitleSeo } from './TitleSeo.client';
+import { DescriptionSeo } from './DescriptionSeo.client';
+import { TwitterSeo } from './TwitterSeo.client';
+export 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.createElement(React.Fragment, null,
+        React.createElement(TitleSeo, { title: seoTitle }),
+        React.createElement(DescriptionSeo, { description: seoDescription }),
+        React.createElement(TwitterSeo, { title: seoTitle, description: seoDescription })));
+}

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Head } from '../../client';
+import { TitleSeo } from './TitleSeo.client';
+import { DescriptionSeo } from './DescriptionSeo.client';
+import { TwitterSeo } from './TwitterSeo.client';
+import { ImageSeo } from './ImageSeo.client';
+export 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.createElement(React.Fragment, null,
+        React.createElement(Head, null,
+            React.createElement("meta", { property: "og:type", content: "og:product" }),
+            firstVariantPrice && (React.createElement("meta", { property: "og:price:amount", content: `${firstVariantPrice.amount}` })),
+            firstVariantPrice && (React.createElement("meta", { property: "og:price:currency", content: firstVariantPrice.currencyCode })),
+            React.createElement("script", { type: "application/ld+json" }, JSON.stringify(productSchema))),
+        React.createElement(TitleSeo, { title: seoTitle }),
+        React.createElement(DescriptionSeo, { description: seoDescription }),
+        React.createElement(TwitterSeo, { title: seoTitle, description: seoDescription }),
+        featuredImage && React.createElement(ImageSeo, { ...featuredImage })));
+}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useUrl } from '../../foundation';
+import { DefaultPageSeo } from './DefaultPageSeo.client';
+import { HomePageSeo } from './HomePageSeo.client';
+import { ProductSeo } from './ProductSeo.client';
+import { CollectionSeo } from './CollectionSeo.client';
+import { PageSeo } from './PageSeo.client';
+import { NoIndexPageSeo } from './NoIndexSeo.client';
+/**
+ * The `Seo` component renders SEO information on a webpage.
+ */
+export function Seo(props) {
+    const url = useUrl().href;
+    switch (props.type) {
+        case 'defaultSeo':
+            return React.createElement(DefaultPageSeo, { ...{ url, ...props.data } });
+        case 'homepage':
+            return React.createElement(HomePageSeo, { ...{ url, ...props.data } });
+        case 'product':
+            return React.createElement(ProductSeo, { ...{ url, ...props.data } });
+        case 'collection':
+            return React.createElement(CollectionSeo, { ...props.data });
+        case 'page':
+            return React.createElement(PageSeo, { ...props.data });
+        case 'noindex':
+            return React.createElement(NoIndexPageSeo, { ...props.data });
+        default:
+            console.warn('The <Seo/> only accepts type prop with values of defaultSeo, homepage, product, collection, or page.');
+            return null;
+    }
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Head } from '../../client';
+export function TitleSeo({ title }) {
+    if (!title) {
+        return null;
+    }
+    return (React.createElement(Head, null,
+        React.createElement("title", null, title),
+        React.createElement("meta", { property: "og:title", content: title })));
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Head } from '../../client';
+export function TwitterSeo({ site, title, description }) {
+    return (React.createElement(Head, null,
+        React.createElement("meta", { name: "twitter:card", content: "summary_large_image" }),
+        site && React.createElement("meta", { name: "twitter:site", content: site }),
+        title && React.createElement("meta", { name: "twitter:title", content: title }),
+        description && React.createElement("meta", { name: "twitter:description", content: description })));
+}

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

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

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

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

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

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

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { useShop } from '../../foundation/useShop';
+import { useLoadScript } from '../../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.
+ */
+export function ShopPayButton({ variantIds, className, variantIdsAndQuantities, }) {
+    const { storeDomain } = useShop();
+    const shopPayLoadedStatus = useLoadScript(URL);
+    let ids;
+    if (variantIds && variantIdsAndQuantities) {
+        throw new Error(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(MissingPropsErrorMessage);
+    }
+    return (
+    /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+    React.createElement("div", { className: className, tabIndex: 0 }, shopPayLoadedStatus === 'done' && (React.createElement("shop-pay-button", { "store-url": `https://${storeDomain}`, variants: ids.join(',') })))
+    /* eslint-enable jsx-a11y/no-noninteractive-tabindex */
+    );
+}
+/**
+ * Takes a string in the format of "gid://shopify/ProductVariant/41007289630776" and returns a string of the ID part at the end: "41007289630776"
+ */
+export function getIdFromGid(id) {
+    if (!id)
+        return;
+    return id.split('/').pop();
+}
+export const MissingPropsErrorMessage = `You must pass in either "variantIds" or "variantIdsAndQuantities" to ShopPayButton`;
+export const DoublePropsErrorMessage = `You must provide either a variantIds or variantIdsAndQuantities prop, but not both in the ShopPayButton component`;

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

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