@shopify/hydrogen 1.0.0-alpha.22 → 1.0.0

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Head } from '../../foundation/Head';
+import { useLocalization } from '../../hooks/useLocalization/useLocalization';
+import { TitleSeo } from './TitleSeo.client';
+import { DescriptionSeo } from './DescriptionSeo.client';
+import { TwitterSeo } from './TwitterSeo.client';
+export function DefaultPageSeo({ title, description, url, titleTemplate, lang, }) {
+    const { language: { isoCode: fallBacklang }, } = useLocalization();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Head, { defaultTitle: title ?? '', titleTemplate: titleTemplate ?? `%s - ${title}` },
+            React.createElement("html", { lang: lang ?? fallBacklang }),
+            React.createElement("meta", { property: "og:type", content: "website" }),
+            React.createElement("meta", { property: "og:site_name", content: 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 '../../foundation/Head';
+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, titleTemplate, }: HomePage): JSX.Element;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Head } from '../../foundation/Head';
+import { TitleSeo } from './TitleSeo.client';
+import { DescriptionSeo } from './DescriptionSeo.client';
+export function HomePageSeo({ title, description, url, titleTemplate, }) {
+    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, { defaultTitle: title ?? '', titleTemplate: titleTemplate ?? `%s` },
+            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 '../../foundation/Head';
+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 { useLocalization } from '../../hooks/useLocalization/useLocalization';
+import { Head } from '../../foundation/Head/Head.client';
+export function NoIndexPageSeo({ title, titleTemplate, lang, }) {
+    const { language: { isoCode: fallBacklang }, } = useLocalization();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Head, { defaultTitle: title ?? '', titleTemplate: titleTemplate ?? `%s - ${title}` },
+            React.createElement("html", { lang: 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,12 @@
+import React from 'react';
+import { TitleSeo } from './TitleSeo.client';
+import { DescriptionSeo } from './DescriptionSeo.client';
+import { TwitterSeo } from './TwitterSeo.client';
+export function PageSeo({ title, seo }) {
+    const seoTitle = seo?.title ?? title;
+    const seoDescription = 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,62 @@
+import React from 'react';
+import { Head } from '../../foundation/Head';
+import { TitleSeo } from './TitleSeo.client';
+import { DescriptionSeo } from './DescriptionSeo.client';
+import { TwitterSeo } from './TwitterSeo.client';
+import { ImageSeo } from './ImageSeo.client';
+import { flattenConnection } from '../../utilities/flattenConnection';
+export function ProductSeo({ url, title, description, seo, vendor, featuredImage, variants, }) {
+    const seoTitle = seo?.title ?? title;
+    const seoDescription = seo?.description ?? 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;
+    }
+    const flattenedVariants = flattenConnection(variants ?? {});
+    if (flattenedVariants.length) {
+        const firstVariant = flattenedVariants[0];
+        firstVariantPrice = firstVariant?.priceV2;
+        if (firstVariant && firstVariant.sku) {
+            productSchema.sku = firstVariant.sku;
+        }
+        productSchema.offers = flattenedVariants.map((node) => {
+            if (!node || !node.priceV2?.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/useUrl';
+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 '../../foundation/Head';
+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 '../../foundation/Head';
+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,18 @@
+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'];
+    titleTemplate?: string;
+}
+export interface DefaultPage extends ShopType {
+    title: ShopType['name'];
+    url: Scalars['URL'];
+    titleTemplate?: string;
+    lang?: string;
+}

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

@@ -1,7 +1,22 @@
-export interface ShopPayButtonProps {
-    variantIds: string[];
+declare type ShopPayButtonProps = {
+    /** A string of classes to apply to the `div` that wraps the Shop Pay button. */
     className?: string;
-}
+    /** A string that's applied to the [CSS custom property (variable)](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) `--shop-pay-button-width` for the [Buy with Shop Pay component](https://shopify.dev/custom-storefronts/tools/web-components#buy-with-shop-pay-component). */
+    width?: 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 {
@@ -12,4 +27,14 @@ declare global {
         }
     }
 }
-export declare function ShopPayButton({ variantIds, className }: ShopPayButtonProps): JSX.Element;
+/**
+ * The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout.
+ */
+export declare function ShopPayButton({ variantIds, className, variantIdsAndQuantities, width, }: 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

@@ -1,32 +1,56 @@
-import React, { useEffect, useState } from 'react';
-import { useShop } from '../../foundation/ShopifyProvider';
-import { loadScript } from '../../utilities';
-const URL = 'https://cdn.shopify.com/shopifycloud/shop-js/v0.1/client.js';
-export function ShopPayButton({ variantIds, className }) {
-    const [ids, setIds] = useState([]);
-    const [shopPayLoaded, setShopPayLoaded] = useState(false);
+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/v1.0/client.js';
+/**
+ * The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout.
+ */
+export function ShopPayButton({ variantIds, className, variantIdsAndQuantities, width, }) {
     const { storeDomain } = useShop();
-    useEffect(() => {
-        const ids = variantIds.reduce((accumulator, gid) => {
-            const id = atob(gid).split('/').pop();
-            if (id) {
-                accumulator.push(id);
+    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 accumulator;
+            return prev;
         }, []);
-        setIds(ids);
-    }, [variantIds]);
-    useEffect(() => {
-        async function loadShopPay() {
-            const loaded = await loadScript(URL, {
-                module: true,
-            });
-            if (!loaded) {
-                console.warn('shop-pay-button library did not load');
+    }
+    else if (variantIdsAndQuantities) {
+        ids = variantIdsAndQuantities.reduce((prev, curr) => {
+            const bareId = getIdFromGid(curr?.id);
+            if (bareId) {
+                prev.push(`${bareId}:${curr?.quantity ?? 1}`);
             }
-            setShopPayLoaded(true);
+            return prev;
+        }, []);
+    }
+    else {
+        throw new Error(MissingPropsErrorMessage);
+    }
+    const style = width
+        ? {
+            '--shop-pay-button-width': width,
         }
-        loadShopPay();
-    }, []);
-    return (React.createElement("div", { className: className }, shopPayLoaded && (React.createElement("shop-pay-button", { "store-url": `https://${storeDomain}`, variants: ids.join(',') }))));
+        : undefined;
+    return (
+    /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+    React.createElement("div", { className: className, tabIndex: 0, style: style }, 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

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

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

@@ -1,13 +1,14 @@
-import * as React from 'react';
-import { Props } from '../types';
-import { ImageSizeOptions } from '../../utilities';
-import { Video as VideoType, VideoSource, Image } from '../../graphql/types/types';
-export interface VideoProps {
-    video: {
-        id?: VideoType['id'];
-        previewImage?: Pick<Image, 'originalSrc'>;
-        sources: Pick<VideoSource, 'url' | 'mimeType'>[];
-    };
-    options?: ImageSizeOptions;
+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];
 }
-export declare function Video<TTag extends React.ElementType = 'video'>(props: Props<TTag> & VideoProps): JSX.Element;
+/**
+ * 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/esnext/components/Video/Video.js

@@ -1,8 +1,23 @@
-import * as React from 'react';
-import { useImageUrl } from '../../utilities';
+import React from 'react';
+import { shopifyImageLoader } from '../../utilities';
+/**
+ * The `Video` component renders a `video` for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video).
+ */
 export function Video(props) {
-    var _a;
-    const { video, options, id = video.id, playsInline = true, controls = true, ...passthroughProps } = props;
-    const posterUrl = useImageUrl((_a = video.previewImage) === null || _a === void 0 ? void 0 : _a.originalSrc, options);
-    return (React.createElement("video", { ...passthroughProps, id: id, playsInline: playsInline, controls: controls, poster: posterUrl }, video.sources.map((source) => (React.createElement("source", { key: source.url, src: source.url, type: source.mimeType })))));
+    const { data, previewImageOptions, id = data.id, playsInline = true, controls = true, ...passthroughProps } = props;
+    const posterUrl = shopifyImageLoader({
+        src: data.previewImage?.url ?? '',
+        ...previewImageOptions,
+    });
+    if (!data.sources) {
+        throw new Error(`<Video/> requires a 'data.sources' array`);
+    }
+    return (
+    // eslint-disable-next-line jsx-a11y/media-has-caption
+    React.createElement("video", { ...passthroughProps, id: id, playsInline: playsInline, controls: controls, poster: posterUrl }, data.sources.map((source) => {
+        if (!(source?.url && source?.mimeType)) {
+            throw new Error(`<Video/> needs 'source.url' and 'source.mimeType'`);
+        }
+        return (React.createElement("source", { key: source.url, src: source.url, type: source.mimeType }));
+    })));
 }

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

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

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

@@ -1,41 +1,28 @@
-export { Link } from 'react-router-dom';
-export * from './MediaFile';
-export * from './Video';
-export * from './Image';
-export * from './ExternalVideo';
-export * from './RawHtml';
-export * from './AddToCartButton';
-export * from './Model3D';
-export * from './Money';
-export * from './CartUIProvider';
-export * from './CartToggle';
-export * from './CartLineProvider';
-export * from './CartLineImage';
-export * from './CartLinePrice';
-export * from './CartLineProductTitle';
-export * from './CartLineQuantity';
-export * from './CartLineQuantityAdjustButton';
-export * from './CartLineAttributes';
-export * from './CartLines';
-export * from './CartContainer';
-export * from './CartCheckoutButton';
-export * from './CartShopPayButton';
-export * from './CartTotal';
-export * from './Metafield';
-export * from './ProductProvider';
-export * from './ProductDescription';
-export * from './ProductTitle';
-export * from './ProductPrice';
-export * from './ProductMetafield';
-export * from './SelectedVariantPrice';
-export * from './SelectedVariantAddToCartButton';
-export * from './SelectedVariantBuyNowButton';
-export * from './SelectedVariantShopPayButton';
-export * from './SelectedVariantUnitPrice';
-export * from './SelectedVariantImage';
-export * from './SelectedVariantMetafield';
-export * from './BuyNowButton';
-export * from './ShopPayButton';
-export * from './CartProvider';
-export declare const Product: Function & Record<string, any>;
-export declare const CartLine: Function & Record<string, any>;
+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 { CartCost } from './CartCost';
+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 { useLocalization } from '../hooks/useLocalization/useLocalization';
+export { Seo } from './Seo';