@shopify/hydrogen 0.11.1 → 0.13.1

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

@@ -1,7 +1,7 @@
-import { ElementType } from 'react';
-import { MoneyProps } from '../Money';
-import { Props } from '../types';
-export interface ProductPriceProps<TTag> extends Omit<MoneyProps<TTag>, 'data'> {
+import React from 'react';
+import { Money } from '../Money';
+import { UnitPrice } from '../UnitPrice';
+export interface ProductPriceProps {
     /** The type of price. Valid values: `regular` (default) or `compareAt`. */
     priceType?: 'regular' | 'compareAt';
     /** The type of value. Valid values: `min` (default), `max` or `unit`. */
@@ -13,4 +13,4 @@ export interface ProductPriceProps<TTag> extends Omit<MoneyProps<TTag>, 'data'>
  * The `ProductPrice` component renders a `Money` component with the product
  * [`priceRange`](/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range. It must be a descendent of the `ProductProvider` component.
  */
-export declare function ProductPrice<TTag extends ElementType>(props: Props<TTag> & ProductPriceProps<TTag>): JSX.Element | null;
+export declare function ProductPrice<TTag extends keyof JSX.IntrinsicElements>(props: (Omit<React.ComponentProps<typeof UnitPrice>, 'data' | 'measurement'> | Omit<React.ComponentProps<typeof Money>, 'data'>) & ProductPriceProps): JSX.Element | null;

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

@@ -16,7 +16,7 @@ export function ProductPrice(props) {
     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.id === 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) {
@@ -47,7 +47,7 @@ export function ProductPrice(props) {
             price = (_g = product.priceRange) === null || _g === void 0 ? void 0 : _g.minVariantPrice;
         }
     }
-    if (price == null) {
+    if (!price) {
         return null;
     }
     if (measurement) {

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

@@ -1,20 +1,20 @@
 import { ReactNode } from 'react';
 import { useProductOptions } from '../../hooks';
-import { Product } from './types';
+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](/api/storefront/reference/products/product). */
-    data: Product;
-    /** The initially selected variant. This is required only if you're using a `SelectedVariantX` hook in the `ProductProvider` component.*/
+    data: PartialDeep<ProductType>;
+    /** The initially selected variant. If this is missing, then `selectedVariantId`
+     * in the returned `object` from the `useProduct` hook uses the first available variant
+     * or the first variant (if none are available).
+     */
     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 and the related `ProductX` or `SelectedVariantX` hooks.
+ * this component can use the `useProduct` hook.
  */
 export declare function ProductProvider({ children, data: product, initialVariantId, }: ProductProviderProps): JSX.Element;
-export declare namespace ProductProvider {
-    var Fragment: string;
-}
-export declare const ProductProviderFragment = "\nfragment ProductProviderFragment on Product  {\n  compareAtPriceRange {\n    maxVariantPrice {\n      ...MoneyFragment\n    }\n    minVariantPrice {\n      ...MoneyFragment\n    }\n  }\n  descriptionHtml\n  handle\n  id\n  media(first: $numProductMedia) {\n    edges {\n      node {\n        ...MediaFileFragment\n      }\n    }\n  }\n  metafields(first: $numProductMetafields) {\n    edges {\n      node {\n        ...MetafieldFragment\n      }\n    }\n  }\n  priceRange {\n    maxVariantPrice {\n      ...MoneyFragment\n    }\n    minVariantPrice {\n      ...MoneyFragment\n    }\n  }\n  title\n  variants(first: $numProductVariants) {\n    edges {\n      node {\n        ...VariantFragment\n      }\n    }\n  }\n  sellingPlanGroups(first: $numProductSellingPlanGroups) {\n    edges {\n      node {\n        ...SellingPlanGroupsFragment\n      }\n    }\n  }\n}\n\n\nfragment MediaFileFragment on Media {\n  ... on MediaImage {\n    mediaContentType\n    image {\n      ...ImageFragment\n    }\n  }\n  ... on Video {\n    mediaContentType\n    ...VideoFragment\n  }\n  ... on ExternalVideo {\n    mediaContentType\n    ...ExternalVideoFragment\n  }\n  ... on Model3d {\n    mediaContentType\n    ...Model3DFragment\n  }\n}\n\n\nfragment MetafieldFragment on Metafield {\n  id\n  type\n  namespace\n  key\n  value\n  createdAt\n  updatedAt\n  description\n  reference @include(if: $includeReferenceMetafieldDetails) {\n    __typename\n    ... on MediaImage {\n      id\n      mediaContentType\n      image {\n        ...ImageFragment\n      }\n    }\n  }\n}\n\nfragment VariantFragment on ProductVariant {\n  id\n  title\n  availableForSale\n  image {\n    ...ImageFragment\n  }\n  ...UnitPriceFragment\n  priceV2 {\n    ...MoneyFragment\n  }\n  compareAtPriceV2 {\n    ...MoneyFragment\n  }\n  selectedOptions {\n    name\n    value\n  }\n  metafields(first: $numProductVariantMetafields) {\n    edges {\n      node {\n        ...MetafieldFragment\n      }\n    }\n  }\n  sellingPlanAllocations(first: $numProductVariantSellingPlanAllocations) {\n    edges {\n      node {\n        priceAdjustments {\n          compareAtPrice {\n            ...MoneyFragment\n          }\n          perDeliveryPrice {\n            ...MoneyFragment\n          }\n          price {\n            ...MoneyFragment\n          }\n          unitPrice {\n            ...MoneyFragment\n          }\n        }\n        sellingPlan {\n          ...SellingPlanFragment\n        }\n      }\n    }\n  }\n}\n\n\nfragment SellingPlanGroupsFragment on SellingPlanGroup {\n  sellingPlans(first:$numProductSellingPlans) {\n    edges {\n      node {\n        ...SellingPlanFragment\n      }\n    }\n  }\n  appName\n  name\n  options {\n    name\n    values\n  }\n}\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n\nfragment VideoFragment on Video {\n  id\n  previewImage {\n    url\n  }\n  sources {\n    mimeType\n    url\n  }\n}\n\nfragment ExternalVideoFragment on ExternalVideo {\n  id\n  embeddedUrl\n  host\n}\n\nfragment Model3DFragment on Model3d {\n  id\n  alt\n  mediaContentType\n  previewImage {\n    url\n  }\n  sources {\n    url\n  }\n}\n\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n\n\nfragment SellingPlanFragment on SellingPlan {\n  id\n  description\n  name\n  options {\n    name\n    value\n  }\n  priceAdjustments {\n    orderCount\n    adjustmentValue {\n      ...on SellingPlanFixedAmountPriceAdjustment {\n        adjustmentAmount {\n          ...MoneyFragment\n        }\n      }\n      ...on SellingPlanFixedPriceAdjustment {\n        price {\n          ...MoneyFragment\n        }\n      }\n      ...on SellingPlanPercentagePriceAdjustment {\n        adjustmentPercentage\n      }\n    }\n  }\n  recurringDeliveries\n}\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n\n\nfragment UnitPriceFragment on ProductVariant {\n  unitPriceMeasurement {\n    measuredType\n    quantityUnit\n    quantityValue\n    referenceUnit\n    referenceValue\n  }\n  unitPrice {\n    ...MoneyFragment\n  }\n}\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\n\nfragment SellingPlanFragment on SellingPlan {\n  id\n  description\n  name\n  options {\n    name\n    value\n  }\n  priceAdjustments {\n    orderCount\n    adjustmentValue {\n      ...on SellingPlanFixedAmountPriceAdjustment {\n        adjustmentAmount {\n          ...MoneyFragment\n        }\n      }\n      ...on SellingPlanFixedPriceAdjustment {\n        price {\n          ...MoneyFragment\n        }\n      }\n      ...on SellingPlanPercentagePriceAdjustment {\n        adjustmentPercentage\n      }\n    }\n  }\n  recurringDeliveries\n}\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}";

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

@@ -2,14 +2,14 @@ import React, { useMemo } from 'react';
 import { useParsedMetafields } from '../../hooks';
 import { flattenConnection } from '../../utilities';
 import { ProductContext } from './context';
-import { ProductProviderFragment as Fragment } from '../../graphql/graphql-constants';
 import { ProductOptionsProvider } from './ProductOptionsProvider.client';
 /**
  * The `ProductProvider` component sets up a context with product details. Descendents of
- * this component can use the `useProduct` hook and the related `ProductX` or `SelectedVariantX` hooks.
+ * 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,
@@ -32,5 +32,3 @@ export function ProductProvider({ children, data: product, initialVariantId, })
     return (React.createElement(ProductContext.Provider, { value: providerValue },
         React.createElement(ProductOptionsProvider, { initialVariantId: initialVariantId }, children)));
 }
-ProductProvider.Fragment = Fragment;
-export const ProductProviderFragment = Fragment;

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

@@ -1,20 +1,29 @@
 import { ProductOptionsHookValue } from '../../hooks';
 import { ParsedMetafield } from '../../types';
-import { ProductProviderFragmentFragment } from './ProductProviderFragment';
-import { Product } from './types';
-import { Collection, Image } from '../../graphql/types/types';
-import type { Variant } from '../../hooks/useProductOptions';
-export declare const ProductContext: import("react").Context<ProductContextType | null>;
-export declare type ProductContextType = Omit<Product, 'media' | 'metafields' | 'images' | 'collections' | 'variants' | 'sellingPlanGroups' | 'options'> & {
-    media?: ProductProviderFragmentFragment['media']['edges'][0]['node'][];
-    mediaConnection?: Product['media'];
+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?: Product['metafields'];
+    metafieldsConnection?: ProductType['metafields'];
     images?: Partial<Image>[];
-    imagesConnection?: Product['images'];
+    imagesConnection?: ProductType['images'];
     collections?: Partial<Collection>[];
-    collectionsConnection?: Product['collections'];
-    variants?: Partial<Variant>[];
-    variantsConnection?: Product['variants'];
-};
+    collectionsConnection?: ProductType['collections'];
+    variants?: Partial<ProductVariantType>[];
+    variantsConnection?: ProductType['variants'];
+}>;
 export declare const ProductOptionsContext: import("react").Context<ProductOptionsHookValue | null>;

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

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

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

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

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

@@ -1,2 +1,3 @@
-import { Collection } from './types';
-export declare function CollectionSeo({ title, description, seo, image }: Collection): JSX.Element;
+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

@@ -3,10 +3,10 @@ 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 }) {
+export function CollectionSeo({ title, description, seo, image, }) {
     var _a, _b;
-    const seoTitle = (_a = seo.title) !== null && _a !== void 0 ? _a : title;
-    const seoDescription = (_b = seo.description) !== null && _b !== void 0 ? _b : description;
+    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 }),

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

@@ -1,2 +1,3 @@
-import type { DefaultPage } from './types';
-export declare function DefaultPageSeo({ title, description, url, titleTemplate, lang, }: DefaultPage): JSX.Element;
+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

@@ -8,10 +8,10 @@ export function DefaultPageSeo({ title, description, url, titleTemplate, lang, }
     const { locale } = useShop();
     const fallBacklang = locale.split(/[-_]/)[0];
     return (React.createElement(React.Fragment, null,
-        React.createElement(Head, { defaultTitle: title, titleTemplate: titleTemplate !== null && titleTemplate !== void 0 ? titleTemplate : `%s - ${title}` },
+        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 }),
+            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 }),

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

@@ -1,4 +1,4 @@
-import type { Description } from './types';
-export declare function DescriptionSeo({ description }: {
-    description?: Description;
+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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Head } from '../../client';
-export function DescriptionSeo({ description }) {
+export function DescriptionSeo({ description, }) {
     if (!description) {
         return null;
     }

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

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

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

@@ -1,2 +1,3 @@
-import type { Image } from './types';
-export declare function ImageSeo({ url, width, height, altText }: Partial<Image>): JSX.Element;
+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/PageSeo.client.d.ts

@@ -1,2 +1,3 @@
-import { Page } from './types';
-export declare function PageSeo({ title, seo }: Page): JSX.Element;
+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

@@ -4,8 +4,8 @@ import { DescriptionSeo } from './DescriptionSeo.client';
 import { TwitterSeo } from './TwitterSeo.client';
 export function PageSeo({ title, seo }) {
     var _a;
-    const seoTitle = (_a = seo.title) !== null && _a !== void 0 ? _a : title;
-    const seoDescription = seo.description;
+    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 }),

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

@@ -1,2 +1,5 @@
-import { Product } from './types';
-export declare function ProductSeo({ url, title, description, seo, vendor, featuredImage, variants, }: Product): JSX.Element;
+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

@@ -5,7 +5,7 @@ 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;
+    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;
@@ -23,13 +23,18 @@ export function ProductSeo({ url, title, description, seo, vendor, featuredImage
     if (featuredImage) {
         productSchema.image = featuredImage.url;
     }
-    if (variants.edges.length > 0) {
-        const firstVariant = variants.edges[0].node;
-        firstVariantPrice = firstVariant.priceV2;
+    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(({ node }) => {
+        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'}`,

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

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

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

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

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

@@ -1,4 +1,3 @@
-import type { Title } from './types';
-export declare function TitleSeo({ title }: {
-    title?: Title;
-}): JSX.Element | null;
+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/TwitterSeo.client.d.ts

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

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/ShopPayButton/ShopPayButton.client.d.ts

@@ -1,4 +1,4 @@
-export declare type ShopPayButtonProps = {
+declare type ShopPayButtonProps = {
     /** A string of classes to apply to the `div` that wraps the Shop Pay button. */
     className?: string;
 } & ({
@@ -35,3 +35,4 @@ export declare function ShopPayButton({ variantIds, className, variantIdsAndQuan
 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

@@ -42,15 +42,7 @@ export function ShopPayButton({ variantIds, className, variantIdsAndQuantities,
 export function getIdFromGid(id) {
     if (!id)
         return;
-    let gid;
-    // atob() / Buffer required for SFAPI 2022-01. Remove atob() when upgrading to 2022-04
-    if (typeof (window === null || window === void 0 ? void 0 : window.atob) !== 'undefined') {
-        gid = window.atob(id);
-    }
-    else {
-        gid = Buffer.from(id, 'base64').toString('ascii');
-    }
-    return gid.split('/').pop();
+    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/UnitPrice/UnitPrice.client.d.ts

@@ -1,20 +1,15 @@
-import { ElementType } from 'react';
-import { Props } from '../types';
-import { UnitPriceMeasurement, MoneyV2 } from '../../graphql/types/types';
+import type { UnitPriceMeasurement, MoneyV2 } from '../../storefront-api-types';
+import type { PartialDeep } from 'type-fest';
 export interface UnitPriceProps<TTag> {
-    /** A [`MoneyV2` object](/api/storefront/reference/common-objects/moneyv2). */
-    data: MoneyV2;
-    /** A [`UnitPriceMeasurement` object](/api/storefront/reference/products/unitpricemeasurement). */
-    measurement: UnitPriceMeasurement;
+    /** An object with fields that correspond to the Storefront API's [MoneyV2 object](/api/storefront/reference/common-objects/moneyv2). */
+    data: PartialDeep<MoneyV2>;
+    /** A [UnitPriceMeasurement object](/api/storefront/reference/products/unitpricemeasurement). */
+    measurement: PartialDeep<UnitPriceMeasurement>;
     /** An HTML tag to be rendered as the base element wrapper. The default is `div`. */
     as?: TTag;
 }
 /**
  * The `UnitPrice` component renders a string with a [UnitPrice](/themes/pricing-payments/unit-pricing) as the
- * [Storefront API's `MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from the [Storefront API's `UnitPriceMeasurement` object](/api/storefront/reference/products/unitpricemeasurement).
+ * Storefront API's [MoneyV2 object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from the Storefront API's [UnitPriceMeasurement object](/api/storefront/reference/products/unitpricemeasurement).
  */
-export declare function UnitPrice<TTag extends ElementType>(props: Props<TTag> & UnitPriceProps<TTag>): JSX.Element;
-export declare namespace UnitPrice {
-    var Fragment: string;
-}
-export declare const UnitPriceFragment = "\nfragment UnitPriceFragment on ProductVariant {\n  unitPriceMeasurement {\n    measuredType\n    quantityUnit\n    quantityValue\n    referenceUnit\n    referenceValue\n  }\n  unitPrice {\n    ...MoneyFragment\n  }\n}\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}";
+export declare function UnitPrice<TTag extends keyof JSX.IntrinsicElements = 'div'>(props: JSX.IntrinsicElements[TTag] & UnitPriceProps<TTag>): JSX.Element | null;

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

@@ -1,17 +1,22 @@
 import React from 'react';
 import { Money } from '../Money';
-import { UnitPriceFragment as Fragment } from '../../graphql/graphql-constants';
 /**
  * The `UnitPrice` component renders a string with a [UnitPrice](/themes/pricing-payments/unit-pricing) as the
- * [Storefront API's `MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from the [Storefront API's `UnitPriceMeasurement` object](/api/storefront/reference/products/unitpricemeasurement).
+ * Storefront API's [MoneyV2 object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from the Storefront API's [UnitPriceMeasurement object](/api/storefront/reference/products/unitpricemeasurement).
  */
 export function UnitPrice(props) {
     const { data, measurement, as, ...passthroughProps } = props;
+    if (!data) {
+        console.warn(`No "data" prop was passed to <UnitPrice/>`);
+        return null;
+    }
+    if (!measurement) {
+        console.warn(`No "measurement" prop was passed to <UnitPrice/>`);
+        return null;
+    }
     const Wrapper = as !== null && as !== void 0 ? as : 'div';
     return (React.createElement(Wrapper, { ...passthroughProps },
         React.createElement(Money, { data: data }),
         "/",
         measurement.referenceUnit));
 }
-UnitPrice.Fragment = Fragment;
-export const UnitPriceFragment = Fragment;

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

@@ -1 +1 @@
-export { UnitPrice, UnitPriceFragment } from './UnitPrice.client';
+export { UnitPrice } from './UnitPrice.client';

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

@@ -1 +1 @@
-export { UnitPrice, UnitPriceFragment } from './UnitPrice.client';
+export { UnitPrice } from './UnitPrice.client';

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

@@ -1,22 +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 {
-    /** An object corresponding to the [GraphQL fragment](#graphql-fragment). */
-    data: {
-        id?: VideoType['id'];
-        previewImage?: Pick<Image, 'url'>;
-        sources: Pick<VideoSource, 'url' | 'mimeType'>[];
-    };
+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](/api/storefront/latest/objects/video). */
+    data: PartialDeep<VideoType>;
     /** An object of image size options for the video's `previewImage`. */
     options?: ImageSizeOptions;
 }
 /**
- * The `Video` component renders a `video` for the Storefront API's [`Video` object](/api/storefront/reference/products/video).
+ * The `Video` component renders a `video` for the Storefront API's [Video object](/api/storefront/reference/products/video).
  */
-export declare function Video<TTag extends React.ElementType = 'video'>(props: Props<TTag> & VideoProps): JSX.Element;
-export declare namespace Video {
-    var Fragment: string;
-}
-export declare const VideoFragment = "fragment VideoFragment on Video {\n  id\n  previewImage {\n    url\n  }\n  sources {\n    mimeType\n    url\n  }\n}\n\n";
+export declare function Video(props: JSX.IntrinsicElements['video'] & VideoProps): JSX.Element;
+export {};

package/dist/esnext/components/Video/Video.js

@@ -1,14 +1,19 @@
-import * as React from 'react';
+import React from 'react';
 import { useImageUrl } from '../../utilities';
-import { VideoFragment as Fragment } from '../../graphql/graphql-constants';
 /**
- * The `Video` component renders a `video` for the Storefront API's [`Video` object](/api/storefront/reference/products/video).
+ * The `Video` component renders a `video` for the Storefront API's [Video object](/api/storefront/reference/products/video).
  */
 export function Video(props) {
     var _a;
     const { data, options, id = data.id, playsInline = true, controls = true, ...passthroughProps } = props;
     const posterUrl = useImageUrl((_a = data.previewImage) === null || _a === void 0 ? void 0 : _a.url, options);
-    return (React.createElement("video", { ...passthroughProps, id: id, playsInline: playsInline, controls: controls, poster: posterUrl }, data.sources.map((source) => (React.createElement("source", { key: source.url, src: source.url, type: source.mimeType })))));
+    if (!data.sources) {
+        throw new Error(`<Video/> requires a 'data.sources' array`);
+    }
+    return (React.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.createElement("source", { key: source.url, src: source.url, type: source.mimeType }));
+    })));
 }
-Video.Fragment = Fragment;
-export const VideoFragment = Fragment;

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

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

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

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